/* estilo.css — QRQubits
 *
 * Refeito em 19/09/2026 depois de comparar lado a lado com a referência (cloudconvert.com). A
 * primeira versão acertou a paleta e errou a ESTRUTURA, que é o que faz a página parecer aquela:
 *
 *   1. o herói é DIVIDIDO — texto à esquerda, o "de → para" à direita. Eu tinha centralizado tudo.
 *   2. há um brilho radial no topo e o fundo é quase preto, não #171717 chapado.
 *   3. o cartão é ESTREITO e mostra só "escolha o arquivo". As opções aparecem DEPOIS da escolha.
 *      Eu empilhei senha, robustez e botão de uma vez, o que dobra o peso visual da primeira tela.
 *   4. os blocos de baixo têm ícone à esquerda e um link com seta no fim.
 *
 * O acento continua o ciano do CeasaBank, no lugar do vermelho deles — o site anuncia o banco, e a
 * cor do banco faz a propaganda parecer parte do produto. Mas baixei a saturação no que é grande:
 * ciano puro num botão do tamanho daquele grita, e a referência é discreta.
 */

:root {
  --bg:          #0a0a0a;   /* quase preto, como o deles abaixo do herói */
  --bg-heroi:    #121212;   /* a faixa do topo é levemente mais clara */
  --bg-elev:     #141414;
  --bg-fundo:    #0d0d0d;
  --bg-acc:      #2a2a2a;
  --borda:       #232323;
  --borda-forte: #2e2e2e;
  --txt:         #e5e5e5;
  --txt-suave:   #a3a3a3;
  --txt-fraco:   #6f6f6f;
  --txt-forte:   #ffffff;
  --acento:      #22c9e8;   /* ciano do CeasaBank, um passo mais fundo que o #00d9ff puro */
  --acento-esc:  #17aac6;
  --acento-luz:  #6fe0f5;
  --ok:          #34d399;
  --alerta:      #fbbf24;
  --erro:        #f87171;
  --raio:        .5rem;
  --topo:        4rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

.envolve { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }

/* ---------------------------------------------------------------- topo */
.topo {
  height: var(--topo); display: flex; align-items: center;
  position: relative; z-index: 30;
}
.topo .envolve { display: flex; align-items: center; gap: 2rem; }
.marca { display: flex; align-items: center; gap: .625rem; font-weight: 700; color: var(--txt-forte); font-size: 1.15rem; letter-spacing: -.01em; }
.marca .cubo { width: 1.9rem; height: 1.9rem; flex-shrink: 0; display: block; }
.topo nav { display: flex; align-items: center; gap: 1.5rem; font-size: .9rem; }
.topo nav a { color: var(--txt-suave); }
.topo nav a:hover { color: var(--txt-forte); text-decoration: none; }
.topo .direita { margin-left: auto; display: flex; align-items: center; gap: .875rem; font-size: .9rem; }

/* Seletor de idioma. Discreto de proposito: quem precisa dele procura, e quem nao precisa nao
   deve ter a atencao disputada com o "Criar QRQubit". Usa <select> nativo, e nao um menu
   proprio, porque no celular o nativo abre a roda do sistema — mais familiar e acessivel de
   graca. `color-scheme: dark` e o que faz a lista aberta nascer escura em vez de branca. */
.seletor-idioma {
  background: var(--bg-fundo);
  border: 1px solid var(--borda-forte);
  border-radius: .5rem;
  color: var(--txt-suave);
  font: inherit;
  font-size: .85rem;
  padding: .3rem 1.6rem .3rem .55rem;
  cursor: pointer;
  color-scheme: dark;
  /* seta propria: a nativa varia demais entre navegadores e destoa do resto */
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23a3a3a3' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .45rem center;
  background-size: .7rem;
}
.seletor-idioma:hover  { color: var(--txt-forte); border-color: var(--acento-esc); }
.seletor-idioma:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* No celular o cabecalho ja esta apertado: some o rotulo "Cofre" antes do seletor, porque o
   idioma errado torna a pagina inteira ilegivel e o link do Cofre tem outra porta la embaixo. */
@media (max-width: 30rem) {
  .seletor-idioma { max-width: 8.5rem; }
}

/* ---------------------------------------------------------------- herói
   A faixa do topo tem cor própria e um brilho radial atrás do "de → para", como na referência.
   O corte entre a faixa e o resto é seco, sem degradê — é isso que dá o ar de "seção". */
.faixa-heroi {
  background:
    radial-gradient(60rem 26rem at 78% 22%, rgba(34, 201, 232, .10), transparent 62%),
    radial-gradient(34rem 18rem at 78% 22%, rgba(34, 201, 232, .07), transparent 60%),
    var(--bg-heroi);
  border-bottom: 1px solid var(--borda);
  padding-bottom: 6.5rem;   /* espaço para o cartão subir por cima do corte */
  margin-bottom: -5.5rem;
}
.heroi { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; padding: 3rem 0 2rem; }
.heroi h1 { font-size: 2.75rem; line-height: 1.12; margin: 0 0 1rem; color: var(--txt-forte); font-weight: 800; letter-spacing: -.025em; }
.heroi p { margin: 0; color: var(--txt-suave); max-width: 34rem; }

/* A designacao do produto. Ciano, versalete e espacada: le como um NOME, nao como mais uma linha
   de texto corrido. Fica discreta de proposito — no tamanho do paragrafo ela competiria com o h1,
   e o que precisa ser lido primeiro e "Arquivo para QRQubit". */
.heroi .designacao {
  margin-top: 1.1rem;
  color: var(--acento);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  display: flex;
  gap: .6rem;
  line-height: 1.5;
  /* ⚠️ flex-start, nao center. Sao 44 caracteres em caixa alta: no telefone a linha quebra em duas,
     e com `center` o tracinho iria parar no meio do vao entre elas. Alinhado ao topo (mais meia
     linha no ::before) ele acompanha a PRIMEIRA linha, que e o certo com uma linha ou com tres. */
  align-items: flex-start;
}
/* O tracinho a esquerda separa a designacao do paragrafo sem precisar de mais uma margem grande. */
.heroi .designacao::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  margin-top: .6rem;          /* metade de line-height 1.5 sobre .8rem = centro da 1a linha */
  background: var(--acento);
  opacity: .55;
  flex-shrink: 0;
}

