/* ===========================================================================
   Stephanes 2210 · base do sistema
   ---------------------------------------------------------------------------
   Tokens, tipografia, botões e o "chrome" (cabeçalho, rodapé, botão flutuante).
   A estrutura de seções é a do site de referência (deltandallagnol.com.br),
   a pele é o Manual de Identidade Visual Stephanes 2026 (Growtag):
     · paleta medida no PDF do manual (página "Paleta de cores")
     · Lemon Milk nos títulos e nos números, Inter no corpo
     · navy como chão da marca, amarelo cívico como única cor de ação
     · a faixa verde-amarela do logotipo como fio condutor, nunca como fundo
   =========================================================================== */

@font-face {
  font-family: 'Lemon Milk';
  src: url('../fonts/LEMONMILK-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lemon Milk';
  src: url('../fonts/LEMONMILK-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* paleta oficial (manual, p. "Paleta de cores") */
  --azul-republica: #184A93;    /* cor principal da identidade */
  --azul-institucional: #12366B;/* fundos, títulos, peças de autoridade */
  --azul-parana: #2E67B8;       /* apoio, destaques */
  --gelo: #EBEDED;              /* texto sobre fundo escuro */
  --verde-brasil: #2FA44F;
  --verde-araucaria: #1F7F3B;
  --amarelo-civico: #F2C400;    /* chamadas importantes: a cor de ação */
  --amarelo-luz: #FFD84D;

  /* derivados: profundidades do mesmo navy, nunca cinza neutro.
     Os dois níveis de apoio são medidos: 8,7:1 e 5,6:1 sobre o papel,
     7,9:1 e 5,1:1 sobre o gelo. Corpo de texto nunca abaixo de 4,5:1. */
  --navy-fundo: #0B2450;        /* rodapé e chão do hero */
  --navy-veu: rgba(18, 54, 107, .86);
  --tinta: #12366B;             /* texto sobre claro */
  --tinta-70: #2E4C79;          /* corpo de texto */
  --tinta-50: #54698B;          /* apoio, legendas, fontes */
  --linha: rgba(18, 54, 107, .14);
  --linha-clara: rgba(255, 255, 255, .16);
  --papel: #FFFFFF;
  --gelo-fundo: #F3F5F8;        /* seção clara: gelo puxado para o azul */

  --fonte: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo: 'Lemon Milk', 'Inter', ui-sans-serif, system-ui, sans-serif;

  --max: 1240px;
  --gutter: 24px;

  /* sombras em camadas de alfa baixo: uma sombra só parece adesivo */
  --s1: 0 1px 2px rgba(11,36,80,.05), 0 2px 4px rgba(11,36,80,.05);
  --s2: 0 2px 4px rgba(11,36,80,.05), 0 4px 8px rgba(11,36,80,.05), 0 8px 16px rgba(11,36,80,.05);
  --s3: 0 4px 8px rgba(11,36,80,.06), 0 8px 16px rgba(11,36,80,.06), 0 16px 32px rgba(11,36,80,.06), 0 32px 64px rgba(11,36,80,.06);
  --s-escura: 0 24px 64px rgba(0,0,0,.36), 0 8px 24px rgba(0,0,0,.22);
  /* o amarelo levanta o botão, não acende um halo em volta dele */
  --glow: 0 6px 16px rgba(11,36,80,.18), 0 2px 4px rgba(11,36,80,.12);
  --glow-forte: 0 10px 24px rgba(11,36,80,.24), 0 3px 8px rgba(11,36,80,.16);

  --r-p: 8px;
  --r-m: 14px;
  --r-g: 22px;
  --mola: cubic-bezier(.16, .84, .44, 1);
  --faixa: linear-gradient(90deg, #FFD84D 0%, #F2C400 38%, #2FA44F 72%, #1F7F3B 100%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--fonte); background: var(--gelo-fundo); color: var(--tinta);
  line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--amarelo-civico); color: var(--azul-institucional); }
/* foco: amarelo sobre escuro, navy sobre claro. Um anel amarelo em cima do
   botão amarelo é foco invisível, que é o mesmo que não ter foco. */
:focus-visible { outline: 3px solid var(--azul-republica); outline-offset: 3px; }
.sec-navy :focus-visible, .hero :focus-visible,
.rod :focus-visible, .cab :focus-visible, .btn-amarelo:focus-visible,
.player :focus-visible {
  outline-color: var(--amarelo-civico);
}
.btn-amarelo:focus-visible,
.votar .passos li:focus-visible { outline-color: var(--azul-institucional); }

/* rótulo que só o leitor de tela ouve */
.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--amarelo-civico);
  color: var(--azul-institucional); padding: 10px 16px; border-radius: var(--r-p); font-weight: 800;
  text-decoration: none; transition: top .2s;
}
.skip:focus { top: 12px; }

