/* ==========================================================================
   app.css — identidade visual completa do site do convidado
   --------------------------------------------------------------------------
   Direção: editorial clara e quente — creme, cartões brancos com sombra
   suave. Tipografia e paleta reaproveitam o mesmo tema "Aquarela Pastel" já
   aplicado em public/convite/ (ver docs/design/convite-tema-aquarela-spec.md):
   'Dancing Script' cursiva para o nome/título de destaque, 'Nunito' no
   corpo, e os 4 acentos pastel fixos (rosa/azul/amarelo/lilás) usados só em
   decoração solta (balões/estrelas de fundo) — nunca como cor de resultado.
   Mantém intacta a regra de segurança que atravessa o arquivo inteiro:

   As classes .acento-menino e .acento-menina existem SEMPRE e
   SIMETRICAMENTE. É a aplicação de uma delas em tempo de execução — nunca
   a existência da regra — que revela o resultado. Ver app.js.

   Nas telas de voto/confirmação/espera/resultado, --acento carrega a cor
   do lado escolhido. Na tela inicial (boas-vindas) nenhuma classe de
   acento é aplicada: tudo ali usa o neutro, de propósito.
   ========================================================================== */

:root{
  --bg-900:#fbf6ef; --bg-card:#ffffff; --bg-alt:#f5efe3;
  --ink:#1e293b; --text-mid:#475569; --text-low:#64748b; /* piso 4,6:1 no branco — não escureça */

  --menino-core:#3d7eb8; --menino-forte:#2a5c8a; --menino-suave:#c7e2f2; --menino-vivo:#35b6f0;
  --menina-core:#d5588c; --menina-forte:#a83d6c; --menina-suave:#f7d6e4; --menina-vivo:#ff5fb0;

  --pilula-bg:#f8e7ab; --pilula-ink:#7a5b12;
  --ambar:#e08a1f; --erro:#c23a4d;

  --raio-card:24px; --raio-btn:999px;
  --sombra: 0 20px 44px -26px rgba(30,41,59,.28);
  --sombra-suave: 0 10px 26px -16px rgba(30,41,59,.22);

  --d-rapido:140ms; --d-base:260ms; --d-lento:480ms;
  --e-out:cubic-bezier(.16,1,.3,1); --e-inout:cubic-bezier(.65,0,.35,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1); --e-in:cubic-bezier(.7,0,.84,0);

  /* Neutro: nada revela sexo antes da hora. Valor "marca" — pêssego pastel
     — é o MESMO usado no convite (public/convite/scss/_variaveis.scss:
     $cor-primaria/$cor-primaria-texto/$cor-primaria-claro), reaproveitado
     aqui como cor de marca só para dar mais cor ao neutro (não é azul nem
     rosa, então não insinua nenhum dos dois lados). */
  --acento:#f4b48a; --acento-forte:#b5652f; --acento-suave:#f8c9a8;

  /* Acentos pastel fixos — mesmos 4 hex do convite, usados SEMPRE juntos e
     só em decoração solta (balões/estrelas de fundo, ver .decoracao-fundo).
     Nunca isolados como par (ex.: nunca só rosa+azul sozinhos na tela) e
     nunca condicionados a sexo/resultado/lado — são fixos, iguais em
     qualquer evento, antes ou depois da revelação. */
  --dec-rosa:#f6c6d9; --dec-azul:#bfe2f0; --dec-amarelo:#fbe8ac; --dec-lilas:#dccbec;
}
/* as duas classes existem sempre e simetricamente; só a APLICAÇÃO revela */
.acento-menino{--acento:var(--menino-core); --acento-forte:var(--menino-forte); --acento-suave:var(--menino-suave); --acento-vivo:var(--menino-vivo);}
.acento-menina{--acento:var(--menina-core); --acento-forte:var(--menina-forte); --acento-suave:var(--menina-suave); --acento-vivo:var(--menina-vivo);}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(120% 70% at 50% -10%,#fffdf8 0%,var(--bg-900) 55%);
  color:var(--ink);
  font:400 1rem/1.6 Nunito,Inter,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
  /* rede de segurança: um texto digitado no painel sem espaços (nome,
     endereço) nunca deve empurrar a tela pra fora do viewport */
  overflow-wrap:break-word; word-break:break-word;
}

