/* ===========================================================================
   Levada Andaraí 2026 — estilo do site
   Tudo aqui vem da Prancha de Estilo aprovada (paleta, letras, molde de texto, medidas).
   Celular primeiro; ajustes de computador no fim.
   Classes na <html> (colocadas por um script pequeno no <head>, antes da primeira pintura):
     .js        o JavaScript está ligado
     .mov       a pessoa NÃO pediu "menos movimento" (topo preso à foto, logo que encolhe)
     .tl-anim   a linha do tempo anda para o lado (sem "menos movimento" e em tela com 480 px de altura ou mais)
   =========================================================================== */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800 900; font-display: swap;
  src: url(fonts/archivo-latin.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 900; font-display: swap;
  src: url(fonts/archivo-italico-latin.woff2) format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url(fonts/mulish-latin-variavel.woff2) format("woff2"); }
/* Knewave (Google Fonts, só o peso 400 e só o latim, ~17 KB): pincel grosso e inclinado, o mais parecido com o "2026" da logo. Usada só na frase em destaque da tela 1. */
@font-face { font-family: "Knewave"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/knewave-latin.woff2) format("woff2"); }

:root {
  --dif-barra: 0px;                    /* diferença entre a altura grande (lvh) e a pequena (svh) da tela: a barra do navegador do celular */
  --x-traco: 109px;                    /* espaço do traço tracejado da banda até o "A BANDA DE 2026"; é o mesmo valor usado na saída da tela "hora e lugar" (script.js lê esta variável) */
  --fundo: #161810; --superficie: #23261A; --texto: #E6E2C3; --texto-2: #C0C090; --marca: #8E8E5A;
  --ouro: #E8B923; --ouro-claro: #F6E7A8; --borda: #6A6E48; --brasa: #D9542B;
  --zap: #17803F;                      /* verde do WhatsApp, escurecido para o texto branco passar de 4,5:1 */
  --titulo: "Archivo", "Archivo Black", Impact, "Arial Black", sans-serif;
  --corpo: "Mulish", "Segoe UI", system-ui, sans-serif;
  --raio: 12px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; background: var(--fundo); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--fundo); color: var(--texto); font-family: var(--corpo); line-height: 1.5; overflow-x: clip; }
img { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ouro-claro); outline-offset: 3px; }
.pular { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--ouro); color: #161810; padding: 12px 16px; border-radius: 8px; font-weight: 800; }
.pular:focus { top: 8px; }

/* ---------- logo (A): grande na capa, encolhe num movimento só e para no centro do topo ---------- */
.logo { position: absolute; z-index: 25; left: 50%; top: 52px; width: 156px; height: 156px; margin-left: -78px; display: block; }
.logo img { width: 100%; height: 100%; display: block; }
.js .logo { position: fixed; left: 0; top: 0; width: 200px; height: 200px; margin: 0; transform-origin: 0 0; will-change: transform;   /* base de 200 px (o tamanho grande máximo): a imagem nunca é desenhada maior que isso */
  transform: translate(calc(50vw - 86px), calc(env(safe-area-inset-top, 0px) + 36px)) scale(.86); }
.js:not(.mov) .logo { transform: translate(calc(50vw - 32px), calc(env(safe-area-inset-top, 0px) + 24px)) scale(.32); }
.barra-topo { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: calc(128px + env(safe-area-inset-top, 0px)); pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,24,16,.92), rgba(22,24,16,0)); display: none; }
.js .barra-topo { display: block; }

