/* ============================================================
   LUIS LELIS 2301 — site.css (www.luislelis.com.br)
   Rota Montserrat. Tokens copiados de tokens.css da entrega
   (fonte da verdade). Regras invioláveis do CLAUDE.md:
   fundos chapados, sem gradiente/sombra, máx. 3 cores por view,
   títulos Montserrat 800, contraste ≥ 4,5:1.
   ============================================================ */

:root{
  /* cor */
  --azul-900:#1B2338; /* fundo dominante */
  --azul-700:#26314E; /* superfície secundária, cards, faixa de rodapé */
  --azul-500:#2E4573; /* acento; borda das opções do teste (confirmado 24/08/2026) */
  --areia:#E9E0CE;    /* fundo claro, texto sobre azul */
  --areia-700:#CFC2A8;/* sobrelinha, legenda sobre azul */
  --branco:#FBFAF7;   /* título sobre azul; nunca #FFF puro */
  --roxo:#6B2E9E;     /* sinal de público: só sobre areia */
  --roxo-400:#9354CE; /* grafismo sobre azul; NUNCA texto */
  --tinta:#141A2B;    /* texto de peso sobre areia */
  /* tipo — família única Montserrat */
  --fonte:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --peso-titulo:800;
  /* site (rem base 16) */
  --texto-h1:3.5rem; --texto-h2:2rem; --texto-corpo:1.125rem; --texto-legenda:.875rem;
  --entrelinha-titulo:1.08; --entrelinha-corpo:1.6;
  --tracking-titulo:-.01em; --tracking-sobrelinha:.18em; --tracking-assinatura:.06em; --tracking-marca:.04em;
  /* espaço: múltiplos de 8 */
  --esp-1:8px; --esp-2:16px; --esp-3:24px; --esp-4:32px; --esp-6:48px; --esp-8:64px; --esp-12:96px;
  --raio:4px;
  --sombra:none; /* sombra não existe no sistema */
  --larg-max:1120px;
}

/* --- Montserrat local (sem CDN; TTFs desta pasta, licença SIL OFL junto) --- */
@font-face{font-family:'Montserrat';src:url('../fontes/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fontes/Montserrat-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fontes/Montserrat-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fontes/Montserrat-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fontes/Montserrat-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  background:var(--azul-900);
  color:var(--areia);
  font-family:var(--fonte);
  font-size:var(--texto-corpo);
  line-height:var(--entrelinha-corpo);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
/* [hidden] SEMPRE vence: sem isto, .botao{display:inline-block} (estilo de
   autor) anula o [hidden] do navegador e elementos "escondidos" continuam visíveis */
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--areia);outline-offset:3px;border-radius:var(--raio)}

.envelope{max-width:var(--larg-max);margin:0 auto;padding-inline:var(--esp-3)}
@media (min-width:768px){.envelope{padding-inline:var(--esp-6)}}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */
h1,h2,h3{
  font-weight:var(--peso-titulo);
  line-height:var(--entrelinha-titulo);
  letter-spacing:var(--tracking-titulo);
  color:var(--branco);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(2.125rem,6.5vw,var(--texto-h1))}
h2{font-size:clamp(1.5rem,4.5vw,var(--texto-h2))}
h3{font-size:1.25rem}
p{margin:0}

.sobrelinha{
  font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-sobrelinha);
  color:var(--areia-700);
  font-size:var(--texto-legenda);
  margin:0 0 var(--esp-2);
}
.sobre-areia{background:var(--areia);color:var(--tinta)}
.sobre-areia h1,.sobre-areia h2,.sobre-areia h3{color:var(--tinta)}
.sobre-areia .sobrelinha{color:var(--roxo)} /* roxo só sobre areia — regra 2 */

/* Marcador de texto pendente de entrevista — SAI antes de publicar */
.pendente{
  font-style:italic;font-weight:400;color:var(--areia-700);
  border:1px dashed var(--areia-700);border-radius:var(--raio);
  padding:2px 8px;
}
.sobre-areia .pendente{color:var(--tinta);border-color:var(--tinta)}