/* o "de → para": dois ladrilhos e a seta no meio, com o anel atrás */
.fluxo { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.25rem; }
.fluxo::before {
  content: ''; position: absolute; width: 19rem; height: 19rem; border-radius: 50%;
  border: 1px solid rgba(34, 201, 232, .13);
  box-shadow: 0 0 0 1px rgba(34, 201, 232, .05) inset;
  pointer-events: none;
}
.ladrilho {
  width: 6.5rem; height: 6.5rem; border-radius: .75rem;
  background: var(--bg-elev); border: 1px solid var(--borda-forte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  position: relative; z-index: 1;
}
.ladrilho .fig { font-size: 1.6rem; line-height: 1; }
.ladrilho .fig img { width: 2.6rem; height: 2.6rem; display: block; }
.ladrilho .rot { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: var(--txt-suave); }
.ladrilho.destino { border-color: rgba(34, 201, 232, .35); }
.ladrilho.destino .rot { color: var(--acento-luz); }
.fluxo .para { font-size: .65rem; letter-spacing: .12em; color: var(--txt-fraco); position: relative; z-index: 1; }

/* ---------------------------------------------------------------- cartão central */
.cartao {
  position: relative; z-index: 10;
  max-width: 34rem; margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--borda-forte);
  border-radius: .75rem;
  padding: 2.25rem 1.75rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
}

