/* CHALLENGE SUPERFAST · estilo das duas páginas (index.html e inscricao.html), v1 (03/11/2026)
   Tokens do MARCA.md §8, no mesmo sistema da página link na bio v1 (fontes, malha de pontos que respiram, botões,
   etiqueta .confirmar). Fundos das seções alternados (escuro, vermelho, branco), por pedido do Matheus em 03/11/2026, que
   vence a regra antiga do BRIEF ("fundo sempre escuro"). Nada de pílula (raio de 2 a 4 px), nada quica. Movimento só com
   transform e opacity, na curva e nas durações do guia (120/180/260 ms), e desligado com prefers-reduced-motion.
   O servidor manda CSP "default-src 'self'": todo estilo fica neste arquivo (nada embutido no HTML). */

@font-face{font-family:"Rajdhani";font-weight:700;font-display:swap;src:url(assets/fonts/rajdhani-700.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(assets/fonts/barlow-condensed-700.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(assets/fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-500.woff2) format("woff2")}

:root{
  --sf-red:#E5000C;--sf-red-bright:#FF2030;--sf-red-deep:#A80008;--sf-black:#070708;--sf-bg:#0C0C0D;
  --sf-s1:#111113;--sf-s2:#191A1C;--sf-s3:#222326;--sf-text:#FFFFFF;--sf-text-2:#C8C8C8;--sf-text-3:#888890;--sf-border:#2A2B2E;
  --sf-r1:2px;--sf-r2:4px;
  --sf-ease:cubic-bezier(.16,1,.3,1);--sf-dur-1:120ms;--sf-dur-2:180ms;--sf-dur-3:260ms;
  --f-display:"Rajdhani",system-ui,sans-serif;--f-label:"Barlow Condensed","Arial Narrow",sans-serif;
  --f-body:"Barlow",system-ui,sans-serif;--f-data:"JetBrains Mono",ui-monospace,monospace;
  --s-05:4px;--s-1:8px;--s-15:12px;--s-2:16px;--s-3:24px;--s-4:32px;--s-6:48px;--s-8:64px;
  --superficie:rgba(17,17,19,.94);   /* --sf-s1 sobre a malha */
  --coluna:680px;                    /* coluna de leitura */
  --largo:1120px;                    /* hero no computador */
  --barra:60px;                      /* barra fixa do topo (sem a área segura) */
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* fundo preto absoluto sob a malha, igual à página link na bio aprovada (pedido do Matheus, 29/10: "o pattern coloque o preto absoluto") */
html{-webkit-text-size-adjust:100%;background:#000;scroll-behavior:smooth;scroll-padding-top:calc(var(--barra) + env(safe-area-inset-top,0px) + var(--s-2))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;min-height:100svh;color:var(--sf-text);font:400 16px/1.55 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden;font-synthesis-weight:none}
a{color:inherit}
p{margin:0}
h1,h2,h3{margin:0}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* malha de pontos que respiram (pontos.js, mesma da link na bio: passo 19 px, raio 1,05 px, 50 %, cada ponto entre 70 e
   100 %). Sem WebGL: a mesma malha parada e mais fraca, em CSS */
#pontos{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none}
.sem-webgl #pontos{display:none}
.sem-webgl body{background:radial-gradient(circle,rgba(229,0,12,.3) 1.05px,transparent 1.6px) 0 0/19px 19px fixed}

/* foco visível: vermelho vivo sobre o preto (5:1); branco em volta do botão vermelho */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sf-red-bright);outline-offset:3px}
.cta:focus-visible{outline-color:#fff}

/* etiqueta "falta confirmar" (mesmo desenho do .confirmar da link na bio): tracejada, discreta, visível para o cliente */
.confirmar{display:inline;padding:1px 5px;border:1px dashed var(--sf-red-bright);border-radius:var(--sf-r1);
  font:500 12px/1.7 var(--f-data);letter-spacing:.02em;text-transform:none;color:var(--sf-red-bright);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;white-space:normal}

/* ---------- barra fixa no topo, nas 3 páginas (Matheus, 03/11/2026) ----------
   Logo (link para a página principal), "Resultados" e "Inscrever-se" (CTA compacto, sem o pulso para não competir com o botão
   do hero; com a luz e a faixa dos botões). Celular: só o símbolo, com 26 px de altura (o guia pede no mínimo 24 px). */
.barra-topo{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:var(--s-15);
  min-height:calc(var(--barra) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--s-2) 0;
  background:rgba(0,0,0,.96);border-bottom:1px solid var(--sf-border)}   /* .96: sobre as seções brancas o texto de baixo não aparece através */
.barra-logo{display:flex;align-items:center;min-height:48px;padding:0 4px;margin-left:-4px}
.barra-logo img{display:block;width:auto;height:26px}
.barra-nav{display:flex;align-items:center;gap:var(--s-1)}
.barra-link{display:inline-flex;align-items:center;min-height:48px;padding:0 var(--s-15);font:700 15px/1 var(--f-label);letter-spacing:.12em;
  text-transform:uppercase;text-decoration:none;color:var(--sf-text)}
.barra-link[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--sf-red-bright);text-decoration-thickness:2px;text-underline-offset:8px}
@media (hover:hover){.barra-link:hover{color:var(--sf-text-2)}}
.barra-inscrever{width:auto;min-height:44px;padding:var(--s-1) var(--s-2);font-size:15px;letter-spacing:.12em}
.barra-topo [data-participar]::after{animation:none!important;opacity:0}
@media (min-width:700px){.barra-logo img{height:24px}}   /* logo inteiro: o símbolo continua com 24 px */
.barra-link,.barra-inscrever .rotulo{white-space:nowrap}
main{padding:0 var(--s-2)}
/* páginas sem hero (formulário e resultados): o conteúdo começa abaixo da barra */
.pg-form main,.pg-res main{padding-top:calc(var(--barra) + env(safe-area-inset-top,0px))}
.pg-form .cab{padding-top:calc(var(--barra) + env(safe-area-inset-top,0px) + var(--s-3))}
.pg-form main{padding-top:0}

/* ---------- textos de apoio ---------- */
.sobre{display:block;margin:0 0 var(--s-1);font:700 13px/1.4 var(--f-label);letter-spacing:.3em;text-transform:uppercase;color:var(--sf-red-bright)}
.sobre::before{content:"";display:inline-block;width:16px;height:2px;margin-right:var(--s-1);background:var(--sf-red);vertical-align:.3em}
.titulo{font:700 clamp(30px,8vw,40px)/1.02 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.intro{margin-top:var(--s-1);color:var(--sf-text-2)}

/* ---------- botões (56 px, cantos de 4 px), com o efeito da link na bio (pedido do Matheus, 03/11/2026) ----------
   Mesmo desenho de link-na-bio/v1/src/index.html: luz que segue o cursor ou o dedo (::before, --mx/--my do botoes.js), faixa
   de brilho que atravessa uma vez ao entrar ou ao tocar (::after), subida no hover e peças em escada. As duas camadas ficam
   no span .botao-fx (criado pelo botoes.js e recortado no formato do botão); o ::after do próprio botão fica livre para o
   brilho pulsante do Participar, que vaza para fora. */
.botao{position:relative;isolation:isolate;display:flex;align-items:center;gap:var(--s-15);width:100%;min-height:56px;padding:var(--s-15) var(--s-2);
  border:1px solid var(--sf-border);border-radius:var(--sf-r2);background:var(--superficie);color:var(--sf-text);
  font:700 17px/1.15 var(--f-label);letter-spacing:.12em;text-transform:uppercase;text-align:left;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform 460ms var(--sf-ease)}
.botao>:not(.botao-fx){position:relative;z-index:1}
.botao .rotulo{flex:1;min-width:0}
.botao svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter}
.botao .ic{color:var(--sf-text-2)}
.botao .seta{width:20px;height:20px}
.botao-fx{position:absolute;inset:-1px;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.botao-fx::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity 420ms var(--sf-ease);
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,32,48,.24),rgba(255,32,48,.07) 42%,transparent 72%)}
.botao-fx::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-50%;width:38%;opacity:0;transform:skewX(-18deg);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.07) 40%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.07) 60%,transparent)}
@keyframes faixaBotao{0%{opacity:1;transform:translateX(0) skewX(-18deg)}100%{opacity:1;transform:translateX(420%) skewX(-18deg)}}
.botao.faixa .botao-fx::after{animation:faixaBotao 800ms var(--sf-ease) forwards}
.botao.tocado .botao-fx::before,.botao:focus-visible .botao-fx::before{opacity:1}
/* hover em escada: cada peça anda um pouco depois da anterior (na saída, a ordem se inverte) */
.botao .ic,.botao .rotulo,.botao .seta{transition:transform 480ms var(--sf-ease)}
.botao .ic{transition-delay:120ms}.botao .rotulo{transition-delay:60ms}.botao .seta{transition-delay:0ms}
@media (hover:hover){
  .botao:hover{transform:translateY(-3px);border-color:var(--sf-red);box-shadow:0 6px 16px rgba(0,0,0,.6)}
  .botao:hover .botao-fx::before{opacity:1}
  .botao:hover .botao-fx::after{animation:faixaBotao 800ms var(--sf-ease) forwards}
  .botao:hover .ic{transform:translateX(2px) scale(1.12);transition-delay:0ms}
  .botao:hover .rotulo{transform:translateX(5px);transition-delay:45ms}
  .botao:hover .seta{transform:translateX(9px);transition-delay:135ms}
}
.botao:active{transform:translateY(-1px) scale(.985);transition-duration:160ms}
.cta{background:var(--sf-red);border-color:var(--sf-red);color:#fff;box-shadow:0 0 16px rgba(229,0,12,.25)}
.cta .ic{color:#fff}
.cta .botao-fx::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.12),rgba(255,255,255,.04) 45%,transparent 72%)}
@media (hover:hover){.cta:hover{border-color:var(--sf-red-bright);box-shadow:0 6px 16px rgba(0,0,0,.6),0 0 16px rgba(229,0,12,.25)}}
.branco{background:#fff;border-color:#fff;color:var(--sf-black)}
.branco .ic{color:var(--sf-black)}
.branco .botao-fx::before{background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(229,0,12,.16),rgba(229,0,12,.05) 42%,transparent 72%)}
.branco .botao-fx::after{background:linear-gradient(100deg,transparent,rgba(0,0,0,.04) 40%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.04) 60%,transparent)}
@media (hover:hover){.branco:hover{border-color:var(--sf-red)}}
@media (prefers-reduced-motion:reduce){.botao,.botao *{transition:none!important}.botao-fx{display:none}.botao:hover,.botao:active{transform:none}}

