/* ==========================================================================
   A LUZ DA FÉ — Página de Venda · Matrículas até 26 de Agosto
   Sistema visual conforme "A Luz da Fé — Identidade Visual v1.0"
   Duas famílias (Newsreader + Nimbus Sans) · Quatro cores institucionais
   Proporção 55 azul / 30 branco-pérola / 12 champagne / 3 neutro quente

   As seções 1 a 6 são as mesmas da Página de Captura, sem divergência: o
   alicerce do sistema é um só nas duas páginas. A partir da seção 7 começa
   o vocabulário próprio da página de venda.

   Arco de luz da página: a leitura abre no escuro (hero à luz de vela),
   atravessa o diagnóstico no escuro e vai clareando conforme a doutrina
   entra em ordem. Fundo escuro = o problema e a oferta; fundo claro =
   o entendimento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia — famílias e pesos autorizados
   -------------------------------------------------------------------------- */

/* Newsreader — serifada · voz da marca */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader%2036/Newsreader_36pt-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader%2036/Newsreader_36pt-LightItalic.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader%2036/Newsreader_36pt-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader%2036/Newsreader_36pt-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader%2036/Newsreader_36pt-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader%2036/Newsreader_36pt-MediumItalic.ttf") format("truetype");
  font-weight: 500; font-style: italic; font-display: swap;
}

/* Nimbus Sans — sem serifa · função */
@font-face {
  font-family: "Nimbus Sans";
  src: url("../fonts/Nimbus%20Sans/NimbusSansNovusTOT-Lig.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("../fonts/Nimbus%20Sans/NimbusSansNovusTOT-Reg.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("../fonts/Nimbus%20Sans/NimbusSansNovusTOT-Med.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("../fonts/Nimbus%20Sans/NimbusSansNovusTOT-SemBol.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Nimbus Sans";
  src: url("../fonts/Nimbus%20Sans/NimbusSansNovusTOT-Bol.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Institucionais */
  --azul:        #0A2247;
  --champagne:   #D8C09A;
  --perola:      #F3EEEA;
  --branco:      #FFFFFF;

  /* Escala azul — estrutura, profundidade e estados */
  --azul-900: #06162E;
  --azul-800: #0A2247;
  --azul-700: #14355F;
  --azul-600: #2C5183;
  --azul-400: #7C95B6;
  --azul-100: #DCE3ED;

  /* Escala champagne — acentos e dourado legível sobre claro */
  --cham-800: #5C4C2C;
  --cham-700: #8A7448;
  --cham-600: #B39A6C;
  --cham-500: #D8C09A;
  --cham-300: #E8DAC0;
  --cham-100: #F5EEE1;

  /* Escala neutra quente — texto secundário, fios e divisórias */
  --neu-900: #211F1D;
  --neu-700: #4E4A45;
  --neu-500: #8A8279;
  --neu-300: #CFC6BD;
  --neu-100: #F3EEEA;
  --neu-050: #FBF9F7;

  /* Degradê oficial · 135° */
  --dourado: linear-gradient(135deg, #E7CFA5 0%, #D8C09A 46%, #A58D5B 100%);

  /* Fora do manual — cores de ação pedidas para tarja, selo e botões */
  --alerta: #ED4056;
  --verde:  #8DF9AE;
  --verde-degrade: linear-gradient(135deg, #A9FBC5 0%, #8DF9AE 46%, #57D083 100%);
  --verde-degrade-hover: linear-gradient(135deg, #BDFDD3 0%, #9CFAB9 46%, #64DC92 100%);
  /* Verde do botão escurecido até dar contraste sobre claro. O #8DF9AE puro,
     e mesmo a parada final #57D083, somem num traço de 2px sobre o branco —
     este dá 4,3:1, acima dos 3:1 que um elemento gráfico precisa. */
  --verde-800: #2E8F55;

  /* Foto do hero (desktop) — ver bloco "1ª dobra · foto" no fim do arquivo */

  /* Famílias */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Escala tipográfica 1,333 · base 16 px */
  --t-legenda:   13px;
  --t-base:      16px;
  --t-corpo:     20px;
  --t-subtitulo: 24px;
  --t-citacao:   32px;
  --t-titulo2:   42px;
  --t-titulo1:   56px;
  --t-display:   76px;

  --largura: 1160px;
  --leitura: 720px;

  /* Respiro vertical padrão de uma dobra */
  --dobra-y: clamp(76px, 9vw, 130px);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--azul-800);
  color: var(--azul-800);
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-corpo);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
p { margin: 0 0 1.15em; }
/* Zera só o último parágrafo dos blocos de leitura. Um `p:last-child` solto
   atinge também os parágrafos de interface (apoio do hero, notas de preço). */
.texto p:last-child,
.bio-texto p:last-child,
.objecao-resposta p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: 24px;
}

.leitura { max-width: var(--leitura); margin-inline: auto; }

/* Ênfase: na serifada, o grau de ênfase é a itálica — nunca o negrito */
em, .enfase { font-style: italic; }
.enfase { color: inherit; }

/* --------------------------------------------------------------------------
   4. Elementos do sistema
   -------------------------------------------------------------------------- */

/* Olho de seção — Nimbus Medium 13 · +0,28 em */
.olho {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-legenda);
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0;
}

/* Fio champagne */
.fio {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--cham-500);
  opacity: 0.42;
}

/* Separador: chama centralizada entre dois fios champagne */
.separador {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 56px auto;
  max-width: 420px;
}
.separador::before,
.separador::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cham-500);
  opacity: 0.5;
}
.separador img { width: 17px; height: auto; }

/* Marca d'água — chama, opacidade máxima de 10%, sangrando pela borda */
.marca-dagua {
  position: absolute;
  pointer-events: none;
  user-select: none;
  opacity: 0.085;
  z-index: 0;
}

/* Botão — Nimbus, dourado como assinatura */
.btn {
  --btn-y: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: var(--btn-y) 44px;
  border: 0;
  border-radius: 4px;
  background: var(--verde-degrade);
  color: var(--azul-900);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
  box-shadow:
    inset 0 0 0 1px rgba(20, 82, 48, 0.24),
    0 0 0 0 rgba(141, 249, 174, 0),
    0 14px 34px -16px rgba(10, 34, 71, 0.55);
  transition:
    transform 280ms cubic-bezier(.2,.8,.3,1),
    box-shadow 280ms ease;
}

/* Camada de cor mais clara, revelada no hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--verde-degrade-hover);
  opacity: 0;
  transition: opacity 280ms ease;
}

/* Lâmina de brilho que atravessa o botão */
.btn::before {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 42%;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.82) 50%,
    rgba(255, 255, 255, 0) 100%);
  transform: translateX(-190%) skewX(-18deg);
  opacity: 0;
}

/* Só em ponteiro real — evita o botão "travar" no estado de hover após um toque */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-3px) scale(1.025);
    /* Verde médio no halo: o #8DF9AE puro some sobre o fundo pérola */
    box-shadow:
      inset 0 0 0 1px rgba(20, 82, 48, 0.3),
      0 0 0 7px rgba(87, 208, 131, 0.22),
      0 24px 48px -14px rgba(52, 186, 112, 0.62);
  }
  .btn:hover::after { opacity: 1; }
  .btn:hover::before { animation: lamina 820ms cubic-bezier(.25,.7,.35,1); }
}

.btn:active { transform: translateY(-1px) scale(0.995); }
.btn:focus-visible { outline: 2px solid var(--verde); outline-offset: 5px; }

@keyframes lamina {
  0%   { transform: translateX(-190%) skewX(-18deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}

.btn-linha { text-align: center; margin-top: 52px; }

/* Nota de apoio logo abaixo de um botão — prazo, condição, garantia */
.btn-nota {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  margin: 20px auto 0;
  max-width: 64ch;
}
/* A data nunca quebra no meio: "26" numa linha e "de agosto" na outra é a
   informação mais importante da nota partida em duas. */
.btn-nota strong { white-space: nowrap; }
.claro .btn-nota,
.branca .btn-nota { color: var(--neu-700); }
.escuro .btn-nota { color: var(--azul-400); }
.btn-nota strong { font-weight: 600; }
.claro .btn-nota strong,
.branca .btn-nota strong { color: var(--cham-800); }
.escuro .btn-nota strong { color: var(--cham-300); }

/* Selo em pílula — usado onde a urgência precisa de forma, não só de texto */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  /* +1px em cima e −1px embaixo: desce o texto para o centro óptico da pílula */
  padding: 11px 22px 9px;
  border: 2px solid var(--alerta);
  border-radius: 999px;
  background: rgba(237, 64, 86, 0.1);
  color: var(--branco);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.24em;
}
.selo .ponto {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--alerta);
  position: relative;
  top: -2px; /* −2 aqui = −1 na tela, descontado o +1 do padding */
  box-shadow: 0 0 0 0 rgba(237, 64, 86, 0.6);
  animation: pulso 2.4s ease-out infinite;
}
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(237, 64, 86, 0.6); }
  70%  { box-shadow: 0 0 0 9px rgba(237, 64, 86, 0); }
  100% { box-shadow: 0 0 0 0 rgba(237, 64, 86, 0); }
}

