/* ==========================================================================
   Portal do hotspot, com a identidade visual Castelapi
   (cgnat-indexador/CONTRATO3.md, seção "Identidade visual"; valores do tema
   escuro iguais aos de /opt/cgnat-panel/web/static/estilo.css).

   QUEM É QUEM NA TELA
   A marca do HOTSPOT (67 Telecom, 595 Internet: nome, logo e termos) é quem
   oferece o Wi-Fi e fica no topo. A Castelapi é o sistema visual (tokens,
   tipografia, componentes, espaçamento) e assina discretamente no rodapé.

   REGRAS DESTA FOLHA
   1. Cliente ainda NÃO autenticado: nada externo. Fontes em fontes/, símbolo
      em marca/, tudo do próprio domínio (a CSP do portal só aceita 'self').
   2. Leve: só o subconjunto latino (cobre pt-BR e es-PY, com ç ã õ ñ ¿ ¡) e
      um arquivo por família. Sora e Archivo são fontes VARIÁVEIS, então um
      arquivo serve 400, 500 e 600. Mono só no peso 500 (código de 6 dígitos).
      Total: ~73 KB. Caractere fora do subconjunto cai na fonte do sistema.
   3. Tema: segue `prefers-color-scheme` do aparelho. Sem seletor e sem cookie:
      a janela de login do celular não guarda cookie de forma confiável.
   4. COR CRUA SÓ NOS BLOCOS DE TOKEN (`:root`). Fora deles, só `var(--...)`.
      `testes/test_portal_identidade.py` reprova a suíte se voltar.
      Os nomes são PAPÉIS: --osso é sempre o chão, --papel a superfície,
      --grafite a tinta; o tema escuro troca o valor, nunca o nome.

   ACENTO (botão principal, links, spinner)
   Padrão: o --mel da Castelapi, com tinta grafite por cima (5,76:1; branco
   sobre mel dá 2,4:1 e reprova). A cor da marca só vira acento quando
   `/portal-cores/<c1>/<c2>.css` decide que sim (ver `acento_da_marca` em
   hotspot/portal/__init__.py): cor_primaria diferente do DEFAULT antigo do
   esquema (#0b5cad) E com contraste AA (4,5:1) sobre o --papel claro. Aí
   aquela folha redefine os --claro-acento* e --escuro-acento*, e os blocos de
   tema abaixo continuam só apontando para eles.

   TRÊS COISAS NÃO ACOMPANHAM A TROCA DE TEMA, e têm token próprio:
   --topo-* e --palco-* (cabeçalho e tela inicial: escuros nos dois temas, é
   onde a logo da marca foi pensada para aparecer), --sobre-foto-* (seletor de
   idioma por cima de foto ou vídeo) e as cores das redes sociais (manual de
   marca do Google e da Meta).

   CONTRASTE (WCAG 2.1, texto 4,5:1), conferido em test_portal_identidade.py:
     claro   grafite/papel 14,27  suave/papel 5,05  suave/osso 4,55
             grafite/mel 5,76  mel-texto/papel 6,28  terracota-texto/tênue 5,12
     escuro  grafite/papel 11,80  suave/papel 5,82  suave/osso 6,43
             osso/mel 8,07  mel-texto/papel 8,44  terracota-texto/tênue 7,16
   ========================================================================== */

