/* Página de vendas do CLB 2027.
   O visual vem do protótipo aprovado; onde ele e o pedido discordam, vale o pedido.
   Este arquivo é o estado final, parado: os efeitos da etapa 3 entram no fim,
   como enfeite, e sem eles a página já está inteira. */

/* As fontes do Google (Cormorant Garamond, Merriweather e Noto Sans) ficam em fontes.css, que entra logo depois
   da primeira pintura da tela: a primeira tela não espera os arquivos delas, que vêm de outro servidor
   (fonts.gstatic.com). Até elas chegarem, valem as letras de reserva logo abaixo. */

/* Letras de reserva do mesmo tamanho das do Google: enquanto as fontes não chegam, o texto aparece
   numa letra do próprio aparelho, ajustada para ocupar o mesmo espaço. Assim, quando a fonte do
   Google chega, as linhas não mudam e nada pula na tela. Medido com os textos da primeira tela.
   Georgia e Arial: computador e iPhone. Noto Serif e Roboto: Android (lá não há Georgia nem Arial). */
@font-face{font-family:'Merriweather reserva';font-weight:300 400;src:local('Georgia');size-adjust:106.09%;ascent-override:92.75%;descent-override:25.73%;line-gap-override:0%}
@font-face{font-family:'Merriweather reserva';font-weight:700;src:local('Georgia Bold'),local('Georgia-Bold');size-adjust:94.33%;ascent-override:102.84%;descent-override:28.53%;line-gap-override:0%}
@font-face{font-family:'Merriweather reserva';font-style:italic;font-weight:300 400;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:99.78%;ascent-override:98.62%;descent-override:27.36%;line-gap-override:0%}
@font-face{font-family:'Merriweather reserva android';font-weight:300 400;src:local('Noto Serif'),local('NotoSerif-Regular');size-adjust:97.82%;ascent-override:100.59%;descent-override:27.91%;line-gap-override:0%}
@font-face{font-family:'Merriweather reserva android';font-weight:700;src:local('Noto Serif Bold'),local('NotoSerif-Bold');size-adjust:99.71%;ascent-override:98.69%;descent-override:27.38%;line-gap-override:0%}
@font-face{font-family:'Merriweather reserva android';font-style:italic;font-weight:300 400;src:local('Noto Serif Italic'),local('NotoSerif-Italic');size-adjust:96.25%;ascent-override:102.24%;descent-override:28.36%;line-gap-override:0%}
@font-face{font-family:'Cormorant reserva';font-weight:500 600;src:local('Georgia');size-adjust:84.49%;ascent-override:109.36%;descent-override:33.97%;line-gap-override:0%}
@font-face{font-family:'Cormorant reserva';font-style:italic;font-weight:500 600;src:local('Georgia Italic'),local('Georgia-Italic');size-adjust:79.68%;ascent-override:115.97%;descent-override:36.02%;line-gap-override:0%}
@font-face{font-family:'Cormorant reserva android';font-weight:500 600;src:local('Noto Serif'),local('NotoSerif-Regular');size-adjust:83.53%;ascent-override:110.62%;descent-override:34.36%;line-gap-override:0%}
@font-face{font-family:'Cormorant reserva android';font-style:italic;font-weight:500 600;src:local('Noto Serif Italic'),local('NotoSerif-Italic');size-adjust:76.88%;ascent-override:120.18%;descent-override:37.33%;line-gap-override:0%}
@font-face{font-family:'Noto Sans reserva';font-weight:400 500;src:local('Arial'),local('ArialMT');size-adjust:104.09%;ascent-override:102.70%;descent-override:28.15%;line-gap-override:0%}
@font-face{font-family:'Noto Sans reserva';font-weight:600 700;src:local('Arial Bold'),local('Arial-BoldMT');size-adjust:98.46%;ascent-override:108.57%;descent-override:29.76%;line-gap-override:0%}
@font-face{font-family:'Noto Sans reserva android';font-weight:400;src:local('Roboto'),local('Roboto-Regular');size-adjust:105.10%;ascent-override:101.71%;descent-override:27.88%;line-gap-override:0%}
@font-face{font-family:'Noto Sans reserva android';font-weight:500 700;src:local('Roboto Medium'),local('Roboto-Medium');size-adjust:106.61%;ascent-override:100.27%;descent-override:27.48%;line-gap-override:0%}

:root{
  --noite:#123039;            /* o mesmo tom escuro da lista de espera */
  --petroleo:#2f5967;
  --mar:#2f8087;
  --turquesa:#28afaf;         /* só em detalhes, nunca em texto pequeno */
  --papel:#f6f2e9;
  --papel-2:#efe7d6;          /* fundo do capítulo V */
  --cartao:#fffdf7;
  --tinta:#1b3d48;            /* texto no fundo claro */
  --tinta-suave:#4a6670;
  --ouro:#c9a24a;
  --ouro-claro:#e7cf8e;       /* texto e detalhes no escuro; no papel some */
  --ouro-escuro:#8a6a1f;      /* texto dourado no papel (4,5) */
  --ouro-mais-escuro:#7d5f1a; /* rótulo dourado no papel do capítulo V (4,8) */
  --ouro-grad:linear-gradient(175deg,#f6e7b4 0%,#dcbc6c 30%,#b8913a 50%,#e9d18f 70%,#c9a24a 100%);
  /* no papel o degradê começa mais escuro que o do pedido: o #b8903a dava 2,6 de contraste */
  --ouro-grad-papel:linear-gradient(175deg,#9c7726 0%,#8a6a1f 35%,#9a7528 55%,#7d5f1a 100%);
  --serif:'Merriweather','Merriweather reserva','Merriweather reserva android',Georgia,serif;
  --display:'Cormorant Garamond','Cormorant reserva','Cormorant reserva android',Georgia,serif;
  --sans:'Noto Sans','Noto Sans reserva','Noto Sans reserva android',system-ui,-apple-system,'Segoe UI',sans-serif;
  --margem:max(24px,env(safe-area-inset-left),env(safe-area-inset-right));
}

*{box-sizing:border-box}
/* o fundo escuro aparece só quando o iPhone puxa a página além do topo ou do rodapé */
html{background:var(--noite);-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* números retos em toda a página: na Cormorant, os números de estilo antigo deixavam o 1 parecido com um I
   e faziam o 5, o 3 e o 9 descerem abaixo da linha (e serem cortados nos números dourados) */
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);font-variant-numeric:lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
p{margin:0}
::selection{background:rgba(201,162,74,.35)}
:focus-visible{outline:2px solid var(--ouro-claro);outline-offset:3px;border-radius:4px}
.claro :focus-visible{outline-color:var(--tinta)}

.pagina{background:var(--papel);overflow-x:clip;font-size:17px;line-height:1.6}
.coluna{width:100%;max-width:calc(640px + 2 * var(--margem));margin:0 auto;padding:0 var(--margem)}
.coluna.larga{max-width:calc(900px + 2 * var(--margem))}

/* a página é longa: cada parte abaixo do topo só é desenhada quando chega perto da tela.
   O texto continua inteiro no HTML (para o robô da Meta e para o leitor de tela);
   o "auto" guarda a altura de verdade depois da primeira vez. */
.trilho > section,.oferta,.perguntas,.rodape{content-visibility:auto;contain-intrinsic-size:auto 2000px}

/* sem palavra sozinha na última linha */
h1,h2,.ab-titulo,.titulo-secao,.selo-linha,.rodape-marca{text-wrap:balance}
p,li,summary{text-wrap:pretty}

/* ---------- texturas e fundos ---------- */
.grao{position:relative;isolation:isolate}
.grao::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-repeat:repeat;background-size:160px 160px}
/* no fundo escuro, o grão claro; no fundo claro, o grão escuro (os "-2" são os de antes, mais suaves: 70% e 50%) */
.escuro.grao::before{background-image:url(../imagens/grao-claro-2.webp)}
.claro.grao::before{background-image:url(../imagens/grao-escuro-2.webp)}
/* em tela de celular bem nítida (2 ou 3 pontos por pixel), o mesmo grão em metade do tamanho:
   cada pontinho fica do tamanho de um ponto da tela, fino como o de papel, e não quadriculado */
@media (min-resolution:2dppx),(-webkit-min-device-pixel-ratio:2){
  .grao::before,.sol-caixa::before{background-size:80px 80px}
  .amanhecer::before{background-size:384px 384px,80px 80px}
}
.pauta::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 43px,rgba(27,61,72,.07) 43px,rgba(27,61,72,.07) 44px)}
/* textura de página: manchas leves de papel e fibras finas, nos fundos claros e nas folhas desenhadas */
:root{--papel-textura:url(../imagens/papel.webp) 0 0/384px 384px}

.escuro{background:var(--noite);color:#fff;--t:#ffffff}
.claro{background:var(--papel-textura),var(--papel);color:var(--tinta);--t:var(--tinta)}
.claro.atraso{background:var(--papel-textura),var(--papel-2)}

/* ---------- filete ---------- */
.filete{display:flex;align-items:center;gap:10px;max-width:220px;margin:0 0 24px}
.filete span{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,74,.85))}
.filete span:last-child{background:linear-gradient(90deg,rgba(201,162,74,.85),transparent)}
.filete i{display:block;width:7px;height:7px;transform:rotate(45deg);border:1px solid var(--ouro);flex:none}
.filete.centro{margin-left:auto;margin-right:auto}

/* ---------- palavra dourada, marca-texto, capitular ---------- */
.ouro-destaque{font-family:var(--display);font-style:italic;font-weight:600;font-size:1.16em;line-height:1;color:var(--ouro-claro);padding:0 .06em}
.claro .ouro-destaque{color:var(--ouro-escuro)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ouro-destaque{background-image:var(--ouro-grad);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .claro .ouro-destaque{background-image:var(--ouro-grad-papel);color:transparent}
}
mark.marca{color:inherit;background-color:transparent;background-image:linear-gradient(transparent 56%,rgba(201,162,74,.42) 56%,rgba(201,162,74,.42) 94%,transparent 94%);background-repeat:no-repeat;background-size:100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em;margin:0 -.04em}
.dispersa span{display:inline-block}
/* "para depois." não se separa: palavra sozinha na última linha não */
.dispersa .junto{display:inline;white-space:nowrap}
/* marca-texto que não se parte entre duas linhas: só na tela larga; no celular, prender a frase
   deixaria a linha de cima curta demais (lá basta não sobrar uma palavra sozinha) */
@media (min-width:600px){.sem-quebra{white-space:nowrap}}
/* palavra dourada longa: inteira numa linha a partir de 360 px (no de 320 ela não caberia) */
@media (min-width:360px){.inteira{white-space:nowrap}}
.capitular::first-letter{font-family:var(--display);font-weight:600;font-style:normal;float:left;font-size:4.6em;line-height:.74;margin:.08em .1em 0 -.02em;color:var(--ouro-escuro);-webkit-text-fill-color:var(--ouro-escuro)}

/* ---------- abertura de capítulo ---------- */
.abertura{position:relative;text-align:center;padding:24px 0 6px;margin:0 0 132px}
/* a luz de vela atrás da abertura */
.abertura::before{content:'';position:absolute;left:50%;top:-10px;width:min(400px,100%);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(231,207,142,.17),rgba(231,207,142,0));z-index:-1;pointer-events:none}
.claro .abertura::before{background:radial-gradient(closest-side,rgba(201,162,74,.13),rgba(201,162,74,0))}
/* partes 3, 4 e 5: o número grande dourado (1, 2 e 3) antes da frase grande, no estilo dos números
   da lista das três coisas; é ele que liga a lista às três partes */