/* --------------------------------------------------------------------------
   5. Top bar — aviso de prazo + contagem regressiva

   A contagem é a única peça da página com número que muda sozinho. Ela vive
   na tarja vermelha, longe do azul institucional, justamente para não
   competir com a marca: é interface de urgência, não elemento de identidade.
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--alerta);
  padding: 8px 24px;
  text-align: center;
  position: relative;
  z-index: 3;
}
.topbar .olho { color: var(--branco); font-weight: 700; font-size: 13.5px; letter-spacing: 0.26em; }

/* Sem fio divisor entre o aviso e o mostrador: o vão sozinho é que agrupa.
   Ele precisa ser maior que o passo interno da contagem (68px por segmento),
   ou "DIAS" pareceria pertencer mais à frase que a "HORAS". */
.topbar-conteudo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 38px;
  flex-wrap: wrap;
}

/* Contagem em quatro segmentos: numeral em cima, unidade embaixo, fio branco
   entre um e outro. Número e rótulo lado a lado, na mesma linha de base,
   davam quatro pares soltos que o olho lia como uma frase — e não como um
   relógio. Empilhados e divididos, os quatro viram um bloco só. */
.contagem {
  display: flex;
  align-items: stretch;
  margin: 0;
  /* Enquanto o script não preenche os valores, a contagem não ocupa a tarja
     com zeros: ela simplesmente ainda não existe. */
  visibility: hidden;
}
.contagem.pronta { visibility: visible; }

/* Largura igual para os quatro: os rótulos têm de três a cinco letras, e sem
   isso os fios divisores caem em intervalos diferentes — o bloco perde a
   leitura de mostrador e volta a parecer uma fileira de pares avulsos. */
.contagem .bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 68px;
  font-family: var(--sans);
  color: var(--branco);
}
.contagem .bloco + .bloco { border-left: 1px solid rgba(255, 255, 255, 0.26); }

.contagem b {
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.01em;
  /* Tabular + largura fixa de dois caracteres: os segundos trocam de valor a
     cada tique e a tarja inteira dançaria junto se o numeral respirasse. */
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: center;
}
/* Branco chapado, como o numeral. Com opacidade reduzida o rótulo se
   dissolvia no vermelho, o olho passava a ler só os numerais como conteúdo e
   a tarja parecia ter o dobro de respiro embaixo do que em cima.
   A hierarquia entre numeral e unidade fica por conta do corpo e da
   entreletra, não da transparência. */
.contagem i {
  font-style: normal;
  font-weight: 500;
  font-size: 9.5px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--branco);
  /* A caixa-alta não tem descendente, então a linha do rótulo sobra ~2px
     vazios embaixo. Sem isto, o bloco assenta 2px acima do centro óptico. */
  margin-bottom: -1px;
}

/* --------------------------------------------------------------------------
   6. 1ª dobra — Hero
   -------------------------------------------------------------------------- */

/* Tarja + hero ocupam uma tela cheia, sem número mágico para a altura da tarja */
.dobra-1 {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

.hero {
  position: relative;
  overflow: hidden;
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  background:
    radial-gradient(120% 78% at 50% -8%, rgba(44, 81, 131, 0.55) 0%, rgba(10, 34, 71, 0) 62%),
    linear-gradient(180deg, #0C2650 0%, #0A2247 46%, #071B3A 100%);
  padding: clamp(22px, 4vh, 64px) 0 clamp(26px, 5vh, 84px);
  text-align: center;
}
.hero > .wrap { width: 100%; }

/* Véu de luz — leitura do próprio nome da marca */
.hero::before {
  content: "";
  position: absolute;
  top: -32%;
  left: 50%;
  width: min(1100px, 130%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(216, 192, 154, 0.16) 0%, rgba(216, 192, 154, 0.05) 34%, rgba(216, 192, 154, 0) 66%);
  pointer-events: none;
}

/* A foto cobre a dobra nas duas orientações, então a chama d'água sairia por
   cima dela — e o manual é explícito: marca d'água nunca disputa com conteúdo */
.hero .marca-dagua { display: none; }

.hero .wrap { position: relative; z-index: 1; }

.hero-marca {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: clamp(13px, min(3vw, 3.2vh), 40px);
}
.hero-marca img { width: auto; height: clamp(60px, min(8vw, 9vh), 88px); }

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(31px, min(5.4vw, 6.4vh), var(--t-display));
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--branco);
  margin: 0 auto;
  max-width: 17ch;
  text-wrap: balance;
}
.hero h1 em { color: var(--cham-500); }

.hero h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, min(2.2vw, 2.7vh), 29px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  /* Branco chapado, não o azul-100: sobre a fotografia o #DCE3ED puxa para o
     cinza-azulado e o subtítulo perde nitidez contra o H1. */
  color: var(--branco);
  margin: clamp(11px, min(2.4vw, 2.6vh), 28px) auto 0;
  max-width: 34ch;
  text-wrap: balance;
}
/* Newsreader não tem Bold autorizado: Medium 500 é o grau máximo de peso da
   serifada. Itálico e champagne, no mesmo tom da ênfase do H1. */
.hero h2 strong { font-weight: 500; font-style: italic; color: var(--cham-500); }

.hero-apoio {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(16.5px, min(1.5vw, 2.1vh), 17.5px);
  letter-spacing: 0.02em;
  color: var(--cham-500);
  margin: clamp(12px, min(2.8vw, 3vh), 34px) auto clamp(11px, 2vh, 20px);
}
.hero-apoio strong { font-weight: 700; color: var(--branco); }

/* No hero o espaçamento já vem do .hero-apoio, e o alinhamento acompanha a dobra */
.hero .btn-linha { margin-top: 0; text-align: inherit; }
.hero .btn { --btn-y: clamp(14px, 2.3vh, 22px); }

/* Foto do hero — só no desktop. A imagem cobre a dobra inteira: ela foi
   composta com a estante escura à esquerda e o professor à direita, então
   quem faz o recorte é a máscara, não um painel lateral. */
.hero-foto {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
/* ---- Vela: brilho pulsante + fumaça ----
   Tudo ancorado na ponta da chama por --chama-x/y, calculados no script a
   partir do recorte real da foto. --chama-escala acompanha o zoom da imagem,
   para os dois efeitos manterem proporção com a chama em qualquer tela. */
.chama {
  position: absolute;
  left: var(--chama-x, 50%);
  top: var(--chama-y, 50%);
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
  --e: var(--chama-escala, 0.6);
  /* A subida da fumaça não encolhe junto com o halo: quem define a altura do
     filete é o ar da cena, não o tamanho da chama. Daí o 1,35 de compensação. */
  --alt: calc(310px * var(--e));
  --lado: calc(30px * var(--e));
}

/* Halo de luz. Duas camadas com ritmos diferentes: sozinha, uma só pulsaria
   como metrônomo; somadas, o batimento entre elas lê como chama viva. */
.chama .brilho {
  position: absolute;
  left: 0;
  top: calc(22px * var(--e));
  width: calc(170px * var(--e));
  height: calc(170px * var(--e));
  margin: calc(-85px * var(--e)) 0 0 calc(-85px * var(--e));
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 216, 145, 0.5) 0%,
    rgba(255, 192, 108, 0.26) 30%,
    rgba(255, 176, 90, 0.07) 56%,
    rgba(255, 176, 90, 0) 76%);
  filter: blur(calc(10px * var(--e)));
  mix-blend-mode: screen;
  will-change: transform, opacity;
  animation: brilho 3.6s ease-in-out infinite;
}
.chama .brilho:nth-child(2) {
  width: calc(105px * var(--e));
  height: calc(105px * var(--e));
  margin: calc(-52px * var(--e)) 0 0 calc(-52px * var(--e));
  animation-duration: 5.3s;
  animation-delay: -1.7s;
}

