/* ═══════════════════════════════════════════════
 * Colégio Tecla — seções da página da Estrutura
 * ═══════════════════════════════════════════════
 *
 * Só o que é desta página. O vocabulário compartilhado com as páginas de
 * segmento (chapéu, cabeçalho de seção, destaques) está em
 * `tecla-segmentos.css`; o **palco escuro** (`.tct-stage`) e o **painel de
 * meia-tela** (`.tct-panel`) vêm de `tecla-integral.css`, que carrega antes
 * desta folha — três das cinco seções desta página são essas duas peças.
 *
 * O wrapper é `.tc.tc-seg#tc-estrutura` (ver `page-estrutura.php`), e é ele que
 * recebe os tokens `--tct-*` (declarados no topo de `tecla-integral.css`, numa
 * regra que cobre as duas páginas).
 *
 * O QUE É SÓ DESTA PÁGINA
 *   `.tes-cats`  — o quadro de quatro categorias de ambiente. Cada cartão é uma
 *                  foto grande com um véu azul por cima e o texto no rodapé.
 *                  **Sem foto o cartão vira um painel de marca** — é o mesmo
 *                  acordo do carrossel da home: a escola vai mandando as fotos
 *                  reais e os cartões vão saindo do azul chapado.
 *   `.tes-tour`  — o quadro do tour virtual. Capa + alfinetes + botão; o iframe
 *                  do iTeleport só entra no clique (ver `initTour()` em
 *                  `assets/js/tecla-home.js`), porque é um viewer 3D pesado.
 *
 * Toda regra começa com `.tc ` de propósito — o motivo está explicado no
 * cabeçalho de `tecla-segmentos.css`.
 * ═══════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
 * Chapéu com o fio em cima (três seções usam)
 * ─────────────────────────────────────────────── */

.tc .tes-kicker {
  display: block;
  margin-bottom: 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--tc-navy);
}
.tc .tes-kicker::before {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--tc-yellow);
  margin-bottom: 18px;
}

/* ───────────────────────────────────────────────
 * 2. Hero — reaproveita o palco escuro do Integral
 * ─────────────────────────────────────────────── */

.tc .tes-hero { padding-block: 26px 10px; }
.tc .tes-hero .tct-stage { grid-template-columns: 1.34fr 1fr; }

/* Aqui o chapéu é claro e tem o fio à direita, não em cima. */
.tc .tes-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--tc-yellow);
}
.tc .tes-hero__eyebrow::after {
  content: '';
  height: 1.5px;
  width: 92px;
  background: rgba(251, 192, 9, .55);
}

.tc .tes-hero__title {
  font-size: clamp(28px, 3.3vw, 44px);
  line-height: 1.14;
  font-weight: 700;
  color: #fff;
}
.tc .tes-hero__text {
  margin-top: 22px;
  font-size: clamp(12.5px, 1.05vw, 15px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .8);
}
.tc .tes-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ───────────────────────────────────────────────
 * 3. Breve apresentação
 * ─────────────────────────────────────────────── */

.tc .tes-intro .tct-panel { grid-template-columns: 1fr 1.05fr; }
.tc .tes-intro .tcf-head__title { font-size: clamp(27px, 3.1vw, 42px); }
.tc .tes-intro .tcf-head__script { font-size: clamp(25px, 2.9vw, 38px); }

/* A frase solta que fecha o bloco, separada do parágrafo por um respiro. */
.tc .tes-intro__note {
  margin-top: 22px;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.6;
  color: var(--tc-text-soft);
}

/* Título + continuação em cursiva na mesma linha.
   O `render_headline()` compartilhado imprime os dois em blocos separados, que
   é o certo nas outras páginas; nestas duas o layout de referência tem a frase
   corrida. Em telas estreitas eles voltam a empilhar sozinhos, porque a linha
   simplesmente quebra. */
.tc .tes-cats .tcf-head__title,
.tc .tes-tour .tcf-head__title,
.tc .tes-cats .tcf-head__script,
.tc .tes-tour .tcf-head__script { display: inline; }
.tc .tes-cats .tcf-head__script,
.tc .tes-tour .tcf-head__script { margin-left: .25em; }