/* ---------- tipografia ---------- */
/* .display é reservado para os momentos de "nome em destaque" (título da
   landing, palpite do convidado, nome revelado no final) — mesmo papel que
   $fonte-script tem no convite (título/nomes em hero), por isso usa a
   mesma cursiva 'Dancing Script'. line-height 1.15 (não o 1.06 de uma
   serifa comum) evita cortar os laços/swashes da fonte, mesma calibragem
   documentada em docs/design/convite-tema-aquarela-spec.md, seção 2.4. */
.display{font-family:'Dancing Script','Fraunces',Georgia,serif;font-weight:700;font-size:clamp(2.5rem,10vw,4.25rem);letter-spacing:-.01em;line-height:1.15;margin:0;color:var(--ink)}
.titulo{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(1.6rem,5.5vw,2.25rem);letter-spacing:-.01em;line-height:1.18;margin:0;color:var(--ink)}
.eyebrow{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid);margin:0}
.corpo{margin:0;color:var(--text-mid)}
.mini{font-size:.8125rem;color:var(--text-low);margin:0}
.centro{text-align:center}

/* ---------- cartão base ---------- */
.vidro{position:relative;background:var(--bg-card);border:1px solid rgba(30,41,59,.06);border-radius:var(--raio-card);
  box-shadow:var(--sombra);overflow:hidden}
.vidro::before{content:'';position:absolute;top:0;left:10%;right:10%;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--acento) 70%,transparent),transparent)}

/* ---------- layout de telas ---------- */
#app{position:relative;z-index:1;display:grid;min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-right))}
.tela{display:none;grid-area:1/1;align-content:center;justify-items:stretch;gap:24px;width:100%;max-width:520px;margin:0 auto}
.tela.ativa{display:grid;animation:tela-entra var(--d-lento) var(--e-inout) both}
@keyframes tela-entra{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.tela.ativa>*{animation:filho-entra var(--d-lento) var(--e-out) both}
.tela.ativa>*:nth-child(1){animation-delay:40ms}
.tela.ativa>*:nth-child(2){animation-delay:100ms}
.tela.ativa>*:nth-child(3){animation-delay:160ms}
.tela.ativa>*:nth-child(4){animation-delay:220ms}
.tela.ativa>*:nth-child(5){animation-delay:280ms}
.tela.ativa>*:nth-child(6){animation-delay:340ms}
@keyframes filho-entra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* a tela inicial é uma landing rolável, não um cartão centralizado */
.tela.ativa.tela--landing{display:block;max-width:640px;align-content:normal}

/* ---------- botões ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:16px 26px;
  border:0;border-radius:var(--raio-btn);font:600 1rem/1 Nunito,Inter,system-ui,sans-serif;cursor:pointer;text-decoration:none;
  transition:transform var(--d-rapido) var(--e-out),box-shadow var(--d-base) var(--e-out),filter var(--d-base) var(--e-out)}
.btn-primario{background:linear-gradient(180deg,var(--acento),var(--acento-forte));color:#fff;
  box-shadow:0 14px 30px -12px color-mix(in oklab,var(--acento-forte) 65%,transparent)}
.btn-primario:active{transform:scale(.97)}
.btn-fantasma{background:transparent;color:var(--ink);border:1px solid rgba(30,41,59,.16)}
.btn-fantasma:active{transform:scale(.97);background:rgba(30,41,59,.04)}
:focus-visible{outline:2px solid var(--acento-forte);outline-offset:3px;border-radius:8px}
.sem-anel:focus,.sem-anel:focus-visible{outline:none}

/* ---------- decoração de fundo (balões/estrelas) ---------- */
/* Puramente ilustrativo, fixo no viewport, atrás de #app (z-index:0 contra
   o z-index:1 de #app) — nenhuma tela precisa saber que isto existe.
   Reaproveita as silhuetas e os 4 acentos pastel fixos do convite (ver
   public/convite/index.php, svgBalao()/svgBalaoEstrela()): os 4 tons
   (--dec-rosa/--dec-azul/--dec-amarelo/--dec-lilas) aparecem SEMPRE juntos
   nesta mesma composição, em QUALQUER evento — antes ou depois da
   revelação, com qualquer resultado. Nunca adicione/remova um item
   condicionado a `sexo`/resultado: isso tornaria o conjunto assimétrico,
   quebrando a regra de neutralidade (ver nota no topo do arquivo). A cena
   de revelação (#cena, z-index:60) cobre esta camada por completo — ela
   nunca aparece por trás do clarão/palavra final. */
.decoracao-fundo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.decoracao-fundo .item{position:absolute;opacity:.5;filter:drop-shadow(0 8px 14px rgba(30,41,59,.12));
  animation:flutua-fundo var(--dur,7s) ease-in-out infinite;animation-delay:var(--delay,0s)}
.decoracao-fundo .item svg{display:block}
@keyframes flutua-fundo{
  0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}
  50%{transform:translateY(-16px) rotate(var(--rot,0deg))}
}
.decoracao-fundo .item--1{top:5%;   left:3%;  --rot:-8deg; --dur:6.6s; --delay:.1s}
.decoracao-fundo .item--2{top:9%;   right:4%; --rot:7deg;  --dur:7.4s; --delay:1.1s}
.decoracao-fundo .item--3{bottom:12%;left:4%; --rot:-5deg; --dur:6.2s; --delay:.6s}
.decoracao-fundo .item--4{bottom:7%; right:3%; --rot:9deg; --dur:7s;   --delay:1.6s}
.decoracao-fundo .item--5{top:44%;  left:1.5%;--rot:5deg;  --dur:6.8s; --delay:.9s}
.decoracao-fundo .item--6{top:50%;  right:2%; --rot:-6deg; --dur:7.2s; --delay:.3s}
/* Em telas estreitas o respiro nas bordas encolhe muito — mantém só os 4
   cantos (os 2 itens do meio, mais próximos do conteúdo central, somem) e
   reduz um pouco o tamanho/opacidade dos que ficam. */