.chama i {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(42px * var(--e));
  height: calc(42px * var(--e));
  margin: calc(-21px * var(--e)) 0 0 calc(-21px * var(--e));
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 238, 210, 0.5) 0%,
    rgba(255, 228, 190, 0.2) 42%,
    rgba(255, 228, 190, 0) 72%);
  filter: blur(calc(7px * var(--e)));
  mix-blend-mode: screen;
  opacity: 0;
  will-change: transform, opacity;
  animation: fumaca 7s linear infinite;
}
.chama i:nth-child(4) { animation-duration: 8.5s; animation-delay: -2.1s; }
.chama i:nth-child(5) { animation-duration: 6.2s; animation-delay: -4.3s; }
.chama i:nth-child(6) { animation-duration: 9.4s; animation-delay: -5.8s; }

@keyframes brilho {
  0%, 100% { transform: scale(0.84); opacity: 0.5; }
  50%      { transform: scale(1.2);  opacity: 0.95; }
}

/* A fumaça sobe mais alto e demora mais a sumir do que na primeira versão:
   sobre esta fotografia, que é bem mais escura, o filete anterior se apagava
   antes de sair de cima da chama e o efeito não chegava a ser percebido. */
@keyframes fumaca {
  0%   { opacity: 0;    transform: translate(0, 0) scale(0.28); }
  10%  { opacity: 0.9;  }
  30%  { transform: translate(var(--lado), calc(var(--alt) * -0.3)) scale(0.7); }
  55%  { opacity: 0.55; transform: translate(calc(var(--lado) * -1.1), calc(var(--alt) * -0.58)) scale(1.05); }
  80%  { opacity: 0.26; transform: translate(calc(var(--lado) * 0.9), calc(var(--alt) * -0.82)) scale(1.5); }
  100% { opacity: 0;    transform: translate(calc(var(--lado) * -0.3), calc(var(--alt) * -1)) scale(1.9); }
}

/* Sem véu e sem máscara: a foto ocupa a dobra inteira, com a cor original.
   Legibilidade garantida pela própria imagem — a faixa esquerda, onde cai
   todo o texto, tem luminância ~0,001 (17:1 a 20:1 contra o branco). */

/* Desktop: conteúdo à esquerda, foto ao fundo à direita.
   Só em paisagem — um tablet em pé tem 1024px de largura mas 1366 de altura,
   e essa composição horizontal não sobrevive numa dobra vertical. */
@media (min-width: 901px) and (orientation: landscape) {
  .hero { text-align: left; }
  .hero::before { left: 32%; }
  .hero .wrap { z-index: 2; }
  /* Em telas mais estreitas a coluna encolhe junto, para o texto não invadir
     a área do professor na foto */
  .hero-conteudo { max-width: min(600px, 52%); }
  .hero-marca { justify-content: flex-start; }
  .hero h1 { margin-inline: 0; max-width: 100%; font-size: clamp(30px, min(3.9vw, 6.4vh), 60px); }
  .hero h2 { margin-inline: 0; max-width: 30ch; }
  .hero-apoio { margin-inline: 0; }
}

/* ==========================================================================
   7. Blocos comuns das dobras de conteúdo

   A página tem treze dobras. Em vez de treze conjuntos de regras de fundo,
   cabeçalho e corpo de texto, existem três superfícies (.escuro, .claro,
   .branca) e três componentes (.cabeca, .texto, .citacao) que se comportam
   de acordo com a superfície em que estão. Cada dobra só declara o que é
   realmente seu.
   ========================================================================== */

.secao {
  position: relative;
  overflow: hidden;
  padding: var(--dobra-y) 0;
}

/* --- Superfícies --- */

.secao.claro  { background: var(--perola); color: var(--azul-800); }
.secao.branca { background: var(--branco); color: var(--azul-800); }

.secao.escuro {
  color: var(--azul-100);
  background:
    radial-gradient(100% 62% at 50% 0%, rgba(20, 53, 95, 0.85) 0%, rgba(10, 34, 71, 0) 68%),
    linear-gradient(180deg, #0A2247 0%, #071C3B 100%);
}

/* Noite — a variação mais escura do azul. Reservada às duas dobras em que o
   texto fala justamente de caminhar no escuro (a cena) e à dobra do decreto,
   onde o documento precisa parecer pousado sobre uma mesa. */
.secao.noite {
  color: var(--azul-100);
  background: linear-gradient(180deg, #071C3B 0%, #06162E 48%, #071C3B 100%);
}

.secao > .wrap { position: relative; z-index: 1; }

/* --- Cabeça de seção: olho + título + subtítulo --- */

.cabeca {
  text-align: center;
  max-width: 820px;
  margin-inline: auto;
}
.cabeca .olho { margin-bottom: 20px; }
.cabeca h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 4.4vw, var(--t-titulo1));
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.cabeca-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 2vw, var(--t-subtitulo));
  line-height: 1.48;
  margin: 22px auto 0;
  max-width: 600px;
  text-wrap: balance;
}

.claro  .cabeca .olho, .branca .cabeca .olho { color: var(--cham-700); }
.claro  .cabeca h2,    .branca .cabeca h2    { color: var(--azul-800); }
.claro  .cabeca h2 em, .branca .cabeca h2 em { color: var(--cham-700); }
.claro  .cabeca-sub,   .branca .cabeca-sub   { color: var(--neu-700); }

.escuro .cabeca .olho, .noite .cabeca .olho { color: var(--cham-500); }
.escuro .cabeca h2,    .noite .cabeca h2    { color: var(--branco); }
.escuro .cabeca h2 em, .noite .cabeca h2 em { color: var(--cham-500); }
.escuro .cabeca-sub,   .noite .cabeca-sub   { color: var(--azul-100); }

/* --- Corpo de leitura longa --- */

.texto {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18.5px, 1.5vw, var(--t-corpo));
  line-height: 1.66;
}
/* No corpo, a ênfase é só de peso: Medium 500 é o grau máximo autorizado
   para a serifada, e abaixo dele só existe o Regular do próprio corpo. */
.texto strong { font-weight: 500; }

.claro .texto, .branca .texto { color: var(--neu-900); }
.claro .texto strong, .branca .texto strong { color: var(--azul-800); }

/* Sobre fundo escuro o salto de peso lê menos do que sobre a pérola, então
   a ênfase ganha branco puro no lugar do azul claro do corpo. */
.escuro .texto, .noite .texto { color: #E4EAF3; }
.escuro .texto strong, .noite .texto strong { color: var(--branco); }

/* Trecho curto com traço champagne por baixo — usado nas datas e nos poucos
   pontos em que a frase precisa parar o olho sem virar citação. */
.grifo {
  font-weight: 500;
  box-shadow: inset 0 -0.32em 0 rgba(216, 192, 154, 0.4);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.claro .grifo, .branca .grifo { color: var(--cham-800); }
/* Sobre o azul, o traço champagne de 0,32 em vira um bloco acinzentado atrás
   do texto. No escuro o grifo é a própria cor champagne mais um fio fino. */
.escuro .grifo, .noite .grifo {
  color: var(--cham-300);
  box-shadow: inset 0 -1px 0 rgba(216, 192, 154, 0.55);
}

/* --- Citação de destaque --- */

.citacao {
  margin: clamp(46px, 5.4vw, 70px) auto;
  padding: clamp(30px, 3.6vw, 44px) 24px clamp(34px, 4vw, 48px);
  text-align: center;
  max-width: 700px;
}
.citacao .chama-selo { width: 20px; margin: 0 auto 22px; opacity: 0.95; }
.citacao blockquote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3.8vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.escuro .citacao, .noite .citacao {
  border-top: 1px solid rgba(216, 192, 154, 0.4);
  border-bottom: 1px solid rgba(216, 192, 154, 0.4);
  background: linear-gradient(180deg, rgba(216, 192, 154, 0.075) 0%, rgba(216, 192, 154, 0.01) 100%);
}
/* Dourado como assinatura, nunca como superfície de texto corrido */
.escuro .citacao blockquote, .noite .citacao blockquote {
  background: var(--dourado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sobre a pérola o degradê dourado cai para 1,6:1 e some. Aqui a citação é
   azul institucional, e o dourado fica nos dois fios que a emolduram. */
.claro .citacao, .branca .citacao {
  border-top: 1px solid var(--cham-600);
  border-bottom: 1px solid var(--cham-600);
  background: linear-gradient(180deg, rgba(216, 192, 154, 0.18) 0%, rgba(216, 192, 154, 0.02) 100%);
}
.claro .citacao blockquote, .branca .citacao blockquote { color: var(--azul-800); }

/* --- Listas marcadas --- */

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  position: relative;
  padding-left: 36px;
  font-family: var(--serif);
  font-size: clamp(17.5px, 1.4vw, 19.5px);
  line-height: 1.55;
}
.lista li + li { margin-top: 20px; }

/* Confirmação — tique verde desenhado em CSS. A chama do manual é ornamento
   subordinado (marca d'água, separador, selo de rodapé) e não entra como
   marcador de lista com texto ao lado. */
.lista-sim li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.40em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--verde-800);
  border-bottom: 2px solid var(--verde-800);
  transform: rotate(-45deg);
}
/* Sobre o azul o verde escuro desaparece — e, na caixa da oferta, o tique não
   está dizendo "sim, este é o seu caso" e sim listando o que vem incluso.
   Ali ele volta a ser champagne, que é a cor de assinatura da marca. */
.escuro .lista-sim li::before, .noite .lista-sim li::before {
  border-color: var(--cham-500);
  border-width: 1.5px;
}

/* Exclusão — X vermelho, dois fios cruzados no mesmo ponto */
.lista-nao li::before,
.lista-nao li::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.72em;
  width: 15px;
  height: 2px;
  border-radius: 1px;
  background: var(--alerta);
}
.lista-nao li::before { transform: rotate(45deg); }
.lista-nao li::after  { transform: rotate(-45deg); }

