@font-face{font-family:"Outfit";src:url(fonts/outfit-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  /* primitivas (brand-manifest + emblema + CSS do site) */
  --cor-noite:#0A0E1A;--cor-quase-preto:#060910;--cor-ambar:#D78F00;--cor-ambar-claro:#F5B440;
  --cor-roxo:#522F5F;--cor-roxo-noite:#361A41;--cor-roxo-emblema:#6C3084;
  --cor-branco:#FFFFFF;--cor-slate-300:#CAD5E2;--cor-slate-400:#90A1B9;--cor-superficie:#111827;
  --cor-wa:#00A884;--cor-wa-bolha:#1F2C34;--cor-wa-texto:#8696A0;
  /* semânticas */
  --fundo:var(--cor-noite);--fundo-profundo:var(--cor-quase-preto);--superficie:var(--cor-superficie);
  --superficie-marca:var(--cor-roxo-noite);--texto:var(--cor-branco);--texto-apoio:var(--cor-slate-300);
  --texto-fraco:var(--cor-slate-400);--acento:var(--cor-ambar-claro);--acento-toque:var(--cor-ambar);
  --borda:rgba(255,255,255,.10);
  /* escala */
  --e1:4px;--e2:8px;--e3:12px;--e4:16px;--e5:24px;--e6:32px;--e7:48px;--e8:64px;--e9:96px;
  --r-xl:12px;--r-2xl:16px;--r-3xl:24px;
  --entra:cubic-bezier(.23,1,.32,1);--move:cubic-bezier(.77,0,.175,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%;background:var(--fundo)}
body{font-family:"Outfit",system-ui,sans-serif;font-size:17px;line-height:1.45;color:var(--texto);background:var(--fundo);
  -webkit-font-smoothing:antialiased;min-height:100svh;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--acento);outline-offset:3px;border-radius:var(--r-xl)}
.envolve{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--e5)}
h1,h2{text-wrap:balance;letter-spacing:-.02em;line-height:1.05;font-weight:800}
h2{font-size:32px}
.apoio{color:var(--texto-apoio)}
.num{font-variant-numeric:tabular-nums}

/* topo */
.topo{display:flex;align-items:center;justify-content:space-between;padding-top:var(--e3);padding-bottom:var(--e1)}
.topo .logo{width:64px;mix-blend-mode:lighten}
.topo a.insta{display:inline-flex;align-items:center;gap:var(--e2);min-height:44px;padding:0 var(--e2);
  font-size:15px;font-weight:600;color:var(--texto-apoio);text-decoration:none}
.topo a.insta svg{width:20px;height:20px}

/* herói */
.heroi{display:grid;gap:var(--e5);padding-top:0;padding-bottom:var(--e7)}
.mesa{display:grid;grid-template-columns:46% 1fr;gap:var(--e4);align-items:end;margin:0}
.mesa img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-2xl);background:var(--superficie)}
.mesa figcaption{padding-bottom:var(--e1)}
.mesa .nome{font-size:19px;font-weight:700;line-height:1.15}
.mesa .det{font-size:14px;color:var(--texto-apoio);margin-top:2px}
.mesa .de{font-size:14px;color:var(--texto-fraco);margin-top:var(--e3);max-width:20ch}
.heroi h1{font-size:36px}
.heroi .linha{font-size:17px;color:var(--texto-apoio);max-width:34ch;margin-top:var(--e3)}

/* bilhete do próximo leilão */
.bilhete{display:grid;grid-template-columns:auto 1fr;gap:var(--e1) var(--e5);align-items:end;background:var(--superficie-marca);
  border:1px solid var(--borda);border-radius:var(--r-3xl);padding:var(--e5)}
.bilhete .rot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:var(--e3);
  font-size:15px;font-weight:600;color:var(--texto-apoio)}
.selo{display:inline-block;background:var(--acento);color:var(--fundo);font-weight:800;font-size:15px;line-height:1;
  padding:8px 12px;border-radius:var(--r-xl);opacity:0;transform:translateY(6px);transition:opacity .4s var(--entra),transform .4s var(--entra)}