.parte-num{display:block;width:clamp(75px,20.3vw,100px);height:auto;margin:0 auto 16px;overflow:visible}
.parte-num text{font-family:var(--display);font-weight:600;font-size:128px;text-anchor:middle;stroke:var(--ouro-escuro);stroke-width:1.2px;stroke-linejoin:round;paint-order:stroke}
/* a frase grande que abre cada parte (até 11 palavras): quem lê só elas entende a página */
.ab-titulo{margin:0 auto 26px;max-width:13em;font-family:var(--serif);font-weight:700;font-size:clamp(30px,7.8vw,50px);line-height:1.16;letter-spacing:-.012em;color:var(--t)}
/* nas frases grandes, no título do topo e nos destaques, a palavra dourada fica com as minúsculas da mesma altura
   das do resto da frase (a Cormorant itálica tem as minúsculas bem mais baixas que a Merriweather: 40% contra 56%);
   a altura da linha dela diminui na mesma conta, para a linha da palavra dourada não ficar mais alta */
.ab-titulo .ouro-destaque{font-size:1.34em;line-height:.87;padding:0 .04em .08em}
h1 .ouro-destaque{font-size:1.34em;line-height:.85}
.fala.destaque > .ouro-destaque{font-size:1.34em;line-height:.98}
.abertura .filete{max-width:200px;margin-bottom:0}

/* ---------- fita de progresso ---------- */
/* uma linha dourada fina no alto da tela, que enche conforme a pessoa desce (como a da lista de espera);
   só aparece com os efeitos de rolagem: sem eles, não há nada no lugar */