/* O chapéu é irmão do título e ficaria na mesma linha agora que o título é
   inline — ele volta a ser um bloco por conta própria. */
.tc .tes-cats .tcf-eyebrow,
.tc .tes-tour .tcf-eyebrow {
  display: flex;
  justify-content: center;
}

/* A frase corrida não cabe nos 900px que o cabeçalho compartilhado reserva. */
.tc .tes-cats .tcf-head--center,
.tc .tes-tour .tcf-head--center { max-width: 1040px; }

/* ───────────────────────────────────────────────
 * 4. Ambientes organizados por categorias
 * ─────────────────────────────────────────────── */

.tc .tes-cats { padding-block: 58px 50px; }
.tc .tes-cats__box {
  padding: 46px 40px 44px;
  border-radius: var(--tcf-radius);
  background: var(--tcf-cream);
}

.tc .tes-cats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 34px;
  padding: 0;
}

.tc .tes-cat {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 330px;
  border-radius: 20px;
  overflow: hidden;
  /* Painel de marca: é o que aparece enquanto o cartão está sem foto. */
  background: linear-gradient(150deg, var(--tct-navy-2) 0%, var(--tct-navy) 100%);
  box-shadow: var(--tc-shadow);
}
.tc .tes-cat__photo {
  position: absolute;
  inset: 0;
}
.tc .tes-cat__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.tc .tes-cat:hover .tes-cat__photo img { transform: scale(1.04); }

/* O véu azul sobe da base: é ele que segura a legibilidade do texto sobre
   qualquer foto que a escola venha a subir pelo painel. */
.tc .tes-cat__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 37, 89, .95) 0%, rgba(10, 37, 89, .78) 32%, rgba(10, 37, 89, .12) 66%);
}

/* A frase que no layout de referência está pintada na parede do ambiente. */
.tc .tes-cat__quote {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  max-width: 45%;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(10, 37, 89, .34);
  backdrop-filter: blur(3px);
  font-size: 15px;
  line-height: 1.3;
  text-align: right;
  color: rgba(255, 255, 255, .95);
}

.tc .tes-cat__body {
  position: relative;
  z-index: 2;
  padding: 26px 26px 24px;
}
.tc .tes-cat__eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tc-yellow);
}
.tc .tes-cat__title {
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.26;
  font-weight: 700;
  color: #fff;
}
.tc .tes-cat__list {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .8);
}

/* ───────────────────────────────────────────────
 * 5. Tour virtual
 * ───────────────────────────────────────────────
 * O `data-tour-url` do quadro é o contrato com `initTour()` em
 * `assets/js/tecla-home.js`: no clique todo o miolo é trocado pelo iframe do
 * iTeleport. Até lá o que existe é uma capa — o viewer 3D não pode pesar no
 * carregamento de uma página que a família abre no celular.
 * ─────────────────────────────────────────────── */

.tc .tes-tour { padding-block: 34px; }
.tc .tes-tour__box {
  padding: 46px 40px 40px;
  border-radius: var(--tcf-radius);
  background: linear-gradient(150deg, var(--tct-navy) 0%, var(--tct-navy-2) 100%);
  box-shadow: var(--tc-shadow-hi);
}
.tc .tes-tour .tcf-head__title,
.tc .tes-tour .tcf-head__script { color: #fff; }
.tc .tes-tour .tcf-head__script { color: var(--tc-yellow); }
.tc .tes-tour .tcf-head__sub { color: rgba(255, 255, 255, .78); }
.tc .tes-tour .tcf-eyebrow { color: var(--tc-yellow); }

.tc .tes-tour__frame {
  position: relative;
  width: 100%;
  margin-top: 30px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 16 / 8;
  background: #0b1c3a;
  cursor: pointer;
  box-shadow: 0 20px 50px rgba(4, 14, 38, .45);
}
.tc .tes-tour__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Quando o JS troca a capa pelo viewer, o iframe ocupa o quadro inteiro. */
.tc .tes-tour__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.tc .tes-tour__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(4, 14, 38, .12) 0%, rgba(4, 14, 38, .52) 100%);
}