/* ==========================================================================
   8. 2ª dobra — A cena
   ========================================================================== */

.cena .marca-dagua {
  right: -9%;
  top: 8%;
  width: min(360px, 40vw);
  opacity: 0.07;
}

/* Ladainha: três constatações, cada uma atrás de um fio champagne. O fio
   substitui o marcador de lista — aqui não se está enumerando itens, e sim
   repetindo a mesma batida três vezes. */
.litania {
  list-style: none;
  margin: clamp(48px, 5.6vw, 72px) auto 0;
  padding: 0;
  max-width: var(--leitura);
}
.litania li {
  position: relative;
  padding-left: clamp(22px, 2.4vw, 32px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.5;
  color: #E4EAF3;
}
.litania li + li { margin-top: clamp(26px, 3vw, 38px); }
.litania li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  bottom: 0.22em;
  width: 1px;
  background: var(--cham-500);
  opacity: 0.55;
}
.litania strong { font-weight: 500; color: var(--branco); }

/* As três negativas. Curtas, centradas, uma por linha: é a única passagem da
   página em que o ritmo da copy é mais importante que a mancha de texto. */
.cena-negacao {
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.62;
  color: var(--cham-300);
  margin: 0 auto;
}

.cena-fecho {
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(23px, 3vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--branco);
  max-width: 22ch;
  margin: clamp(30px, 3.6vw, 46px) auto 0;
  text-wrap: balance;
}
.cena-fecho em { color: var(--cham-500); }

/* ==========================================================================
   9. 3ª dobra — Não é culpa sua
   ========================================================================== */

/* Dobra centrada por inteiro — cabeça, corpo e citação no mesmo eixo.
   A medida cai de 720 para 660px: em texto centrado as duas margens ficam
   irregulares, e linha curta é o que faz a irregularidade parecer decisão.
   É a mesma medida do corpo centrado da 2ª dobra da página de captura. */
.culpa .texto {
  margin-top: clamp(44px, 5vw, 64px);
  max-width: 660px;
  text-align: center;
  text-wrap: pretty;
}

/* ==========================================================================
   10. 4ª dobra — Acerbo Nimis, 1905

   O documento é o argumento desta dobra: a ordem existe, está escrita e tem
   data. Por isso a encíclica aparece como uma folha clara pousada sobre o
   azul mais escuro da página, e não como mais um parágrafo do corpo.
   ========================================================================== */

.decreto .marca-dagua {
  left: -8%;
  bottom: -6%;
  width: min(340px, 38vw);
  opacity: 0.06;
}

/* A folha é uma arte fechada de 770×320. O teto de largura é o tamanho nativo
   do arquivo: acima disso a imagem amolece, e o texto impresso nela é a parte
   que menos perdoa interpolação. */
.documento {
  position: relative;
  max-width: 770px;
  margin: clamp(44px, 5.2vw, 66px) auto 0;
  padding: 0;
  line-height: 0; /* mata o vão que a linha de base do <img> abriria embaixo */
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.85);
}
/* Fio dourado no alto da folha — o degradê oficial em superfície, não em texto */
.documento::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  z-index: 1;
  background: var(--dourado);
}
.documento img { width: 100%; height: auto; }

/* Os quatro conteúdos que o decreto manda percorrer. Aparecem aqui como
   colunas para já anunciarem, de forma silenciosa, a ordem da 5ª dobra. */
.pilares {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: clamp(40px, 4.6vw, 60px) auto 0;
  padding: 0;
  list-style: none;
  max-width: 760px;
  background: rgba(216, 192, 154, 0.28);
  border: 1px solid rgba(216, 192, 154, 0.28);
}
.pilares li {
  background: #071C3B;
  padding: clamp(20px, 2.4vw, 28px) 14px;
  text-align: center;
}
.pilares .num {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: var(--cham-600);
  margin-bottom: 12px;
}
.pilares .nome {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cham-300);
}

/* Os dois blocos de texto desta dobra ladeiam o documento e os pilares, e
   precisam do mesmo respiro que separa aqueles dois elementos entre si. */
.decreto .texto { margin-top: clamp(40px, 4.6vw, 58px); }

.decreto-remate {
  text-align: center;
  margin: clamp(40px, 4.6vw, 58px) auto 0;
  max-width: 30ch;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--branco);
  text-wrap: balance;
}
.decreto-remate em { color: var(--cham-500); }

/* ==========================================================================
   11. 5ª dobra — O mecanismo: a fé construída como uma casa
   ========================================================================== */

/* Mesmo tratamento da 3ª dobra: corpo centrado, medida em 660px para a linha
   curta justificar as duas margens irregulares, e text-wrap: pretty para a
   última linha não cair sozinha — órfã em texto centrado salta muito mais aos
   olhos do que em texto alinhado à esquerda. */
.mecanismo .texto {
  margin-top: clamp(44px, 5vw, 64px);
  max-width: 660px;
  text-align: center;
  text-wrap: pretty;
}

/* As três partes da obra. Ordem de leitura = ordem de construção: alicerce,
   paredes, cobertura. O fio champagne à esquerda engrossa a cada etapa —
   é o único sinal de progressão, e não precisa de mais nenhum. */
.casa {
  list-style: none;
  margin: clamp(44px, 5vw, 64px) auto 0;
  padding: 0;
  max-width: 860px;
}
.casa li {
  position: relative;
  background: var(--branco);
  border: 1px solid var(--neu-300);
  border-left: 3px solid var(--cham-500);
  padding: clamp(26px, 2.8vw, 34px) clamp(24px, 3vw, 38px);
  transition: transform 240ms cubic-bezier(.2,.7,.3,1), box-shadow 240ms ease;
}
.casa li + li { margin-top: 16px; }
.casa li:nth-child(2) { border-left-width: 5px; }
.casa li:nth-child(3) { border-left-width: 7px; }
.casa li:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(10, 34, 71, 0.4);
}
.casa .olho { color: var(--cham-700); margin-bottom: 12px; }
.casa h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--azul-800);
  margin: 0 0 12px;
}
.casa p {
  font-family: var(--serif);
  font-size: clamp(17.5px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--neu-700);
  margin: 0;
}

/* A oração não é peça de obra — então não recebe cartão.
   A pergunta vem antes, em corpo de texto; a resposta vem depois, sozinha e
   grande. É a única frase da dobra que não descreve uma etapa da obra. */
.morada-lead {
  text-align: center;
  max-width: 34ch;
  margin: clamp(44px, 5vw, 62px) auto 0;
  font-family: var(--serif);
  font-size: clamp(18.5px, 1.5vw, var(--t-corpo));
  line-height: 1.6;
  color: var(--neu-700);
}
.morada {
  text-align: center;
  max-width: 26ch;
  margin: 14px auto 0;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--azul-800);
  text-wrap: balance;
}

/* Remate da dobra: fecha o raciocínio da casa e entrega o botão */
.remate-claro {
  text-align: center;
  max-width: 30ch;
  margin: clamp(44px, 5vw, 62px) auto 0;
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.44;
  color: var(--azul-800);
  text-wrap: balance;
}
.remate-claro em { color: var(--cham-700); }

/* ==========================================================================
   12. 6ª dobra — A formação: as dez aulas
   ========================================================================== */

.formacao .marca-dagua {
  right: -10%;
  top: 4%;
  width: min(400px, 42vw);
  opacity: 0.06;
}

