/* Página da gravação — Papelaria Previsível
   Mesma linguagem do deck de 31/10: branco, tinta, amarelo só como grifo/fundo, papel com grão. */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/plus-jakarta-latin.woff2) format('woff2')}

:root{
  --white:#fff;--ink:#10100e;--gold:#f5c400;--gold-soft:#fff4c2;--paper:#f3f1ea;--grey:#595954;--line:#dbdbd4;
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--ease-out:cubic-bezier(.22,1,.36,1);
  --gutter:16px;--radius:22px;
  --shadow-paper:0 20px 46px -24px #10100e36;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/1.5 var(--font);font-feature-settings:'tnum' 0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
strong,b{font-weight:800}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}

/* ---------- Grifo (marca-texto) ---------- */
.mark{position:relative;display:inline-block;isolation:isolate;white-space:nowrap}
.mark::before{content:'';position:absolute;left:-.035em;right:-.055em;top:48%;bottom:-.025em;z-index:-1;background:var(--gold);
  clip-path:polygon(0 14%,8% 6%,21% 13%,40% 3%,60% 9%,79% 2%,98% 11%,100% 77%,90% 96%,73% 86%,50% 97%,31% 89%,8% 98%,0 88%);
  transform:rotate(-.7deg) scaleX(var(--swipe,1));transform-origin:left center}
