/* ═══════════════════════════════════════════════
 * Colégio Tecla — seções da página do Ensino Fundamental 2
 * ═══════════════════════════════════════════════
 *
 * Só o que é desta página. O vocabulário compartilhado com as outras páginas de
 * segmento (chapéu, cabeçalho, destaques, faixa, divisor, quadro de vídeo), os
 * tokens `--tcf-*` e a neutralização dos wrappers do Elementor estão em
 * `tecla-segmentos.css`, que carrega antes desta folha.
 *
 * O wrapper é `.tc.tc-seg#tc-fundamental2` (ver `page-anos-finais.php`).
 *
 * Toda regra começa com `.tc ` de propósito — o motivo está explicado no
 * cabeçalho de `tecla-segmentos.css`.
 * ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
 * Peças desta página
 * ─────────────────────────────────────────────── */

/* Botão azul-marinho, exclusivo do cartão de visita do fim da página. */
.tc .tc-btn--navy {
  background: var(--tc-navy);
  color: #fff;
  box-shadow: 0 10px 26px rgba(6, 29, 106, .22);
}
.tc .tc-btn--navy:hover,
.tc .tc-btn--navy:focus-visible {
  background: var(--tc-blue);
  color: #fff;
}

/* Botão grande com título e linha de apoio. */
.tc .tcg-bigbtn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .25s ease;
}
.tc .tcg-bigbtn:hover { transform: translateY(-2px); text-decoration: none; }
.tc .tcg-bigbtn--yellow {
  background: var(--tc-yellow);
  color: var(--tc-navy);
  box-shadow: 0 10px 26px rgba(251, 192, 9, .3);
}
.tc .tcg-bigbtn__ic {
  width: 32px;
  height: 32px;
  flex: none;
  color: var(--tc-navy);
}
.tc .tcg-bigbtn__ic svg { width: 100%; height: 100%; }
.tc .tcg-bigbtn__tx { font-size: 11.5px; line-height: 1.35; }
.tc .tcg-bigbtn__tx .tcf-cardtitle {
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: inherit;
}

/* Cartão de citação que invade o canto da foto. */
.tc .tcg-quote {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: min(400px, calc(100% - 36px));
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--tc-navy);
  color: rgba(255, 255, 255, .9);
  font-size: 12.5px;
  line-height: 1.55;
  box-shadow: 0 16px 40px rgba(6, 29, 106, .3);
}
.tc .tcg-quote__mark { width: 20px; flex: none; color: var(--tc-yellow); }
.tc .tcg-quote__mark svg { width: 100%; height: auto; }
.tc .tcg-quote .tcf-heart { color: var(--tc-yellow); }

/* Palavras escritas por cima da foto. */
/* As palavras ficam por cima de uma foto qualquer, que pode ser clara ou
   cheia de detalhe. O painel translúcido é o que garante que elas continuem
   legíveis quando alguém trocar a imagem pelo painel. */
.tc .tcg-overlay {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 10px 15px;
  border-radius: 12px;
  background: rgba(6, 29, 106, .34);
  backdrop-filter: blur(3px);
  text-align: right;
  font-size: clamp(13px, 1.4vw, 18px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 14px rgba(6, 29, 106, .55);
}
.tc .tcg-overlay b { color: var(--tc-yellow); font-weight: 800; }
.tc .tcg-overlay--script {
  top: auto;
  bottom: 18px;
  left: 18px;
  right: auto;
  padding: 8px 16px;
  text-align: left;
  font-size: clamp(18px, 1.9vw, 24px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tc-yellow);
}

/* ───────────────────────────────────────────────
 * 2. Hero
 * ─────────────────────────────────────────────── */
.tc .tcg-hero { padding-block: 26px 8px; }

.tc .tcg-hero__stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  grid-template-areas:
    'content media'
    'strip   strip';
  border-radius: var(--tcf-radius);
  background: var(--tcf-cream);
  overflow: hidden;
  box-shadow: var(--tc-shadow-hi);
}

.tc .tcg-hero__media {
  grid-area: media;
  position: relative;
  min-height: 620px;
}
.tc .tcg-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
/* Véu à esquerda da foto: dissolve a borda dela sobre o creme sem precisar de
   uma imagem já tratada. */
.tc .tcg-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--tcf-cream) 0%, rgba(253, 248, 239, .35) 26%, rgba(253, 248, 239, 0) 52%);
}