.in { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ── tipografia ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.04;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--azul-institucional);
  text-wrap: balance;
}
h1 { font-size: clamp(34px, 5.6vw, 72px); }
h2 { font-size: clamp(28px, 3.6vw, 48px); }
h3 { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.15; }
h4 { font-size: 14px; letter-spacing: .14em; }
p { font-size: clamp(16px, 1.15vw, 18px); text-wrap: pretty; }
.lead { font-size: clamp(17px, 1.32vw, 20px); line-height: 1.6; max-width: 66ch; }
.num { font-family: var(--fonte-titulo); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* Rótulo de seção: existe só onde carrega informação que o título não dá
   (a legenda eleitoral do hero, o recorte de 399 cidades). Não é grade fixa
   em cima de toda seção; repetido em todas, vira andaime, não voz. */
.rotulo {
  font-size: 12.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
  color: var(--verde-araucaria); display: inline-flex; align-items: flex-start; gap: 12px;
  line-height: 1.35;
}
/* o traço acompanha a primeira linha. Centralizado, ele descia para o meio do
   bloco quando o rótulo quebrava em duas linhas no celular */
.rotulo::before { content: ""; flex: none; width: 26px; height: 3px; border-radius: 2px; background: var(--faixa); margin-top: .58em; }
.rotulo.claro { color: var(--amarelo-civico); }

/* ── botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: none; cursor: pointer; text-decoration: none; font-family: var(--fonte);
  font-weight: 800; letter-spacing: .01em; font-size: 16px; line-height: 1.2;
  padding: 16px 30px; border-radius: var(--r-p);
  transition: transform .28s var(--mola), box-shadow .28s var(--mola), background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-amarelo { background: var(--amarelo-civico); color: var(--azul-institucional); box-shadow: var(--glow); }
.btn-amarelo:hover { background: var(--amarelo-luz); box-shadow: var(--glow-forte); }
.btn-navy { background: var(--azul-republica); color: #fff; box-shadow: var(--s2); }
.btn-navy:hover { background: var(--azul-institucional); box-shadow: var(--s3); }
.btn-linha { background: transparent; color: var(--azul-institucional); box-shadow: inset 0 0 0 2px var(--azul-institucional); }
.btn-linha:hover { background: var(--azul-institucional); color: #fff; }
.btn-linha-claro { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.46); }
.btn-linha-claro:hover { background: rgba(255,255,255,.1); }
.btn-zap { background: #25D366; color: #062b15; }
.btn-zap:hover { background: #3BE27A; }
.btn-grande { padding: 20px 38px; font-size: 18px; }

/* ── cabeçalho ──────────────────────────────────────────────────────────── */
.cab {
  position: sticky; top: 0; z-index: 90; background: rgba(18, 54, 107, .92);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(242,196,0,.32);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* rolando, a barra encorpa e ganha peso: deixa de flutuar sobre a foto */
.cab.rolou { background: rgba(11, 36, 80, .97); box-shadow: 0 8px 28px rgba(11,36,80,.28); }
.cab .nav {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px 24px; max-width: var(--max); margin: 0 auto;
}
/* lockup do candidato + marca do partido, separados por um fio.
   O logotipo do PL já tem fundo próprio: entra como bloco, sem placa atrás. */
.cab .marcas { display: flex; align-items: center; gap: 13px; min-width: 0; }
.cab .marca { display: block; line-height: 0; }
.cab .marca img { height: 42px; width: auto; max-width: none; display: block; }
.cab .divisor { flex: none; width: 1px; height: 28px; background: rgba(255,255,255,.24); }
.cab .marca-pl { flex: none; height: 39px; width: auto; display: block; border-radius: 2px; }
.cab .menu { display: flex; gap: 2px; list-style: none; align-items: center; }
.cab .menu a {
  color: rgba(255,255,255,.88); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 9px 10px; border-radius: 6px; display: inline-block; white-space: nowrap;
  transition: color .2s, background-color .2s;
}
.cab .menu a:hover { color: var(--amarelo-civico); background: rgba(255,255,255,.07); }
/* seção atual: um traço no pé do item. Sombra interna arredondada virava
   contorno de caixa e passava por anel de foco. */
.cab .menu li { position: relative; }
.cab .menu a.on { color: var(--amarelo-civico); background: rgba(255,255,255,.07); }
.cab .menu a.on::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--amarelo-civico);
}
.cab .menu .btn.on::after { content: none; }
.cab .menu .btn { padding: 11px 16px; font-size: 14px; margin-left: 6px; }
.cab .menu .btn:hover { color: var(--azul-institucional); background: var(--amarelo-luz); }
.cab .burger {
  display: none; background: none; border: 0; color: #fff; cursor: pointer; line-height: 1; padding: 6px 8px;
  border-radius: 6px;
}
.cab .burger svg { width: 26px; height: 26px; }