/* ---------- botões ---------- */
.botao { display: flex; align-items: center; justify-content: center; height: 52px; width: 100%; max-width: 335px; margin: 0 auto;
  border-radius: 999px; background: var(--ouro); color: #161810; font: 800 16px/1 var(--corpo); text-decoration: none; border: 0; cursor: pointer; }
.botao--c { background: transparent; color: var(--texto); border: 1.5px solid var(--marca); }
.botao--w { background: var(--zap); color: #fff; }
.botao[aria-disabled="true"] { background: #3a3d2a; color: var(--texto); cursor: not-allowed; }
.bloco .botao { margin-top: 20px; }
.barra-baixo { position: fixed; z-index: 26; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(22,24,16,.95) 55%, rgba(22,24,16,0)); transform: translateY(110%); visibility: hidden;
  transition: transform .3s ease, visibility 0s .3s; pointer-events: none; }
.barra-baixo.visivel { transform: none; visibility: visible; transition: transform .3s ease; }
.barra-baixo .botao { pointer-events: auto; }

/* ---------- molde de texto: título → subtítulo → caixinha → botão ---------- */
.etiqueta { display: inline-block; font: 700 11px/1 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2);
  border: 1px solid var(--borda); border-radius: 999px; padding: 7px 12px; margin-bottom: 12px; }
.t { font-family: var(--titulo); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: .98; color: var(--texto);
  font-size: clamp(30px, 9.2vw, 40px); text-wrap: balance; }
.t--topo { font-size: clamp(36px, 11.6vw, 52px); }
.t--s { font-size: clamp(30px, 9.2vw, 40px); }
/* "30 de dezembro" cabe numa linha só (9,4 vezes o tamanho da letra) na largura do bloco, de 320 a 430 px */
#p2 .t { font-size: min(clamp(30px, 9.2vw, 40px), calc(min(100vw - 40px, 335px) / 9.5)); }
.t em { font-style: italic; }
.t .brilho { background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 14px rgba(232,185,35,.42); }   /* brilho por text-shadow (um passo só de desenho), em vez de filter: drop-shadow, que o Safari refaz a cada passo */
.sub { font: 700 clamp(17px, 5.1vw, 21px)/1.25 var(--corpo); color: var(--texto-2); margin-top: 8px; text-wrap: balance; }
.sub span { white-space: nowrap; }
.caixinha { margin-top: 12px; padding: 14px 16px; background: rgba(35,38,26,.72); border: 1px solid var(--borda); border-radius: var(--raio);
  font: 400 clamp(15px, 4.3vw, 17px)/1.5 var(--corpo); color: var(--texto); text-wrap: balance; }
.caixinha small { display: block; margin-top: 6px; font-size: 13px; color: var(--texto-2); }
.caixinha .rot { display: block; margin-bottom: 4px; font: 800 12px/1.2 var(--corpo); letter-spacing: .1em; text-transform: uppercase; color: var(--ouro); }
.nb { white-space: nowrap; }
/* frase em destaque da tela 1: fonte Knewave (a mais parecida com o "2026" da logo) com o gradiente Ouro e o brilho de "história".
   O tamanho acompanha a largura da tela (360 px: ~21 px; 430 px ou mais: 25 px) para ficar sempre em duas linhas. */
.destaque-frase { display: block; margin-top: 6px; font: 400 clamp(19px, 5.9vw, 25px)/1.18 "Knewave", "Segoe Print", "Comic Sans MS", cursive; letter-spacing: .01em;
  background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: opacity .25s ease; }
.destaque-frase span { text-shadow: 0 0 10px rgba(232,185,35,.42); }
/* duas linhas FIXAS no celular (uma frase por linha, sem quebra automática): a altura da frase não depende da fonte que estiver na tela, então a fonte Knewave
   chegando depois (Safari do iPhone) não muda o tamanho da caixinha nem desloca nada. No computador a frase fica numa linha só. */
.destaque-frase span { display: block; white-space: nowrap; }
@media (min-width: 760px) { .destaque-frase span { display: inline; } }
/* a frase só aparece quando a fonte Knewave está pronta (o script.js liga a classe "fonte"; sem JavaScript ela aparece sempre) */
.js:not(.fonte) .destaque-frase { opacity: 0; }
.destaque { display: block; margin-top: 8px; font: 900 17px/1.2 var(--titulo); text-transform: uppercase; color: var(--ouro); }

/* ---------- 1. topo: foto + 3 telas ---------- */
.zona { position: relative; }
.palco { position: relative; overflow: hidden; }
.foto { position: absolute; inset: 0; }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block; }
/* véu escuro: camada PRÓPRIA (gradiente pronto, sem filtro) que só muda a opacidade: fica nas telas 1 a 3 e some no fim da tela 3, deixando a foto clara */
.veu { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(22,24,16,.72), rgba(22,24,16,.5) 38%, rgba(22,24,16,.66) 58%, rgba(22,24,16,.9)); will-change: opacity; }
.saida { display: none; }   /* não é mais usada (a banda sobe por cima da foto como cortina): menos uma camada de tela cheia */
.painel { position: relative; display: flex; align-items: center; justify-content: center; padding: 56px 20px; text-align: center; min-height: 70svh; }
.painel .bloco { margin: 0 auto; max-width: 335px; }
html:not(.js) #p1 { padding-top: 232px; }
.js:not(.mov) #p1 { padding-top: 130px; }
.linha-dia { display: none; }
/* modo animado: foto presa à tela, textos trocam a cada rolada */
/* a banda começa a subir por cima do fim da primeira parte (--entra é medida pelo script, em px): o texto da tela 3 não fica sozinho sobre o fundo */
.mov .corda { margin-top: calc(-1 * var(--entra, 30svh)); position: relative; z-index: 3; }
.mov #banda { position: relative; z-index: 2; background: var(--fundo); }   /* fundo escuro chapado (sem degradê) */
.mov .zona { height: calc(100vh + var(--rolagem, 142svh)); height: calc(100lvh + var(--rolagem, 142svh)); }   /* palco + rolagem das 3 telas; --rolagem (px) é calculada uma vez pelo script.js a partir da altura real dos textos */
/* O palco (foto de fundo) tem a altura GRANDE da tela (lvh): quando a barra do Safari some, a foto já cobre a tela toda, sem faixa escura embaixo nem salto. O texto continua centrado
   na altura PEQUENA (svh), por isso o padding de baixo ganha a diferença (--dif-barra). */
