/* ============================================================
   INSTITUTO ATHANOR — estilo
   Consome apenas variáveis de tokens.css. Zero hex solto.
   Arquétipo: prospecto de matrícula de escola antiga.

   EIXO: a página inteira é centrada. Blocos com numeração levam o
   número ACIMA, centrado — nunca na margem esquerda. A única coisa
   alinhada à esquerda é o texto dentro do acordeão de perguntas,
   porque lá a leitura é longa e a linha precisa de margem firme.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` tem de vencer qualquer `display` declarado adiante.
   Sem isto, o slot vazio do vídeo (display:grid) reaparece e come
   700px no alto do frontispício. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--obsidiana);
  color: var(--creme-leitura);
  font-family: var(--f-corpo);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

/* --- Moldura de grimório: REMOVIDA em 05/08/2026 -------------------
   Era uma borda fixa de 1px em ouro, inset 28px, com z-index 90 — ou
   seja, por cima de tudo. O problema: ela cruzava o botão "Fazer a
   matrícula" no cabeçalho, riscando o CTA principal na horizontal.
   Uma moldura decorativa nunca pode passar por cima do botão que vende.
   O `<div class="moldura">` saiu de index.html e de obrigado.html.     */

/* --- Véu: radial de ouro a 6% nos cantos --- */
.veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(60rem 40rem at 12% 0%, var(--veu), transparent 62%),
    radial-gradient(50rem 36rem at 92% 18%, var(--veu), transparent 60%);
}
.veu--baixo {
  background: radial-gradient(58rem 34rem at 50% 108%, var(--veu), transparent 64%);
}

/* --- Acessibilidade --- */
.pular {
  position: absolute; left: -9999px;
  background: var(--ouro); color: var(--obsidiana);
  padding: var(--e-2) var(--e-3);
  font-family: var(--f-micro); z-index: 200;
}
.pular:focus { left: var(--e-3); top: var(--e-3); }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--ouro);
  outline-offset: 3px;
}

/* ============================================================
   IMAGENS — duas categorias, e só uma leva tratamento
   ------------------------------------------------------------
   1. PAREDE (`.fundo`) — a imagem que fica ATRÁS da leitura.
      Leva a máscara dos carrosséis: sépia + `luminosity` + véu.
      Sem isso, um céu azul de Rafael briga com a obsidiana.
   2. FOTO (`.figura`) — a imagem que APARECE, para ser olhada:
      o retrato do Lucas, as pinturas em destaque.
      **Nenhum efeito.** Sem filtro, sem blend, sem grade, sem arco.
      Só a moldura de 1px e, quando há legenda, um degradê no pé
      para o texto ficar legível.
   ============================================================ */

.fundo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* A máscara da parede — os mesmos valores dos carrosséis
   (`Carrosséis/0408-sistema-aberto/out/`). */
.fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: sepia(.62) contrast(1.1) brightness(.66) saturate(.55);
  mix-blend-mode: luminosity;
}
.fundo::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Frontispício: a imagem aparece de verdade, o texto ganha um poço escuro */
.fundo--hero img { opacity: .52; object-position: center 60%; }
.fundo--hero::after {
  background:
    radial-gradient(72% 52% at 50% 34%, rgba(11, 9, 6, .93), rgba(11, 9, 6, .52) 62%, rgba(11, 9, 6, .18) 100%),
    linear-gradient(to bottom, var(--obsidiana) 0%, rgba(11, 9, 6, .28) 26%, rgba(11, 9, 6, .72) 76%, var(--obsidiana) 100%);
}

/* Seções: a imagem é textura, não assunto. Nunca acima de 22%. */
.fundo--tese img      { opacity: .20; object-position: center 28%; }
.fundo--matricula img { opacity: .13; object-position: center 30%; }
.fundo--turma img     { opacity: .14; object-position: center 22%; }
.fundo--lente img     { opacity: .13; object-position: center 34%; }
.fundo--rodape img    { opacity: .12; object-position: center 30%; }

.fundo--tese::after,
.fundo--matricula::after,
.fundo--turma::after,
.fundo--lente::after,
.fundo--rodape::after {
  background:
    radial-gradient(78% 62% at 50% 50%, rgba(11, 9, 6, .82), rgba(11, 9, 6, .94) 70%, var(--obsidiana) 100%),
    linear-gradient(to bottom, var(--obsidiana), transparent 18%, transparent 82%, var(--obsidiana));
}