/* O cabeçalho recolhe no seu próprio ponto, mais alto que o das seções: são
   seis itens, um botão e duas marcas na mesma linha, e a régua acaba antes
   dos 920px do resto do layout. Abaixo daqui, menu no hambúrguer. */
@media (max-width: 1140px) {
  .cab .burger { display: block; }
  .cab .menu {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    gap: 2px; padding: 10px 16px 18px; background: var(--azul-institucional);
    border-bottom: 1px solid rgba(242,196,0,.32); box-shadow: var(--s-escura); display: none;
  }
  .cab .menu.aberto { display: flex; }
  .cab .menu a { padding: 13px 12px; font-size: 16px; }
  .cab .menu a.on::after { left: 12px; right: 12px; }
  .cab .menu .btn { margin: 8px 0 0; }
}

@media (max-width: 920px) {
  .cab .nav { padding: 10px 16px; }
  .cab .marcas { gap: 11px; }
  .cab .marca img { height: 34px; }
  .cab .divisor { height: 24px; }
  .cab .marca-pl { height: 32px; }
}

/* ── faixa da marca: a linha verde-amarela que corta o logotipo ─────────── */
.faixa-linha { height: 6px; background: var(--faixa); }

/* ── rodapé ─────────────────────────────────────────────────────────────── */
.rod { background: var(--navy-fundo); color: rgba(255,255,255,.82); padding: clamp(48px, 6vw, 80px) 0 28px; }
.rod .grade {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: clamp(24px, 4vw, 56px);
  padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid var(--linha-clara);
}
.rod .marca-rod img { width: 220px; height: auto; }
.rod .marca-rod p { margin-top: 18px; font-size: 15px; line-height: 1.55; max-width: 34ch; color: rgba(255,255,255,.72); }
.rod .rod-pl {
  display: flex; align-items: center; gap: 14px; margin-top: 22px;
  padding-top: 20px; border-top: 1px solid var(--linha-clara);
}
.rod .rod-pl img { flex: none; width: 51px; height: auto; border-radius: 2px; }
.rod .rod-pl span { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.7); }
.rod .rod-pl b { display: block; color: rgba(255,255,255,.9); font-weight: 700; }
.rod h4 { color: var(--amarelo-civico); margin-bottom: 14px; }
.rod ul { list-style: none; }
.rod li { margin: 0 0 9px; font-size: 15px; }
.rod a { color: rgba(255,255,255,.82); text-decoration: none; }
.rod a:hover { color: var(--amarelo-civico); }
.rod .legal {
  margin-top: 22px; display: flex; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap;
  font-size: 12.5px; color: rgba(255,255,255,.74); line-height: 1.55;
}
.rod .legal p { font-size: inherit; max-width: 46ch; }
.rod .legal b { color: #fff; font-weight: 600; }
@media (max-width: 920px) { .rod .grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rod .grade { grid-template-columns: 1fr; } }

/* ── botão flutuante do WhatsApp ────────────────────────────────────────── */
/* Bolha que vira convite. Fechada é o círculo do WhatsApp com um anel que
   pulsa devagar; aberta cresce para a esquerda e mostra o chamado, como um
   balão de mensagem chegando. Abre no hover, no foco e uma vez sozinha,
   quando a pessoa passa do hero (ver site.js). */
.zap-flutuante {
  position: fixed; right: 18px; z-index: 80;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center;
  padding: 5px; border-radius: 999px; text-decoration: none;
  /* fechada é só o círculo verde; a placa branca só existe quando há recado */
  background: rgba(255,255,255,0); color: var(--azul-institucional);
  transition: transform .3s var(--mola), background-color .4s ease, box-shadow .4s ease;
}
.zap-flutuante.aberto, .zap-flutuante:hover, .zap-flutuante:focus-visible {
  background: #fff; box-shadow: 0 14px 36px rgba(11,36,80,.32), 0 3px 10px rgba(11,36,80,.18);
}
.zap-flutuante:hover { transform: translateY(-3px); }
.zap-flutuante .zap-ico {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #25D366; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.26);
}
.zap-flutuante .zap-ico svg { width: 29px; height: 29px; position: relative; z-index: 1; }
/* o anel só respira enquanto a bolha está fechada e ninguém está por perto */
.zap-flutuante .zap-ico::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25D366; animation: pulso-zap 2.8s var(--mola) infinite;
}
.zap-flutuante.aberto .zap-ico::after, .zap-flutuante:hover .zap-ico::after { animation: none; opacity: 0; }
@keyframes pulso-zap {
  0% { transform: scale(1); opacity: .6; }
  70%, 100% { transform: scale(1.9); opacity: 0; }
}
/* max-width anima largura, o que normalmente é caro. Aqui não: a bolha é
   position:fixed, está fora do fluxo, e crescer não reposiciona uma linha
   sequer do documento. É o preço de a placa branca crescer junto com o texto,
   e transform sozinho não faz isso sem distorcer o desenho. */