/* ============================================================
   HEADER
   ============================================================ */
.cabecalho{
  background:var(--azul-900);
  border-bottom:1px solid var(--azul-700);
}
.cabecalho .envelope{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--esp-2);
  padding-block:var(--esp-2);
  min-height:64px;
}
/* Marca remontada em texto: wordmark Montserrat 800 +0,04em,
   espaço duplo entre palavras; número junto = lockup horizontal */
.marca{
  display:flex;align-items:baseline;gap:var(--esp-2);
  text-decoration:none;white-space:nowrap;
}
.marca .nome{
  font-weight:800;letter-spacing:var(--tracking-marca);
  color:var(--branco);font-size:1.125rem;text-transform:uppercase;
}
.marca .numero{
  font-weight:800;letter-spacing:var(--tracking-marca);
  color:var(--areia);font-size:1.125rem;
}
.chip-afinidade{
  display:none; /* aparece via JS depois do teste */
  align-items:center;gap:var(--esp-1);
  background:var(--azul-700);color:var(--areia);
  border:none;border-radius:var(--raio);
  font:600 var(--texto-legenda) var(--fonte);
  padding:var(--esp-1) var(--esp-2);
  text-decoration:none;
}
.chip-afinidade .refazer{font-weight:700;text-transform:uppercase;letter-spacing:var(--tracking-assinatura)}
.chip-afinidade[data-visivel="1"]{display:flex}

/* ============================================================
   SEÇÃO DE DUAS COLUNAS (texto + recorte PNG sem fundo)
   Página /conheca: fotos alternam de lado (.foto-esq espelha).
   O recorte "senta" na base da seção, como se apoiado nela.
   ============================================================ */
/* texto ANCORADO NO TOPO (título na altura do rosto — pedido do candidato,
   24/08) e foto ancorada na base da seção */
.secao-duas{display:grid;gap:var(--esp-4)}
.secao-texto{display:grid;gap:var(--esp-3);align-content:start;align-self:start;max-width:62ch}
.secao-foto{display:flex;justify-content:center;align-self:end}
.secao-foto img{width:100%;max-width:420px;height:auto}
@media (min-width:900px){
  .secao-duas{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--esp-8)}
  .secao-duas.foto-esq{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .secao-duas.foto-esq .secao-texto{order:2}
  .secao-foto img{max-width:460px}
}

/* ============================================================
   BOTÕES
   ============================================================ */
.botao{
  display:inline-block;
  background:var(--areia);color:var(--tinta);
  font:700 1rem var(--fonte);text-transform:uppercase;
  letter-spacing:var(--tracking-assinatura);
  border:none;border-radius:var(--raio);
  padding:var(--esp-2) var(--esp-4);
  text-decoration:none;cursor:pointer;
}
.botao:hover{background:var(--branco)}
.botao[disabled]{opacity:.5;cursor:not-allowed}
.link-secundario{
  color:var(--areia);font-weight:600;
  text-decoration:underline;text-underline-offset:4px;
  background:none;border:none;font-family:var(--fonte);font-size:1rem;cursor:pointer;padding:0;
}

/* ============================================================
   SEÇÕES
   ============================================================ */
.secao{padding-block:var(--esp-8)}
@media (min-width:768px){.secao{padding-block:var(--esp-12)}}

/* Divisor de 4px azul-500 na virada Quem é o Luis → Propostas (home pós-teste) */
.divisor{height:4px;background:var(--azul-500);border:none;margin:0}

/* Propostas em TÓPICOS, não caixas (ORDEM 24/08): lista com filete areia-700 */
.topicos{list-style:none;margin:var(--esp-2) 0 0;padding:0;display:grid;gap:var(--esp-3)}
.topicos li{
  border-left:4px solid var(--areia-700);
  padding-left:var(--esp-3);
  line-height:var(--entrelinha-corpo);
}

/* ============================================================
   RODAPÉ LEGAL — em todas as views
   ============================================================ */