.tc .tcg-hero__content {
  grid-area: content;
  position: relative;
  z-index: 2;
  align-self: center;
  padding: 52px 20px 44px 52px;
}
.tc .tcg-hero__title {
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
}
.tc .tcg-hero__script {
  margin-top: 6px;
  font-size: clamp(26px, 3.1vw, 40px);
  line-height: 1.16;
  color: var(--tc-amber);
}
.tc .tcg-hero__text {
  margin-top: 20px;
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.62;
  color: var(--tc-text);
}
.tc .tcg-hero__text b { font-weight: 800; color: var(--tc-navy); }

.tc .tcg-hero__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 26px;
  padding: 0;
}
.tc .tcg-hero__pillars .tcf-feat__ic {
  background: none;
  color: var(--tc-navy);
  width: 42px;
  height: 42px;
}
.tc .tcg-hero__pillars .tcf-feat__ic svg { width: 30px; height: 30px; }
.tc .tcg-hero__pillars .tcf-cardtitle {
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tc .tcg-hero__pillars .tcf-feat__tx { font-size: 11.5px; }

.tc .tcg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 28px;
}
.tc .tcg-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tc-navy);
  text-decoration: none;
}
.tc .tcg-hero__link svg { width: 19px; height: 19px; color: var(--tc-amber); transition: transform .25s ease; }
.tc .tcg-hero__link:hover { color: var(--tc-blue); text-decoration: none; }
.tc .tcg-hero__link:hover svg { transform: translateX(4px); }

/* Faixa azul-marinho do rodapé do cartão. */
.tc .tcg-strip {
  grid-area: strip;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 26px 32px;
  padding: 24px 34px;
  background: var(--tc-navy);
  color: rgba(255, 255, 255, .82);
}
.tc .tcg-strip__script {
  max-width: 210px;
  padding-right: 30px;
  border-right: 1px solid rgba(255, 255, 255, .22);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.25;
  color: var(--tc-yellow);
}
.tc .tcg-strip__script .tcf-heart { color: var(--tc-yellow); }
.tc .tcg-strip__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 0;
}
.tc .tcg-strip__list .tcf-feat__ic {
  width: 32px;
  height: 32px;
  background: none;
  color: var(--tc-yellow);
}
.tc .tcg-strip__list .tcf-feat__ic svg { width: 28px; height: 28px; }
.tc .tcg-strip__list .tcf-feat__tx { font-size: 11px; color: rgba(255, 255, 255, .72); }
.tc .tcg-strip__list .tcf-cardtitle {
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
}

/* ───────────────────────────────────────────────
 * 3. Manifesto
 * ─────────────────────────────────────────────── */
.tc .tcg-mani { padding-block: 60px; }

.tc .tcg-mani__box {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  min-height: 520px;
  border-radius: var(--tcf-radius);
  overflow: hidden;
  background: var(--tcf-cream);
  box-shadow: var(--tc-shadow-hi);
}
.tc .tcg-mani__photo { position: relative; }
.tc .tcg-mani__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tc .tcg-mani__panel {
  display: grid;
  align-items: center;
  padding: 52px 48px;
}
.tc .tcg-mani__inner { max-width: 540px; }
.tc .tcg-mani__text {
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.66;
  color: var(--tc-text-soft);
}
.tc .tcg-mani__text b { font-weight: 800; color: var(--tc-navy); }
.tc .tcg-mani__text--close { margin-top: 22px; color: var(--tc-text); }

/* ───────────────────────────────────────────────
 * 4. Vídeo
 * ─────────────────────────────────────────────── */
.tc .tcg-video { padding-block: 16px 60px; }

.tc .tcg-video__box {
  border-radius: var(--tcf-radius);
  background: var(--tcf-cream);
  padding: 46px 42px 40px;
  box-shadow: var(--tc-shadow);
}
/* As colunas de destaque do vídeo ganham um fio entre elas, como no layout. */
.tc .tcg-video__feats .tcf-feat {
  padding-inline: 18px;
  border-right: 1px solid var(--tc-line);
}
.tc .tcg-video__feats .tcf-feat:last-child { border-right: 0; }
.tc .tcg-video__feats .tcf-feat:first-child { padding-left: 0; }

/* ───────────────────────────────────────────────
 * 5, 6 e 7. Meia-tela + colunas
 * ─────────────────────────────────────────────── */
.tc .tcg-split { padding-block: 16px 60px; }