.zap-flutuante .zap-texto {
  max-width: 0; opacity: 0; overflow: hidden;
  transition: max-width .55s var(--mola), opacity .28s ease .06s;
}
.zap-flutuante .zap-texto > span {
  display: block; padding: 0 18px 0 14px; font-size: 13.5px; line-height: 1.35;
  color: var(--tinta-70); white-space: nowrap;
}
.zap-flutuante .zap-texto b { display: block; font-size: 14.5px; font-weight: 800; color: var(--azul-institucional); }
.zap-flutuante.aberto .zap-texto, .zap-flutuante:hover .zap-texto, .zap-flutuante:focus-visible .zap-texto {
  max-width: 260px; opacity: 1;
}
@media (max-width: 560px) {
  .zap-flutuante { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .zap-flutuante .zap-ico { width: 46px; height: 46px; }
  .zap-flutuante .zap-ico svg { width: 25px; height: 25px; }
  .zap-flutuante .zap-texto > span { padding: 0 15px 0 12px; font-size: 12.5px; }
  .zap-flutuante .zap-texto b { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .zap-flutuante, .zap-flutuante .zap-texto { transition: none; }
  .zap-flutuante:hover { transform: none; }
  .zap-flutuante .zap-ico::after { animation: none; opacity: 0; }
}

/* ── revelação ao rolar ─────────────────────────────────────────────────── */
/* O padrão é visível. A revelação só entra quando o JS assume a página
   (html.js) e o observador existe para desfazê-la. Sem essa trava, aba em
   segundo plano, renderizador sem pintura ou JS que não carregou deixavam
   metade do site em branco: a animação escondia o conteúdo em vez de
   enfeitá-lo. */
.rev { opacity: 1; transform: none; }
.js .rev { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--mola), transform .7s var(--mola); }
.js .rev.viu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rev { opacity: 1; transform: none; transition: none; }
  .btn, .btn:hover { transition: none; transform: none; }
}

/* ── rodapé: barra de ícones das redes ───────────────────────────────────── */
.redes-ico { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; list-style: none; }
.redes-ico li { margin: 0; }
.redes-ico a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, .08); border: 1px solid var(--linha-clara);
  color: rgba(255, 255, 255, .9);
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.redes-ico a:hover {
  background: var(--amarelo-civico); color: var(--azul-institucional);
  border-color: var(--amarelo-civico); transform: translateY(-2px);
}
.redes-ico svg { display: block; width: 19px; height: 19px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .redes-ico a { transition: none; }
  .redes-ico a:hover { transform: none; }
}