/* Diagnóstico Chatfor para a lousa interativa do evento.
   Palco fixo de 1080×1920 (tela vertical), escalado para caber em qualquer tela sem distorcer.
   Linguagem clara: uma coisa por tela, muito respiro, movimento com mola, teclado no padrão iOS.
   Fundo #e3e8e4 = o mesmo do reel "Isso é chatfor", para o vídeo da abertura fundir com a página.
   Uma fonte só (Plus Jakarta Sans, a da marca). Lime só como acento pequeno. */

@font-face{font-family:"Plus Jakarta Sans";src:url(a/fonts/jakarta.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --bg:#e3e8e4;--card:#ffffff;--card-press:#f0f2f0;
  --ink:#0d0d0d;--ink-2:#3d413e;--mute:#5d625e;--hair:rgba(13,13,13,.10);
  --lime:#99ea48;--lime-deep:#3f7d0e;
  --tec-fundo:#d0d6d1;--tec-fn:#adb5af;
  --erro:#b4321f;
  --display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mola:cubic-bezier(.32,.72,0,1);
  --saida:cubic-bezier(.4,0,1,1);
  --sombra:0 1px 2px rgba(20,30,20,.05),0 6px 18px rgba(20,30,20,.05);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--display);color:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--ink);outline-offset:4px}
h1,h2,h3,p{margin:0}
.ph-bold{line-height:1}

/* ── palco ── */
#palco{position:absolute;left:50%;top:50%;width:1080px;height:1920px;transform-origin:0 0;overflow:hidden;background:var(--bg);
  transform:translate(var(--tx,-540px),var(--ty,-960px)) scale(var(--s,1))}

/* ── telas ── */
.tela{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.tela.on{visibility:visible;pointer-events:auto}
.tela.sai{visibility:visible;pointer-events:none;animation:sai .3s var(--saida) forwards}
.tela.on.entra{animation:entra .55s var(--mola) both}
@keyframes sai{to{opacity:0}}
@keyframes entra{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes sobe{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ── botões ── */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:20px;height:136px;padding:0 84px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:44px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .25s var(--mola),opacity .2s}
.cta .ph-bold{font-size:38px}
.cta:active{transform:scale(.96);opacity:.85}
.cta-sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink);height:112px;padding:0 64px;font-size:38px}