.formacao-intro {
  text-align: center;
  max-width: 640px;
  margin: clamp(26px, 3vw, 36px) auto 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 20px);
  line-height: 1.62;
  color: var(--azul-100);
}
.formacao-intro strong { font-weight: 500; color: var(--branco); }

.grade { max-width: 860px; margin: clamp(50px, 6vw, 78px) auto 0; }

/* Cabeçalho de módulo: olho champagne com um fio que corre até a margem */
.modulo-titulo {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--cham-500);
  margin: 0 0 6px;
}
.modulo + .modulo { margin-top: clamp(44px, 5vw, 64px); }
.modulo-titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cham-500);
  opacity: 0.4;
}

.aulas { list-style: none; margin: 0; padding: 0; }
.aula {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 28px) 0;
  border-bottom: 1px solid rgba(216, 192, 154, 0.16);
}
.aula .num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 0.95;
  color: var(--cham-600);
  font-variant-numeric: tabular-nums;
}
.aula h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--branco);
  margin: 0 0 8px;
}
.aula p {
  font-family: var(--serif);
  font-size: clamp(16.5px, 1.3vw, 18px);
  line-height: 1.56;
  color: #B9C7DA;
  margin: 0;
}

/* ==========================================================================
   13. 7ª dobra — Os bônus
   ========================================================================== */

/* Duas faixas horizontais, arte à esquerda e texto à direita. Em três colunas
   verticais os dois bônus disputavam altura com o certificado e o texto
   quebrava em colunas estreitas; deitados, cada um tem a linha inteira. */
.bonus-lista {
  list-style: none;
  margin: clamp(46px, 5.6vw, 72px) auto 0;
  padding: 0;
  max-width: 1000px;
}
.bonus-lista > li + li { margin-top: 22px; }

.faixa-bonus {
  display: grid;
  grid-template-columns: minmax(0, 34%) 1fr;
  align-items: stretch;
  background: var(--branco);
  border: 1px solid var(--neu-300);
  border-top: 2px solid var(--cham-500);
  overflow: hidden;
  transition: transform 240ms cubic-bezier(.2,.7,.3,1), box-shadow 240ms ease;
}
.faixa-bonus:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -26px rgba(10, 34, 71, 0.4);
}

/* Coluna da arte. As duas fotos são quadradas de origem, e a coluna é quadrada
   junto: em 4:3 o corte comeria o alto da cabeça do professor, e em 16:9 o
   decapitaria. Quem se adapta é o quadro, não a fotografia.
   O object-fit continua em cover para o caso de uma arte futura fora do 1:1 —
   com as atuais ele não recorta nada. */
.bonus-arte {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cham-100);
  border-right: 1px solid var(--neu-300);
}
.bonus-arte .bonus-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.bonus-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 3.4vw, 44px) clamp(26px, 3.4vw, 46px);
}
.bonus-texto .olho { color: var(--cham-700); margin-bottom: 16px; }
.bonus-texto h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(21px, 2vw, 26px);
  line-height: 1.24;
  letter-spacing: -0.01em;
  color: var(--azul-800);
  margin: 0 0 14px;
}
.bonus-texto p {
  font-family: var(--serif);
  font-size: clamp(17px, 1.4vw, 18.5px);
  line-height: 1.6;
  color: var(--neu-700);
  margin: 0;
}

/* ==========================================================================
   14. 11ª dobra — Quem é o professor

   Mesma estrutura da 3ª dobra da página de captura: as duas páginas
   apresentam o Michel do mesmo jeito.
   ========================================================================== */

.bio .marca-dagua {
  left: -8%;
  top: 6%;
  width: min(380px, 42vw);
  opacity: 0.07;
}

/* Escondido por padrão: o script só libera depois de confirmar que o arquivo
   carregou. Assim a dobra nunca mostra ícone de imagem quebrada. */
.bio-foto { display: none; }
.bio.tem-foto .bio-foto {
  display: block;
  position: relative;
  margin: 0 auto clamp(32px, 4vw, 46px);
  max-width: 320px;
}
.bio-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border-radius: 2px;
}
/* Moldura champagne deslocada — mesmo vocabulário dos fios de seção */
.bio-foto::before {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1px solid rgba(216, 192, 154, 0.45);
  border-radius: 2px;
  z-index: -1;
}

.bio-cabeca { text-align: center; }
.bio h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, var(--t-titulo1));
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--branco);
  margin: 0;
}
.bio-papel { color: var(--cham-500); margin-top: 16px; }

.bio-texto {
  margin-top: clamp(44px, 5vw, 62px);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18.5px, 1.5vw, var(--t-corpo));
  line-height: 1.66;
  color: #E4EAF3;
}
.bio-saudacao {
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 24px);
  color: var(--cham-300);
}
.bio-texto .enfase { color: var(--branco); }
.bio-texto strong { font-weight: 500; color: var(--branco); }

.bio-fecho {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 32px);
  color: var(--cham-300);
  text-align: center;
  margin-top: clamp(34px, 4vw, 48px);
}

/* Desktop com foto: retrato à esquerda, carta à direita */
@media (min-width: 901px) {
  .bio.tem-foto .bio-grid {
    display: grid;
    grid-template-columns: minmax(240px, 360px) 1fr;
    gap: clamp(40px, 5vw, 76px);
    align-items: start;
  }
  .bio.tem-foto .bio-foto {
    margin: 0;
    max-width: none;
    position: sticky;
    top: clamp(24px, 6vh, 72px);
  }
  .bio.tem-foto .bio-cabeca,
  .bio.tem-foto .bio-fecho,
  .bio.tem-foto .btn-linha { text-align: left; }
  .bio.tem-foto .bio-texto { margin-inline: 0; }
  .bio.tem-foto .citacao { margin-inline: 0; }
  /* A chama sai da esquerda para não brigar com o retrato */
  .bio.tem-foto .marca-dagua { left: auto; right: -5%; }
}

/* ==========================================================================
   15. 8ª dobra — Para quem é, e para quem não é
   ========================================================================== */

/* Colunas iguais: as duas listas passaram a ter cinco itens de comprimento
   parecido, e a assimetria de antes existia só porque o "não" era mais curto. */
.publico-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  /* Sem margem no alto. Nas outras dobras o primeiro bloco desce ~68px para se
     afastar da cabeça de seção; aqui não há cabeça — os títulos moram dentro
     dos próprios quadros —, então essa margem virava 68px de vão morto e a
     dobra abria com 198px de respiro contra os 130px de todas as outras. */
  margin-top: 0;
}

.caixa-publico { padding: clamp(30px, 3.2vw, 42px) clamp(26px, 3vw, 38px); }
/* A coluna do "sim" é a única com fundo próprio: é o lado da página em que a
   pessoa deve se reconhecer, e a hierarquia entre as duas precisa ser clara.
   Aqui a dobra é branca, então o cartão é pérola — a figura e o fundo trocam
   de lugar em relação aos cartões da dobra dos bônus, que são brancos sobre
   pérola. Cartão branco sobre dobra branca deixaria de ser cartão. */
.caixa-publico--sim {
  background: var(--perola);
  border: 1px solid var(--neu-300);
  border-top: 2px solid var(--cham-500);
}
.caixa-publico--nao {
  border-top: 2px solid var(--neu-300);
  padding-inline: clamp(4px, 1vw, 14px);
}

.caixa-publico h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 clamp(24px, 2.6vw, 32px);
}
.caixa-publico--sim h2 { color: var(--azul-800); }
.caixa-publico--nao h2 { color: var(--neu-500); }
/* O "não" é a palavra que inverte o sentido da coluna inteira e some no meio
   de um título cinza. Itálica porque é assim que a serifada enfatiza — o
   manual não autoriza negrito no Newsreader — e no mesmo vermelho dos X
   logo abaixo, para o título e os marcadores dizerem a mesma coisa. */
.caixa-publico--nao h2 em { color: var(--alerta); }

/* Listas paralelas merecem corpo igual: a hierarquia entre elas fica no fundo
   do cartão e na cor do texto, não no tamanho. */
.caixa-publico--sim .lista li { color: var(--azul-800); }
.caixa-publico--nao .lista li { color: var(--neu-700); }

/* ==========================================================================
   16. 9ª dobra — A oferta

   Pico da página. É a única dobra em que o dourado aparece em três lugares
   ao mesmo tempo — fio, moldura e preço —, e é para isso que ele foi
   poupado nas nove dobras anteriores.
   ========================================================================== */

.oferta {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(216, 192, 154, 0.12) 0%, rgba(216, 192, 154, 0) 62%),
    linear-gradient(180deg, #071C3B 0%, #06162E 100%);
}

