/* =========================================================================
   Sorteios Bkup — sistema visual
   Tokens medidos por getComputedStyle em bkup.com.br, nao inventados.
   As tres correcoes de contraste estao comentadas onde importam: o site de
   referencia reprova AA em dois pares, e copiar com fidelidade seria copiar
   o defeito.
   ========================================================================= */

/* ---------------------------------------------------------------- fontes */
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/librefranklin-400-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/librefranklin-400-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/librefranklin-700-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/librefranklin-700-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fonts/librefranklin-800-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:800;font-display:swap;
  src:url(/assets/fonts/librefranklin-800-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- tokens */
:root{
  /* Cores — hex exatos do bkup.com.br */
  --navy:#031733;          /* faixas escuras, cards solidos */
  --navy-tarja:#04142A;    /* SO a tarja de copyright do rodape */
  --azul:#0069B4;          /* headings, links, acento sobre fundo CLARO */
  --ciano:#009FE3;         /* superficie e borda SOBRE NAVY — nunca texto no claro */
  --ciano-fio:#8DD0ED;     /* fio do card de contorno */
  --acao:#C1281C;          /* CTA, e nada alem de CTA */
  --acao-hover:#A21C12;
  --fundo:#F4F4F4;
  --superficie:#FFFFFF;
  --texto:#333333;
  --texto-fraco:#5A5A5A;
  --sobre-escuro:#FFFFFF;

  /* Dois degraus de raio, nao tres. Tres valores proximos nao sao sistema. */
  --raio-1:10px;           /* CTA, caixas */
  --raio-2:14px;           /* cards */
  --raio-interno:12px;     /* = raio-2 menos a borda de 2px */

  --fonte:"Libre Franklin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --largura:1140px;
  --gap:clamp(1.5rem,4vw,3rem);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--fonte);font-weight:400;font-size:16px;line-height:1.5;
  color:var(--texto);background:var(--fundo);
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}

/* Headings: peso 800, line-height 1.0 — densos e compactos, como o original.
   letter-spacing normal e text-transform none em TUDO: onde ha caixa alta no
   site de referencia, e o texto que foi digitado assim. */
h1,h2,h3,h4{margin:0 0 .5em;font-weight:800;line-height:1;color:var(--azul);letter-spacing:normal}

/* Titulo, premio e nome vem do USUARIO, e usuario escreve palavra sem espaco.
   Sem ponto de quebra, uma palavra longa nao quebra: ela TRANSBORDA. Medido no
   cartaz A4, que e o artefato IMPRESSO: o premio
   "Supercalifragilisticexpialidocioso-Ultramegablaster-3000..." saia com a
   primeira linha cortada na margem da folha -- na pagina que promete "e
   exatamente o que sai no papel".

   `anywhere` e nao `break-all`: so quebra quando nao ha alternativa, entao
   texto normal continua quebrando por espaco, como deve. */
h1,h2,h3,h4,.cartaz-premio,.vitrine-item h3,.vitrine-premio,
.revelacao-premio,.revelacao-nome,.numero,.card .corpo p{overflow-wrap:anywhere}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:clamp(1.5rem,3.5vw,2rem)}
h3{font-size:1.125rem;font-weight:600}
p{margin:0 0 1rem}

/* Link em texto corrido leva SUBLINHADO: --azul contra --texto da 2,21:1.
   O contraste que importa e contra o TEXTO VIZINHO, nao contra o fundo. */
a{color:var(--azul);text-underline-offset:.18em}
a:hover{color:var(--acao)}

/* Anel de foco: duas sombras empilhadas. Anel de cor unica em ciano some no
   fundo claro (2,70:1) e sobre o botao vermelho (1,97:1). */
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--fundo),0 0 0 6px var(--azul);border-radius:4px}
.faixa-navy :focus-visible{box-shadow:0 0 0 3px var(--navy),0 0 0 6px var(--ciano)}