.mov .palco { position: sticky; top: 0; height: 100vh; height: 100lvh; }
/* foto de fundo: camada própria com zoom que ABRE (de 1,14 até 1,00 no fim da tela 3; só transform: scale, sem deslize). A origem do zoom é o centro da cena (público e trio). */
.mov .foto { inset: 0; transform: scale(1.14); transform-origin: var(--zoom-origem, 50% 44%); will-change: transform; }
.mov .painel { position: absolute; inset: 0; min-height: 0; padding: calc(124px + env(safe-area-inset-top, 0px)) 20px calc(100px + env(safe-area-inset-bottom, 0px) + var(--dif-barra)); pointer-events: none; }
/* troca com fade: cada tela é um bloco completo (título, subtítulo e caixinha, uma unidade só) que faz fade in e fade out inteiro; só opacity e transform (script.js).
   A camada é o bloco (pequena), não a tela inteira. No começo só a tela 1 aparece. */
.mov .painel .bloco { opacity: 0; will-change: opacity, transform; }
.mov #p1 .bloco { opacity: 1; }
.mov .linha-dia { display: block; position: absolute; left: 20px; right: 20px; bottom: calc(28px + env(safe-area-inset-bottom, 0px) + var(--dif-barra)); height: 3px;
  background: rgba(230,226,195,.2); border-radius: 3px; overflow: hidden; }
.linha-dia i { display: block; height: 100%; width: 100%; background: var(--ouro); transform-origin: 0 0; transform: scaleX(.25); }
/* Indicadores de rolagem. Tudo muda só por transform e opacity (camadas próprias, sem recalcular estilo a cada quadro). */
.rolar, .progtopo, .etapas { display: none; }
/* aviso "Role para baixo": fica no centro do espaço entre a caixinha da tela 1 e a barra de baixo (o script.js mede a posição, --av é a escala quando o espaço é pequeno).
   Esmaece e desce um pouco nos primeiros ~120 px de rolagem e volta quando a rolagem volta ao início (não some para sempre). */
.js .rolar { --av: 1; display: flex; flex-direction: column; align-items: center; gap: calc(3px * var(--av)); position: fixed; z-index: 24; left: 0; right: 0;
  bottom: calc(60px + env(safe-area-inset-bottom, 0px)); pointer-events: none; color: var(--ouro); will-change: transform, opacity; }