/* Mockup da aula. Fica acima do quadro na pilha de camadas e o puxa para
   cima pela margem negativa, de modo que a base do notebook avance sobre a
   borda superior. O recuo é ~8% da altura da arte em qualquer tela: exatamente
   a faixa que a base prateada ocupa dentro do arquivo. */
.mockup-oferta {
  position: relative;
  z-index: 2;
  max-width: 660px;
  margin: clamp(34px, 4vw, 52px) auto calc(-1 * clamp(14px, 4vw, 30px));
  padding: 0;
  line-height: 0;
  pointer-events: none;
}
.mockup-oferta img { width: 100%; height: auto; }

.caixa-oferta {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: clamp(42px, 5vw, 62px) auto 0;
  padding: clamp(38px, 4.4vw, 58px) clamp(26px, 4vw, 56px) clamp(34px, 4vw, 50px);
  background: linear-gradient(180deg, rgba(216, 192, 154, 0.1) 0%, rgba(216, 192, 154, 0.02) 100%);
  border: 1px solid rgba(216, 192, 154, 0.38);
}
.caixa-oferta::before {
  content: "";
  position: absolute;
  left: -1px; right: -1px; top: -1px;
  height: 3px;
  background: var(--dourado);
}

/* O selo de prazo é a única coisa acima do título nesta dobra */
.oferta .selo + h2 { margin-top: 24px; }

/* Com o mockup no meio, o quadro perde a própria margem: quem afasta os dois
   da cabeça de seção agora é a margem do mockup. */
.mockup-oferta + .caixa-oferta { margin-top: 0; }

.caixa-oferta > .olho { color: var(--cham-500); margin-bottom: 26px; }

.entrega { margin-bottom: clamp(34px, 4vw, 46px); }
.entrega li { color: #E9EFF7; }
/* Um item da entrega vale mais que os outros. Só champagne e Medium 500 quase
   não se distinguiam do branco-azulado da lista sobre o azul, então entra
   também o fio champagne por baixo — o mesmo grifo que a página usa nas datas.
   Medium 500 é o grau máximo de peso autorizado para a serifada. */
.entrega .realce {
  font-weight: 500;
  font-size: 1.06em;
  color: var(--cham-300);
  box-shadow: inset 0 -1px 0 rgba(216, 192, 154, 0.6);
}

.preco {
  text-align: center;
  padding-top: clamp(30px, 3.4vw, 42px);
  border-top: 1px solid rgba(216, 192, 154, 0.3);
}
.preco-de {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--azul-400);
  margin: 0 0 6px;
}
.preco-de s { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* O preço em destaque é a parcela, não o valor à vista. "12x" e "R$" ficam em
   corpo pequeno e alinhados ao alto, para que só "20,37" ocupe a escala de
   display — é o número que a pessoa precisa levar embora. */
.preco-por {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 8vw, 82px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0;
  background: var(--dourado);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.preco-por .parcelas,
.preco-por .cifra {
  font-size: 0.42em;
  letter-spacing: 0;
  vertical-align: 0.42em;
}
.preco-por .parcelas { margin-right: 0.34em; }
.preco-por .cifra { margin-right: 0.12em; }
.preco-parcela {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.4vw, 16.5px);
  letter-spacing: 0.02em;
  color: var(--azul-100);
  margin: 16px 0 0;
}
.preco-parcela strong { font-weight: 600; color: var(--cham-300); }

.oferta .btn-linha { margin-top: clamp(30px, 3.4vw, 40px); }
.oferta .btn { width: 100%; }

.oferta-prazo {
  display: flex;
  justify-content: center;
  margin-top: clamp(32px, 3.6vw, 44px);
}

/* Selos de forma de pagamento. Pastilha branca para cada bandeira: as marcas
   têm cor própria e só se reconhecem nela, e sobre o azul da caixa nenhuma
   delas apareceria sem esse fundo claro por baixo. */
.pagamentos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: clamp(22px, 2.6vw, 30px) 0 0;
  padding: 0;
}
.pagamentos li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 32px;
  padding: 0 8px;
  border-radius: 5px;
  background: var(--branco);
  box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.6);
}
.pagamentos svg { width: 100%; height: auto; max-height: 20px; }

/* ==========================================================================
   17. 10ª dobra — Garantia
   ========================================================================== */

.garantia .wrap { text-align: center; }

.selo-garantia {
  position: relative;
  width: 152px;
  height: 152px;
  margin: 0 auto clamp(30px, 3.4vw, 42px);
  border: 1px solid var(--cham-600);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
/* Anel interno — a moldura dupla dos selos de garantia, feita com o fio
   champagne que já organiza o resto da página. */
.selo-garantia::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(179, 154, 108, 0.45);
  border-radius: 50%;
}
.selo-garantia .num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1;
  color: var(--cham-800);
}
.selo-garantia .olho {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--cham-700);
}

/* Corpo centrado, como nas 3ª e 5ª dobras: medida em 660px para a linha curta
   justificar as duas margens irregulares, e text-wrap: pretty contra a órfã. */
.garantia .texto {
  margin-top: clamp(34px, 4vw, 46px);
  max-width: 660px;
  text-align: center;
  text-wrap: pretty;
}

/* ==========================================================================
   18. 12ª dobra — Objeções

   <details> nativo: abre sem script, funciona com teclado e leitor de tela,
   e continua encontrável pela busca da página quando fechado.
   ========================================================================== */

.objecoes-lista { max-width: 820px; margin: clamp(40px, 4.8vw, 60px) auto 0; }

.objecao { border-bottom: 1px solid var(--neu-300); }
.objecao:first-child { border-top: 1px solid var(--neu-300); }

.objecao summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 28px) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--azul-800);
  transition: color 200ms ease;
}
.objecao summary::-webkit-details-marker { display: none; }
.objecao summary::marker { content: ""; }
.objecao summary:hover { color: var(--cham-800); }
.objecao summary:focus-visible { outline: 2px solid var(--cham-600); outline-offset: 4px; }

/* Cruz que vira traço ao abrir — dois fios, nada de glifo de terceiros */
.sinal {
  position: relative;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  align-self: center;
  transition: transform 280ms cubic-bezier(.2,.7,.3,1);
}
.sinal::before,
.sinal::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--cham-700);
  transform: translateY(-50%);
}
.sinal::after { transform: translateY(-50%) rotate(90deg); }
.objecao[open] .sinal { transform: rotate(135deg); }

.objecao-resposta {
  padding: 0 clamp(0px, 4vw, 44px) clamp(26px, 3vw, 34px) 0;
  font-family: var(--serif);
  font-size: clamp(17.5px, 1.4vw, 19px);
  line-height: 1.64;
  color: var(--neu-700);
}
.objecao-resposta strong { font-weight: 500; color: var(--azul-800); }

/* ==========================================================================
   19. 13ª dobra — Fecho

   Fecha o arco: mesma vela do topo, agora sem foto. A página começou no
   escuro com uma chama acesa e termina no escuro com a mesma chama.
   ========================================================================== */

.fecho { text-align: center; padding-bottom: clamp(84px, 10vw, 140px); }
.fecho::before {
  content: "";
  position: absolute;
  top: -26%;
  left: 50%;
  width: min(1000px, 130%);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  /* Mais fechado que o véu do hero: lá ele cai sobre uma fotografia escura,
     aqui sobre azul chapado, onde o mesmo valor lava a cor da seção. */
  background: radial-gradient(circle, rgba(216, 192, 154, 0.1) 0%, rgba(216, 192, 154, 0.03) 30%, rgba(216, 192, 154, 0) 58%);
  pointer-events: none;
}

.fecho h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--branco);
  margin: 0 auto;
  max-width: 16ch;
  text-wrap: balance;
}
.fecho h2 em { color: var(--cham-500); }

.fecho-texto {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(19px, 1.7vw, 23px);
  line-height: 1.6;
  color: #E4EAF3;
  /* 40ch, não 34: a maior das linhas escritas tem 35 caracteres, e uma medida
     mais curta a quebraria antes do <br> — anulando o par que a copy compôs. */
  max-width: 40ch;
  margin: clamp(28px, 3.2vw, 40px) auto 0;
}
.fecho-texto strong { font-weight: 500; color: var(--branco); }

/* Quebra de linha da copy, só onde a linha cabe inteira */
.quebra { display: none; }
@media (min-width: 621px) { .quebra { display: inline; } }