/* Figuras visíveis */
.figura {
  position: relative;
  /* `width` explícito é obrigatório: dentro de um flex/grid centrado, a
     figura tem largura dependente da imagem e a imagem, da figura — a
     circularidade colapsava o retrato para 2px no telefone. */
  width: 100%;
  margin: var(--e-5) auto;
  border: var(--linha);
  overflow: hidden;
  background: var(--obsidiana-alta);
}
.figura picture { display: block; width: 100%; height: 100%; }
.figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* sem filtro, sem blend: a foto é para ser vista como ela é */
}
/* Degradê no pé, e SÓ quando existe legenda — é legibilidade, não estilo. */
.figura:has(figcaption)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 52%, rgba(11, 9, 6, .55) 76%, rgba(11, 9, 6, .93) 100%);
}

.figura--banda {
  max-width: var(--largura);
  aspect-ratio: 21 / 9;
}
.figura--banda img { object-position: center 34%; }

.figura--retrato-largo {
  max-width: 34rem;
  aspect-ratio: 5 / 4;
}
.figura--retrato-largo img { object-position: center 38%; }

/* O retrato do Lucas. `--limpa` é literal: nem o degradê da legenda entra. */
.figura--lente {
  max-width: 22rem;
  aspect-ratio: 4 / 5;
  margin-block: 0 var(--e-3);
}
.figura--lente img { object-position: center 26%; }
.figura--limpa::after { content: none; }

.figura--medalhao {
  max-width: 15rem;
  aspect-ratio: 2 / 3;
  margin-block: var(--e-5);
}
.figura--medalhao .figura__legenda { padding: var(--e-2); font-size: .95rem; }

.figura__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: var(--e-3) var(--e-3) var(--e-2);
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.45;
  color: var(--creme-leitura);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* ============================================================
   LAYOUT — tudo no eixo
   ============================================================ */

.conteiner {
  position: relative;
  z-index: 2;
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
}
@media (min-width: 700px) {
  .conteiner { width: min(100% - 7rem, var(--largura)); }
}

.medida, .medida-centro {
  max-width: var(--medida);
  margin-inline: auto;
}

.secao {
  position: relative;
  padding-block: var(--e-6);
  scroll-margin-top: 5rem;
  text-align: center;          /* o eixo da página */
}
.secao--poco {
  background: var(--obsidiana-baixa);
  border-block: var(--linha);
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 400;           /* nunca bold em display */
  line-height: var(--lh-display);
  color: var(--creme);
  margin: 0;
  letter-spacing: -.005em;
}

.eyebrow {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--e-3);
}
.eyebrow .sep { color: var(--borda-forte); }

.secao__titulo {
  font-size: var(--t-h2);
  margin: 0 auto var(--e-4);
  max-width: 24ch;
}

.lead {
  font-size: var(--t-lead);
  color: var(--creme-leitura);
  margin: 0 auto var(--e-4);
}

.prosa { margin-inline: auto; }
.prosa p { margin: 0 0 var(--e-3); }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { color: var(--creme); font-weight: 600; }
.prosa em { color: var(--creme); }

/* Frase-âncora: a linha que o leitor salva. Filete curto acima, centrado. */
.ancora {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.32;
  color: var(--creme);
  margin: var(--e-5) auto 0;
  padding-top: var(--e-4);
  position: relative;
}
.ancora::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  border-top: 1px solid var(--borda-forte);
}

/* Glosa: a etimologia que ensina enquanto explica o mobiliário */
.glosa {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.5;
  color: var(--muted);
  margin: 0 auto var(--e-4);
  padding-top: var(--e-3);
  position: relative;
}
.glosa::before {
  content: "✦";
  display: block;
  font-style: normal;
  font-size: .7em;
  color: var(--ouro);
  opacity: .8;
  margin-bottom: var(--e-2);
}

.mercurio {
  font-family: var(--f-display);
  font-size: 2rem;
  color: var(--ouro);
  margin: var(--e-4) 0;
  line-height: 1;
}