.rodape{
  background:var(--azul-700);
  padding-block:var(--esp-4);
}
.rodape .legal{
  font-weight:600;font-size:var(--texto-legenda);
  letter-spacing:.06em;color:var(--areia-700);
  margin:0;text-align:center;text-wrap:balance;
}
/* escopo restrito ao texto legal: sem isto, .rodape a pintava o texto dos
   botões de rede de areia sobre fundo areia (ilegível) */
.rodape .legal a{color:var(--areia)}
/* contato por botão, não por número escrito (ORDEM 24/08) */
.rodape-botoes{
  display:flex;flex-wrap:wrap;gap:var(--esp-2);
  justify-content:center;align-items:center;
  margin-top:var(--esp-3);
}
.botao-rede{
  display:inline-block;
  background:var(--areia);color:var(--tinta);
  font:700 var(--texto-legenda) var(--fonte);text-transform:uppercase;
  letter-spacing:var(--tracking-assinatura);
  border-radius:var(--raio);
  padding:var(--esp-1) var(--esp-3);
  text-decoration:none;
}
.botao-rede:hover{background:var(--branco)}

/* ============================================================
   TESTE (a HOME é o teste)
   ============================================================ */
.teste-main{min-height:70vh}
.tela{display:none;padding-block:var(--esp-6)}
.tela[data-ativa="1"]{display:block}
.tela .envelope{display:grid;gap:var(--esp-4);max-width:760px}
/* abertura: uma barba no canto inferior ESQUERDO, sangrando DUAS bordas
   (esquerda e base) de propósito, dobrada de tamanho (ORDEM 24/08);
   16% porque há texto perto */
.tela.abertura{position:relative;overflow:hidden}
.tela.abertura .barba{
  position:absolute;left:-8%;bottom:-10%;
  width:min(84vw,840px);opacity:.16;pointer-events:none;user-select:none;
}
.tela.abertura .envelope{position:relative;z-index:2}
/* grade da abertura: texto+vídeo à esquerda, recorte PNG grande à direita.
   IMPORTANTE: .tela .envelope limita as telas de PERGUNTA/RESULTADO a 760px
   (coluna de leitura); a ABERTURA usa a largura cheia do site no desktop —
   sem esta exceção, o desktop fica espremido como celular */
.tela.abertura .envelope{max-width:var(--larg-max)}
.abertura-grade{display:grid;gap:var(--esp-4)}
.abertura-texto{display:grid;gap:var(--esp-4);align-content:start}
.abertura-apoio{font-size:1rem;color:var(--areia);max-width:56ch}
.abertura-foto{display:flex;justify-content:center;align-items:flex-end}
.abertura-foto img{width:100%;max-width:440px;height:auto}
@media (min-width:900px){
  .tela.abertura{padding-block:var(--esp-8)}
  .abertura-grade{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--esp-12);align-items:end}
  .abertura-texto{gap:var(--esp-6)}
  .abertura-apoio{font-size:var(--texto-corpo)}
  .abertura-foto img{max-width:620px}
}

/* barra de progresso: areia sobre trilho azul-900, dentro de faixa azul-700 */
.progresso{
  background:var(--azul-700);
  padding-block:var(--esp-2);
}
.progresso .envelope{display:grid;gap:var(--esp-1)}
.progresso .rotulo{
  font-weight:700;font-size:var(--texto-legenda);
  text-transform:uppercase;letter-spacing:var(--tracking-sobrelinha);
  color:var(--areia-700);
}
.trilho{background:var(--azul-900);border-radius:var(--raio);height:8px;overflow:hidden}
.trilho .barra{background:var(--areia);height:100%;width:0;transition:width .25s ease}

/* vídeo de abertura */
.video-caixa{background:var(--azul-700);border-radius:var(--raio);aspect-ratio:16/9;display:grid;place-items:center;overflow:hidden}
.video-caixa video{width:100%;height:100%;object-fit:cover}