/* botão Participar (hero, fecho e barra fixa): o brilho pulsante do "Montar minha máquina" da link na bio (ctaBrilho: 18 px a
   0,32 ↔ 38 px a 0,62 + anel de 3 px, 2,4 s), numa camada própria que só muda de opacidade. No botão branco do fecho, o brilho
   é branco (ele está sobre o vermelho) */
[data-participar]{box-shadow:0 0 18px rgba(229,0,12,.32)}
[data-participar]::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 38px rgba(255,32,48,.62),0 0 0 3px rgba(255,32,48,.16)}
.branco[data-participar]{box-shadow:0 0 18px rgba(255,255,255,.28)}
.branco[data-participar]::after{box-shadow:0 0 40px rgba(255,255,255,.6),0 0 0 3px rgba(255,255,255,.28)}
@media (prefers-reduced-motion:no-preference){[data-participar]::after{animation:brilho 2.4s ease-in-out infinite}}
@media (prefers-reduced-motion:reduce){[data-participar]::after{opacity:.5}}
@keyframes brilho{0%,100%{opacity:0}50%{opacity:1}}
.cta-grande{min-height:68px;padding:var(--s-2) var(--s-3);font-size:20px;letter-spacing:.14em}
.cta-grande .ic{width:28px;height:28px}
/* volante do botão: vira para um lado e para o outro e descansa (como o volante da link na bio), sem quique */
.volante{transform-box:view-box;transform-origin:12px 12px}
@media (prefers-reduced-motion:no-preference){[data-participar] .volante{animation:volante 3.6s ease-in-out infinite}}
@keyframes volante{0%,42%,100%{transform:rotate(0)}12%{transform:rotate(-22deg)}28%{transform:rotate(16deg)}}

/* ---------- hero: vídeo da garagem (toca uma vez e para aceso; pagina.js) ----------
   Título: SUPERFAST em cima, com espaçamento normal, e CHALLENGE embaixo (Matheus, 03/11/2026). O aniversário fica só na
   linha de apoio, pequena.
   Celular (até 699 px): o vídeo ocupa a largura toda, cortado no alto (o teto de LEDs é a parte mais clara) e escurecido
   embaixo; título, subtítulo e botão sobem para cima do piso escuro, logo abaixo dos carros.
   700 a 959 px: uma faixa 16:9 do vídeo, nos carros, com o texto entrando pelo piso.
   Computador (960 px ou mais, Matheus: "use o hero-desktop-16x9.mp4 para o desktop" e "o texto também no centro"): vídeo
   16:9 de ponta a ponta. Título e subtítulo no alto, sobre a parte escura do quadro (fumaça), e botão e linha de apoio
   embaixo, no piso: nada cobre os carros, que ficam no meio do quadro. */
.hero{position:relative;margin:0 calc(-1 * var(--s-2));padding-bottom:var(--s-6);text-align:center}
.hero-midia{position:relative;aspect-ratio:720/1120;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 84%,transparent);mask-image:linear-gradient(180deg,#000 84%,transparent)}
/* quadro (escuro no começo; aceso quando não há vídeo) e vídeo ocupam o mesmo lugar, com o mesmo recorte */
.hero-quadro,.hero-video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%}
/* escurecimento: alto (área de proteção da logo: o preto segura até a base dela mais uma altura de símbolo) */
/* e piso (atrás do texto). O texto começa onde a camada já passa de 60 %
   de preto: branco sobre o reflexo mais claro do piso fica acima de 5:1 */
.hero-midia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.9) 12%,rgba(0,0,0,.3) 20%,rgba(0,0,0,0) 27%,rgba(0,0,0,0) 54%,rgba(0,0,0,.66) 63%,rgba(0,0,0,.9) 75%,#000 90%)}
.hero-texto{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:-56vw;padding:0 var(--s-2)}

/* título: SUPERFAST (em cima, espaçamento normal) e CHALLENGE (embaixo, maior). Os dois na Rajdhani 700, caixa alta */
.nome{display:flex;flex-direction:column;align-items:center;font:700 clamp(60px,17.6vw,120px)/.88 var(--f-display);text-transform:uppercase;
  text-shadow:0 2px 16px rgba(0,0,0,.55)}