.citacao {
  margin: var(--e-5) auto 0;
  padding: var(--e-4) 0 0;
  border-top: var(--linha);
  max-width: 32ch;
}
.citacao p {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.24;
  color: var(--creme);
  margin: 0;
}

.microcopy {
  font-size: .92rem;
  color: var(--muted);
  margin: var(--e-2) auto 0;
  max-width: 34rem;
}

/* ============================================================
   CABEÇALHO
   ============================================================ */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 80;
  background: color-mix(in srgb, var(--obsidiana) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), background var(--transicao);
}
.cabecalho.esta-preso { border-bottom-color: var(--borda); }

.cabecalho__interno {
  width: min(100% - 2.5rem, var(--largura));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding-block: .85rem;
}
@media (min-width: 700px) {
  .cabecalho__interno { width: min(100% - 7rem, var(--largura)); }
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--ouro);
}
.marca__selo { width: 22px; height: 22px; flex: none; }
.marca__nome {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme);
}

@media (max-width: 560px) {
  .cabecalho__interno { padding-block: .6rem; gap: .5rem; }
  .marca { gap: .45rem; }
  .marca__selo { width: 18px; height: 18px; }
  .marca__nome { font-size: .64rem; letter-spacing: .1em; }
}

/* ============================================================
   BOTÕES
   ============================================================ */

.botao {
  display: inline-block;
  font-family: var(--f-micro);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--obsidiana);
  background: var(--ouro);
  border: 1px solid var(--ouro);
  border-radius: var(--raio);
  padding: 1.05rem 1.9rem;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao), transform var(--transicao);
}
.botao:hover { background: var(--ouro-claro); border-color: var(--ouro-claro); }
.botao:active { transform: translateY(1px); }

.botao--fantasma {
  background: transparent;
  color: var(--ouro);
  border-color: var(--borda-forte);
}
.botao--fantasma:hover {
  background: transparent;
  color: var(--ouro-claro);
  border-color: var(--ouro);
}

.botao--peq { padding: .68rem 1.1rem; font-size: .7rem; }
.botao--grande { padding: 1.2rem 2.6rem; }

.botao--texto {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  text-transform: none;
  font-family: var(--f-corpo);
  letter-spacing: 0;
  font-size: 1rem;
  padding: 1.05rem .4rem;
  border-bottom: 1px solid var(--borda);
  border-radius: 0;
}
.botao--texto:hover { background: transparent; color: var(--creme); border-bottom-color: var(--ouro); }

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;      /* no eixo, sempre */
  gap: var(--e-3);
  margin-top: var(--e-4);
}

/* ============================================================
   I · FRONTISPÍCIO
   ============================================================ */

/* Altura do frontispício é orçamento, não gosto: o botão de matrícula
   precisa caber na primeira tela de um notebook (900px). Cada valor
   abaixo foi cortado para isso. */
.frontispicio {
  position: relative;
  padding-block: clamp(2.4rem, 6.5vh, 4.4rem) var(--e-5);
  text-align: center;
  overflow: hidden;
}
.frontispicio__interno { position: relative; z-index: 2; }

.selo {
  width: clamp(104px, 12vw, 126px);
  height: auto;
  color: var(--ouro);
  margin-bottom: var(--e-2);
}
.selo__traco {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.selo__traco--fino { stroke-width: 1; opacity: .5; }
.selo__figura .selo__traco { stroke-width: 4; }
.selo__texto {
  font-family: var(--f-micro);
  font-size: 13px;
  letter-spacing: .26em;
  fill: currentColor;
}
.selo__texto--peq { font-size: 11px; letter-spacing: .3em; opacity: .75; }

@media (prefers-reduced-motion: no-preference) {
  .selo__traco {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: desenhar 1.7s cubic-bezier(.42, 0, .2, 1) forwards;
  }
  .selo__figura .selo__traco { animation-delay: .5s; }
  .selo__texto { opacity: 0; animation: surgir .9s ease 1.1s forwards; }
}
@keyframes desenhar { to { stroke-dashoffset: 0; } }
@keyframes surgir   { to { opacity: 1; } }
.selo__texto--peq { animation-name: surgir; }

/* --- O vídeo-âncora: logo abaixo do selo, antes da frase --- */
.video {
  position: relative;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto var(--e-4);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--borda);
  background: var(--obsidiana-alta);
  overflow: hidden;
}
.video video,
.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.video__vazio {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: var(--e-1);
  padding: var(--e-3);
}
.video__rotulo {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
}
.video__dica {
  font-size: .88rem;
  color: var(--muted);
  opacity: .75;
}
.video__dica code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .92em;
  color: var(--ouro);
}