@media (max-width:560px){
  .decoracao-fundo .item--5,.decoracao-fundo .item--6{display:none}
  .decoracao-fundo .item{opacity:.38}
  .decoracao-fundo .item svg{width:70%;height:auto}
}

/* ---------- 0. tela inicial (landing) ---------- */
.hero-media{position:relative}
.hero-media::before{content:'';position:absolute;inset:-6% -10% auto -10%;height:78%;z-index:0;
  background:var(--acento-suave,var(--bg-alt));opacity:.6;
  border-radius:52% 48% 46% 54%/58% 44% 56% 42%}
.foto-wrap{position:relative;z-index:1;border-radius:28px;overflow:hidden;box-shadow:var(--sombra)}
.foto-wrap img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hero-cartao{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;max-width:calc(100% - 28px);
  background:var(--bg-card);border-radius:18px;padding:14px 18px;box-shadow:var(--sombra-suave);display:grid;gap:2px}

.pilula{display:inline-flex;margin:20px 0 14px;padding:8px 16px;border-radius:999px;
  background:var(--pilula-bg);color:var(--pilula-ink);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.pilula[hidden]{display:none}

.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-acoes .btn{flex:1 1 160px}

/* Qualquer classe que define `display` sobrescreve o `display:none` padrão
   do atributo `hidden` (mesma especificidade — 0,1,0 — mas regra de autor
   sempre vence regra de user-agent). Por isso toda classe usada em algo que
   o JS esconde via `.hidden = true` (app.js) precisa do par
   `.classe[hidden]{display:none}` logo abaixo — senão o elemento continua
   visível, só sem o conteúdo esperado. */
.secoes{display:flex;flex-direction:column;gap:56px;margin-top:64px}
.secao{display:grid;gap:24px}
.secao[hidden]{display:none}
.eyebrow-centro{text-align:center;font-size:.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento-forte,var(--text-mid));margin:0}

