/* ============================================================
   GERADO por build-site.js. NÃO EDITE ESTE ARQUIVO.
   É a fundação do styles.css (tokens da marca, tipografia, botões, navbar)
   recortada para as páginas do site institucional, que não carregam o CSS
   das landing pages. Para mudar cor ou tipografia, edite styles.css e rode
   node build-site.js.
   ============================================================ */

/* ============================================================
   Vero Norte — Design System
   Identidade oficial (Manual de Marca): Azul Abissal / Azul Horizonte.
   Tipografia: IBM Plex Sans (primária e accent, per manual).
   ============================================================ */

:root {
  /* Superfícies — tema claro, Branco Polar como base (per material institucional) */
  --bg:        #FFFFFF;
  --bg-1:      #F5F8FB;
  --surface:   #F1F5F9;
  --surface-2: #E8EEF4;
  --surface-3: #DEE5ED;

  /* Linhas / bordas: Azul Abissal em baixa opacidade */
  --line:        rgba(5, 15, 30, 0.10);
  --line-strong: rgba(5, 15, 30, 0.18);

  /* Contorno de campo de formulário. Separado do --line-strong de propósito:
     borda de campo é componente de interface e a WCAG 1.4.11 pede 3:1, enquanto
     as linhas decorativas do resto do site não têm esse piso. Em fundo claro o
     --line-strong dá 1,48:1; Azul Abissal a 45% sobe para 3,05:1. */
  --field-line: rgba(5, 15, 30, 0.45);

  /* Texto de erro. O --flag-bright foi calibrado para o bloco escuro (8,3:1) e
     reprova na faixa clara (2,17:1, contra os 4,5:1 exigidos). Terracota escurecido
     dá 5,17:1 no claro. A troca por tema mantém a família da cor de alerta. */
  --erro-text: #B3452F;

  /* Texto: Azul Abissal no principal, cinza-azulado nos apoios */
  --text:       #050F1E;
  --text-muted: #4A5C6E;
  --text-faint: #5F7183;

  /* Acento: Azul Horizonte (cor oficial da marca), usado com disciplina (só 1-2 destaques por página) */
  --accent:        #5696FB;
  /* Mesmo azul em componentes RGB. Existe porque os brilhos do hero e do formulário
     precisam de opacidade sobre a cor de destaque, e rgba() não aceita hex de
     variável. Sem este token, uma LP de ramo com outra cor continuava com o brilho
     azul por trás do título. Todo tema de ramo redefine este junto com os outros. */
  --accent-rgb:    86, 150, 251;
  --accent-bright: #7EB0FC;
  --accent-deep:   #1B43BF;
  --accent-dim:    rgba(86, 150, 251, 0.12);
  --accent-line:   rgba(86, 150, 251, 0.38);
  /* Azul Horizonte puro não passa em contraste sobre branco (3:1). Para texto
     pequeno em azul, usa Azul Corrente, que passa com folga (7.4:1). */
  --accent-text:   #1B43BF;

  /* Destaque: Terracota Norte (cor oficial de alerta/destaque do manual), reservado para selos e sinalizações */
  --flag:        #CC553D;
  --flag-bright: #E0998B;
  --flag-dim:    rgba(204, 85, 61, 0.14);
  --flag-line:   rgba(204, 85, 61, 0.4);

  /* Secundárias do manual: Azul Céu (luz/brilho) e Areia Clara (contraponto quente, "terra firme") */
  --sky:  #B0E9FD;
  --sand: #EADBBE;

  /* WhatsApp (funcional) */
  --wa:     #25d366;
  --wa-600: #1eb858;
  /* Sobre o azul mais claro da 5ª dobra o verde do WhatsApp cai para 3,9:1 e
     reprova em texto pequeno. Esta variação clara sobe para 5,2:1. */
  --wa-claro: #6FEBA6;

  /* Variação de mercado (funcional, indicadores) */
  --up:   #25d366;
  --down: #ef5354;

  /* Tipografia */
  --font-display: "IBM Plex Sans", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", system-ui, sans-serif;
  --font-accent:  "IBM Plex Sans", system-ui, sans-serif;

  /* Escala tipográfica alinhada ao manual: técnica, estruturada, clara.
     Razão título:corpo ~4:1, pesos Medium, tracking aberto. */
  --fs-micro: 12.5px;
  /* Faixa de apoio, criada em 18/08/2026. Antes existiam oito tokens e NENHUM entre
     12,5px e 17px, então texto de apoio, nota, rótulo e etiqueta foram escritos com
     valores soltos: 15, 15.5, 14.5, 14, 16 e 13.5px, seis tamanhos para quatro papéis.
     O problema não era ignorar o sistema, era o sistema não ter o que eles precisavam. */
  --fs-apoio:   15px;    /* texto dentro de cartão, legenda, seta de link */
  --fs-nota:    13.5px;  /* nota de rodapé, ressalva, letra miúda */
  --fs-etiqueta: 14.5px; /* item de navegação, rótulo de dado */
  --fs-body:  17px;
  --fs-lead:  clamp(19px, 1.05rem + 0.55vw, 22px);
  --fs-h3:    clamp(19px, 1rem + 0.55vw, 23px);
  --fs-h2:    clamp(32px, 1.4rem + 2.6vw, 48px);
  --fs-manifesto: clamp(27px, 1.1rem + 2.6vw, 42px);
  --fs-h1:    clamp(36px, 1.3rem + 3.9vw, 68px);
  --fs-stat:  clamp(38px, 1.6rem + 3.4vw, 60px);

  /* A travessia: escada de estágios do breu ao amanhecer.
     Hex estático primeiro (fallback), color-mix depois (progressive enhancement). */
  --stage-0: #030a15;
  --stage-1: #050F1E;
  --stage-2: #0a1626;
  --stage-3: #101d31;
  --stage-4: #16253c;
  --stage-5: #1d2e47;
  --stage-6: #253a54;
  --stage-7: #2e4763;
  --stage-8: #385573;

  /* Layout */
  --container: 1140px;
  --radius:    14px;
  --radius-sm: 10px;

  /* Movimento — UMA receita de easing/duração reusada em todo o site.
     --ease: curva de chegada (entradas, máscaras, hovers). --ease-amb: só loops ambientes. */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-amb:  cubic-bezier(0.45, 0, 0.55, 1);
  --t-fast:    0.20s;
  --t-base:    0.70s;
  --t-slow:    1.00s;
}