.frontispicio__titulo {
  font-size: clamp(2.7rem, 6.2vw, 4.9rem);
  margin: 0 auto var(--e-3);
  /* Largura calibrada para os <br> mandarem: em `ch` a linha quebrava
     em quatro e empurrava o botão para fora da primeira tela. */
  max-width: min(100%, 64rem);
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(11, 9, 6, .8);
}
.frontispicio .lead { margin-bottom: var(--e-3); }
.frontispicio .acoes { margin-top: var(--e-3); }
.frontispicio__titulo em {
  font-style: italic;
  color: var(--ouro);
}

.divisa {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
  margin-top: var(--e-4);
  letter-spacing: .02em;
}

/* ============================================================
   II · SINTOMAS — número centrado ACIMA da linha
   ============================================================ */

.sintomas {
  list-style: none;
  counter-reset: sintoma;
  margin: 0 auto;
  padding: 0;
  max-width: 42rem;
  border-top: var(--linha);
}
.sintomas li {
  counter-increment: sintoma;
  padding: var(--e-3) 0;
  border-bottom: var(--linha);
  color: var(--creme-leitura);
}
.sintomas li::before {
  content: counter(sintoma, decimal-leading-zero);
  display: block;
  margin-bottom: .55rem;
  font-family: var(--f-micro);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--ouro);
  opacity: .75;
}

/* ============================================================
   IV · TRIO
   ============================================================ */

.trio {
  display: grid;
  gap: 0;
  border-top: var(--linha);
  margin-inline: auto;
}
@media (min-width: 860px) {
  .trio { grid-template-columns: repeat(3, 1fr); }
}
.trio__item {
  padding: var(--e-4) 0;
  border-bottom: var(--linha);
}
@media (min-width: 860px) {
  .trio__item {
    padding: var(--e-4) var(--e-3);
    border-bottom: 0;
    border-right: var(--linha);
  }
  .trio__item:last-child { border-right: 0; }
}
.trio__titulo {
  font-size: var(--t-h3);
  margin-bottom: var(--e-2);
}
.trio__titulo span {
  display: block;
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .5rem;
}
.trio__item p { margin: 0 auto; font-size: 1.02rem; max-width: 26rem; }
.trio__item--forte .trio__titulo { color: var(--ouro); }
.trio__item--forte .trio__titulo span { color: var(--ouro-claro); opacity: .8; }

/* ============================================================
   V · CADEIRAS — romano centrado acima do nome
   ============================================================ */

.cadeiras {
  list-style: none;
  margin: var(--e-4) auto 0;
  padding: 0;
  max-width: 46rem;
  border-top: var(--linha);
}
.cadeira {
  padding: var(--e-4) 0;
  border-bottom: var(--linha);
}
.cadeira__num {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1;
  color: var(--ouro);
  opacity: .6;
  margin-bottom: var(--e-1);
}
.cadeira__titulo {
  font-size: var(--t-h3);
  margin-bottom: var(--e-2);
}
.cadeira p {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--creme-leitura);
  font-size: 1.02rem;
}
.cadeira__tag {
  font-family: var(--f-micro);
  font-size: .62rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  vertical-align: middle;
  margin-left: .6rem;
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: .22rem .6rem;
  white-space: nowrap;
}
.cadeira--ponte .cadeira__titulo { color: var(--ouro-claro); }

.nota {
  margin: var(--e-5) auto 0;
  padding: var(--e-4);
  border: var(--linha);
  border-top: 2px solid var(--borda-forte);
  background: var(--obsidiana-alta);
  max-width: 42rem;
}
.nota__titulo {
  font-size: var(--t-h3);
  margin-bottom: var(--e-2);
}
.nota p { margin: 0; }

/* ============================================================
   VII · MATRÍCULA
   ============================================================ */

