/* Verão que Lute 2026 · LP
   Hero imersiva (fotos de ação em tela cheia, no tratamento do KV) + lettering do KV montando na tela;
   branco como base no resto; cenas presas à rolagem; o logo vira portal pro convite final;
   o formulário surge num pop-up (desktop) / folha de baixo (celular). */
:root{
  color-scheme: light;
  --branco:#FFFFFF;
  --areia:#FBF7F1;
  --tinta:#1C1512;
  --tinta-2:#5E4E46;
  --ferrugem:#A44C2C;
  --ferrugem-2:#8E3F23;
  --manteiga:#F5F1BE;
  --pessego:#FFD6AF;
  --creme-texto:#FFF6EA;
  --linha:rgba(164,76,44,.22);
  --fonte:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --mola:cubic-bezier(.22,1.18,.36,1); /* overshoot leve: só peças do logo e estrelinhas */
  --topo-h:96px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--branco);color:var(--tinta);font-family:var(--fonte);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p{margin:0}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:3px solid var(--ferrugem);outline-offset:3px;border-radius:10px}
.hd-palco :focus-visible{outline-color:var(--manteiga)} /* sobre a foto o anel fica claro */
.so-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- topo fixo (aparece depois do hero) ---------- */
.topo{position:fixed;inset:0 0 auto 0;z-index:50;transform:translateY(-105%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s linear .6s}
.com-topo .topo{transform:none;visibility:visible;transition:transform .6s var(--ease),visibility 0s}
.faixa{background:var(--ferrugem);color:var(--manteiga);display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2px 12px;padding:7px 14px;padding-top:calc(7px + env(safe-area-inset-top,0px));font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.barra{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px clamp(16px,3vw,32px);background:rgba(255,255,255,.97);border-bottom:1px solid var(--linha)}
.barra-logo img{height:40px;width:auto;transform:scale(1.6) translateY(12px);opacity:0;transform-origin:left center;transition:transform .8s var(--mola) .1s,opacity .35s linear .1s}
.com-topo .barra-logo img{transform:none;opacity:1}
.barra .btn{display:none}

/* ---------- contagem (dígitos que rolam) ---------- */
.relogio{display:inline-flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.und{display:inline-flex;align-items:baseline;gap:6px}
.sep{opacity:.5}
.dig{display:inline-flex;font-size:1.18em;letter-spacing:.04em}
.roda{position:relative;display:inline-block;width:.68em;height:1.2em;overflow:hidden;text-align:center}
.roda span{position:absolute;inset:0}
.roda .sai{animation:sai .55s var(--ease) forwards}
.roda .entra{animation:entra .55s var(--ease) forwards}
@keyframes sai{to{transform:translateY(-110%);opacity:0}}
@keyframes entra{from{transform:translateY(110%);opacity:0}to{transform:none;opacity:1}}

/* ---------- botões ---------- */
.btn{position:relative;overflow:hidden;appearance:none;border:0;cursor:pointer;font:800 13px/1.2 var(--fonte);letter-spacing:.04em;border-radius:999px;padding:16px 22px;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s var(--ease),box-shadow .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);transform:translateX(-130%);animation:brilho-btn 5s ease-in-out 2.4s infinite;pointer-events:none}
@keyframes brilho-btn{0%,72%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
.btn-ferr{background:var(--ferrugem);color:var(--manteiga);box-shadow:0 14px 28px -16px rgba(110,45,22,.75)}

.btn-creme{background:var(--manteiga);color:var(--ferrugem);box-shadow:0 18px 40px -18px rgba(0,0,0,.6)}
.btn-branco{background:#fff;color:var(--ferrugem);box-shadow:0 18px 40px -18px rgba(40,14,4,.7)}
.btn-g{width:100%;min-height:58px;font-size:14px}
.btn-p{min-height:40px;font-size:12px;padding:10px 18px}
.btn[disabled]{cursor:progress}
.btn .carrega{display:none;width:100%;height:4px;border-radius:4px;overflow:hidden;background:rgba(245,241,190,.25)}
.btn .carrega i{display:block;height:100%;width:40%;background:var(--manteiga);animation:vai 1.1s var(--ease) infinite}
@keyframes vai{from{transform:translateX(-110%)}to{transform:translateX(260%)}}
.btn.enviando .rot{display:none}
.btn.enviando .carrega{display:block}

/* ---------- HERO "LUZ QUENTE" (ideia A, escolhida 15/10 — linha Habitline) ----------
   foto quente em tela cheia, título no centro, cartões de vidro no pé.
   Ao rolar (sem trava): a foto anda mais devagar, o branco sobe em curva por cima dela,
   os cartões sobem e endireitam — tudo transform/opacity derivado da posição. */
.hero{position:relative;isolation:isolate;background:var(--branco);--peek:118px}
.hd-palco{position:relative;z-index:0;min-height:100svh;display:grid;place-items:center;padding:calc(22px + env(safe-area-inset-top,0px)) 18px calc(var(--peek) + 26px);overflow:clip;color:var(--creme-texto)}
.hd-foto{position:absolute;inset:0;z-index:-2;transform:translate3d(0,var(--hd-par,0px),0);will-change:transform;background:#5a2a17}
/* a foto expandida (céu em cima) fica ancorada embaixo e cresce pra cima: a moça sobe e o rosto fica entre o logo e o título */
/* vídeo em loop (scripts/video_hero.py): 5 clipes, varredura de luz entre eles, cor do KV já aplicada no arquivo */
.hd-foto-in{position:absolute;inset:-3%}
.hd-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 42%;pointer-events:none}
/* o tom quente e o escurecimento atrás do título vêm embutidos no vídeo e no pôster (scripts/video_hero.py):
   nada de camada com mix-blend-mode por cima do vídeo, que o navegador teria de recalcular a cada quadro */
.hd-curva{position:absolute;z-index:-1;left:-30%;right:-30%;top:calc(100% - var(--peek) * .75);height:90vh;border-radius:50% 50% 0 0/26vh 26vh 0 0;background:var(--branco);box-shadow:0 -10px 70px 46px var(--branco);transform:translate3d(0,var(--hd-curva,0px),0);will-change:transform;pointer-events:none}
.hd-centro{display:grid;justify-items:center;text-align:center;gap:14px;width:min(1060px,100%);opacity:var(--hd-txt-op,1);transform:translate3d(0,calc(var(--hd-txt-y,0) * 1px),0);pointer-events:var(--hd-pe,auto)}
.hd-selo{display:inline-flex;align-items:center;gap:10px;padding:5px 5px 5px 14px;border-radius:999px;background:rgba(40,14,4,.22);border:1px solid rgba(255,246,234,.34);font-size:10.5px;font-weight:700;letter-spacing:.16em;color:#fff;text-shadow:0 1px 8px rgba(40,14,4,.45)}
.hd-selo span{padding:6px 10px;border-radius:999px;background:var(--manteiga);color:var(--ferrugem);letter-spacing:.1em;white-space:nowrap;text-shadow:none}
.hd-acoes{display:grid;gap:12px;justify-items:center;width:100%;margin-top:6px}
.hd-acoes .btn{width:100%;min-height:58px;font-size:14px}
.hd-data{font-size:13px;font-weight:600;font-style:italic;color:#FFF6EA}

.hd-cartoes{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"r r" "p s";gap:10px;max-width:1120px;margin:calc(var(--peek) * -1) auto 0;padding:0 14px}
.hd-c{position:relative;border-radius:24px;padding:18px 16px;background:rgba(255,251,246,.95);border:1px solid rgba(255,255,255,.7);box-shadow:0 30px 60px -34px rgba(70,26,10,.55);color:var(--tinta);will-change:transform;
  transform:translate3d(0,calc((1 - var(--hd-c,0)) * var(--c-desce,0px) - var(--hd-c,0) * 34px),0) rotate(calc((1 - var(--hd-c,0)) * var(--c-gira,0deg)))}
.hd-c-relogio{grid-area:r;padding:44px 16px 20px;text-align:center}
.hd-c-prova{grid-area:p;display:grid;gap:10px;align-content:start;font-size:13px;font-weight:700;line-height:1.35}
.hd-c-sem{grid-area:s;display:grid;gap:8px;align-content:start;font-size:13px;font-weight:700;line-height:1.35}
.hd-c-prova p span,.hd-c-sem p span{color:var(--ferrugem)}
.hd-c-prova,.hd-c-sem{--c-desce:18px}.hd-c-prova{--c-gira:-2deg}.hd-c-sem{--c-gira:2deg}
.hd-rostos{display:flex}
.hd-rostos img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2.5px solid #fff;margin-left:-10px}
.hd-rostos img:first-child{margin-left:0}
/* aba recortada no topo do cartão (gesto da ref. Noah Vance) */
.hd-aba{position:absolute;top:0;left:50%;transform:translateX(-50%);white-space:nowrap;padding:8px 16px 9px;border-radius:0 0 14px 14px;background:var(--ferrugem);color:var(--manteiga);font-size:10.5px;font-weight:700;letter-spacing:.16em}
.hd-aba::before,.hd-aba::after{content:"";position:absolute;top:0;width:14px;height:14px;background:radial-gradient(circle at var(--cx) 100%,transparent 13.5px,var(--ferrugem) 14px)}
.hd-aba::before{right:100%;--cx:0}.hd-aba::after{left:100%;--cx:100%}
.hd-relogio{display:flex;justify-content:center;gap:clamp(14px,4vw,34px);font-variant-numeric:tabular-nums}
.hd-u{display:grid;justify-items:center;gap:2px}
.hd-u .dig{font-size:clamp(34px,9vw,58px);line-height:1;font-weight:800;letter-spacing:-.02em;color:var(--ferrugem)}
.hd-u .roda{width:.62em;height:1.04em}
.hd-u small{font-size:10px;font-weight:700;letter-spacing:.18em;color:var(--tinta-2)}

/* ---------- frase da oferta: acende palavra por palavra, sem fotos no texto ----------
   hierarquia: a oferta é a frase principal; as três metas vêm numa linha mais leve embaixo.
   gestos do KV: a estrelinha em cima, o oval desenhado à mão (capa, "2026") em "6 semanas"
   e um risco ferrugem que se desenha sob cada meta quando ela acende */
.frase{display:grid;justify-items:center;gap:22px;text-align:center;max-width:1000px;margin:0 auto;padding:72px 20px 72px}
.frase-txt{display:grid;gap:18px;justify-items:center;margin:0}
.frase-abre{display:block;font-size:clamp(26px,3.4vw,46px);line-height:1.18;font-weight:700;letter-spacing:-.03em;text-wrap:balance;max-width:21ch;color:var(--tinta)}
.frase-metas{display:block;font-size:clamp(17px,1.7vw,23px);line-height:1.5;font-weight:500;letter-spacing:-.01em;color:var(--tinta-2);max-width:44ch;text-wrap:balance}
.js [data-tinta] .tw{display:inline-block;color:rgba(28,21,18,.16);transform:translateY(.12em);transition:color .6s var(--ease),transform .6s var(--ease-out)}
.js [data-tinta] .tw.on{color:var(--tinta);transform:none}
/* negritos do doc: peso maior e ferrugem quando acesos */
[data-tinta] strong{font-weight:800}
.js [data-tinta] strong .tw.on{color:var(--ferrugem)}
html:not(.js) [data-tinta] strong{color:var(--ferrugem)}
.js .frase-metas .tw.on{color:var(--tinta-2)}
.js .frase-metas .risca .tw.on{color:var(--tinta)}
.risca{font-weight:700;color:var(--tinta);padding-bottom:.1em;background:linear-gradient(var(--ferrugem),var(--ferrugem)) no-repeat 0 100%/0% 2px;transition:background-size .7s var(--ease) .1s}
.risca.on{background-size:100% 2px}
.oval{position:relative;display:inline-block;white-space:nowrap;margin-left:.42em;padding:0 .04em}
.oval-svg{position:absolute;left:-.78em;top:-.34em;width:calc(100% + 1.56em);height:calc(100% + .7em);overflow:visible;pointer-events:none}
.oval-svg path{fill:none;stroke:var(--ferrugem);stroke-width:max(2px,.06em);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease) .12s}
.oval.on .oval-svg path{stroke-dashoffset:0}
.btn-auto{width:auto;max-width:100%}
.frase .data{color:var(--tinta-2)}

.sombra{position:absolute;top:-40px;right:-10%;width:95%;height:380px;background:url(img/sombra-copas.webp) center/cover no-repeat;transform:rotate(180deg);opacity:.16;mix-blend-mode:multiply;pointer-events:none;animation:balanca 13s ease-in-out infinite alternate}
@keyframes balanca{from{transform:rotate(180deg) skewX(-2deg) translateX(-10px)}to{transform:rotate(180deg) skewX(2.5deg) translateX(14px)}}

.logo-vivo{position:relative;width:clamp(132px,20vh,206px);aspect-ratio:1217/871;margin-bottom:2px;filter:drop-shadow(0 8px 24px rgba(40,14,4,.35))}
.lv{position:absolute;height:auto;will-change:transform}
/* leveza: animação decorativa só roda com a seção na tela (vql.js marca .parado quando ela sai) */
.parado,.parado *,.parado *::before,.parado *::after{animation-play-state:paused!important}
.lv-ee{left:0;top:9.644%;width:18.488%}
.lv-ed{left:81.43%;top:9.529%;width:18.57%}
.lv-verao{left:16.187%;top:0;width:61.791%}
.lv-ql{left:5.177%;top:43.398%;width:87.346%}
.lv-crew{left:24.815%;top:85.878%;width:45.111%}
.js .lv-verao{animation:lv-cai .95s var(--mola) .2s both}
.js .lv-ql{animation:lv-desliza .85s var(--mola) .45s both,lv-jab 5.6s ease-in-out 2.8s infinite}
/* com o vídeo rodando, o jab do "QUE LUTE" deixa de ser no relógio e acontece junto com o soco do vídeo
   (duas animações iguais com nomes diferentes: alternar entre elas reinicia o golpe sem repetir a entrada) */
.hero.com-video .lv-ql{animation:lv-desliza .85s var(--mola) .45s both}
.hero.com-video .lv-ql.soco-a{animation:lv-soco-a .5s cubic-bezier(.2,.8,.2,1) both}
.hero.com-video .lv-ql.soco-b{animation:lv-soco-b .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes lv-soco-a{0%,100%{transform:none}28%{transform:translateX(2.6%) scale(1.045)}55%{transform:translateX(-.8%) scale(.995)}}
@keyframes lv-soco-b{0%,100%{transform:none}28%{transform:translateX(2.6%) scale(1.045)}55%{transform:translateX(-.8%) scale(.995)}}
.js .lv-crew{animation:lv-sobe .75s var(--mola) .75s both}
.js .lv-ee{animation:lv-estrela .8s var(--mola) 1s both,lv-brilha 3.6s ease-in-out 2.2s infinite}
.js .lv-ed{animation:lv-estrela .8s var(--mola) 1.1s both,lv-brilha 3.6s ease-in-out 2.8s infinite}
@keyframes lv-cai{from{transform:translateY(-40%) rotate(-6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lv-desliza{from{transform:translateX(-16%) skewX(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lv-sobe{from{transform:translateY(45%) scale(.9);opacity:0}to{transform:none;opacity:1}}
@keyframes lv-estrela{from{transform:scale(.35) rotate(-140deg);opacity:0}to{transform:none;opacity:1}}
@keyframes lv-brilha{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.2) rotate(20deg)}}
@keyframes lv-jab{0%,84%,100%{transform:none}87%{transform:translateX(2.6%) scale(1.04)}90%{transform:translateX(-.8%) scale(.995)}93%{transform:none}}

.h1{display:grid;justify-items:center;gap:12px;font-weight:400;text-shadow:0 2px 30px rgba(40,14,4,.35)}
.h1-a{font-size:clamp(28px,7.4vw,34px);line-height:1.06;font-weight:800;letter-spacing:-.03em;color:#fff}
.h1-b{font-size:19px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--creme-texto);max-width:34ch}
.h1-b b{font-weight:800;color:var(--manteiga)}
.h1-b strong{font-weight:800;font-style:italic;color:var(--manteiga)}
.h1-b mark{background:var(--manteiga);color:var(--ferrugem);font-weight:800;padding:0 .22em;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* como na A aprovada: só o logo se monta na entrada; título, botão e cartões já nascem no lugar */

.data{font-size:13px;font-weight:600;font-style:italic;letter-spacing:.02em}

/* ---------- faixa corrida ---------- */
/* sutil e minimalista: a faixa espaçada do KV, só com linhas finas e o texto pequeno em ferrugem */
.corrida{background:var(--branco);color:var(--ferrugem);overflow:hidden;padding:13px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.corrida-trilho{display:flex;align-items:center;gap:30px;width:max-content;white-space:nowrap;font-weight:700;font-size:11.5px;letter-spacing:.22em;line-height:1;will-change:transform;text-transform:uppercase}
.corrida-trilho i{font-style:normal;font-size:1.05em;opacity:.75}

/* ---------- palavras que sobem ---------- */
.pal{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.16em 0 .08em;margin:-.16em 0 -.08em}
.pal>span{display:inline-block;transform:translateY(108%);opacity:0;transition:transform .85s var(--ease),opacity .3s var(--ease);transition-delay:calc(var(--i,0) * 42ms)}
.on .pal>span,.pal.on>span{transform:none;opacity:1}
.marca{background:linear-gradient(var(--manteiga),var(--manteiga)) no-repeat 0 88%/0% 46%;transition:background-size 1s var(--ease) .35s}
.on .marca,.marca.on{background-size:100% 46%}

/* ---------- NO SEU AUGE ---------- */
.auge{position:relative;padding:72px 16px}
.auge-preso{display:grid;gap:28px;max-width:1320px;margin-inline:auto}
.auge-texto{display:grid;gap:22px;align-content:center}
.titulo-kv{font-size:clamp(40px,8.6vw,116px);line-height:.94;font-weight:800;letter-spacing:-.035em;color:var(--ferrugem);text-transform:uppercase}
.auge-paras{display:grid;gap:14px;max-width:46ch}
.corpo{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--tinta-2)}
.corpo strong em{color:var(--tinta);font-weight:700}
.js .auge-paras p{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js .auge-paras p.on{opacity:1;transform:none}
.auge-foto{position:relative;margin:0;border-radius:30px;overflow:hidden;aspect-ratio:3/4;background:var(--pessego)}
.auge-foto img{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;object-position:50% 30%;transform:translateY(var(--foto-y,0)) scale(var(--foto-z,1));will-change:transform}
.sombra-foto{top:-6%;right:-30%;width:150%;height:55%;opacity:.2;z-index:1}

/* ---------- JEITO CREW ---------- */
.jeito{position:relative;padding:clamp(88px,16vw,210px) 20px;text-align:center;overflow:hidden;isolation:isolate}
.jeito::before{content:"";position:absolute;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,175,.6),rgba(255,214,175,0) 66%);z-index:-1}
.jeito-frase{font-size:clamp(34px,6.2vw,88px);line-height:1.02;font-weight:700;letter-spacing:-.035em;max-width:14ch;margin-inline:auto;color:var(--tinta)}
.jeito-frase .marca{color:var(--ferrugem)}
.faisca{position:absolute;width:clamp(26px,3.6vw,54px);opacity:0;transform:scale(.4) rotate(-120deg);transition:transform .8s var(--mola),opacity .3s linear}
.jeito.on .faisca{opacity:1;transform:none}
.f1{left:10%;top:22%;transition-delay:.5s}
.f2{right:11%;top:32%;width:clamp(18px,2.4vw,36px);transition-delay:.7s}
.f3{left:20%;bottom:16%;width:clamp(16px,2vw,30px);transition-delay:.9s}

/* ---------- INGRESSO (ideia da Izabella, do jeito do João): um objeto de verdade, pequeno e calmo ----------
   ingresso champanhe gerado reto e com o miolo em branco; o logo REAL entra estampado por scripts/ingresso.py
   (ingresso-240/480/960.webp, 2,78:1, fundo transparente). Natureza-morta sobre a página branca: sombra de
   contato no "chão", inclinação leve. Pousa UMA vez quando a seção chega (.on) e fica parado; nada em loop.
   --bilhete-giro = inclinação final; --bilhete-cor = filtro de cor (none: o arquivo já vem no tom certo). */
.bilhete{--bilhete-giro:-3deg;--bilhete-cor:brightness(1);position:relative;display:block;transform:rotate(var(--bilhete-giro));transform-origin:50% 55%}
.bilhete img{display:block;width:100%;height:auto;filter:var(--bilhete-cor) drop-shadow(0 1px 1px rgba(92,52,18,.26)) drop-shadow(0 5px 9px rgba(92,52,18,.12))}
/* sombra de contato: elipse macia logo abaixo do ingresso, como um objeto apoiado na mesa */
.vip-bilhete,.frase-bilhete{position:relative;isolation:isolate}
.vip-bilhete::before,.frase-bilhete::before{content:"";position:absolute;z-index:-1;left:9%;right:7%;bottom:-7%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(74,40,14,.2),rgba(74,40,14,.07) 60%,rgba(74,40,14,0));transform:rotate(-2.5deg)}

/* frase da oferta: o ingresso no lugar da estrelinha, do tamanho de um selo */
.frase-bilhete{width:clamp(140px,12vw,176px);margin-bottom:4px}
.js .frase .bilhete-p{opacity:0;transform:translateY(-12px) rotate(calc(var(--bilhete-giro) - 4deg));transition:opacity .6s var(--ease-out) .1s,transform 1.2s var(--ease) .1s}
.js .frase.on .bilhete-p{opacity:1;transform:rotate(var(--bilhete-giro))}

/* seção do ingresso: GUICHÊ. "Você acaba de ganhar" ao pé da letra: uma fenda fina na página (a boca de uma
   bilheteria) e o ingresso sai dela quando a fenda chega à tela, pousa inclinado e fica. Uma vez só, nada em loop,
   só transform; a parte ainda "dentro da página" fica escondida pelo recorte da .saida. Sem JS, já nasce fora. */
.vip{position:relative;padding:48px 20px 104px;overflow:clip}
.vip-grade{max-width:980px;margin-inline:auto;display:grid;gap:30px;justify-items:center;text-align:center}
.ganhou{font-size:clamp(24px,2.7vw,40px);line-height:1.16;font-weight:700;letter-spacing:-.025em;color:var(--tinta);max-width:20ch}
.ganhou .marca{color:var(--ferrugem)}
.guiche{position:relative;width:min(92vw,460px)}
.fenda{position:relative;z-index:2;height:2px;background:linear-gradient(90deg,rgba(28,21,18,0),rgba(28,21,18,.28) 10%,rgba(28,21,18,.28) 90%,rgba(28,21,18,0));box-shadow:0 1px 0 rgba(255,255,255,.95),0 4px 10px rgba(28,21,18,.07)}
.saida{position:relative;overflow:hidden;margin:0 -3%;padding:0 3% 9%}
.guiche .bilhete{transform:none}
.vip-bilhete{position:relative;isolation:isolate;transform:translateY(8%) rotate(-2.5deg)}
.vip-bilhete::before{content:"";position:absolute;z-index:-1;left:9%;right:7%;bottom:-7%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(74,40,14,.2),rgba(74,40,14,.07) 60%,rgba(74,40,14,0))}
.js .guiche .vip-bilhete{transform:translateY(-104%)}
.js .guiche .vip-bilhete::before{opacity:0}
.js .guiche.on .vip-bilhete{animation:sai-da-fenda 2.3s var(--ease) .15s both}
.js .guiche.on .vip-bilhete::before{animation:sombra-chega .7s var(--ease-out) 1.75s both}
@keyframes sai-da-fenda{0%{transform:translateY(-104%) rotate(0)}66%{transform:translateY(8%) rotate(0)}100%{transform:translateY(8%) rotate(-2.5deg)}}
@keyframes sombra-chega{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.vip-data{display:grid;gap:2px;justify-items:center;margin:0}
.vip-data b{font-size:clamp(24px,2.4vw,34px);line-height:1.05;font-weight:800;letter-spacing:-.025em;color:var(--ferrugem)}
.vip-data span{font-size:14px;font-weight:600;font-style:italic;color:var(--tinta-2)}

/* ---------- PORTAL + CONVITE FINAL (mosaico) ---------- */
.portal{position:relative}
.portal-preso{position:relative;min-height:100svh;overflow:hidden;display:grid;place-items:center;padding:110px 16px 40px}
.mosaico{position:absolute;inset:-8% -6%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;z-index:0}
.mos-col{display:flex;flex-direction:column;gap:10px;will-change:transform}
.mos-col:nth-child(n+4){display:none}
.mos-col:nth-child(2){margin-top:-90px}
.mos-col img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:16px}
.folha,.portal-foto{display:none}
.convite{position:relative;z-index:3;width:min(520px,100%);background:var(--branco);border-radius:30px;padding:30px 30px 24px;box-shadow:0 40px 90px -30px rgba(28,21,18,.6);display:grid;gap:16px;text-align:center}
.convite-logo{width:150px;margin:0 auto}
.topa{font-size:clamp(24px,2.6vw,32px);line-height:1.15;font-style:italic;font-weight:600;letter-spacing:-.02em;color:var(--tinta)}
.topa strong{font-weight:800;color:var(--ferrugem)}
.convite .data{color:var(--tinta-2)}
.furos{position:absolute;top:30px;bottom:30px;width:14px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.furos-e{left:10px}.furos-d{right:10px}
.furos i{width:12px;height:12px;border-radius:50%;background:#EDE6DC;box-shadow:inset 0 2px 3px rgba(28,21,18,.28)}

/* ---------- rodapé e CTA fixo ---------- */
.rodape{display:grid;place-items:center;padding:56px 16px 120px}
.rodape img{width:120px}
.cta-fixo{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 40%);transform:translateY(110%);visibility:hidden;transition:transform .45s var(--ease),visibility 0s linear .45s}
.cta-fixo.on{transform:none;visibility:visible;transition:transform .45s var(--ease),visibility 0s}

/* ---------- MODAL do formulário ---------- */
.modal{border:0;padding:0;margin:auto;background:transparent;max-width:none;max-height:none;overflow:visible;color:var(--tinta)}
.modal::backdrop{background:rgba(28,21,18,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease-in}
.modal.abre::backdrop{transition:opacity .3s var(--ease-out)}
.modal.abre::backdrop{opacity:1}
.modal-cartao{position:relative;width:min(540px,calc(100vw - 32px));max-height:calc(100svh - 32px);overflow:auto;background:var(--branco);border-radius:30px;box-shadow:0 50px 120px -40px rgba(28,21,18,.7);transform:translateY(16px) scale(.96);opacity:0;transition:transform .2s ease-in,opacity .16s ease-in}
.modal.abre .modal-cartao{transform:none;opacity:1;transition:transform .3s var(--ease-out),opacity .2s var(--ease-out)}
.modal-corpo{padding:34px 40px 26px;display:grid;gap:10px}
.modal-logo{width:120px;margin:0 auto 4px}
.modal-tit{font-size:clamp(22px,2.4vw,28px);line-height:1.15;font-weight:800;letter-spacing:-.02em;text-align:center}
.modal-sub{font-size:15px;color:var(--tinta-2);text-align:center;margin-bottom:6px}
.fechar{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--areia);color:var(--tinta);font-size:24px;line-height:1;cursor:pointer;z-index:2;transition:background .2s var(--ease),transform .2s var(--ease)}

.puxador{display:none}
.modal .furos{top:40px;bottom:40px}

/* ---------- formulário ---------- */
.form{position:relative;display:grid;gap:10px}
.campo{display:grid;gap:6px}
.form label{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ferrugem)}
.entrada{position:relative;display:flex;align-items:center;border-radius:14px}
.entrada input{width:100%;font:500 16px/1.2 var(--fonte);color:var(--tinta);background:var(--areia);border:1.5px solid rgba(164,76,44,.22);border-radius:14px;padding:13px 14px;min-height:52px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background-color .2s var(--ease)}
.entrada input::placeholder{color:#9b8a80}
.entrada input:focus{outline:none;border-color:var(--ferrugem);background:#fff;box-shadow:0 0 0 4px rgba(164,76,44,.14)}
.entrada input[aria-invalid="true"]{border-color:var(--ferrugem-2);background:#fff}
.ddi{position:absolute;left:14px;font-size:15px;font-weight:700;color:var(--tinta-2);pointer-events:none}
.entrada.zap input{padding-left:56px}
.erro{font-size:13px;font-weight:600;color:var(--ferrugem-2)}
.erro:empty{display:none}
.form .data{color:var(--tinta-2);text-align:center}
.mel{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.sucesso{display:grid;gap:14px;justify-items:center;text-align:center;padding:8px 4px}
.sucesso .ok{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:800;background:var(--ferrugem);color:var(--manteiga);animation:pousa .6s var(--mola)}
.sucesso p{font-size:16px;line-height:1.5}
@keyframes pousa{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

/* hover só em mouse de verdade */
@media (hover:hover) and (pointer:fine){
  .btn-ferr:hover{background:var(--ferrugem-2);transform:translateY(-2px);box-shadow:0 18px 32px -16px rgba(110,45,22,.85)}
  .btn-creme:hover{background:#FBF8DA;transform:translateY(-2px)}
  .btn-branco:hover{background:var(--manteiga);transform:translateY(-2px)}
  .fechar:hover{background:var(--pessego);transform:rotate(90deg)}
}

/* =================== CELULAR: o formulário vira folha de baixo =================== */
@media (max-width:639px){
  .modal{margin:auto 0 0 0;width:100%}
  .modal-cartao{width:100%;max-height:92svh;border-radius:28px 28px 0 0;transform:translateY(100%);opacity:1;padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .22s ease-in}
  .modal.abre .modal-cartao{transform:none;transition:transform .42s var(--ease)}
  .modal-corpo{padding:30px 20px 22px}
  .puxador{display:block;width:44px;height:5px;border-radius:5px;background:#E3D9CE;margin:10px auto 0}
  .modal .furos{display:none}
  .fechar{top:12px;right:12px}
}

/* =================== TELAS ESTREITAS (320–359px) =================== */
@media (max-width:359px){
  .btn{font-size:12.5px;letter-spacing:.02em;padding-inline:16px;gap:6px}
  .hd-acoes .btn{font-size:12.5px}
  .hd-palco,.frase{padding-inline:16px}
  .hd-selo{font-size:9.5px;letter-spacing:.12em;gap:6px;padding-left:10px}
  .frase-txt{font-size:23px}
}
/* tablet: o botão da hero não estica a tela toda */
@media (min-width:640px){
  .hd-acoes .btn{width:auto;padding-inline:30px}
}
/* telas baixas (celular deitado, notebook com zoom): logo menor pra o botão e os cartões caberem */
@media (max-height:600px){
  .logo-vivo{width:clamp(84px,17vh,206px)}
  .hd-centro{gap:10px}
  .hd-palco{padding-top:14px}
}

/* =================== DESKTOP =================== */
@media (min-width:960px){
  .faixa{font-size:12px;padding-block:8px}
  .barra .btn{display:inline-flex}
  .barra-logo img{height:46px}
  .hero{--peek:150px}
  .hd-palco{padding:28px 48px calc(var(--peek) + 34px)}
  .hd-centro{gap:16px}
  .h1-a{font-size:clamp(40px,min(4.5vw,7.4vh),68px);line-height:1.02;max-width:1000px}
  .h1-b{font-size:clamp(21px,min(1.9vw,3.3vh),28px);line-height:1.3;max-width:none}
  .hd-acoes{grid-auto-flow:column;justify-content:center;align-items:center;gap:16px;width:auto;margin-top:10px}
  .hd-acoes .btn{width:auto;padding:18px 30px;min-height:60px;font-size:15px}
  .hd-data{padding:11px 18px;border-radius:999px;background:rgba(255,246,234,.06);font-size:14px}
  .hd-cartoes{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:"p r s";gap:22px;padding:0 40px;align-items:start}
  .hd-c{padding:24px;border-radius:28px}
  .hd-c-relogio{padding:54px 24px 28px}
  .hd-c-prova,.hd-c-sem{margin-top:46px;font-size:15px;gap:12px;--c-desce:40px}
  .hd-c-prova{--c-gira:-3deg}.hd-c-sem{--c-gira:3deg}
  .hd-aba{font-size:11.5px;padding:9px 20px 10px}
  .hd-rostos img{width:46px;height:46px;margin-left:-12px}
  .frase{padding:96px 40px 104px;gap:22px}
  .btn-g{min-height:60px;font-size:15px}
  .cta-fixo{display:none}

  .auge{height:250vh;padding:0}
  .auge-preso{position:sticky;top:var(--topo-h);height:calc(100vh - var(--topo-h));grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:56px;padding:0 48px}
  .auge-foto{aspect-ratio:auto;height:min(76vh,760px)}

  .vip{padding:72px 40px 128px}
  .vip-grade{gap:34px}

  .portal{height:300vh}
  .portal-preso{position:sticky;top:0;height:100vh;min-height:0;padding:0}
  .mosaico{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;inset:-12% -3%}
  .mos-col:nth-child(n+4){display:flex}
  .mos-col:nth-child(4){margin-top:-60px}
  .mos-col:nth-child(5){margin-top:-150px}
  .convite{padding:40px 60px 30px}
  .furos-e{left:18px}.furos-d{right:18px}
  .js .portal-foto{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;opacity:var(--op-foto,1);transform:scale(var(--esc-foto,1));will-change:transform,opacity}
  .js .folha{display:block;position:absolute;inset:0;z-index:2;background:var(--branco);
    -webkit-mask-image:linear-gradient(#000 0 0),url(img/logo-creme.webp);-webkit-mask-repeat:no-repeat;-webkit-mask-position:0 0,var(--mx,50%) var(--my,50%);-webkit-mask-size:100% 100%,var(--mw,880px) auto;-webkit-mask-composite:xor;
    mask-image:linear-gradient(#000 0 0),url(img/logo-creme.webp);mask-repeat:no-repeat;mask-position:0 0,var(--mx,50%) var(--my,50%);mask-size:100% 100%,var(--mw,880px) auto;mask-composite:exclude;
    opacity:var(--folha-op,1)}
  .js .convite{opacity:var(--op-convite,0);transform:translateY(var(--y-convite,60px)) scale(var(--s-convite,.96));pointer-events:var(--pe-convite,none)}
  .js .convite:focus-within{opacity:1;transform:none;pointer-events:auto} /* quem navega no Tab nunca cai num botão invisível */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero{--hd-c:1}.hd-curva{display:none}
  .js [data-tinta] .tw{color:inherit;transform:none}.js [data-tinta] strong .tw{color:var(--ferrugem)}.oval-svg path{stroke-dashoffset:0}.risca{background-size:100% 2px}
  .pal>span{transform:none;opacity:1}
  .marca{background-size:100% 46%}
  .js .auge-paras p{opacity:1;transform:none}
  .js .frase .bilhete-p{opacity:1!important;transform:rotate(var(--bilhete-giro))!important}
  .js .guiche .vip-bilhete{animation:none!important;transform:translateY(8%) rotate(-2.5deg)!important}.js .guiche .vip-bilhete::before{animation:none!important;opacity:1!important}
  .faisca{opacity:1;transform:none}
  .js .folha,.js .portal-foto{display:none!important}
  .js .convite{opacity:1!important;transform:none!important;pointer-events:auto!important}
  .modal-cartao{transform:none!important;opacity:1!important}
}