/* ---------------------------------------------------------------- layout */
.pular{position:absolute;left:-9999px;top:0;background:var(--acao);color:#fff;padding:.75rem 1rem;z-index:99}
.pular:focus{left:0}
.envelope{width:min(100% - 2rem,var(--largura));margin-inline:auto}

/* Ritmo do site: faixa clara -> faixa navy -> faixa clara. Nao e dark mode. */
.faixa{padding:var(--gap) 0}
.faixa-navy{background:var(--navy);color:var(--sobre-escuro);position:relative;overflow:hidden}
.faixa-navy h1,.faixa-navy h2,.faixa-navy h3{color:var(--sobre-escuro)}
.faixa-navy a{color:var(--ciano)}   /* 6,02:1 sobre navy */
/* Excecao obrigatoria: `.faixa-navy a` (0,1,1) vence `.btn` (0,1,0), entao o
   CTA dentro da faixa escura herdava ciano sobre o vermelho do proprio botao.
   Medido com getComputedStyle na pagina de resultado: rgb(0,159,227) sobre
   rgb(193,40,28) = 1,97:1, contra o minimo de 4,5:1. O texto do botao le
   contra o FUNDO DO BOTAO, nunca contra a faixa atras dele -- e este e o unico
   elemento de conversao do produto. */
.faixa-navy a.btn{color:var(--sobre-escuro)}
.faixa-navy a.btn:hover{color:var(--sobre-escuro)}

/* Blobs geometricos de canto arredondadissimo — preenchido e contorno.
   Ficam ATRAS do conteudo sem criar stacking context no pai. */
.faixa-navy::before,.faixa-navy::after{content:"";position:absolute;pointer-events:none;border-radius:96px}
.faixa-navy::before{width:340px;height:200px;background:var(--ciano);opacity:.9;right:-90px;top:-70px;transform:rotate(-8deg)}
.faixa-navy::after{width:260px;height:150px;border:3px solid var(--ciano);opacity:.35;left:-80px;bottom:-60px;transform:rotate(6deg)}
.faixa-navy > *{position:relative;z-index:1}

/* Os blobs sao DECORACAO e nao podem passar por baixo do texto: branco sobre
   o ciano #009FE3 da 2,97:1, que reprova AA ate para texto grande (min 3,0).
   Em tela estreita o blob de 340x200 cobria a faixa inteira do titulo --
   medido em pixel no print: 62% dos pixels da linha do h1 eram ciano a 390px,
   e 51%/63% nas outras telas com o mesmo hero. Encolhido e empurrado para
   fora, ele continua aparecendo no canto sem chegar ao texto. */
@media (max-width:760px){
  .faixa-navy::before{width:190px;height:120px;right:-95px;top:-55px}
  .faixa-navy::after{width:150px;height:95px;left:-85px;bottom:-45px}
}

/* --------------------------------------------------------------- topbar */
.topbar{background:var(--azul);color:#fff;font-size:.8125rem}
.topbar .envelope{display:flex;gap:1rem;align-items:center;justify-content:space-between;min-height:56px;flex-wrap:wrap}
.topbar a{color:#fff;text-decoration:none}
.marca{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--azul);text-decoration:none}
.marca .b{color:var(--azul)}
.marca .t{color:var(--azul);font-weight:300;opacity:.72}  /* ciano sobre branco = 2,97:1, reprova AA */
/* Logotipo oficial (lockup horizontal, 1000x183). Altura fixa e largura
   automatica: a proporcao e do arquivo, nunca do CSS -- esticar a marca de
   alguem e o defeito classico de aplicacao de identidade. O `height` cai um
   degrau no celular para o lockup nao comer a largura do cabecalho. */
.marca-logo{height:34px;width:auto;display:block}
@media (max-width:520px){.marca-logo{height:26px}}
/* Na tarja azul do topbar e nas faixas navy o logotipo azul-sobre-azul
   sumiria. Ele so vive no cabecalho branco -- se algum dia precisar ir para
   fundo escuro, e outro ARQUIVO (versao negativa da marca), nao um filtro. */
.cabecalho{background:var(--superficie);border-bottom:1px solid #e4e4e4}
.cabecalho .envelope{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:88px;flex-wrap:wrap}

/* -------------------------------------------------------------- botoes */
/* Vermelho SO em CTA. Sem gradiente, sem sombra — o site nao tem nenhuma. */
.btn{display:inline-block;border:none;border-radius:var(--raio-1);padding:12px 24px;
  font-weight:700;font-size:.9375rem;line-height:1;cursor:pointer;text-decoration:none;
  background:var(--acao);color:#fff;transition:background .15s}
.btn:hover{background:var(--acao-hover);color:#fff}
.btn:disabled{opacity:.55;cursor:not-allowed}
/* .btn-secundario e .btn-navy sao usados SOZINHOS no HTML, sem .btn junto --
   17 ocorrencias de "class=\"btn-secundario\"" nas visoes. Como so redefiniam
   cor e padding, um <a> com essa classe ficava display:inline: width:100% nao
   valia e a caixa inline nao respeita altura, entao ela INVADIA o vizinho de
   cima. Medido no comprovante: "Ver o sorteio" sobrepunha "Compartilhar no
   WhatsApp" em 10px verticais e 142,7px horizontais, a 1366 e a 390.
   Em <button> o navegador disfarcava; em <a> nao. Agora as duas carregam a
   caixa do botao. */
.btn-secundario,.btn-navy{display:inline-block;border-radius:var(--raio-1);
  font-weight:700;font-size:.9375rem;line-height:1;cursor:pointer;text-decoration:none;
  transition:background .15s}
.btn-secundario{background:transparent;color:var(--azul);border:2px solid var(--azul);padding:10px 22px}
.btn-secundario:hover{background:var(--azul);color:#fff}
.btn-navy{background:var(--navy);color:#fff;border:none;border-radius:15px;padding:12px 24px;font-weight:500}
.btn-largo{width:100%;text-align:center}


/* Substituem estilo inline: a CSP nao permite `style=` (style-src 'self'). */
.form-inline{margin:0;display:inline-flex}
.btn-topo{background:var(--navy);color:#fff;border:none;border-radius:15px;
  padding:6px 14px;font-size:.8125rem;font-weight:500;line-height:1.4;cursor:pointer}
.btn-topo:hover{background:var(--navy-tarja)}

/* --------------------------------------------------------------- cards */
/* DUAS familias de card, nao uma. Nenhuma tem sombra: a profundidade vem de
   contraste de fundo + borda de 2px. Acrescentar box-shadow e o que faz
   parecer generico. */
.card{background:var(--navy);border:2px solid var(--ciano);border-radius:var(--raio-2);
  overflow:hidden;color:var(--sobre-escuro)}
/* ------------------------------------------------------- painel: o passo */
/* O bloco de acao que AVANCA o sorteio (abrir, fechar, sortear, publicar).
   Ele vivia solto no fim da pagina, sem titulo e sem caixa, alinhado 25px a
   ESQUERDA do conteudo dos cards acima (medido: bloco em x=113, conteudo dos
   cards em x=138) -- ou seja, a acao mais consequente e irreversivel da tela
   parecia sobra de rodape, enquanto "Divulgacao" e "Exportar", que sao
   utilitarios, ganhavam cartao inteiro com titulo de 2rem.

   O fio grosso a esquerda e o mesmo dispositivo que `.aviso` ja usa para
   dizer "isto e uma declaracao, nao mais um cartao" -- vocabulario do
   sistema, nao invencao. */
/* O recuo da ESQUERDA desconta os 5px que o fio grosso acrescenta (6px no
   lugar da borda de 1px do `.card-contorno`): sem isso o titulo do passo
   ficava 5px a direita do titulo de todos os cards abaixo -- medido, 143
   contra 138. Bloco que existe para corrigir alinhamento nao pode nascer
   desalinhado. */
.passo{background:var(--superficie);border:1px solid var(--ciano-fio);
  border-left:6px solid var(--azul);border-radius:var(--raio-2);
  padding:1.5rem 1.5rem 1.5rem calc(1.5rem - 5px)}
.passo h2{font-size:1.25rem;margin:0 0 .35rem;color:var(--navy)}
.passo > p{margin:0 0 1.25rem;color:var(--texto-fraco);max-width:62ch}
/* A acao destrutiva desce para o pe do bloco, atras de um fio: ela nao pode
   competir de igual para igual com a acao que a pessoa veio fazer. */
.passo-perigo{border-top:1px solid #dfe5ec;margin-top:1.25rem;padding-top:1rem}
.passo-perigo > summary{cursor:pointer;color:var(--texto-fraco);font-size:.875rem;
  min-height:24px;line-height:24px}
.passo-perigo > summary:hover{color:var(--acao)}
.passo-perigo form{margin-top:.75rem;max-width:34rem}

/* Titulo de secao do painel. `h2` global e clamp(1.5rem,3.5vw,2rem) -- escala
   de display, desenhada para o hero. Numa pilha de seis secoes utilitarias
   ela grita mais que o conteudo. */
.card-contorno > h2,.painel-secao > h2{font-size:1.25rem;margin:0 0 1rem;color:var(--navy)}
.rotulo-bloco{display:block;font-weight:600;font-size:.875rem;margin-bottom:.5rem}
.rotulo-bloco + .linha-botoes{margin-bottom:1.25rem}
.rotulo-bloco + .linha-botoes:last-child{margin-bottom:0}

/* Campo de link + botao de copiar na mesma linha. */
.linha-link{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap}
.linha-link input{flex:1 1 18rem;min-width:0}
.linha-link button{flex:0 0 auto}

.card-contorno{background:var(--fundo);border:1px solid var(--ciano-fio);border-radius:var(--raio-2);
  padding:1.5rem;color:var(--texto)}
.card .faixa-topo{background:var(--ciano);border-radius:var(--raio-interno) var(--raio-interno) 0 0;
  padding:1rem 1.25rem;text-align:center}
.card .corpo{padding:1.25rem}

/* O numero heroi. No card de plano do bkup ele e BRANCO sobre ciano — e isso
   da 2,97:1, que REPROVA AA ate para texto grande. O site de referencia esta
   errado nesse ponto; navy sobre a mesma faixa da 6,02:1 e mantem o hex da
   marca. */
.numero{font-size:clamp(3rem,10vw,4.5rem);font-weight:800;line-height:1;color:var(--navy);margin:0}
.numero-rotulo{font-size:.75rem;font-weight:700;letter-spacing:normal;color:var(--navy);margin:0 0 .25rem;opacity:.85}

/* ------------------------------------------------------------ formularios */
.campo{margin-bottom:1.125rem}
.campo label{display:block;font-weight:600;font-size:.875rem;margin-bottom:.35rem}
.campo .dica{display:block;font-size:.8125rem;color:var(--texto-fraco);margin-top:.3rem}
/* `datetime-local` e `file` FALTAVAM nesta lista e o sinal era so olhar a
   tela: os tres campos de data saiam com o controle nativo do navegador
   (raio 0 no meio de campos de 10px, largura 233px fixa) e o de imagem sem
   borda nenhuma. Classe que nao casa nao da erro -- sai sem formatacao. */
.campo input[type=text],.campo input[type=email],.campo input[type=password],
.campo input[type=tel],.campo input[type=date],.campo input[type=number],
.campo input[type=url],.campo input[type=datetime-local],.campo input[type=file],
.campo textarea,.campo select{
  width:100%;padding:11px 13px;border:2px solid #cfd6de;border-radius:var(--raio-1);
  background:var(--superficie);transition:border-color .15s}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--azul)}
.campo input[aria-invalid=true]{border-color:var(--acao)}
.campo-check{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:1rem}
/* 24px e o alvo minimo de toque. Estes dois checkboxes nao sao decoracao:
   sem marcar o de maioridade nao ha inscricao. Mediam 18px. */
.campo-check input{margin-top:.1rem;width:24px;height:24px;flex:0 0 auto}
.campo-check label{font-weight:400;font-size:.9375rem}
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Pergunta de Sim/Nao no formulario publico. `fieldset` + `legend` e nao um
   `<p>` com dois radios soltos: sem o agrupamento semantico, o leitor de tela
   anuncia "Sim" e "Nao" sem nunca dizer a PERGUNTA a que eles respondem.
   Borda nenhuma e margem propria -- este formulario e compacto, e o `.grupo`
   do painel (com fio no topo e 1.75rem de respiro) pesaria demais entre dois
   campos de texto. */
.pergunta{border:none;margin:0 0 1rem;padding:0;min-width:0}
.pergunta > legend{padding:0;font-weight:700;font-size:.9375rem;margin-bottom:.5rem}
/* Coluna a partir de 22rem: lado a lado, "Sim" e "Nao" ficam a menos de um
   dedo de distancia num celular estreito e o toque erra o alvo. */
.opcoes{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.opcao{display:flex;align-items:center;gap:.5rem;font-weight:400;font-size:.9375rem;
  cursor:pointer;min-height:44px}
/* 24px, o mesmo alvo minimo dos checkboxes de maioridade e opt-in: estes
   radios tambem bloqueiam a inscricao se ninguem os tocar. */
.opcao input{width:24px;height:24px;flex:0 0 auto;margin:0}
/* A condicional nasce visivel (sem JS ela precisa ser respondivel) e recebe
   um recuo com fio para dizer, sem texto, que ela pertence a pergunta acima. */
.pergunta-condicional{border-left:3px solid var(--ciano);padding-left:1rem;margin-left:.25rem}
.pergunta-condicional[hidden]{display:none}

/* Campo curto: quantidade, numero, data. Um input de 1140px para receber o
   valor "1" nao e generosidade, e falta de escala -- a largura do campo e a
   primeira dica de quanto se espera que a pessoa digite, e aqui ela mentia.
   `max-width` e nao `width` para o campo ainda encolher no celular. */
.campo-curto input{max-width:11rem}

/* Medida do formulario. O `.envelope` tem 1140px e um campo de titulo de
   1140px passa de 140 caracteres por linha -- o dobro do que o olho
   acompanha. O painel continua usando a largura toda (ele tem tabela); o
   formulario, nao.

   Wrapper DENTRO do envelope, e nao uma classe no proprio envelope: o
   envelope centraliza (`margin-inline:auto`), entao encolhe-lo centralizava o
   formulario e ele deixava de alinhar com o `h1` do hero -- exatamente o
   defeito de alinhamento que esta rodada veio corrigir na pagina publica.
   A coluna comeca na mesma vertical do titulo e sobra espaco a direita. */
.form-coluna{max-width:46rem}

/* Grupos de campos. O formulario tinha onze campos numa coluna unica e plana:
   identidade do sorteio, prazos, configuracao do sorteio e conformidade legal
   com exatamente o mesmo peso, sem nada dizendo onde um assunto acaba e o
   outro comeca. `fieldset` e nao `div`: o agrupamento e semantico e o leitor
   de tela anuncia a legenda ao entrar em cada campo. */
.grupo{border:none;border-top:2px solid #dfe5ec;margin:0 0 1.75rem;padding:1.5rem 0 0}
.grupo:first-of-type{border-top:none;padding-top:0}
.grupo > legend{padding:0;font-weight:800;font-size:1.125rem;color:var(--azul);line-height:1.2}
.grupo > .dica-grupo{margin:.25rem 0 1.25rem;color:var(--texto-fraco);font-size:.875rem}

/* As tres datas sao uma SEQUENCIA (abrem -> fecham -> sorteio) e a regra de
   ordem entre elas so e obvia se elas estiverem lado a lado. Empilhadas, o
   operador comparava datas separadas por dois paragrafos de dica. */
/* 13rem e nao 15rem: com 15rem as tres datas nao cabiam na coluna de 46rem e
   a terceira caia sozinha numa segunda linha, desfazendo a sequencia que a
   grade existe para mostrar. */
.grade-datas{display:grid;gap:0 1.25rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.grade-datas .campo-curto input{max-width:none}

/* Barra de acao do formulario: a acao primaria e a saida, separadas do ultimo
   campo por um fio. Antes o botao "Criar sorteio" encostava no campo acima e
   nao havia caminho de volta nenhum na tela -- sair do formulario exigia o
   botao do navegador. */
.barra-acoes{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;
  border-top:2px solid #dfe5ec;margin-top:1.75rem;padding-top:1.5rem}
.obrigatorio-legenda{color:var(--texto-fraco);font-size:.8125rem;margin:0 0 1.5rem}
/* Visivel so para leitor de tela. NAO usa `left:-9999px` como `.mel`: fora da
   viewport, algumas combinacoes de leitor + navegador nao anunciam mudanca em
   regiao viva. `clip-path` mantem o elemento no fluxo, com area zero. */
.apenas-leitor{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* --------------------------------------------------------------- avisos */
.aviso{display:block;border-radius:var(--raio-1);padding:.85rem 1rem;margin-bottom:1.25rem;font-size:.9375rem}
/* `display:block` NAO e decoracao: os avisos de erro de campo sao <span>, e
   um inline com padding nao empurra a linha seguinte -- media 11px de
   sobreposicao sobre a `.dica` do campo, em 1366 e em 390. */
.campo .aviso,.campo-check+.aviso{margin-top:.4rem;margin-bottom:.25rem}
.aviso-erro{background:#FDECEA;border-left:4px solid var(--acao);color:#7A1610}
.aviso-ok{background:#E7F4FB;border-left:4px solid var(--azul);color:#0A3C60}
.aviso-nota{background:#EFEFEF;border-left:4px solid var(--texto-fraco)}

/* .erro e .link-acao eram usadas no HTML e NAO existiam aqui -- classe
   inventada em markup nao da erro nenhum, so sai sem formatacao, e o unico
   sinal e olhar a tela. Encontradas comparando toda classe usada nas views
   contra as definidas nesta folha.

   .erro: o nome esta PRESO por testes HTTP que afirmam class="erro" exato
   (ver o comentario em Visoes/sessao/entrar.php) -- por isso ela ganha regra
   propria em vez de virar "aviso aviso-erro". Mesma aparencia, nome estavel. */
.erro{border-radius:var(--raio-1);padding:.85rem 1rem;margin-bottom:1.25rem;font-size:.9375rem;
  background:#FDECEA;border-left:4px solid var(--acao);color:#7A1610}

/* .link-acao: link que e ACAO, nao prosa. Os 24px sao o alvo minimo de toque
   -- um link de 16px de altura reprova em qualquer auditoria e e ruim de
   acertar no celular. */
.link-acao{display:inline-block;min-height:24px;line-height:24px}

/* Links de rodape e de aviso tambem sao alvo de toque: "Politica de
   privacidade" e "Saiba mais" mediam menos de 24px de altura. */
.rodape a,.aviso a,.dica a{display:inline-block;min-height:24px;line-height:24px}

/* ---------------------------------------------------------------- chips */
/* Cor NUNCA como unico canal: o chip leva texto, nao so cor. */
.chip{display:inline-block;border-radius:999px;padding:.2rem .7rem;font-size:.75rem;font-weight:700;border:2px solid}
.chip-rascunho{color:var(--texto-fraco);border-color:var(--texto-fraco)}
.chip-aberto{color:#0A6B2E;border-color:#0A6B2E}
.faixa-navy .chip-aberto{color:#5FD08A;border-color:#5FD08A}  /* verde escuro sobre navy = 2,69:1 */
.chip-fechado{color:var(--azul);border-color:var(--azul)}
.chip-sorteado{color:#8A5A00;border-color:#8A5A00}
.chip-publicado{color:var(--acao);border-color:var(--acao)}
.chip-cancelado{color:var(--texto-fraco);border-color:var(--texto-fraco);text-decoration:line-through}

/* --------------------------------------------------------------- tabela */
.tabela-rola{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
/* nowrap SO em celula de dado curto. Na coluna de acoes ele empurra o botao
   para fora do conteiner -- 52px de estouro a 1366, medido. Trocar "quebra
   linha" (feio, clicavel) por "fora da tela" (inalcancavel) nao e correcao. */
th,td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid #e0e0e0}
td.curto,th.curto{white-space:nowrap}
td.acoes{white-space:normal;min-width:220px}
td.acoes .campo{margin:.35rem 0}
td.acoes .btn,td.acoes button{font-size:.8125rem;padding:8px 14px}

/* Celula alinha pelo TOPO. Com o `middle` padrao, abrir as acoes de UMA linha
   esticava a linha inteira (374px medidos a 1366) e os dados dela --
   "015 / X / 29/08 / Ativa" -- flutuavam centralizados no meio do vazio,
   descolados do painel que age sobre eles. */
.tabela-rola td{vertical-align:top}

/* ------------------------------------------------- acoes de uma inscricao */
/* Duas acoes de consequencia MUITO diferente moravam nesta celula com peso
   identico -- mesmo `btn-secundario` azul, mesmo tamanho -- e a destrutiva
   vinha PRIMEIRO. Corrigir um nome e rotina reversivel; anular e irreversivel
   e, neste sistema, NAO libera o WhatsApp (`UNIQUE(sorteio_id, whatsapp)` sem
   indice parcial), entao a pessoa nunca mais consegue se inscrever. A tela
   nao dizia nada disso.

   Mesma gramatica do `.passo`: o que se faz toda hora fica na frente e em
   texto normal, o que nao tem volta desce para tras de um fio, com o preco
   escrito. */
.acoes-linha{display:inline-block}
/* O `summary` era um marcador solto ("▸ Acoes"): nenhuma pista de que da para
   clicar, e alvo de toque abaixo do minimo. Vira controle de verdade, sem
   virar botao cheio -- ele abre um painel, nao executa nada. */
.acoes-linha > summary{
  display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  border:2px solid var(--azul);border-radius:var(--raio-1);
  padding:6px 12px;min-height:24px;font-size:.8125rem;font-weight:700;color:var(--azul);
  list-style:none;white-space:nowrap;
}
.acoes-linha > summary::-webkit-details-marker{display:none}
.acoes-linha > summary::before{content:"+";font-weight:700;line-height:1}
.acoes-linha[open] > summary::before{content:"−"}
.acoes-linha > summary:hover{background:var(--azul);color:#fff}

/* O painel aberto: largura propria, para a coluna de acoes nao ditar a
   largura da tabela inteira, e fundo de superficie para se ler como uma
   camada sobre a linha, nao como mais uma celula. */
.acoes-painel{
  margin-top:.6rem;padding:1rem;width:min(22rem,100%);
  background:var(--superficie);border:1px solid var(--ciano-fio);border-radius:var(--raio-2);
}
.acoes-painel .campo{margin-bottom:.75rem}
.acoes-painel .campo:last-of-type{margin-bottom:.5rem}
/* Herda o fio e o recuo do `.passo-perigo`, que ja diz "isto nao compete de
   igual para igual com a acao acima". */
.acoes-painel .passo-perigo{margin-top:1rem;padding-top:.85rem}
.acoes-painel .passo-perigo > summary{font-size:.8125rem}
.acoes-painel .aviso{font-size:.8125rem;padding:.6rem .7rem;margin:.5rem 0 .75rem}

/* Na tabela em blocos (abaixo de 760px) a celula ja ocupa a linha toda: o
   painel acompanha, e o `inline-block` do summary nao pode esticar. */
@media (max-width:760px){
  .acoes-painel{width:100%}
  .acoes-linha{display:block}
}
th{font-weight:700;color:var(--azul);font-size:.8125rem}

/* --------------------------------------------------------------- rodape */
.rodape{background:var(--navy);color:#cfd8e3;font-size:.875rem;padding:var(--gap) 0 0}
.rodape a{color:var(--ciano)}
.rodape .tarja{background:var(--navy-tarja);margin-top:var(--gap);padding:1rem 0;font-size:.8125rem}

.vazio{text-align:center;padding:3rem 1rem;color:var(--texto-fraco)}
/* Linha de resultado que SAIU por substituicao: nao e ganhador nem esta
   aguardando -- e um terceiro estado, e precisa se ler como tal na tabela de
   homologacao. Riscado + cinza, o mesmo vocabulario de .chip-cancelado, e
   nao so cor: 3,4:1 de contraste ja seria fraco como unico sinal.
   Vive em classe, nunca em `style=`: a CSP nao tem unsafe-inline. */
.marca-substituido{color:var(--texto-fraco);text-decoration:line-through;font-weight:700}
.centro{max-width:520px;margin-inline:auto}

/* ------------------------------------------------------------- vitrine */
/* A home publica. Grade que respira: minimo 260px por cartao, e o auto-fill
   resolve 1, 2 ou 3 colunas sozinho -- sem media query e sem numero magico
   de coluna, que e o que costuma quebrar quando entra o quarto sorteio. */
/* auto-FIT, nao auto-fill: com auto-fill as trilhas vazias continuam
   ocupando espaco, entao um grupo com UM sorteio ficava com um cartao de
   260px espremido a esquerda e 880px de vazio ao lado -- visto renderizado.
   auto-fit colapsa a trilha vazia e o cartao ocupa a linha. */
.vitrine{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.vitrine-item{display:flex;flex-direction:column;gap:.6rem}
.vitrine-item h3{margin:0;font-size:1.25rem;line-height:1.2;color:var(--navy)}
.vitrine-item h3 a{color:inherit;text-decoration:none}
.vitrine-item h3 a:hover{text-decoration:underline}
.vitrine-item .chip{align-self:flex-start}
.vitrine-premio{margin:0;color:var(--texto-fraco);font-size:.9375rem}
/* margin-top:auto gruda o botao no rodape do cartao: cartoes de alturas
   diferentes ficam com os botoes na mesma linha da grade. */
/* align-self:flex-start porque o container e flex-column: sem isso o
   `stretch` padrao esticava o botao pela largura inteira do cartao -- um CTA
   de 1090px, visto renderizado. margin-top:auto mantem o botao no rodape do
   cartao, para cartoes de alturas diferentes alinharem os botoes. */
.vitrine-item .btn,.vitrine-item .btn-secundario{margin-top:auto;align-self:flex-start}
/* Os fatos em linha: "Inscricoes ate 20/12/2026 18:00" numa linha so. Em
   grade de duas colunas a data quebrava no meio quando o cartao era estreito. */
.vitrine-fatos{margin:0;display:flex;flex-wrap:wrap;gap:.15rem 1.25rem;font-size:.9375rem}
.vitrine-fatos > div{display:flex;gap:.4rem;align-items:baseline}
.vitrine-fatos dt{color:var(--texto-fraco)}
.vitrine-fatos dd{margin:0;font-weight:700;color:var(--navy)}
.vitrine-grupo + .vitrine-grupo{margin-top:2.5rem}
.vitrine-grupo h2{margin-bottom:.15rem}
.vitrine-vazia{padding:2.5rem 1.5rem;text-align:center}
.vitrine-vazia h2{margin-top:0}

/* `.dica` so existia como `.campo .dica`: fora de um campo de formulario ela
   nao tinha regra nenhuma e saia como paragrafo normal. */
.dica{font-size:.8125rem;color:var(--texto-fraco)}

/* Regulamento e descricao: os dois eram campos de ESCRITA-SO -- o formulario
   pedia, o banco guardava, nenhuma tela lia. O regulamento em <details> para
   nao empurrar o formulario de inscricao para baixo da dobra. */
.sorteio-descricao{margin:.35rem 0 0}
/* Imagem do premio: nunca maior que o espaco, nunca esticada. `max-height`
   porque foto vertical de celular ocuparia a tela inteira e empurraria o
   formulario para baixo da dobra -- o que a pessoa veio fazer e se inscrever. */
.sorteio-imagem{display:block;max-width:100%;max-height:340px;width:auto;height:auto;
  margin:1rem 0 0;border-radius:var(--raio-2);object-fit:contain}
.regulamento{border:1px solid var(--ciano-fio);border-radius:var(--raio-2);
  background:var(--superficie);padding:.75rem 1rem}
.regulamento > summary{cursor:pointer;font-weight:700;color:var(--azul);
  min-height:24px;line-height:24px}
.regulamento .prosa{margin-top:.75rem;font-size:.9375rem}
.pilha > * + *{margin-top:1rem}

/* Linha de botoes. `.pilha` empilha (margin-top no irmao) e estava sendo usada
   para FILA de botoes: como .btn/.btn-secundario sao inline-block, o
   margin-top de 1rem se aplicava mesmo lado a lado e inflava o card --
   medido, o cartao "Divulgacao" tinha 153px de altura para uma unica fila de
   tres botoes. Fila e flex com gap, e quebra sozinha na tela estreita. */
.linha-botoes{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.linha-botoes > * + *{margin-top:0}

/* ------------------------------------------------------------- convite */
/* O bloco "Nao foi dessa vez?" na pagina de resultado.
   Era `.faixa .faixa-navy` -- as classes da FAIXA de pagina, que e full-bleed
   e conta com um `.envelope` DENTRO para o recuo horizontal. Usada como cartao
   dentro da coluna de conteudo, sem envelope, ela entregava:
   padding `48px 0` (zero na horizontal, entao o texto e o botao encostavam na
   borda -- medido: conteudo em x=423 num bloco que comeca em x=423, contra
   x=445 do card ao lado, e o raio do botao saia CORTADO), raio 0 no meio de
   cards de 14px, e o blob decorativo de 340px dentro de uma caixa de 520px.
   Cartao e cartao: superficie navy, o raio do sistema, e recuo igual ao
   `.card .corpo`. */
/* Empilhado, nao fila: a coluna do resultado tem 520px (`.centro`) e o par
   "duas linhas de texto + botao de 216px" nao cabe lado a lado -- tentado com
   flex-wrap, o botao quebrava para baixo de qualquer jeito e o
   `justify-content` ficava sem efeito nenhum. Regra que nunca se aplica e
   pior que regra ausente: some do print e fica no arquivo para confundir. */
.convite{
  background:var(--navy);color:var(--sobre-escuro);border-radius:var(--raio-2);
  padding:1.5rem;position:relative;overflow:hidden;
}
/* Blob na escala do CARTAO, nao da faixa. Ancorado no canto inferior direito,
   longe do texto (que fica a esquerda) e atras do conteudo. */
.convite::before{content:"";position:absolute;pointer-events:none;border-radius:96px;
  width:150px;height:110px;background:var(--ciano);opacity:.9;right:-55px;bottom:-45px;transform:rotate(-8deg)}
.convite > *{position:relative;z-index:1}
.convite p{margin:0 0 1.25rem;font-weight:700;font-size:1.125rem}
.convite .dica{display:block;font-weight:400;font-size:.9375rem;color:#cfd8e3;margin-top:.35rem;max-width:44ch}
/* Mesma excecao do `.faixa-navy a.btn`: o texto do CTA le contra o fundo do
   proprio botao, nunca contra o navy atras dele. */
.convite a.btn,.convite a.btn:hover{color:var(--sobre-escuro)}
.convite :focus-visible{box-shadow:0 0 0 3px var(--navy),0 0 0 6px var(--ciano)}
/* Abaixo disso a fila de dois vira coluna, e o botao ocupa a largura toda --
   alvo de toque cheio em vez de um botao solto no meio do cartao. */
/* No celular o CTA vira alvo de largura cheia em vez de botao solto. */
@media (max-width:520px){
  .convite{padding:1.25rem}
  .convite .btn{display:block;text-align:center}
  .convite::before{width:110px;height:80px;right:-45px;bottom:-35px}
}

/* --------------------------------------------------------------- prosa */
/* Texto longo de ler, nao de escanear (aviso de privacidade). A largura do
   .envelope e 1140px: linha de 1140px em corpo 16px da ~150 caracteres, o
   dobro do que o olho acompanha sem perder a linha na volta. 68ch e a medida
   confortavel, e --largura continua valendo quando a tela e menor que isso.
   `ch` e nao `px` de proposito: acompanha a fonte, nao a suposicao sobre ela. */
.prosa{max-width:min(68ch,var(--largura))}
.prosa h2:not(:first-child){margin-top:1.75rem}
.prosa h3{color:var(--navy);margin-top:1.25rem}
.prosa ul{margin:0 0 1rem;padding-left:1.35rem}
.prosa li + li{margin-top:.5rem}
.prosa p:last-child,.prosa ul:last-child{margin-bottom:0}

/* ----------------------------------------------------------------- cartaz */
/* Cartaz A4 (spec §8): NASCE CLARO -- fundo branco, texto navy, ciano so em
   traco -- e nao so na impressao. Um cartaz pensado como faixa navy sairia
   folha em branco com texto branco (navegador nao imprime background-color
   por padrao), e a versao em tela precisa ser a MESMA peca, nao uma previa
   escura que engana sobre o que vai para o papel. */
.cartaz{background:var(--superficie);color:var(--navy);text-align:center}
.cartaz-kicker{font-weight:800;font-size:1rem;color:var(--azul);margin:0}
.cartaz-premio{font-size:clamp(2rem,6vw,3.5rem);font-weight:800;line-height:1;color:var(--navy);margin:.5rem 0 1.75rem}
/* QR preto puro sobre branco puro (spec §8): o fundo branco explicito importa
   mesmo dentro de .cartaz, que ja e claro -- protege o quiet zone se um dia
   este bloco for reaproveitado num contexto escuro. */
.cartaz-qr{display:block;margin:0 auto 1.75rem;background:#fff}
.cartaz-url{font-size:1.375rem;font-weight:700;word-break:break-all;color:var(--navy);margin:0 0 1.25rem}
.cartaz-data{font-size:1.0625rem;margin:.25rem 0}
.cartaz-certificado{font-size:.8125rem;color:var(--texto-fraco);margin-top:1.25rem}
/* Assinatura do cartaz: fica no pe, separada por um fio ciano fino. O logo e
   um badge navy proprio, entao imprime bem em folha branca sem depender de
   background-color pintado -- mesma razao de o cartaz nascer claro. */
.cartaz-assinatura{margin-top:2.5rem;padding-top:1.25rem;border-top:2px solid var(--ciano-fio)}
.cartaz-assinatura img{display:block;margin:0 auto .5rem}
/* Logotipo do cartaz: altura fixa, largura automatica -- a proporcao e do
   arquivo. Em milimetros de papel A4 isso da ~19mm de largura, legivel de
   perto (quem le a assinatura ja esta na frente do cartaz; quem esta longe le
   o titulo). */
.cartaz-logo{height:26px;width:auto;margin:0 auto .35rem}
.cartaz-marca{font-weight:800;font-size:1.125rem;color:var(--navy);margin:0}
.cartaz-marca-site{font-size:.9375rem;color:var(--texto-fraco);margin:.15rem 0 0}

/* ------------------------------------------------------------- impressao */
/* Navegador NAO imprime background-color por padrao: cartaz desenhado como
   faixa navy sairia folha em branco com texto branco. O cartaz nasce CLARO. */
@media print{
  @page{size:A4;margin:8mm}
  body{background:#fff;color:#000;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .topbar,.cabecalho,.rodape,.btn,.nao-imprime{display:none !important}
  .faixa-navy{background:#fff !important;color:#000 !important}
  .faixa-navy::before,.faixa-navy::after{display:none}
  .faixa-navy h1,.faixa-navy h2{color:var(--navy) !important}
  .card{border-color:var(--navy)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ------------------------------------------------- tabela em tela estreita */
/* Medido no QA a 390px: os formularios de acao (anular, corrigir nome) ficavam
   dentro de um .tabela-rola de 374px estendendo-se ate 1053px. Tecnicamente
   alcancaveis rolando na horizontal -- e na pratica invisiveis: a pessoa tem
   que rolar de lado para achar o botao. Abaixo de 760px a tabela vira blocos
   empilhados e nada precisa rolar. */
@media (max-width:760px){
  .tabela-rola{overflow-x:visible}
  .tabela-rola table,.tabela-rola thead,.tabela-rola tbody,
  .tabela-rola tr,.tabela-rola th,.tabela-rola td{display:block;width:auto}
  .tabela-rola thead{position:absolute;left:-9999px}      /* cabecalho vira rotulo por celula */
  .tabela-rola tr{background:var(--superficie);border:1px solid var(--ciano-fio);
    border-radius:var(--raio-2);padding:.9rem 1rem;margin-bottom:.85rem}
  .tabela-rola td{border:none;padding:.3rem 0;white-space:normal}
  .tabela-rola td[data-rotulo]::before{content:attr(data-rotulo) ": ";
    font-weight:700;color:var(--azul);font-size:.8125rem}
  .tabela-rola td .campo{margin:.5rem 0}
  .tabela-rola td .btn,.tabela-rola td button{width:100%}
}

/* ------------------------------------------------------------- revelacao */
/* Tela de revelacao (spec §7): palco escuro, travado em 100dvh, pensado para
   telao/projetor a distancia -- por isso clamp() com componente em vmin
   (rem fixo nao escala com a distancia da plateia), e uma faixa de seguranca
   em % da MENOR dimensao contra overscan de projetor/TV. */
.revelacao-corpo{background:var(--navy);margin:0}
.revelacao{
  min-height:100dvh;height:100dvh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--navy);color:var(--sobre-escuro);text-align:center;
  padding:4vmin;box-sizing:border-box;cursor:pointer;position:relative;
}
.revelacao-tela{display:flex;flex-direction:column;align-items:center;gap:1.2vmin;max-width:92vw}
/* `[hidden]{display:none}` e regra do NAVEGADOR e perde para qualquer regra
   de autor com display -- inclusive a de cima. Sem esta linha, o
   `tela.hidden = true` do revelar.js nao escondia nada: medido, as tres telas
   ficavam com display:flex e altura real ao mesmo tempo, e a instrucao
   "Aperte espaco..." aparecia por cima do nome sorteado. Na tela projetada
   para a plateia, no momento do resultado. */
.revelacao-tela[hidden]{display:none}
.revelacao-kicker{
  font-size:clamp(.9rem,2.4vmin,1.5rem);font-weight:700;letter-spacing:normal;
  color:var(--ciano);margin:0;text-transform:none;
}
.revelacao-premio{font-size:clamp(1.75rem,6vmin,4rem);font-weight:800;line-height:1;color:#fff;margin:0 0 1vmin}
.revelacao-contagem{font-size:clamp(1.1rem,3vmin,2rem);margin:0}
.revelacao-instrucao{font-size:clamp(.9rem,2vmin,1.25rem);color:#cfd8e3;margin:0}

.revelacao-numero{font-size:clamp(1.5rem,5vmin,3rem);font-weight:800;color:var(--ciano);margin:0}
/* Nome tem o MAIOR fator de crescimento da tela: e o dado que a plateia
   precisa ler de mais longe. */
.revelacao-nome{font-size:clamp(2.5rem,11vmin,7.5rem);font-weight:800;line-height:1.05;color:#fff;margin:0;word-break:break-word}

.revelacao-tela--revelando{animation:revelacao-entrada .5s ease-out}
@keyframes revelacao-entrada{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}

.revelacao-final{width:100%;max-width:1100px}
.revelacao-final-titulo{font-size:clamp(1.75rem,5vmin,3rem);font-weight:800;color:#fff;margin:0 0 2vmin}
.revelacao-final-lista{
  width:100%;max-height:70dvh;overflow-y:auto;display:flex;flex-direction:column;gap:.6rem;
  padding:0 1rem;box-sizing:border-box;
}
.revelacao-final-linha{
  font-size:clamp(1rem,2.6vmin,1.75rem);font-weight:700;color:#fff;margin:0;
  border-bottom:1px solid rgba(141,208,237,.35);padding-bottom:.5rem;
}

.revelacao-controles{
  position:absolute;left:0;right:0;bottom:3vmin;display:flex;gap:1rem;justify-content:center;
  flex-wrap:wrap;padding:0 2vmin;
}
.revelacao-botao-principal{font-size:clamp(1rem,2.2vmin,1.5rem);padding:16px 32px}

@media (prefers-reduced-motion:reduce){
  .revelacao-tela--revelando{animation:none}
}