/* Blocos escuros: abertura (hero + clientes) e fecho (CTA), como a capa e a
   contracapa do material impresso. Reverte os tokens só dentro deles. */
.on-dark {
  --bg:        #050F1E;
  --bg-1:      #050F1E;
  --surface:   #182752;
  --surface-2: #26364D;
  --surface-3: #264B66;
  --line:        rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.17);
  /* No bloco escuro o --line-strong dá 1,62:1 no contorno do campo. Branco a 35% sobe para 3,17:1. */
  --field-line: rgba(255, 255, 255, 0.35);
  --erro-text: var(--flag-bright);
  --text:       #ffffff;
  --text-muted: #9CB2BF;
  --text-faint: #8CA0B0;
  --accent-text: #7EB0FC;
  background: var(--bg);
  color: var(--text);
}

/* Estágios refinados quando o navegador suporta color-mix (deriva tudo do manual) */
@supports (color: color-mix(in oklab, #000 50%, #fff)) {
  :root {
    --stage-0: color-mix(in oklab, var(--bg) 84%, #000);
    --stage-2: color-mix(in oklab, var(--bg) 88%, var(--surface-2));
    --stage-3: color-mix(in oklab, var(--bg) 74%, var(--surface-2));
    --stage-4: color-mix(in oklab, var(--bg) 60%, var(--surface-2));
    --stage-5: color-mix(in oklab, var(--bg) 48%, var(--surface-2));
    --stage-6: color-mix(in oklab, var(--surface-2) 78%, var(--surface-3));
    --stage-7: color-mix(in oklab, var(--surface-2) 48%, var(--surface-3));
    --stage-8: color-mix(in oklab, var(--surface-3) 82%, var(--sky));
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  color-scheme: light;
  /* Corta na raiz: no iOS o clip só no body não impede o pinch-zoom-out.
     hidden vem antes porque o valor clip só existe no Safari 16+, e em
     iPhone travado no iOS 15 a declaração com clip é descartada inteira. */
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

section[id] { scroll-margin-top: 96px; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-y: none;
  /* E-mail, link ou palavra longa quebra em vez de esticar a página */
  overflow-wrap: break-word;
}

/* Nos estágios finais (mais claros) o texto apagado perde contraste — sobe um tom */

::selection { background: var(--accent); color: #fff; }

a { color: inherit; text-decoration: none; }
/* <u> vem da copy: o documento sublinha trechos específicos. Offset para o traço
   não encostar nas descidas de g, p e q. */
u { text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* <s> também vem da copy: o documento risca a palavra "não" na 2ª dobra. */
s { text-decoration-thickness: 1.5px; }
img { max-width: 100%; display: block; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

section { position: relative; padding: clamp(96px, 12vw, 176px) 0; }

/* ---------- Rótulo monoespaçado (eyebrow) ---------- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-accent);
  font-size: 12.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 26px;
}
.kicker::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}
/* O documento marca em itálico só o kicker da 1ª dobra, que ali funciona como
   assinatura da marca; os demais kickers vêm em caixa alta e romanos. */
.kicker-italico { font-style: italic; }
.kicker.center { justify-content: center; }
.kicker.center::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}

/* ---------- Tipos de título ---------- */
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 500; line-height: 1.12; letter-spacing: -0.014em;
  /* Diretriz 5: título longo não pode fechar com uma palavra sozinha na última
     linha. Medido: com 'pretty' os títulos continuavam terminando em uma palavra,
     porque ele só reequilibra quando sobra folga. 'balance' iguala o comprimento
     das linhas e é o que de fato tira a órfã em título curto e médio. */
  text-wrap: balance;
}

.section-head { max-width: 860px; margin-bottom: 64px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); font-weight: 500; }
.section-head .lead {
  margin-top: 24px;
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 640px;
  line-height: 1.55;
}
.section-head.center .lead { margin-inline: auto; }
.section-head .lead strong { color: var(--text); font-weight: 600; }

.accent-word { color: var(--accent-text); font-weight: 600; }
/* Impede que a pontuação final caia sozinha numa linha só dela no celular
   ("linhas isoladas", diretriz 5 do documento). */
.sem-quebra { white-space: nowrap; }
.on-dark .accent-word, h1 .accent-word, h2 .accent-word { color: var(--accent); }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15.5px;
  padding: 14px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
  max-width: 100%;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
/* Em tela estreita um rótulo longo com nowrap fica mais largo que o celular.
   Deixa quebrar em duas linhas em vez de empurrar a página para fora. */
.btn-wa {
  background: var(--wa);
  color: #04220f;
  box-shadow: 0 10px 30px -12px rgba(37, 211, 102, 0.5);
}
/* O logo do WhatsApp NÃO pode ser recolorido: a diretriz da marca só admite ele em
   branco sobre o verde, ou no verde sobre fundo claro. Antes ele herdava o #04220f do
   rótulo e saía preto, que é justamente o uso proibido. O rótulo continua escuro
   porque é texto e precisa de contraste (8,5:1); marca registrada não entra nessa
   conta, a própria WCAG isenta logotipo. */
.btn-wa svg, .wa-float svg { color: #fff; }
.btn-wa:hover { background: var(--wa-600); }

.btn-ghost {
  border-color: var(--line-strong);
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent-line); background: var(--accent-dim); }
.btn-lg { padding: 17px 32px; font-size: 16.5px; }

/* Celular: o rótulo tem de caber em UMA linha. Deixar quebrar resolvia o transbordo
   mas produzia botão de 90px de altura, que é um bloco e não um alvo de toque (o
   confortável fica perto de 48px). Menos respiro lateral e corpo um pouco menor fazem
   os rótulos longos caberem inteiros; a quebra continua ali só como último recurso,
   para nada estourar a tela se algum texto crescer. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-wrap: balance;
    padding: 13px 18px;
    font-size: 14.5px;
    gap: 8px;
  }
  .btn-lg { padding: 14px 20px; font-size: 15px; }
  .btn svg { width: 18px; height: 18px; }
}

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  color: #fff;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: transform 0.36s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s var(--ease), border-color 0.3s var(--ease), backdrop-filter 0.3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: rgba(5, 15, 30, 0.10);
  color: var(--text);
}
.nav.scrolled .brand-logo { color: #050F1E; }
/* Páginas que NÃO abrem com dobra escura (a política, por exemplo): sem isto o
   logo herda branco e some no fundo claro, sobrando só o símbolo azul. */
.nav-claro .brand-logo { color: #050F1E; }
.nav-claro .nav-links a { color: var(--text-muted); }
.nav.scrolled .nav-links a { color: #4A5C6E; }
.nav.scrolled .nav-links a:hover { color: #050F1E; }
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
/* O link do logo é o único caminho de volta ao topo no celular. Como .nav-inner é
   flex com align-items: center, o link encolhia para os 22px do SVG e ficava abaixo
   do mínimo de 24x24 da WCAG 2.5.8. A altura mínima resolve sem mudar o desenho. */
.brand { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.brand-logo { height: 22px; width: auto; color: inherit; flex: none; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 14.5px;
  color: var(--text-muted);
  transition: color 0.2s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 14px; }

/* ---------- Recortes de trechos posteriores do styles.css ---------- */

/* ---------- Botão primário (fluxo do diagnóstico) ---------- */
/* Azul Horizonte é um azul médio: texto branco em cima dele dá 2,9:1 e reprova.
   O rótulo vai em Azul Abissal (6,5:1), igual já era dentro dos blocos escuros. */
.btn-primario {
  background: var(--accent);
  color: #04122e;
  border-color: var(--accent);
}
/* No hover o fundo escurece para Azul Corrente, e aí quem lê é o branco. */
.btn-primario:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.on-dark .btn-primario { background: var(--accent); color: #04122e; }
.on-dark .btn-primario:hover { background: var(--accent-bright); color: #04122e; }

/* ---------- Formulário de captação ---------- */
.lead-form { margin-top: 34px; text-align: left; }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* São 5 campos numa grade de 2 colunas: sem isto o último ficaria sozinho numa
   linha, com metade da largura e um buraco ao lado. */
.lead-field-full { grid-column: 1 / -1; }
.lead-field { display: flex; flex-direction: column; gap: 7px; }
.lead-field > span {
  font-family: var(--font-accent);
  font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.lead-field input, .lead-field select {
  width: 100%;
  padding: 13px 14px;
  /* 16px é piso, não estética: abaixo disso o Safari do iOS amplia a página
     sozinho ao focar o campo. Acontecia na 9ª dobra, no exato passo que gera o
     lead, e obrigava a pessoa a dar pinça para voltar. */
  font-family: var(--font-body); font-size: 16px;
  color: var(--text);
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.lead-field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239CB2BF' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; cursor: pointer;
  /* A lista suspensa é desenhada pelo sistema, não pelo CSS da página. Sem
     isto ela nasce clara e herda o texto branco da seção: branco no branco. */
  color-scheme: dark;
}
.lead-field select option {
  background-color: #0C1B2E;
  color: #EAF0F6;
}
.lead-field select option:disabled { color: #7F94A6; }
.lead-field input::placeholder { color: var(--text-faint); }
/* background-color, não o atalho background: o atalho apagaria a seta do select */
.lead-field input:focus, .lead-field select:focus {
  border-color: var(--accent); background-color: rgba(255,255,255,0.10);
}
.lead-field input:focus-visible, .lead-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lead-field.erro input, .lead-field.erro select { border-color: var(--flag-bright); }
.lead-erro { margin-top: 14px; color: var(--erro-text); font-size: 14px; }
/* Erro colado ao campo. O de e-mail e o de telefone apontam para UM campo, então
   nascem embaixo dele. O de campo vazio continua no .lead-erro, porque a mensagem
   é plural e fala do formulário inteiro, não de um campo.

   O seletor é filho-direto de propósito: o aviso é um <span> dentro do <label>, e
   .lead-field > span (o rótulo do campo) tem especificidade maior que uma classe
   sozinha. Sem isto o erro sai em caixa alta, 11,5px e cinza, igual a um rótulo.
   Por isso as três propriedades do rótulo são zeradas aqui. */
.lead-field > .lead-erro-campo {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.45;
  color: var(--erro-text);
}
/* Campo-armadilha. Fora da tela em vez de display:none, porque robô razoável ignora
   campo com display:none e preenche o que "existe". Sem impacto em leitor de tela: o
   contêiner é aria-hidden e o campo está fora da ordem de tabulação. */
.armadilha {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
.lead-submit { width: 100%; margin-top: 20px; }
.cta-ou { margin-top: 20px; font-size: 14.5px; color: var(--text-muted); }
.cta-ou-link { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .lead-grid { grid-template-columns: 1fr; } }