.abas { display: flex; gap: .25rem; background: var(--bg-fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: .25rem; margin-bottom: 1.75rem; }
.abas button {
  flex: 1; border: 0; background: transparent; color: var(--txt-suave);
  padding: .5rem .75rem; border-radius: calc(var(--raio) - .125rem);
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  transition: background .15s, color .15s;
}
.abas button:hover { color: var(--txt-forte); }
.abas button[aria-selected="true"] { background: var(--bg-acc); color: var(--txt-forte); }

/* ⚠️ `display:block` — o rótulo é inline por padrão e a borda tracejada saía QUEBRADA
   (visível no print que o Ricardo mandou em 19/09/2026). */
.solta {
  display: block; width: 100%;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: 2rem 1.25rem; text-align: center; cursor: pointer;
  background: transparent; transition: border-color .15s, background .15s;
}
.solta:hover, .solta.sobre { border-color: var(--acento); background: rgba(34, 201, 232, .04); }
.solta .icone { color: var(--acento); margin-bottom: .875rem; display: flex; justify-content: center; }
.solta .icone svg { width: 2.25rem; height: 2.25rem; }
/* ⚠️ `display:block` nos dois: são <span>, que é inline, e sem isto o título, a linha de apoio e
   o botão saíam TODOS NA MESMA LINHA, embolados (print do Ricardo em 19/09/2026). É o mesmo
   descuido da borda tracejada de mais cedo — <span> e <label> dentro de layout vertical precisam
   ser declarados bloco. */
.solta .principal { display: block; color: var(--txt-forte); font-weight: 700; font-size: 1.1rem; }
.solta .secundario { display: block; color: var(--txt-fraco); font-size: .875rem; margin-top: .25rem; }
.solta input[type=file] { display: none; }

/* Botão dentro da área de soltar, como o "Select File" da referência. */
.solta .escolher {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem;
  background: var(--acento); color: #04222a; font-weight: 700; font-size: .95rem;
  border: 0; border-radius: var(--raio); padding: .625rem 1.25rem; cursor: pointer;
}
.solta:hover .escolher { background: var(--acento-esc); }

.arquivo {
  display: flex; align-items: center; gap: .75rem;
  background: var(--bg-fundo); border: 1px solid var(--borda-forte);
  border-radius: var(--raio); padding: .75rem 1rem;
}
.arquivo .nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--txt-forte); font-size: .9rem; }
.arquivo .tam { color: var(--txt-fraco); font-size: .8rem; white-space: nowrap; }
.arquivo .x { background: none; border: 0; color: var(--txt-fraco); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .25rem; }
.arquivo .x:hover { color: var(--erro); }

/* As opções só aparecem depois que há arquivo — a primeira tela fica com uma decisão só,
   como a da referência. */
.opcoes[hidden] { display: none; }
.campo { margin-top: 1.25rem; }
.campo label { display: block; font-size: .78rem; color: var(--txt-suave); margin-bottom: .375rem; font-weight: 600; }
.campo .linha { display: flex; gap: .5rem; }
input[type=text], input[type=password], select {
  width: 100%; background: var(--bg-fundo); color: var(--txt-forte);
  border: 1px solid var(--borda-forte); border-radius: var(--raio);
  padding: .625rem .75rem; font: inherit; font-size: .9rem; outline: none;
}
input:focus, select:focus { border-color: var(--acento); }
.ajuda { font-size: .78rem; color: var(--txt-fraco); margin-top: .375rem; line-height: 1.5; }

/* O `.qrcubit.png` é fixo e fica fora do campo: deixá-lo editável convidaria a apagá-lo, e aí o
   arquivo baixado não seria reconhecido como PNG por alguns programas. */
.campo .sufixo {
  display: flex; align-items: center; padding: 0 .75rem;
  background: var(--bg-acc); border: 1px solid var(--borda-forte); border-radius: var(--raio);
  color: var(--txt-fraco); font-size: .85rem; white-space: nowrap;
}

/* O campo de senha precisa de espaço à direita para o olho não cobrir o texto digitado. */
.com-olho { position: relative; flex: 1; }
.com-olho input { padding-right: 2.75rem; }
.olho {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: .25rem; cursor: pointer;
  color: var(--txt-fraco); display: flex; align-items: center; border-radius: .25rem;
}
.olho:hover { color: var(--txt-forte); }
.olho svg { width: 1.15rem; height: 1.15rem; }