.cartoes-info{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.info-card{display:grid;gap:8px;padding:22px;background:var(--bg-card);border-radius:20px;box-shadow:var(--sombra-suave)}
.info-card[hidden]{display:none}
.info-card .ic{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:var(--bg-alt)}
.info-card .ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.assinatura{margin-top:4px}
.assinatura .nome{font-family:'Dancing Script','Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;line-height:1.15;color:var(--ink)}

/* ---------- 2. votação ---------- */
/* Fundo com um leve degradê nas duas cores, sempre simétrico — decorativo,
   não entrega nada: é a mesma cor em ambos os lados antes do voto. */
#t-votacao{
  background:
    radial-gradient(120% 90% at 15% 0%, var(--menino-suave) 0%, transparent 55%),
    radial-gradient(120% 90% at 85% 0%, var(--menina-suave) 0%, transparent 55%),
    var(--bg-card);
  border-radius:32px; padding:36px 22px 28px; box-shadow:var(--sombra)}

.tela-topo{display:grid;justify-items:center;gap:8px;margin-bottom:4px}
.foto-mini{width:88px;height:88px;border-radius:50%;overflow:hidden;margin-bottom:6px;box-shadow:var(--sombra-suave)}
.foto-mini img{display:block;width:100%;height:100%;object-fit:cover}

.cartoes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:359px){.cartoes{grid-template-columns:1fr}}
.cartao{position:relative;display:grid;justify-items:center;align-content:center;gap:12px;
  min-height:190px;padding:24px 16px;border-radius:32px;cursor:pointer;
  background:var(--bg-card);
  border:1px solid color-mix(in oklab,var(--acento) 26%,transparent);
  color:var(--ink);font:inherit;transform-style:preserve-3d;
  box-shadow:0 16px 36px -18px color-mix(in oklab,var(--acento) 55%,transparent);
  transition:transform var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out)}
.cartao::before{content:'';position:absolute;top:0;left:14%;right:14%;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--acento),transparent)}
.cartao .halo{position:absolute;inset:-20%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,color-mix(in oklab,var(--acento) 30%,transparent),transparent 62%);
  opacity:.5;animation:respira 4.5s var(--e-inout) infinite}
@keyframes respira{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.6;transform:scale(1.03)}}
.cartao .ic-wrap{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:var(--acento-suave)}
.cartao svg{width:36px;height:36px;stroke:var(--acento);fill:none;stroke-width:1.6}
/* Rótulo "Menino"/"Menina" — mesma cursiva do convite (é o par de nomes
   candidatos, papel equivalente a .nomes__nome em public/convite). */
.cartao .rotulo{font-family:'Dancing Script','Fraunces',Georgia,serif;font-weight:700;font-size:1.6rem;line-height:1.15;letter-spacing:0;
  color:var(--acento)}
.cartao:active{transform:scale(.98)}

.prazo{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 16px;border-radius:16px;
  background:var(--bg-card);border:1px solid rgba(30,41,59,.08);color:var(--text-mid);font-size:.9375rem;box-shadow:var(--sombra-suave)}
.prazo[hidden]{display:none}
.prazo b{font-family:'Fraunces',Georgia,serif;color:var(--ink);font-variant-numeric:tabular-nums}
.prazo.urgente{color:var(--ambar);border-color:color-mix(in oklab,var(--ambar) 45%,transparent);animation:pisca 1.6s var(--e-inout) infinite}
.prazo.urgente b{color:var(--ambar)}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.6}}

/* ---------- 3. confirmação ---------- */
.escolhido{display:flex;align-items:center;gap:16px;padding:20px;border-radius:32px;
  background:var(--acento-suave);
  border:1px solid color-mix(in oklab,var(--acento) 30%,transparent)}
.escolhido svg{width:44px;height:44px;flex:0 0 auto;stroke:var(--acento-forte);fill:none;stroke-width:1.6}
.escolhido .txt{display:grid;gap:2px;min-width:0}
.escolhido .nome{font-family:'Dancing Script','Fraunces',Georgia,serif;font-weight:700;font-size:1.9rem;line-height:1.15;letter-spacing:0;color:var(--acento-forte)}
.form{display:grid;gap:20px;padding:24px}
.campo{display:grid;gap:8px}
.campo label{font-size:.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mid)}
.campo input,.campo select{width:100%;min-height:52px;padding:14px 16px;border-radius:16px;
  background:var(--bg-alt);border:1px solid rgba(30,41,59,.1);color:var(--ink);
  font:400 16px/1.4 Nunito,Inter,system-ui,sans-serif;appearance:none;
  transition:border-color var(--d-base) var(--e-out),box-shadow var(--d-base) var(--e-out)}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--text-mid) 50%),linear-gradient(135deg,var(--text-mid) 50%,transparent 50%);
  background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:44px}