.rolar span { font: 800 calc(16px * var(--av))/1 var(--corpo); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 10px rgba(232,185,35,.5); }
.rolar svg { display: block; width: calc(34px * var(--av)); height: calc(34px * var(--av)); will-change: transform, opacity; animation: rolar-seta 2.6s ease-in-out infinite; }
.rolar.oculto svg { animation: none; }
@keyframes rolar-seta { 0%, 100% { transform: translate3d(0, -4px, 0); } 50% { transform: translate3d(0, 7px, 0); } }
/* barra de progresso no topo (4 px, Ouro velho, leve brilho), abaixo da área segura do aparelho */
.js .progtopo { display: block; position: fixed; z-index: 30; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 4px; pointer-events: none; background: rgba(192,192,144,.14); }
.progtopo i { display: block; width: 100%; height: 100%; background: var(--texto-2); box-shadow: 0 0 8px 1px rgba(192,192,144,.55);
  transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
/* pontinhos das 3 primeiras telas: lado direito, na altura do meio da tela */
.mov .etapas { display: flex; flex-direction: column; gap: 12px; position: fixed; z-index: 24; right: calc(8px + env(safe-area-inset-right, 0px)); top: 50%;
  margin-top: -26px; pointer-events: none; transition: opacity .45s ease; }   /* 3 pontos de 9 px com 12 px de vão = 51 px de altura: o centro cai no meio da tela */
.etapas i { position: relative; display: block; width: 9px; height: 9px; border-radius: 50%; background: rgba(192,192,144,.38); }
.etapas i::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: var(--ouro); opacity: 0; transition: opacity .3s ease; }
.etapas i.on::after { opacity: 1; }
.etapas.fim { opacity: 0; }
/* caixinha das 3 telas do topo: fundo mais firme (menos "fantasma" na troca de texto) */
.painel .caixinha { background: rgba(35,38,26,.9); }
/* entrada do título: cada palavra sobe e aparece (só com JavaScript e sem "menos movimento") */
.anim .palavra { display: inline-block; opacity: 0; transform: translateY(18px); }
.anim.entra .palavra { animation: sobe .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 90ms); }
@keyframes sobe { to { opacity: 1; transform: none; } }
.linha-info { display: block; font: 800 20px/1.2 var(--corpo); color: var(--texto); }
.linha-info b { display: block; margin-bottom: 2px; font: 700 11px/1 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.caixinha--local { display: grid; gap: 10px; text-align: center; }
/* texto centrado na caixinha também a olho: o espaço medido na imagem (do cartão até a tinta do texto) em cima e embaixo fica igual (±2 px).
   As letras com descendentes e o rótulo pequeno fazem o texto parecer mais alto ou mais baixo, então o padding compensa (medido em 360 a 430 px de largura). */
#p1 .caixinha, #p2 .caixinha { padding: 12px 16px 16px; }
#p3 .caixinha { padding: 15.5px 16px 12.5px; }
@media (min-width: 760px) { #p1 .caixinha { padding: 11px 16px 17px; } #p3 .caixinha { padding: 15px 16px 13px; } }   /* no computador a letra é maior: a compensação muda um pouco */

/* ---------- corda e seções ---------- */
.corda { height: 9px; background: repeating-linear-gradient(135deg, var(--ouro) 0 10px, var(--fundo) 10px 20px); }
.sec { padding: 48px 20px; text-align: center; background: var(--fundo); scroll-margin-top: 56px; }
.sec--alt { background: var(--superficie); }
.sec .bloco { max-width: 335px; margin: 0 auto; }
#camisa, #garantir, #info, #duvidas, #historia { scroll-margin-top: 56px; }
/* a logo pequena (64 px, fixa no topo) tem o espaço reservado no começo da banda: o conteúdo começa logo abaixo dela */
.js #banda { padding-top: calc(env(safe-area-inset-top, 0px) + var(--x-traco) - 1px); }   /* -1 px: a etiqueta tem 1 px de folga de linha; assim o traço fica a X px dela */

/* ---------- 2. banda ---------- */
.banda-card { position: relative; margin: 16px auto 0; width: 100%; max-width: 335px; aspect-ratio: 4 / 5; border-radius: var(--raio); overflow: hidden; background: #3b3d2c; }
.banda-card img.cantor { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.banda-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(22,24,16,.96) 6%, rgba(22,24,16,.4) 42%, rgba(60,64,36,.28)); }
.banda-card img.lf { position: absolute; z-index: 2; left: 15%; width: 70%; height: auto; bottom: 22px; }

/* ---------- 4. história em bandas (linha do tempo) ----------
   Sem JavaScript, com "menos movimento" ou em tela baixa: lista vertical (plano B). */
.tl { background: var(--fundo); padding: 48px 20px 8px; }
.tl__palco { text-align: center; }
.tl__intro .bloco { max-width: 335px; margin: 0 auto 8px; }
.tl__pular { display: inline-block; margin-top: 10px; padding: 14px 4px; font: 700 13px/1 var(--corpo); color: var(--texto-2); text-decoration: underline; text-underline-offset: 3px; }
.tl__linha { display: none; }
.tl__lista { list-style: none; position: relative; margin: 20px auto 0; max-width: 335px; padding-left: 22px; text-align: left; display: grid; gap: 14px; border-left: 2px solid var(--ouro); }
.tl__cartao { position: relative; display: flex; align-items: baseline; gap: 14px; }
.tl__cartao::before { content: ""; position: absolute; left: -29px; top: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--ouro); }
.tl__ano { font: 900 34px/1 var(--titulo); letter-spacing: -.01em; color: var(--texto); min-width: 84px; }
.tl__banda { font: 700 19px/1.2 var(--corpo); color: var(--texto-2); }
.tl__cartao--fim .tl__ano { font-size: 44px; background: linear-gradient(90deg, var(--ouro), var(--ouro-claro)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 12px rgba(232,185,35,.45)); }
.tl__cartao--fim .tl__banda { color: var(--texto); font-size: 22px; font-weight: 800; }
.tl__fio { display: none; }
/* modo animado: janela presa (sticky) e faixa que anda para o lado */
.tl-anim .tl { padding: 0; height: var(--tl-altura, 300svh); }
.tl-anim .tl__palco { position: sticky; top: 0; height: var(--janela, 100svh); overflow: hidden; text-align: left; }
.tl-anim .tl__pular { position: absolute; z-index: 5; top: calc(112px + env(safe-area-inset-top, 0px)); right: 16px; margin: 0; }
.tl-anim .tl__faixa { position: absolute; left: 0; top: 0; height: 100%; width: var(--wf); will-change: transform; }
.tl-anim .tl__intro { position: absolute; left: calc(var(--pw) * .08); top: calc(50% - 36px); width: calc(var(--pw) * .72); transform: translateY(-100%); text-align: center; }
.tl-anim .tl__intro .bloco { margin: 0; max-width: none; }
.tl-anim .tl__linha { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgba(192,192,144,.28); }
.tl-anim .tl__linha i { position: absolute; inset: 0; background: var(--ouro); transform-origin: 0 50%; transform: scaleX(0); }
.tl-anim .tl__lista { position: static; margin: 0; padding: 0; max-width: none; display: block; border: 0; }
.tl-anim .tl__cartao { position: absolute; display: block; left: calc(var(--intro) + var(--i) * var(--passo)); width: calc(var(--pw) * .56); padding: 0 0 0 10px;
  --v: 0; opacity: calc(.15 + .85 * var(--v)); transform: translateY(calc((1 - var(--v)) * 16px * var(--dir, 1))); }
.tl-anim .tl__cartao:nth-child(even) { --dir: -1; bottom: calc(50% + 30px); }
.tl-anim .tl__cartao:nth-child(odd) { --dir: 1; top: calc(50% + 30px); }
.tl-anim .tl__cartao::before { left: -5px; top: auto; bottom: -34px; width: 10px; height: 10px; transform: scale(var(--v)); }
.tl-anim .tl__cartao:nth-child(odd)::before { bottom: auto; top: -34px; }
.tl-anim .tl__cartao::after { content: ""; position: absolute; left: -1px; width: 2px; background: var(--ouro); height: 30px; transform: scaleY(var(--v)); }
.tl-anim .tl__cartao:nth-child(even)::after { bottom: -30px; transform-origin: 50% 100%; }
.tl-anim .tl__cartao:nth-child(odd)::after { top: -30px; transform-origin: 50% 0; }
.tl-anim .tl__ano { display: block; font-size: clamp(40px, calc(var(--pw) * .15), 64px); min-width: 0; }
.tl-anim .tl__banda { display: block; margin-top: 4px; font-size: 21px; }
/* o último cartão (2026) fica embaixo da linha e a haste dourada desce até a camisa */
.tl-anim .tl__cartao.tl__cartao--fim { width: calc(var(--pw) * .8); top: calc(50% + 30px); bottom: auto; --dir: 1; }
.tl-anim .tl__cartao.tl__cartao--fim::before { bottom: auto; top: -34px; }
.tl-anim .tl__cartao.tl__cartao--fim::after { top: -30px; bottom: auto; height: calc(var(--janela, 100svh) / 2 + 30px); transform-origin: 50% 0; }
.tl-anim .tl__cartao--fim .tl__ano { font-size: clamp(56px, calc(var(--pw) * .2), 84px); }
.tl-anim .tl ~ .tl__fio { display: block; }
.tl__fio { height: 56px; width: 2px; background: var(--ouro); margin-left: calc(var(--pw, 355px) * .1 - 1px); }

/* ---------- 5. camisa: o componente tem o próprio CSS em componentes/camisa.css ---------- */

/* ---------- 7. como garantir, 8. informações, 9. dúvidas ---------- */
.jeitos { display: grid; gap: 16px; margin-top: 20px; }
.jeito { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 18px 16px; }
.sec--alt .jeito { background: var(--fundo); }
.jeito .ic { width: 40px; height: 40px; margin: 0 auto 8px; border: 1.5px solid var(--ouro); border-radius: 50%; display: grid; place-items: center; font: 800 16px/1 var(--corpo); color: var(--ouro); }
.jeito h3 { font: 900 20px/1.1 var(--titulo); text-transform: uppercase; }
.jeito .jsub { margin-top: 4px; font: 700 15px/1.3 var(--corpo); color: var(--texto-2); }
.passos { list-style: none; counter-reset: p; text-align: left; margin-top: 12px; display: grid; gap: 8px; }
.passos li, .jeito .jsub, .duvida p, .duvida summary, .peq { text-wrap: pretty; }
.passos li { counter-increment: p; position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.4; }
.passos li::before { content: counter(p); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--ouro); color: #161810; font: 800 12px/22px var(--corpo); text-align: center; }
.jeito .peq { margin-top: 10px; font-size: 13px; color: var(--texto-2); }
.jeito .botao { margin-top: 14px; height: 48px; font-size: 15px; }
.peq a, .caixinha a, .duvida a { color: var(--ouro-claro); text-underline-offset: 3px; }
.meses { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.js .painel-mes__titulo { display: none; }
.painel-mes__titulo { margin-top: 22px; font: 900 18px/1.1 var(--titulo); text-transform: uppercase; color: var(--ouro); }
.mes { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--borda); background: transparent; color: var(--texto); font: 700 14px/38px var(--corpo); cursor: pointer; }
.mes[aria-selected="true"] { background: var(--ouro); color: #161810; border-color: var(--ouro); }
html:not(.js) .meses { display: none; }
.aviso-carne { margin-top: 14px; font-size: 14px; color: var(--texto-2); }
.aviso { margin: 18px auto 0; max-width: 335px; padding: 14px 16px; text-align: left; background: rgba(35,38,26,.72); border: 1.5px solid var(--ouro); border-radius: var(--raio); }
.aviso__rot { display: block; margin-bottom: 6px; font: 800 12px/1.2 var(--corpo); letter-spacing: .12em; text-transform: uppercase; color: var(--ouro); }
.aviso p { font: 400 clamp(15px, 4.3vw, 16px)/1.45 var(--corpo); color: var(--texto); text-wrap: pretty; }
.aviso p + p { margin-top: 8px; }
.linha-idade { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--texto-2); text-wrap: pretty; }
.linha-idade strong { color: var(--texto); }
.duvidas { margin-top: 14px; }
.duvida { margin-top: 8px; text-align: left; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); }
.duvida summary { list-style: none; min-height: 48px; padding: 13px 16px; font: 700 15px/1.3 var(--corpo); cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.duvida summary::-webkit-details-marker { display: none; }
.duvida summary::after { content: "+"; color: var(--ouro); font-weight: 800; }
.duvida[open] summary::after { content: "–"; }
.duvida p { padding: 0 16px 14px; font-size: 15px; color: var(--texto-2); }
.sec--duvidas .botao { margin-top: 16px; }

/* ---------- 10. mais de 2025 ---------- */
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 18px; }
.grade img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--raio); display: block; background: var(--superficie); }
.legenda-unica { margin-top: 10px; font-size: 14px; color: var(--texto-2); }