.tc .tcg-split__box {
  border-radius: var(--tcf-radius);
  background: var(--tcf-cream);
  padding: 46px 42px 40px;
  box-shadow: var(--tc-shadow);
}

.tc .tcg-split__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
}
/* A seção de projetos e a de depoimentos invertem os lados. */
.tc .tcg-split__top--rev .tcg-split__content { order: 2; }
.tc .tcg-split__top--rev .tcg-split__media { order: 1; }

.tc .tcg-split__media {
  position: relative;
  align-self: stretch;
  min-height: 380px;
}
.tc .tcg-split__photo { position: absolute; inset: 0; }
.tc .tcg-split__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

/* Divisor + colunas de ícone. */
.tc .tcg-cols { margin-top: 46px; }
.tc .tcg-cols .tcf-divider { margin-top: 0; }
.tc .tcg-cols__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin-top: 30px;
  padding: 0;
}
.tc .tcg-cols__list .tcf-feat {
  padding-inline: 20px;
  border-right: 1px solid var(--tc-line);
}
.tc .tcg-cols__list .tcf-feat:last-child { border-right: 0; }
.tc .tcg-cols__list .tcf-cardtitle {
  font-size: 11.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tc .tcg-cols__list .tcf-feat__tx { font-size: 11.5px; }

/* ───────────────────────────────────────────────
 * 8. Vozes dos alunos
 * ─────────────────────────────────────────────── */
.tc .tcg-vozes { padding-block: 16px 60px; }

.tc .tcg-vozes__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 30px;
  padding: 0;
}
.tc .tcg-vozes__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 20px 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--tc-line);
  box-shadow: var(--tc-shadow);
  text-align: center;
}
.tc .tcg-vozes__ic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--tcf-cream-2);
  display: grid;
  place-items: center;
  color: var(--tc-navy);
}
.tc .tcg-vozes__ic svg { width: 21px; height: 21px; }
.tc .tcg-vozes__q {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--tc-navy);
}
.tc .tcg-vozes__quote {
  position: relative;
  margin: 0;
  padding-left: 22px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--tc-text-soft);
  text-align: left;
}
.tc .tcg-vozes__mark {
  position: absolute;
  left: 0;
  top: 1px;
  width: 15px;
  color: var(--tc-amber);
}
.tc .tcg-vozes__mark svg { width: 100%; height: auto; }
.tc .tcg-vozes__author {
  margin-top: auto;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--tc-navy);
}
.tc .tcg-vozes__play {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--tc-line);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--tc-navy);
  text-decoration: none;
}
.tc .tcg-vozes__play svg { width: 15px; height: 15px; color: var(--tc-amber); }
.tc .tcg-vozes__play:hover { border-color: var(--tc-amber); color: var(--tc-blue); text-decoration: none; }

/* ───────────────────────────────────────────────
 * 9. Chamada final
 * ─────────────────────────────────────────────── */
.tc .tcg-final { padding-block: 16px 78px; }

.tc .tcg-final__box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
  border-radius: var(--tcf-radius);
  background: var(--tcf-cream);
  padding: 48px 44px;
  box-shadow: var(--tc-shadow);
}

.tc .tcg-final__lead {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 800;
  color: var(--tc-navy);
}

.tc .tcg-final__card {
  margin-top: 20px;
  padding: 22px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--tc-line);
  box-shadow: var(--tc-shadow);
}
.tc .tcg-final__card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tc .tcg-final__card-ic {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--tcf-cream-2);
  display: grid;
  place-items: center;
  color: var(--tc-amber);
}
.tc .tcg-final__card-ic svg { width: 22px; height: 22px; }
.tc .tcg-final__card-tx {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--tc-text-soft);
}
.tc .tcg-final__card-tx .tcf-cardtitle {
  font-size: 13.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.tc .tcg-final__btn {
  width: 100%;
  justify-content: center;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tc .tcg-final__wa {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--tc-text-soft);
}
.tc .tcg-final__wa-ic {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--tc-line);
  display: grid;
  place-items: center;
  color: var(--tc-navy);
}
.tc .tcg-final__wa-ic svg { width: 15px; height: 15px; }
.tc .tcg-final__wa a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  color: var(--tc-navy);
  text-decoration: none;
}
.tc .tcg-final__wa a svg { width: 17px; height: 17px; color: var(--tc-amber); }
.tc .tcg-final__wa a:hover { color: var(--tc-blue); text-decoration: none; }

.tc .tcg-final__closing {
  margin-top: 22px;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--tc-amber);
}

