@charset "utf-8";
/* ===========================================================================
   Escola de Liturgia — Página de vendas do Perpétuo
   Sistema claro: branco e marfim dominantes, escuro como pontuação.

   Três famílias, três funções:
     Newsreader Itálico  · títulos (H1, H2) — a voz que anuncia
     Montserrat caixa-alta· H3 e rótulos — a voz que classifica
     Merriweather        · corpo — a voz que ensina
   =========================================================================== */

/* ---- 1 · Fontes --------------------------------------------------------- */
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-200-italic.woff2)format("woff2");font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-300-italic.woff2)format("woff2");font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(../fonts/newsreader-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-200.woff2)format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url(../fonts/montserrat-600.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Merriweather;src:url(../fonts/merriweather-300.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:Merriweather;src:url(../fonts/merriweather-400.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Merriweather;src:url(../fonts/merriweather-400-italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Merriweather;src:url(../fonts/merriweather-700.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---- 2 · Tokens da marca ------------------------------------------------ */
:root{
  --preto:#000;          /* Preto Litúrgico  */
  --marfim:#F3EEEA;      /* Marfim           */
  --branco:#FFF;         /* Branco           */
  --vinho:#4C1C27;       /* Vinho            */
  --ouro:#CA9E67;        /* Ouro Escola — sobre escuro */
  --ouro-velho:#9F7233;  /* Ouro Velho — sobre claro   */
  --ouro-realce:#D19330; /* Realce em tela             */
  --coral:#F25D5E;
  --verde:#00E278;

  /* Tinta: preto litúrgico com um resto de calor, para leitura longa. */
  --tinta:#14100E;
  --tinta-clara:#5B534E;

  --f-titulo:Newsreader,"Iowan Old Style",Georgia,"Times New Roman",serif;
  --f-rotulo:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --f-corpo:Merriweather,Georgia,"Times New Roman",serif;

  --envelope:1240px;
  --goteira:clamp(1.35rem,5vw,3.5rem);
  --respiro:clamp(2.3rem,5vw,4.75rem);

  /* Da borda do envelope até a borda da tela: a goteira mais a margem que
     sobra quando o envelope atinge a largura máxima e fica centrado. */
  --sangria:calc(var(--goteira) + max(0px,(100vw - 2 * var(--goteira) - var(--envelope)) / 2));

  --curva:cubic-bezier(.22,.61,.36,1);

  /* Tema padrão — branco. */
  --bg:var(--branco);
  --ink:var(--tinta);
  --ink-suave:var(--tinta-clara);
  --acento:var(--ouro-velho);
  /* Ouro Velho reprova em texto miúdo sobre claro (4,26:1 no branco, 3,7:1 no
     marfim — o manual registra isso na p. 19). Para TEXTO pequeno em ouro vale
     a ponta escura do Degradê oficial, #8A6530: 5,3:1 no branco, 4,6:1 no
     marfim. O Ouro Velho segue nos filetes, numerais e ornamentos. */
  --acento-texto:#8A6530;
  --regra:color-mix(in srgb,var(--ouro-velho) 34%,transparent);
  --regra-forte:color-mix(in srgb,var(--tinta) 16%,transparent);
  --campo:var(--marfim);
}

/* ---- 3 · Temas de seção ------------------------------------------------- */
.t-marfim{--bg:var(--marfim);--campo:var(--branco)}
.t-preto{
  --bg:var(--preto);--ink:var(--marfim);--ink-suave:#A79C93;
  --acento:var(--ouro);--acento-texto:var(--ouro);
  --regra:color-mix(in srgb,var(--ouro) 38%,transparent);
  --regra-forte:color-mix(in srgb,var(--marfim) 20%,transparent);
  --campo:#0B0908;
}
.t-vinho{
  --bg:var(--vinho);--ink:var(--marfim);--ink-suave:#C0A9AC;
  --acento:var(--ouro);--acento-texto:var(--ouro);
  --regra:color-mix(in srgb,var(--ouro) 40%,transparent);
  --regra-forte:color-mix(in srgb,var(--marfim) 22%,transparent);
  --campo:#3C161E;
}

/* ---- 4 · Base ----------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;background:var(--branco);color:var(--tinta);
  font-family:var(--f-corpo);font-weight:400;font-size:clamp(1rem,.96rem + .18vw,1.075rem);
  line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-ligatures:common-ligatures;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
:where(h1,h2,h3,h4,p,ul,ol,figure,blockquote){margin:0}
ul{padding:0;list-style:none}
::selection{background:var(--ouro-velho);color:var(--branco)}
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:2px}
.vsu{position:absolute;width:0;height:0;overflow:hidden}
.oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- 5 · Estrutura ------------------------------------------------------ */
.secao{
  position:relative;background:var(--bg);color:var(--ink);
  padding-block:var(--respiro);padding-inline:var(--goteira);
  isolation:isolate;
}
.envelope{max-width:var(--envelope);margin-inline:auto;position:relative}
.estreito{max-width:74ch;margin-inline:auto}


/* ---- 6 · Tipografia ----------------------------------------------------- */
/* H1 e H2 — Newsreader itálico. */
.display{
  font-family:var(--f-titulo);font-style:italic;font-weight:200;
  font-size:clamp(2.85rem,7.4vw,6.1rem);line-height:.99;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance;
}
.titulo{
  font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(2.05rem,4.5vw,3.65rem);line-height:1.07;letter-spacing:-.018em;
  color:var(--ink);text-wrap:balance;max-width:20ch;
}
.titulo--largo{max-width:26ch}
/* Títulos mistos: a montagem em caixa-alta na Montserrat abre o título e a
   Newsreader itálica em caixa-baixa fecha. Mesmo peso óptico — a sans entra
   menor porque ali a altura que conta é a da maiúscula, não a da minúscula.
   text-transform é só desenho: o texto no DOM continua como está na copy. */
.tit-caps{
  font-family:var(--f-rotulo);font-style:normal;font-weight:300;
  text-transform:uppercase;letter-spacing:.065em;
  /* A caixa-alta da Montserrat pesa mais que a caixa-baixa da Newsreader no
     mesmo corpo. Os 2pt saem em medida absoluta de propósito: assim a redução
     é a mesma em qualquer ponto da escala fluida, e não escorrega com a tela. */
  font-size:calc(.72em - 2pt);
  /* Em bloco: a montagem e o fecho ficam cada um no seu nível. Em linha, o
     fecho subia para a linha da caixa-alta e sobrava órfão ("... FORMOU. E"),
     e o corte mudava a cada largura de tela. */
  display:block;margin-bottom:.12em;
}
.display .tit-caps{font-weight:200;letter-spacing:.055em}
/* Quando a caixa-alta é o título inteiro (um nome), ganha corpo e respiro.
   Classe explícita, não :only-child — num título partido o span também é o
   único ELEMENTO filho (o resto é nó de texto), e a regra pegava todos eles. */
.tit-caps--placa{font-size:calc(.8em - 2pt);letter-spacing:.1em}

.titulo--sm{
  font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,2.7vw,2.15rem);line-height:1.16;letter-spacing:-.012em;
  color:var(--ink);text-wrap:balance;
}
/* A voz: onde alguém fala, ou onde a página para para dizer uma coisa só. */
.voz{
  font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(1.5rem,3.1vw,2.5rem);line-height:1.24;letter-spacing:-.012em;
  color:var(--ink);text-wrap:balance;
}
.voz--grande{font-weight:200;font-size:clamp(2.6rem,7vw,5.6rem);line-height:1;letter-spacing:-.024em}
.voz--pequena{font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.5;font-weight:400}

/* H3 e rótulos — Montserrat caixa-alta, tracking aberto. */
.rotulo{
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:clamp(.735rem,.9vw,.815rem);letter-spacing:.19em;line-height:1.5;
  color:var(--ink);
}
.rotulo--acento{color:var(--acento-texto)}
.rotulo--md{font-size:clamp(.79rem,1.05vw,.9rem);letter-spacing:.165em;line-height:1.45}
.rotulo--lg{font-size:clamp(.85rem,1.25vw,1.02rem);letter-spacing:.145em;line-height:1.4}

/* Corpo — Merriweather. */
.corpo{font-size:1em;line-height:1.74;color:var(--ink-suave);max-width:55ch}
.corpo--forte{color:var(--ink)}
.corpo-g{
  font-family:var(--f-corpo);font-weight:300;
  font-size:clamp(1.1rem,1.55vw,1.32rem);line-height:1.66;color:var(--ink);max-width:46ch;
}
.corpo strong,.corpo-g strong{font-weight:700;color:var(--ink)}
.corpo em,.corpo-g em{font-style:italic}
/* Órfãs: "pretty" proíbe que a última linha de um bloco fique com uma palavra
   só — o navegador puxa uma palavra da linha de cima em vez disso. Vale para
   texto corrido; os títulos ficam com "balance", que é outra coisa (equilibra
   o comprimento de TODAS as linhas), e um sobrescreveria o outro.
   Onde não houver suporte, o texto simplesmente quebra como antes. */
.corpo,.corpo-g,.pergunta__resposta,.marcas li,
.duas-linhas span,.duas-linhas strong,
.hero__apoio,.eixo__modulos,.bonus__nome{text-wrap:pretty}

/* Realce no vermelho da marca, trocando de ponta conforme o fundo: Vinho no
   claro (12,1:1 no marfim) e Coral no escuro (6,5:1 no preto). O Vinho sobre o
   preto daria 1,5:1 — some. São as duas pontas do mesmo vermelho da assinatura. */
.realce{color:var(--vinho)}
/* O :not é o que impede a troca para coral de atropelar a variante em ouro:
   `.t-preto .realce` tem duas classes e venceria `.realce--ouro`, que tem uma.
   Só aparece em seção escura — nas claras as duas regras empatam. */
.t-preto .realce:not(.realce--ouro),
.t-vinho .realce:not(.realce--ouro){color:var(--coral)}
/* Variante em ouro. Segue --acento, então já vem certo em cada fundo: Ouro
   Velho no claro, Ouro Escola no escuro. Só para título — em corpo pequeno
   sobre claro o Ouro Velho reprovaria, e aí o token é o --acento-texto. */
.realce--ouro{color:var(--acento)}
/* Filete lateral: marca um bloco sem cercá-lo — a versão contida do "box
   destacado" que a copy pede. Usado no veredito da 03 e na memória da 05. */
.filete{
  padding-left:clamp(1.3rem,3vw,2.6rem);
  border-left:1px solid var(--acento);
}
.centro{text-align:center;margin-inline:auto}
.mt-p{margin-top:1.1rem}
.mt-m{margin-top:clamp(1.6rem,2.6vw,2.4rem)}
.mt-g{margin-top:clamp(2.8rem,5.4vw,4.6rem)}

/* ---- 7 · Marca ---------------------------------------------------------- */
.marca{display:inline-block;padding:5.05%;margin:-5.05%} /* 1X de respiro (símbolo ÷ 8) */
.marca img{width:clamp(190px,20vw,258px)}

/* Marca d'água: o símbolo isolado, só onde o nome já apareceu. */
.aguada{
  position:absolute;right:0;bottom:-2%;
  width:clamp(150px,17vw,240px);opacity:.05;pointer-events:none;z-index:-1;
}

/* ---- 8 · Botões --------------------------------------------------------- */
.botao{
  --b-fundo:var(--verde);--b-tinta:var(--preto);--b-borda:var(--verde);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.85em;
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:clamp(.75rem,.95vw,.85rem);letter-spacing:.155em;line-height:1;
  padding:1.32em 2.5em;text-decoration:none;cursor:pointer;
  background:var(--b-fundo);color:var(--b-tinta);border:1px solid var(--b-borda);
  border-radius:2px;overflow:hidden;
  transition:background .45s var(--curva),color .45s var(--curva),border-color .45s var(--curva);
}
/* Seta em SVG: desenhada a traço, como o resto da iconografia. A versão
   anterior era CSS — filete de 1px emendado numa ponta de bordas giradas 45°,
   e a emenda quebrava no antialiasing neste corpo pequeno. */
.botao__seta{width:1.25em;height:1.25em;flex:none;transition:transform .45s var(--curva)}
.botao:hover .botao__seta{transform:translateX(.28em)}
/* No hero a seta aponta e caminha para baixo: ali o botão rola a página. */
.botao--verde:hover .botao__seta{transform:translateY(.26em)}
.botao--cheio:hover{--b-fundo:transparent;--b-tinta:var(--verde)}
/* Contorno em Verde Sistema; no hover o contorno vira preenchimento.
   12,15:1 sobre o preto do hero nos dois estados. */
.botao--verde{--b-fundo:transparent;--b-tinta:var(--verde);--b-borda:var(--verde)}
.botao--verde:hover{--b-fundo:var(--verde);--b-tinta:var(--preto);--b-borda:var(--verde)}
.botao--largo{width:100%}

/* ---- 9 · Barra fixa ----------------------------------------------------- */
.barra{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:.85rem clamp(1rem,4vw,2.4rem);
  background:color-mix(in srgb,var(--branco) 88%,transparent);
  -webkit-backdrop-filter:saturate(1.4)blur(14px);backdrop-filter:saturate(1.4)blur(14px);
  border-top:1px solid var(--regra-forte);
  transform:translateY(101%);transition:transform .6s var(--curva);
}
.barra[data-visivel]{transform:none}
.barra__marca img{width:38px}
.barra .botao{padding:1.05em 1.9em}
@media (max-width:620px){
  .barra{justify-content:center}
  .barra__marca{display:none}
  .barra .botao{width:100%}
}

/* ---- 10 · Hero ---------------------------------------------------------- */
/* Foto escura em sangria total, informação centrada no eixo — o corte clássico. */
.hero{
  position:relative;display:grid;place-items:center;overflow:hidden;
  /* Tela cheia de verdade: sem teto. O antigo min(100svh,940px) travava a
     altura em 940px e deixava sobra embaixo em qualquer monitor mais alto.
     svh é a viewport pequena — no celular não pula quando a barra some. */
  min-height:100vh;min-height:100svh;
  padding-block:clamp(3.4rem,9vh,6.5rem);text-align:center;
}
/* Fundo escuro por baixo da foto: se a imagem faltar ou demorar, o hero
   continua legível em vez de piscar branco. */
.hero__fundo{position:absolute;inset:0;z-index:0;background:#0B0908}
/* A foto é 20% mais alta que o hero e começa 10% acima: essa folga é o que o
   paralaxe consome ao deslocá-la, sem descobrir as bordas. Só 20% porque cada
   ponto a mais amplia o quanto a imagem é esticada — ela tem 768px de altura. */
.hero__img{
  position:absolute;left:0;top:-10%;width:100%;height:120%;
  object-fit:cover;object-position:calc(50% + 40px) 42%;
  will-change:transform;
}
/* No celular o rosto é cortado ao meio pela borda direita, de propósito.
   A âncora está no ARQUIVO, não numa porcentagem: `hero-mobile.jpg` é a foto
   cortada em x=836, o eixo do rosto (que vai de 760 a 915 no original). Com
   `object-position:100%` a borda direita do arquivo encosta na borda da tela,
   e o corte cai no mesmo lugar em QUALQUER proporção de viewport.

   Foi preciso assim porque a porcentagem não é estável: ela depende da razão
   entre a largura da tela e a altura do quadro, e a barra do Safari muda essa
   altura de aparelho para aparelho. Um valor calibrado no iPhone base errava
   nos Plus e Pro Max. */
@media (max-width:760px){
  .hero__img{object-position:100% 40%}
}
@media (prefers-reduced-motion:reduce){
  .hero__img{top:0;height:100%;transform:none!important}
}
.hero__fundo .reserva span{position:relative;z-index:2}
/* Véu: segura a leitura do texto quando a foto real entrar no lugar da reserva. */
.hero__fundo::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Calibrado para ESTA foto. O halo desce para 62% e o degradê alivia no
     terço superior: é ali que está o rosto. O escuro se concentra no meio e no
     rodapé, que é onde o texto de fato corre. */
  background:
    radial-gradient(130% 72% at 50% 62%,rgba(0,0,0,.54),rgba(0,0,0,.10) 72%),
    linear-gradient(180deg,rgba(0,0,0,.50),rgba(0,0,0,.24) 30%,rgba(0,0,0,.33) 55%,rgba(0,0,0,.78));
}
/* Sombra difusa em vez de mais véu: segura o texto sobre as manchas claras da
   foto — a alva, a fumaça — sem escurecer a imagem inteira de novo. Não se lê
   como sombra, só como contraste. */
.hero__texto{
  position:relative;z-index:2;display:grid;justify-items:center;
  text-shadow:0 1px 16px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.35);
}
.hero .marca{margin-bottom:clamp(2.2rem,5vw,3.8rem)}
/* 19.5ch: a montagem em caixa-alta pede 18,1ch para caber numa linha só, e a
   proporção não muda com a tela (corpo e ch escalam juntos). Assim a headline
   quebra sempre em VOCÊ APRENDEU A SERVIR / olhando o outro servir. */
.hero .display{font-size:clamp(2.4rem,5.4vw,4.85rem);max-width:19.5ch;text-wrap:balance}
.hero__linha{
  margin-top:clamp(1.6rem,2.8vw,2.3rem);max-width:42ch;
  font-family:var(--f-corpo);font-weight:300;
  font-size:clamp(1.05rem,1.45vw,1.26rem);line-height:1.64;color:var(--ink);
}
.hero__apoio{
  margin-top:clamp(1.1rem,1.9vw,1.6rem);max-width:44ch;
  /* Ouro Escola: no tema escuro o --acento já é a ponta clara do ouro, então
     a linha ganha cor sem perder leitura (8,6:1 sobre o preto). */
  font-size:clamp(.97rem,1.1vw,1.05rem);line-height:1.66;color:var(--acento);
}
.hero__cta{margin-top:clamp(2.2rem,3.6vw,3rem)}

/* ---- 11 · Reserva de imagem -------------------------------------------- */
/* Campo de espera das fotos. O rótulo diz o que entra e com que tratamento. */
.reserva{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:1.6rem;min-height:190px;background:var(--campo);
  border:1px solid var(--regra);
}
.reserva::after{
  content:"";position:absolute;inset:9px;border:1px solid var(--regra);opacity:.5;pointer-events:none;
}
.reserva span{
  position:relative;max-width:30ch;text-align:center;color:var(--acento-texto);
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.17em;line-height:1.85;
}
.reserva--video{aspect-ratio:9/16;min-height:0}
.reserva--larga{aspect-ratio:16/9;min-height:0}
/* Imagem de largura total dentro do envelope. O mockup já é 16:9, então entra
   inteiro — sem object-fit, porque não há nada a recortar. */
.foto-larga{width:100%;height:auto;display:block}

/* ---- 12 · Grades -------------------------------------------------------- */
.colunas{display:grid;gap:clamp(2rem,4vw,3.4rem)}
.colunas--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.colunas--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.colunas--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.colunas--3,.colunas--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.colunas--2,.colunas--3,.colunas--4{grid-template-columns:1fr}}

/* Passo / card: filete no topo, numeral, rótulo, corpo. */
.passo{position:relative;padding-top:1.6rem;border-top:1px solid var(--regra)}
.passo__num{
  display:block;font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1;color:var(--acento);
  margin-bottom:.75rem;font-variant-numeric:lining-nums;
}
.passo__icone{color:var(--acento);margin-bottom:1.15rem}
.passo .rotulo{margin-bottom:.95rem;display:block}
.passo .corpo{max-width:38ch}
/* Passo com imagem: a foto abre o card e o filete desce para baixo dela. As
   três reservas dividem a mesma proporção, então os filetes das colunas —
   e tudo que vem depois deles — continuam alinhados entre si. */
.passo--foto{padding-top:0;border-top:none}
.passo__foto{
  margin-bottom:clamp(1.4rem,2.6vw,2rem);
  padding-bottom:clamp(1.4rem,2.6vw,2rem);
  border-bottom:1px solid var(--regra);
}
/* 3:2 deitado — proporção fotográfica clássica. Vale em qualquer largura:
   empilhada no celular ela não estica a seção como o retrato esticava. */
.passo__foto .reserva,
.passo__img{aspect-ratio:var(--foto,3/2);min-height:0}
/* As fotos são 4:3 e a grade da 02 pede 3:2: o cover recorta ~11% no topo e
   no pé, em vez de deformar. Para usar a proporção nativa e não recortar,
   basta declarar --foto:4/3 na grade, como faz a 06. */
.passo__img{width:100%;height:auto;object-fit:cover;display:block}

/* ---- 13 · Blocos de destaque ------------------------------------------- */
.destaque{
  margin-top:clamp(2.8rem,5.4vw,4.4rem);padding:clamp(1.9rem,4vw,3.4rem);
  background:var(--campo);border:1px solid var(--regra);
}
.destaque .rotulo{display:block;margin-bottom:1.15rem}
.destaque .corpo+.corpo-g,.destaque .corpo-g+.corpo{margin-top:1.3rem}
.destaque--nu{background:none;border:none;border-top:1px solid var(--regra);padding-inline:0;padding-bottom:0}
.destaque--centro{text-align:center}
.destaque--centro .corpo,.destaque--centro .corpo-g,.destaque--centro .voz{margin-inline:auto}
/* Inset escuro dentro de seção clara — o contraste forte do briefing. */
.destaque--vinho{
  background:var(--vinho);border-color:var(--vinho);color:var(--marfim);
  --ink:var(--marfim);--ink-suave:#C0A9AC;--acento:var(--ouro);--acento-texto:var(--ouro);
  --regra:color-mix(in srgb,var(--ouro) 40%,transparent);
  padding:clamp(2.2rem,5vw,4.2rem);
}

/* ---- 13b · A ilustração do ciclo (02) ---------------------------------- */
/* Três nós, três arcos com seta e o centro vazio — o ciclo gira em volta de
   nada, que é justamente o "costume vazio". A teia de fundo é um polígono
   estrelado: muita linha, nenhum caminho novo. */
.ciclo{
  display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(1.8rem,4.5vw,3.4rem);align-items:center;
}
.ciclo__arte{margin:0;display:flex;justify-content:center}
.ciclo__svg{
  width:100%;height:auto;aspect-ratio:1;      /* mesma razão do Safari acima */
  max-width:clamp(200px,26vw,290px);color:var(--acento);
  --ciclo-fundo:var(--vinho);
}
.ciclo__teia{color:var(--acento)}
@media (max-width:820px){
  .ciclo{grid-template-columns:1fr;gap:clamp(2rem,5vw,2.8rem)}
  .ciclo__svg{max-width:250px}
}

/* ---- 14 · Lista de marcação (03) --------------------------------------- */
.marcas{display:grid;gap:0;border-top:1px solid var(--regra)}
.marcas li{
  display:flex;align-items:flex-start;gap:clamp(1rem,2vw,1.7rem);
  padding-block:clamp(1.15rem,2.2vw,1.6rem);border-bottom:1px solid var(--regra);
  font-size:clamp(1rem,1.25vw,1.13rem);line-height:1.6;color:var(--ink);
}
.marcas__caixa{
  flex:none;width:1.05em;height:1.05em;margin-top:.36em;border:1px solid var(--acento);position:relative;
}
.marcas__caixa::after{
  content:"";position:absolute;left:50%;top:52%;width:.6em;height:.32em;
  border-left:1.5px solid var(--acento);border-bottom:1.5px solid var(--acento);
  transform:translate(-50%,-50%)rotate(-45deg)scale(0);transform-origin:50% 50%;
  transition:transform .5s var(--curva) var(--atraso-marca,120ms);
}
.revelado .marcas__caixa::after{transform:translate(-50%,-50%)rotate(-45deg)scale(1)}

/* Subheadline em dois tempos: a primeira linha arma, a segunda remata em
   negrito. Vale para a linha de Santo Agostinho (06) e a da trilha (07). */
.duas-linhas{display:grid;gap:.32em}
.duas-linhas strong{font-weight:700;color:var(--ink)}

/* ---- 13c · Faixa de imagem e citação (04) ------------------------------ */
/* A faixa sangra até as bordas da tela: quebra a parede de texto da seção sem
   pedir mais uma coluna. Cinema deitado no desktop, mais alta no celular —
   3,5:1 em 375px daria uma tira de 107px, que não sustenta imagem nenhuma. */
.faixa{
  margin-block:clamp(3rem,5.6vw,4.8rem);
  margin-inline:calc(var(--sangria) * -1);
}
.reserva--faixa{aspect-ratio:21/6;min-height:0;border-inline:none}

/* O quadro recorta; a foto é mais alta que ele, e essa sobra é o curso do
   paralaxe. A centragem vai na propriedade `translate` e o paralaxe em
   `transform`: são propriedades separadas, então uma não apaga a outra. */
.faixa__quadro{position:relative;overflow:hidden;aspect-ratio:21/6}
.faixa__img{
  position:absolute;left:0;top:50%;width:100%;height:auto;
  /* min-height garante cobertura quando o quadro é mais alto que a proporção
     da foto — no celular o 16:9 é um fio mais alto que os 1,793 dela, e sem
     isso sobrava uma fresta. Com sobra, ela volta à altura natural e o
     paralaxe corre; sem sobra, o cover recorta na horizontal. */
  min-height:100%;object-fit:cover;
  translate:0 -50%;will-change:transform;
}
@media (max-width:760px){
  .reserva--faixa,.faixa__quadro{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .faixa__img{transform:none!important}
}

/* A citação entre dois filetes, centrada: o lugar onde a seção para para
   dizer uma coisa só. */
.citacao{
  margin:clamp(3rem,5.6vw,4.6rem) auto clamp(2.4rem,4.4vw,3.6rem);
  padding-block:clamp(2.2rem,4vw,3.4rem);
  border-block:1px solid var(--regra);
  max-width:68ch;text-align:center;
}
.citacao__texto{
  font-size:clamp(1.6rem,3.3vw,2.65rem);line-height:1.22;
  max-width:27ch;margin-inline:auto;
}

/* O fecho da 04 em dois níveis: o rótulo arma a frase e a segunda metade —
   a que carrega a tese da página — vem grande e em tinta cheia. O corte cai no
   dois-pontos, que é onde a própria frase se divide. */
.fecho-custo{
  display:grid;gap:clamp(.7rem,1.4vw,1.15rem);
  text-align:center;margin-top:clamp(2.4rem,4.4vw,3.6rem);
}
.fecho-custo__abre{
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:clamp(.75rem,.95vw,.85rem);letter-spacing:.2em;line-height:1.5;
  color:var(--acento-texto);
}
.fecho-custo__ponto{
  font-family:var(--f-rotulo);font-weight:300;text-transform:uppercase;
  font-size:clamp(1.2rem,2.5vw,2.15rem);letter-spacing:.085em;line-height:1.22;
  color:var(--ink);max-width:24ch;margin-inline:auto;text-wrap:balance;
}

/* ---- 14b · O veredito (03) --------------------------------------------- */
/* A copy pede "box destacado", mas caixa branca depois de uma lista de marcar
   é caixa em cima de caixa. Aqui o destaque não vem de fundo nem de moldura:
   vem de um filete lateral que marca o bloco e, sobretudo, do TAMANHO da
   antítese — ela cresce até quase a medida de um título. O eixo continua o da
   lista acima, então o veredito lê como conclusão dela. */
.veredito{margin-top:clamp(3rem,5.6vw,4.8rem)}
.veredito__tres{
  width:66px;height:20px;margin:0 0 clamp(1.2rem,2.2vw,1.7rem);
  color:var(--acento-texto);
}
.veredito .rotulo{display:block}
.veredito__nota{
  max-width:52ch;margin-top:clamp(1rem,1.8vw,1.5rem);color:var(--ink-suave);
}
.veredito__balanca{
  display:grid;gap:clamp(.25rem,.6vw,.5rem);
  margin-top:clamp(1.8rem,3.2vw,2.7rem);
}
/* A antítese em corpo de título: é ela que carrega o argumento da seção. */
.veredito__lado{
  font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(1.55rem,3.1vw,2.7rem);line-height:1.18;letter-spacing:-.016em;
  color:var(--ink-suave);text-wrap:balance;
}
.veredito__lado--forte{color:var(--vinho)}

/* A memória da 05: a passagem em primeira pessoa, marcada pelo mesmo filete. */
.memoria{margin-top:clamp(3rem,5.6vw,4.8rem)}
.memoria .voz{max-width:58ch}

/* A foto da 05 é 16:9 e o campo pede 4:3: o cover fecha o enquadramento em
   Michel e na fumaça, e o que sai são as pontas vazias da balaustrada. */
.foto-origem{
  width:100%;aspect-ratio:4/3;object-fit:cover;object-position:52% 42%;display:block;
}

/* ---- 15 · Linha do tempo (05) ------------------------------------------ */
.marcos{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.4rem,2.6vw,2.4rem);
  margin-top:clamp(3rem,5.6vw,4.8rem);
}
.marcos__item{padding-top:1.5rem;border-top:1px solid var(--regra);position:relative}
.marcos__item::before{
  content:"";position:absolute;top:-3.5px;left:0;width:6px;height:6px;
  border-radius:50%;background:var(--acento);
}
.marcos__item .rotulo{display:block;margin-bottom:.85rem;color:var(--acento-texto)}
@media (max-width:900px){.marcos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.marcos{grid-template-columns:1fr}}

/* ---- 16 · Trilha (07) --------------------------------------------------- */
.trilha{position:relative;margin-top:clamp(3rem,5.6vw,4.8rem);padding-left:clamp(0px,4vw,74px)}
.trilha__linha{
  position:absolute;left:0;top:.6rem;bottom:.6rem;width:1px;background:var(--regra);
}
.trilha__linha::after{
  content:"";position:absolute;inset:0 0 auto 0;height:var(--preenchido,0%);
  background:linear-gradient(180deg,var(--acento),color-mix(in srgb,var(--acento) 25%,transparent));
  transition:height .25s linear;
}
@media (max-width:760px){.trilha{padding-left:0}.trilha__linha{display:none}}

.eixo{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(1.2rem,3.4vw,3.2rem);align-items:baseline;
  padding-block:clamp(1.9rem,3.6vw,2.9rem);border-top:1px solid var(--regra);position:relative;
}
.eixo:last-child{border-bottom:1px solid var(--regra)}
.eixo::before{
  content:"";position:absolute;left:calc(clamp(0px,4vw,74px) * -1);top:-4px;
  width:7px;height:7px;border-radius:50%;background:var(--bg);
  border:1px solid var(--acento);transform:translateX(-3px);
}
.eixo[data-ativo]::before{background:var(--acento)}
@media (max-width:760px){.eixo::before{display:none}}
.eixo__cabeca{display:flex;align-items:baseline;gap:1rem}
.eixo__num{
  font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(1.6rem,2.5vw,2.2rem);line-height:1;color:var(--acento);flex:none;
  font-variant-numeric:lining-nums;
}
.eixo__modulos{
  margin-top:1rem;font-family:var(--f-corpo);font-style:italic;font-weight:300;
  font-size:.94em;line-height:1.62;color:var(--acento-texto);
}
@media (max-width:760px){.eixo{grid-template-columns:1fr;gap:1rem}}

/* O fecho da trilha, sem caixa: rótulo em ouro e texto centrado. A trilha
   acima já é uma estrutura forte — mais um card fecharia a seção com ruído. */
.soma-trilha{margin-top:clamp(2.8rem,5.4vw,4.4rem)}
.soma-trilha .rotulo{display:block;margin-bottom:1.1rem}
/* 62ch: o parágrafo pede 1240px numa linha só; em 56ch (615px) ele estourava
   por pouco e deixava "seguinte." órfão na terceira. text-wrap:pretty é a
   trava — em larguras intermediárias ele puxa palavra da linha de cima em vez
   de deixar uma sozinha no fim. */
.soma-trilha .corpo{max-width:62ch;margin-inline:auto}

/* ---- 17 · Selos (09) ---------------------------------------------------- */
.selos{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(3rem,5.6vw,4.6rem);
  padding-block:clamp(2.2rem,4vw,3.2rem);
  border-top:1px solid var(--regra);border-bottom:1px solid var(--regra);
}
.selo{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
/* Medalhão: o anel já vem dentro do símbolo, então o ícone cresce bastante.
   Os três rótulos têm comprimento parecido de propósito — é o que mantém a
   faixa equilibrada sem forçar altura igual por CSS. */
/* Altura explícita, não "auto": o Safari não deduz a altura de um SVG inline
   pelo viewBox como o Chrome faz, e o medalhão colapsava para zero. O selo é
   quadrado, então as duas medidas são a mesma. */
.selo svg{
  width:clamp(84px,9.2vw,116px);height:clamp(84px,9.2vw,116px);color:var(--acento);
  --selo-fundo:var(--bg);   /* limpa a teia atrás do pictograma */
}
.selo .rotulo{max-width:22ch}
@media (max-width:620px){.selos{grid-template-columns:1fr;gap:2.2rem}}

/* Embed do YouTube no quadro 9:16 dos Shorts. O iframe é absoluto para
   preencher o quadro sem depender da altura que o YouTube declara. */
.video{
  position:relative;aspect-ratio:9/16;width:100%;
  border:1px solid var(--regra);background:var(--campo);overflow:hidden;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.grade-video{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
@media (max-width:760px){.grade-video{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grade-video{grid-template-columns:1fr}}

/* Três colunas, com os mesmos pontos de quebra dos vídeos e das fotos de
   autoridade: a seção inteira anda no mesmo ritmo. O texto dos posts é parte
   da imagem, então a três colunas ele sai por volta de 12px — está anotado no
   README, com a saída de verdade (refazer os cards em HTML). */
/* Fotos de autoridade: o nome é legenda da figura, então segue sendo
   `<figcaption>` — só que sobreposta ao pé da imagem, e não abaixo dela. O
   `<figure>` é o bloco de posicionamento e a imagem é o único filho em fluxo,
   então a caixa da figura tem exatamente a altura da foto.
   O ouro do selo é o `--acento-texto` (#8A6530), a ponta escura do Degradê:
   branco sobre ele dá 5,3:1, contra 4,3:1 do Ouro Velho e 2,5:1 do Ouro Escola,
   que reprovariam num rótulo desse tamanho. Recuado do canto, não colado, como
   o selo verde dos bônus — assim lê como selo e não como faixa. */
.autoridade{position:relative;margin:0}
.autoridade img{width:100%;height:auto;display:block;border:1px solid var(--regra)}
.autoridade figcaption{
  position:absolute;
  left:clamp(.55rem,1.3vw,.85rem);bottom:clamp(.55rem,1.3vw,.85rem);
  max-width:calc(100% - 2 * clamp(.55rem,1.3vw,.85rem));
  background:var(--acento-texto);color:var(--branco);
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:.62rem;letter-spacing:.13em;line-height:1.35;padding:.62em 1.05em;
  text-wrap:balance;
}

.grade-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.6rem)}
.post{width:100%;height:auto;display:block;border:1px solid var(--regra)}
@media (max-width:760px){.grade-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.grade-posts{grid-template-columns:1fr}}
/* Os vídeos seguem em dois no celular. Numa coluna cada um passa de 590px de
   altura e os seis viram quatro telas de rolagem; em dois, a grade cai para
   874px e o rosto continua legível — que é o que faz um depoimento funcionar. */
@media (max-width:480px){
  .grade-video--pares{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---- 17b · As formações de bônus em lista (10) -------------------------- */
/* Uma embaixo da outra, cada uma com a sua foto à esquerda. Em grade de dois
   por dois as quatro competiam entre si; em lista elas se leem em sequência,
   que é como o aluno de fato escolhe a formação do próprio ministério. */
.bonus{display:grid;border-top:1px solid var(--regra)}
.bonus__item{
  display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  gap:clamp(1.4rem,3.4vw,3rem);align-items:center;
  padding-block:clamp(1.7rem,3.2vw,2.6rem);
  border-bottom:1px solid var(--regra);
}
.bonus__foto{position:relative}
.bonus__foto .reserva,
.bonus__img{aspect-ratio:16/9;min-height:0}
/* Selo sobre a foto, no mesmo par verde/preto dos botões de matrícula e do
   selo do box — 12,2:1, e a página inteira usa esse par para dizer "isto está
   incluso". Recuado do canto, não colado: assim lê como selo, não como faixa. */
.bonus__selo{
  position:absolute;top:clamp(.55rem,1.3vw,.85rem);left:clamp(.55rem,1.3vw,.85rem);
  background:var(--verde);color:var(--preto);
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:.62rem;letter-spacing:.15em;line-height:1;padding:.62em 1.05em;
}
/* As fotos são 1,792 e o quadro 1,778 — 0,8% de diferença, que o cover come
   sem que se perceba. */
.bonus__img{width:100%;height:auto;object-fit:cover;display:block}
.bonus__texto .passo__icone{color:var(--acento);margin-bottom:1rem}
/* Título em dois níveis: o rótulo em caixa-alta arma e o nome do ministério
   vem embaixo, em Newsreader itálico e ouro — a mesma dupla caixa-alta/itálico
   que as headlines da página usam, aqui em escala de card. */
.bonus__titulo{display:grid;gap:.25rem;margin-bottom:.95rem}
.bonus__nome{
  font-family:var(--f-titulo);font-style:italic;font-weight:300;
  font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.12;letter-spacing:-.014em;
  color:var(--acento);
}
.bonus__texto .corpo{max-width:46ch}
@media (max-width:760px){
  .bonus__item{grid-template-columns:1fr;gap:clamp(1.1rem,3vw,1.5rem)}
}

/* ---- 18 · Card do box de livros (10) ----------------------------------- */
.livro{
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(1.8rem,4.5vw,4rem);align-items:center;
  margin-top:clamp(2.8rem,5.4vw,4.4rem);padding:clamp(1.9rem,4vw,3.6rem);
  background:var(--vinho);color:var(--marfim);
  --ink:var(--marfim);--ink-suave:#C0A9AC;--acento:var(--ouro);--acento-texto:var(--ouro);--campo:#3C161E;
  --regra:color-mix(in srgb,var(--ouro) 40%,transparent);
}
.livro .reserva{min-height:280px}
/* O recorte do box vem achatado sobre o vinho do card, e não em PNG com alfa:
   são 70 KB contra 715 KB, sem bandear os gradientes da capa. O preço é o
   acoplamento — se o fundo do card mudar de cor, é preciso gerar de novo a
   partir do PNG em build/originais/. */
.livro__img{width:100%;height:auto;display:block}
.livro__selo{
  display:inline-block;margin-top:1.7rem;padding:.85em 1.5em;
  /* Selo preenchido em Verde Sistema — o manual reserva o verde a confirmação
     e matrícula, e é exatamente o que este selo diz. Tinta preta sobre o verde:
     12,2:1, a mesma combinação dos botões de matrícula da página. */
  background:var(--verde);border:1px solid var(--verde);color:var(--preto);
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:.7rem;letter-spacing:.16em;line-height:1.4;
}
@media (max-width:820px){.livro{grid-template-columns:1fr}}

/* ---- 19 · Oferta (11) --------------------------------------------------- */
.oferta{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(2rem,5vw,4.4rem);align-items:start;margin-top:clamp(2.4rem,4.4vw,3.6rem);
}
@media (max-width:900px){.oferta{grid-template-columns:1fr}}
.pilha{display:grid;gap:0;border-top:1px solid var(--regra)}
.pilha li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;
  padding-block:.92rem;border-bottom:1px solid var(--regra);
  font-size:clamp(.95rem,1.1vw,1.04rem);line-height:1.45;color:var(--ink-suave);
}
.pilha__nome{flex:1;min-width:0}
.pilha__fim{flex:none;display:inline-flex;align-items:baseline;gap:.42em;color:var(--ink-suave)}
.pilha__valor{color:var(--coral);text-decoration:line-through;text-decoration-thickness:1px}
.pilha__total{
  display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;
  margin-top:1.5rem;padding-top:1.2rem;border-top:1px solid var(--regra-forte);
}
.pilha__total .rotulo{color:var(--ink)}

.preco{padding:clamp(1.9rem,4vw,3.2rem);background:var(--campo);border:1px solid var(--regra)}
.preco__de{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.6em;
  font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:clamp(.7rem,.9vw,.79rem);letter-spacing:.17em;color:var(--ink-suave);
}
.preco__de s{color:var(--coral);text-decoration-thickness:1px}
.preco__valor{
  display:flex;align-items:baseline;gap:.32em;flex-wrap:wrap;margin-top:1.3rem;
  font-family:var(--f-rotulo);font-weight:600;color:var(--verde);
  font-size:clamp(2.9rem,6.4vw,4.5rem);line-height:1;letter-spacing:-.028em;
}
.preco__mes{
  /* Peso 400 porque o itálico da Merriweather só existe nesse corte: em 300 o
     navegador inclinaria a romana e sairia um falso itálico. */
  font-family:var(--f-corpo);font-weight:400;font-style:italic;
  font-size:clamp(1rem,1.3vw,1.15rem);letter-spacing:0;color:var(--ink);
}
.preco__plano{
  margin-top:.9rem;font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:.71rem;letter-spacing:.18em;color:var(--ink-suave);
}
.preco .voz{margin-top:1.8rem;padding-top:1.5rem;border-top:1px solid var(--regra)}
/* Seis bandeiras: proporção de cartão, não quadrada, para caber a palavra das
   que se identificam por nome. */
.pagamentos{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-top:1.8rem;color:var(--ink-suave)}
.pagamentos svg{width:40px;height:26px;flex:none}
.preco .botao{margin-top:2rem}

/* A oferta e as garantias são um bloco só — mesmo fundo, e a 12 já entra sem
   respiro no topo. O respiro cheio embaixo da 11 separava as duas como se
   fossem seções diferentes. */
.secao--colado{padding-bottom:clamp(1.1rem,2vw,1.7rem)}

/* ---- 20 · Garantia (12) ------------------------------------------------- */
.garantias{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.garantia{padding-top:1.5rem;border-top:1px solid var(--regra)}
.garantia svg{width:28px;height:28px;color:var(--acento);margin-bottom:1.1rem}
.garantia .rotulo{display:block;margin-bottom:.85rem}
@media (max-width:820px){.garantias{grid-template-columns:1fr}}

/* ---- 21 · Professor (13) ------------------------------------------------ */
.professor{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,4.4rem);align-items:start;
}
@media (max-width:820px){.professor{grid-template-columns:1fr}}
.professor .reserva{min-height:420px}
/* O retrato é 3:4 nativo — entra inteiro, sem recorte. */
.professor__img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
.credenciais{display:grid;gap:0;margin-top:clamp(2rem,3.6vw,2.8rem);border-top:1px solid var(--regra)}
.credenciais li{
  display:flex;align-items:center;gap:1.1rem;padding-block:.95rem;
  border-bottom:1px solid var(--regra);
}
.credenciais svg{width:21px;height:21px;color:var(--acento);flex:none}

/* ---- 22 · Perguntas (14) ------------------------------------------------ */
.perguntas{margin-top:clamp(2.4rem,4.4vw,3.6rem);border-top:1px solid var(--regra)}
.pergunta{border-bottom:1px solid var(--regra)}
.pergunta summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1.6rem;
  padding-block:clamp(1.3rem,2.4vw,1.8rem);cursor:pointer;list-style:none;
  font-family:var(--f-corpo);font-weight:400;
  font-size:clamp(1.02rem,1.3vw,1.16rem);line-height:1.5;color:var(--ink);
  transition:color .3s var(--curva);
}
.pergunta summary::-webkit-details-marker{display:none}
.pergunta summary:hover{color:var(--acento)}
.pergunta__mais{
  position:relative;flex:none;width:15px;height:15px;margin-top:.45em;color:var(--acento);
}
.pergunta__mais::before,.pergunta__mais::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transform:translate(-50%,-50%);transition:transform .4s var(--curva),opacity .4s var(--curva);
}
.pergunta__mais::before{width:15px;height:1px}
.pergunta__mais::after{width:1px;height:15px}
.pergunta[open] .pergunta__mais::after{transform:translate(-50%,-50%)rotate(90deg);opacity:0}
.pergunta__resposta{padding-bottom:clamp(1.4rem,2.6vw,2rem);max-width:56ch}

/* Atendimento em coluna única, centrado — o mesmo eixo do fechamento logo
   acima, que a página leva até o fim. Em duas colunas o botão sobrava meia
   coluna de vazio à direita, e encostá-lo na borda desequilibrava a linha. */
.atendimento{text-align:center}
.atendimento .corpo{max-width:50ch;margin:clamp(1rem,1.8vw,1.5rem) auto 0}
.atendimento__acao{margin-top:clamp(1.8rem,3.2vw,2.6rem)}

/* ---- 23 · Fechamento (15) e rodapé (16) -------------------------------- */
.fecho{text-align:center}
.fecho .corpo-g{margin-inline:auto;max-width:52ch}
.fecho__marca{margin-top:clamp(2.6rem,4.6vw,3.8rem)}
.fecho__marca img{width:64px;margin-inline:auto}
.assinatura{
  margin-top:1.5rem;font-family:var(--f-rotulo);font-weight:600;text-transform:uppercase;
  font-size:.73rem;letter-spacing:.2em;color:var(--acento);
}
.rodape{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem;
  margin-top:clamp(3rem,5.4vw,4.4rem);padding-top:1.8rem;border-top:1px solid var(--regra);
  font-family:var(--f-rotulo);font-weight:400;font-size:.75rem;letter-spacing:.1em;
  color:var(--ink-suave);
}
.rodape img{width:34px;opacity:.8}

/* ---- 24 · Revelação na rolagem ----------------------------------------- */
.js .revela{opacity:0;transform:translateY(22px);
  transition:opacity .95s var(--curva) var(--atraso,0ms),transform .95s var(--curva) var(--atraso,0ms)}
.js .revela.revelado{opacity:1;transform:none}

/* ---- 25 · Preferências e impressão ------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .revela{opacity:1;transform:none}
  .marcas__caixa::after{transform:translate(-50%,-50%)rotate(-45deg)scale(1)}
  .barra{transition:none}
}
@media print{
  .barra,.aguada,.reserva::after{display:none}
  .secao{padding-block:2rem;background:#fff!important;color:#000!important;--ink:#000;--ink-suave:#333}
  .js .revela{opacity:1;transform:none}
}