.progresso{display:none;position:fixed;top:0;left:0;right:0;height:3px;z-index:45;pointer-events:none;background:linear-gradient(90deg,#e7cf8e,#c9a24a);box-shadow:0 0 12px rgba(216,184,119,.55);transform-origin:left center;transform:scaleX(0)}

/* ---------- A · topo ---------- */
/* clip, e não hidden: hidden faria do topo uma área de rolagem própria e o botão
   nunca "sairia da tela" para a barra fixa saber a hora de entrar.
   Desenho de capa de revista: no celular e no tablet a foto vem primeiro, de ponta a ponta, e o texto sobe por cima
   do pé dela; no computador (1024 px ou mais) a foto ocupa o lado direito inteiro (no fim deste trecho).
   Fundo com profundidade: uma luz quente perto do botão, o petróleo mais claro no meio e as bordas de cima mais escuras
   (::after). O pé do topo termina no petróleo de sempre, sem emenda com a parte 1 */
.topo{padding:0 0 44px;position:relative;overflow:hidden;overflow:clip;background:radial-gradient(70% 30% at 50% 72%,rgba(231,207,142,.12),rgba(231,207,142,0) 70%),radial-gradient(95% 45% at 50% 70%,rgba(47,128,135,.36),rgba(47,128,135,0) 72%),linear-gradient(180deg,#0e2730 0%,#123039 42%)}
.topo::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(130% 100% at 50% 100%,rgba(3,12,16,0) 62%,rgba(3,12,16,.5) 100%)}
.canto{position:absolute;width:40px;height:40px;border:0 solid rgba(231,207,142,.5)}
.canto-a{top:18px;left:18px;border-top-width:1px;border-left-width:1px;display:none}
.canto-b{bottom:18px;right:18px;border-bottom-width:1px;border-right-width:1px}
.topo-grade{max-width:calc(1100px + 2 * var(--margem));margin:0 auto;padding:0 var(--margem);display:flex;flex-direction:column}
.topo-texto{position:relative;z-index:1;min-width:0}
/* as letras do topo têm sombra em duas camadas (uma curta, de contato, e uma larga, difusa): destacam do fundo e da foto */
.selo-linha{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ouro-claro);margin:0 0 22px;font-weight:600;text-shadow:0 1px 10px rgba(3,14,18,.7)}
.quebra-celular{display:none}
h1{font-family:var(--serif);font-weight:700;font-size:clamp(33px,7.6vw,56px);line-height:1.14;margin:0 0 22px;letter-spacing:-.01em;text-shadow:0 2px 2px rgba(3,14,18,.6),0 12px 34px rgba(3,14,18,.75)}
/* a palavra dourada fica sem a sombra do título: o dourado é um fundo recortado na letra, e a sombra apareceria por
   dentro dela, escurecendo o ouro. Sombra por filtro também não: no iPhone, filtro junto com o recorte pode apagar a palavra */
h1 .ouro-destaque{text-shadow:none}
.sub{font-size:18px;line-height:1.65;color:rgba(255,255,255,.93);margin:0 0 61px;max-width:32em;text-shadow:0 1px 2px rgba(3,14,18,.45),0 2px 18px rgba(3,14,18,.7)}
.parcela{font-family:var(--serif);font-size:38px;font-weight:700;line-height:1.1}
.parcela .pequeno{font-family:var(--sans);font-size:16px;font-weight:500;opacity:.8;margin-right:2px}
.avista{margin:6px 0 0;opacity:.78;font-size:16px}
/* a foto do topo: no celular e no tablet, de ponta a ponta, e o texto sobe 128 px por cima do pé dela.
   Ela some por máscara (fica transparente), e não por uma camada de cor por cima: o fundo de verdade, com a textura,
   aparece por baixo e não fica emenda. A máscara conta a partir do pé da foto, para o rosto ficar inteiro no tablet */
.topo-foto{position:relative;order:-1;margin:0 calc(-1 * var(--margem)) -128px}
.topo-foto picture{display:block}
.topo-imagem{display:block;width:100%;height:auto;aspect-ratio:4/4.6;max-height:640px;max-height:min(70svh,640px);object-fit:cover;object-position:50% 8%;background:var(--petroleo);-webkit-mask:linear-gradient(to top,transparent 60px,rgba(0,0,0,.1) 150px,rgba(0,0,0,.42) 220px,#000 300px);mask:linear-gradient(to top,transparent 60px,rgba(0,0,0,.1) 150px,rgba(0,0,0,.42) 220px,#000 300px)}
.topo-foto .selo{top:24px;right:24px;z-index:2;box-shadow:0 0 0 1px rgba(231,207,142,.25),0 14px 34px rgba(0,0,0,.45)}
.arco{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:50% 50% 22px 22px / 40% 40% 22px 22px;background:var(--petroleo)}
.arco-moldura{position:absolute;inset:-12px;border:1px solid rgba(231,207,142,.55);border-radius:50% 50% 30px 30px / 40% 40% 30px 30px;pointer-events:none}
/* "Veja como funciona" é um link que desce até a parte 1 */
.deslize{display:flex;flex-direction:column;align-items:center;gap:10px;margin:64px auto 0;color:rgba(255,255,255,.78);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;text-shadow:0 1px 8px rgba(3,14,18,.7)}
.deslize:hover{color:#fff}
.deslize-linha{position:relative;display:block;width:1px;height:46px;background:linear-gradient(to bottom,var(--ouro-claro),rgba(231,207,142,.15))}
/* o ponto de luz que desce pela linha (só aparece com o efeito) e a seta para baixo */
.deslize-linha::after{content:'';position:absolute;left:50%;top:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#f3dda0;box-shadow:0 0 8px 1px rgba(243,221,160,.85);opacity:0}
.deslize-seta{display:block;width:22px;height:22px;margin-top:-6px;fill:none;stroke:var(--ouro-claro);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 6px rgba(3,14,18,.6))}

/* computador: a foto ocupa o lado direito inteiro, sem moldura, e some para a esquerda e para baixo, como abertura de
   filme. Ela começa 500 px depois do começo do texto (o texto passa só por cima do começo do sumiço) e vai até a borda
   da tela, com no máximo 780 px de largura. O topo tem a altura da tela, entre 660 e 860 px */
@media (min-width:1024px){
  .topo{padding:0;min-height:660px;min-height:clamp(660px,100svh - 80px,860px);display:flex;flex-direction:column;justify-content:center;background:radial-gradient(40% 55% at 58% 40%,rgba(231,207,142,.1),rgba(231,207,142,0) 70%),radial-gradient(60% 75% at 26% 50%,rgba(47,128,135,.3),rgba(47,128,135,0) 72%),linear-gradient(180deg,#0e2730 0%,#123039 48%)}
  .canto-a{display:block}
  .canto-b{display:none}
  .topo-grade{width:100%;flex-direction:row;align-items:center;padding-top:88px;padding-bottom:16px}
  .topo-texto{flex:0 1 560px}
  .topo-foto{position:absolute;top:0;right:0;bottom:0;z-index:0;margin:0;width:min(780px,100% - 500px - var(--margem) - max(0px,50% - 550px - var(--margem)))}
  .topo-foto picture{height:100%}
  .topo-imagem{height:100%;max-height:none;aspect-ratio:auto;object-position:40% 18%;-webkit-mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 20%,#000 46%),linear-gradient(0deg,transparent 0,#000 28%);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 20%,#000 46%),linear-gradient(0deg,transparent 0,#000 28%);mask-composite:intersect}
  .topo-foto .selo{top:44px;right:44px}
  /* "Veja como funciona" fica embaixo do texto, e não no meio da tela (no meio, cairia no começo da foto) */
  .deslize{align-self:flex-start;width:560px;margin:30px 0 0 calc(var(--margem) + max(0px,50% - 550px - var(--margem)));padding-bottom:32px}
}

/* ---------- botões ---------- */
/* dourado de metal: brilho na borda de cima, sombra por baixo e uma luz dourada em volta */
.botao{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 34px;border-radius:999px;background:linear-gradient(180deg,#f4dd9c 0%,#dfba63 40%,#c39538 100%);color:var(--noite);font-weight:600;font-size:17px;line-height:1.2;text-align:center;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(110,78,18,.28),0 0 0 1px rgba(255,236,190,.3),0 14px 34px rgba(201,162,74,.36),0 2px 6px rgba(3,14,18,.4)}
.botao:hover{color:var(--noite)}
.brilho::after{content:'';position:absolute;top:0;left:0;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:translateX(-160%) skewX(-20deg);pointer-events:none}
.botao-contorno{background:transparent;border:1.5px solid var(--noite);color:var(--noite);box-shadow:none}
.botao-contorno:hover{background:var(--noite);color:#fff}

/* ---------- selo ---------- */
.selo{position:absolute;width:112px;height:112px;border-radius:50%;background:var(--noite);box-shadow:0 10px 30px rgba(0,0,0,.25)}
.selo-anel{display:block;width:100%;height:100%}
.selo-borda{fill:none;stroke:rgba(231,207,142,.6);stroke-width:1}
.selo-circ{font-family:var(--sans);font-size:8.6px;letter-spacing:2.1px;font-weight:600;fill:#e7cf8e}
.selo-centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:34px;line-height:.9;color:var(--ouro-claro)}
.selo-centro small{font-family:var(--sans);font-size:8.5px;letter-spacing:.22em;text-transform:uppercase;margin-top:5px;font-weight:600}

/* ---------- B · narrativa ---------- */
.ato{padding:110px 0 120px}
.bloco{margin:0 0 128px}
.bloco:last-child{margin-bottom:0}
.fala{font-family:var(--serif);font-weight:300;font-size:clamp(24px,5.6vw,34px);line-height:1.5;color:var(--t)}
.fala strong{font-weight:700}
.fala.destaque{font-weight:700;font-size:clamp(27px,6.6vw,42px);line-height:1.32}
.bloco.centro{text-align:center}
.bloco.sussurro{padding-left:30px;position:relative}
.bloco.sussurro::before{content:'';position:absolute;left:4px;top:.75em;width:8px;height:8px;transform:rotate(45deg);border:1px solid var(--ouro)}
.bloco.sussurro .fala{font-style:italic;font-size:clamp(21px,5vw,28px)}

/* capítulo I: céu, meses, motivos e estante */
.ceu{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ceu span{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff3cf;opacity:.5}
.ceu span.g{width:3px;height:3px;opacity:.7;box-shadow:0 0 7px rgba(255,236,190,.85)}
.meses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:0 0 128px}
.meses span{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.06em;text-align:center;padding:8px 0 10px;border-bottom:1px solid rgba(255,255,255,.2);color:#fff}
.meses span:nth-child(1),.meses span:nth-child(2){color:var(--ouro-claro);border-bottom:2px solid var(--ouro)}
.meses span:nth-child(3){opacity:.7}
.meses span:nth-child(4){opacity:.45}
.meses span:nth-child(n+5){opacity:.2}
.motivos-lista{list-style:none;margin:34px 0 0;padding:0}
.bloco > .motivos-lista:first-child{margin-top:0}
.motivos-lista li{display:flex;align-items:center;gap:18px;padding:20px 0;border-top:1px solid rgba(231,207,142,.28)}
.motivos-lista li:last-child{border-bottom:1px solid rgba(231,207,142,.28)}
.motivo-num{font-family:var(--display);font-weight:600;font-size:80px;line-height:.8;color:var(--ouro-claro);flex:none;width:46px;text-align:center}
.motivo-txt{font-family:var(--serif);font-weight:700;font-size:clamp(22px,5.4vw,30px);line-height:1.35;color:#fff}
/* no papel (capítulo II): texto escuro, número em ouro escuro e filetes dourados mais fortes */
.claro .motivos-lista li{border-color:rgba(184,145,58,.4)}
.claro .motivo-num{color:var(--ouro-escuro)}
.claro .motivo-txt{color:var(--tinta)}
.estante{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;height:150px;margin:64px auto 40px;max-width:340px;border-bottom:2px solid rgba(231,207,142,.6)}
.livro{display:block;width:22px;border-radius:3px 3px 1px 1px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);position:relative;flex:none}
.livro::before{content:'';position:absolute;left:3px;right:3px;top:12px;height:1px;background:rgba(255,255,255,.2);box-shadow:0 5px 0 rgba(255,255,255,.2)}
.l1{height:96px;width:20px}
.l2{height:118px;width:26px}
.l3{height:84px;width:18px;background:rgba(255,255,255,.05)}
.l4{height:108px;width:24px}
/* o último livro fica a 14 px do vizinho e tomba pelo canto de baixo à esquerda: inclinado 8,75 graus,
   o canto de cima encosta no livro ao lado, sem atravessar (92 x seno de 8,75 = 14) */
.l5{height:92px;width:28px;margin-left:8px;transform:rotate(-8.75deg);transform-origin:bottom left}
.biblia{height:128px;width:36px;background:var(--petroleo);border-color:rgba(231,207,142,.55)}
.biblia::before{background:var(--ouro);box-shadow:0 5px 0 var(--ouro);opacity:.85}
.biblia::after{content:'';position:absolute;left:50%;top:44px;width:10px;height:15px;margin-left:-5px;background:linear-gradient(var(--ouro),var(--ouro)) center/2px 100% no-repeat,linear-gradient(var(--ouro),var(--ouro)) center 35%/100% 2px no-repeat;opacity:.9}
.fitinha{position:absolute;left:13px;bottom:-36px;width:7px;height:36px;background:var(--ouro);clip-path:polygon(0 0,100% 0,100% 100%,50% 80%,0 100%)}

/* faixa do amanhecer: o céu da noite clareia até o dourado do horizonte; o sol nasce atrás da linha
   e se reflete na água clara, que vira o papel do capítulo II */
.amanhecer{position:relative;height:380px;overflow:hidden;background:linear-gradient(to bottom,var(--noite) 0%,#163a44 16%,#22505a 29%,#47706f 40%,#9c9168 48.5%,#d9bb80 53%,#f0dfb9 54%,#f3e9d6 70%,var(--papel) 100%)}
.sol-caixa{position:absolute;left:0;right:0;top:0;height:54%;overflow:hidden}
/* o grão do céu continua o do capítulo I e o papel da água continua o do capítulo II: sem emenda à vista */
.sol-caixa::before{content:'';position:absolute;inset:0;background:url(../imagens/grao-claro-2.webp) 0 0/160px 160px;-webkit-mask:linear-gradient(#000 25%,transparent 90%);mask:linear-gradient(#000 25%,transparent 90%)}
.amanhecer::before{content:'';position:absolute;left:0;right:0;top:54%;bottom:0;background:var(--papel-textura),url(../imagens/grao-escuro-2.webp) 0 0/160px 160px;-webkit-mask:linear-gradient(transparent,#000);mask:linear-gradient(transparent,#000);pointer-events:none}
/* o sol: um disco de borda limpa (::after), com brilho em volta, sobre raios bem fracos (::before) */
.sol{position:absolute;left:50%;bottom:-58px;width:116px;height:116px;margin-left:-58px}
.sol::before{content:'';position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;background:repeating-conic-gradient(rgba(255,238,196,.22) 0deg 2.5deg,rgba(255,238,196,0) 2.5deg 11.25deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 58%);mask:radial-gradient(circle,#000 10%,transparent 58%)}
.sol::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fffaf0 0%,#fdf0cc 36%,#f6d995 68%,#ecc06c 100%);box-shadow:0 0 0 1px rgba(255,244,214,.45),0 0 36px 10px rgba(252,226,160,.55),0 0 120px 56px rgba(240,198,120,.26)}
/* o reflexo do sol na água: listras douradas que somem para baixo */
.amanhecer::after{content:'';position:absolute;left:50%;top:54%;width:150px;height:32%;margin-left:-75px;background:linear-gradient(to bottom,rgba(240,196,110,.7),rgba(240,196,110,0));-webkit-mask:repeating-linear-gradient(to bottom,#000 0 3px,transparent 3px 8px);mask:repeating-linear-gradient(to bottom,#000 0 3px,transparent 3px 8px);pointer-events:none}
.horizonte{position:absolute;left:0;right:0;top:54%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,240,200,.95),transparent)}
.poeira{position:absolute;inset:0;pointer-events:none}
.poeira span{position:absolute;bottom:20px;width:3px;height:3px;border-radius:50%;background:rgba(250,236,190,.95);box-shadow:0 0 6px rgba(250,236,190,.8);opacity:0}

/* capítulo II: marco de 2022 e a Bíblia */
.marco{position:relative;padding:70px 0}
.marca-dagua{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--display);font-weight:600;font-size:clamp(140px,40vw,240px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(184,145,58,.42);z-index:0;white-space:nowrap;pointer-events:none}
.marco .fala{position:relative;z-index:1}
.livro-area{margin:0 0 176px;padding-bottom:50px;perspective:1600px}
.livro-3d{position:relative;max-width:310px;margin:0 auto;transform-style:preserve-3d}
.fitas{position:absolute;left:34px;bottom:-50px;display:flex;gap:7px;z-index:0}
.fitas span{display:block;width:10px;clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%)}
.fitas .f1{background:var(--petroleo);height:62px}
.fitas .f2{background:var(--mar);height:50px}
.fitas .f3{background:var(--turquesa);height:56px}
.fitas .f4{background:var(--ouro);height:66px}
.pagina-biblia{position:relative;z-index:1;background:var(--papel-textura),var(--cartao);border-radius:4px 16px 16px 4px;padding:30px 26px;box-shadow:inset 18px 0 22px -18px rgba(27,61,72,.24),0 1px 2px rgba(27,61,72,.06),0 18px 40px rgba(27,61,72,.1)}
.pagina-biblia::before{content:'';position:absolute;inset:10px;border:1px solid rgba(184,145,58,.38);border-radius:2px 10px 10px 2px;pointer-events:none}
.pb-topo{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid rgba(27,61,72,.12)}
.pb-dia{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ouro-escuro)}
.pb-titulo{font-family:var(--display);font-style:italic;font-weight:600;font-size:24px;line-height:1.2;color:var(--tinta)}
.trechos{list-style:none;margin:0;padding:0}
.trechos li{display:flex;align-items:center;gap:14px;padding:13px 2px;border-bottom:1px dashed rgba(27,61,72,.14);font-family:var(--serif);font-size:18px;line-height:1.3}
.trechos li:last-child{border-bottom:0}
.marcador{display:block;width:10px;height:28px;flex:none;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%)}
.marcador.at{background:var(--petroleo)} .marcador.nt{background:var(--mar)} .marcador.sl{background:var(--turquesa)} .marcador.pv{background:var(--ouro)}
/* a capa: parada, já aberta, deitada à esquerda da página, formando o livro aberto */
.capa{position:absolute;inset:0;z-index:3;transform-origin:left center;transform-style:preserve-3d;transform:rotateY(-178deg);pointer-events:none}
.capa-frente,.capa-verso{position:absolute;inset:0;border-radius:4px 16px 16px 4px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.capa-frente{background:linear-gradient(135deg,#2f5967,#1d4250);box-shadow:inset 12px 0 16px -10px rgba(0,0,0,.4),0 22px 44px rgba(27,61,72,.28)}
.capa-moldura{position:absolute;inset:14px;border:1px solid rgba(231,207,142,.75);border-radius:2px 10px 10px 2px}
.capa-moldura::after{content:'';position:absolute;inset:6px;border:1px solid rgba(231,207,142,.35);border-radius:inherit}
.capa-cruz{position:absolute;left:50%;top:50%;width:36px;height:56px;margin:-34px 0 0 -18px;background:linear-gradient(var(--ouro-claro),var(--ouro)) center/3px 100% no-repeat,linear-gradient(90deg,var(--ouro),var(--ouro-claro),var(--ouro)) center 32%/100% 3px no-repeat}
/* por dentro da capa: o papel da guarda, com a borda do tecido da capa dobrada em volta (como num livro de capa dura) */
.capa-verso{transform:rotateY(180deg);background:var(--papel-textura),var(--papel-2);box-shadow:inset 0 0 0 5px #24495a,inset 0 0 0 6px rgba(231,207,142,.35),inset -16px 0 18px -14px rgba(27,61,72,.35)}
.capa-verso::before{content:'';position:absolute;inset:14px;border:1px solid rgba(184,145,58,.32);border-radius:10px 2px 2px 10px}
.capa-verso::after{content:'';position:absolute;left:50%;top:50%;width:26px;height:40px;margin:-24px 0 0 -13px;opacity:.35;background:linear-gradient(var(--ouro),var(--ouro)) center/2px 100% no-repeat,linear-gradient(var(--ouro),var(--ouro)) center 32%/100% 2px no-repeat}

/* capítulo III: os 365 dias */
.ano-palco{margin-top:96px}
.ano-fixo{text-align:center}
.contador{font-family:var(--display);font-weight:600;font-size:clamp(104px,28vw,168px);line-height:.88;color:var(--ouro-escuro);font-variant-numeric:lining-nums tabular-nums}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .contador,.n15-num,.edicao-num,.data-dia{background-image:var(--ouro-grad-papel);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .motivo-num{background-image:var(--ouro-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .claro .motivo-num{background-image:var(--ouro-grad-papel)}
}
.contador-legenda{margin:6px 0 26px;color:var(--tinta-suave);font-size:16px;letter-spacing:.04em}
.grade-ano{position:relative;width:100%;max-width:380px;margin:0 auto}
.grade-ano svg{display:block;width:100%;height:auto}
.grade-ano .cheia{position:absolute;inset:0}
/* o último dia do ano, 31 de dezembro, fica dourado: prepara a folhinha mais adiante */
.ultimo-dia{fill:var(--ouro)}
/* 17,5em: no computador a linha quebra depois de "dezembro," (e não antes de "cada vez.") */
.ano-legenda{font-family:var(--serif);font-size:20px;line-height:1.5;margin:22px auto 0;max-width:17.5em;color:var(--tinta)}

/* capítulo IV: o "15", os passos, o celular e o lembrete */
.n15{display:flex;align-items:baseline;gap:8px;margin:0 0 6px}
.n15-num{font-family:var(--display);font-weight:600;font-size:96px;line-height:.8;color:var(--ouro-escuro)}
.n15-un{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ouro-escuro)}
.celular-area{margin:0 0 128px}
.celular-palco{perspective:1100px}
.passos{list-style:none;display:flex;justify-content:space-between;width:100%;max-width:300px;margin:0 auto 26px;padding:0;position:relative}
.passos::before{content:'';position:absolute;left:18px;right:18px;top:17px;height:1px;background:rgba(184,145,58,.5)}
.passo{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--tinta-suave);position:relative;z-index:1}
.passo-num{position:relative;isolation:isolate;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--cartao);border:1px solid var(--ouro);font-family:var(--display);font-weight:600;font-size:19px;color:var(--noite);letter-spacing:0}
/* o dourado do passo é uma camada à parte: no efeito ela acende, sem trocar cor de nada */
.passo-num::before{content:'';position:absolute;inset:-1px;border-radius:50%;background:var(--ouro);z-index:-1}
.passo-icone{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* o celular: moldura desenhada e, dentro, telas de verdade do app (390 x 844 pontos);
   as telas ficam empilhadas e a última fica por cima */
.celular{position:relative;width:300px;max-width:100%;margin:0 auto;padding:9px;border-radius:48px;background:linear-gradient(160deg,#2c4f5b,#0c1f25 55%,#183a44);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 34px 70px rgba(27,61,72,.3)}
.tela{position:relative;border-radius:39px;overflow:hidden;background:#0d2128}
.tela img{display:block;width:100%;height:auto}
.tela img + img{position:absolute;top:0;left:0;height:100%}
/* capítulo V: a tela do recomeço, num celular menor logo depois dos três jeitos */
.celular-menor{width:260px;padding:8px;border-radius:42px;margin-bottom:128px}
.celular-menor .tela{border-radius:34px}
.aviso{display:flex;align-items:center;gap:12px;max-width:320px;margin:36px auto 0;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.75);box-shadow:0 1px 2px rgba(27,61,72,.08),0 12px 28px rgba(27,61,72,.1);border:1px solid rgba(27,61,72,.06)}
.aviso-icone{width:38px;height:38px;border-radius:10px;background:var(--noite);flex:none;display:grid;place-items:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ouro-claro)}
.aviso-app{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);font-weight:600}
.aviso-texto{font-size:15px;font-weight:600;color:var(--tinta)}

/* capítulo V: o calendário e os três jeitos */
.calendario{max-width:480px;background:var(--papel-textura),var(--cartao);border-radius:22px;padding:22px 20px;margin:0 auto 18px;box-shadow:0 1px 2px rgba(27,61,72,.06),0 14px 36px rgba(27,61,72,.08)}
.cal-topo{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 14px}
.cal-mes{font-family:var(--display);font-style:italic;font-size:28px;font-weight:600;line-height:1}
.cal-hoje{font-size:13px;color:var(--tinta-suave)}
.cal-semana,.cal-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-semana{margin:0 0 6px}
.cal-semana span{font-size:11px;text-align:center;color:var(--tinta-suave);font-weight:600}
.dia{aspect-ratio:1/1;border-radius:50%;display:grid;place-items:center;font-size:12px;position:relative;isolation:isolate;font-variant-numeric:tabular-nums}
.dia.vazio{visibility:hidden}
.dia.lido{background:var(--mar);color:#fff}
.dia.futuro{border:1.5px dashed rgba(27,61,72,.2);color:var(--tinta-suave)}
.dia.pausa{border:1.5px solid var(--ouro);color:var(--tinta)}
.dia.pausa::after{content:'';position:absolute;inset:-1.5px;border-radius:50%;background:var(--ouro);z-index:-1}
.dia.hoje{box-shadow:0 0 0 3px var(--cartao),0 0 0 5px var(--noite)}
.cal-legenda{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;font-size:16px;line-height:1.4;color:var(--tinta-suave)}
.leg{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:7px;vertical-align:-1px}
.leg.lido{background:var(--mar)} .leg.depois{background:var(--ouro)}
.jeitos{list-style:none;max-width:480px;margin:0 auto 72px;padding:0;display:flex;flex-direction:column;gap:10px}
.jeitos li{display:flex;gap:16px;align-items:center;background:var(--cartao);border-radius:16px;padding:16px 18px;font-size:17px;line-height:1.45}

/* fotos da Thayna nos capítulos II e VI: em arco, com a moldura dourada fina por fora */
.foto-arco{position:relative;max-width:300px;margin:0 auto 128px}
/* parte 6: a foto como uma foto impressa, com a borda de papel e o nome escrito embaixo, presa por
   cantoneiras douradas, como num álbum, e um pouco inclinada sobre a página. A foto existe só em
   1200 x 800: aqui ela aparece em 5:4, sem cortar quase nada */
.foto-album{position:relative;max-width:440px;margin:0 auto 128px;padding:14px 14px 0;background:var(--papel-textura),#fffdf8;border-radius:2px;box-shadow:0 1px 2px rgba(27,61,72,.12),0 22px 44px rgba(27,61,72,.17);transform:rotate(-2deg)}
.foto-album img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover}
.legenda-album{margin:0;padding:12px 8px 16px;text-align:center;font-family:var(--display);font-style:italic;font-weight:600;font-size:27px;line-height:1.15;color:var(--tinta)}
.cantoneira{position:absolute;z-index:2;width:40px;height:40px;background:linear-gradient(135deg,#f2dfa6 0%,#d4b05c 48%,#a8842e 100%)}
.cantoneira.ca{top:-7px;left:-7px;clip-path:polygon(0 0,100% 0,0 100%)}
.cantoneira.cb{top:-7px;right:-7px;clip-path:polygon(0 0,100% 0,100% 100%)}
.cantoneira.cc{bottom:-7px;right:-7px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.cantoneira.cd{bottom:-7px;left:-7px;clip-path:polygon(0 0,100% 100%,0 100%)}

/* capítulo I: a Bíblia aberta, com um filete dourado por dentro; a luz que passa por ela (::before) só aparece com os efeitos */
.foto-leitura{position:relative;max-width:640px;margin:0 auto 128px;border-radius:20px;overflow:hidden;background:#0c2229;box-shadow:0 26px 54px rgba(0,0,0,.38)}
.foto-leitura img{display:block;width:100%;height:auto}
.foto-leitura::after{content:'';position:absolute;inset:10px;z-index:2;border:1px solid rgba(231,207,142,.5);border-radius:13px;pointer-events:none}
.foto-leitura::before{content:'';position:absolute;top:0;bottom:0;left:0;width:60%;z-index:1;pointer-events:none;background:linear-gradient(100deg,rgba(255,246,222,0),rgba(255,246,222,.42) 50%,rgba(255,246,222,0));opacity:0}
.foto-arco .arco-moldura{border-color:rgba(184,145,58,.55)}
/* a frase da Thayna: a parte entre aspas fica num trecho só dela, um pouco maior, em dourado, com o ponto junto
   e as linhas do mesmo tamanho (sem "dia" sozinho embaixo) */
.citacao-linha{position:relative;display:block;margin-top:.3em;font-size:1.15em;text-wrap:balance}
.citacao-linha::before{content:'';position:absolute;left:50%;top:50%;width:min(440px,100%);height:170%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(231,207,142,.3),rgba(231,207,142,0));z-index:-1;pointer-events:none}
.frase-comeco{display:block}
.citacao{font-style:normal}
.edicao{display:flex;align-items:center;gap:20px}
.edicao-num{font-family:var(--display);font-weight:600;font-size:120px;line-height:.78;color:var(--ouro-escuro);flex:none}

/* ---------- C · a data: a folhinha ---------- */
/* a margem negativa deixa a barra fixa estacionar por cima do fim do fundo escuro, sem faixa clara */
.data{padding:150px 0;text-align:center;margin-bottom:-86px}
.data-antes{margin:24px 0 0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ouro-claro);font-weight:600}
.folhinha-area{position:relative;max-width:300px;margin:34px auto 40px;padding-top:22px;perspective:1200px}
.folhinha-topo{position:absolute;top:0;left:0;right:0;height:34px;border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,#2f5967,#24495a);z-index:3;box-shadow:0 6px 12px rgba(0,0,0,.22)}
.argolas{position:absolute;top:-10px;left:0;right:0;display:flex;justify-content:center;gap:110px}
.argolas i{display:block;width:12px;height:26px;border-radius:6px;background:linear-gradient(90deg,#9a7a2e,#f1dc9c 50%,#9a7a2e)}
.folha{position:relative;background:var(--papel-textura),var(--cartao);color:var(--tinta);border-radius:4px 4px 16px 16px;padding:42px 18px 30px;box-shadow:0 26px 54px rgba(0,0,0,.32)}
/* a folha de 31 de dezembro só aparece com o efeito da etapa 3 */
.folha-velha{display:none;position:absolute;left:0;right:0;top:22px;bottom:0;z-index:2;background:var(--papel-textura),#f1eadc;border-radius:4px 4px 16px 16px;padding:42px 18px 30px;transform-origin:top center;box-shadow:0 10px 24px rgba(0,0,0,.18)}
.data-dia{display:block;font-family:var(--display);font-weight:600;font-size:clamp(150px,40vw,210px);line-height:.82;color:var(--ouro-escuro)}
.data-resto{display:block;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.3;margin-top:12px;color:var(--tinta)}
.velha-dia{display:block;font-family:var(--display);font-weight:600;font-size:clamp(150px,40vw,210px);line-height:.82;color:rgba(27,61,72,.5)}
.velha-resto{display:block;font-family:var(--serif);font-weight:700;font-size:24px;line-height:1.3;margin-top:12px;color:rgba(27,61,72,.55)}
.data-depois{margin:0 auto 34px;max-width:26em;font-size:19px;line-height:1.6;color:rgba(255,255,255,.84)}
.data .filete:first-child{margin-bottom:0}
/* o convite final, depois da folhinha: a frase e o botão */
.data-convite{margin:44px auto 0;max-width:30em}
/* o fechamento: a frase da Thayna grande, dourada e entre aspas; embaixo, a linha e o botão */
.fecho{position:relative;isolation:isolate;padding:30px 0 2px}
.fecho-luz{position:absolute;left:50%;top:42%;width:min(600px,140%);aspect-ratio:1.5;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(240,196,110,.32),rgba(240,196,110,.1) 55%,rgba(240,196,110,0));z-index:-1;pointer-events:none}
.fecho-poeira{z-index:-1}
/* a fileira de bolinhas: lembra os 365 dias (todas acesas e a última dourada) */
.fecho-bolinhas{position:relative;display:block;width:210px;height:8px;margin:0 auto 30px;background:radial-gradient(circle,rgba(231,207,142,.32) 0 2.2px,transparent 2.8px) 0 0/10px 8px repeat-x}
.fecho-bolinhas::before{content:'';position:absolute;top:0;bottom:0;left:0;right:10px;background:radial-gradient(circle,rgba(255,255,255,.88) 0 2.2px,transparent 2.8px) 0 0/10px 8px repeat-x}
.fecho-bolinhas::after{content:'';position:absolute;top:0;right:0;width:10px;height:8px;background:radial-gradient(circle,#f0d79a 0 3px,transparent 3.6px);filter:drop-shadow(0 0 4px rgba(240,215,154,.85))}
.fecho-frase{margin:0 0 20px;font-size:clamp(30px,8.4vw,46px);line-height:1.15;text-wrap:balance}
.fecho-frase .ouro-destaque{padding:0 .04em .06em}
.convite-frase{font-family:var(--serif);font-weight:300;font-size:clamp(20px,4.8vw,26px);line-height:1.5;color:#fff;margin:0 0 30px}

/* ---------- E · barra fixa ---------- */
/* fica parada embaixo da tela enquanto o trilho (capítulos e data) passa, e estaciona antes da oferta */
.barra-fixa{position:sticky;bottom:0;z-index:30;padding:10px 12px calc(14px + env(safe-area-inset-bottom))}
.barra-conteudo{max-width:640px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(18,48,57,.97);color:#fff;border:1px solid rgba(231,207,142,.28);border-radius:20px;padding:10px 10px 10px 18px;box-shadow:0 12px 32px rgba(10,30,36,.32)}
.barra-preco{display:flex;flex-direction:column;line-height:1.25}
.barra-preco strong{font-size:15px;white-space:nowrap}
.barra-preco span{font-size:12.5px;color:rgba(255,255,255,.76);white-space:nowrap}
.botao-barra{min-height:48px;padding:0 18px;font-size:14.5px;white-space:nowrap}
/* o programa da página esconde a barra enquanto o botão do topo está na tela (quando o estilo não faz isso sozinho) */
.barra-fixa.escondida .barra-conteudo{opacity:0;transform:translateY(130%);visibility:hidden}

/* ---------- F · o que você recebe, preço e garantia ---------- */
.oferta{padding:120px 0 72px}
.titulo-secao{font-family:var(--serif);font-size:clamp(28px,6vw,40px);line-height:1.2;margin:0 0 18px;text-align:center}
/* a Bíblia 365 aberta, com um filete branco por dentro, como uma foto de livro */
.foto-oferta{position:relative;max-width:640px;margin:40px auto 0;border-radius:22px;overflow:hidden;background:var(--papel-2);box-shadow:0 1px 2px rgba(27,61,72,.06),0 18px 40px rgba(27,61,72,.12)}
.foto-oferta img{display:block;width:100%;height:auto}
.foto-oferta::after{content:'';position:absolute;top:10px;left:10px;right:10px;bottom:10px;border:1px solid rgba(255,255,255,.6);border-radius:14px;pointer-events:none}
/* tudo o que vem com a turma: quatro grupos, cada um com um rótulo pequeno e os seus cartões */
.grupos{display:grid;grid-template-columns:minmax(0,1fr);gap:30px 20px;margin:44px 0 0}
.grupo-rotulo::after{content:'';display:block;width:34px;height:1.5px;margin-top:9px;border-radius:2px;background:linear-gradient(90deg,var(--ouro),rgba(201,162,74,0));transform-origin:left center}
.grupo-rotulo{margin:0 0 12px;font-family:var(--sans);font-size:12.5px;line-height:1.4;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--ouro-escuro)}
.itens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
/* o cartão escondido (hidden) não pode voltar pelo display:flex da regra de baixo */
.itens li[hidden]{display:none}
.itens li{display:flex;align-items:center;gap:14px;background:var(--cartao);border-radius:16px;padding:14px 16px;font-size:16.5px;line-height:1.45;box-shadow:0 1px 2px rgba(27,61,72,.05)}
.icone-fundo{width:46px;height:46px;border-radius:50%;background:var(--papel);box-shadow:inset 0 0 0 1px rgba(184,145,58,.5);display:grid;place-items:center;flex:none}
.icone{width:23px;height:23px;flex:none;fill:none;stroke:var(--mar);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.frete{text-align:center;margin:24px 0 76px;color:var(--tinta-suave)}
.cartao-preco{position:relative;max-width:480px;margin:0 auto;color:#fff;border-radius:30px;padding:76px 28px 36px;text-align:center;box-shadow:0 30px 60px rgba(27,61,72,.22)}
.cartao-preco.grao::before{border-radius:30px}
.moldura-interna{position:absolute;inset:10px;border:1px solid rgba(231,207,142,.35);border-radius:22px;pointer-events:none}
.cartao-preco .selo{top:-46px;left:50%;margin-left:-56px}
.cartao-preco .parcela{font-size:48px}
.botao-grande{width:100%;min-height:60px;font-size:18px;margin:26px 0 22px}
.garantia{display:flex;gap:12px;align-items:flex-start;text-align:left;font-size:16px;line-height:1.55;color:rgba(255,255,255,.88);padding-top:20px;border-top:1px solid rgba(231,207,142,.2)}
.garantia .icone{stroke:var(--ouro-claro);margin-top:1px}
.nota{text-align:center;font-size:16px;color:var(--tinta-suave);margin:20px 0 0}

/* ---------- G · perguntas frequentes ---------- */
.perguntas{padding:72px 0 120px}
.lista-perguntas{margin:40px 0 0}
.perguntas details{border-top:1px solid rgba(27,61,72,.14);padding:0 2px}
.perguntas details:last-child{border-bottom:1px solid rgba(27,61,72,.14)}
.perguntas summary{list-style:none;cursor:pointer;min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:16.5px;line-height:1.4;padding:16px 0}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:'+';font-family:var(--display);font-size:32px;font-weight:500;line-height:1;color:var(--ouro-escuro);flex:none}
.perguntas details[open] summary::after{transform:rotate(45deg)}
.perguntas details p{padding:0 0 20px;color:var(--tinta-suave);line-height:1.65}
.duvida{text-align:center;margin:48px 0 0}
.duvida p{font-family:var(--display);font-style:italic;font-weight:600;font-size:30px;line-height:1.2;margin:0 0 16px}

/* ---------- H · rodapé ---------- */
.rodape{padding:56px 0 calc(56px + env(safe-area-inset-bottom));font-size:16px;line-height:1.6;text-align:center;color:rgba(255,255,255,.8)}
.rodape p{margin:0 0 8px}
.rodape-marca{font-family:var(--display);font-style:italic;font-weight:600;color:var(--ouro-claro);font-size:22px;line-height:1.3}
.rodape a{color:#fff}

/* ---------- celular e computador ---------- */
@media (min-width:760px){
  .grupos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:699px){
  /* no celular o livro também abre inteiro: aberto, ele fica menor e com a lombada no meio da tela,
     para a capa deitada à esquerda e a página à direita caberem lado a lado (--lv é a largura da página
     e --esc o tamanho final; aberto, ele ocupa 2 x --lv x --esc) */
  .livro-3d{--lv:240px;--esc:.68;width:var(--lv);max-width:none;transform-origin:left top;transform:translateX(calc(var(--lv) / 2)) scale(var(--esc))}
  .livro-area{margin-bottom:72px}
  .pagina-biblia{padding:24px 16px}
  .trechos li{gap:10px;font-size:18px}
}
@media (max-width:374px){
  .livro-3d{--lv:232px;--esc:.66}
}
@media (max-width:359px){
  .livro-3d{--lv:220px;--esc:.6}
  /* na página mais estreita, "Antigo Testamento" continua numa linha só */
  .trechos li{font-size:16px}
}
@media (min-width:700px){
  .livro-3d{margin-left:50%}
}
@media (max-width:560px){
  .quebra-celular{display:inline}
  .so-largo{display:none}
  .botao{width:100%}
  .botao-barra{width:auto}
  .topo-foto .selo{width:88px;height:88px;top:18px;right:16px}
  .topo-foto .selo-centro{font-size:26px}
}
@media (max-width:370px){
  .barra-preco span{display:none}
  .botao-barra{padding:0 14px;font-size:14px}
}
/* no celular, o texto dos botões e o preço do cartão ficam numa linha só (a 360 px eles quebravam em duas):
   menos espaço dos lados e, nas telas mais estreitas, a letra um pouco menor. Medido com a letra do Google.
   A ordem importa: as regras do cartão vêm depois da regra geral dos botões */
@media (max-width:400px){
  .botao:not(.botao-barra){padding:0 20px}
  .botao-contorno{font-size:16.5px}
}
@media (max-width:560px){
  .cartao-preco{padding-left:18px;padding-right:18px}
  .cartao-preco .botao-grande{font-size:17px;padding:0 14px}
}
@media (max-width:374px){
  .cartao-preco .botao-grande{font-size:16px;padding:0 12px}
}
@media (max-width:340px){
  .botao:not(.botao-barra){font-size:15px;padding:0 14px}
  .cartao-preco{padding-left:12px;padding-right:12px}
  .cartao-preco .botao-grande{font-size:15px;padding:0 8px}
  .cartao-preco .parcela{font-size:42px}
}

/* ---------- I · inscrições encerradas (a partir de 17/01/2027, 23h59) ---------- */
/* o programa põe o aviso no lugar dos botões de compra; o preço e a barra fixa saem */
.aviso-encerrado{margin:0 0 22px}
.cartao-preco .aviso-encerrado{margin:0}
.encerrado-titulo{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.35;color:#fff;margin:0 0 10px}
.encerrado-texto{font-size:17px;line-height:1.6;color:rgba(255,255,255,.86);margin:0 0 22px}
.botao{text-wrap:balance}
.cartao-preco .botao-instagram{width:100%;padding:0 14px;font-size:16px}
.fim-das-inscricoes :is(.compra,.barra-fixa,.garantia,.data-convite),
.fim-das-inscricoes .cartao-preco :is(.parcela,.avista){display:none}

/* ---------- barrinha do modo de teste (só no computador, no Wi-Fi de casa ou com ?modo=teste) ---------- */
.barra-teste{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:8px 12px;background:rgba(10,30,36,.95);color:#efdcb0;font:500 13px/1.45 var(--sans);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.barra-teste[hidden]{display:none}
.barra-teste strong{color:#fff}
.barra-teste a{color:#efdcb0;margin-left:6px}
.barra-teste a[aria-current]{color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid #fff}
.barra-teste button{margin-left:auto;font:inherit;color:#fff;background:transparent;border:1px solid rgba(239,220,176,.5);border-radius:999px;padding:2px 10px;cursor:pointer}
.barra-teste .registro{flex-basis:100%;color:rgba(255,255,255,.8);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* modo de alto contraste do celular e do computador: o dourado vira texto comum */
@media (forced-colors:active){
  .ouro-destaque,.contador,.n15-num,.edicao-num,.data-dia,.motivo-num{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
  .parte-num text{fill:CanvasText;stroke:CanvasText}
}

/* =====================================================================
   MOVIMENTO (etapa 3)
   Tudo aqui é enfeite: sem este trecho, a página já está inteira.
   Só vale para quem não pediu menos movimento nos ajustes do celular.
   Regra de ouro: o estado escondido fica só no começo da animação (from),
   nunca no estilo normal; se o efeito não rodar, o texto continua à vista.
   Anima só transparência, movimento, recorte e posição ou tamanho de fundo e de máscara.
   1. os que andam pelo tempo (topo, brilho dos botões, céu, poeira);
   2. os presos à rolagem, no navegador que tem o recurso;
   3. a reserva, no navegador sem o recurso (a classe .reserva vem do script do head).
   ===================================================================== */
/* o dia da contagem dos 365 (passa para a grade, que enche junto) e quantas linhas de 20 já estão cheias */
@property --dia{syntax:'<integer>';inherits:true;initial-value:365}
@property --linhas{syntax:'<integer>';inherits:true;initial-value:18}

@media (prefers-reduced-motion:no-preference){

  /* ---------- 1. pelo tempo ---------- */

  /* topo: um elemento depois do outro, menos de 1 segundo no total */
  .topo-texto > :not(h1){animation:entrar .6s cubic-bezier(.2,.7,.2,1) both}
  .topo-texto > .sub{animation-delay:.22s}
  .topo-texto > .botao{animation-delay:.33s}
  /* o subtítulo e a foto já começam à vista (60%) e acendem: são o maior elemento da primeira tela,
     e a tela conta como pronta quando ele aparece (nota do Lighthouse) */
  .topo-texto > .sub{animation-name:entrar-visivel}
  .topo-foto{animation:entrar-visivel .6s cubic-bezier(.2,.7,.2,1) .2s both}
  @keyframes entrar-visivel{from{opacity:.6;transform:translateY(10px)}}
  /* as palavras do título sobem uma a uma, saindo de um leve desfoque */
  h1 .w{display:inline-block;animation:entrar-palavra .55s cubic-bezier(.2,.7,.2,1) both}
  h1 .w:nth-child(2){animation-delay:.04s}
  h1 .w:nth-child(3){animation-delay:.08s}
  h1 .w:nth-child(4){animation-delay:.13s}
  h1 .w:nth-child(5){animation-delay:.18s}
  h1 .w:nth-child(6){animation-delay:.22s}
  h1 .w:nth-child(7){animation-delay:.26s}
  h1 .w:nth-child(8){animation-delay:.29s}
  h1 .w:nth-child(9){animation-delay:.32s}
  h1 .w:nth-child(10){animation-delay:.35s}
  @keyframes entrar{from{opacity:0;transform:translateY(14px)}}
  @keyframes entrar-palavra{from{opacity:0;transform:translateY(.4em);filter:blur(6px)}}

  /* o brilho passa duas vezes pelo botão do topo e pelo do preço, depois de carregar */
  .brilho::after{animation:brilhar 3.2s ease-in-out 1.4s 2}
  @keyframes brilhar{0%{transform:translateX(-160%) skewX(-20deg)}35%,100%{transform:translateX(345%) skewX(-20deg)}}
  .botao{transition:transform .2s ease,box-shadow .2s ease}
  .botao:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(110,78,18,.28),0 0 0 1px rgba(255,236,190,.4),0 18px 40px rgba(201,162,74,.46),0 2px 6px rgba(3,14,18,.4)}
  .botao-contorno:hover{box-shadow:none}

  /* "Conheça o clube": a linha fina pulsa devagar */
  /* "Veja como funciona": depois que o topo entra, um ponto de luz desce pela linha, a seta quica para baixo e o
     texto acende junto, sem parar, para a pessoa saber que é para deslizar */
  .deslize-linha::after{animation:descer-ponto 2s cubic-bezier(.45,0,.55,1) 1.2s infinite}
  @keyframes descer-ponto{0%{opacity:0;transform:translateY(0)}15%{opacity:1}75%{opacity:1}100%{opacity:0;transform:translateY(41px)}}
  .deslize-seta{animation:quicar-seta 2s ease-in-out 1.2s infinite}
  @keyframes quicar-seta{0%,100%{transform:translateY(0);opacity:.55}60%{transform:translateY(7px);opacity:1}}
  .deslize-texto{animation:chamar 2s ease-in-out 1.2s infinite}
  @keyframes chamar{0%,100%{opacity:.75}60%{opacity:1}}

  /* céu do capítulo I: alguns pontinhos piscam devagar */
  .ceu span{animation:cintilar 5s ease-in-out infinite}
  .ceu span:nth-child(3n){animation-duration:6.5s;animation-delay:-1.7s}
  .ceu span:nth-child(4n){animation-duration:4.2s;animation-delay:-3.1s}
  @keyframes cintilar{0%,100%{opacity:.12}50%{opacity:.85}}

  /* poeira de luz subindo no amanhecer */
  .poeira span{animation:flutuar-poeira 12s linear infinite}
  /* os raios do sol giram bem devagar */
  .sol::before{animation:girar-raios 90s linear infinite}
  @keyframes girar-raios{to{transform:rotate(360deg)}}
  @keyframes flutuar-poeira{0%{transform:translate(0,0);opacity:0}15%{opacity:.9}100%{transform:translate(18px,-320px);opacity:0}}

  /* o "+" das perguntas gira ao abrir; a barra fixa entra e sai deslizando */
  .perguntas summary::after{transition:transform .2s ease}
  .barra-conteudo{transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1),visibility .4s}

  /* ---------- 2. presos à rolagem ---------- */
  @supports (animation-timeline:view()){

    /* a linha do tempo com nome que a barra fixa usa de longe: a parte 3 */
    :root:not(.reserva) .pagina{timeline-scope:--c3}
    :root:not(.reserva) .cap-3{view-timeline-name:--c3}

    /* fita de progresso: enche da esquerda para a direita conforme a página desce */
    :root:not(.reserva) .progresso{display:block;animation:encher-fita linear both;animation-timeline:scroll(root)}
    @keyframes encher-fita{to{transform:scaleX(1)}}

    /* selos: o anel de texto gira devagar */
    :root:not(.reserva) .selo-anel{animation:girar linear both;animation-timeline:scroll(root)}
    @keyframes girar{to{transform:rotate(320deg)}}

    /* barra fixa: entra quando o começo da parte 3 passa de 70% da altura da tela (nas partes 1 e 2 ela não aparece) */
    :root:not(.reserva) .barra-conteudo{animation:barra-entra linear both;animation-timeline:--c3;animation-range:entry 30% entry 50%}
    @keyframes barra-entra{from{opacity:0;transform:translateY(130%);visibility:hidden}}

    /* abertura de cada parte: o número sobe e reluz, as palavras da frase grande sobem uma a uma (até 12),
       o filete abre do centro e a luz de vela acende junto */
    :root:not(.reserva) .abertura{view-timeline-name:--ab}
    /* os números 1, 2 e 3 se desenham só no contorno, como os numerais romanos de antes, e depois se enchem de dourado */
    :root:not(.reserva) .parte-num text{stroke-dasharray:900;animation:desenhar-num linear both;animation-timeline:--ab;animation-range:entry 5% cover 34%}
    @keyframes desenhar-num{from{stroke-dashoffset:900;fill-opacity:0}65%{fill-opacity:0}}
    /* a palavra dourada da frase grande: um brilho passa uma vez por ela quando a frase assenta */
    :root:not(.reserva) .ab-titulo .ouro-destaque{background-image:linear-gradient(105deg,rgba(255,248,222,0) 40%,rgba(255,248,222,.95) 50%,rgba(255,248,222,0) 60%),var(--ouro-grad);background-size:300% 100%,100% 100%;background-repeat:no-repeat;animation:brilho-titulo linear both;animation-timeline:--ab;animation-range:cover 34% cover 52%}
    :root:not(.reserva) .claro .ab-titulo .ouro-destaque{background-image:linear-gradient(105deg,rgba(255,246,220,0) 40%,rgba(255,246,220,.92) 50%,rgba(255,246,220,0) 60%),var(--ouro-grad-papel)}
    :root:not(.reserva) #titulo-parte-6 .p:nth-child(7) .ouro-destaque{animation-range:cover 37% cover 55%}
    :root:not(.reserva) #titulo-parte-6 .p:nth-child(8) .ouro-destaque{animation-range:cover 40% cover 58%}
    @keyframes brilho-titulo{from{background-position:100% 0,0 0}to{background-position:0 0,0 0}}
    :root:not(.reserva) .ab-titulo .p{display:inline-block;animation:subir-palavra linear both;animation-timeline:--ab}
    :root:not(.reserva) .ab-titulo .p:nth-child(1){animation-range:entry 30% cover 28%}
    :root:not(.reserva) .ab-titulo .p:nth-child(2){animation-range:entry 36% cover 29.5%}
    :root:not(.reserva) .ab-titulo .p:nth-child(3){animation-range:entry 42% cover 31%}
    :root:not(.reserva) .ab-titulo .p:nth-child(4){animation-range:entry 48% cover 32.5%}
    :root:not(.reserva) .ab-titulo .p:nth-child(5){animation-range:entry 54% cover 34%}
    :root:not(.reserva) .ab-titulo .p:nth-child(6){animation-range:entry 60% cover 35.5%}
    :root:not(.reserva) .ab-titulo .p:nth-child(7){animation-range:entry 66% cover 37%}
    :root:not(.reserva) .ab-titulo .p:nth-child(8){animation-range:entry 72% cover 38.5%}
    :root:not(.reserva) .ab-titulo .p:nth-child(9){animation-range:entry 78% cover 40%}
    :root:not(.reserva) .ab-titulo .p:nth-child(10){animation-range:entry 84% cover 41.5%}
    :root:not(.reserva) .ab-titulo .p:nth-child(11){animation-range:entry 90% cover 43%}
    :root:not(.reserva) .ab-titulo .p:nth-child(12){animation-range:entry 96% cover 44.5%}
    :root:not(.reserva) .ab-titulo .p:nth-child(13){animation-range:entry 100% cover 46%}
    @keyframes subir-palavra{from{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(5px)}}
    :root:not(.reserva) .abertura .filete{animation:abrir-centro linear both;animation-timeline:--ab;animation-range:cover 30% cover 46%}
    @keyframes abrir-centro{from{transform:scaleX(0)}}
    :root:not(.reserva) .abertura::before{animation:vela linear both;animation-timeline:--ab;animation-range:entry 15% cover 42%}
    @keyframes vela{from{opacity:0;transform:translateX(-50%) scale(.6)}}

    /* blocos e visuais: sobem uns 36 px e aparecem */
    :root:not(.reserva) :is(.bloco,.revelar){animation:surgir linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
    @keyframes surgir{from{opacity:0;transform:translateY(36px)}}

    /* linhas que se acendem: um véu desce pelo bloco (máscara, e não texto transparente,
       para nenhuma palavra com tratamento próprio sumir ou aparecer duplicada) */
    :root:not(.reserva) .acende{-webkit-mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.2) 54%);mask-image:linear-gradient(to bottom,#000 46%,rgba(0,0,0,.2) 54%);-webkit-mask-size:100% 220%;mask-size:100% 220%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:0 0;mask-position:0 0;animation:acender linear both;animation-timeline:view();animation-range:cover 16% cover 46%}
    @keyframes acender{from{-webkit-mask-position:0 100%;mask-position:0 100%}}

    /* destaque: assenta com uma leve redução de tamanho */
    :root:not(.reserva) .fala.destaque{animation:assentar linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
    @keyframes assentar{from{opacity:0;transform:scale(.94)}}

    /* marca-texto: a faixa se desenha da esquerda para a direita */
    :root:not(.reserva) mark.marca{animation:sublinhar linear both;animation-timeline:view();animation-range:cover 34% cover 48%}
    @keyframes sublinhar{from{background-size:0% 100%}}

    /* palavra dourada e números grandes: o brilho corre pela palavra */
    :root:not(.reserva) :is(.fala .ouro-destaque,.motivo-num,.edicao-num,.n15-num){background-size:100% 260%;animation:reluzir linear both;animation-timeline:view();animation-range:cover 5% cover 95%}
    @keyframes reluzir{from{background-position:0 0}to{background-position:0 100%}}

    /* palavras que se soltam: "vai ficando para depois" sobe, gira de leve e esmaece */
    :root:not(.reserva) .dispersa :is(.d1,.d2,.d3,.d4){animation:soltar linear both;animation-timeline:view();animation-range:cover 46% cover 72%}
    .dispersa .d1{--dx:-2px;--dy:-10px;--r:-4deg}
    .dispersa .d2{--dx:4px;--dy:-18px;--r:5deg}
    .dispersa .d3{--dx:-3px;--dy:-8px;--r:-6deg}
    .dispersa .d4{--dx:6px;--dy:-22px;--r:7deg}
    @keyframes soltar{to{opacity:.32;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}

    /* capítulo I: os meses aparecem um a um, os motivos entram da esquerda,
       os livros descem para a prateleira e o último se inclina */
    :root:not(.reserva) .meses span{animation:aparecer linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
    :root:not(.reserva) .meses span:nth-child(2){animation-range:entry 20% cover 32%}
    :root:not(.reserva) .meses span:nth-child(3){animation-range:entry 30% cover 34%}
    :root:not(.reserva) .meses span:nth-child(4){animation-range:entry 40% cover 36%}
    :root:not(.reserva) .meses span:nth-child(5){animation-range:entry 50% cover 38%}
    :root:not(.reserva) .meses span:nth-child(6){animation-range:entry 60% cover 40%}
    :root:not(.reserva) .meses span:nth-child(7){animation-range:entry 70% cover 42%}
    :root:not(.reserva) .meses span:nth-child(8){animation-range:entry 80% cover 44%}
    :root:not(.reserva) .meses span:nth-child(9){animation-range:entry 90% cover 46%}
    :root:not(.reserva) .meses span:nth-child(10){animation-range:entry 100% cover 48%}
    :root:not(.reserva) .meses span:nth-child(11){animation-range:cover 30% cover 50%}
    :root:not(.reserva) .meses span:nth-child(12){animation-range:cover 32% cover 52%}
    @keyframes aparecer{from{opacity:0;transform:translateY(10px)}}
    :root:not(.reserva) .motivos-lista li{animation:entrar-lado linear both;animation-timeline:view();animation-range:entry 10% cover 32%}
    :root:not(.reserva) .motivos-lista li:nth-child(2){animation-range:entry 40% cover 40%}
    :root:not(.reserva) .motivos-lista li:nth-child(3){animation-range:entry 70% cover 48%}
    @keyframes entrar-lado{from{opacity:0;transform:translateX(-24px)}}
    :root:not(.reserva) .livro{animation:cair linear both;animation-timeline:view();animation-range:entry 20% cover 36%}
    :root:not(.reserva) .l2{animation-range:entry 30% cover 38%}
    :root:not(.reserva) .biblia{animation-range:entry 40% cover 40%}
    :root:not(.reserva) .l3{animation-range:entry 50% cover 42%}
    :root:not(.reserva) .l4{animation-range:entry 60% cover 44%}
    :root:not(.reserva) .l5{animation:inclinar linear both;animation-timeline:view();animation-range:cover 30% cover 55%}
    @keyframes cair{from{opacity:0;transform:translateY(-16px)}}
    @keyframes inclinar{from{transform:rotate(0deg)}to{transform:rotate(-8.75deg)}}

    /* capítulo I: a Bíblia aberta se abre do meio, chega mais perto devagar e a luz passa três vezes,
       como páginas virando rápido (as primeiras semanas passam rápido) */
    :root:not(.reserva) .foto-leitura{view-timeline-name:--leitura;animation:abrir-foto linear both;animation-timeline:view();animation-range:entry 5% cover 38%}
    @keyframes abrir-foto{from{clip-path:inset(0 42% round 20px);opacity:.35}to{clip-path:inset(0 0 round 20px);opacity:1}}
    :root:not(.reserva) .foto-leitura img{animation:aproximar linear both;animation-timeline:--leitura;animation-range:cover 0% cover 100%}
    @keyframes aproximar{from{transform:scale(1.22) translateY(5%)}to{transform:scale(1.03) translateY(-2%)}}
    :root:not(.reserva) .foto-leitura::before{animation:folhas-passando linear both;animation-timeline:--leitura;animation-range:cover 30% cover 72%}
    @keyframes folhas-passando{0%{opacity:0;transform:translateX(-110%)}4%{opacity:1}30%{opacity:1;transform:translateX(175%)}31%{opacity:0;transform:translateX(-110%)}35%{opacity:1}63%{opacity:1;transform:translateX(175%)}64%{opacity:0;transform:translateX(-110%)}68%{opacity:1}96%{opacity:1;transform:translateX(175%)}100%{opacity:0;transform:translateX(175%)}}

    /* parte 6: a foto de álbum pousa na página, girando de leve até assentar inclinada */
    :root:not(.reserva) .foto-album{animation:pousar-foto linear both;animation-timeline:view();animation-range:entry 0% cover 34%}
    @keyframes pousar-foto{from{opacity:0;transform:translateY(46px) rotate(-9deg) scale(.94)}}

    /* amanhecer: o sol sobe, o horizonte se abre do centro e as estrelas do capítulo I se apagam */
    :root:not(.reserva) .amanhecer{view-timeline-name:--aurora}
    :root:not(.reserva) .sol{animation:nascer linear both;animation-timeline:--aurora;animation-range:entry 30% exit 40%}
    @keyframes nascer{from{transform:translateY(80px);opacity:.3}to{transform:translateY(-22px);opacity:1}}
    :root:not(.reserva) .amanhecer::after{animation:refletir linear both;animation-timeline:--aurora;animation-range:entry 40% exit 40%}
    @keyframes refletir{from{opacity:0;transform:scaleX(.4)}}
    :root:not(.reserva) .horizonte{animation:abrir-centro linear both;animation-timeline:--aurora;animation-range:entry 30% cover 55%}
    :root:not(.reserva) .ceu{animation:apagar-ceu linear both;animation-timeline:view();animation-range:exit 0% exit 60%}
    @keyframes apagar-ceu{to{opacity:0}}

    /* capítulo II: o "2022" flutua para cima */
    :root:not(.reserva) .marca-dagua{animation:flutuar linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes flutuar{from{transform:translate(-50%,-34%)}to{transform:translate(-50%,-66%)}}

    /* a Bíblia que se abre: a capa gira pela borda esquerda, a sombra dela passa pela página,
       as quatro leituras entram uma a uma e as fitas balançam de leve */
    :root:not(.reserva) .livro-area{view-timeline-name:--livro}
    /* a capa só gira: transparência animada na própria capa achata o 3D e mostra a frente
       com o livro já aberto. Quem aparece e some são a frente e o verso, que trocam aos 90 graus */
    :root:not(.reserva) .capa{animation:abrir-capa linear both;animation-timeline:--livro;animation-range:cover 24% cover 50%}
    @keyframes abrir-capa{from{transform:rotateY(0deg)}to{transform:rotateY(-178deg)}}
    :root:not(.reserva) .capa-frente{animation:face-da-frente linear both;animation-timeline:--livro;animation-range:cover 24% cover 50%}
    :root:not(.reserva) .capa-verso{animation:face-de-tras linear both;animation-timeline:--livro;animation-range:cover 24% cover 50%}
    @keyframes face-da-frente{0%,50%{opacity:1}51%,100%{opacity:0}}
    @keyframes face-de-tras{0%,50%{opacity:0}51%,100%{opacity:1}}
    /* no celular, enquanto a capa abre, o livro diminui e anda para a direita até a lombada ficar no meio */
    @media (max-width:699px){
      :root:not(.reserva) .livro-3d{animation:abrir-livro linear both;animation-timeline:--livro;animation-range:cover 24% cover 50%}
    }
    @keyframes abrir-livro{from{transform:none}}
    :root:not(.reserva) .pagina-biblia::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(18,48,57,.3),rgba(18,48,57,0) 75%);opacity:0;animation:sombra-capa linear both;animation-timeline:--livro;animation-range:cover 24% cover 50%}
    @keyframes sombra-capa{0%{opacity:1}55%{opacity:.7}100%{opacity:0}}
    :root:not(.reserva) .trechos li{animation:deslizar linear both;animation-timeline:--livro}
    :root:not(.reserva) .trechos li:nth-child(1){animation-range:cover 40% cover 48%}
    :root:not(.reserva) .trechos li:nth-child(2){animation-range:cover 43% cover 51%}
    :root:not(.reserva) .trechos li:nth-child(3){animation-range:cover 46% cover 54%}
    :root:not(.reserva) .trechos li:nth-child(4){animation-range:cover 49% cover 57%}
    @keyframes deslizar{from{opacity:0;transform:translateX(-28px)}}
    :root:not(.reserva) .fitas span{transform-origin:top center;animation:balancar linear both;animation-timeline:--livro}
    :root:not(.reserva) .fitas .f1{animation-range:cover 30% cover 56%}
    :root:not(.reserva) .fitas .f2{animation-range:cover 32% cover 58%}
    :root:not(.reserva) .fitas .f3{animation-range:cover 34% cover 60%}
    :root:not(.reserva) .fitas .f4{animation-range:cover 36% cover 62%}
    @keyframes balancar{0%{transform:rotate(0deg)}35%{transform:rotate(5deg)}65%{transform:rotate(-3deg)}85%{transform:rotate(1deg)}100%{transform:rotate(0deg)}}

    /* capítulo III: o ano fica parado no meio da tela enquanto o número conta de 1 a 365
       e as bolinhas enchem em ordem, uma por dia; o 365 chega com mais de um terço da parada pela frente,
       e o último dia fica dourado. A rolagem nunca trava. */
    :root:not(.reserva) .ano-palco{height:1700px;view-timeline-name:--ano}
    :root:not(.reserva) .ano-fixo{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
    /* em tela baixa a grade diminui, para tudo caber parado na tela */
    :root:not(.reserva) .grade-ano{max-width:min(380px,calc((100vh - 300px) * 1.05));max-width:min(380px,calc((100svh - 300px) * 1.05))}
    :root:not(.reserva) .contador-fixo{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
    :root:not(.reserva) .contador{counter-reset:dia var(--dia)}
    :root:not(.reserva) .contador::before{content:counter(dia);content:counter(dia) / ""}
    /* o dia (--dia) e as linhas cheias (--linhas) vêm do programa da página (pagina.js), conforme a rolagem:
       a contagem só pelo estilo pulava de 1 para 0 e para 365 no iPhone. Sem o programa, ficam 365 e 18.
       A grade é de 20 colunas e 19 linhas (18 cheias e uma de 5): o recorte mostra as linhas completas
       e o pedaço da linha de agora */
    :root:not(.reserva) .grade-ano .cheia{clip-path:polygon(0 0,100% 0,100% calc(var(--linhas) * 100% / 19),calc((var(--dia) - var(--linhas) * 20) * 5%) calc(var(--linhas) * 100% / 19),calc((var(--dia) - var(--linhas) * 20) * 5%) calc((var(--linhas) + 1) * 100% / 19),0 calc((var(--linhas) + 1) * 100% / 19))}
    :root:not(.reserva) .ultimo-dia{transform-box:fill-box;transform-origin:center;animation:acender-dia linear both;animation-timeline:--ano;animation-range:contain 61% contain 68%}
    @keyframes acender-dia{from{opacity:0;transform:scale(.4)}}

    /* capítulo IV: o celular vem inclinado e assenta; depois fica parado no meio da tela enquanto passam
       as telas de verdade do app (a leitura do dia, o áudio da Thayna e o dia concluído), e os passos
       1, 2 e 3 acendem junto. A rolagem nunca trava. O lembrete desce como notificação */
    :root:not(.reserva) .celular-area{height:calc(100vh + 860px);height:calc(100svh + 860px);view-timeline-name:--celular}
    :root:not(.reserva) .celular-palco{position:sticky;top:0;height:100vh;height:100svh;box-sizing:border-box;padding:20px 0 96px;display:flex;flex-direction:column;justify-content:center;justify-content:safe center}
    /* em tela baixa o celular diminui, para caber inteiro acima da barra fixa */
    :root:not(.reserva) .celular-palco .celular{width:min(300px,calc(46.2vh - 85px));width:min(300px,calc(46.2svh - 85px));animation:pousar linear both;animation-timeline:--celular;animation-range:entry 10% entry 100%}
    @keyframes pousar{from{transform:rotateX(26deg) translateY(50px) scale(.92);opacity:.3}}
    @keyframes marcar{from{opacity:0}}
    :root:not(.reserva) .passo-num::before,:root:not(.reserva) .tela :is(.t2,.t3){animation:marcar linear both;animation-timeline:--celular}
    :root:not(.reserva) .s1 .passo-num::before{animation-range:contain 0% contain 6%}
    :root:not(.reserva) .s2 .passo-num::before,:root:not(.reserva) .tela .t2{animation-range:contain 30% contain 38%}
    :root:not(.reserva) .s3 .passo-num::before,:root:not(.reserva) .tela .t3{animation-range:contain 64% contain 72%}
    :root:not(.reserva) .aviso{animation:chegar linear both;animation-timeline:view();animation-range:entry 30% cover 40%}
    @keyframes chegar{from{opacity:0;transform:translateY(-18px) scale(.96)}}

    /* capítulo V: as bolinhas de pausa se enchem de dourado, uma a uma */
    :root:not(.reserva) .calendario{view-timeline-name:--retomada}
    :root:not(.reserva) .dia.pausa::after{animation:marcar linear both;animation-timeline:--retomada}
    :root:not(.reserva) .dia.p1::after{animation-range:cover 56% cover 60%}
    :root:not(.reserva) .dia.p2::after{animation-range:cover 60% cover 64%}
    :root:not(.reserva) .dia.p3::after{animation-range:cover 64% cover 68%}
    :root:not(.reserva) .dia.p4::after{animation-range:cover 68% cover 72%}
    :root:not(.reserva) .dia.p5::after{animation-range:cover 72% cover 76%}
    :root:not(.reserva) .dia.p6::after{animation-range:cover 76% cover 80%}

    /* a folhinha: a folha de 31 de dezembro vira para cima, presa pela borda, e some,
       fazendo sombra como papel; o "1º" reluz */
    :root:not(.reserva) .folhinha-area{view-timeline-name:--folhinha}
    :root:not(.reserva) .folha-velha{display:block;opacity:0;animation:virar-folha linear both;animation-timeline:--folhinha;animation-range:cover 30% cover 52%}
    @keyframes virar-folha{0%{opacity:1;transform:rotateX(0deg)}55%{opacity:1}100%{opacity:0;transform:rotateX(118deg) translateY(-6px)}}
    :root:not(.reserva) .folha-velha::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom,rgba(18,48,57,0),rgba(18,48,57,.32));opacity:0;animation:sombra-folha linear both;animation-timeline:--folhinha;animation-range:cover 30% cover 52%}
    :root:not(.reserva) .folha::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(to bottom,rgba(18,48,57,.24),rgba(18,48,57,0) 45%);opacity:0;animation:sombra-folha linear both;animation-timeline:--folhinha;animation-range:cover 32% cover 54%}
    @keyframes sombra-folha{0%{opacity:0}45%{opacity:1}100%{opacity:0}}
    :root:not(.reserva) .data-dia{background-size:100% 260%;animation:reluzir linear both;animation-timeline:--folhinha;animation-range:cover 40% cover 80%}

    /* o fechamento, depois que a folha vira: a frase aparece grande, a luz do amanhecer cresce atrás dela com a
       poeira de luz, a fileira de bolinhas se completa (a última dourada) e depois vêm a linha e o botão, com o brilho */
    :root:not(.reserva) .data{timeline-scope:--folhinha}
    :root:not(.reserva) .fecho-frase{animation:surgir-fecho linear both;animation-timeline:--folhinha;animation-range:cover 50% cover 62%}
    @keyframes surgir-fecho{from{opacity:0;transform:scale(.92)}}
    :root:not(.reserva) .fecho-luz{animation:crescer-luz linear both;animation-timeline:--folhinha;animation-range:cover 48% cover 70%}
    @keyframes crescer-luz{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}}
    :root:not(.reserva) .fecho-poeira{animation:aparecer-so linear both;animation-timeline:--folhinha;animation-range:cover 52% cover 66%}
    :root:not(.reserva) .fecho-bolinhas::before{animation:encher-bolinhas linear both;animation-timeline:--folhinha;animation-range:cover 58% cover 66%}
    @keyframes encher-bolinhas{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
    :root:not(.reserva) .fecho-bolinhas::after{animation:acender-ultima linear both;animation-timeline:--folhinha;animation-range:cover 66% cover 69%}
    @keyframes acender-ultima{from{opacity:0;transform:scale(.3)}}
    :root:not(.reserva) .data-convite .convite-frase{animation:surgir-pouco linear both;animation-timeline:--folhinha;animation-range:cover 62% cover 72%}
    @keyframes surgir-pouco{from{opacity:0;transform:translateY(16px)}}
    /* o botão só aparece (sem subir), para o "levantar" do mouse continuar funcionando */
    :root:not(.reserva) .data-convite .botao{animation:aparecer-so linear both;animation-timeline:--folhinha;animation-range:cover 66% cover 76%}
    @keyframes aparecer-so{from{opacity:0}}
    :root:not(.reserva) .data-convite .brilho::after{animation:brilhar-uma linear both;animation-timeline:--folhinha;animation-range:cover 76% cover 88%}
    @keyframes brilhar-uma{from{transform:translateX(-160%) skewX(-20deg)}to{transform:translateX(345%) skewX(-20deg)}}

    /* os três jeitos entram um de cada vez, da esquerda (a lista inteira não sobe junto) */
    :root:not(.reserva) .jeitos.revelar{animation:none}
    :root:not(.reserva) .jeitos li{animation:entrar-lado linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
    :root:not(.reserva) .jeitos li:nth-child(2){animation-range:entry 30% cover 36%}
    :root:not(.reserva) .jeitos li:nth-child(3){animation-range:entry 50% cover 42%}

    /* a frase da Thayna: o começo acende como as outras linhas (.acende); a parte entre aspas aparece palavra por
       palavra e termina com um brilho suave atrás dela */
    :root:not(.reserva) .frase-thayna{view-timeline-name:--thayna}
    :root:not(.reserva) .frase-thayna .fala.destaque{animation:none}
    :root:not(.reserva) .citacao .q{display:inline-block;animation:palavra-citacao linear both;animation-timeline:--thayna}
    :root:not(.reserva) .citacao .q:nth-child(1){animation-range:cover 40% cover 45%}
    :root:not(.reserva) .citacao .q:nth-child(2){animation-range:cover 42.5% cover 47.5%}
    :root:not(.reserva) .citacao .q:nth-child(3){animation-range:cover 45% cover 50%}
    :root:not(.reserva) .citacao .q:nth-child(4){animation-range:cover 47.5% cover 52.5%}
    :root:not(.reserva) .citacao .q:nth-child(5){animation-range:cover 50% cover 55%}
    :root:not(.reserva) .citacao .q:nth-child(6){animation-range:cover 52.5% cover 57.5%}
    :root:not(.reserva) .citacao .q:nth-child(7){animation-range:cover 55% cover 60%}
    @keyframes palavra-citacao{from{opacity:0;transform:translateY(.35em)}}
    :root:not(.reserva) .citacao-linha::before{animation:brilho-citacao linear both;animation-timeline:--thayna;animation-range:cover 56% cover 66%}
    @keyframes brilho-citacao{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}}

    /* oferta: um filete dourado curto se desenha embaixo do rótulo de cada grupo, e os cartões entram em sequência */
    :root:not(.reserva) .grupo-rotulo{view-timeline-name:--rotulo}
    :root:not(.reserva) .grupo-rotulo::after{animation:abrir-esquerda linear both;animation-timeline:--rotulo;animation-range:entry 60% cover 30%}
    @keyframes abrir-esquerda{from{transform:scaleX(0)}}
    :root:not(.reserva) .itens li{animation:entrar-lado linear both;animation-timeline:view();animation-range:entry 10% cover 28%}
    :root:not(.reserva) .itens li:nth-child(2){animation-range:entry 25% cover 33%}
    :root:not(.reserva) .itens li:nth-child(3){animation-range:entry 40% cover 38%}

  }

  /* ---------- 3. reserva: navegador sem os efeitos de rolagem ---------- */
  /* blocos, visuais e aberturas aparecem pelo tempo quando entram na tela (o programa marca .visto) */
  .reserva :is(.bloco,.revelar){transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
  .reserva :is(.bloco,.revelar):not(.visto){opacity:0;transform:translateY(36px)}
  .reserva .parte-num text{stroke-dasharray:900;transition:stroke-dashoffset 1.6s ease .15s,fill-opacity .6s ease 1.3s}
  .reserva .abertura:not(.visto) .parte-num text{stroke-dashoffset:900;fill-opacity:0}
  .reserva .ab-titulo .p{display:inline-block;transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),filter .7s ease}
  .reserva .ab-titulo .p:nth-child(1){transition-delay:0.45s}
  .reserva .ab-titulo .p:nth-child(2){transition-delay:0.52s}
  .reserva .ab-titulo .p:nth-child(3){transition-delay:0.59s}
  .reserva .ab-titulo .p:nth-child(4){transition-delay:0.66s}
  .reserva .ab-titulo .p:nth-child(5){transition-delay:0.73s}
  .reserva .ab-titulo .p:nth-child(6){transition-delay:0.80s}
  .reserva .ab-titulo .p:nth-child(7){transition-delay:0.87s}
  .reserva .ab-titulo .p:nth-child(8){transition-delay:0.94s}
  .reserva .ab-titulo .p:nth-child(9){transition-delay:1.01s}
  .reserva .ab-titulo .p:nth-child(10){transition-delay:1.08s}
  .reserva .ab-titulo .p:nth-child(11){transition-delay:1.15s}
  .reserva .ab-titulo .p:nth-child(12){transition-delay:1.22s}
  .reserva .ab-titulo .p:nth-child(13){transition-delay:1.29s}
  .reserva .abertura:not(.visto) .ab-titulo .p{opacity:0;transform:translateY(.55em) rotate(2deg);filter:blur(5px)}
  .reserva .abertura .filete{transition:transform .9s cubic-bezier(.2,.7,.2,1) 1s}
  .reserva .abertura:not(.visto) .filete{transform:scaleX(0)}
  .reserva .abertura::before{transition:opacity 1.2s ease .2s,transform 1.4s ease .2s}
  .reserva .abertura:not(.visto)::before{opacity:0;transform:translateX(-50%) scale(.6)}
  /* capítulo IV: o celular aparece e assenta, e as três telas passam pelo tempo
     (o programa marca .visto quando ele entra na tela e .passando quando mais da metade está à vista) */
  .reserva .celular-palco .celular{transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
  .reserva .celular-area:not(.visto) .celular{opacity:0;transform:rotateX(20deg) translateY(40px) scale(.94)}
  .reserva .celular-area:not(.passando) .t2,
  .reserva .celular-area:not(.passando) .t3,
  .reserva .celular-area:not(.passando) .passo-num::before{opacity:0}
  .reserva .celular-area.passando .s1 .passo-num::before{animation:acender-reserva .5s ease .3s both}
  .reserva .celular-area.passando .t2,
  .reserva .celular-area.passando .s2 .passo-num::before{animation:acender-reserva .7s ease 2.3s both}
  .reserva .celular-area.passando .t3,
  .reserva .celular-area.passando .s3 .passo-num::before{animation:acender-reserva .7s ease 4.3s both}
  @keyframes acender-reserva{from{opacity:0}}
  /* capítulo I na reserva: a Bíblia aberta chega mais perto e a luz passa uma vez, pelo tempo */
  .reserva .foto-leitura.visto img{animation:aproximar-reserva 6s cubic-bezier(.2,.7,.2,1) both}
  .reserva .foto-leitura.visto::before{animation:luz-reserva 2.2s ease .5s both}
  @keyframes aproximar-reserva{from{transform:scale(1.14)}}
  @keyframes luz-reserva{0%{opacity:0;transform:translateX(-110%)}12%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translateX(175%)}}
}

/* ---------- o kit (mockup do que vem na turma), pedido do Tito em 10/11 ----------
   no topo, logo embaixo do botão (a opção 3 das três ideias), e na oferta, no lugar da foto.
   A imagem tem fundo transparente: a sombra é dela e do filtro, sem caixa em volta */
.kit{display:block;pointer-events:none}
.kit img{display:block;width:100%;height:auto}
.topo-texto .kit-vitrine{position:relative;width:min(100%,520px);margin:30px auto 0;filter:drop-shadow(0 18px 30px rgba(2,10,13,.6))}
.topo-texto .kit-vitrine::before{content:'';position:absolute;left:8%;right:8%;bottom:-4%;height:36%;z-index:-1;background:radial-gradient(closest-side,rgba(240,196,110,.28),rgba(240,196,110,0))}
.kit-oferta{max-width:720px;background:none;box-shadow:none;overflow:visible;border-radius:0}
.kit-oferta::after{display:none}
.kit-oferta img{filter:drop-shadow(0 22px 30px rgba(27,61,72,.16))}
@media (min-width:1024px){
  .topo-grade{padding-top:64px}
  .topo-texto .kit-vitrine{width:min(100%,380px);margin:22px 0 0}
}
@media (prefers-reduced-motion:no-preference){
  .topo-texto > .kit-vitrine{animation-delay:.45s}
}