.nome-1{font-size:.56em;letter-spacing:.02em;line-height:1;margin-bottom:.02em}
/* SUPERFAST em vermelho (Matheus, 03/11/2026: "Coloque o SUPERFAST do titulo na cor vermelha"), hero e formulário.
   #FF2030 (vermelho vivo da marca, "realce sobre preto"): o #E5000C fica abaixo de 4,5:1 sobre o vídeo (medido no escuro e
   no aceso, 360 a 1920 px). Halo escuro curto atrás das letras: no celular, o SUPERFAST passa sobre os reflexos dos carros
   no vídeo aceso; um brilho vermelho clarearia o fundo junto das letras e baixaria o contraste. */
.nome-1{color:var(--sf-red-bright);text-shadow:0 0 .05em rgba(0,0,0,.9),0 0 .14em rgba(0,0,0,.85),0 0 .4em rgba(0,0,0,.55)}
.nome-2{letter-spacing:.01em}
/* letreiro de LED no CHALLENGE (letreiro.js; Matheus, 03/11/2026: "Coloque esse efeito no Challenge"): cada letra oscila
   entre 0,2 e 1 de opacidade com brilho branco, como os LEDs do teto da garagem. Cor do brilho em "r, g, b". */
[data-letreiro]{--letreiro-cor:255, 255, 255;--letreiro-cor-fora:255, 255, 255}
.led{display:inline}

/* títulos palavra por palavra (Matheus, 03/11/2026: "nos títulos coloque esse efeito de transição e blur e deixe mais suave",
   preset "fade-in-blur" do TextReveal): cada palavra sai de desfoque de 12 px, opacidade 0 e 20 px abaixo, com 45 ms entre
   palavras e 0,7 s de duração, em ease-out ("mais suave" que o componente, que usa 0,3 s). filter só nos títulos.
   .palavras-carga (hero, formulário, resultados): entra ao abrir, só com CSS, para não piscar antes do JavaScript.
   .palavras (títulos das seções): o pagina.js separa as palavras e dispara quando o título aparece na tela.
   O título fica com aria-label; as palavras, com aria-hidden. CLS zero. */
.pal{display:inline-block}
.palavras-carga .pal:nth-child(2),.nome-2{--i:1}.palavras-carga .pal:nth-child(3){--i:2}.palavras-carga .pal:nth-child(4){--i:3}
@media (prefers-reduced-motion:no-preference){
  .palavras-carga .pal{animation:revela 700ms ease-out both;animation-delay:calc(120ms + var(--i,0) * 45ms)}
  .revela-viva .palavras .pal{transition:opacity 700ms ease-out,filter 700ms ease-out,transform 700ms ease-out;transition-delay:calc(var(--i,0) * 45ms)}
  .revela-viva .palavras:not(.visto) .pal{opacity:0;filter:blur(12px);transform:translateY(20px)}
}
@keyframes revela{from{opacity:0;filter:blur(12px);transform:translateY(20px)}}

.hero .sub{max-width:30em;margin-top:var(--s-2);font-size:18px;line-height:1.45;color:var(--sf-text);text-wrap:balance}
.hero-cta{margin-top:var(--s-3)}
.apoio{max-width:34em;margin-top:var(--s-15);font-size:13px;line-height:1.5;color:var(--sf-text-2);text-wrap:pretty}


/* celular baixo (360×640 e afins): corta mais do teto para o botão continuar na primeira tela */
@media (max-width:699px) and (max-height:740px){.hero-midia{aspect-ratio:720/960}}