.matricula {
  border: 1px solid var(--borda-forte);
  background: color-mix(in srgb, var(--obsidiana-alta) 92%, transparent);
  backdrop-filter: blur(2px);
  padding: clamp(var(--e-3), 5vw, var(--e-5));
  max-width: 46rem;
  margin-inline: auto;
  position: relative;
}
.matricula::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: var(--linha);
  pointer-events: none;
}
.matricula__cabeca { margin-bottom: var(--e-4); }
.matricula__preco {
  font-family: var(--f-display);
  font-size: clamp(4rem, 11vw, 6.5rem);
  line-height: .95;
  color: var(--creme);
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .3rem;
}
.matricula__moeda {
  font-size: .32em;
  color: var(--ouro);
  transform: translateY(-.9em);
}
.matricula__ciclo {
  font-family: var(--f-micro);
  font-size: .13em;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  align-self: flex-end;
  transform: translateY(-.6em);
  margin-left: .4rem;
}
.matricula__sub {
  color: var(--muted);
  margin: var(--e-2) auto 0;
  font-size: 1rem;
  max-width: 34rem;
}

.inclui {
  list-style: none;
  counter-reset: inclui;
  margin: 0 auto var(--e-4);
  padding: 0;
  border-top: var(--linha);
}
.inclui li {
  counter-increment: inclui;
  padding: var(--e-3) 0;
  border-bottom: var(--linha);
  font-size: 1.02rem;
}
.inclui li::before {
  content: counter(inclui);
  display: block;
  margin-bottom: .45rem;
  font-family: var(--f-micro);
  font-size: .78rem;
  color: var(--ouro);
  opacity: .75;
}
.inclui strong { color: var(--creme); font-weight: 600; }

.termos {
  color: var(--muted);
  font-size: 1rem;
  margin: 0 auto;
  max-width: 38rem;
}

/* ============================================================
   IX · A LENTE — retrato acima, texto abaixo, tudo no eixo
   ============================================================ */

.lente {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
}
.lente .prosa { max-width: var(--medida); }

/* Os ofícios: a linha de disciplinas sob o retrato — o que a Lente lê */
.oficios {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 auto var(--e-4);
  max-width: 40rem;
  line-height: 2.1;
}
.oficios .sep { color: var(--ouro); opacity: .7; }

/* ============================================================
   SLOTS DE MÍDIA (quando ainda não há imagem)
   ============================================================ */

.slot {
  position: relative;
  border: 1px dashed var(--borda);
  background: var(--obsidiana-alta);
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  margin-inline: auto;
}
.slot--retrato { aspect-ratio: 4 / 5; max-width: 21rem; }
.slot__vazio {
  font-family: var(--f-micro);
  font-size: var(--t-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--muted);
  opacity: .6;
}
.slot img, .slot video { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot:has(img), .slot:has(video) { border-style: solid; border-color: var(--borda); }
.slot:has(img) .slot__vazio, .slot:has(video) .slot__vazio { display: none; }

/* ============================================================
   X · O QUE NÃO É
   ============================================================ */

.nao-lista { margin: 0 auto; border-top: var(--linha); }
.nao-lista > div {
  padding: var(--e-3) 0;
  border-bottom: var(--linha);
}
.nao-lista dt {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  color: var(--creme);
  margin-bottom: .4rem;
}
.nao-lista dd { margin: 0; color: var(--creme-leitura); }

/* ============================================================
   XI · FAQ — pergunta no eixo, resposta com margem firme
   ============================================================ */

.faq { border-top: var(--linha); margin-inline: auto; }
.faq details { border-bottom: var(--linha); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--e-3) 2.5rem;      /* simétrico: a pergunta centra de verdade */
  position: relative;
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  color: var(--creme);
  line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: .4rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--f-corpo);
  color: var(--ouro);
  font-size: 1.4rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  margin: 0 auto var(--e-3);
  color: var(--creme-leitura);
  max-width: 38rem;
  text-align: left;                /* resposta longa: linha com margem firme */
}

/* ============================================================
   XII · CARTA / FORMULÁRIO
   ============================================================ */

.secao--carta { position: relative; overflow: hidden; }