.selo.pronto{opacity:1;transform:none}
.selo.passou{background:transparent;color:var(--texto-apoio);border:1px solid var(--borda)}
.bilhete .n{font-size:88px;line-height:.85;font-weight:800;letter-spacing:-.05em}
.bilhete .n small{font-size:.42em;letter-spacing:-.02em;margin-right:2px;vertical-align:.62em;color:var(--texto-apoio)}
.bilhete .quando{font-size:26px;font-weight:800;line-height:1.05;color:var(--acento);letter-spacing:-.01em}
.bilhete .quando span{display:block;color:var(--texto);font-weight:700;font-size:18px;margin-top:var(--e1)}
.bilhete .pe{grid-column:1/-1;margin-top:var(--e3);padding-top:var(--e3);border-top:1px solid var(--borda);font-size:15px;color:var(--texto-apoio)}

/* botão */
.botao{display:flex;align-items:center;justify-content:center;gap:var(--e3);min-height:56px;padding:0 var(--e6);border-radius:var(--r-2xl);
  background:var(--acento);color:var(--fundo);font-size:19px;font-weight:800;text-decoration:none;letter-spacing:-.01em;
  touch-action:manipulation;transition:background-color .15s ease,transform .12s var(--entra)}
.botao svg{width:22px;height:22px;flex:none}
.botao:hover{background:var(--acento-toque)}
.botao:active{background:var(--acento-toque);transform:scale(.98)}
.acao .nota{margin-top:var(--e3);font-size:14px;color:var(--texto-fraco);text-align:center}

/* seções */
section{padding:var(--e8) 0;border-top:1px solid var(--borda)}
section .cab{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--e2) var(--e5);margin-bottom:var(--e5)}
section .cab p{color:var(--texto-apoio);max-width:52ch}

/* cartas da mesa */
.cartas{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e5) var(--e4);list-style:none}
.cartas img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:var(--r-xl);background:var(--superficie)}
.cartas .nome{margin-top:var(--e3);font-size:17px;font-weight:700;line-height:1.15}
.cartas .det{font-size:14px;color:var(--texto-apoio);margin-top:2px}
.estado{display:inline-block;margin-top:var(--e2);font-size:13px;font-weight:800;color:var(--texto);background:var(--cor-roxo-emblema);
  padding:4px 8px;border-radius:8px;line-height:1.2;letter-spacing:.02em}
.mais{margin-top:var(--e6);display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);align-items:center;color:var(--texto-apoio);font-size:15px}
.mais a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--acento);text-underline-offset:4px}
.idade{font-size:13px;color:var(--texto-fraco)}

/* como funciona */
.como{display:grid;gap:var(--e7)}
.passos{list-style:none;counter-reset:p;display:grid;gap:var(--e5)}
.passos>li{counter-increment:p;display:grid;grid-template-columns:40px 1fr;gap:var(--e4);align-items:start}
.passos>li::before{content:counter(p);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:2px solid var(--acento);color:var(--acento);font-weight:800;font-size:18px}
.passos>li>div>b{display:block;font-size:19px;font-weight:700;line-height:1.2}
.passos>li>div>span{display:block;color:var(--texto-apoio);margin-top:var(--e1);max-width:46ch}

/* enquete do WhatsApp */
.enquete{background:var(--cor-wa-bolha);border-radius:18px 18px 18px 4px;padding:var(--e4) var(--e4) var(--e3);max-width:380px}
.enquete .q{font-weight:700;font-size:16px;line-height:1.25}
.enquete .fim{font-size:13px;color:var(--cor-wa-texto);margin-top:2px}
.enquete ul{list-style:none;display:grid;gap:var(--e3);margin-top:var(--e4)}
.enquete li{display:grid;grid-template-columns:22px 1fr auto;gap:6px var(--e3);align-items:center;font-size:15px}
.enquete .bola{width:20px;height:20px;border-radius:50%;border:2px solid var(--cor-wa-texto)}
.enquete .v{font-size:13px;color:var(--cor-wa-texto)}
.enquete .barra{grid-column:2/4;height:6px;border-radius:6px;background:#374248;overflow:hidden}
.enquete .barra i{display:block;height:100%;background:var(--cor-wa)}
.w15{width:15%}.w30{width:30%}.w45{width:45%}
.enquete li.arr{font-weight:700}
.enquete li.arr .bola{border-color:var(--cor-wa);background:var(--cor-wa);position:relative}
.enquete li.arr .bola::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;border:solid var(--cor-quase-preto);border-width:0 2px 2px 0;transform:rotate(45deg)}
.rot-enq{margin-top:var(--e4);font-size:14px;color:var(--texto-apoio)}
.rot-enq b{color:var(--texto);font-weight:600}
.enquete{margin-top:var(--e2)}
.enquete-lado{display:none}
.legenda-enq{margin-top:var(--e2);font-size:14px;color:var(--texto-apoio);max-width:380px}
.legenda-enq b{color:var(--texto);font-weight:600}