@font-face{font-family:"Sora";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fontes/sora-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url(fontes/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(fontes/ibm-plex-mono-latin-500.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;

  /* ------------------------------------------------------- tema claro */
  --grafite:#252B33; --mel:#D9982F; --terracota:#B65C38; --osso:#F6F3EC;
  --papel:#FFFFFF; --linha:#E3DCCB; --suave:#696F7B; --ok:#1F6B45;
  --mel-texto:#7D5A16; --terracota-texto:#9E4A28;
  --mel-tenue:#FBF2E0; --mel-borda:#ECD9B4;
  --terracota-tenue:#F8E9E2; --terracota-borda:#ECD6CB;
  --campo-fundo:#FFFFFF;
  --topo-fundo:#252B33;
  --sombra:rgba(37,43,51,.10);
  --google-fundo:#FFFFFF; --google-texto:#1F1F1F; --google-borda:#747775;

  /* Acento. Valores crus aqui; o papel (--acento) aponta para eles. */
  --claro-acento:#D9982F; --claro-acento-texto:#7D5A16; --claro-sobre-acento:#252B33;
  --escuro-acento:#DFA548; --escuro-acento-texto:#E7B45E; --escuro-sobre-acento:#15191F;
  --acento:var(--claro-acento);
  --acento-texto:var(--claro-acento-texto);
  --sobre-acento:var(--claro-sobre-acento);

  /* --------------------------------- cores do TEMPLATE de tela (por elemento)
     Cada token aqui JÁ VALE o que a tela mostra hoje: só aponta para o papel
     Castelapi correspondente. Quando o template de tela escolhe uma cor, a
     folha /portal-tema/<dados>/<assinatura>.css (rota `tema` em
     hotspot/portal/__init__.py) redefine SÓ os tokens daquela chave, e ela
     entra depois desta folha, então ganha nos dois temas -- cor escolhida à
     mão não tem versão clara e versão escura, é a cor que a pessoa escolheu.
     Chave que o template NÃO escolheu não vira declaração nenhuma e continua
     valendo a linha daqui: hotspot sem cores sai idêntico ao de antes.
       fundo       -> --tela-fundo (chão), --tela-superficie (cartão, abas),
                      --tela-campo (dentro do campo)
       texto       -> --tela-texto (tinta, anel de foco)
       botao       -> --tela-botao / botao_texto -> --tela-botao-texto
       barra       -> --tela-barra / barra_texto -> --tela-barra-texto
       acento      -> --tela-acento (texto de link e foco de campo),
                      --tela-acento-forte (preenchimento: spinner, caixa de
                      aceite) e --tela-linha-acento (fio do cabeçalho)
     `acento` acende três tokens porque esses três lugares têm valores
     DIFERENTES hoje (--acento-texto, --acento e --mel); um token só já mudaria
     a tela de quem não escolheu cor nenhuma. */
  --tela-fundo:var(--osso); --tela-superficie:var(--papel); --tela-campo:var(--campo-fundo);
  --tela-texto:var(--grafite);
  --tela-botao:var(--acento); --tela-botao-texto:var(--sobre-acento);
  --tela-barra:var(--topo-fundo); --tela-barra-texto:var(--topo-texto);
  --tela-acento:var(--acento-texto); --tela-acento-forte:var(--acento); --tela-linha-acento:var(--mel);

  /* ------------------------------------------- iguais nos dois temas */
  --topo-texto:#F6F3EC;
  --topo-fraco:rgba(246,243,236,.45);
  --palco-fundo:#0F1218;
  --sobre-foto-fundo:rgba(15,18,24,.72);
  --sobre-foto-texto:#F6F3EC;
  --sobre-foto-borda:rgba(246,243,236,.55);
  --sombra-foto:rgba(0,0,0,.45);
  /* Meta, 2023: #0866FF (branco por cima 4,82:1; o antigo #1877F2 dava 4,23:1). */
  --facebook-fundo:#0866FF; --facebook-texto:#FFFFFF;

  --sora:"Sora",system-ui,sans-serif;
  --archivo:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --raio:10px;

  /* ------------------------------------------------------ tema escuro
     Valores uma vez só; o bloco do @media apenas aponta para eles. */
  --escuro-grafite:#E2DDD3; --escuro-mel:#DFA548; --escuro-terracota:#CF7B54;
  --escuro-osso:#15191F; --escuro-papel:#1D222A; --escuro-linha:#2E353F;
  --escuro-suave:#949DA9; --escuro-ok:#56CF97;
  --escuro-mel-texto:#E7B45E; --escuro-terracota-texto:#EE9E79;
  --escuro-mel-tenue:#2C2314; --escuro-mel-borda:#4A3A1D;
  --escuro-terracota-tenue:#32211B; --escuro-terracota-borda:#4C3028;
  --escuro-campo-fundo:#171C23;
  --escuro-topo-fundo:#0F1218;
  --escuro-sombra:rgba(0,0,0,.40);
  --escuro-google-fundo:#131314; --escuro-google-texto:#E3E3E3; --escuro-google-borda:#8E918F;
}

@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --grafite:var(--escuro-grafite); --mel:var(--escuro-mel);
    --terracota:var(--escuro-terracota); --osso:var(--escuro-osso);
    --papel:var(--escuro-papel); --linha:var(--escuro-linha);
    --suave:var(--escuro-suave); --ok:var(--escuro-ok);
    --mel-texto:var(--escuro-mel-texto); --terracota-texto:var(--escuro-terracota-texto);
    --mel-tenue:var(--escuro-mel-tenue); --mel-borda:var(--escuro-mel-borda);
    --terracota-tenue:var(--escuro-terracota-tenue); --terracota-borda:var(--escuro-terracota-borda);
    --campo-fundo:var(--escuro-campo-fundo);
    --topo-fundo:var(--escuro-topo-fundo);
    --sombra:var(--escuro-sombra);
    --google-fundo:var(--escuro-google-fundo); --google-texto:var(--escuro-google-texto);
    --google-borda:var(--escuro-google-borda);
    --acento:var(--escuro-acento);
    --acento-texto:var(--escuro-acento-texto);
    --sobre-acento:var(--escuro-sobre-acento);
  }
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--tela-fundo);color:var(--tela-texto);font:400 16px/1.5 var(--archivo);
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
img,video{max-width:100%}
h1{font:600 1.35rem/1.25 var(--sora);letter-spacing:-.01em;margin:0 0 1rem}
h2{font:600 1.05rem/1.3 var(--sora);letter-spacing:-.005em;margin:0 0 .5rem}
a{color:var(--tela-acento)}
:focus-visible{outline:3px solid var(--tela-texto);outline-offset:2px}