.campo input:focus,.campo select:focus{border-color:var(--acento-forte);box-shadow:0 0 0 3px color-mix(in oklab,var(--acento) 25%,transparent);outline:none}
.campo.invalido input,.campo.invalido select{border-color:var(--erro);box-shadow:0 0 0 3px rgba(194,58,77,.16)}
.erro-msg{display:none;font-size:.8125rem;color:var(--erro)}
.campo.invalido .erro-msg{display:block}
.sacode{animation:sacode 320ms var(--e-inout)}
@keyframes sacode{0%,100%{transform:translateX(0)}15%{transform:translateX(-8px)}30%{transform:translateX(7px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
.acoes{display:grid;gap:12px}

/* ---------- 4. espera / contador ---------- */
/* Aqui já sabemos a cor: é o palpite da própria pessoa, não o resultado —
   por isso pode ser um degradê de um tom só, ao contrário do fundo neutro
   da votação. */
#t-espera{
  background: radial-gradient(140% 100% at 50% 0%, var(--acento-suave) 0%, transparent 60%), var(--bg-card);
  border-radius:32px; padding:36px 22px 28px; box-shadow:var(--sombra)}

.painel{display:grid;gap:16px;padding:24px}
.painel[hidden]{display:none}
.contador{display:flex;justify-content:center;gap:14px}
.grupo{display:grid;justify-items:center;gap:8px}
.digitos{display:flex;gap:6px}
.cel{position:relative;width:46px;height:64px;border-radius:16px;overflow:hidden;
  background:var(--bg-alt);border:1px solid rgba(30,41,59,.08);perspective:220px}
.cel .d{position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:2rem;color:var(--ink);
  font-variant-numeric:tabular-nums;backface-visibility:hidden}
.grupo .lbl{font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-low)}
.sep{align-self:start;margin-top:14px;font-family:'Fraunces',Georgia,serif;font-size:1.5rem;color:var(--text-low)}

/* ---------- barras ---------- */
.barras{display:grid;gap:14px}
.linha{display:grid;gap:8px}
.linha .top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.9375rem}
.linha .top .n{color:var(--text-mid);min-width:0}
.linha .top .p{flex:0 0 auto;font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.125rem;color:var(--acento-forte);font-variant-numeric:tabular-nums}
.trilha{height:10px;border-radius:999px;background:var(--bg-alt);overflow:hidden}
.trilha i{display:block;height:100%;border-radius:999px;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--acento-forte),var(--acento));
  transition:transform 900ms var(--e-out)}

/* ---------- selo de acerto ---------- */
.selo{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 20px;border-radius:999px;
  font-weight:600;font-size:.9375rem;letter-spacing:.01em}
.selo svg{width:20px;height:20px;fill:none;stroke-width:2}
.selo.acertou{background:var(--acento-suave);color:var(--acento-forte);
  border:1px solid color-mix(in oklab,var(--acento) 45%,transparent)}
.selo.acertou svg{stroke:var(--acento-forte)}
.selo.errou{background:var(--bg-alt);color:var(--text-mid);border:1px solid rgba(30,41,59,.08)}
.selo.errou svg{stroke:var(--text-mid)}

/* ---------- vazio (encerrada) ---------- */
.vazio{display:grid;justify-items:center;gap:16px;text-align:center;padding:32px 24px}
.vazio .ic{width:72px;height:72px;display:grid;place-items:center;border-radius:999px;
  background:var(--bg-alt);border:1px solid rgba(30,41,59,.08)}
.vazio .ic svg{width:34px;height:34px;stroke:var(--text-mid);fill:none;stroke-width:1.5}

/* ---------- resultado ---------- */
.reveal-nome{color:var(--acento-forte)}

/* ---------- cena de revelação ---------- */
/* A cena continua dramática e escura de propósito: o contraste com o resto
   do site (claro) é o que faz a virada valer. */
#cena{position:fixed;inset:0;z-index:60;display:none;background:#0b0f1a;opacity:0;overflow:hidden}
#cena.ativa{display:block}
#confete{position:absolute;inset:0;width:100%;height:100%}
.anel{position:absolute;top:50%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;
  border:2px solid rgba(255,255,255,.9);opacity:0;transform:scale(.3)}
.horizonte{position:absolute;top:50%;left:0;right:0;height:2px;transform:scaleX(0);opacity:0;
  background:linear-gradient(90deg,transparent,#fff 45%,#fff 55%,transparent);
  box-shadow:0 0 30px 6px rgba(255,255,255,.55)}
.clarao{position:absolute;inset:-20%;opacity:0;
  background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--acento-vivo) 85%,white),transparent 62%)}