/* ── abertura: vídeo em tela cheia, título em cima, botão embaixo ── */
.tela-inicio{background:#f3f4f2}
/* vídeo 16:9 na largura toda, no centro da tela, inteiro (contain); bordas de cima e de baixo somem no fundo da mesma cor */
.inicio-video{position:absolute;left:0;top:656px;width:1080px;height:608px;display:block;object-fit:contain;background:#f3f4f2;
  -webkit-mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(transparent,#000 4%,#000 96%,transparent)}
.tela-inicio.on .inicio-video{animation:aparece-v 1.2s .15s ease both}
@keyframes aparece-v{from{opacity:0}}
.inicio-topo{position:absolute;left:80px;right:80px;top:130px}
.inicio-premio{font-size:30px;font-weight:600;color:var(--lime-deep)}
.inicio-titulo{margin-top:22px;font-size:88px;line-height:1.03;font-weight:700;letter-spacing:-.04em;max-width:880px;text-wrap:balance}
.inicio-base{position:absolute;left:0;right:0;bottom:110px;display:flex;flex-direction:column;align-items:center;gap:30px}
.inicio-nota{font-size:28px;font-weight:500;color:var(--mute)}
.inicio-nota b{color:var(--ink);font-weight:700}
.tela-inicio.on .inicio-topo{animation:sobe .9s .1s var(--mola) both}
.tela-inicio.on .inicio-base{animation:sobe .9s .25s var(--mola) both}

/* ── barra de progresso ── */
.barra{position:absolute;left:0;right:0;top:0;height:170px;padding:64px 64px 0}
.barra-voltar{display:inline-flex;align-items:center;gap:6px;height:64px;font-size:32px;font-weight:600;color:var(--ink-2);transition:opacity .2s}
.barra-voltar .ph-bold{font-size:32px}
.barra-voltar:active{opacity:.5}
.barra-voltar[disabled]{opacity:0;pointer-events:none}
.barra-passo{position:absolute;right:64px;top:64px;height:64px;display:flex;align-items:center;font-size:28px;font-weight:600;color:var(--mute)}
.barra-trilho{position:absolute;left:64px;right:64px;top:152px;height:6px;border-radius:6px;background:rgba(13,13,13,.08);overflow:hidden}
.barra-fill{height:100%;width:0;border-radius:inherit;background:var(--ink);transition:width .8s var(--mola)}

/* ── pergunta ── */
.perg-topo{position:absolute;left:64px;right:64px;top:250px}
.perg-titulo{font-size:80px;line-height:1.04;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.perg-titulo .w{display:inline-block;opacity:0;transform:translateY(18px)}
.tela-pergunta.on .perg-titulo .w{animation:palavra .6s var(--mola) forwards;animation-delay:calc(var(--i) * 30ms + 60ms)}
@keyframes palavra{to{opacity:1;transform:none}}
.perg-ajuda{margin-top:24px;font-size:34px;line-height:1.4;color:var(--mute);font-weight:500;max-width:900px}
.tela-pergunta.on .perg-ajuda{animation:sobe .6s .2s var(--mola) both}
.perg-corpo{position:absolute;left:0;right:0;bottom:0;top:690px;display:flex;flex-direction:column}
.perg-corpo > .campo,.perg-corpo > .campo-dica,.perg-corpo > .fone-chip,.perg-corpo > .consent,.perg-corpo > .opcoes{margin-left:64px;margin-right:64px}
.perg-corpo > *:not(.campo-dica){animation:sobe .6s .25s var(--mola) both}

/* campo (o teclado nativo nunca abre) */
.campo{position:relative;height:156px;border-radius:28px;background:var(--card);display:flex;align-items:center;padding:0 44px;
  font-size:66px;font-weight:600;letter-spacing:-.02em;overflow:hidden;box-shadow:var(--sombra)}
.campo.fone{font-size:62px}
.campo-txt{white-space:pre;overflow:hidden;max-width:100%}
.campo-txt.vazio{color:#a3aaa5;font-weight:500}
.campo-caret{width:5px;height:76px;background:var(--lime-deep);border-radius:3px;margin-left:4px;flex:none;animation:pisca 1.1s steps(1) infinite}
@keyframes pisca{50%{opacity:0}}
.campo.erro{animation:treme .4s}
@keyframes treme{20%{transform:translateX(-12px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(3px)}}
.campo-dica{min-height:44px;margin-top:18px;font-size:28px;font-weight:600;color:var(--erro);opacity:0;transition:opacity .25s}
.campo-dica.on{opacity:1}

/* teclado no padrão iOS */
.teclado,.numerico{margin-top:auto;background:var(--tec-fundo);padding:22px 12px 44px;border-radius:40px 40px 0 0}
.teclado{display:flex;flex-direction:column;gap:18px}
.tec-linha{display:flex;gap:12px;justify-content:center}
.tec-linha.meio{padding:0 44px}
.tecla{position:relative;flex:1 1 0;height:134px;border-radius:14px;background:#fff;color:var(--ink);font-size:50px;font-weight:500;
  display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.2);transition:background .1s}
.tecla.press{background:#e4e8e5}
.tecla.fn{background:var(--tec-fn);font-size:32px;font-weight:600}
.tecla.fn.press{background:#fff}
.tecla.fn .ph-bold{font-size:44px}
.tecla.ligada{background:#fff}
.tecla.espaco{flex-grow:3.8;font-size:30px;font-weight:500;color:var(--ink-2)}
.tecla.ok{flex-grow:2.6;background:var(--ink);color:#fff;font-size:36px;font-weight:600}
.tecla.ok>span{display:flex;align-items:center;gap:14px}
.tecla.ok .ph-bold{font-size:38px}
.tecla.ok.press{background:#2b2e2b}
.tecla.ok.off{background:var(--tec-fn);color:rgba(13,13,13,.45)}
.tecla.larga{flex-grow:1.45}
.numerico{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 14px;padding:24px 22px 44px}
.numerico .tecla{height:142px;font-size:64px;font-weight:500}
.numerico .tecla.fn{font-size:34px}
.numerico .tecla.ok{grid-column:1/-1;height:136px;font-size:42px;border-radius:999px;margin-top:8px;box-shadow:none}
.fone-chip{align-self:flex-start;margin-top:22px;height:84px;padding:0 34px;border-radius:999px;background:var(--card);font-size:30px;font-weight:600;color:var(--ink);
  display:inline-flex;align-items:center;gap:16px;box-shadow:var(--sombra);transition:background .25s,color .25s,transform .2s var(--mola)}
.fone-chip .caixa{width:36px;height:36px;border-radius:10px;box-shadow:inset 0 0 0 3px #b9c0bb;display:grid;place-items:center;font-size:24px;color:transparent;transition:background .2s,box-shadow .2s,color .2s}
.fone-chip:active{transform:scale(.96)}
.fone-chip.on .caixa{background:var(--ink);box-shadow:none;color:#fff}
.consent{margin-top:20px;margin-bottom:20px;font-size:24px;line-height:1.45;color:var(--mute);font-weight:500;max-width:860px}

/* opções: lista agrupada (4) ou grade de 2 colunas (8) */
.opcoes{border-radius:32px;background:var(--card);box-shadow:var(--sombra);overflow:hidden}
.opcoes.oito{display:grid;grid-template-columns:1fr 1fr;gap:18px;background:none;box-shadow:none;overflow:visible;border-radius:0}
.opcao{position:relative;width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;background:var(--card);
  height:186px;padding:0 48px;transition:background .15s;opacity:0}
.opcoes.quatro .opcao + .opcao::before{content:"";position:absolute;left:48px;right:0;top:0;height:2px;background:var(--hair)}
.opcoes.oito .opcao{height:184px;border-radius:28px;box-shadow:var(--sombra);padding:0 36px}
.opcao b{font-size:50px;font-weight:600;letter-spacing:-.025em}
.opcoes.oito .opcao b{font-size:42px}
.opcao small{margin-left:14px;font-size:32px;font-weight:500;color:var(--mute)}
.opcao.press{background:var(--card-press)}
.opcao .radio{width:56px;height:56px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 3px #c4cbc6;display:grid;place-items:center;color:#fff;font-size:30px;transition:background .25s,box-shadow .25s}
.opcoes.oito .opcao .radio{width:46px;height:46px;font-size:24px}
.opcao .radio .ph-bold{opacity:0;transform:scale(.4);transition:opacity .2s,transform .35s var(--mola)}
.opcao.sel .radio{background:var(--ink);box-shadow:none}
.opcao.sel .radio .ph-bold{opacity:1;transform:none}
.opcoes.oito .opcao.sel{box-shadow:inset 0 0 0 4px var(--ink)}
.tela-pergunta.on .opcao{animation:sobe .55s var(--mola) forwards;animation-delay:calc(var(--i) * 40ms + 220ms)}

/* ── transição: "Não somos apenas…" na linguagem do reel ── */
.load-texto{position:absolute;left:80px;right:80px;top:600px}
.load-pre{font-size:34px;font-weight:600;color:var(--mute);opacity:0}
.tela-load.on .load-pre{animation:sobe .6s .05s var(--mola) both}
.load-titulo{margin-top:40px;display:flex;flex-direction:column}
.load-linha{display:block;padding:30px 0;border-top:2px solid var(--hair);font-size:58px;line-height:1.15;letter-spacing:-.03em}
.load-linha:last-child{border-bottom:2px solid var(--hair)}
.load-linha .base{font-weight:500;color:var(--mute)}
.load-linha .alvo{font-weight:700;color:var(--ink);position:relative;white-space:nowrap}
.load-linha .alvo::after{content:"";position:absolute;left:-4px;right:-4px;top:55%;height:5px;border-radius:3px;background:var(--ink);transform:scaleX(0);transform-origin:left}
.load-linha.antiga{opacity:.5}
.load-linha.antiga .alvo::after{transform:scaleX(1)}
.load-linha.nova{opacity:0}
.tela-load.on .load-linha.nova{animation:sobe .6s .2s var(--mola) both}
.tela-load.on .load-linha.nova .alvo::after{animation:risca .45s 1.5s var(--mola) forwards}
@keyframes risca{to{transform:scaleX(1)}}
.load-sub{margin-top:56px;font-size:40px;line-height:1.38;color:var(--ink-2);font-weight:500;max-width:880px;opacity:0}
.tela-load.on .load-sub{animation:sobe .7s 2s var(--mola) both}
.load-trilho{position:absolute;left:80px;right:80px;bottom:120px;height:6px;border-radius:6px;background:rgba(13,13,13,.08);overflow:hidden}
.load-fill{height:100%;background:var(--ink);transform-origin:left;transform:scaleX(0)}
.tela-load.on .load-fill{animation:enche var(--dur,5s) linear forwards}
@keyframes enche{to{transform:scaleX(1)}}

/* ── análise ── */
.an-titulo{position:absolute;left:80px;right:80px;top:320px;font-size:104px;line-height:1.04;font-weight:700;letter-spacing:-.045em;opacity:0}
.an-titulo .sub{background:linear-gradient(transparent 70%,var(--lime) 70%,var(--lime) 92%,transparent 92%)}
.tela-analise.on .an-titulo{animation:sobe .8s .1s var(--mola) both}
.an-pilares{position:absolute;left:80px;right:80px;top:660px}
.an-pilar{display:flex;align-items:baseline;gap:28px;padding:34px 0;border-top:2px solid var(--hair);opacity:0}
.an-pilar:last-child{border-bottom:2px solid var(--hair)}
.an-pilar b{width:230px;flex:none;font-size:54px;font-weight:700;letter-spacing:-.03em}
.an-pilar span{font-size:34px;font-weight:500;color:var(--mute)}
.tela-analise.on .an-pilar{animation:sobe .7s var(--mola) forwards;animation-delay:calc(var(--i) * 180ms + 450ms)}
.an-lista{list-style:none;margin:0;padding:0;position:absolute;left:80px;right:80px;top:1260px;display:flex;flex-direction:column;gap:30px}
.an-lista li{display:flex;align-items:center;gap:26px;font-size:34px;font-weight:600;color:var(--mute);opacity:0;transform:translateY(12px);transition:opacity .45s,transform .6s var(--mola),color .3s}
.an-lista li.on{opacity:1;transform:none}
.an-lista li .marca{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;box-shadow:inset 0 0 0 4px rgba(13,13,13,.12);position:relative}
.an-lista li .marca::after{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--ink);animation:gira .8s linear infinite}
.an-lista li.ok{color:var(--ink)}
.an-lista li.ok .marca{background:var(--ink);color:#fff;font-size:28px;box-shadow:none;animation:pop .45s var(--mola)}
.an-lista li.ok .marca::after{display:none}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}

/* ── prêmio ── */
.pr-topo{position:absolute;left:80px;right:80px;top:300px}
.pr-pre{font-size:32px;font-weight:600;color:var(--lime-deep)}
.pr-titulo{margin-top:16px;font-size:80px;line-height:1.04;font-weight:700;letter-spacing:-.04em;text-wrap:balance}
.tela-premio.on .pr-topo{animation:sobe .8s .1s var(--mola) both}
.raspa{position:absolute;left:100px;top:720px;width:880px;height:560px;border-radius:44px;overflow:hidden;
  box-shadow:0 2px 4px rgba(20,30,20,.06),0 24px 60px rgba(20,30,20,.14);transition:top .8s var(--mola),height .8s var(--mola)}
.tela-premio.on .raspa{animation:sobe .9s .2s var(--mola) both}
.raspa-premio{position:absolute;inset:0;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:56px 60px}
.raspa-rot{font-size:30px;font-weight:600;color:rgba(255,255,255,.6)}
.raspa-nome{margin-top:10px;font-size:74px;line-height:1.02;font-weight:700;letter-spacing:-.04em;max-width:700px;transition:font-size .8s var(--mola)}
.raspa-mais{margin-top:22px;font-size:34px;font-weight:600;color:var(--lime)}
.raspa-capa{position:absolute;inset:0;width:100%;height:100%;touch-action:none;transition:opacity .5s}
.raspa.aberta .raspa-capa{opacity:0;pointer-events:none}
.tela-premio.revelado .pr-topo{opacity:0;transition:opacity .3s;animation:none}
.tela-premio.revelado .raspa{top:120px;height:400px;animation:none}
.tela-premio.revelado .raspa-nome{font-size:60px}
.pr-msg{position:absolute;left:80px;right:80px;top:580px;opacity:0;pointer-events:none}
.tela-premio.revelado .pr-msg{pointer-events:auto;animation:sobe .8s .45s var(--mola) both}
.pr-txt{font-size:46px;line-height:1.22;font-weight:600;letter-spacing:-.025em;text-wrap:pretty}
.pr-linha{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pr-brinde,.pr-qr{background:var(--card);border-radius:32px;padding:36px;box-shadow:var(--sombra);display:flex;flex-direction:column}
.pr-rot{font-size:26px;font-weight:600;color:var(--mute)}
.pr-cod{margin-top:14px;font-size:72px;font-weight:700;letter-spacing:-.02em}
.pr-dica{margin-top:auto;padding-top:20px;font-size:26px;line-height:1.35;font-weight:600;color:var(--ink-2)}
.pr-qr-img{width:200px;height:200px}
.pr-qr-img svg{width:100%;height:100%;display:block}
.pr-fecho{position:absolute;left:80px;right:80px;bottom:96px;opacity:0;pointer-events:none}
.tela-premio.revelado .pr-fecho{pointer-events:auto;animation:sobe .8s .9s var(--mola) both}
.pr-frase{font-size:38px;line-height:1.3;font-weight:500;color:var(--mute);max-width:820px}
.pr-assina{margin-top:30px;display:flex;align-items:center;gap:24px;font-size:76px;font-weight:700;letter-spacing:-.04em;line-height:1}
.pr-wm{display:inline-block;width:320px;transform:translateY(8px)}
.pr-wm .wm{width:100%;height:auto;display:block}
.pr-obrigado{margin-top:6px;font-size:76px;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.pr-fecho .cta-sec{margin-top:48px}
.pr-cont{display:inline-block;margin-left:28px;font-size:26px;color:var(--mute)}

/* ── confete (só na vitória) ── */
.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:7}

/* ── folhas (ocioso, operador) ── */
.folha-fundo{position:absolute;inset:0;z-index:20;display:flex;align-items:flex-end;background:rgba(13,20,15,.25);animation:fade .3s both}
.folha-fundo[hidden]{display:none}
@keyframes fade{from{opacity:0}}
.folha{width:100%;padding:64px 80px 96px;border-radius:48px 48px 0 0;background:var(--card);animation:folha .55s var(--mola) both}
@keyframes folha{from{transform:translateY(100%)}}
.folha h3{font-size:72px;font-weight:700;letter-spacing:-.04em}
.folha > p{margin-top:18px;font-size:36px;color:var(--mute);font-weight:500}
.folha > p b{color:var(--ink)}
.admin-pin p{margin-top:24px;font-size:30px;color:var(--mute)}
.admin-pin-v{margin:16px 0 24px;height:84px;font-size:60px;letter-spacing:.4em}
.admin-pin-t{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px;border-radius:28px;background:var(--tec-fundo)}
.admin-pin-t .tecla{height:112px}
.admin-num{margin:28px 0 0}
.admin-num div{display:flex;justify-content:space-between;font-size:32px;padding:22px 0;border-bottom:2px solid var(--hair)}
.admin-num dt{color:var(--mute)}
.admin-num dd{margin:0;font-weight:700}
.admin-botoes{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.admin-botoes button{height:104px;border-radius:24px;background:var(--bg);font-size:30px;font-weight:600}
.admin-botoes button:active{transform:scale(.98)}
.admin-botoes .admin-fechar{background:var(--ink);color:#fff}
.admin-status{margin-top:22px;min-height:40px;font-size:26px;color:var(--mute)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .perg-titulo .w,.opcao,.load-linha.nova{opacity:1;transform:none}
}