/* Medidor de força. A barra sozinha não informa — o que informa é o tempo escrito ao lado. */
.forca { margin-top: .625rem; }
.forca .trilho { height: .3rem; background: var(--bg-acc); border-radius: 999px; overflow: hidden; }
.forca .barra { height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .25s; }
.forca .linha-forca { display: flex; justify-content: space-between; gap: .75rem; margin-top: .375rem; font-size: .78rem; }
.forca .rotulo { font-weight: 700; }
.forca .detalhe { color: var(--txt-fraco); text-align: right; }
.forca .conselho { font-size: .78rem; color: var(--txt-fraco); margin-top: .5rem; line-height: 1.5; }
.forca .conselho strong { color: var(--txt-suave); }

/* ⚠️ Mesmo caso do `.splash[hidden]` la embaixo: `display` de autor vence o `hidden` do navegador.
   O botao Sair do painel nasce `hidden` e apareceria na tela de login sem esta regra. */
.botao[hidden] { display: none; }

.botao {
  border: 0; border-radius: var(--raio); padding: .625rem 1.125rem;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background .15s, opacity .15s;
}
.botao.principal { background: var(--acento); color: #04222a; width: 100%; margin-top: 1.5rem; padding: .8rem; font-size: .975rem; }
.botao.principal:hover:not(:disabled) { background: var(--acento-esc); }
.botao.secundario { background: var(--bg-acc); color: var(--txt-forte); }
.botao.secundario:hover { background: #383838; }
.botao:disabled { opacity: .35; cursor: not-allowed; }

.aviso { border-radius: var(--raio); padding: .75rem 1rem; font-size: .85rem; margin-top: 1rem; line-height: 1.5; }
.aviso.erro   { background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .28); color: #fca5a5; }
.aviso.alerta { background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .28); color: #fcd34d; }
.aviso.ok     { background: rgba(52, 211, 153, .08); border: 1px solid rgba(52, 211, 153, .28); color: #6ee7b7; }

.saida { text-align: center; margin-top: 1.5rem; }
.saida img {
  width: 12rem; height: 12rem; object-fit: contain;
  image-rendering: pixelated;      /* mosaico pequeno: sem isto o navegador borra os pixels */
  background: var(--bg-fundo); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: .75rem;
}
.progresso { display: flex; align-items: center; justify-content: center; gap: .625rem; color: var(--txt-suave); font-size: .9rem; margin-top: 1.25rem; }
.girando { width: 1rem; height: 1rem; border: 2px solid var(--bg-acc); border-top-color: var(--acento); border-radius: 50%; animation: girar .7s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- blocos */
.blocos { display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; margin: 5rem 0 3.5rem; }
.bloco {
  background: var(--bg-elev); border: 1px solid var(--borda);
  border-radius: .75rem; padding: 1.5rem;
  display: flex; gap: 1rem;
}
.bloco .selo {
  width: 2.25rem; height: 2.25rem; border-radius: .5rem; flex-shrink: 0;
  background: rgba(34, 201, 232, .1); color: var(--acento);
  display: flex; align-items: center; justify-content: center;
}
.bloco .selo svg { width: 1.15rem; height: 1.15rem; }
.bloco h2 { font-size: .95rem; color: var(--txt-forte); margin: 0 0 .5rem; font-weight: 700; }
.bloco h2 small { color: var(--txt-fraco); font-weight: 400; font-size: .85rem; }
.bloco p { margin: 0 0 .625rem; color: var(--txt-suave); font-size: .875rem; line-height: 1.65; }
.bloco p:last-of-type { margin-bottom: 0; }
.bloco .seta { display: inline-block; margin-top: .75rem; font-size: .85rem; font-weight: 600; }

/* ---------------------------------------------------------------- banco */
.banco {
  border: 1px solid var(--borda-forte); border-radius: .75rem;
  background: radial-gradient(40rem 16rem at 12% 0%, rgba(34, 201, 232, .07), transparent 62%), var(--bg-elev);
  padding: 2rem; margin-bottom: 4rem;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.banco .txt { flex: 1; min-width: 17rem; }
.banco h2 { margin: 0 0 .5rem; color: var(--txt-forte); font-size: 1.2rem; }
.banco p { margin: 0; color: var(--txt-suave); font-size: .9rem; }
.banco ul { margin: .875rem 0 0; padding-left: 1.1rem; color: var(--txt-suave); font-size: .875rem; }
.banco li { margin-bottom: .3rem; }
.banco .cta { background: var(--acento); color: #04222a; font-weight: 700; padding: .75rem 1.5rem; border-radius: var(--raio); white-space: nowrap; }
.banco .cta:hover { background: var(--acento-esc); text-decoration: none; }

/* ---------------------------------------------------------------- rodapé */
.rodape { border-top: 1px solid var(--borda); padding: 2rem 0 3rem; color: var(--txt-fraco); font-size: .82rem; }
.rodape .envolve { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

@media (max-width: 860px) {
  .heroi { grid-template-columns: 1fr; gap: 2rem; text-align: center; padding-top: 2rem; }
  .heroi p { margin: 0 auto; }
  /* O heroi vira centralizado no telefone, mas `display:flex` nao obedece text-align: sem isto a
     designacao ficaria encostada a esquerda dentro de um bloco centralizado. */
  .heroi .designacao { justify-content: center; margin-top: 1rem; }
  .fluxo::before { width: 15rem; height: 15rem; }
  .blocos { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .heroi h1 { font-size: 1.85rem; }
  .cartao { padding: 1.5rem 1.15rem; }
  .banco { padding: 1.5rem; }
  .topo nav { display: none; }
}

/* Faixa de aviso operacional, ligada pelo painel (/admin). Fica acima de tudo e usa a cor de
   alerta: quando ela aparece e porque algo mudou no servico, e passar despercebida seria o mesmo
   que nao existir. */
.faixa-aviso {
  background: rgba(251, 191, 36, .1);
  border-bottom: 1px solid rgba(251, 191, 36, .3);
  color: #fcd34d;
  padding: .7rem 1.25rem;
  font-size: .85rem;
  text-align: center;
  line-height: 1.5;
}

/* =============================================================== abertura em video (splash) ====
 *
 * Camada por cima da pagina inteira. A pagina carrega por baixo normalmente — isto nunca e um
 * portao, so uma cortina que sai sozinha.
 */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;                       /* clicar em qualquer lugar pula; o cursor precisa dizer isso */
  opacity: 1;
  transition: opacity .4s ease;
}
.splash.saindo { opacity: 0; pointer-events: none; }

/* ⚠️ SEM ESTA LINHA A ABERTURA APARECE MESMO DESLIGADA.
 *
 * O `display: none` do atributo `hidden` vem da folha do NAVEGADOR, e qualquer regra de autor a
 * vence — inclusive o `display: flex` logo acima, que tem a mesma especificidade. O elemento nasce
 * com `hidden` no HTML justamente para so aparecer se o painel mandar; sem esta regra ele apareceria
 * sempre, e o interruptor do /admin seria enfeite.
 *
 * (Ja ha um `.opcoes[hidden]` neste arquivo pelo mesmo motivo. E uma armadilha recorrente: toda vez
 * que uma classe definir `display`, o `hidden` daquele elemento precisa ser reforcado.) */
.splash[hidden] { display: none; }

/* O video NAO ocupa a tela inteira (pedido do Ricardo em 19/09/2026: "esta muito grande").
 *
 * Fica num quadro centralizado sobre o fundo escuro. Como o proprio video ja tem fundo quase preto,
 * nao precisa de moldura: ele simplesmente flutua, e o brilho atras — o mesmo recurso do heroi da
 * pagina — evita que pareca um video pequeno perdido numa tela grande.
 *
 * `min()` com `vw` e `vh` de proposito: em monitor largo manda o limite em pixels; em telefone em pe
 * manda a largura da tela; em telefone deitado (pouca altura) manda a altura, senao o video
 * vazaria para fora da tela em vez de encolher. */
.splash-video {
  /* A largura vem do painel (/admin -> Largura do video da abertura), aplicada pelo splash.js como
     a variavel abaixo. O valor aqui e so o que vale se o servidor nao responder. */
  width: min(var(--splash-larg, 880px), 82vw, 150vh);
  height: auto;
  max-height: 72vh;
  border-radius: .75rem;
  background: var(--bg);
  position: relative;
  z-index: 1;
}

/* O brilho atras do quadro. `pointer-events: none` porque clicar em qualquer lugar pula a abertura
   e este elemento nao pode virar um buraco que engole o clique. */
.splash::before {
  content: '';
  position: absolute;
  width: min(900px, 120vw);
  height: min(900px, 120vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 201, 232, .10) 0%, rgba(34, 201, 232, 0) 62%);
  pointer-events: none;
}

/* Os dois botoes vivem juntos num canto, nao soltos: alinhados por um flex eles nunca se
   desencontram quando o tamanho de um muda. */
.splash-acoes {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* ⚠️ Mesma armadilha do `.splash[hidden]`: classe que define `display` vence o atributo `hidden`.
   Os icones do botao de som sao trocados justamente por `hidden`. */
.splash-acoes [hidden], .splash-som[hidden] { display: none; }

.splash-som {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--txt);
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s, color .15s;
}
.splash-som svg { width: 1.15rem; height: 1.15rem; }
.splash-som:hover { background: rgba(255, 255, 255, .14); color: var(--txt-forte); }
.splash-som:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.splash-pular {
  z-index: 1;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: var(--txt);
  border-radius: 999px;
  padding: .55rem 1.35rem;
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s, color .15s, border-color .15s;
}
.splash-pular:hover { background: rgba(255, 255, 255, .14); color: var(--txt-forte); }
.splash-pular:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

/* Enquanto a abertura esta na tela, a pagina por baixo nao rola. Sem isto, girar a roda do mouse
   move o site invisivel e a pessoa volta de uma abertura de 3 s para o meio da pagina, sem entender
   como foi parar la. */
html.com-splash, html.com-splash body { overflow: hidden; }

@media (max-width: 640px) {
  .splash-acoes { bottom: 1.25rem; right: 1.25rem; gap: .5rem; }
  .splash-pular { padding: .5rem 1.1rem; }
  .splash-som { width: 2.25rem; height: 2.25rem; }
}

/* Quem pede menos animacao no sistema nao deveria nem chegar aqui (o splash.js ja desiste antes),
   mas se chegar — por um `?splash=1` na URL, por exemplo — ao menos a transicao some. */
@media (prefers-reduced-motion: reduce) {
  .splash { transition: none; }
}

/* =============================================================== aviso de lotacao ==============
 *
 * Modal, nao faixa: a pessoa clicou "Criar" e esperava um resultado. Um aviso discreto passaria
 * batido e ela clicaria de novo — engrossando exatamente a fila que causou o problema.
 */

.popup {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}

/* ⚠️ Mesma armadilha de sempre: `display` de autor vence o `hidden` do navegador. Sem esta linha
   o aviso aparece para todo mundo, o tempo todo. */
.popup[hidden] { display: none; }

.popup-caixa {
  background: var(--bg-elev);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  padding: 2rem 1.75rem 1.75rem;
  max-width: 26rem;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
}
.popup-icone {
  display: inline-flex;
  width: 3rem; height: 3rem;
  align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(251, 191, 36, .12);
  color: var(--alerta);
  margin-bottom: 1rem;
}
.popup-icone svg { width: 1.6rem; height: 1.6rem; }
.popup-caixa h2 { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--txt-forte); }
.popup-caixa p { margin: 0 0 1.25rem; color: var(--txt-suave); font-size: .9rem; line-height: 1.6; }
.popup-nota {
  font-size: .8rem !important;
  color: var(--txt-fraco) !important;
  border-top: 1px solid var(--borda);
  padding-top: .9rem;
}

/* O link dos termos no rodape. Discreto de proposito — e obrigacao legal, nao chamada de acao —
   mas visivelmente clicavel, senao a obrigacao nao esta cumprida de verdade. */
footer a {
  color: var(--txt-suave);
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-color: var(--borda-forte);
}
footer a:hover { color: var(--acento); text-decoration-color: var(--acento); }

/* A caixa do Turnstile. No modo Managed ela costuma ficar invisivel; quando a Cloudflare decide
   mostrar algo, precisa de um lugar que nao empurre o resto da tela. */
#turnstile { display: flex; justify-content: center; margin: 1rem 0 0; }
#turnstile[hidden] { display: none; }