/* ---------- 10b. instagram: só um botão ---------- */
.sec--insta { padding: 36px 20px; }
.botao--insta { gap: 12px; height: 64px; font-size: 16px; }
.botao--insta svg { flex: none; }
.botao--insta span { display: grid; gap: 3px; text-align: left; }
.botao--insta b { font: 800 16px/1 var(--corpo); }
.botao--insta small { font: 700 13px/1 var(--corpo); opacity: .8; }

/* ---------- 11. botão final com a logo grande + rodapé ---------- */
.rodape { padding: 48px 20px calc(120px + env(safe-area-inset-bottom, 0px)); text-align: center; background: var(--fundo); }
.rodape .vaga { display: grid; place-items: center; margin-bottom: 20px; }
.rodape .vaga img { width: 190px; height: 190px; }
.rodape .linha-rodape { margin-top: 28px; font-size: 13px; color: var(--texto-2); }
.aviso-noscript { padding: 12px 16px; background: var(--superficie); color: var(--texto); text-align: center; font-size: 14px; }

/* ---------- computador ---------- */
@media (min-width: 760px) {
  .t, .t--s { font-size: clamp(40px, 4.4vw, 56px); }
  .t--topo { font-size: clamp(56px, 6.4vw, 92px); }
  #p2 .t { font-size: clamp(40px, 4.4vw, 56px); }
  .sub { font-size: clamp(20px, 1.9vw, 24px); }
  .caixinha { font-size: 18px; }
  .sec .bloco { max-width: 560px; }
  .painel .bloco { max-width: 760px; }
  .botao { max-width: 360px; }
  .banda-card { max-width: 400px; }
  .sec--jeitos .bloco, .sec--fotos .bloco { max-width: 1080px; }
  .aviso { max-width: 560px; }
  .jeitos { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .grade { grid-template-columns: repeat(4, 1fr); }
  /* primeira tela: o bloco de texto fica no centro (abaixo da logo grande, com folga igual embaixo quando a tela é alta) */
  .mov .painel { --pt: calc(28px + clamp(120px, 22svh, 200px) + 16px); align-items: center; padding: var(--pt) 32px calc(clamp(100px, var(--pt), calc(100svh - var(--pt) - 400px)) + var(--dif-barra)); }
  .js:not(.mov) #p1 { padding-top: 150px; }
  html:not(.js) #p1 { padding-top: 260px; }
  .tl-anim .tl__ano { font-size: clamp(64px, 6vw, 96px); }
  .tl-anim .tl__cartao--fim .tl__ano { font-size: clamp(84px, 8vw, 128px); }
  .tl__intro .bloco { max-width: 560px; }
}
/* computador: a foto nova (topo-pc-1600) já vem recortada com o trio no meio; o véu escurece um pouco mais atrás do bloco de texto */
@media (min-width: 900px) {
  .foto img { object-position: 30% 50%; }
  .mov .foto { --zoom-origem: 28% 48%; }   /* no computador o trio fica à esquerda */
  .veu { background: radial-gradient(ellipse 46% 40% at 50% 54%, rgba(22,24,16,.42), rgba(22,24,16,0) 100%),
    linear-gradient(to bottom, rgba(22,24,16,.7), rgba(22,24,16,.22) 36%, rgba(22,24,16,.3) 62%, rgba(22,24,16,.88)); }
}
@media (max-width: 359px) { .passos li { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .rolar svg { animation: none; will-change: auto; } .rolar, .etapas { transition: none; } .etapas i::after { transition: none; } .anim .palavra { opacity: 1; transform: none; animation: none !important; } .barra-baixo { transition: none; } }

/* Suporte à altura grande da tela (lvh): só então a diferença para a pequena (svh) é usada */
@supports (height: 100lvh) { :root { --dif-barra: calc(100lvh - 100svh); } }

/* ---------- MODO LEVE (aparelho fraco; ligado pelo script.js com a classe "leve") ----------
   Mantém o visual reconhecível e o momento da foto, mas troca os efeitos mais caros por versões simples. */
.leve .brilho, .leve .destaque-frase { background: none; color: var(--ouro); -webkit-text-fill-color: currentColor; text-shadow: none; }
.leve .destaque-frase span { text-shadow: none; }
.leve .destaque-frase { transition: none; }
.leve .rolar span { text-shadow: none; }
.leve .rolar svg { will-change: auto; }
.leve .progtopo i { box-shadow: none; }
.leve .etapas i::after, .leve .etapas, .leve .rolar { transition: none; }
.leve.mov .foto { will-change: transform; }   /* o zoom vale também no modo leve */
.leve .logo { will-change: transform; }
.leve .veu { background: rgba(22,24,16,.6); will-change: auto; }