.fecho-convite {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.24;
  letter-spacing: -0.015em;
  color: var(--cham-300);
  margin: clamp(32px, 3.6vw, 44px) auto 0;
  max-width: 20ch;
  text-wrap: balance;
}

/* ==========================================================================
   20. Rodapé
   ========================================================================== */

.rodape {
  background: var(--azul-900);
  border-top: 1px solid rgba(216, 192, 154, 0.18);
  padding: 44px 24px;
  text-align: center;
}
.rodape img { height: 52px; width: auto; margin-inline: auto; opacity: 0.92; }

/* ==========================================================================
   21. Barra fixa (mobile) — reaproveita o rótulo do botão da 1ª dobra
   ========================================================================== */

.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(6, 22, 46, 0.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(216, 192, 154, 0.22);
  transform: translateY(115%);
  transition: transform 320ms cubic-bezier(.2,.7,.3,1);
  display: none;
}
.barra-fixa.visivel { transform: translateY(0); }
.barra-fixa .btn { --btn-y: 17px; width: 100%; font-size: 13.5px; letter-spacing: 0.12em; padding-inline: 16px; }

/* ==========================================================================
   22. Revelação ao rolar
   ========================================================================== */

.revela {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.3,1);
}
.revela.dentro { opacity: 1; transform: none; }
.revela[data-atraso="1"] { transition-delay: 90ms; }
.revela[data-atraso="2"] { transition-delay: 180ms; }
.revela[data-atraso="3"] { transition-delay: 270ms; }

/* ==========================================================================
   23. Responsivo
   ========================================================================== */

@media (max-width: 900px) {
  .bonus-lista > li + li { margin-top: 16px; }

  .publico-grid { grid-template-columns: 1fr; gap: 20px; }

  /* Quatro colunas de 12,5vw deixariam "SACRAMENTOS" em três linhas */
  .pilares { grid-template-columns: repeat(2, 1fr); }

  .aula { grid-template-columns: 48px 1fr; }
}

/* A faixa de bônus aguenta as duas colunas bem abaixo dos 900px: em 760px a
   arte fica com 242px e ainda sobram ~420px de texto. Só a partir daqui a
   coluna de leitura fica estreita demais e a faixa deita — arte em cima,
   texto embaixo. A arte segue quadrada nas duas formas, então nada é
   recortado em nenhuma tela. */
@media (max-width: 700px) {
  .faixa-bonus { grid-template-columns: 1fr; }
  .bonus-arte {
    border-right: 0;
    border-bottom: 1px solid var(--neu-300);
  }
}

@media (max-width: 620px) {
  .wrap { padding-inline: 20px; }

  /* Aviso e contagem passam a ocupar duas linhas: lado a lado, a linha inteira
     ficaria com 9px de tipografia para caber. O fio vertical perde a função
     assim que o par deixa de ser horizontal. */
  .topbar { padding: 8px 20px; }
  .topbar .olho { font-size: 11.5px; letter-spacing: 0.18em; }
  /* Empilhados, os dois blocos precisam de mais ar entre si do que precisavam
     lado a lado: aqui o vão é o que separa aviso de mostrador. */
  .topbar-conteudo { flex-direction: column; gap: 12px; }
  .contagem .bloco { min-width: 62px; }
  .contagem b { font-size: 17px; }
  .contagem i { font-size: 9px; letter-spacing: 0.12em; }

  .hero-marca { flex-direction: column; gap: clamp(9px, 2vh, 16px); }
  .hero h1 { max-width: 20ch; }
  .selo { font-size: 11.5px; letter-spacing: 0.18em; padding: 9px 16px 7px; }
  .btn { --btn-y: 19px; padding-inline: 26px; font-size: 13.5px; letter-spacing: 0.11em; width: 100%; }
  .separador { margin-block: 40px; }
  .barra-fixa { display: block; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); background: var(--azul-900); }

  /* A moldura deslocada do retrato sangraria pela borda da tela */
  .bio-foto::before { inset: 10px -10px -10px 10px; }

  /* A citação vem impressa na arte, e a arte tem 770px de largura fixa. Dentro
     da coluna de leitura ela cairia para 350px — a citação a ~13px e os
     rótulos a ~5px. Sangrando até a borda, a peça recupera os 40px do respiro
     da coluna: é o máximo que este arquivo permite sem uma arte vertical.
     Ver a nota "4ª dobra · arte da encíclica" no fim deste arquivo. */
  .documento { margin-inline: -20px; }

  /* Numeral e texto lado a lado ficam com 40px de coluna útil; empilhar o
     numeral devolve a linha inteira ao título da aula. */
  .aula { grid-template-columns: 1fr; gap: 8px; }
  .aula .num { font-size: 26px; }

  .selo-garantia { width: 128px; height: 128px; }
  .selo-garantia .num { font-size: 44px; }

  .objecao summary { gap: 16px; }
  .objecao-resposta { padding-right: 0; }

  /* Seis selos a 52px somam 352px numa caixa útil de 268 a 298: a Amex caía
     sozinha numa segunda linha. A 40px o conjunto cabe inteiro até em 360px de
     tela, que é como fileira de bandeira deve ser lida — de uma vez só. */
  .pagamentos { gap: 4px; }
  .pagamentos li { width: 40px; height: 27px; padding: 0 5px; }
  .pagamentos svg { max-height: 16px; }
}

/* Estrutura empilhada do hero: topo e base ancorados nas pontas da dobra,
   abrindo o vão do meio para o rosto do professor. Vale em qualquer tela em
   pé — celular ou tablet — e não só abaixo de 620px. */