/* opções: borda 2px azul-500; selecionada vira areia com texto tinta */
.opcoes{display:grid;gap:var(--esp-2);margin:0;padding:0;list-style:none}
.opcao{
  width:100%;text-align:left;
  background:var(--azul-900);color:var(--areia);
  border:2px solid var(--azul-500);border-radius:var(--raio);
  font:600 1rem var(--fonte);line-height:1.4;
  padding:var(--esp-2) var(--esp-3);
  cursor:pointer;
}
.opcao:hover{border-color:var(--areia-700)}
.opcao.selecionada{background:var(--areia);color:var(--tinta);border-color:var(--areia)}

/* resultado: percentual grande, três faixas com a MESMA dignidade —
   mesmo azul, mesma tipografia; a baixa nunca recebe vermelho nem deboche */
.resultado-numero{
  font-weight:800;line-height:1;
  letter-spacing:var(--tracking-titulo);
  color:var(--branco);
  font-size:clamp(4rem,18vw,8.5rem);
  margin:0;
}
.resultado-mensagem{max-width:56ch}

/* consentimento LGPD + contato */
.consentimento{
  display:flex;gap:var(--esp-2);align-items:flex-start;
  background:var(--azul-700);border-radius:var(--raio);
  padding:var(--esp-3);
}
.consentimento input[type="checkbox"]{
  width:24px;height:24px;margin:0;flex:none;accent-color:var(--areia);
}
.formulario{display:grid;gap:var(--esp-3)}
.campo{display:grid;gap:var(--esp-1)}
.campo label{font-weight:700;font-size:var(--texto-legenda);text-transform:uppercase;letter-spacing:var(--tracking-assinatura);color:var(--areia-700)}
.campo input{
  background:var(--azul-900);color:var(--branco);
  /* borda areia-700 (contraste 8,9:1 sobre azul-900): azul-500 dava 1,65:1,
     abaixo do 3:1 que WCAG 1.4.11 exige para o contorno de um controle */
  border:2px solid var(--areia-700);border-radius:var(--raio);
  font:400 1rem var(--fonte);
  padding:var(--esp-2) var(--esp-3);
}
.campo input:focus-visible{outline:3px solid var(--areia);outline-offset:2px}

/* ============================================================
   LINKTREE (/links) — página de bio do Instagram
   ============================================================ */
.linktree{min-height:80vh;display:grid;align-items:start}
.linktree .coluna{
  display:grid;justify-items:center;gap:var(--esp-4);
  max-width:520px;padding-block:var(--esp-8);
}
.linktree .avatar{
  width:128px;height:128px;border-radius:50%;object-fit:cover;
}
.linktree .identidade{display:grid;justify-items:center;gap:var(--esp-1)}
.linktree .nome-grande{
  font-weight:800;letter-spacing:var(--tracking-marca);
  color:var(--branco);font-size:1.5rem;text-transform:uppercase;margin:0;
}
.linktree .assinatura-linha{
  font-weight:700;text-transform:uppercase;
  letter-spacing:var(--tracking-assinatura);
  color:var(--areia-700);font-size:var(--texto-legenda);margin:0;
}
.linktree .botoes{display:grid;gap:var(--esp-2);width:100%}
/* botões cheios em areia, como o .botao do sistema: contraste forte sem
   depender de borda (a borda azul-500 sobre azul-900 dava só 1,65:1) */
.botao-link{
  display:block;width:100%;text-align:center;
  background:var(--areia);color:var(--tinta);
  border:none;border-radius:var(--raio);
  font:700 1rem var(--fonte);text-transform:uppercase;
  letter-spacing:var(--tracking-assinatura);
  padding:var(--esp-3);text-decoration:none;
}
.botao-link:hover{background:var(--branco)}

/* acessibilidade */
.pular-conteudo{
  position:absolute;left:-9999px;top:0;
  background:var(--areia);color:var(--tinta);
  padding:var(--esp-2) var(--esp-3);border-radius:var(--raio);
  font-weight:700;z-index:10;
}
.pular-conteudo:focus{left:var(--esp-2)}
.so-leitor{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}