.palavra{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;opacity:0}
.palavra span{font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:clamp(2.75rem,15vw,6rem);letter-spacing:-.02em;color:var(--acento-vivo);
  text-shadow:0 0 60px color-mix(in oklab,var(--acento-vivo) 70%,transparent)}

/* ---------- faixa de demonstração ---------- */
/* Sempre visível (não é a faixa de offline, que é fixa e só aparece sem
   rede) — fica no fluxo normal, empurrando o conteúdo pra baixo, pra nunca
   sobrepor a #faixa se as duas precisarem coexistir. */
#faixa-demo{position:relative;z-index:5;
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;text-align:center;
  font-size:.8125rem;font-weight:600;color:#e4defa;background:#17132b}
#faixa-demo a{color:#fff;text-decoration:underline;margin-left:6px}

/* ---------- offline / toast ---------- */
#faixa{position:fixed;top:0;left:0;right:0;z-index:80;transform:translateY(-100%);
  padding:calc(10px + env(safe-area-inset-top)) 16px 10px;text-align:center;font-size:.875rem;font-weight:600;
  color:#fff;background:linear-gradient(180deg,var(--ambar),#b96e14);
  transition:transform var(--d-base) var(--e-out)}
#faixa.ativa{transform:none}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:80;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;max-width:min(420px,calc(100vw - 40px));
  padding:14px 20px;border-radius:999px;font-size:.9375rem;color:#fff;
  background:var(--ink);
  transition:transform var(--d-base) var(--e-spring),opacity var(--d-base) var(--e-out)}
#toast.ativa{transform:translate(-50%,0);opacity:1}

/* ---------- telas estreitas (a partir de ~360px) ---------- */
/* O contador (6 dígitos + separadores) é o elemento mais largo do site —
   nas dimensões originais ele não cabe abaixo de ~400px de tela. Aqui ele
   encolhe, e os cartões/painéis perdem um pouco de respiro, para que nada
   precise ser cortado nem forçar rolagem horizontal. */
@media (max-width:400px){
  #t-votacao,#t-espera{padding:26px 12px 20px}
  .cartao{padding:20px 10px}
  .painel{padding:16px}
  .form{padding:18px 14px}
  .escolhido{padding:16px;gap:12px}
  .escolhido svg{width:36px;height:36px}
  .escolhido .nome{font-size:1.25rem}

  .contador{gap:6px}
  .digitos{gap:4px}
  .cel{width:26px;height:37px;border-radius:10px}
  .cel .d{font-size:1.05rem}
  .grupo .lbl{font-size:.625rem;letter-spacing:.08em}
  .sep{font-size:.9375rem;margin-top:8px}
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .tela.ativa{animation:fade 400ms ease both}
  .tela.ativa>*{animation:none;opacity:1;transform:none}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .cartao .halo{animation:none;opacity:.4}
  .trilha i{transition:none}
}

/* ---------- rodapé ---------- */
/* Fundo escuro de propósito — é o único ponto do site que foge do creme, e é
   proposital: a logo (glow neon roxo) foi feita pra fundo escuro. */
#rodape{position:relative;z-index:1;margin-top:64px;background:#17132b;
  padding:40px 20px calc(28px + env(safe-area-inset-bottom))}
.rodape-conteudo{max-width:520px;margin:0 auto;display:grid;justify-items:center;gap:16px;text-align:center}
.rodape-logo{width:56px;height:56px;display:block}
.rodape-links{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.rodape-links a{color:#c9bdf2;font-size:.875rem;font-weight:500;text-decoration:none}
.rodape-links a:hover,.rodape-links a:focus-visible{color:#fff;text-decoration:underline}
.rodape-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;
  background:rgba(169,150,232,.16);border:1px solid rgba(169,150,232,.4);
  color:#e4defa;font-size:.8125rem;font-weight:600;text-decoration:none}
.rodape-cta:hover,.rodape-cta:focus-visible{background:rgba(169,150,232,.28);color:#fff}
.rodape-copy{margin:0;font-size:.75rem;color:#8b81ad}
.rodape-copy a{color:#a996e8;text-decoration:none}
.rodape-copy a:hover,.rodape-copy a:focus-visible{text-decoration:underline}

/* ---------- pular para o conteúdo (teclado) ---------- */
.pular{position:absolute;left:-9999px;top:8px;z-index:100;padding:12px 16px;
  background:var(--ink);color:#fff;border-radius:10px;font-weight:600;text-decoration:none}
.pular:focus{left:12px}