@media (min-width:700px) and (max-width:959px){
  .hero-midia{aspect-ratio:16/9}
  .hero-quadro,.hero-video{object-position:50% 62%}
  .hero-midia::after{background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 66%,rgba(0,0,0,.7) 80%,#000 97%)}
  .hero-texto{margin-top:-9vw}
  .nome{font-size:clamp(72px,12vw,100px)}
  .hero .sub,.hero-cta{max-width:520px}
}

/* entrada da primeira tela: na diagonal da marca (de baixo-esquerda, ~6°), 260 ms, sem quique. A foto só acende (opacidade) */
@media (prefers-reduced-motion:no-preference){
  .hero .sub,.hero-cta,.apoio{animation:entra var(--sf-dur-3) var(--sf-ease) both}
  .hero-midia{animation:acende var(--sf-dur-3) var(--sf-ease) both}
  .hero .sub{animation-delay:380ms}.hero-cta{animation-delay:460ms}.apoio{animation-delay:520ms}
}
@keyframes entra{from{opacity:0;transform:translate(-24px,2.5px)}}
@keyframes acende{from{opacity:0}}

/* ---------- seções: fundo de ponta a ponta, conteúdo na coluna de leitura ----------
   Ordem dos fundos (Matheus, 03/11/2026): hero escuro → pódio vermelho → como funciona branco → escolha seu desafio escuro →
   regras branco → entre no grid vermelho → rodapé escuro. No escuro aparece a malha de pontos; no vermelho, a textura da
   parte vermelha da link na bio; no branco, texto #070708 e vermelho só de destaque (#E5000C sobre branco: 4,84:1). */
.secao{margin:0 calc(-1 * var(--s-2));padding:var(--s-8) var(--s-2)}
/* main .secao>* vence o "margin:0" das listas (.trilha, .regras, .chips), que antes as encostava na borda esquerda */
main .secao>*{max-width:var(--coluna);margin-inline:auto}
/* linhas de leitura de até ~65 caracteres */
.passo-txt>span,.tempo-leg,.intro,.premios-apoio,.premios-regra,.reg-corpo p,.reg-corpo li,.rodape p,.res-nota{max-width:65ch}
.secao>.titulo{margin-bottom:var(--s-3)}
.fundo-vermelho{color:#fff;background:var(--sf-red) radial-gradient(circle,rgba(0,0,0,.16) 1.05px,transparent 1.6px) 0 0/19px 19px}
.fundo-vermelho .sobre{color:#fff}
.fundo-vermelho .sobre::before{background:#fff}
.fundo-vermelho .confirmar{border-color:#fff;color:#fff}             /* branco sobre #E5000C: 4,84:1 */
.fundo-vermelho a:focus-visible,.fundo-vermelho button:focus-visible{outline-color:#fff}
.fundo-branco{background:#fff;color:var(--sf-black)}
.fundo-branco .confirmar{border-color:var(--sf-red);color:var(--sf-red)}
.fundo-branco a:focus-visible,.fundo-branco button:focus-visible,.fundo-branco summary:focus-visible{outline-color:var(--sf-red)}

/* entrada em sequência (etapas, cartões, regras): o pagina.js põe .visto quando o bloco aparece na tela */
@media (prefers-reduced-motion:no-preference){
  .revela-viva [data-revela]>*{transition:opacity var(--sf-dur-3) var(--sf-ease),transform var(--sf-dur-3) var(--sf-ease)}
  .revela-viva [data-revela]:not(.visto)>*{opacity:0;transform:translate(-24px,2.5px)}
  .revela-viva [data-revela]>:nth-child(2){transition-delay:90ms}.revela-viva [data-revela]>:nth-child(3){transition-delay:180ms}
  .revela-viva [data-revela]>:nth-child(4){transition-delay:270ms}.revela-viva [data-revela]>:nth-child(5){transition-delay:360ms}
}

/* ---------- pódio (vermelho): os 3 melhores tempos abaixo do Jhonata ----------
   Desenho do pódio (2º à esquerda, 1º no centro e mais alto, 3º à direita), com os degraus subindo ao aparecer, e a lista dos
   prêmios embaixo (no computador, cada prêmio sob o seu degrau). Escolhi o mesmo desenho no celular, compacto, porque o pódio se
   lê de relance mesmo com 360 px e a lista embaixo leva o texto inteiro, legível. */
.premios{margin:0 calc(-1 * var(--s-2));padding:var(--s-8) var(--s-2);text-align:center}
.premios-dentro{max-width:var(--coluna);margin:0 auto}
.premios-titulo{font:700 clamp(40px,12vw,64px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.premios-apoio{max-width:28em;margin:var(--s-15) auto 0;font-size:17px;line-height:1.45}
.podio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:var(--s-1);max-width:520px;margin:var(--s-4) auto 0;padding-top:var(--s-1);overflow:hidden}
.degrau{display:flex;flex-direction:column;align-items:center;gap:var(--s-1);min-width:0}
.degrau-2{order:1}.degrau-1{order:2}.degrau-3{order:3}
.degrau-topo{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:56px}
.degrau-topo .num{font:500 clamp(28px,8.4vw,44px)/1 var(--f-data);letter-spacing:-.02em}
.degrau-topo small{font:700 11px/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase}
.degrau-topo .roleta{width:clamp(36px,10vw,52px);height:auto;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter}
.surpresa{position:relative;width:100%;max-width:170px;padding:var(--s-1);border:1px solid rgba(255,32,48,.5);border-radius:var(--sf-r2);background:var(--sf-black)}
.surpresa img{display:block;width:100%;height:auto}
.surpresa-q{position:absolute;inset:0;display:grid;place-items:center;font:700 clamp(64px,19vw,120px)/1 var(--f-display);color:var(--sf-red-bright);
  text-shadow:0 0 22px rgba(229,0,12,.7),0 0 2px #000}
.base{display:grid;place-items:center;width:100%;border-top:3px solid rgba(255,255,255,.7);border-radius:var(--sf-r2) var(--sf-r2) 0 0;background:var(--sf-black)}
.base span{font:700 clamp(44px,13vw,72px)/1 var(--f-display);color:#fff}
.degrau-1 .base{height:clamp(104px,29vw,190px);border-top-color:#fff}
.degrau-1 .base span{font-size:clamp(60px,18vw,104px)}
.degrau-2 .base{height:clamp(76px,21vw,140px)}
.degrau-3 .base{height:clamp(56px,15vw,100px)}
/* subida: os degraus saem do chão (3º, 2º e por último o 1º) e o prêmio aparece em cima de cada um */
@media (prefers-reduced-motion:no-preference){
  .revela-viva .podio .base{transition:transform var(--sf-dur-3) var(--sf-ease)}
  .revela-viva .podio .degrau-topo{transition:opacity var(--sf-dur-3) var(--sf-ease),transform var(--sf-dur-3) var(--sf-ease)}
  .revela-viva .podio:not(.visto) .base{transform:translateY(101%)}
  .revela-viva .podio:not(.visto) .degrau-topo{opacity:0;transform:translateY(16px)}
  .revela-viva .podio .degrau-2 .base{transition-delay:90ms}.revela-viva .podio .degrau-1 .base{transition-delay:180ms}
  .revela-viva .podio .degrau-3 .degrau-topo{transition-delay:280ms}.revela-viva .podio .degrau-2 .degrau-topo{transition-delay:360ms}
  .revela-viva .podio .degrau-1 .degrau-topo{transition-delay:460ms}
}
.premios-lista{display:grid;gap:var(--s-1);max-width:520px;margin:var(--s-3) auto 0;padding:0;list-style:none;text-align:left}
.premios-lista li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:var(--s-15);row-gap:4px;
  padding:var(--s-15) var(--s-2);border-radius:var(--sf-r2);background:rgba(0,0,0,.28)}
.premios-lista .lugar-1{background:var(--sf-black);box-shadow:inset 0 0 0 1px rgba(255,32,48,.55)}
.lugar-n{grid-row:1/3;min-width:4.4em;font:700 13px/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase}
.premios-lista b{font:700 22px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.premios-lista .confirmar{justify-self:start}
.lugar-obs{grid-column:2;font-size:15px;line-height:1.45}
.premios-regra{margin:var(--s-3) auto 0;font-size:16px;line-height:1.5}
.premios-ver{display:inline-flex;align-items:center;gap:var(--s-1);min-height:48px;margin-top:var(--s-1);padding:0 var(--s-1);
  font:700 16px/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:underline;text-underline-offset:6px}
.premios-ver svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square}
/* roleta girando devagar e "?" pulsando (só transform e opacity) */
.roda{transform-box:view-box;transform-origin:12px 13.5px}
@media (prefers-reduced-motion:no-preference){
  .roda{animation:roda 9s linear infinite}
  .surpresa-q{animation:pergunta 3s ease-in-out infinite}
}
@keyframes roda{to{transform:rotate(360deg)}}
@keyframes pergunta{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}

/* ---------- como funciona: trilha com 4 passos; a linha vermelha avança com a rolagem (pagina.js) ---------- */
.trilha{position:relative;margin:0;padding:0;list-style:none;--p:1;--fim:28px}
.trilha::before,.trilha::after{content:"";position:absolute;left:23px;top:24px;bottom:var(--fim);width:2px}
.trilha::before{background:var(--sf-border)}
.trilha::after{background:var(--sf-red);transform-origin:50% 0;transform:scaleY(var(--p))}
.passo{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-2);align-items:start}
.passo+.passo{margin-top:var(--s-3)}
.passo-ic{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--sf-border);
  border-radius:var(--sf-r2);background:var(--sf-s1)}
.passo-ic::after{content:"";position:absolute;inset:-1px;border:1px solid var(--sf-red-bright);border-radius:inherit}
/* brilho vermelho só no passo da ponta (o último aceso; sem animação, o 4º), em camada própria com opacidade */
.passo-ic::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 16px rgba(229,0,12,.45);opacity:0;transition:opacity var(--sf-dur-3) var(--sf-ease)}
.trilha:not(.com-ponta) .passo:last-child .passo-ic::before,.passo.ponta .passo-ic::before{opacity:1}
.passo-ic svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:1.4;stroke-linecap:square;stroke-linejoin:miter}
.passo-txt{display:block;padding-top:var(--s-05)}
.passo-txt b{display:block;font:700 18px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.passo-txt>span{display:block;margin-top:var(--s-05);font-size:15px;line-height:1.45;color:var(--sf-text-2)}
/* com JavaScript e movimento: apagado até a linha chegar */
/* revisão técnica (03/11): o texto do passo apagado continua com contraste cheio (antes, a 40 %, dava 2,6:1); apagam só o
   ícone, a borda vermelha e a linha */
.trilha-viva .passo-ic::after{transition:opacity var(--sf-dur-3) var(--sf-ease)}
.trilha-viva .passo-ic svg{transition:transform var(--sf-dur-3) var(--sf-ease),opacity var(--sf-dur-3) var(--sf-ease)}
.trilha-viva .passo:not(.aceso) .passo-ic::after{opacity:0}
.trilha-viva .passo:not(.aceso) .passo-ic svg{transform:scale(.86);opacity:.45}
/* ícones (só transform e opacity; parados e completos com "reduzir movimento" ou sem JavaScript):
   inscrição, as linhas se escrevem · WhatsApp, o check aparece · agenda, a folha vira · cronômetro, o ponteiro gira */
.passo-ic .linha,.passo-ic .check,.passo-ic .folha,.passo-ic .dia{transform-box:fill-box}
.passo-ic .linha{transform-origin:0 50%}
.passo-ic .check{transform-origin:30% 70%}
.passo-ic .folha,.passo-ic .dia{transform-origin:50% 0}
.passo-ic .ponteiro{transform-box:view-box;transform-origin:12px 14px}
.trilha-viva .passo-ic .linha{transition:transform var(--sf-dur-3) var(--sf-ease)}
.trilha-viva .passo-ic .linha:nth-child(3){transition-delay:110ms}.trilha-viva .passo-ic .linha:nth-child(4){transition-delay:220ms}
.trilha-viva .passo:not(.aceso) .linha{transform:scaleX(0)}
.trilha-viva .passo-ic .check{transition:transform var(--sf-dur-3) var(--sf-ease) 120ms,opacity var(--sf-dur-3) var(--sf-ease) 120ms}
.trilha-viva .passo:not(.aceso) .check{opacity:0;transform:scale(.3)}
.trilha-viva .passo.aceso .dia{animation:folha var(--sf-dur-3) var(--sf-ease) 80ms both}
.trilha-viva .passo.aceso .folha{animation:folha var(--sf-dur-3) var(--sf-ease) both}
.trilha-viva .passo.aceso .ponteiro{animation:ponteiro var(--sf-dur-3) var(--sf-ease) 60ms both}
@keyframes folha{0%{transform:scaleY(1)}45%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes ponteiro{from{transform:rotate(-270deg)}}
/* no fundo branco */
.fundo-branco .trilha::before{background:#D6D7DA}
.fundo-branco .passo-ic{border-color:#B9BABF;background:#fff}
.fundo-branco .passo-ic::after{border-color:var(--sf-red)}
.fundo-branco .passo-ic svg{stroke:var(--sf-black)}
.fundo-branco .passo-txt>span{color:#3A3B3F}

/* ---------- escolha seu desafio: abas por carro ---------- */
.abas-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-05);padding:var(--s-05);
  border:1px solid var(--sf-border);border-radius:var(--sf-r2);background:var(--superficie)}
html:not(.js) .abas-lista{display:none}
.abas-lista button{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-height:64px;
  padding:var(--s-1) 10px;border:0;border-radius:var(--sf-r1);background:transparent;color:var(--sf-text-2);text-align:left;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.abas-lista button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sf-red);transform:scaleX(0);
  transform-origin:0 50%;transition:transform var(--sf-dur-3) var(--sf-ease)}
.abas-lista button[aria-selected="true"]{background:var(--sf-s3);color:#fff}
.abas-lista button[aria-selected="true"]::after{transform:scaleX(1)}
.abas-lista b{font:700 clamp(17px,4.6vw,26px)/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.abas-lista small{font:700 11px/1.2 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
@media (hover:hover){.abas-lista button:hover{color:#fff}}
.abas-lista button:focus-visible{outline-offset:-2px}
.painel{margin-top:var(--s-1);padding:var(--s-1) var(--s-2);border:1px solid var(--sf-border);border-radius:var(--sf-r2);background:var(--superficie)}
.js .painel-carro{display:none}
.painel-carro{padding:var(--s-1) 0;font:700 15px/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){.js .painel:not([hidden]){animation:painel var(--sf-dur-3) var(--sf-ease) both}}
@keyframes painel{from{opacity:0;transform:translateX(-12px)}}
.tempos{margin:0}
.tempos>div{display:flex;align-items:center;justify-content:space-between;gap:var(--s-15);min-height:56px;border-bottom:1px solid var(--sf-border)}
.tempos>div:last-child{border-bottom:0}
.tempos dt{font:700 16px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.tempos dd{margin:0}
/* tempo: dígitos de largura fixa; milésimos menores e em vermelho. .a-definir = o tempo ainda não veio da API */
.t{display:inline-block;font:500 20px/1 var(--f-data);font-variant-numeric:tabular-nums;color:var(--sf-text);white-space:nowrap}
.t em{font-style:normal;font-size:.68em;color:var(--sf-red-bright)}
.t.a-definir{font:500 14px/1 var(--f-data);letter-spacing:.02em;color:var(--sf-text-2)}
.tempo-leg{margin-top:var(--s-15);font-size:13px;line-height:1.7;color:var(--sf-text-2)}
.chips-t{margin-top:var(--s-3);font:700 15px/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-1);margin:var(--s-15) 0 0;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:6px;min-height:32px;padding:var(--s-05) var(--s-15);border:1px solid var(--sf-border);
  border-radius:var(--sf-r1);background:var(--superficie);font:700 13px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.chips li::before{content:"";width:8px;height:8px;background:linear-gradient(45deg,transparent 42%,var(--sf-red-bright) 42% 58%,transparent 58%),
  linear-gradient(-45deg,transparent 42%,var(--sf-red-bright) 42% 58%,transparent 58%)}
/* o × entra girando quando a lista aparece na tela (pagina.js põe .visto); sem JS ou com "reduzir movimento", já está lá */
.chips-vivos .chips li::before{transition:transform var(--sf-dur-3) var(--sf-ease),opacity var(--sf-dur-3) var(--sf-ease)}
.chips-vivos .chips:not(.visto) li::before{opacity:0;transform:scale(.2) rotate(-135deg)}
.chips-vivos .chips li:nth-child(2)::before{transition-delay:70ms}.chips-vivos .chips li:nth-child(3)::before{transition-delay:140ms}
.chips-vivos .chips li:nth-child(4)::before{transition-delay:210ms}.chips-vivos .chips li:nth-child(5)::before{transition-delay:280ms}

/* ---------- regras ---------- */
.regras{margin:0;padding:0;list-style:none}
.regras li{position:relative;padding:var(--s-15) 0 var(--s-15) var(--s-4);border-top:1px solid var(--sf-border);color:var(--sf-text)}
.regras li:last-child{border-bottom:1px solid var(--sf-border)}
.regras li::before{content:"";position:absolute;left:4px;top:calc(var(--s-15) + 8px);width:10px;height:10px;border:2px solid var(--sf-red-bright);border-radius:1px}
.horario{font:500 14px/1.6 var(--f-data);letter-spacing:.02em;white-space:nowrap}
/* "Como chegar" (mesma busca do mapa da link na bio), com alvo de 48 px sem mexer na linha */
.mapa{display:inline-block;padding:12px 4px;margin:-12px 0;color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.fundo-branco .regras li{border-color:#E1E2E5;color:var(--sf-black)}
.fundo-branco .regras li::before{border-color:var(--sf-red)}

/* ---------- regulamento (<details>) ---------- */
.regras+.regulamento{margin-top:var(--s-4)}
.regulamento{border:1px solid var(--sf-border);border-radius:var(--sf-r2);background:var(--superficie)}
.regulamento summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:var(--s-15);min-height:64px;
  padding:var(--s-15) var(--s-2);cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.regulamento summary::-webkit-details-marker{display:none}
.reg-nome{font:700 18px/1.2 var(--f-label);letter-spacing:.12em;text-transform:uppercase}
.reg-versao{grid-row:2;font-size:13px;color:var(--sf-text-2)}
.regulamento summary svg{grid-row:1/3;grid-column:2;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;
  transition:transform var(--sf-dur-2) var(--sf-ease)}
.regulamento[open] summary svg{transform:rotate(180deg)}
.reg-corpo{padding:0 var(--s-2) var(--s-3);border-top:1px solid var(--sf-border)}
.reg-corpo h3{margin:var(--s-3) 0 var(--s-1);font:700 16px/1.25 var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.reg-corpo p,.reg-corpo li{font-size:14px;line-height:1.6;color:var(--sf-text-2)}
.reg-corpo p+p{margin-top:var(--s-05)}
.reg-dest{font-weight:400;color:var(--sf-text)}
.reg-corpo .i{margin-right:6px;font:500 12px/1 var(--f-data);color:var(--sf-text-3)}
.reg-lista{margin:var(--s-05) 0;padding-left:1.4em}
/* no fundo branco: cartão branco com borda (o vermelho #E5000C das etiquetas precisa de fundo branco puro para passar de 4,5:1) */
.fundo-branco .regulamento{border-color:#C9CACE;background:#fff;color:var(--sf-black)}
.fundo-branco .reg-versao{color:#3A3B3F}
.fundo-branco .reg-corpo{border-color:#E1E2E5}
.fundo-branco .reg-corpo p,.fundo-branco .reg-corpo li{color:#3A3B3F}
.fundo-branco .reg-corpo .i{color:#5C5D63}
.fundo-branco .reg-dest{color:var(--sf-black)}

/* ---------- fecho: ENTRE NO GRID (vermelho, a seção mais forte; a última etapa) ----------
   Luzes de largada: 5 luzes que acendem uma a uma e apagam juntas, como na F1 (só a opacidade de cada luz). Quando apagam, a
   faixa de brilho atravessa o botão (botoes.js). Sem JavaScript ou com "reduzir movimento": as 5 acesas, paradas. */
.final{margin:0 calc(-1 * var(--s-2));padding:var(--s-8) var(--s-2) calc(var(--s-8) + var(--s-2));text-align:center}
.final-dentro{display:flex;flex-direction:column;align-items:center;max-width:var(--coluna);margin:0 auto}
.largada{display:flex;gap:clamp(8px,2.6vw,14px);padding:var(--s-15) var(--s-2);border-radius:var(--sf-r2);background:var(--sf-black);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.largada i{position:relative;width:clamp(26px,8vw,40px);aspect-ratio:1;border-radius:50%;background:#3A0004;box-shadow:inset 0 0 0 2px #1A1A1C}
.largada i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--sf-red-bright);
  box-shadow:0 0 18px rgba(255,32,48,.9),inset 0 0 6px rgba(255,255,255,.55);opacity:1}
.revela-viva .largada i::after{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .revela-viva .final.visto .largada i::after{animation:luz 1800ms linear forwards}
  .revela-viva .final.visto .largada i:nth-child(2)::after{animation-delay:300ms;animation-duration:1500ms}
  .revela-viva .final.visto .largada i:nth-child(3)::after{animation-delay:600ms;animation-duration:1200ms}
  .revela-viva .final.visto .largada i:nth-child(4)::after{animation-delay:900ms;animation-duration:900ms}
  .revela-viva .final.visto .largada i:nth-child(5)::after{animation-delay:1200ms;animation-duration:600ms}
}
@keyframes luz{from{opacity:1}99%{opacity:1}to{opacity:0}}
.final-titulo{margin-top:var(--s-4);font:700 clamp(52px,16vw,112px)/.92 var(--f-display);text-transform:uppercase;letter-spacing:.01em}
.final-apoio{margin-top:var(--s-15);font:700 16px/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.cta-final{max-width:520px;min-height:80px;margin-top:var(--s-4);padding:var(--s-2) var(--s-3);font-size:clamp(19px,5.1vw,24px);letter-spacing:.12em}
.cta-final .ic{width:30px;height:30px}

/* ---------- rodapé compacto ---------- */
.rodape{max-width:var(--coluna);margin:0 auto;padding:var(--s-4) var(--s-2) calc(var(--s-3) + env(safe-area-inset-bottom,0px));text-align:center;font-size:12px;line-height:1.6;color:var(--sf-text-2)}
.rodape p+p{margin-top:var(--s-05)}
.rodape-nome{font:700 12px/1.5 var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--sf-text)}
.rodape a{display:inline-block;min-height:48px;padding:0 4px;line-height:48px;color:var(--sf-text);text-underline-offset:3px}   /* alvo de 48 px */
.rodape .rodape-zap{justify-content:center;gap:var(--s-2);margin-top:var(--s-05)}
.rodape-zap .copia-manual{text-align:left}

/* ================= aba Resultados (resultados.html) ================= */
.res-cab{text-align:center;padding-bottom:var(--s-6)}
.res-cab .titulo{font-size:clamp(36px,10vw,64px)}
.res-nota{margin:var(--s-15) auto 0;color:var(--sf-text-2)}
.res-nota a{color:var(--sf-text);text-underline-offset:3px}
.res-contagem{margin-top:var(--s-1);font:500 14px/1.5 var(--f-data);color:var(--sf-text)}
.res-estado{display:grid;justify-items:center;gap:var(--s-3);padding:var(--s-4) 0;text-align:center;font-size:18px}
.res-estado-t{max-width:26em;font:700 clamp(24px,7vw,34px)/1.15 var(--f-display);text-transform:uppercase}
.res-cta{width:auto;min-width:min(100%,320px)}
.podio-res{list-style:none;padding:var(--s-1) 0 0}
.res-topo{min-height:0;gap:2px;padding-bottom:var(--s-05);text-align:center}
.res-nome{font:700 clamp(17px,4.8vw,26px)/1.1 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere}
.res-vago{opacity:.75}
.res-pct{font:500 clamp(11px,2.9vw,13px)/1.35 var(--f-data)}
.res-det{font:700 clamp(10px,2.7vw,12px)/1.3 var(--f-label);letter-spacing:.06em;text-transform:uppercase}
.res-tempo{font-size:clamp(15px,4.2vw,20px)}
.res-carro{display:none}
@media (min-width:700px){.res-carro{display:inline}}
.res-tempo em{color:#fff}
.res-lista{display:grid;gap:var(--s-1);margin:0 auto;padding:0;list-style:none}
.res-lista li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s-15);padding:var(--s-15) var(--s-2);
  border:1px solid var(--sf-border);border-radius:var(--sf-r2);background:var(--superficie)}
.res-n{font:500 16px/1 var(--f-data);color:var(--sf-text-2)}
.res-meio{display:grid;gap:2px;min-width:0}
.res-meio .res-nome{font-size:20px}
.res-meio .res-det{color:var(--sf-text-2);font-size:12px}
.res-fim{display:grid;justify-items:end;gap:2px;text-align:right}
.res-fim .res-pct{color:var(--sf-text-2);font-size:12px}
.tabela-rolar{overflow-x:auto}
.tabela-jhonata{width:100%;border-collapse:collapse;font-size:14px}
.tabela-jhonata th,.tabela-jhonata td{padding:var(--s-15) 4px;border-bottom:1px solid #E1E2E5;text-align:center}
.tabela-jhonata .t{font-size:clamp(14px,3.9vw,22px)}
.tabela-jhonata .t.a-definir{font-size:clamp(11px,3vw,14px)}
.tabela-jhonata thead th{font:700 clamp(10px,2.8vw,12px)/1.2 var(--f-label);letter-spacing:.08em;text-transform:uppercase;color:#3A3B3F;overflow-wrap:anywhere}
.tabela-jhonata tbody th{text-align:left}
.tabela-jhonata tbody th b{display:block;font:700 clamp(15px,4.4vw,20px)/1.1 var(--f-display);text-transform:uppercase}
.tabela-jhonata tbody th span{font:700 clamp(9px,2.6vw,11px)/1.2 var(--f-label);letter-spacing:.06em;text-transform:uppercase;color:#3A3B3F}
.fundo-branco .t{color:var(--sf-black)}
.fundo-branco .t em{color:var(--sf-red)}
.fundo-branco .t.a-definir{color:#3A3B3F}
.fundo-branco .tempo-leg{color:#3A3B3F}

/* ================= página do formulário (inscricao.html) ================= */
.cab{display:flex;flex-direction:column;align-items:center;gap:var(--s-15);padding-left:var(--s-2);padding-right:var(--s-2)}
.nome-pq{font-size:44px;text-shadow:none}
.pg-form .secao{padding-top:var(--s-4)}
.inscricao .titulo{margin-top:var(--s-05)}
.form{position:relative;display:grid;gap:var(--s-4);margin-top:var(--s-3)}
.card{background:var(--superficie);border:1px solid var(--sf-border);border-radius:var(--sf-r2);padding:var(--s-3) var(--s-2)}
.card.barra{border-top:3px solid var(--sf-red)}
.campo{display:grid;gap:var(--s-05);min-width:0;margin:0;padding:0;border:0}
.campo>label,.campo legend{font:700 15px/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--sf-text)}
.campo legend{float:left;width:100%;padding:0;margin-bottom:var(--s-05)}
.campo legend+*{clear:both}
.opc{color:var(--sf-text-2);letter-spacing:.06em}
.obr{color:var(--sf-red-bright)}
.ajuda{font-size:14px;line-height:1.45;color:var(--sf-text-2)}
.erro{padding-left:var(--s-1);border-left:2px solid var(--sf-red-bright);font-size:14px;line-height:1.4;color:var(--sf-red-bright)}
.campo input[type=text],.campo input[type=tel],.campo input[type=email],.campo textarea{
  display:block;width:100%;min-height:56px;margin-top:var(--s-05);padding:var(--s-15) var(--s-2);
  border:1px solid var(--sf-text-3);border-radius:var(--sf-r2);background:var(--sf-s2);color:var(--sf-text);
  font:400 16px/1.4 var(--f-body);-webkit-appearance:none;appearance:none}
.campo textarea{min-height:104px;resize:vertical}
.campo #f-convite{font-family:var(--f-data);font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.campo #f-convite::placeholder{text-transform:none}
::placeholder{color:var(--sf-text-3);opacity:1}
.campo input:focus,.campo textarea:focus{outline:2px solid var(--sf-red-bright);outline-offset:2px;border-color:var(--sf-text-2)}
.campo [aria-invalid=true]{border-color:var(--sf-red-bright)}
.contador{text-align:right;font:500 12px/1 var(--f-data);color:var(--sf-text-2)}
.contador.passou{color:var(--sf-red-bright)}

/* opções (rádio e caixa): a linha inteira é o alvo de toque; o controle nativo fica invisível mas acessível */
.opcoes{display:grid;gap:var(--s-1);margin-top:var(--s-1)}
.opcao{position:relative;display:flex;align-items:flex-start;gap:var(--s-15);min-height:56px;padding:var(--s-15) var(--s-2);
  border:1px solid var(--sf-border);border-radius:var(--sf-r2);background:var(--sf-s2);cursor:pointer;color:var(--sf-text);
  -webkit-tap-highlight-color:transparent}
.opcao input{position:absolute;left:var(--s-2);top:var(--s-15);width:20px;height:20px;margin:0;opacity:0}
.caixa{flex:none;position:relative;width:20px;height:20px;margin-top:2px;border:1.5px solid var(--sf-text-2);border-radius:var(--sf-r1);background:var(--sf-black)}
.opcao>span{min-width:0}
.opcao b{display:block;font:700 16px/1.25 var(--f-label);letter-spacing:.1em;text-transform:uppercase}
.opcao small{display:block;margin-top:2px;font-size:14px;line-height:1.4;color:var(--sf-text-2)}
.opcao:has(input:checked){border-color:var(--sf-red);background:var(--sf-s3)}
.opcao input:checked+.caixa{border-color:var(--sf-red-bright);background:var(--sf-red)}
.opcao input[type=radio]:checked+.caixa::after{content:"";position:absolute;inset:4px;background:#fff;border-radius:1px}
.opcao input[type=checkbox]:checked+.caixa::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.opcao input:focus-visible+.caixa{outline:2px solid var(--sf-red-bright);outline-offset:3px}
.opcao:has(input:focus-visible){border-color:var(--sf-red-bright)}
.campo.invalido .opcao .caixa{border-color:var(--sf-red-bright)}
@media (min-width:600px){.opcoes.tres{grid-template-columns:repeat(3,minmax(0,1fr))}.opcoes.duas{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tipo .opcao{min-height:64px}
.tipo .opcao b{font-size:17px}
.aceites{gap:var(--s-15)}
.aceite{background:transparent}
.aceite .txt{display:block;margin:0;font-size:15px;line-height:1.5;color:var(--sf-text)}
.aceite .txt small{display:block;margin-top:var(--s-05)}
.aceite a{display:inline-block;padding:13px 2px;margin:-13px 0;color:var(--sf-text);text-decoration:underline;text-underline-offset:3px}   /* alvo de 48 px sem mexer na linha */

/* isca para robôs: fora da tela */
.isca{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}

.privacidade{font-size:14px;line-height:1.5;color:var(--sf-text-2)}
.enviar{margin-top:calc(-1 * var(--s-15))}
/* enviando: barra branca que corre na base do botão (só transform) */
.enviar::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:#fff;transform:scaleX(0);transform-origin:0 50%;opacity:0}
.enviar.enviando{cursor:progress}
.enviar.enviando::before{opacity:1}
@media (prefers-reduced-motion:no-preference){.enviar.enviando::before{animation:corre 1.1s var(--sf-ease) infinite}}
@media (prefers-reduced-motion:reduce){.enviar.enviando::before{transform:scaleX(1);opacity:.5}}
@keyframes corre{0%{transform:scaleX(0);transform-origin:0 50%}50%{transform:scaleX(1);transform-origin:0 50%}50.1%{transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}

/* resumo de erros (topo do formulário) e avisos */
.resumo{padding:var(--s-2);border:1px solid var(--sf-red-bright);border-left-width:3px;border-radius:var(--sf-r2);background:var(--sf-black)}
.resumo:focus{outline:none}
.resumo:focus-visible{outline:2px solid var(--sf-red-bright);outline-offset:3px}
.resumo-titulo{font:700 17px/1.3 var(--f-label);letter-spacing:.08em;text-transform:uppercase}
.resumo-lista{margin:var(--s-1) 0 0;padding-left:1.1em;color:var(--sf-red-bright)}
.resumo-lista li{margin-top:var(--s-05)}
.resumo-lista a{color:var(--sf-text);text-underline-offset:3px}
.aviso-envio{padding:var(--s-15) var(--s-2);border-left:3px solid var(--sf-red);border-radius:var(--sf-r1);background:var(--sf-black);font-size:15px;color:var(--sf-text)}
noscript .aviso-envio{display:block;margin-top:var(--s-2)}

.falha{display:grid;gap:var(--s-15);padding:var(--s-2);border:1px solid var(--sf-border);border-left:3px solid var(--sf-red);border-radius:var(--sf-r2);background:var(--sf-black);color:var(--sf-text-2)}
.falha:focus{outline:none}
.falha:focus-visible{outline:2px solid var(--sf-red-bright);outline-offset:3px}
.falha-titulo{font:700 22px/1.15 var(--f-display);text-transform:uppercase;color:var(--sf-text)}
.planob{display:flex;align-items:center;justify-content:space-between;gap:var(--s-15);flex-wrap:wrap;font-size:14px;color:var(--sf-text-2)}
.planob b{font-weight:400;color:var(--sf-text);font-family:var(--f-data);font-size:14px}
.planob button{min-height:48px;padding:0 var(--s-2);border-radius:var(--sf-r2);border:1px solid var(--sf-text-3);background:var(--sf-s2);color:var(--sf-text);
  font:700 13px/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}

/* copiar sem área de transferência (navegador do Instagram): campo só de leitura já selecionado */
.copia-manual{flex-basis:100%;grid-column:1/-1;display:grid;gap:var(--s-05);margin-top:var(--s-1)}
.copia-aviso{font:700 13px/1.3 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--sf-text)}
.copia-manual textarea{width:100%;padding:var(--s-15);border:1px solid var(--sf-text-3);border-radius:var(--sf-r2);background:var(--sf-s2);color:var(--sf-text);
  font:500 14px/1.5 var(--f-data);resize:none;-webkit-user-select:text;user-select:text}
.copia-manual textarea:focus{outline:2px solid var(--sf-red-bright);outline-offset:2px}

/* sem JavaScript: aviso com o WhatsApp no lugar do formulário */
.sem-js{display:grid;gap:var(--s-15);margin-top:var(--s-3)}
.sem-js .botao{justify-content:center}

/* regulamento dentro do formulário (carregado da página principal) */
.reg-form{margin-top:var(--s-1);background:var(--sf-black)}

/* sucesso */
.sucesso{display:grid;gap:var(--s-15);margin-top:var(--s-3)}
.sucesso:focus{outline:none}
.sucesso:focus-visible{outline:2px solid var(--sf-red-bright);outline-offset:3px}
.sucesso .sobre{margin:0}
.codigo{font:500 clamp(40px,12.5vw,64px)/1 var(--f-data);letter-spacing:.02em;color:var(--sf-text);overflow-wrap:anywhere}
.codigo-leg{font:700 13px/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--sf-text-2)}
.sucesso h2.titulo{margin-top:var(--s-2);font-size:clamp(26px,7vw,34px)}
.rot-s{margin-top:var(--s-1);font:700 13px/1.3 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--sf-text-2)}
.passos-s{display:grid;gap:var(--s-1);margin:0;padding:0;list-style:none}
.passos-s li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:var(--s-15);color:var(--sf-text-2)}
.n{font:500 14px/1.6 var(--f-data);color:var(--sf-red-bright)}
.zap-digitado{font:500 15px/1.4 var(--f-data);color:var(--sf-text);white-space:nowrap}
.obs{font-size:14px;line-height:1.5;color:var(--sf-text-2)}
.obs a{color:var(--sf-text)}
.acoes{display:grid;gap:var(--s-15);margin-top:var(--s-1)}
.friend{display:grid;gap:var(--s-15);margin-top:var(--s-1);padding:var(--s-2);border:1px solid var(--sf-border);border-left:3px solid var(--sf-red);border-radius:var(--sf-r2);background:var(--sf-black)}
.friend .sobre{margin:0;color:var(--sf-text)}
.friend p{color:var(--sf-text-2)}
@media (prefers-reduced-motion:no-preference){.sucesso:not([hidden])>*{animation:entra var(--sf-dur-3) var(--sf-ease) both}}
.rodape-form{margin-top:var(--s-6);border-top:1px solid var(--sf-border)}

/* ---------- computador ---------- */
@media (min-width:960px){
  /* hero no computador (Matheus, 03/11/2026: "O titulo no desktop tem que ficar abaixo do led de colmeia").
     O vídeo 16:9 começa logo abaixo da barra (a barra não cobre a colmeia) e ocupa a largura toda, preso no alto
     (object-position 50% 0): assim cada ponto do quadro cai a uma altura fixa em vw, em qualquer janela.
     Medido no quadro 1920×1080: a colmeia termina em y 290 (15,1vw); os carros vão de y 588 (30,6vw) a 799 (41,6vw).
     Título e subtítulo ficam entre a colmeia e os carros; botão e linha de apoio, no piso, embaixo dos carros.
     Altura: a da tela (menos a barra), no máximo 16:9 e no mínimo o fim dos carros + 150 px (o botão nunca sobe neles). */
  .hero{--h:max(560px,min(56.25vw,calc(100svh - var(--barra))),calc(41.6vw + 150px));height:var(--h);margin-top:var(--barra);padding:0}
  .hero-midia{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 90%,transparent);mask-image:linear-gradient(180deg,#000 90%,transparent)}
  .hero-quadro,.hero-video{object-position:50% 0}
  /* escurecimento só onde há texto: atrás do título (a parede escura entre a colmeia e os carros) e no piso, atrás do botão.
     A colmeia e os carros ficam livres */
  .hero-midia::after{background:radial-gradient(42% 9.5vw at 50% 22.6vw,rgba(0,0,0,.6),rgba(0,0,0,0) 100%),
    linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 42vw,rgba(0,0,0,.72) calc(42vw + 70px),rgba(0,0,0,.92) calc(100% - 30px),#000 100%)}
  .hero-texto{position:absolute;inset:0;margin:0;padding:calc(15.1vw + clamp(12px,1.2vw,24px)) var(--s-2) clamp(20px,2.6vw,44px)}
  .nome{font-size:clamp(50px,4.6vw,104px);text-shadow:0 2px 18px rgba(0,0,0,.7)}
  .hero .sub{margin-top:var(--s-1);font-size:clamp(17px,1.15vw,24px);text-wrap:balance;text-shadow:0 1px 10px rgba(0,0,0,.8)}
  .hero-cta{width:auto;min-width:420px;margin-top:auto}
  .premios{padding:var(--s-8) var(--s-2)}
  /* pódio maior e a lista em 3 colunas, cada prêmio sob o seu degrau (2º, 1º, 3º) */
  .podio,.premios-lista{max-width:760px;gap:var(--s-2)}
  .premios-lista{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .premios-lista li{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;align-content:start}
  .premios-lista .lugar-2{order:1}.premios-lista .lugar-1{order:2}.premios-lista .lugar-3{order:3}
  .lugar-n{grid-row:auto;min-width:0}
  .premios-lista .confirmar{justify-self:center}
  .lugar-obs{grid-column:1}
  .surpresa{max-width:210px}
  .secao,.final,.rodape,.premios{--coluna:760px}
  .barra-topo{padding-left:max(var(--s-3),calc((100vw - var(--largo)) / 2));padding-right:max(var(--s-3),calc((100vw - var(--largo)) / 2))}
  .res-lista-sec,.res-cab{--coluna:760px}
}

/* telas estreitas (até 389 px, ex.: 360): barra e botão do hero numa linha só; o 390 fica como está.
   No fim do arquivo para valer por cima das regras de .botao e .cta-grande. */
@media (max-width:389px){
  .barra-topo{gap:var(--s-1);padding-left:var(--s-15);padding-right:var(--s-15)}
  .barra-nav{gap:var(--s-05)}
  .barra-link{padding:0 var(--s-1);font-size:14px;letter-spacing:.08em}
  .botao.barra-inscrever{padding:var(--s-1) var(--s-15);font-size:14px;letter-spacing:.08em}
  .botao.cta-grande{padding-left:var(--s-2);padding-right:var(--s-2);letter-spacing:.1em}
}