@media (max-width: 620px), (orientation: portrait) {
  .hero { align-items: stretch; }
  .hero > .wrap { display: flex; }
  .hero-conteudo {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  /* Ajuste fino de altura dos dois blocos dentro da dobra */
  .hero-topo { margin-top: -15px; }
  .hero-topo .hero-marca { margin-bottom: 0; }
  .hero-base { margin-bottom: 30px; }
}

/* Trava de composição do hero mobile.
   A foto é 9:16, então sua altura é sempre 1,7778 × a largura da tela, e a
   faixa escura abaixo da vela e do Catecismo começa em 65% dela — ou seja, a
   1,156 × 100vw do topo da dobra, descontado o respiro superior (~3vh).
   Dando essa altura mínima ao bloco de cima, o bloco de baixo nunca começa
   antes disso: o deslocamento de 30px vale onde sobra espaço e se anula
   sozinho onde não sobra, sem depender de adivinhar aparelho por aparelho.
   Só em retrato: deitado, 115vw seria maior que a dobra inteira. */
@media (max-width: 620px) and (orientation: portrait) {
  .hero-topo { min-height: calc(115.6vw - 3vh); }
}

/* --------------------------------------------------------------------------
   Tablet em pé (iPad Mini, iPad 11", iPad 13")

   Faixa larga demais para as regras de celular e alta demais para as de
   desktop. Dois defeitos nasciam aqui: o H1 herdava max-width em `ch`, que
   numa dobra de 744px vira uma coluna de 300px no meio de 700 — a manchete
   empilhava em seis linhas; e a partir de 901px o hero entrava no layout
   horizontal, com a foto 16:9 espremida numa dobra vertical.
   -------------------------------------------------------------------------- */

@media (min-width: 621px) and (orientation: portrait) {
  /* Medida de linha em pixel, não em `ch`: aqui o limite é a coluna, não a fonte */
  .hero-conteudo { max-width: 620px; margin-inline: auto; }
  .hero h1 { max-width: none; font-size: clamp(34px, 4.8vw, 48px); }
  .hero h2 { max-width: none; font-size: clamp(19px, 2.2vw, 24px); margin-top: clamp(14px, 1.8vw, 22px); }
  .hero-apoio { font-size: clamp(16px, 1.8vw, 18px); margin-block: clamp(16px, 2vw, 24px) clamp(12px, 1.6vw, 18px); }
  .hero .btn { --btn-y: 19px; font-size: 14px; }

  .hero-marca img { height: clamp(64px, 8.4vw, 84px); }

  /* O deslocamento de 30px sai aqui: cada pixel a mais sobe o H1 de volta
     para dentro da faixa da vela. */
  .hero-base { margin-bottom: 0; }
}


/* --------------------------------------------------------------------------
   1ª dobra · foto

   Dois arquivos, um por orientação. Os .jpg são versões comprimidas dos PNG
   originais, que seguem na pasta como matriz. Ao trocar a foto, manter a
   proporção e o enquadramento de cada uma.

   Desktop  hero-desktop.jpg  1920×1080 · professor à direita, estante escura
                              à esquerda. Sem véu: a área do texto já é preta
                              (17:1 a 20:1 contra o branco).

   Mobile   hero-mobile.jpg   1080×1350 · professor centralizado. Aqui o texto
                              cruza rosto, vela e Catecismo — sem véu a faixa
                              central dá só 2:1. Com o véu azul 70% do manual,
                              vai a 9,3:1 no pior ponto.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) and (orientation: landscape) {
  .hero-foto {
    display: block;
    background-image: url("../img/hero-desktop.jpg");
  }
}

@media (max-width: 900px), (orientation: portrait) {
  /* Alinhada ao topo, inteira, sem corte e sem nenhuma máscara.
     A proporção 9:16 resolve sozinha: o rosto, a vela e o Catecismo caem
     exatamente no vão entre o bloco do topo e o bloco da base, e as duas
     faixas de texto assentam na vinheta escura. Medido: 15,9:1 a 21:1 no
     topo, 6,9:1 a 21:1 na base. Nada precisa ser velado. */
  .hero-foto {
    display: block;
    background-position: center top;
    background-size: 100% auto;
    background-image: url("../img/hero-mobile.jpg");
  }
  /* A base da foto é preta e termina antes do fim da dobra. Escurecendo o
     próprio fundo da seção, a emenda some — sem sobrepor nada à imagem. */
  .hero {
    background: linear-gradient(180deg, #0A2247 0%, #06162E 38%, #000 78%);
  }
}

/* Tablet em pé: a foto 9:16 fica ~40% mais alta que a dobra, então algo é
   cortado de qualquer jeito. Ancorada em 62% da altura, sobra estante escura
   sob o bloco do topo e vinheta preta sob o bloco da base — que é onde o
   texto precisa assentar. Ancorada no topo, a base cairia sobre a vela;
   ancorada embaixo, o logo cairia sobre o rosto.
   Precisa vir depois do bloco acima para vencer na cascata. */
@media (min-width: 621px) and (orientation: portrait) {
  .hero-foto { background-position: center 62%; }
}

/* Celular deitado: a foto 9:16 mostraria só uma nesga da estante no topo, sem
   o professor. Ela sai de cena e o hero volta ao fundo institucional.
   Precisa vir depois do bloco acima para vencer na cascata. */
@media (max-width: 900px) and (orientation: landscape) {
  .hero-foto { display: none; }
  .hero {
    background:
      radial-gradient(120% 78% at 50% -8%, rgba(44, 81, 131, 0.55) 0%, rgba(10, 34, 71, 0) 62%),
      linear-gradient(180deg, #0C2650 0%, #0A2247 46%, #071B3A 100%);
  }
  .hero-conteudo { justify-content: center; }
  .hero-topo { margin-top: 0; min-height: 0; }
  .hero-base { margin-bottom: 0; }
}

/* Telas baixas — celular deitado, aparelho de 640 px, netbook, janela de
   navegador espremida. Aqui a altura manda sozinha, o H1 usa a largura
   disponível em vez de empilhar linhas, e o bloco inferior encolhe o
   suficiente para descer até a parte escura da foto. */
@media (max-height: 700px) {
  .hero { padding-block: clamp(12px, 2.6vh, 32px); }
  .hero-marca {
    gap: clamp(10px, 2.4vh, 22px);
    margin-bottom: clamp(8px, 2vh, 18px);
  }
  .hero-marca img { height: clamp(28px, 6.6vh, 52px); }
  .hero h1 { font-size: clamp(17px, 3.2vh, 34px); max-width: 40ch; }
  .hero h2 {
    font-size: clamp(12px, 1.95vh, 19px);
    margin-top: clamp(5px, 1.1vh, 14px);
    max-width: 48ch;
  }
  .hero-apoio {
    font-size: clamp(12px, 1.7vh, 16px);
    margin-block: clamp(6px, 1.3vh, 16px) clamp(5px, 1.1vh, 13px);
  }
  .hero .btn { --btn-y: clamp(8px, 1.3vh, 16px); font-size: 12px; letter-spacing: 0.1em; }

  /* O deslocamento de 30px do bloco inferior sobe o H1 para dentro da faixa
     do professor justamente onde a dobra é mais curta. Aqui ele é anulado:
     cada pixel a mais empurra o texto de volta para cima da vela. */
  .hero-topo { margin-top: -8px; }
  .hero-base { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   4ª dobra · arte da encíclica

   pio-x-acerbo-nimis.jpg  770×320 · olho, citação, assinatura e retrato de
                           São Pio X compostos na própria arte. O .png ao lado
                           segue na pasta como matriz, igual às fotos do hero.

   LIMITE ACEITO — legibilidade no celular. Como o texto está impresso na
   imagem, ele encolhe junto com ela. Medido:

     1440px e 820px → escala 1,00 · citação 30px · rótulos 11px   ✓
      390px         → escala 0,51 · citação 15px · rótulos 5,6px  ✗
      360px         → escala 0,47 · citação 14px · rótulos 5,1px  ✗

   A citação ainda se lê no celular; "ENCÍCLICA ACERBO NIMIS · 15 DE ABRIL DE
   1905" e "PAPA SÃO PIO X" não. O sangramento até a borda (regra em
   `@media (max-width: 620px)`) já recupera os 40px do respiro da coluna — é
   todo o ganho possível sem uma segunda arte.

   Decidido em 07/08/2026 manter assim: a citação é o que a dobra precisa
   entregar, e ela se lê. O crédito e a data existem para quem estiver no
   desktop e para quem usa leitor de tela, que os recebe pelo alt da imagem.

   Se um dia se quiser resolver, o caminho é o mesmo que a 1ª dobra usa para a
   fotografia: uma arte vertical para o celular, com o retrato acima e o texto
   abaixo em corpo maior. Bastaria trocar o src por <picture> com
   media="(max-width: 620px)" — nenhuma outra mudança seria necessária.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7ª dobra · arte dos bônus

   PENDENTE — os dois painéis champagne com a chama são provisórios.

   Ao receber as artes, salvar como bonus-1.jpg e bonus-2.jpg em assets/img/ e
   trocar cada <figure class="bonus-arte bonus-arte--vaga"> pelo bloco que já
   está comentado no index.html. Nada no CSS precisa mudar.

   Proporção  4:3 no desktop · 16:9 abaixo de 900px (o recorte é feito por
              object-fit: cover, então o motivo principal deve ficar no centro
              da arte para sobreviver aos dois enquadramentos).
   Tamanho    800×600 no mínimo. A coluna chega a 380px em tela grande, o que
              cobre densidade 2x com folga.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   24. Telas muito estreitas (iPhone SE de 1ª geração, 320 px e abaixo)
   -------------------------------------------------------------------------- */

@media (max-width: 359px) {
  /* A tarja de matrículas não cabe em uma linha com a entreletra normal e
     quebrava em duas, comendo altura da dobra */
  .topbar { padding: 7px 14px; }
  .topbar .olho { font-size: 10px; letter-spacing: 0.1em; }
  .topbar-conteudo { gap: 10px; }
  .contagem .bloco { min-width: 52px; }
  .contagem b { font-size: 16px; }
  .contagem i { font-size: 8.5px; letter-spacing: 0.06em; }
  .pilares { grid-template-columns: 1fr; }

  /* Aqui a caixa tem 228px úteis e os seis selos não cabem em uma linha de
     jeito nenhum. Travando a lista em três por linha, a quebra vira 3+3 — que
     lê como grade — em vez do 5+1 que o wrap automático produziria. */
  .pagamentos { max-width: 140px; }
}

@media (max-width: 340px) {
  /* Aqui a dobra tem 506px e a foto, 569px: ela cobre tudo e não sobra faixa
     escura para o texto — o H1 cairia sobre a vela a 3:1. Reduzir a tipografia
     ainda mais deixaria o H1 em 15px. A foto sai de cena e o hero volta ao
     fundo institucional, que é onde a copy respira nesse tamanho. */
  .hero-foto { display: none; }
  .hero {
    background:
      radial-gradient(120% 78% at 50% -8%, rgba(44, 81, 131, 0.55) 0%, rgba(10, 34, 71, 0) 62%),
      linear-gradient(180deg, #0C2650 0%, #0A2247 46%, #071B3A 100%);
  }
  /* Sem foto, o vão entre os dois blocos não tem mais função: a copy volta a
     ser uma pilha centralizada, como era antes da fotografia entrar. */
  .hero-conteudo { justify-content: center; }
  .hero-topo { margin-top: 0; min-height: 0; }
  .hero-topo .hero-marca { margin-bottom: clamp(16px, 3.4vh, 30px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .revela { opacity: 1; transform: none; }
}