.mark::after{content:'';position:absolute;left:0;right:0;top:57%;bottom:0;z-index:-1;opacity:.1;background:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 5px);transform:rotate(-.7deg) scaleX(var(--swipe,1));transform-origin:left center}
/* Grifo que quebra linha, para frases longas no celular */
.grifo{background:linear-gradient(transparent 52%,var(--gold) 52%,var(--gold) 94%,transparent 94%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
@keyframes grifar{from{transform:rotate(-.7deg) scaleX(0)}to{transform:rotate(-.7deg) scaleX(1)}}
.anima-grifo .mark::before,.anima-grifo .mark::after,.anima-grifo.mark::before,.anima-grifo.mark::after{animation:grifar .65s .18s var(--ease-out) both}

.paper{background-color:var(--paper);background-image:url(/assets/svg/paper-grain.svg);border:1px solid #e5e3dc;box-shadow:var(--shadow-paper)}
.kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* ---------- Topo ---------- */
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1240px;margin:0 auto;padding:14px var(--gutter) 0}
.marca{font-weight:800;font-size:20px;letter-spacing:-.04em;text-decoration:none}
.marca i{font-style:normal;color:var(--gold)}
.topo-evento{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);text-align:right}

/* ---------- Abertura ---------- */
.abertura{max-width:1240px;margin:0 auto;padding:18px var(--gutter) 14px}
.abertura h1{font-size:clamp(1.85rem,7.6vw,3.6rem);line-height:1.08;font-weight:800;letter-spacing:-.045em;max-width:16ch;margin-top:8px}
.meses{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-top:16px;max-width:560px}
.meses span{font-size:9px;font-weight:800;letter-spacing:.06em;text-align:center;padding:6px 0 5px;border-radius:4px;background:var(--paper);border:1px solid #e5e3dc;color:var(--grey)}
.meses .temporada{background:#f5c400b0;border-color:transparent;color:var(--ink)}
.meses .outro{opacity:.35}
.meses.acesos .outro{animation:acender .5s var(--ease-out) both;animation-delay:calc(var(--i) * 45ms + .35s)}
@keyframes acender{from{opacity:.35;transform:translateY(3px)}to{opacity:1;transform:none;color:var(--ink)}}
.meses.acesos .outro{color:var(--ink)}
.meses-legenda{font-size:12px;color:var(--grey);margin-top:6px}

/* ---------- Palco: vídeo + cartões ---------- */
.palco{max-width:1240px;margin:0 auto;padding:6px var(--gutter) 120px;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.coluna-video{display:contents}
.video-fixo{position:relative;z-index:30;padding:10px 0 12px;background:var(--white)}
body.tocando .video-fixo{position:sticky;top:0}
.folha{position:relative;padding:8px;border-radius:26px;background:#fff;box-shadow:0 24px 44px -25px #10100e55;outline:1px solid #10100e12;transform:rotate(-.6deg);transition:transform .7s var(--ease)}
.folha.assentar{animation:assentar .9s var(--ease) backwards}
@keyframes assentar{from{transform:translateY(18px) rotate(-2.2deg);opacity:0}to{transform:rotate(-.6deg);opacity:1}}
body.tocando .folha{transform:none}
.clipe{position:absolute;width:26px;height:58px;top:-20px;right:34px;transform:rotate(13deg);filter:drop-shadow(3px 5px 2px #0002);z-index:3;pointer-events:none}
body.tocando .clipe{opacity:0;transition:opacity .4s}

/* ---------- Player ---------- */
/* O vídeo em cima e a barra de controles embaixo, sempre visível (nada cobre o vídeo). */
.player{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#0d0d0b;user-select:none;-webkit-user-select:none}
.tela-video{position:relative;aspect-ratio:var(--proporcao,16/9);background:#0d0d0b;touch-action:manipulation}
.tela-video video{width:100%;height:100%;object-fit:contain;background:#0d0d0b}
.tela-video .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.player.iniciado .poster{display:none}
.play-grande{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 18px 10px 10px;border:3px solid var(--ink);border-radius:999px;background:var(--gold);font-weight:800;font-size:16px;letter-spacing:-.01em;box-shadow:5px 6px 0 var(--ink);transition:transform .25s var(--ease),box-shadow .25s var(--ease);z-index:4;white-space:nowrap}
.play-grande:active{transform:translate(-48%,-48%);box-shadow:2px 3px 0 var(--ink)}
.play-grande .tri{width:32px;height:32px;border-radius:50%;background:var(--ink);display:grid;place-items:center}
.play-grande .tri svg{width:13px;height:13px;fill:var(--gold);margin-left:2px}
.player.iniciado .play-grande{display:none}

.retomar{position:absolute;inset:auto 8px 8px 8px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 10px;border-radius:12px;background:#fffffff2;box-shadow:0 10px 30px -12px #0008;font-size:13px;font-weight:600}
.retomar span{flex:1 1 100%}
.retomar button{border:2px solid var(--ink);border-radius:999px;padding:6px 12px;background:#fff;font-weight:700;font-size:13px}
.retomar button.sim{background:var(--gold)}

.carregando{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:4px solid #ffffff33;border-top-color:var(--gold);animation:girar .8s linear infinite;z-index:3;opacity:0;transition:opacity .2s;pointer-events:none}
.player.esperando .carregando{opacity:1}
@keyframes girar{to{transform:rotate(360deg)}}

.erro-video{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:20px;background:#0d0d0bee;color:#fff;z-index:6;font-weight:600}
.erro-video button{margin-top:10px;border:0;border-radius:999px;padding:9px 16px;background:var(--gold);color:var(--ink);font-weight:800}

/* Barra de controles */
.controles{position:relative;z-index:4;padding:0 6px 2px;background:#10100e;color:#fff}
.linha-botoes{display:flex;align-items:center;gap:2px;min-height:42px;margin-top:-10px}
.linha-botoes .espaco{flex:1}
.ctrl{display:grid;place-items:center;min-width:44px;height:40px;padding:0 6px;border:0;border-radius:10px;background:transparent;color:#fff}
.ctrl svg{width:22px;height:22px;fill:currentColor}
.ctrl:active{background:#ffffff26}
.ctrl.vel{font-weight:800;font-size:14px;min-width:48px}
.tempo{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:#ffffffde;padding:0 4px;white-space:nowrap}
.barra{position:relative;z-index:2;height:24px;display:flex;align-items:center;cursor:pointer;touch-action:none;margin:-4px 12px 0}
.barra .trilho{position:relative;width:100%;height:6px;border-radius:4px;background:#ffffff38}
.barra .buffer,.barra .feito{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:0}
.barra .buffer{background:#ffffff4d}
.barra .feito{background:var(--gold)}
.barra .marca-cap{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#10100e}
.barra .bola{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);border:3px solid #10100e;box-shadow:0 0 0 1px #ffffff55;left:0}
.barra .dica{position:absolute;bottom:26px;transform:translateX(-50%);padding:3px 7px;border-radius:6px;background:var(--gold);color:var(--ink);font-size:12px;font-weight:800;white-space:nowrap;opacity:0;transition:opacity .15s;pointer-events:none}
.barra.arrastando .dica{opacity:1}
.barra.arrastando .bola{transform:scale(1.15)}
@media (hover:hover) and (pointer:fine){
  .ctrl:hover{background:#ffffff1f}
  .barra:hover .dica{opacity:1}
  .barra:hover .trilho{height:7px}
  .play-grande:hover{transform:translate(-50%,-52%);box-shadow:6px 8px 0 var(--ink)}
}
@media (max-width:380px){.tempo-total{display:none}}

/* Aviso dentro do vídeo (só na tela cheia do Android e do computador) */
.aviso-tela{position:absolute;right:12px;top:12px;max-width:min(380px,calc(100% - 24px));z-index:6;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s var(--ease);pointer-events:none;display:none}
.player.tela-cheia .aviso-tela{display:block}
.aviso-tela.ver{opacity:1;transform:none;pointer-events:auto}
.aviso-tela .bilhete{background:var(--paper);background-image:url(/assets/svg/paper-grain.svg);color:var(--ink);border-radius:14px;padding:12px 14px;box-shadow:0 14px 34px -12px #000a}
.aviso-tela .bilhete .kicker{font-size:10px}
.aviso-tela .bilhete strong{display:block;font-size:15px;line-height:1.3;margin-top:3px}
.aviso-tela .opcoes{margin-top:8px}
.aviso-tela .opcao{padding:6px 8px;font-size:13px}
.aviso-tela .opcao b{width:24px;height:24px;font-size:13px}
.player .botao-tela{display:none;position:absolute;left:12px;top:12px;z-index:6;padding:10px 16px;font-size:15px}
.player.tela-cheia.com-cta .botao-tela{display:inline-flex}

/* Tela cheia do elemento (Android e computador): vídeo ocupa o espaço, barra embaixo */
.player:fullscreen{border-radius:0;width:100%;height:100%}
.player:fullscreen .tela-video{flex:1;aspect-ratio:auto;min-height:0}
.player:fullscreen .controles{padding-bottom:max(6px,env(safe-area-inset-bottom))}

/* ---------- Abaixo do vídeo ---------- */
.info{padding:2px 2px 4px}
.validade{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;color:var(--grey);font-weight:500}
.validade strong{color:var(--ink);font-weight:700}
.validade .ponto{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #f5c40040;flex:none}
.validade.hoje .ponto{animation:pulsar-ponto 1.6s ease-in-out infinite}
@keyframes pulsar-ponto{50%{box-shadow:0 0 0 7px #f5c40000}}

/* Presente embrulhado (fixo) */
.presente-faixa{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px 12px;border-radius:16px;background:var(--paper);background-image:url(/assets/svg/paper-grain.svg);border:1px solid #e5e3dc;animation:subir .6s var(--ease) both}
.presente-faixa .caixa{width:40px;height:40px;flex:none}
.presente-faixa p{font-size:14px;line-height:1.3;font-weight:600}
.presente-faixa p span{display:block;font-size:12px;color:var(--grey);font-weight:500}
.presente-faixa .progresso{flex:none;width:56px;height:6px;border-radius:4px;background:#10100e1a;overflow:hidden;margin-left:auto}
.presente-faixa .progresso i{display:block;height:100%;width:0;background:var(--ink);transition:width .6s}
.presente-faixa.abrindo{animation:sumir-faixa .7s var(--ease) both}
@keyframes sumir-faixa{to{opacity:0;transform:translateY(-10px) scale(.96)}}

/* Capítulos */
.capitulos{margin-top:12px}
.capitulos h2{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:8px}
.capitulos ol{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 8px;margin:0 -2px;scroll-snap-type:x proximity}
.capitulos ol::-webkit-scrollbar{display:none}
.capitulos button{scroll-snap-align:start;flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:border-color .2s,background .2s}
.capitulos button span{font-variant-numeric:tabular-nums;color:var(--grey);font-weight:500}
.capitulos button.atual{border-color:var(--ink);background:var(--gold);font-weight:800}
.capitulos button.atual span{color:var(--ink)}

/* ---------- Cartões ---------- */
.feed-area{padding-top:14px}
.feed-cabeca{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.feed-cabeca h2{font-size:clamp(1.3rem,5vw,1.6rem);font-weight:800;letter-spacing:-.035em}
.feed-cabeca span{font-size:12px;color:var(--grey);font-weight:600}
.feed-vazio{padding:18px;border:2px dashed var(--line);border-radius:var(--radius);color:var(--grey);font-size:15px;line-height:1.45}
.feed-vazio strong{color:var(--ink)}
.feed{display:flex;flex-direction:column;gap:16px}

.cartao{position:relative;padding:20px 18px 18px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);transform:rotate(var(--r,0deg));transition:box-shadow .4s,border-color .4s,transform .5s var(--ease)}
.cartao.folha-papel{background-color:var(--paper);background-image:url(/assets/svg/paper-grain.svg);border-color:#e5e3dc}
.cartao.agora{border-color:var(--ink);box-shadow:7px 8px 0 var(--gold);transform:none}
.cartao .selo-agora{display:none;position:absolute;top:-11px;left:16px;padding:3px 9px;border-radius:999px;background:var(--ink);color:#fff;font-size:10px;font-weight:800;letter-spacing:.14em}
.cartao.agora .selo-agora{display:inline-block}
.cartao.entrou{animation:subir .7s var(--ease) backwards}
@keyframes subir{from{opacity:0;transform:translateY(26px) rotate(var(--r,0deg))}to{opacity:1;transform:rotate(var(--r,0deg))}}
.cartao.agora.entrou{animation-name:subir-agora}
@keyframes subir-agora{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.cartao h3{font-size:clamp(1.3rem,5.4vw,1.75rem);line-height:1.15;font-weight:800;letter-spacing:-.035em;margin-top:6px}
.cartao h3+p,.cartao .texto{margin-top:8px;font-size:16px;line-height:1.5;color:#2b2b28}
.cartao p+p{margin-top:8px}
.cartao .apoio{font-size:14px;color:var(--grey)}
.cartao .ao-vivo{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding:8px 10px;border-radius:12px;background:var(--gold-soft);font-size:13px;line-height:1.4;color:var(--ink);font-weight:500}
.cartao .ao-vivo::before{content:'';width:8px;height:8px;margin-top:5px;border-radius:50%;background:#e2342b;flex:none;box-shadow:0 0 0 3px #e2342b26}
[data-sub]{transition:opacity .5s}
[data-sub][hidden]{display:none!important}
.sub-entrou{animation:subir-leve .55s var(--ease) both}
@keyframes subir-leve{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Opções de resposta */
.opcoes{display:grid;gap:8px;margin-top:14px}
.opcoes.duas{grid-template-columns:1fr 1fr}
.opcoes.tres{grid-template-columns:repeat(3,1fr)}
.opcao{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:2px solid var(--line);border-radius:14px;background:#fff;text-align:left;font-weight:600;font-size:15px;line-height:1.25;transition:border-color .2s,background .2s,transform .15s}
.opcao:hover{border-color:#10100e66}
.opcao:active{transform:scale(.98)}
.opcao b{flex:none;display:grid;place-items:center;width:30px;height:30px;background:var(--gold);font-size:15px;transform:rotate(-2deg)}
.opcao.escolhido{border-color:var(--ink);background:var(--gold-soft)}
.opcao.escolhido b{background:var(--ink);color:#fff}
.opcoes.tres .opcao{flex-direction:column;justify-content:center;text-align:center;gap:6px;padding:10px 6px;font-size:13px}
.retorno{margin-top:12px;padding:12px 14px;border-left:5px solid var(--gold);background:#fff;border-radius:0 12px 12px 0;font-size:15px;line-height:1.45;animation:subir-leve .5s var(--ease) both}
.retorno strong{font-weight:800}

.botao-grande{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:3px solid var(--ink);border-radius:16px;background:var(--gold);font-weight:800;font-size:clamp(1.05rem,4.4vw,1.25rem);letter-spacing:-.02em;box-shadow:5px 6px 0 var(--ink);transition:transform .15s,box-shadow .15s;text-decoration:none}
.botao-grande:hover{transform:translate(-1px,-2px);box-shadow:6px 8px 0 var(--ink)}
.botao-grande:active{transform:translate(3px,4px);box-shadow:1px 2px 0 var(--ink)}
.botao-grande.feito{background:#fff}
.eutopo{font-size:clamp(1.6rem,8vw,2.3rem);letter-spacing:-.05em;padding:12px 28px;margin-top:14px}

.campos{display:grid;gap:10px;margin-top:14px}
.campo label{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.campo input{width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:12px;background:#fff;font-size:16px;font-weight:500;transition:border-color .2s}
.campo input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px var(--gold-soft)}
.salvo{font-size:13px;color:var(--grey);margin-top:6px;min-height:1.2em}

/* Linha do tempo da trajetória */
.trajeto{display:grid;gap:12px;margin-top:14px;position:relative}
.trajeto li{display:flex;gap:12px;align-items:center;font-weight:700;font-size:15px;line-height:1.3}
.trajeto li svg{width:52px;height:46px;flex:none;color:var(--ink)}
.trajeto li span{display:block;font-weight:500;color:var(--grey);font-size:13px}
.fotos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.foto{margin:0;border:7px solid #fff;border-radius:20px;overflow:hidden;background:var(--paper);box-shadow:0 18px 34px -22px #10100e66;outline:1px solid #10100e10}
.foto img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.foto:nth-child(1){transform:rotate(-1.4deg)}
.foto:nth-child(2){transform:rotate(1.4deg);margin-top:10px}
.foto.retrato img{aspect-ratio:4/5}
.foto figcaption{font-size:12px;font-weight:700;padding:6px 4px 2px;text-align:center}
.foto-igor{max-width:300px;margin:14px auto 0;transform:rotate(1deg)}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{padding:7px 12px;border-radius:999px;border:2px solid var(--ink);background:#fff;font-weight:800;font-size:14px}
.chips span.on{background:var(--gold)}
.duvidas{margin-top:12px;display:grid;gap:8px}
.duvidas li{padding:10px 12px;border-radius:12px;background:var(--paper);font-size:14px;line-height:1.45}
.duvidas li strong{display:block;font-size:15px}

/* Renova: etiquetas e mochila */
.renova-arte{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:4px;height:230px;margin-top:10px}
.renova-arte .mochila{width:150px;height:198px;filter:drop-shadow(8px 16px 12px #0002)}
.renova-arte .mochila.usada{width:92px;height:122px;transform:rotate(12deg);margin-left:-18px}
.etiqueta{position:absolute;right:calc(50% - 150px);top:2px;width:118px;padding:10px 8px;text-align:center;background:#fff;border:3px solid var(--ink);transform:rotate(9deg);box-shadow:6px 8px 0 var(--paper)}
.etiqueta::before{content:'';position:absolute;left:12px;top:-17px;width:11px;height:30px;border:3px solid #999a91;border-radius:8px}
.etiqueta small{display:block;font-size:10px;font-weight:700;letter-spacing:.14em}
.etiqueta strong{display:block;font-size:44px;line-height:1;letter-spacing:-.06em;margin-top:4px}
.etiqueta-legenda{text-align:center;font-weight:700;margin-top:6px;font-size:15px}
.doacao{position:absolute;left:calc(50% - 168px);top:96px;width:150px;padding:12px 10px;transform:rotate(-5deg);z-index:2;border-radius:2px}
.doacao span{display:block;font-size:15px;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.doacao small{display:block;margin-top:6px;font-size:11px;line-height:1.3}

/* Jornada */
.jtrilho{position:relative;margin:58px 4px 6px;--etapa:-1}
.jtrilho .linha{position:absolute;left:10%;right:10%;top:9px;height:5px;border-radius:4px;background:#d6d7cf}
.jtrilho .linha i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--gold);width:calc(max(var(--etapa),0) * 25%);transition:width 1.1s var(--ease)}
.jtrilho ol{position:relative;display:grid;grid-template-columns:repeat(5,1fr)}
.jtrilho li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:11px;font-weight:600;color:var(--grey);letter-spacing:-.01em}
.jtrilho li .no{width:23px;height:23px;border-radius:50%;background:#fff;border:4px solid #b9bab2;transition:background .4s,border-color .4s}
.jtrilho li.on{color:var(--ink);font-weight:800}
.jtrilho li.on .no{background:var(--gold);border-color:var(--gold)}
.jtrilho li.atual .no{border-color:var(--ink);box-shadow:0 0 0 4px var(--gold-soft)}
.fulana{position:absolute;top:-56px;width:20%;left:calc((max(var(--etapa),0)) * 20%);display:flex;justify-content:center;transition:left 1.2s var(--ease);pointer-events:none}
.fulana svg{width:38px;height:54px}
.jtrilho.andando .fulana svg{animation:passo .3s ease-in-out 4 alternate}
@keyframes passo{from{transform:translateY(0) rotate(-3deg)}to{transform:translateY(-4px) rotate(3deg)}}
.jtrilho[style*="--etapa:-1"] .fulana{left:-6%}
.etapa-topo{display:flex;align-items:center;gap:12px}
.etapa-topo svg{width:58px;height:58px;flex:none}
.etapa-topo .num{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.etapa-topo h3{margin-top:2px}
.blocos{display:grid;gap:10px;margin-top:12px}
.bloco{font-size:15px;line-height:1.45}
.bloco b{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:2px}
.ideias{display:grid;gap:8px;margin-top:4px}
.ideias li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:15px;line-height:1.35}
.ideias li::before{content:'★';flex:none;display:grid;place-items:center;width:22px;height:22px;background:var(--gold);font-size:12px;border-radius:50%}
.semente{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;line-height:1.45}
.semente::before{content:'Semente · ';color:var(--gold);font-weight:800}

/* A conta */
.conta{margin-top:12px;display:grid;gap:0}
.conta li{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:12px;padding:10px 0;border-bottom:2px solid var(--line)}
.conta li strong{font-size:clamp(1.5rem,7vw,2rem);letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:4.4ch}
.conta li span{color:var(--grey);font-size:15px}
.total{margin-top:16px;padding:16px;transform:rotate(-1deg);text-align:center}
.total .grande{display:block;font-size:clamp(2.4rem,12vw,3.4rem);font-weight:800;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums}
.total small{display:block;margin-top:6px;font-size:14px;font-weight:600;color:var(--grey)}
.total .ano{display:block;margin-top:12px;font-size:clamp(1.3rem,6vw,1.7rem);font-weight:800;letter-spacing:-.04em}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.calc label{font-size:13px;font-weight:700}
.calc .ajuste{display:flex;align-items:center;margin-top:4px;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.calc .ajuste button{width:40px;height:44px;border:0;background:var(--paper);font-weight:800;font-size:20px}
.calc .ajuste input{width:100%;min-width:0;border:0;text-align:center;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield;padding:0;height:44px;background:#fff}
.calc .ajuste input::-webkit-inner-spin-button{display:none}
.calc-saida{margin-top:14px;padding:14px;border-radius:16px;background:var(--gold-soft);text-align:center}
.calc-saida strong{display:block;font-size:clamp(1.8rem,9vw,2.4rem);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.calc-saida span{font-size:14px;font-weight:600}
.rotulo-fixo{margin-top:8px;font-size:12px;color:var(--grey);line-height:1.4}

/* Número grande */
.numero{display:block;font-size:clamp(2.6rem,13vw,4rem);font-weight:800;letter-spacing:-.06em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums}
.vinte{margin-top:14px;padding:16px;border-radius:18px;background:var(--gold);border:3px solid var(--ink);box-shadow:6px 7px 0 var(--ink);transform:rotate(-1deg)}
.vinte .numero{margin:0}
.vinte p{font-weight:700;margin-top:4px}
.efeitos{display:grid;gap:8px;margin-top:12px}
.efeitos li{display:flex;gap:10px;font-size:15px;line-height:1.4}
.efeitos li b{flex:none;padding:2px 8px;border-radius:999px;background:var(--paper);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;height:max-content;margin-top:1px}
.metodo{counter-reset:m;display:grid;gap:8px;margin-top:12px}
.metodo li{counter-increment:m;display:flex;gap:10px;align-items:center;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--line);font-weight:700;font-size:16px}
.metodo li::before{content:counter(m);flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);border:2px solid var(--ink);font-weight:800}
.checklist{display:grid;gap:10px;margin-top:12px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-weight:700;font-size:16px;line-height:1.35}
.checklist li::before{content:'';flex:none;width:22px;height:22px;margin-top:1px;border-radius:6px;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%2310100e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transform:rotate(-3deg)}
.sins{display:grid;gap:12px;margin-top:12px}
.sim-nao{padding:12px;border-radius:16px;background:#fff;border:1px solid var(--line)}
.sim-nao p{font-weight:700;font-size:15px;line-height:1.35}
.sim-nao .opcoes{margin-top:10px}

/* Presente */
.presente-arte{position:relative;width:132px;height:120px;margin:6px auto 2px}
.presente-arte .tampa,.presente-arte .caixa-corpo,.presente-arte .fita-v,.presente-arte .laco{position:absolute}
.presente-arte .caixa-corpo{left:12px;right:12px;bottom:0;height:78px;background:var(--paper);background-image:url(/assets/svg/paper-grain.svg);border:3px solid var(--ink);border-radius:6px}
.presente-arte .tampa{left:4px;right:4px;top:22px;height:26px;background:var(--paper);border:3px solid var(--ink);border-radius:6px;z-index:2;transform-origin:20% 100%}
.presente-arte .fita-v{left:calc(50% - 9px);width:18px;top:22px;bottom:0;background:var(--gold);border-left:3px solid var(--ink);border-right:3px solid var(--ink);z-index:3;transform-origin:top}
.presente-arte .laco{left:calc(50% - 30px);top:0;width:60px;height:30px;z-index:4}
.presente-arte .conteudo{position:absolute;left:24px;right:24px;bottom:12px;height:46px;border-radius:4px;background:var(--gold);border:3px solid var(--ink);display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.06em;opacity:0;z-index:1}
.cartao.entrou .presente-arte .laco{animation:laco-sai .5s .3s var(--ease) both}
.cartao.entrou .presente-arte .fita-v{animation:fita-sai .45s .55s var(--ease) both}
.cartao.entrou .presente-arte .tampa{animation:tampa-sai .7s .8s var(--ease) both}
.cartao.entrou .presente-arte .conteudo{animation:conteudo-sobe .6s 1.2s var(--ease) both}
.cartao.aberto .presente-arte .laco,.cartao.aberto .presente-arte .fita-v,.cartao.aberto .presente-arte .tampa{opacity:0}
.cartao.aberto .presente-arte .conteudo{opacity:1;transform:translateY(-34px)}
@keyframes laco-sai{to{transform:translateY(-26px) rotate(-18deg);opacity:0}}
@keyframes fita-sai{to{transform:scaleY(0);opacity:0}}
@keyframes tampa-sai{to{transform:translate(-30px,-44px) rotate(-24deg);opacity:0}}
@keyframes conteudo-sobe{from{opacity:0;transform:translateY(0)}to{opacity:1;transform:translateY(-34px)}}
.presente-texto{text-align:center}
.presente-texto h3{margin-top:14px}

/* Oferta */
.perguntas-diag{display:grid;gap:0;margin-top:12px}
.perguntas-diag li{padding:12px 0;border-bottom:2px solid var(--line);font-weight:700;font-size:17px;letter-spacing:-.02em}
.honesta{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--paper);font-size:15px;line-height:1.45}
.preco{display:flex;flex-direction:column;align-items:center;text-align:center;padding:8px 0 4px}
.preco .antigo{position:relative;font-size:clamp(3rem,15vw,4.4rem);font-weight:800;letter-spacing:-.06em;line-height:1}
.preco .risco{position:absolute;left:-6%;right:-6%;top:50%;height:7px;background:var(--ink);transform:rotate(-7deg) scaleX(0);transform-origin:left center}
.preco.riscado .risco{transform:rotate(-7deg) scaleX(1);transition:transform .5s .2s var(--ease-out)}
.preco .novo{margin-top:12px;font-size:clamp(2.4rem,12vw,3.4rem);font-weight:800;letter-spacing:-.055em;line-height:1.05}
.preco .novo small{display:block;font-size:16px;letter-spacing:0;font-weight:600;margin-top:8px}
.preco .fino{margin-top:10px;color:var(--grey);font-size:15px}
.marcar-acoes{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px}
.vagas{font-size:14px;color:var(--grey)}
.vagas strong{color:var(--ink)}
.faq{display:grid;gap:10px;margin-top:12px}
.faq details{border-radius:14px;background:#fff;border:1px solid var(--line);padding:12px 14px}
.faq summary{cursor:pointer;font-weight:800;font-size:15px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:8px;font-size:15px;line-height:1.5;color:#2b2b28}

/* ---------- Barra fixa de diagnóstico ---------- */
.cta-barra{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;justify-content:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#ffffffee 28%);pointer-events:none;animation:barra-entra .6s var(--ease) both}
.cta-barra .dentro{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:560px}
.cta-barra .botao-grande{flex:1;position:relative}
.cta-barra .botao-grande::after{content:'';position:absolute;inset:-9px;border:3px dashed var(--gold);border-radius:22px;opacity:0;pointer-events:none}
.cta-barra.pulsando .botao-grande::after{animation:anel 1.6s ease-in-out infinite}
@keyframes anel{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}
.cta-barra .ja-mandou{font-size:12px;line-height:1.3;color:var(--grey);font-weight:600;max-width:13ch}
@keyframes barra-entra{from{transform:translateY(100%)}to{transform:none}}

/* ---------- Folha do diagnóstico ---------- */
.folha-diag{width:min(560px,100%);max-height:min(92dvh,760px);margin:auto auto 0;padding:0;border:0;border-radius:24px 24px 0 0;background:#fff;color:var(--ink);box-shadow:0 -20px 60px -20px #0006}
.folha-diag::backdrop{background:#10100e8c;backdrop-filter:blur(2px)}
.folha-diag[open]{animation:folha-sobe .45s var(--ease) both}
@keyframes folha-sobe{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.folha-diag .corpo{padding:22px 18px calc(18px + env(safe-area-inset-bottom));overflow:auto;max-height:inherit}
.folha-diag .pega{width:44px;height:5px;border-radius:4px;background:var(--line);margin:0 auto 14px}
.folha-diag h2{font-size:clamp(1.5rem,6vw,1.9rem);font-weight:800;letter-spacing:-.04em;line-height:1.1}
.folha-diag .fechar{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper);font-size:22px;font-weight:700}
.turnos{display:flex;gap:8px;margin-top:4px}
.turnos label{flex:1}
.turnos input{position:absolute;opacity:0;pointer-events:none}
.turnos span{display:block;text-align:center;padding:10px 6px;border:2px solid var(--line);border-radius:12px;font-weight:700;font-size:15px}
.turnos input:checked+span{border-color:var(--ink);background:var(--gold)}
.turnos input:focus-visible+span{outline:3px solid var(--ink);outline-offset:2px}
.previa-msg{margin-top:14px;padding:12px 14px;border-radius:14px 14px 14px 4px;background:#dcf8c6;font-size:15px;font-weight:600;line-height:1.4;word-break:break-word}
.previa-msg small{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3b6b2a;margin-bottom:4px}
.folha-diag .botao-grande{width:100%;margin-top:14px}
.respostas{margin-top:16px;padding:12px 14px;border-radius:14px;background:var(--paper)}
.respostas h3{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.respostas ul{margin-top:6px;display:grid;gap:4px;font-size:14px}
.respostas p{margin-top:8px;font-size:13px;color:var(--grey)}
.qr-desk{display:none}

/* ---------- Encerrada ---------- */
.encerrada{max-width:640px;margin:0 auto;padding:10px var(--gutter) 80px}
.encerrada .folha-fim{padding:28px 22px;border-radius:6px;transform:rotate(-1deg);position:relative}
.encerrada h1{font-size:clamp(1.8rem,7vw,2.6rem);line-height:1.1;font-weight:800;letter-spacing:-.045em}
.encerrada p{margin-top:12px;font-size:17px;line-height:1.5;color:#2b2b28}
.encerrada .botao-grande{margin-top:18px}
body.esta-encerrada .abertura,body.esta-encerrada .palco,body.esta-encerrada .cta-barra{display:none!important}

/* ---------- Rodapé ---------- */
.rodape{max-width:1240px;margin:0 auto;padding:24px var(--gutter) 140px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;font-size:13px;color:var(--grey)}

/* Papel picado */
.picado{position:fixed;width:9px;height:14px;z-index:60;pointer-events:none;border-radius:1px}

/* ---------- Desktop ---------- */
@media (min-width:980px){
  :root{--gutter:28px}
  .abertura{padding-top:28px;display:grid;grid-template-columns:1fr auto;align-items:end;gap:32px}
  .abertura h1{max-width:18ch}
  .meses{width:420px}
  .palco{grid-template-columns:minmax(0,1.55fr) minmax(340px,1fr);gap:40px;align-items:start;padding-top:14px}
  .coluna-video{display:block;position:sticky;top:16px}
  .video-fixo,body.tocando .video-fixo{position:relative;top:auto;padding-top:0}
  .feed-area{padding-top:0}
  .cartao{padding:22px 22px 20px}
  .folha-diag{margin:auto;border-radius:24px}
  .qr-desk{display:flex;gap:14px;align-items:center;margin-top:14px;padding:12px;border-radius:14px;border:1px dashed var(--line)}
  .qr-desk img{width:96px;height:96px;image-rendering:pixelated}
  .qr-desk p{font-size:14px;color:var(--grey)}
  .cta-barra{justify-content:flex-end;background:none}
  .cta-barra .dentro{max-width:440px}
}
@media (min-width:600px) and (max-width:979px){
  .palco{max-width:720px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}