/* combinados */
.combinados{list-style:none;display:grid;gap:var(--e4)}
#combinados h2{margin-bottom:var(--e5)}
.combinados{gap:var(--e5)}
.combinados b{display:block;font-size:19px;color:var(--texto)}
.combinados li{color:var(--texto-apoio)}
.combinados li{padding-left:var(--e5);position:relative;max-width:56ch}
.combinados li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:2px;background:var(--cor-roxo-emblema)}
.combinados b{font-weight:700}
.estados-leg{margin-top:var(--e3);display:flex;flex-wrap:wrap;gap:var(--e2) var(--e5);font-size:14px;color:var(--texto-apoio)}
.estados-leg b{color:var(--texto);font-weight:700;margin-right:4px}

/* fecho */
.fecho{position:relative;padding-bottom:var(--e7);overflow:hidden}
.fecho .onca{width:62%;max-width:300px;margin:0 0 -10px -4px;transform:scaleX(-1);position:relative;z-index:1}
.fecho h2{font-size:40px;max-width:14ch}
.fecho p.apoio{margin-top:var(--e3);max-width:40ch}
.fecho .acao{margin-top:var(--e6)}
footer{background:var(--fundo-profundo);padding:var(--e6) 0 calc(var(--e6) + env(safe-area-inset-bottom));font-size:14px;color:var(--texto-fraco)}
footer .envolve{display:flex;flex-wrap:wrap;gap:var(--e3) var(--e5);justify-content:space-between;align-items:center}
footer nav{display:flex;gap:var(--e5)}
footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--texto-apoio);font-weight:600;text-underline-offset:4px}

/* entrada (só onde ajuda a ler a mesa) */
@media (prefers-reduced-motion:no-preference){
  .mesa img{opacity:0;translate:0 24px;transition:opacity .5s var(--entra),translate .5s var(--entra)}
  .mesa.pronta img{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){.selo{transition:opacity .2s ease;transform:none}}

/* 600+ */
@media (min-width:600px){
  .cartas{grid-template-columns:repeat(3,1fr)}
  .mesa figcaption{font-size:14px}
}
/* 960+: herói em duas colunas */
@media (min-width:960px){
  .envolve{padding:0 var(--e7)}
  .topo{padding-top:var(--e5)}
  .heroi{padding-top:var(--e2)}
  .topo .logo{width:88px}
  .heroi{grid-template-columns:6fr 6fr;gap:var(--e8);align-items:start;padding-top:var(--e5);padding-bottom:var(--e9)}
  .heroi .texto{order:1}
  .mesa{order:2;grid-template-columns:1fr;gap:var(--e4);margin:var(--e2) 0 0;max-width:420px;justify-self:end}
  .mesa figcaption{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:var(--e1) var(--e3)}
  .mesa .nome{font-size:22px}
  .mesa .det{grid-column:1/-1;grid-row:2}
  .mesa .estado{margin-top:0}
  .mesa .de{grid-column:1/-1;grid-row:3;max-width:none;margin-top:var(--e1)}
  .heroi h1{font-size:60px}
  .heroi .linha{font-size:20px}
  .bilhete{margin-top:var(--e6)}
  .acao{margin-top:var(--e5)}
  .acao .nota{text-align:left}
  .botao{display:inline-flex}
  h2{font-size:44px}
  .cartas{grid-template-columns:repeat(6,1fr)}
  .como{grid-template-columns:7fr 5fr;gap:var(--e9);align-items:start}
  .passos .rot-enq,.passos .enquete{display:none}
  .enquete-lado{display:block;position:sticky;top:var(--e7)}
  .enquete-lado .rot-enq{margin-top:var(--e9)}
  .combinados{grid-template-columns:repeat(3,1fr);gap:var(--e7)}
  .combinados li{max-width:none}
  .fecho .envolve{display:grid;grid-template-columns:auto 1fr;gap:var(--e6);align-items:end}
  .fecho .onca{width:380px;max-width:none;margin:0 0 -8px}
  .fecho h2{font-size:60px}
}
@media (max-width:959px){.heroi .texto{display:grid;gap:var(--e5)}.acao{margin-top:var(--e1)}}