.faixa-previa{position:sticky;top:0;z-index:20;background:var(--mel-tenue);color:var(--grafite);
  border-bottom:1px solid var(--mel-borda);padding:.5rem 1rem;font-size:.85rem;text-align:center}

/* ------------------------------------------------------ seletor de idioma
   Flutua por cima de foto, vídeo ou cabeçalho: fundo escuro translúcido e
   anel de foco em duas cores, visível sobre qualquer coisa. */
.idiomas{position:fixed;top:.5rem;right:.5rem;z-index:30;display:flex;gap:.3rem}
.faixa-previa ~ .idiomas{top:2.6rem}
.idioma{min-height:2.25rem;padding:.3rem .8rem;border:1px solid var(--sobre-foto-borda);border-radius:999px;
  background:var(--sobre-foto-fundo);color:var(--sobre-foto-texto);font:500 .85rem/1 var(--archivo);cursor:pointer}
.idioma.atual{background:var(--sobre-foto-texto);color:var(--palco-fundo);border-color:var(--sobre-foto-texto);font-weight:600}
.idioma:focus-visible{outline:2px solid var(--sobre-foto-texto);outline-offset:1px;box-shadow:0 0 0 4px var(--palco-fundo)}

/* ---------------------------------------------------------------- botões
   Estados: normal (acento), foco (anel de tinta), enviando (spinner, mantém a
   cor) e desabilitado/trava (tracejado, sem acento, texto AA). */