/* Alfinetes dos ambientes. A posição de cada um vem do painel, em % — assim a
   pessoa aponta o alfinete para o lugar certo da capa que ela mesma subiu. */
.tc .tes-tour__pins { position: absolute; inset: 0; padding: 0; }
.tc .tes-tour__pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(10, 24, 48, .82);
  backdrop-filter: blur(4px);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.tc .tes-tour__pin-dot {
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--tc-yellow);
  display: grid;
  place-items: center;
}
.tc .tes-tour__pin-dot::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--tct-navy);
}

/* Botão central de iniciar. */
.tc .tes-tour__start {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 176px;
  height: 176px;
  padding: 0;
  border-radius: 50%;
  border: 2.5px solid var(--tc-yellow);
  background: rgba(10, 18, 34, .88);
  color: #fff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .3s ease, background .3s ease;
}
.tc .tes-tour__frame:hover .tes-tour__start { transform: scale(1.05); background: rgba(10, 18, 34, .94); }
.tc .tes-tour__start-ic { width: 62px; color: var(--tc-yellow); }
.tc .tes-tour__start-ic svg { width: 100%; height: auto; }
.tc .tes-tour__start-tx {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tc .tes-tour__hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(10, 24, 48, .72);
  backdrop-filter: blur(4px);
  font-size: 12px;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
}
.tc .tes-tour__hint svg { width: 16px; height: 16px; color: var(--tc-yellow); }

.tc .tes-tour__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  margin-top: 26px;
}
.tc .tes-tour__note {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
}

/* ───────────────────────────────────────────────
 * 6. CTA final
 * ─────────────────────────────────────────────── */

.tc .tes-final .tct-panel { grid-template-columns: 1fr 1.02fr; }
.tc .tes-final .tcf-head__title { font-size: clamp(27px, 3.1vw, 42px); }
.tc .tes-final .tcf-head__script { font-size: clamp(25px, 2.9vw, 38px); }

.tc .tes-final__btn { margin-top: 28px; }
.tc .tes-final__btn .tct-btn {
  width: 100%;
  max-width: 420px;
  justify-content: center;
  padding: 19px 30px;
  font-size: 14px;
}
.tc .tes-final__note {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tc-text-soft);
}

/* ───────────────────────────────────────────────
 * Responsivo
 * ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  .tc .tes-hero .tct-stage,
  .tc .tes-intro .tct-panel,
  .tc .tes-final .tct-panel { grid-template-columns: 1fr; }

  .tc .tes-cats__box,
  .tc .tes-tour__box { padding: 34px 22px 32px; }

  .tc .tes-cats__grid { grid-template-columns: 1fr; }
  .tc .tes-cat { min-height: 280px; }

  .tc .tes-tour__frame { aspect-ratio: 4 / 3; }
  .tc .tes-tour__start { width: 132px; height: 132px; }
  .tc .tes-tour__start-ic { width: 46px; }
  /* Os alfinetes viram ruído numa capa pequena: quatro etiquetas sobre um
     quadro de 340px cobrem a foto inteira. */
  .tc .tes-tour__pins { display: none; }
  .tc .tes-tour__bar { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .tc .tes-cats { padding-block: 34px; }
  .tc .tes-tour { padding-block: 22px; }

  .tc .tes-cat__quote { display: none; }
  .tc .tes-cat__body { padding: 20px 20px 22px; }

  .tc .tes-tour__hint { display: none; }
  .tc .tes-tour__bar .tct-btn { width: 100%; justify-content: center; }
  .tc .tes-final__btn .tct-btn { max-width: none; }
  .tc .tes-hero__actions .tct-btn { width: 100%; justify-content: center; }

  /* As quebras foram pensadas para a coluna larga. */
  .tc .tes-hero__title br,
  .tc .tes-hero__text br,
  .tc .tes-cat__title br { display: none; }
}