.tc .tcg-final__photo { align-self: stretch; min-height: 460px; position: relative; }
.tc .tcg-final__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px;
}

/* ───────────────────────────────────────────────
 * Telas médias
 * ─────────────────────────────────────────────── */
@media (max-width: 1150px) {
  .tc .tcg-hero__content { padding: 44px 18px 36px 34px; }
  .tc .tcg-hero__media { min-height: 560px; }
  .tc .tcg-strip { grid-template-columns: 1fr; }
  .tc .tcg-strip__script { max-width: none; padding-right: 0; border-right: 0; }
  .tc .tcg-strip__list { grid-template-columns: repeat(2, 1fr); }

  .tc .tcg-cols__list { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
  .tc .tcg-cols__list .tcf-feat:nth-child(3n) { border-right: 0; }

  .tc .tcg-vozes__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 980px) {
  .tc .tcg-hero__stage { grid-template-columns: 1fr; grid-template-areas: 'media' 'content' 'strip'; }
  .tc .tcg-hero__media { min-height: 0; aspect-ratio: 16 / 11; }
  .tc .tcg-hero__media::after { background: linear-gradient(180deg, rgba(253, 248, 239, 0) 45%, var(--tcf-cream) 100%); }
  .tc .tcg-hero__content { padding: 26px 26px 32px; }
  .tc .tcg-hero__pillars { grid-template-columns: 1fr; gap: 14px; }

  .tc .tcg-mani__box { grid-template-columns: 1fr; min-height: 0; }
  .tc .tcg-mani__photo { aspect-ratio: 16 / 10; }
  .tc .tcg-mani__panel { padding: 38px 26px; }

  .tc .tcg-video__box,
  .tc .tcg-split__box { padding: 36px 24px 32px; }
  .tc .tcg-video__feats .tcf-feat { padding-inline: 0; border-right: 0; }

  .tc .tcg-split__top { grid-template-columns: 1fr; gap: 30px; }
  /* Numa coluna só, inverter a ordem deixaria a foto antes do texto em três
     seções seguidas — o texto vem sempre primeiro. */
  .tc .tcg-split__top--rev .tcg-split__content,
  .tc .tcg-split__top--rev .tcg-split__media { order: 0; }
  .tc .tcg-split__media { min-height: 0; aspect-ratio: 16 / 11; }

  .tc .tcg-final__box { grid-template-columns: 1fr; padding: 38px 24px; }
  .tc .tcg-final__photo { min-height: 0; aspect-ratio: 16 / 11; order: -1; }
}

/* ───────────────────────────────────────────────
 * Celular
 * ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* As quebras de linha foram escritas para o desenho do computador. */
  .tc .tcg-hero__text br,
  .tc .tcg-mani__text br,
  .tc .tcg-quote br,
  .tc .tcg-final__card-tx br,
  .tc .tcf-head__sub br { display: none; }

  .tc .tcg-hero { padding-block: 16px 4px; }
  .tc .tcg-hero__stage { border-radius: 24px; }
  .tc .tcg-hero__actions { flex-direction: column; align-items: stretch; }
  .tc .tcg-bigbtn { justify-content: center; }
  .tc .tcg-strip { padding: 22px 22px 24px; }
  .tc .tcg-strip__list { grid-template-columns: 1fr; gap: 16px; }

  .tc .tcg-mani { padding-block: 40px; }
  .tc .tcg-video,
  .tc .tcg-split,
  .tc .tcg-vozes { padding-block: 8px 44px; }

  /* No celular a citação sai de cima da foto e vira um bloco depois dela. */
  .tc .tcg-split__media { aspect-ratio: auto; }
  .tc .tcg-split__photo { position: static; }
  .tc .tcg-split__photo img { aspect-ratio: 16 / 11; }
  .tc .tcg-quote { position: static; width: 100%; margin-top: 14px; }
  .tc .tcg-overlay { font-size: 13px; top: 16px; right: 16px; }
  .tc .tcg-overlay--script { top: auto; bottom: 16px; left: 16px; }

  .tc .tcg-cols__list { grid-template-columns: 1fr; row-gap: 22px; }
  .tc .tcg-cols__list .tcf-feat { border-right: 0; padding-inline: 0; }

  .tc .tcg-vozes__list { grid-template-columns: 1fr; }

  .tc .tcg-final { padding-block: 8px 52px; }
  .tc .tcg-final__wa { flex-wrap: wrap; }
}