.botao{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;min-height:3.1rem;
  margin:1rem 0 0;padding:.75rem 1rem;border:1px solid var(--tela-botao);border-radius:var(--raio);
  background:var(--tela-botao);color:var(--tela-botao-texto);font:600 1.05rem/1.2 var(--archivo);
  text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.botao:hover{filter:brightness(1.05)}
.botao:focus-visible{outline:3px solid var(--tela-texto);outline-offset:3px}
.botao-secundario{background:transparent;color:var(--tela-texto);border-color:var(--suave);font-weight:500}
.social-google{background:var(--google-fundo);color:var(--google-texto);border-color:var(--google-borda)}
.social-facebook{background:var(--facebook-fundo);color:var(--facebook-texto);border-color:var(--facebook-fundo)}
.botao:disabled:not(.enviando){background:var(--tela-fundo);color:var(--suave);border:1px dashed var(--suave);
  cursor:not-allowed;filter:none}
.botao.enviando{cursor:progress;filter:none}
.botao.enviando::after{content:"";flex:none;width:1.05em;height:1.05em;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;animation:girar .8s linear infinite}

/* --------------------------------------------------------- tela inicial */
.inicio{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--palco-fundo);color:var(--topo-texto)}
.inicio :focus-visible{outline-color:var(--topo-texto)}
.inicio .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.inicio .centro{position:relative;flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.logo-grande{max-width:min(70vw,320px);max-height:40vh;object-fit:contain;filter:drop-shadow(0 2px 8px var(--sombra-foto))}
.bem-vindo{font:600 1.75rem/1.2 var(--sora);letter-spacing:-.02em;text-align:center;margin:0;
  text-shadow:0 2px 6px var(--sombra-foto)}
.bem-vindo::after{content:"";display:block;width:2.5rem;height:3px;margin:.8rem auto 0;border-radius:2px;background:var(--tela-linha-acento)}
.modelo-foto .inicio{background:var(--topo-fundo)}
.rodape-inicio{position:relative;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.rodape-inicio .botao{max-width:28rem;margin:0 auto;box-shadow:0 2px 12px var(--sombra-foto)}

.slides{position:relative;flex:1;min-height:60vh}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease}
.slide.ativo{opacity:1}
.pontos{position:relative;display:flex;gap:.4rem;justify-content:center;padding:.5rem}
.ponto{width:.5rem;height:.5rem;border-radius:50%;background:var(--topo-fraco)}
.ponto.ativo{background:var(--topo-texto)}

.modelo-portfolio .inicio{background:var(--tela-fundo);color:var(--tela-texto)}
.modelo-portfolio .inicio :focus-visible{outline-color:var(--tela-texto)}
.modelo-portfolio .rodape-inicio .botao{box-shadow:0 2px 12px var(--sombra)}
.portfolio{list-style:none;margin:0 auto;padding:1rem 1rem 0;width:100%;max-width:40rem;flex:1}
.item{display:flex;gap:.85rem;background:var(--tela-superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:.75rem;margin-bottom:.75rem}
.item img{width:5.5rem;height:5.5rem;object-fit:cover;border-radius:6px;flex:none;background:var(--tela-fundo)}
.item h2{margin:0 0 .2rem}
.item p{margin:0;color:var(--suave);font-size:.92rem}
.preco{display:inline-block;margin-top:.4rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tela-acento)}

.video-caixa{position:relative;flex:1;display:flex;align-items:center;justify-content:center}
.video-caixa video{width:100%;max-height:80vh;background:var(--palco-fundo)}
.botao-play{position:absolute;width:auto;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;
  padding:.75rem 1.5rem;box-shadow:0 2px 12px var(--sombra-foto)}
.aviso-video{position:relative;text-align:center;margin:.5rem 1rem 0;font-size:.92rem;color:var(--topo-texto)}

/* -------------------------------------------------------------- métodos */
.metodos{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.cabecalho{background:var(--tela-barra);color:var(--tela-barra-texto);text-align:center;padding:1rem 1rem 1.9rem;
  box-shadow:inset 0 -3px 0 var(--tela-linha-acento)}
.cabecalho :focus-visible{outline-color:var(--tela-barra-texto)}
/* Com o seletor de idioma (fixo no canto) o cabeçalho reserva a faixa de cima, senão os botões cobrem a logo
   (visto no iPhone na bancada em 25/09/2026). Navegador sem :has() fica como antes. */
body:has(.idiomas) .cabecalho{padding-top:3.4rem}
body:has(.faixa-previa ~ .idiomas) .cabecalho{padding-top:5.5rem}
.cabecalho .logo{display:block;margin:0 auto;max-height:3.5rem;max-width:55%;object-fit:contain}
.cabecalho .marca{font:600 1.2rem/1.2 var(--sora);letter-spacing:-.01em}
.cartao{position:relative;width:calc(100% - 1.5rem);max-width:28rem;margin:-.9rem auto 0;
  background:var(--tela-superficie);border:1px solid var(--linha);border-radius:var(--raio);
  padding:1.25rem 1rem 1.5rem;box-shadow:0 6px 24px var(--sombra)}
.centralizado{text-align:center;margin-top:2rem}
.abas{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.aba{flex:1 1 auto;min-height:2.6rem;padding:.4rem .8rem;border:1px solid var(--linha);border-radius:999px;
  background:var(--tela-superficie);color:var(--tela-texto);font:500 .9rem/1.1 var(--archivo);cursor:pointer}
.aba.ativa{background:var(--tela-texto);color:var(--tela-superficie);border-color:var(--tela-texto);font-weight:600}
.js .abas ~ .metodo .titulo-metodo{display:none}
.metodo + .metodo{margin-top:1.5rem}
.js .abas ~ .metodo + .metodo{margin-top:0}

/* Borda do campo em --suave: o fundo do campo e o do cartão são iguais, e
   --linha sobre papel dá 1,37:1 (contorno de controle pede 3:1). */
.campo{margin-bottom:.9rem}
.campo label{display:block;font:500 .9rem/1.3 var(--archivo);color:var(--tela-texto);margin-bottom:.3rem}
.opcional{font-weight:400;color:var(--suave)}
.campo input,.campo select{display:block;width:100%;min-height:3rem;padding:.6rem .75rem;
  border:1px solid var(--suave);border-radius:8px;background:var(--tela-campo);color:var(--tela-texto);
  font:400 16px/1.3 var(--archivo)}
.campo input::placeholder{color:var(--suave);opacity:1}
.campo input:focus,.campo select:focus{border-color:var(--tela-acento);outline:2px solid var(--tela-acento);outline-offset:0}
.campo input.codigo{font:500 1.6rem/1 var(--mono);letter-spacing:.45em;text-align:center;padding-left:1.2rem}

.termos{margin:.6rem 0;font-size:.92rem}
.termos summary{cursor:pointer;color:var(--tela-acento);font-weight:500;padding:.3rem 0}
.termos-texto{white-space:pre-wrap;max-height:40vh;overflow:auto;margin-top:.5rem;padding:.75rem;
  background:var(--tela-fundo);color:var(--tela-texto);border:1px solid var(--linha);border-radius:8px;font-size:.85rem}
.aceite{display:flex;gap:.6rem;align-items:flex-start;font-size:.95rem;margin-top:.6rem;cursor:pointer}
.aceite input{width:1.35rem;height:1.35rem;margin:.1rem 0 0;flex:none;accent-color:var(--tela-acento-forte)}

.erros{background:var(--terracota-tenue);color:var(--terracota-texto);border:1px solid var(--terracota-borda);
  border-left:3px solid var(--terracota);border-radius:8px;padding:.6rem .8rem;margin-bottom:1rem}
.erros p{margin:.2rem 0}
.aviso{background:var(--mel-tenue);color:var(--grafite);border:1px solid var(--mel-borda);
  border-left:3px solid var(--mel);border-radius:8px;padding:.6rem .8rem;margin:0 0 1rem}

.girando{width:2.5rem;height:2.5rem;margin:1.5rem auto;border:4px solid var(--linha);border-top-color:var(--tela-acento-forte);
  border-radius:50%;animation:girar 1s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}

/* Assinatura Castelapi: discreta, no pé da página. */
.assinatura{display:flex;align-items:center;justify-content:center;gap:.4rem;margin-top:auto;
  padding:1.75rem 1rem calc(.9rem + env(safe-area-inset-bottom));
  font:500 .75rem/1 var(--sora);letter-spacing:.02em;color:var(--suave)}
.assinatura img{display:block;width:.95rem;height:.95rem}

@media (prefers-reduced-motion: reduce){
  .girando,.botao.enviando::after{animation-duration:3s}
  .slide{transition:none}
}
@media (min-width: 40rem){
  .cartao{margin-top:-.9rem;padding:1.75rem}
  .centralizado{margin-top:2rem}
}