.form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  align-items: stretch;
  justify-content: center;
  margin: var(--e-4) auto 0;
  max-width: var(--medida);
}
.form__campo {
  flex: 1 1 16rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borda-forte);
  color: var(--creme);
  font-family: var(--f-corpo);
  font-size: 1.05rem;
  padding: 1rem .2rem;
  border-radius: 0;
  text-align: center;
}
.form__campo::placeholder { color: var(--muted); opacity: .8; }
.form__campo:focus { outline: 0; border-bottom-color: var(--ouro); }
.form__campo:user-invalid { border-bottom-color: var(--muted); }
.form__aviso {
  flex: 1 0 100%;
  margin: var(--e-1) 0 0;
  font-size: .95rem;
  color: var(--ouro-claro);
  min-height: 1.4em;
}

/* ============================================================
   RODAPÉ
   ============================================================ */

.rodape {
  position: relative;
  overflow: hidden;
  background: var(--obsidiana-baixa);
  border-top: var(--linha);
  padding-block: var(--e-6) var(--e-5);
  text-align: center;
}
.rodape__interno { position: relative; z-index: 2; }
.rodape__selo { width: 34px; color: var(--ouro); opacity: .75; }
.rodape__nome {
  font-family: var(--f-micro);
  font-size: .78rem;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--creme);
  margin: var(--e-2) 0 0;
}
.rodape__divisa {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--muted);
  margin: var(--e-1) 0 var(--e-3);
}
.rodape__meta { color: var(--muted); font-size: .95rem; margin: 0 0 var(--e-3); }
.rodape__meta .sep { color: var(--borda-forte); }
.rodape__links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-bottom: var(--e-4);
}
.rodape__links a {
  color: var(--creme-leitura);
  text-decoration: none;
  border-bottom: 1px solid var(--borda);
  padding-bottom: 2px;
  font-size: .98rem;
}
.rodape__links a:hover { color: var(--ouro); border-bottom-color: var(--ouro); }
.rodape__legal {
  color: var(--muted);
  font-size: .85rem;
  max-width: 44rem;
  margin-inline: auto;
  opacity: .8;
}

/* ============================================================
   REVELAÇÃO AO ROLAR (discreta)
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(.2, .6, .2, 1);
  }
  .revelar.visivel { opacity: 1; transform: none; }
}

/* ============================================================
   AJUSTES DE TELEFONE
   Fica no fim do arquivo de propósito: precisa vencer as regras
   base de botão e de grade que vêm acima.
   ============================================================ */

@media (max-width: 560px) {
  /* Alvo de toque de 44px: abaixo disso o dedo erra. Vale para todo
     link e botão do telefone, inclusive o pequeno do cabeçalho. */
  .botao, .rodape__links a, .faq summary, .marca { min-height: 44px; }
  .marca { align-items: center; }
  .botao { display: inline-flex; align-items: center; justify-content: center; }
  .rodape__links a { display: inline-flex; align-items: center; }

  .botao { white-space: nowrap; }
  .botao--peq { padding: .5rem .78rem; font-size: .6rem; letter-spacing: .08em; }
  .botao--grande { padding: 1.05rem 1.4rem; font-size: .72rem; }
  .frontispicio .botao { white-space: normal; }

  .acoes { gap: var(--e-2); }
  .frontispicio .acoes { flex-direction: column; align-items: stretch; }
  .frontispicio .acoes .botao { text-align: center; }

  .form { flex-direction: column; align-items: stretch; }
  .form .botao { text-align: center; }

  .matricula { padding: var(--e-3) var(--e-2); }
  .matricula::before { inset: 5px; }

  .figura { margin-block: var(--e-4); }
  .figura--banda { aspect-ratio: 3 / 2; }
  .figura__legenda { padding: var(--e-2); font-size: .95rem; }

  .faq summary { padding-inline: 1.9rem; }
  .fundo--hero img { opacity: .42; }
  .video { margin-bottom: var(--e-3); }
  .video__dica { font-size: .78rem; line-height: 1.4; }
}

/* ============================================================
   IMPRESSÃO — o prospecto também é um documento
   ============================================================ */

@media print {
  .cabecalho, .veu, .fundo, .acoes, .form, .slot { display: none !important; }
  body { background: #fff; color: #000; }
  h1, h2, h3, .ancora, .citacao p { color: #000; }
  .secao { padding-block: 1.5rem; break-inside: avoid; }
  .figura img { filter: grayscale(1) contrast(1.1); }
}