/* =============================================================================
 * Agente do Corretor — SITE INSTITUCIONAL
 * tokens.css — fonte da verdade de tokens, reset e classes de base
 *
 * Documento irmao: site/DESIGN_SYSTEM.md
 * Todo token citado no .md existe aqui com o mesmo nome e o mesmo valor.
 *
 * Escopo: site de marketing servido estatico (Apache/HostGator). CSS puro,
 * sem build, sem framework, sem pre-processador. Ordem de carregamento:
 *   <link rel="stylesheet" href="/assets/css/tokens.css">
 *   <link rel="stylesheet" href="/assets/css/site.css">   (componentes de pagina)
 *
 * Prefixo --site- em TODOS os tokens novos, para nunca colidir com os tokens
 * do app (frontend/src/index.css) caso os dois CSS convivam numa mesma pagina.
 *
 * O site e CLARO-FIXO. Nao ha alternancia de tema e nao ha bloco
 * prefers-color-scheme. As superficies escuras sao faixas de secao (terreno 3),
 * nao um tema. Ver secao 3 do DESIGN_SYSTEM.md.
 *
 * Nenhuma funcao de cor moderna entra neste arquivo: nada de oklch(), nada de
 * color-mix(). Os oklch do DESIGN_SYSTEM.md sao registro de derivacao, nunca
 * codigo — o Android antigo do publico nao tem suporte.
 *
 * Todo rgba() literal traz, no comentario, o token de que deriva.
 * ========================================================================== */


/* =============================================================================
 * 0. FONTE — Inter variavel, self-hosted
 *
 * O app carrega Inter por @import de fonts.googleapis.com. Isso e aceitavel
 * num app autenticado e e o pior padrao possivel numa landing page cujo LCP
 * e a headline: o @import so e descoberto depois do CSS baixar e parsear.
 * Aqui a MESMA fonte e servida do proprio dominio.
 *
 * O arquivo real do repositorio e UM SO e e variavel:
 *   site/assets/fonts/inter-variable-latin.woff2  (47 KB, eixo wght 100-900)
 * Portanto ha UM @font-face e UM preload. Nao existem arquivos por peso.
 *
 * Pre-requisito de deploy — no <head>, ANTES do <link> deste arquivo:
 *   <link rel="preload" as="font" type="font/woff2" crossorigin
 *         href="/assets/fonts/inter-variable-latin.woff2">
 * Se o arquivo faltar, o fallback de sistema assume sem quebrar (mas as
 * metricas mudam e o tracking negativo do display deixa de estar calibrado).
 * ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;                 /* eixo variavel: cobre 400/500/600/700 */
  font-display: swap;
  src: url('/assets/fonts/inter-variable-latin.woff2') format('woff2-variations');
  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;
}


/* =============================================================================
 * 1. TOKENS
 * ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
   * 1.1 COR — PETROLEO (identidade). Hex e oklch equivalentes.
   * O oklch em comentario e o valor medido do hex, nao um arredondamento
   * livre, e serve so de registro. O hex e o que o navegador aplica.
   * ------------------------------------------------------------------- */

  --site-deep-700:      #103848;   /* oklch(0.3209 0.0520 228.4) — petroleo da marca (wordmark) */
  --site-deep-800:      #0c2e3a;   /* oklch(0.2828 0.0442 225.2) — solido do terreno escuro / rodape */
  --site-deep-900:      #0a2733;   /* oklch(0.2573 0.0408 228.9) — base do gradiente de secao */
  --site-deep-grad-top: #0e3441;   /* oklch(0.3049 0.0478 224.6) — topo do gradiente de secao */
  --site-deep-card:     #193d4a;   /* oklch(0.3397 0.0469 224.5) — superficie de card sobre petroleo, OPACA */

  /* 1.2 COR — MARCA OPERACIONAL (identica ao app, para continuidade)
   * --site-brand e EXCLUSIVA de acao: preenchimento do botao primario, tinta do
   * botao secundario, skip-link. Nada mais. Superficie que nao clica usa
   * --site-accent-text. Ver DESIGN_SYSTEM 3.2. */
  --site-brand:          #0f5666;  /* oklch(0.4198 0.0699 217.4) — SO botao primario / secundario / skip-link */
  --site-brand-strong:   #004554;  /* oklch(0.3605 0.0650 218.4) — hover do primario e do link */
  --site-accent:         #1a7588;  /* oklch(0.5205 0.0850 215.7) — anel de foco em terreno claro */
  --site-accent-text:    #086375;  /* oklch(0.4613 0.0799 216.4) — link, eyebrow, icone, check, borda de campo */
  --site-accent-on-deep: #59b3c6;  /* oklch(0.7187 0.0899 213.3) — link e anel de foco em terreno escuro */

  /* 1.3 COR — DOURADO (existe no site, NAO existe no app)
   * Regra dura: dourado nunca e clicavel e nunca e estado. Ver DESIGN_SYSTEM 3.6 */
  --site-gold:      #c89840;       /* oklch(0.7088 0.1188 79.8) — tinta APENAS sobre petroleo puro */
  --site-gold-ink:  #8a6120;       /* oklch(0.5238 0.0955 74.8) — unica tinta dourada permitida no claro */
  --site-gold-soft: #e7d6ae;       /* oklch(0.8799 0.0559 87.7) — dourado claro sobre petroleo */
  --site-gold-tint: #f7efe0;       /* oklch(0.9543 0.0217 83.3) — fundo de pilula de economia */

  /* 1.4 COR — TINTA EM TERRENO CLARO */
  --site-text-1: #152127;          /* oklch(0.2393 0.0204 230.3) — titulos e corpo */
  --site-text-2: #49555b;          /* oklch(0.4413 0.0181 229.4) — lead, corpo secundario */
  --site-text-3: #5d686e;          /* oklch(0.5100 0.0165 231.5) — legenda, nota, legal */

  /* 1.5 COR — TINTA EM TERRENO ESCURO */
  --site-on-deep-1: #ffffff;       /* titulo e corpo sobre petroleo */
  --site-on-deep-2: #c3d2d8;       /* oklch(0.8542 0.0183 223.6) — corpo secundario sobre petroleo */
  --site-on-deep-3: #9fb3bb;       /* oklch(0.7539 0.0250 223.8) — legenda sobre petroleo */
  --site-danger-on-deep: #fda4af;  /* oklch(0.8097 0.1061  11.6) — erro sobre petroleo (7,00:1) */

  /* 1.6 COR — SUPERFICIES E FIOS */
  --site-white:  #ffffff;
  /* Hover do botao primario invertido (branco sobre petroleo). E o branco
   * escurecido um degrau dentro da familia da nevoa — precisa de token proprio
   * porque nao existe superficie equivalente na escala: --site-mist e claro
   * demais para ler como pressao e --site-mist-2 e fundo de campo. */
  --site-white-press: #eef4f6;     /* oklch(0.9614 0.0064 223.6) */
  --site-mist:   #f3f6f8;          /* oklch(0.9714 0.0042 236.5) — mesmo canvas do app */
  --site-mist-2: #ecf1f3;          /* oklch(0.9549 0.0060 223.5) — fundo de input, chip, seletor */
  --site-border:        #dbe1e3;   /* oklch(0.9057 0.0070 219.6) — fio de divisao (hairline, acordeao) */
  --site-border-strong: #bfc9cd;   /* oklch(0.8294 0.0124 223.6) — fio de OBJETO: card, campo */
  --site-border-deep:        rgba(255, 255, 255, 0.10);  /* fio sobre petroleo */
  --site-border-deep-strong: rgba(255, 255, 255, 0.18);  /* fio sobre petroleo, hover */

  /* 1.7 COR — SUPERFICIES DE SECAO (os tres terrenos) */
  --site-ground-1: var(--site-white);
  --site-ground-2: var(--site-mist);
  --site-ground-3: linear-gradient(180deg,
                     var(--site-deep-grad-top) 0%,
                     var(--site-deep-900) 100%);
  --site-ground-3-solid: var(--site-deep-800);  /* fallback, rodape e mount de video */
  /* Veu SOLIDO (nunca gradiente — 3.8) sobre a fachada de video. Existe por
   * medicao: o poster do comercial e uma captura de tela clara e a area exata
   * atras do botao de play tem media #ecf2f4 (L = 0,8787); o botao branco
   * ficava em 1,13:1 contra ela, contra o piso de 3:1 da 9.1 para elemento
   * nao-textual. Com o veu a 55% a area composta vai a #6f8089 (L = 0,205) e o
   * botao chega a 4,11:1. A 45% da 2,78:1 e nao cumpre — o valor e 55%. */
  --site-video-veil: rgba(10, 39, 51, 0.55);   /* --site-deep-900 a 55% */

  /* 1.8 COR — FUNCIONAIS (identicos ao tema claro do app, versoes AA-safe) */
  --site-ok:     #047857;          /* oklch(0.5081 0.1049 165.6) */
  --site-warn:   #b45309;          /* oklch(0.5553 0.1455  49.0) */
  --site-danger: #be123c;          /* oklch(0.5143 0.1978  16.9) */

  /* Fundos opacos de badge — hex fixo para o contraste NAO variar com o terreno.
   * Composicao de referencia: a cor funcional a 10% sobre branco, congelada. */
  --site-ok-tint:     #e6f2ee;     /* oklch(0.9511 0.0138 174.2) — #047857 sobre ele = 4,78:1 */
  --site-brand-tint:  #e7edef;     /* oklch(0.9421 0.0070 219.6) — #0f5666 sobre ele = 6,98:1 */

  /* 1.9 COR — GRAFICOS (ordem fixa, copiada de constants/chartTheme.js).
   * Criterio da paleta: OBJETO GRAFICO a >= 3:1 contra a superficie, nao texto.
   * Rotulo de legenda usa --site-text-2; a cor fica no swatch. Ver 3.4 do .md. */
  --site-chart-1: #2e6f8e;         /* petroleo   — Pessoa Fisica     — 5,55:1 sobre branco */
  --site-chart-2: #d97706;         /* ambar      — Pessoa Juridica   — 3,19:1 */
  --site-chart-3: #059669;         /* esmeralda  — Adesao            — 3,77:1 */
  --site-chart-4: #f43f5e;         /* rosa                           — 3,67:1 */
  --site-chart-5: #6272c9;         /* indigo-ardosia (matiz 273,6 — azul, nao roxo) — 4,40:1 */
  --site-chart-6: #a16207;         /* ocre                           — 4,92:1 */
  --site-chart-grid: rgba(20, 40, 55, 0.08);   /* grade horizontal, derivada de --site-text-1 */

  /* 1.10 MOTIVO GRAFICO — fio dourado (herdado de styles/demonstrativo.css) */
  --site-gold-rule: linear-gradient(90deg,
                      var(--site-gold) 0%,
                      var(--site-gold-soft) 62%,
                      transparent 100%);

  /* 1.11 COR — RECORTE DE CONVERSA (excecao de paleta, ver DESIGN_SYSTEM 7.12)
   * Reproducao fiel do WhatsApp, ISOLADA dentro de .site-frame. Decidido em
   * site/ESTRATEGIA.md secao 3 ("balões reais, verde e branco"). Nao e cor de
   * marca, nao vaza para fora da moldura, nao pinta botao nem link.
   * A hora foi escurecida do #667781 original (4,04:1) para cumprir o piso. */
  --site-chat-surface: #efe7dd;    /* oklch(0.9315 0.0160  73.7) — fundo do painel de conversa */
  --site-chat-in:      #ffffff;    /* balao recebido */
  --site-chat-out:     #dcf8c6;    /* oklch(0.9461 0.0720 131.5) — balao enviado */
  --site-chat-ink:     #111b21;    /* oklch(0.2153 0.0187 235.1) — 17,46:1 no branco, 15,21:1 no verde */
  --site-chat-meta:    #54656f;    /* oklch(0.4963 0.0261 233.9) — hora e status: 6,06:1 / 5,27:1 */
  --site-chat-radius:  8px;


  /* ---------------------------------------------------------------------
   * 2. TIPOGRAFIA
   * Uma unica familia. Hierarquia por peso + tracking, nunca por familia.
   * clamp() apenas em display / h1 / h2 / lead / preco / stat. A formula e
   * sempre "rem + vw" — vw puro trava o zoom e e falha de acessibilidade.
   * ------------------------------------------------------------------- */

  --site-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                    'Helvetica Neue', Arial, sans-serif;

  --site-fs-display: clamp(2.75rem, 1.45rem + 4.6vw, 4.5rem);      /*  44 -> 72px */
  --site-fs-h1:      clamp(2.25rem, 1.55rem + 2.4vw, 3.25rem);     /*  36 -> 52px */
  --site-fs-h2:      clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);      /*  28 -> 40px */
  --site-fs-h3:      1.375rem;                                     /*  22px fixo */
  --site-fs-lead:    clamp(1.125rem, 1.03rem + 0.4vw, 1.3125rem);  /*  18 -> 21px */
  --site-fs-btn:     1.125rem;                                     /*  18px fixo — SO botao primario */
  --site-fs-body:    1.0625rem;                                    /*  17px fixo */
  --site-fs-small:   0.875rem;                                     /*  14px fixo */
  --site-fs-eyebrow: 0.8125rem;                                    /*  13px fixo — caixa alta */
  --site-fs-legal:   0.8125rem;                                    /*  13px fixo */
  --site-fs-price:   clamp(3rem, 1.75rem + 3.9vw, 4.75rem);        /*  48 -> 76px */
  --site-fs-stat:    clamp(2rem, 1.5rem + 1.8vw, 2.75rem);         /*  32 -> 44px */

  --site-lh-display: 1.04;
  --site-lh-h1:      1.09;
  --site-lh-h2:      1.16;
  --site-lh-h3:      1.32;
  --site-lh-lead:    1.55;
  --site-lh-body:    1.65;
  --site-lh-small:   1.5;
  --site-lh-eyebrow: 1;

  --site-ls-display: -0.035em;
  --site-ls-h1:      -0.03em;
  --site-ls-h2:      -0.025em;
  --site-ls-h3:      -0.015em;
  --site-ls-lead:    -0.01em;
  --site-ls-body:     0;
  --site-ls-btn:     -0.01em;
  --site-ls-eyebrow:  0.12em;   /* eyebrow: caixa alta em bloco solto */
  --site-ls-caps:     0.06em;   /* caixa alta dentro de caixa fechada: badge e pilula */

  --site-fw-regular:  400;
  --site-fw-medium:   500;
  --site-fw-semibold: 600;
  --site-fw-bold:     700;

  /* Medida de linha — obrigatoria, nao opcional */
  --site-measure-display: 18ch;
  --site-measure-lead:    38ch;
  --site-measure-body:    65ch;
  --site-measure-quote:   44ch;


  /* ---------------------------------------------------------------------
   * 3. ESPACAMENTO — base 8.
   * A escala rege margin, padding e gap de LAYOUT. Altura de controle,
   * dimensao de icone e ajuste optico (1-5px) sao valores de COMPONENTE e
   * vivem no proprio componente. Ver DESIGN_SYSTEM 5.1.
   * ------------------------------------------------------------------- */

  --site-space-4:   0.25rem;   /*   4px */
  --site-space-8:   0.5rem;    /*   8px */
  --site-space-12:  0.75rem;   /*  12px */
  --site-space-16:  1rem;      /*  16px */
  --site-space-20:  1.25rem;   /*  20px — ritmo interno h2 -> lead */
  --site-space-24:  1.5rem;    /*  24px */
  --site-space-32:  2rem;      /*  32px */
  --site-space-48:  3rem;      /*  48px */
  --site-space-56:  3.5rem;    /*  56px — ritmo interno cabecalho -> conteudo */
  --site-space-64:  4rem;      /*  64px */
  --site-space-96:  6rem;      /*  96px */
  --site-space-128: 8rem;      /* 128px */
  --site-space-176: 11rem;     /* 176px */

  /* Ritmo vertical de secao */
  --site-section-y:       clamp(4.5rem, 2.5rem + 6vw, 8rem);   /*  72 -> 128px */
  --site-section-y-tight: clamp(3rem,   2rem   + 3vw, 4rem);   /*  48 ->  64px */
  /* Teto baixado de 11rem para 8rem na auditoria de 2026-08-02. Os 176px do
   * teto antigo, somados a um h1 de 5 linhas, punham o botao primario do hero
   * ABAIXO da dobra em 1280x800 (fundo do botao em 913px) e o cortavam em
   * 1440x900 (926px). Os 128px continuam bem acima do respiro de qualquer
   * outra secao (--site-section-y) e o piso de 96px do celular nao muda. */
  --site-hero-top:        clamp(6rem,   3rem   + 9vw,  8rem);  /*  96 -> 128px */

  /* Ritmo interno de secao (invariavel — e o que cria sensacao de sistema) */
  --site-rhythm-eyebrow-title: var(--site-space-12);  /* eyebrow -> h2 = 12px */
  --site-rhythm-title-lead:    var(--site-space-20);  /* h2 -> lead = 20px */
  --site-rhythm-head-content:  var(--site-space-56);  /* cabecalho -> conteudo = 56px */
  --site-rhythm-grid-col:      var(--site-space-32);
  --site-rhythm-grid-row:      var(--site-space-48);


  /* ---------------------------------------------------------------------
   * 4. CONTAINER E GRADE
   * ------------------------------------------------------------------- */

  --site-container:      1200px;  /* padrao de todas as secoes */
  --site-container-wide: 1360px;  /* so hero e faixa de numeros */
  --site-prose:          720px;   /* FAQ, textos legais, artigo */
  --site-video-max:      900px;   /* largura maxima do player (ESTRATEGIA secao 2) */
  --site-gutter:         clamp(1.25rem, 0.5rem + 3vw, 3rem);  /* 20 -> 48px */

  --site-header-h: 76px;          /* ALTURA FIXA. Nao anima. Rima com a top-bar do app. */


  /* ---------------------------------------------------------------------
   * 5. FORMA E PROFUNDIDADE
   * Regra herdada do app: nunca borda 1px + sombra de blur >= 16px no mesmo
   * elemento. Se um card ganha --site-shadow-raise, ele PERDE a borda.
   * ------------------------------------------------------------------- */

  --site-radius-xs:    6px;    /* badge */
  --site-radius-sm:    8px;    /* blocos internos pequenos */
  --site-radius-md:   10px;    /* BOTAO e INPUT — o raio que o visitante reencontra no login */
  --site-radius-lg:   14px;    /* card, moldura de produto, painel de FAQ */
  --site-radius-panel: 16px;   /* SOMENTE o cartao de preco. Teto da regra do app. Ver DESIGN_SYSTEM 6.1 */
  --site-radius-pill: 999px;   /* chip, pilula, seletor segmentado */

  --site-shadow-soft:  0 1px 2px rgba(16, 32, 44, 0.05);          /* derivado de --site-text-1 */
  --site-shadow-lift:  0 4px 12px rgba(16, 32, 44, 0.09);         /* idem */
  --site-shadow-raise: 0 12px 32px -12px rgba(16, 56, 72, 0.28);  /* derivado de --site-deep-700 */

  /* Botao primario: presenca por fisica da luz, nunca por gradiente.
   * A camada inset e uma aresta de 1px no topo, nao uma transicao de cor.
   * Alfas derivados de --site-deep-700 (#103848). */
  --site-shadow-btn:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 1px 2px rgba(16, 56, 72, 0.24),
      0 8px 24px -8px rgba(16, 56, 72, 0.45);
  --site-shadow-btn-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.13),
      0 1px 2px rgba(16, 56, 72, 0.24),
      0 10px 28px -8px rgba(16, 56, 72, 0.45);
  --site-shadow-btn-active: 0 1px 2px rgba(16, 56, 72, 0.24);

  /* Botao primario invertido (branco sobre petroleo): a sombra tambem e
   * tingida com o matiz da marca, nunca cinza neutro. Derivada de #0a2733. */
  --site-shadow-btn-deep:
      0 1px 2px rgba(4, 20, 28, 0.40),
      0 8px 24px -8px rgba(4, 20, 28, 0.55);
  --site-shadow-btn-deep-hover:
      0 1px 2px rgba(4, 20, 28, 0.40),
      0 10px 28px -8px rgba(4, 20, 28, 0.55);

  /* Anel de foco de DUAS camadas: separador interno + anel de contraste.
   * O anel externo tem que atingir 3:1 contra a superficie (WCAG 1.4.11);
   * um anel com alfa nao atinge (o de 42% dava 1,85:1). Medidos:
   *   #1a7588 : 5,32 no branco · 4,91 na nevoa · 4,68 no mist-2 · 4,66 no tint
   *   #59b3c6 : 5,48 sobre #0e3441 · 6,43 sobre #0a2733 · 4,81 sobre o card
   * A camada interna separa o anel do preenchimento do proprio controle. */
  --site-focus-ring:      0 0 0 2px var(--site-white),     0 0 0 5px var(--site-accent);
  --site-focus-ring-deep: 0 0 0 2px var(--site-deep-900),  0 0 0 5px var(--site-accent-on-deep);


  /* ---------------------------------------------------------------------
   * 6. MOVIMENTO
   * Uma unica curva. E a MESMA do app (frontend/src/index.css --ease-out) e
   * e a assinatura de movimento da marca; so mudam duracao e proposito.
   * Nao existe segunda curva no sistema.
   * ------------------------------------------------------------------- */

  --site-ease:        cubic-bezier(0.16, 1, 0.3, 1);

  --site-dur-fast:   150ms;   /* hover, foco */
  --site-dur-base:   200ms;   /* acordeao, seletor segmentado, header */
  --site-dur-slow:   250ms;   /* entrada de mensagem no recorte de conversa */
  --site-dur-reveal: 420ms;   /* revelacao por scroll */
  --site-dur-press:   80ms;   /* :active */

  --site-reveal-shift: 12px;  /* teto absoluto: 16px */
  --site-stagger:      60ms;  /* no maximo 4 elementos encadeados */


  /* ---------------------------------------------------------------------
   * 7. Z-INDEX — escala fechada. Nao inventar valores fora dela.
   * ------------------------------------------------------------------- */

  --site-z-base:    0;
  --site-z-raised:  10;   /* card destacado, moldura do hero */
  --site-z-header:  100;  /* header fixo */
  --site-z-sticky:  200;  /* barra de CTA fixa do celular */
  --site-z-overlay: 900;  /* overlay da gaveta de navegacao do celular */
  --site-z-modal:   1000;
  --site-z-toast:   1100; /* skip-link */


  /* ---------------------------------------------------------------------
   * 8. ATIVOS DE MARCA
   * Nao ha token de caminho de logo: o logo e SEMPRE um <img src> com alt
   * (DESIGN_SYSTEM 9.5), e custom property em url() so serve como
   * background-image. Os caminhos reais, conferidos no disco:
   *   /assets/img/brand/logo-fundo-claro.png    2041x516  (lockup com tagline)
   *   /assets/img/brand/logo-fundo-escuro.png   2042x516  (lockup com tagline)
   *   /assets/img/brand/icone.png                600x600  (hexagono + cubo)
   *   /assets/img/brand/apple-touch-icon.png     180x180
   *   /assets/img/brand/favicon-32.png            32x32
   *   /assets/img/brand/icone-192.png · icone-512.png
   *   /favicon.ico  (16 + 32 + 48, multi-resolucao — ja existe)
   * "claro"/"escuro" = versao PARA fundo claro/escuro, nao a cor da tinta.
   * ------------------------------------------------------------------- */


  /* Preferencias do documento */
  color-scheme: light;
  accent-color: var(--site-brand);
}


/* =============================================================================
 * 9. RESET MINIMO
 * ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--site-header-h) + var(--site-space-24));
}

body {
  margin: 0;
  background: var(--site-ground-1);
  color: var(--site-text-1);
  font-family: var(--site-font-sans);
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
  font-weight: var(--site-fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Sem `overflow-x: hidden`: esconder o estouro torna o item de checklist
 * "sem rolagem horizontal em 375px" impossivel de reprovar, e cria contexto de
 * rolagem no body (fragilidade conhecida para position: sticky). Vazamento se
 * resolve na origem: min-width: 0 em filho de flex/grid e overflow-wrap.
 * Sem `text-rendering: optimizeLegibility`: o app nao usa, custa primeiro paint
 * e tem historico de defeito de renderizacao no Android antigo do publico. */

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;          /* herda 17px do body e elimina o zoom automatico do iOS ao focar campo */
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr {
  border: 0;
  border-top: 1px solid var(--site-border);
  margin: 0;
}

::selection {
  background: rgba(15, 86, 102, 0.16);   /* --site-brand a 16% */
  color: var(--site-text-1);
}

/* Barra de rolagem — mesmo tratamento do app, com neutro da familia da marca
 * (o app usa um slate do Tailwind; aqui deriva de --site-text-3 #5d686e). */
* { scrollbar-width: thin; scrollbar-color: rgba(93, 104, 110, 0.28) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb {
  background: rgba(93, 104, 110, 0.28);  /* --site-text-3 a 28% */
  border-radius: var(--site-radius-sm);
}
*::-webkit-scrollbar-track { background: transparent; }


/* =============================================================================
 * 10. FOCO VISIVEL — replicado explicitamente, como no app
 *
 * `:focus:not(:focus-visible)` e proposital: num UA sem suporte a
 * :focus-visible o seletor inteiro e invalido, a regra e descartada e o
 * contorno padrao do navegador PERMANECE. Escrever `:focus { outline: none }`
 * solto apagaria o foco do site inteiro em Chrome < 86 e Safari iOS 15.0-15.3,
 * que e exatamente o parque do publico.
 *
 * O bloco NAO declara border-radius: o anel e box-shadow e ja acompanha o raio
 * do proprio elemento. Declarar 8px aqui reescrevia o raio de todo botao (10px)
 * e quadrava toda pilula (999px) no instante do foco por teclado.
 * ========================================================================== */

:focus:not(:focus-visible) { outline: none; }

:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--site-focus-ring);
}

.site-section--deep :focus-visible {
  box-shadow: var(--site-focus-ring-deep);
}

.site-skip-link {
  position: absolute;
  left: var(--site-space-16);
  top: var(--site-space-16);
  z-index: var(--site-z-toast);
  transform: translateY(-200%);
  background: var(--site-brand);
  color: var(--site-white);
  padding: var(--site-space-12) var(--site-space-16);
  border-radius: var(--site-radius-md);
  font-size: var(--site-fs-small);
  font-weight: var(--site-fw-semibold);
  transition: transform var(--site-dur-fast) var(--site-ease);
}
.site-skip-link:focus-visible { transform: translateY(0); }

.site-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* =============================================================================
 * 11. LAYOUT — container, secao, terrenos
 *
 * Par fisico ANTES do logico em todo lugar onde a perda da declaracao seria
 * catastrofica (gutter do container, ritmo vertical de secao, alvo de toque do
 * summary). padding-inline/-block exigem Chrome 87+ / Safari 14.1+; abaixo
 * disso a declaracao inteira e descartada e a pagina colapsa.
 * ========================================================================== */

.site-container,
.site-container--wide,
.site-prose {
  width: 100%;
  margin-left: auto;  margin-right: auto;
  margin-inline: auto;
  padding-left: var(--site-gutter); padding-right: var(--site-gutter);
  padding-inline: var(--site-gutter);
}
.site-container       { max-width: calc(var(--site-container)      + 2 * var(--site-gutter)); }
.site-container--wide { max-width: calc(var(--site-container-wide) + 2 * var(--site-gutter)); }
.site-prose           { max-width: calc(var(--site-prose)          + 2 * var(--site-gutter)); }

.site-section {
  padding-top: var(--site-section-y); padding-bottom: var(--site-section-y);
  padding-block: var(--site-section-y);
  background: var(--site-ground-1);
}
.site-section--tight {
  padding-top: var(--site-section-y-tight); padding-bottom: var(--site-section-y-tight);
  padding-block: var(--site-section-y-tight);
}

/* Terreno 2 — nevoa. Dois significados, os dois legitimos: informacao de apoio,
 * e PLINTO (superficie contra a qual um objeto branco flutua — e a mesma razao
 * pela qual o app usa #f3f6f8 como canvas). Nunca decoracao. */
.site-section--mist { background: var(--site-ground-2); }

/* Terreno 3 — petroleo. No maximo duas por scroll, nunca adjacentes.
 * O gradiente e ambiente de secao, nao ornamento de objeto: nao toca texto,
 * nao e interativo, nao tem estado. Delta de luminancia relativa entre os
 * extremos = 1,18 ponto percentual (2,931% -> 1,755%). */
.site-section--deep {
  background-color: var(--site-ground-3-solid);
  background-image: var(--site-ground-3);
  color: var(--site-on-deep-1);
}
.site-section--deep .site-lead,
.site-section--deep .site-body   { color: var(--site-on-deep-2); }
.site-section--deep .site-small,
.site-section--deep .site-legal,
.site-section--deep .site-help,
.site-section--deep .site-quote__by,
.site-section--deep .site-price-period { color: var(--site-on-deep-3); }
.site-section--deep .site-label,
.site-section--deep .site-quote__text  { color: var(--site-on-deep-1); }
.site-section--deep .site-error        { color: var(--site-danger-on-deep); }
.site-section--deep .site-eyebrow      { color: var(--site-gold); }
.site-section--deep hr,
.site-section--deep .site-hairline { border-top-color: var(--site-border-deep); }

/* Cabecalho de secao — ritmo interno invariavel */
.site-section-head { margin-bottom: var(--site-rhythm-head-content); }
.site-section-head .site-eyebrow + * { margin-top: var(--site-rhythm-eyebrow-title); }
.site-section-head .site-h2 + .site-lead { margin-top: var(--site-rhythm-title-lead); }
/* Rotulo de plano no cabecalho da secao (usado em /crm/). Fecha o cabecalho,
 * depois do lead: a informacao "a que plano isto pertence" vinha em 14px
 * cinza no FIM da secao, contra um h2 de 40px que prometia o recurso no
 * comeco — razao de 40:14 entre a promessa e a ressalva. Nao e legenda; e a
 * distincao que separa R$ 69,90 de R$ 197 (DECISOES item 16: "e argumento de
 * venda, nao defeito a esconder"). O badge nunca e clicavel e nunca e dourado.
 * Fica DEPOIS do lead, e nao entre eyebrow e h2, para nao quebrar o par
 * `.site-eyebrow + *` que carrega o ritmo de 12px da 5.4. */
.site-section-head > .site-badge { margin-top: var(--site-rhythm-title-lead); }

@media (max-width: 768px) {
  .site-section-head { margin-bottom: var(--site-space-32); }
}

.site-hairline { border-top: 1px solid var(--site-border); }


/* =============================================================================
 * 12. TIPOGRAFIA DE BASE
 * ========================================================================== */

.site-display, .site-h1, .site-h2, .site-h3 {
  text-wrap: balance;
  font-weight: var(--site-fw-bold);
  color: inherit;
}

.site-display {
  font-size: var(--site-fs-display);
  line-height: var(--site-lh-display);
  letter-spacing: var(--site-ls-display);
  max-width: var(--site-measure-display);
}
.site-h1 {
  font-size: var(--site-fs-h1);
  line-height: var(--site-lh-h1);
  letter-spacing: var(--site-ls-h1);
}
.site-h2 {
  font-size: var(--site-fs-h2);
  line-height: var(--site-lh-h2);
  letter-spacing: var(--site-ls-h2);
}
.site-h3 {
  font-size: var(--site-fs-h3);
  line-height: var(--site-lh-h3);
  letter-spacing: var(--site-ls-h3);
  font-weight: var(--site-fw-semibold);
}

.site-lead {
  font-size: var(--site-fs-lead);
  line-height: var(--site-lh-lead);
  letter-spacing: var(--site-ls-lead);
  color: var(--site-text-2);
  max-width: var(--site-measure-lead);
  text-wrap: pretty;
}
.site-body {
  font-size: var(--site-fs-body);
  line-height: var(--site-lh-body);
  letter-spacing: var(--site-ls-body);
  color: var(--site-text-2);
  max-width: var(--site-measure-body);
  text-wrap: pretty;
}
.site-small {
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
}
.site-legal {
  font-size: var(--site-fs-legal);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
}

.site-eyebrow {
  display: block;
  font-size: var(--site-fs-eyebrow);
  line-height: var(--site-lh-eyebrow);
  letter-spacing: var(--site-ls-eyebrow);
  font-weight: var(--site-fw-semibold);
  text-transform: uppercase;
  color: var(--site-accent-text);
}

.site-num { font-variant-numeric: tabular-nums; }


/* =============================================================================
 * 13. FIO DOURADO — motivo grafico da marca (vem da regua da tagline do logo)
 * Uma regua por secao. Nunca clicavel. Uma unica variante: 2px x 40px.
 * A variante em degrade de 96px foi removida — largura nao autorizada pela
 * lista fechada da secao 3.6 e vazamento direto do orcamento de area.
 * ========================================================================== */

.site-rule-gold {
  display: block;
  width: 40px;
  height: 2px;
  border: 0;
  border-radius: 1px;
  background: var(--site-gold);
  margin: 0 0 var(--site-space-24);
}


/* =============================================================================
 * 14. BOTOES
 * Nenhum botao dourado existe no site, em nenhum terreno, em nenhum estado.
 * ========================================================================== */

.site-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--site-space-8);
  min-height: 52px;
  padding: 0 var(--site-space-24);
  border-radius: var(--site-radius-md);
  font-size: var(--site-fs-body);
  font-weight: var(--site-fw-semibold);
  letter-spacing: var(--site-ls-btn);
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    background-color var(--site-dur-fast) var(--site-ease),
    border-color     var(--site-dur-fast) var(--site-ease),
    color            var(--site-dur-fast) var(--site-ease),
    box-shadow       var(--site-dur-fast) var(--site-ease),
    transform        var(--site-dur-fast) var(--site-ease),
    opacity          var(--site-dur-fast) var(--site-ease);
}

/* --- primario, terreno claro ---
 * 18px contra os 17px do secundario: e a diferenca que o olho le como
 * hierarquia sem precisar de decoracao. min-width no REPOUSO, para o estado
 * de carregamento nao alargar a caixa. */
.site-btn--primary {
  background: var(--site-brand);
  color: var(--site-white);
  font-size: var(--site-fs-btn);
  min-width: 11rem;
  box-shadow: var(--site-shadow-btn);
}
.site-btn--primary:hover {
  background: var(--site-brand-strong);
  box-shadow: var(--site-shadow-btn-hover);
  transform: translateY(-1px);
}
.site-btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--site-shadow-btn-active);
  transition-duration: var(--site-dur-press);
}
/* Anel PRIMEIRO: a primeira sombra e pintada na frente. Na ordem inversa a
 * elevacao de 24px de blur cobria a aresta inferior do anel. */
.site-btn--primary:focus-visible {
  box-shadow: var(--site-focus-ring), var(--site-shadow-btn);
}

/* --- primario, terreno escuro (inversao obrigatoria) ---
 * Estas regras tem a mesma especificidade das de cima e vem depois, entao
 * PRECISAM repetir hover, active e focus explicitamente. Sem isso o :active
 * do CTA final (a secao mais importante da pagina) fica morto. */
.site-section--deep .site-btn--primary,
.site-btn--primary-on-deep {
  background: var(--site-white);
  color: var(--site-deep-800);
  box-shadow: var(--site-shadow-btn-deep);
}
.site-section--deep .site-btn--primary:hover,
.site-btn--primary-on-deep:hover {
  background: var(--site-white-press);
  box-shadow: var(--site-shadow-btn-deep-hover);
  transform: translateY(-1px);
}
.site-section--deep .site-btn--primary:active,
.site-btn--primary-on-deep:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(4, 20, 28, 0.40);
  transition-duration: var(--site-dur-press);
}
.site-section--deep .site-btn--primary:focus-visible,
.site-btn--primary-on-deep:focus-visible {
  box-shadow: var(--site-focus-ring-deep), var(--site-shadow-btn-deep);
}

/* --- secundario --- */
.site-btn--secondary {
  background: var(--site-white);
  color: var(--site-brand);
  border-color: var(--site-border-strong);
}
.site-btn--secondary:hover {
  background: var(--site-mist);
  border-color: var(--site-brand);
}
.site-btn--secondary:active {
  background: var(--site-mist-2);
  border-color: var(--site-brand-strong);
  transition-duration: var(--site-dur-press);
}

.site-section--deep .site-btn--secondary {
  background: transparent;
  color: var(--site-white);
  border-color: var(--site-border-deep-strong);
}
.site-section--deep .site-btn--secondary:hover {
  background: rgba(255, 255, 255, 0.07);   /* --site-on-deep-1 a 7% */
  border-color: rgba(255, 255, 255, 0.34); /* --site-on-deep-1 a 34% */
}
.site-section--deep .site-btn--secondary:active {
  background: rgba(255, 255, 255, 0.12);   /* --site-on-deep-1 a 12% */
  transition-duration: var(--site-dur-press);
}

/* --- fantasma (link com area de toque de botao) --- */
.site-btn--ghost {
  background: transparent;
  color: var(--site-accent-text);
  padding-left: var(--site-space-12); padding-right: var(--site-space-12);
  padding-inline: var(--site-space-12);
}
.site-btn--ghost:hover { color: var(--site-brand-strong); text-decoration: underline; text-underline-offset: 3px; }
.site-btn--ghost:active { background: var(--site-mist); transition-duration: var(--site-dur-press); }
.site-section--deep .site-btn--ghost { color: var(--site-accent-on-deep); }
.site-section--deep .site-btn--ghost:hover { color: var(--site-white); }
.site-section--deep .site-btn--ghost:active { background: rgba(255, 255, 255, 0.07); } /* --site-on-deep-1 a 7% */

/* --- estados universais ---
 * [disabled] e [aria-disabled] sao coisas diferentes: o primeiro nao e focavel
 * nem ativavel; o segundo continua focavel e ativavel por Enter/Space, entao
 * NAO pode desligar o ponteiro (o mouse ficaria mais restrito que o teclado).
 * Nele o JS faz preventDefault. */
.site-btn[disabled] {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  pointer-events: none;
}
.site-btn[aria-disabled="true"] {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.site-btn[data-loading="true"] { pointer-events: none; }
.site-btn[data-loading="true"]::before {
  content: "";
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: site-spin 700ms linear infinite;
}
@keyframes site-spin { to { transform: rotate(360deg); } }

/* --- mobile: nunca dois botoes lado a lado abaixo de 480px --- */
@media (max-width: 480px) {
  .site-btn { min-height: 48px; width: 100%; }
  .site-btn--primary { min-width: 0; }
  .site-btn-group { display: grid; gap: var(--site-space-12); }
}


/* =============================================================================
 * 15. LINK DE TEXTO
 * ========================================================================== */

.site-link {
  color: var(--site-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(8, 99, 117, 0.38);   /* --site-accent-text a 38% */
  transition: color var(--site-dur-fast) var(--site-ease),
              text-decoration-color var(--site-dur-fast) var(--site-ease);
}
.site-link:hover {
  color: var(--site-brand-strong);
  text-decoration-color: currentColor;
}
.site-link:visited { color: var(--site-accent-text); }
.site-section--deep .site-link {
  color: var(--site-accent-on-deep);
  text-decoration-color: rgba(89, 179, 198, 0.45); /* --site-accent-on-deep a 45% */
}
.site-section--deep .site-link:hover { color: var(--site-white); }


/* =============================================================================
 * 16. CARD E MOLDURA
 * Regra: o card e definido pela BORDA. Sobre branco, --site-border da 1,32:1 e
 * nao define nada; o fio de OBJETO e --site-border-strong (1,69:1).
 * --site-border fica para hairline e divisor, onde ha texto adjacente.
 * ========================================================================== */

.site-card {
  background: var(--site-white);
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-32);
  box-shadow: var(--site-shadow-soft);
  transition: border-color var(--site-dur-fast) var(--site-ease),
              box-shadow   var(--site-dur-fast) var(--site-ease);
}
.site-card--interactive:hover {
  border-color: var(--site-accent-text);
  box-shadow: var(--site-shadow-lift);   /* 12px de blur: nao aciona a regra dos 16px */
}
/* Sobre petroleo o card e OPACO. Translucido e a unica aresta do sistema que
 * encostaria no vocabulario proibido (vidro), e a superficie composta nunca
 * seria mensuravel. #193d4a e exatamente branco a 4,5% sobre o topo do
 * gradiente, congelado em hex. Medidos sobre ele: branco 11,62 · on-deep-2
 * 7,48 · on-deep-3 5,33 · link 4,81. Dourado da 4,44 e por isso e PROIBIDO
 * dentro de card (ver DESIGN_SYSTEM 3.6). */
.site-section--deep .site-card {
  background: var(--site-deep-card);
  border-color: var(--site-border-deep);
  box-shadow: none;
}

/* Moldura de midia (screenshot, video, recorte de conversa).
 * Nao e card: e suporte de imagem. Recebe --site-shadow-lift (12px de blur,
 * abaixo do limite de 16px da regra 6.4) porque um print de CRM dentro de fio
 * de 1px com sombra de 5% sobre branco simplesmente desaparece. */
.site-frame {
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-lg);
  box-shadow: var(--site-shadow-lift);
  overflow: hidden;
  background: var(--site-white);
}
.site-frame > img,
.site-frame > video { width: 100%; }
.site-section--deep .site-frame {
  border-color: var(--site-border-deep);
  box-shadow: none;
}

/* Plinto: superficie de apoio para midia em terreno branco, para o objeto nao
 * flutuar em branco sobre branco. Nao tem borda e nao e clicavel. */
.site-plinth {
  background: var(--site-mist);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-32);
}


/* =============================================================================
 * 17. CHIP, BADGE, PILULA
 * ========================================================================== */

.site-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-8);
  height: 32px;
  padding: 0 var(--site-space-12);
  border-radius: var(--site-radius-pill);
  background: var(--site-mist-2);
  color: var(--site-text-2);          /* 6,75:1 sobre --site-mist-2 */
  font-size: var(--site-fs-small);
  font-weight: var(--site-fw-medium);
}
.site-section--deep .site-chip {
  background: var(--site-deep-card);
  color: var(--site-on-deep-2);       /* 7,48:1 */
}

/* Fundo OPACO de proposito: com rgba o fundo composto mudava com o terreno e
 * o badge --ok caia para 4,40:1 sobre nevoa. */
.site-badge {
  display: inline-block;
  padding: 3px var(--site-space-8);   /* 3px: ajuste optico de caixa, nao espaco de layout */
  border-radius: var(--site-radius-xs);
  font-size: var(--site-fs-eyebrow);
  font-weight: var(--site-fw-semibold);
  letter-spacing: var(--site-ls-caps);
  text-transform: uppercase;
}
.site-badge--brand { background: var(--site-brand-tint); color: var(--site-brand); }  /* 6,98:1 */
.site-badge--ok    { background: var(--site-ok-tint);    color: var(--site-ok);    }  /* 4,78:1 */
.site-section--deep .site-badge--brand,
.site-section--deep .site-badge--ok {
  background: var(--site-deep-card);
  color: var(--site-on-deep-2);       /* 7,48:1 — no escuro o badge nao carrega cor funcional */
}

/* Pilula dourada — escopada a terreno escuro pelo SELETOR, nao pela honra.
 * Sobre branco o par borda/texto #c89840 daria 2,62:1. */
.site-section--deep .site-pill-gold {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 var(--site-space-12);
  border: 1px solid var(--site-gold);
  border-radius: var(--site-radius-pill);
  color: var(--site-gold);            /* 5,06:1 no pior caso do gradiente */
  background: transparent;
  font-size: var(--site-fs-eyebrow);
  font-weight: var(--site-fw-semibold);
  letter-spacing: var(--site-ls-caps);
  text-transform: uppercase;
}

/* Pilula de economia — UNICA excecao de tinta dourada em terreno claro.
 * #8a6120 sobre #f7efe0 = 4,82:1. Nao e caixa alta: e numero, e le melhor em
 * caixa mista com tabular-nums. */
.site-pill-save {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 var(--site-space-8);
  border-radius: var(--site-radius-pill);
  background: var(--site-gold-tint);
  color: var(--site-gold-ink);
  font-size: var(--site-fs-eyebrow);
  font-weight: var(--site-fw-semibold);
  letter-spacing: var(--site-ls-body);
  font-variant-numeric: tabular-nums;
}

/* --- marcador de inclusao/ausencia (.site-mark) --------------------------
 *
 * Substitui as palavras "Sim" e "Nao" da tabela comparativa e carrega o X da
 * lista de ausencia do cartao de preco. E um ICONE, nao tipografia: a leitura
 * de uma coluna de vinte linhas precisa acontecer em varredura vertical, e
 * duas palavras de comprimento diferente destroem essa varredura.
 *
 * COR SOZINHA NAO CARREGA INFORMACAO. Toda ocorrencia do marcador vem
 * obrigatoriamente acompanhada de um <span class="site-visually-hidden"> com
 * "Incluido" ou "Nao incluido", e o SVG leva aria-hidden="true". Sem o rotulo
 * a celula fica vazia para leitor de tela e a cor vira a unica portadora do
 * dado, o que reprova WCAG 1.4.1 e 1.1.1 de uma vez.
 *
 * Contraste medido pela formula WCAG 2.x (icone e componente de interface,
 * piso de 3:1 — 1.4.11):
 *   --site-ok     #047857 sobre branco #ffffff .................. 5,48:1
 *   --site-danger #be123c sobre branco #ffffff .................. 6,28:1
 * O fundo real das duas superficies onde o marcador aparece hoje E branco:
 * a tabela comparativa fica em .site-section (terreno 1) e o cartao de preco
 * e branco sobre nevoa. Nenhum ajuste de token foi necessario: os dois passam
 * 3:1 com folga e passariam ate o piso de texto de 4,5:1.
 *
 * O traco e 2.25 e nao 1.75 dos icones de recurso: a 20px, num glifo isolado
 * repetido vinte vezes numa coluna, 1.75 le como cinza e nao como sinal.
 * Os dois marcadores compartilham a mesma espessura — espessura de traco
 * inconsistente e o marcador numero um de "feito por IA" (DESIGN_SYSTEM 7.17).
 *
 * NAO existe variante de terreno escuro. Se um dia a tabela for para petroleo,
 * #047857 daria 2,15:1 sobre #0e3441 e o marcador teria de trocar de token
 * antes, nao depois. */
.site-mark {
  display: inline-block;
  width: 20px;                        /* dimensao de icone */
  height: 20px;
  vertical-align: -0.3em;             /* ajuste optico: base do glifo na 1a linha do rotulo */
  flex: none;
}
.site-mark--yes { color: var(--site-ok); }      /* 5,48:1 sobre branco */
.site-mark--no  { color: var(--site-danger); }  /* 6,28:1 sobre branco */


/* =============================================================================
 * 18. CAMPOS DE FORMULARIO
 * ========================================================================== */

.site-field { display: grid; gap: var(--site-space-8); }

.site-label {
  font-size: var(--site-fs-small);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-1);
}

.site-input,
.site-textarea,
.site-select {
  width: 100%;
  min-height: 48px;
  padding: var(--site-space-12) var(--site-space-16);
  background: var(--site-white);
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  color: var(--site-text-1);
  font-size: var(--site-fs-body);
  transition: border-color var(--site-dur-fast) var(--site-ease),
              box-shadow   var(--site-dur-fast) var(--site-ease);
}
.site-textarea { min-height: 120px; resize: vertical; }

.site-input::placeholder,
.site-textarea::placeholder { color: var(--site-text-3); }

.site-input:hover,
.site-textarea:hover,
.site-select:hover { border-color: var(--site-accent-text); }

.site-input:focus-visible,
.site-textarea:focus-visible,
.site-select:focus-visible {
  border-color: var(--site-accent-text);
  box-shadow: var(--site-focus-ring);
}

.site-input[aria-invalid="true"],
.site-textarea[aria-invalid="true"] { border-color: var(--site-danger); }

.site-input[disabled],
.site-textarea[disabled],
.site-select[disabled] {
  background: var(--site-mist);
  color: var(--site-text-3);
  cursor: not-allowed;
}

.site-help  { font-size: var(--site-fs-small); color: var(--site-text-3); }
.site-error { font-size: var(--site-fs-small); color: var(--site-danger); font-weight: var(--site-fw-medium); }


/* =============================================================================
 * 19. ACORDEAO (FAQ) — <details>/<summary> nativo
 *
 * Por padrao a abertura e INSTANTANEA, e isso e uma escolha declarada: dentro
 * de <details> fechado o painel nao participa do layout, entao nao existe
 * estado de origem para interpolar e qualquer transicao de altura simplesmente
 * nao roda. Animar o chevron sozinho produzia um descasamento visivel.
 *
 * Onde ::details-content existe, painel E chevron animam juntos, na mesma
 * duracao. E degradacao correta: navegador novo anima, navegador antigo abre
 * na hora, e nunca ha meia animacao.
 * ========================================================================== */

.site-accordion { border-top: 1px solid var(--site-border); }

.site-accordion__item { border-bottom: 1px solid var(--site-border); }

.site-accordion__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--site-space-24);
  padding-top: var(--site-space-24); padding-bottom: var(--site-space-24);
  padding-block: var(--site-space-24);
  cursor: pointer;
  list-style: none;
  font-size: var(--site-fs-h3);
  line-height: var(--site-lh-h3);
  letter-spacing: var(--site-ls-h3);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-1);
  transition: color var(--site-dur-fast) var(--site-ease);
}
.site-accordion__item > summary::-webkit-details-marker { display: none; }
.site-accordion__item > summary:hover { color: var(--site-accent-text); }

.site-accordion__chevron {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  margin-top: 3px;                     /* alinhamento optico com a primeira linha */
  color: var(--site-text-3);
  transition: color var(--site-dur-fast) var(--site-ease);
}
.site-accordion__item[open] .site-accordion__chevron {
  transform: rotate(180deg);
  color: var(--site-accent-text);
}

.site-accordion__panel p {
  padding-bottom: var(--site-space-24);
  color: var(--site-text-2);
  max-width: var(--site-measure-body);
}

@supports selector(::details-content) {
  :root { interpolate-size: allow-keywords; }
  .site-accordion__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--site-dur-base) var(--site-ease),
                content-visibility var(--site-dur-base) var(--site-ease);
    transition-behavior: allow-discrete;
  }
  .site-accordion__item[open]::details-content { block-size: auto; }
  .site-accordion__chevron {
    transition: transform var(--site-dur-base) var(--site-ease),
                color     var(--site-dur-fast) var(--site-ease);
  }
}


/* =============================================================================
 * 20. PRECO — cartoes reais e seletor segmentado
 *
 * Um cartao por PRODUTO REAL (hoje dois: Agente do Corretor e CRM). Nunca
 * degraus inventados de um mesmo produto.
 * ========================================================================== */

/* radiogroup, nao tablist: a semantica de "escolha o periodo de cobranca" e
 * escolha exclusiva, nao navegacao por paineis. tablist exigiria aria-controls,
 * tabpanel, setas e tabindex movel — contrato que a marcacao nao cumpria. */
.site-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-8);            /* 8px de separacao entre alvos adjacentes */
  height: 52px;
  padding: var(--site-space-4);
  border-radius: var(--site-radius-pill);
  background: var(--site-mist-2);
  border: 1px solid var(--site-border-strong);
}
.site-toggle__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--site-space-8);
  height: 44px;                        /* alvo de toque minimo do proprio sistema */
  padding: 0 var(--site-space-16);
  border-radius: var(--site-radius-pill);
  font-size: var(--site-fs-small);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-2);
  transition: background-color var(--site-dur-base) var(--site-ease),
              color            var(--site-dur-base) var(--site-ease);
}
.site-toggle__opt[aria-checked="true"] {
  background: var(--site-accent-text);
  color: var(--site-white);            /* 6,88:1 */
}

/* align-items: stretch (e nao start) por medicao em /planos/ a 1440px: com
 * start, o cartao do CRM fechava 1.624,3px contra 1.403,6px do cartao do
 * Agente, porque so ele carrega a lista "O que nao esta incluido" — 220,7px a
 * mais no produto de R$ 59,90 — e o CTA do CRM ficava 211,3px ABAIXO do CTA do
 * produto principal. Na tela do dinheiro, o objeto maior e o botao mais baixo
 * pertenciam ao plano secundario. Com stretch os dois cartoes ficam da mesma
 * altura e o ultimo bloco de cada um ancora no rodape do cartao (margin-top:
 * auto logo abaixo), o que realinha os dois CTAs. */
.site-price-grid {
  display: grid;
  gap: var(--site-rhythm-grid-col);
  align-items: stretch;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 480px));
}

.site-price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  margin-left: auto; margin-right: auto;
  margin-inline: auto;
  background: var(--site-white);
  border-radius: var(--site-radius-panel);
  box-shadow: var(--site-shadow-raise);   /* sem borda de 1px em volta: raise substitui a borda */
  padding: var(--site-space-48) var(--site-space-32);
  text-align: center;
}
/* O BLOCO DE CHECKOUT encosta no rodape do cartao, e com ele tudo o que vier
 * depois (a linha de garantia da home). O alvo e o ultimo <div> filho, que e
 * onde o CTA vive nas duas paginas — em /planos/ ele ja e o ultimo filho, na
 * home vem antes da .site-assurance. Ancorar o ULTIMO FILHO em vez do ultimo
 * div alinharia as duas linhas de garantia e deixaria os CTAs 373px fora de
 * eixo, que e o defeito.
 * Um unico margin-top: auto na coluna — dois dividiriam a folga entre eles.
 * So funciona porque o cartao e flex-column; em bloco, auto nao faz nada. */
.site-price-card > div:last-of-type { margin-top: auto; }
/* O rotulo de plano e um <span> com fundo tingido. Como item de flex-column
 * ele herdaria align-items: stretch e o fundo iria de ponta a ponta do cartao,
 * que e exatamente o que o comentario do .site-price-card__tag em site.css ja
 * proibia quando o risco era `display: block`. */
.site-price-card > .site-price-card__tag { align-self: center; }

/* Em 320px o cartao tem 280px e o padding de 32px deixava 216px de conteudo —
 * 67,5% da tela. Com isso o CTA primario (largura total, 18px fixo) quebrava
 * em TRES linhas e media 91,1px de altura, contra os 48px que a 7.1 fixa para
 * o botao no celular: o botao deixava de ler como botao. Medido com 20px de
 * padding: 240px uteis e CTA de 61,4px em duas linhas. Os 24px devolvidos
 * valem para todas as linhas do cartao, nao so para o botao. */
@media (max-width: 480px) {
  .site-price-card { padding: var(--site-space-32) var(--site-space-20); }
}
/* Marcador de valor. E ::before e nao border-top por duas razoes: uma borda de
 * 2px sem bordas laterais afina ate zero nos cantos de 20px, e o marcador SO
 * pode existir junto do rotulo textual "Mais escolhido" — o atributo obriga a
 * decisao a ser tomada na marcacao, em vez de nascer ligada. */
.site-price-card[data-destaque]::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 80px);
  height: 2px;
  background: var(--site-gold);
  border-radius: 0 0 1px 1px;
}

.site-price-anchor {                    /* linha de referencia acima do numeral */
  font-size: var(--site-fs-small);
  color: var(--site-text-3);
  margin-bottom: var(--site-space-8);
}
.site-price-value {
  font-size: var(--site-fs-price);
  line-height: 1;
  letter-spacing: var(--site-ls-display);
  font-weight: var(--site-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--site-text-1);
  transition: opacity 120ms linear;      /* crossfade na troca mensal/anual */
}
.site-price-value[data-swapping="true"] { opacity: 0; }
.site-price-currency {
  font-size: 0.45em;
  vertical-align: baseline;
  color: var(--site-text-3);
  margin-right: 0.15em;
  font-weight: var(--site-fw-semibold);
}
.site-price-period { font-size: var(--site-fs-small); color: var(--site-text-3); }

.site-price-list { display: grid; gap: var(--site-space-12); text-align: left; }
.site-price-list li {
  display: flex;
  gap: var(--site-space-12);
  color: var(--site-text-2);
  font-size: var(--site-fs-body);
}
.site-price-list svg {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  margin-top: 5px;                       /* alinhamento optico com a primeira linha */
  color: var(--site-accent-text);
}

/* Reversao de risco. Conteudo obrigatoriamente verdadeiro e verificavel
 * (hoje: direito de arrependimento de 7 dias, art. 49 do CDC, sem fidelidade).
 * Fica imediatamente abaixo do CTA do cartao. */
.site-assurance {
  display: flex;
  align-items: flex-start;
  gap: var(--site-space-8);
  margin-top: var(--site-space-16);
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-text-3);
  text-align: left;
}
.site-assurance svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; }


/* =============================================================================
 * 21. DEPOIMENTO
 * ========================================================================== */

.site-quote { max-width: var(--site-measure-quote); }
.site-quote__text {
  font-size: var(--site-fs-h3);
  line-height: 1.45;
  letter-spacing: var(--site-ls-h3);
  font-weight: var(--site-fw-medium);
  color: var(--site-text-1);
}
.site-quote__by {
  margin-top: var(--site-space-16);
  font-size: var(--site-fs-small);
  color: var(--site-text-3);
}
.site-quote__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }


/* =============================================================================
 * 22. FAIXA DE NUMEROS E LASTRO INSTITUCIONAL
 * ========================================================================== */

.site-stat-row {
  display: grid;
  gap: var(--site-rhythm-grid-col);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.site-stat { display: block; }
.site-stat__value {
  font-size: var(--site-fs-stat);        /* deliberadamente menor que o preco */
  line-height: 1.1;
  letter-spacing: var(--site-ls-h1);
  font-weight: var(--site-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--site-text-1);
}
.site-stat__label {
  margin-top: var(--site-space-4);
  font-size: var(--site-fs-small);
  color: var(--site-text-3);
}
.site-section--deep .site-stat__value { color: var(--site-on-deep-1); }
.site-section--deep .site-stat__label { color: var(--site-on-deep-3); }

/* Lastro: CNPJ, tratamento de dados, meio de pagamento, suporte humano.
 * Texto, nunca selo generico. Responde a objecao numero um de quem entrega a
 * carteira de clientes a um fornecedor novo. */
.site-trust {
  display: grid;
  gap: var(--site-space-16) var(--site-rhythm-grid-col);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  font-size: var(--site-fs-small);
  color: var(--site-text-3);
}
.site-trust__item { display: flex; gap: var(--site-space-8); align-items: flex-start; }
.site-trust__item svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; color: var(--site-accent-text); }
.site-section--deep .site-trust { color: var(--site-on-deep-3); }
.site-section--deep .site-trust__item svg { color: var(--site-accent-on-deep); }


/* =============================================================================
 * 23. PASSO NUMERADO E ITEM DE RECURSO
 * Duas composicoes que nao sao card — a pagina inteira feita de card le como
 * wireframe e e a assinatura de template.
 * ========================================================================== */

.site-steps {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  counter-reset: site-step;
}
.site-step { counter-increment: site-step; }
.site-step::before {
  content: counter(site-step);
  display: block;
  font-size: var(--site-fs-h3);
  font-weight: var(--site-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--site-accent-text);
  margin-bottom: var(--site-space-8);
}
.site-step__title { font-size: var(--site-fs-h3); font-weight: var(--site-fw-semibold); }
.site-step__text  { margin-top: var(--site-space-8); color: var(--site-text-2); }
.site-section--deep .site-step::before { color: var(--site-gold); }
.site-section--deep .site-step__text   { color: var(--site-on-deep-2); }

/* Icone: 24px, traco 1,75px, pontas e juntas redondas, SEM preenchimento, de
 * uma unica biblioteca. Espessura inconsistente entre icones e o marcador
 * numero um de "feito por IA". */
.site-feature { display: grid; gap: var(--site-space-12); }
.site-feature__icon {
  width: 24px; height: 24px;
  color: var(--site-accent-text);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.site-section--deep .site-feature__icon { color: var(--site-accent-on-deep); }


/* =============================================================================
 * 24. VIDEO — a acao principal de conversao do site
 *
 * Carregamento por FACHADA: o que a pagina entrega e um <img> poster com um
 * botao de play real; o <video>/<iframe> so entra no clique. E a maior alavanca
 * de LCP da home (ESTRATEGIA 6.7).
 * Sem autoplay, sem loop, sem muted-autoplay. Controles nativos. Legenda
 * obrigatoria: boa parte do publico assiste sem som.
 * ========================================================================== */

.site-video {
  max-width: var(--site-video-max);
  margin-left: auto; margin-right: auto;
  margin-inline: auto;
}
/* Mount escuro: isola o player da pagina sem precisar de uma terceira secao
 * escura (que violaria a regra de alternancia de terreno). */
.site-video__mount {
  background: var(--site-ground-3-solid);
  border-radius: var(--site-radius-lg);
  padding: var(--site-space-16);
}
/* O mount e terreno escuro sem ser .site-section--deep (ele e um OBJETO dentro
 * de uma secao de nevoa, como manda a 3.7), entao o bloco de foco escuro do
 * item 10 nao o alcancava e o botao de play recebia o anel CLARO: medido,
 * #1a7588 sobre #0c2e3a = 2,69:1, abaixo do piso de 3:1 da 9.1. Com o anel
 * escuro: #59b3c6 sobre #0c2e3a = 5,92:1. Especificidade (0,2,0), a mesma do
 * bloco `.site-section--deep :focus-visible`, e declarada DEPOIS dele — por
 * isso vence. A 7.12 ja pedia "foco com o anel escuro" neste botao. */
.site-video__mount :focus-visible { box-shadow: var(--site-focus-ring-deep); }
.site-video__facade {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--site-radius-sm);
  overflow: hidden;
  background: var(--site-deep-900);
  aspect-ratio: 16 / 9;                 /* reserva a caixa: zero CLS */
  cursor: pointer;
}
.site-video__facade img { width: 100%; height: 100%; object-fit: cover; }
/* Veu de contraste. So na FACHADA (o objeto clicavel), nunca na imagem parada
 * (.site-video__still), que nao tem botao em cima e nao precisa escurecer. */
.site-video__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--site-video-veil);
  pointer-events: none;
}
.site-video__play {
  position: absolute;
  z-index: 1;                           /* acima do veu */
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--site-white);
  color: var(--site-brand);
  box-shadow: var(--site-shadow-raise);
  transition: transform var(--site-dur-fast) var(--site-ease),
              background-color var(--site-dur-fast) var(--site-ease);
}
.site-video__facade:hover .site-video__play { transform: translate(-50%, -50%) scale(1.04); }
.site-video__facade:active .site-video__play { transform: translate(-50%, -50%) scale(1); }
.site-video__meta {                      /* duracao: o visitante precisa saber o compromisso */
  margin-top: var(--site-space-12);
  font-size: var(--site-fs-small);
  color: var(--site-on-deep-3);
  text-align: center;
}
.site-video video { width: 100%; border-radius: var(--site-radius-sm); }

/* Imagem parada dentro do mount escuro, para quando a secao mostra um print do
 * produto em vez de um video. Mesma caixa e mesmo raio da fachada, sem o botao
 * de play e sem cursor de clique: nada aqui e acionavel. Usada nas paginas cujo
 * video ainda nao foi publicado — ver comentario no HTML de cada uma. */
.site-video__still {
  display: block;
  width: 100%;
  border-radius: var(--site-radius-sm);
  aspect-ratio: 16 / 9;                 /* reserva a caixa: zero CLS, igual a fachada */
  object-fit: cover;
  background: var(--site-deep-900);
}
/* O meta abaixo de uma imagem parada carrega um link, nao uma duracao. O link
 * herda o contraste de terreno escuro do proprio .site-video__meta. */
.site-video__meta .site-link { color: var(--site-accent-on-deep); }


/* =============================================================================
 * 25. RECORTE DE CONVERSA
 *
 * Excecao de paleta declarada: os verdes do WhatsApp entram COM fidelidade,
 * porque a fidelidade e a prova (decisao registrada em ESTRATEGIA secao 3).
 * Condicao: vivem SO dentro de .site-frame, nao pintam botao, link, borda de
 * secao nem nada fora da moldura, e nao aparecem no rodape nem no header.
 * Nao ha moldura de aparelho desenhada em CSS e nao ha marca do WhatsApp.
 * ========================================================================== */

.site-chat {
  background: var(--site-chat-surface);
  padding: var(--site-space-16);
  display: grid;
  gap: var(--site-space-8);
}
/* width: fit-content e correcao de defeito medido, nao enfeite. .site-chat e
 * grid, e o justify-items padrao (stretch) fazia TODO balao recebido nascer
 * com exatamente 78% da largura: em 375px os 15 baloes da home mediam
 * 234,77px, e "tenho um MEI" ocupava a mesma caixa de um paragrafo de 170
 * caracteres. Pior: --out tem margin-left: auto, e margem auto em item de
 * grid encolhe o item ao conteudo — ou seja, os baloes verdes dimensionavam
 * pelo texto e os brancos nao, e os dois lados da conversa ficavam com
 * geometria diferente por acidente de CSS. Com fit-content os dois lados
 * passam a medir pelo texto, que e o que a 7.14 chama de fidelidade.
 * O max-width de 78% continua sendo o teto. */
.site-chat__msg {
  width: fit-content;
  max-width: 78%;
  padding: var(--site-space-8) var(--site-space-12);
  border-radius: var(--site-chat-radius);
  background: var(--site-chat-in);
  color: var(--site-chat-ink);           /* 17,46:1 */
  font-size: var(--site-fs-small);
  line-height: 1.45;
  box-shadow: var(--site-shadow-soft);
}
.site-chat__msg--out {
  background: var(--site-chat-out);      /* 15,21:1 com --site-chat-ink */
  margin-left: auto;
}
.site-chat__time {
  display: block;
  margin-top: 2px;                       /* ajuste optico */
  text-align: right;
  font-size: var(--site-fs-legal);
  color: var(--site-chat-meta);          /* 5,27:1 no verde, 6,06:1 no branco */
  font-variant-numeric: tabular-nums;
}

/* Animacao-assinatura: 2 a 3 mensagens entrando uma vez, nunca em loop. */
@keyframes site-message-slide {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.site-message-in {
  animation: site-message-slide var(--site-dur-slow) var(--site-ease) both;
}


/* =============================================================================
 * 26. HEADER FIXO E NAVEGACAO DO CELULAR
 *
 * ALTURA FIXA. Nao encolhe no scroll: animar `height` num elemento sticky
 * empurra todo o conteudo abaixo no meio da rolagem (jitter e CLS direto), e o
 * padrao "header que encolhe" e datado. Ao rolar, ele ganha apenas o fio
 * inferior e a sombra — o mesmo trabalho, sem custo e sem data de validade.
 *
 * Fundo SOLIDO e sempre branco. Sem blur e sem transparencia: glassmorphism e
 * proibido, e um header que troca de cor por terreno nao existe no CSS.
 * ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--site-z-header);
  height: var(--site-header-h);
  display: flex;
  align-items: center;
  background: var(--site-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--site-dur-base) var(--site-ease),
              box-shadow   var(--site-dur-base) var(--site-ease);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--site-border);
  box-shadow: var(--site-shadow-soft);
}
/* MARCA DO CABECALHO — lockup completo (decisao do dono, 2026-08-01).
 *
 * O arquivo e /assets/img/brand/logo-fundo-claro.png, 2041x516, proporcao
 * 3,9554:1. A altura de arte continua 36px, e nao 40px, por dois motivos que
 * se somam: (a) o respiro de 0,5X da secao 2.5 exige 18px acima e abaixo, e os
 * 76px do header so entregam 20px a 36px de arte (a 40px sobrariam 18px contra
 * 20px exigidos, e o proprio sistema reprovaria o header); (b) a altura do
 * header nao muda, entao nao ha CLS nem jitter de sticky.
 * 36 x 3,9554 = 142,4 -> os atributos do HTML sao width="142" height="36".
 *
 * O link carrega o alvo de toque: 36 + 2x4 = 44px de altura.
 *
 * ABAIXO DE 480px a marca reduz ao icone quadrado, por <picture>/<source>.
 * Nao e preferencia, e aritmetica medida no navegador em 375px:
 *   APP 59,8 + Ver planos 111,7 + gatilho 44 + 2 calhas de 8 = 231,5px de acoes
 *   container util = 375 - 2x20 de gutter = 335px
 *   sobra para a marca = 335 - 231,5 - 16 (calha minima) = 87,5px
 * O lockup a 36px de altura mede 142,4px. Nao cabe, e reduzi-lo ate caber
 * exigiria 22px de altura — metade do minimo de legibilidade da tagline (2.6).
 * O ponto exato de virada e ~432px de viewport; o corte esta em 480px, que ja
 * e breakpoint do sistema, com 45px de folga.
 *
 * A troca e feita em HTML (art direction), nao em JS, e a largura tambem e
 * fixada aqui para o caso de o navegador ignorar width/height no <source>:
 * sem esta linha, um Android antigo reservaria uma caixa de 142px para uma
 * imagem quadrada. */
.site-header__brand {
  display: inline-flex;
  align-items: center;
  padding: var(--site-space-4) 0;
  flex: 0 0 auto;                       /* NUNCA encolhe: distorcer o logo e proibido (2.7) */
}
/* object-fit: contain e trava de proporcao, corrigida na auditoria de
 * 2026-08-02. A escolha da IMAGEM e feita pelo <picture>/<source media>, que o
 * navegador avalia; o TAMANHO DA CAIXA e feito pela media query de CSS logo
 * abaixo. Sao dois mecanismos independentes, e eles podem discordar: medido
 * carregando /crm/ a 1280px e redimensionando para 375px, o currentSrc
 * permanecia logo-fundo-claro.png (2041x516, proporcao 3,9554) dentro de uma
 * caixa de 36x36 — a marca aparecia comprimida 3,96x na horizontal, que e
 * exatamente o uso proibido pela secao 2.7 ("distorcer proporcao"). Girar o
 * celular de paisagem para retrato cruza esse limiar. Com contain, o pior caso
 * deixa de ser distorcao e passa a ser um lockup pequeno alinhado a esquerda,
 * que a proxima carga ja corrige sozinha. Nao custa nenhum byte. */
.site-header__logo {
  height: 36px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

@media (max-width: 479px) {
  .site-header__logo { width: 36px; }   /* dimensao de componente: o icone e quadrado */
}

/* Gaveta de navegacao do celular. Existe porque a home tem links de secao e o
 * site tem 7 paginas (ESTRATEGIA 3.0). Os dois botoes do header permanecem
 * visiveis; so os links entram na gaveta. */
.site-nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--site-radius-md);
  color: var(--site-text-1);
}
.site-nav-drawer {
  position: fixed;
  top: var(--site-header-h); right: 0; bottom: 0; left: 0;
  inset: var(--site-header-h) 0 0 0;
  z-index: var(--site-z-overlay);
  background: var(--site-white);
  padding: var(--site-space-24) var(--site-gutter);
  display: grid;
  align-content: start;
  gap: var(--site-space-8);
  overflow-y: auto;
}
.site-nav-drawer[hidden] { display: none; }
.site-nav-drawer a {
  min-height: 48px;
  display: flex;
  align-items: center;
  font-size: var(--site-fs-lead);
  font-weight: var(--site-fw-semibold);
  color: var(--site-text-2);
  border-bottom: 1px solid var(--site-border);
}
/* "Voce esta aqui" na gaveta. O HTML ja marcava aria-current="page", mas nao
 * havia regra: medido, o item ativo e o inativo eram identicos em cor, peso,
 * fundo, sublinhado e fio. No desktop a mesma informacao existe
 * (.site-header__link.is-active ganha --site-text-1 mais fio de 2px em
 * --site-accent-text); quem entra pelo celular perdia. O fio lateral e o
 * analogo vertical do fio do desktop, e o par cor+fio mantem a regra de a
 * informacao nunca depender so de cor. */
.site-nav-drawer a[aria-current="page"] {
  color: var(--site-text-1);
  box-shadow: inset 3px 0 0 var(--site-accent-text);
  padding-left: var(--site-space-12);
}
/* Trava de rolagem do corpo enquanto a gaveta esta aberta (o JS aplica a
 * classe em <body>). */
.site-nav-open { overflow: hidden; }

@media (max-width: 900px) {
  .site-nav-toggle { display: inline-flex; }
  .site-header__links { display: none; }
}
@media (min-width: 901px) {
  .site-nav-drawer { display: none; }
}

/* Barra de CTA fixa — SO no celular, so depois que o hero sai da tela.
 * O JS liga/desliga por data-visible; some quando o cartao de preco esta em
 * tela, para nao existirem dois CTAs primarios simultaneos. */
.site-cta-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--site-z-sticky);
  display: none;
  /* Calha ZERO na barra: o .site-cta-sticky__inner e um .site-container e ja
   * entrega o gutter do sistema. Com os dois, a calha dobrava — medido em
   * 375px, o botao ia de x=40 a x=335 (295px) enquanto todo o resto da pagina
   * alinha em 20px, e a 7.20 pede "1 botao primario de largura total". */
  padding: var(--site-space-12) 0;
  padding-bottom: calc(var(--site-space-12) + env(safe-area-inset-bottom, 0px));
  background: var(--site-white);
  border-top: 1px solid var(--site-border);
}
@media (max-width: 768px) {
  .site-cta-sticky[data-visible="true"] { display: block; }
}


/* =============================================================================
 * 27. RODAPE
 * ========================================================================== */

/* 168px de minimo, e nao 200px: ao lado da coluna de marca de 300px, 200px de
 * minimo fazia o auto-fit cair para tres colunas e jogar "Acesso" sozinho numa
 * segunda linha, com um buraco de 32px no meio do rodape. Com 168px as quatro
 * colunas fecham numa linha so no desktop e continuam empilhando no celular.
 * E largura de coluna (dimensao de objeto), fora da escala por definicao. */
.site-footer {
  display: grid;
  gap: var(--site-rhythm-grid-row) var(--site-rhythm-grid-col);
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
/* O auto-fit precisa de 2 x 168 + 32 de calha = 368px de trilha para virar duas
 * colunas. Em 375px (a largura de celular mais comum) a trilha e 335px: cai do
 * lado ruim por 33px e o rodape fica com QUATRO blocos empilhados, dois deles
 * com um unico link. Medido: 1.172px de rodape em 375px (1,44 tela) contra
 * 899px em 414px (1,03 tela) — 273px de diferenca so por causa do ponto de
 * virada. Forcar duas colunas resolve sem tocar no alvo de toque de 44px, que
 * e decisao registrada logo acima e nao muda.
 * O piso de 360px preserva os 320px em uma coluna: ali duas colunas dariam
 * 124px cada e os rotulos quebrariam palavra a palavra. */
@media (min-width: 360px) and (max-width: 479px) {
  .site-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--site-space-32);
  }
}
.site-footer__title {
  font-size: var(--site-fs-eyebrow);
  letter-spacing: var(--site-ls-eyebrow);
  text-transform: uppercase;
  font-weight: var(--site-fw-semibold);
  color: var(--site-on-deep-3);         /* 6,57:1 sobre o solido do rodape */
  margin-bottom: var(--site-space-16);
}
/* Alvo de toque do rodape — corrigido na auditoria de 2026-08-01.
 *
 * A regra anterior era `.site-footer__list a { min-height: 24px }`. Medido no
 * navegador em 6 larguras (320 a 1440), cada link fechava 28px de altura: passa
 * no minimo da WCAG 2.5.8 (24px), mas fica abaixo dos 44px que a secao 9 deste
 * sistema exige, e esta e navegacao tocavel numa coluna, nao link dentro de
 * frase (a dispensa que vale para .site-link nao se aplica).
 *
 * A altura vem de min-height + padding, nunca de height fixa, para o rotulo
 * continuar quebrando em duas linhas no celular. O gap da lista cai de 12px
 * para 4px porque o proprio padding do link ja separa as linhas — mantendo 12px
 * a coluna ficaria com 56px por item e o rodape esticaria sem motivo.
 *
 * Especificidade: esta regra e `.site-footer__list a` (0,1,1) e vence
 * `.site-footer__link` (0,1,0). Por isso a altura mora AQUI, e nao la — se
 * alguem declarar min-height no .site-footer__link, nao vai valer. */
.site-footer__list { display: grid; gap: var(--site-space-4); }
.site-footer__list a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* LINK DE COLUNA DO RODAPE — nao e .site-link, e a diferenca e deliberada.
 *
 * .site-link tem sublinhado permanente porque vive DENTRO de prosa, onde a
 * unica coisa que o distingue do texto ao redor seria a cor (WCAG 1.4.1). Numa
 * coluna cujo conteudo e exclusivamente uma lista de links sob um titulo, nao
 * existe texto ao redor do qual distinguir: o contexto ja identifica o link, e
 * oito sublinhados turquesa era metade do motivo de o rodape ler como pobre.
 * O sublinhado volta em hover e em foco, e o anel de foco escuro continua
 * valendo (bloco 10).
 *
 * Contraste: --site-on-deep-2 #c3d2d8 sobre --site-ground-3-solid #0c2e3a =
 * 9,22:1. Em hover, branco sobre o mesmo fundo = 14,31:1.
 * As colunas do rodape sao o unico lugar onde esta classe e permitida; o
 * e-mail e o telefone do bloco legal continuam em .site-link, porque ali eles
 * estao dentro de uma frase. */
/* A altura minima de 44px NAO mora aqui: mora em `.site-footer__list a`, que tem
 * especificidade maior e venceria esta regra. Ver o comentario la em cima. */
.site-footer__link {
  padding-block: var(--site-space-4);
  color: var(--site-on-deep-2);
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  text-decoration: none;
  transition: color var(--site-dur-fast) var(--site-ease);
}
.site-footer__link:hover {
  color: var(--site-on-deep-1);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}


/* =============================================================================
 * 28. REVELACAO POR SCROLL
 *
 * O estado escondido so existe quando ha JavaScript. Sem o gate `.js`, um
 * bundle bloqueado, um proxy corporativo ou um erro de sintaxe em qualquer
 * script anterior deixaria a pagina inteira abaixo da dobra em opacity: 0.
 * No <head>, antes de tudo:
 *   <script>document.documentElement.classList.add('js')</script>
 *
 * `will-change` NAO entra no CSS: com ~30 elementos revelaveis seriam 30
 * camadas promovidas no load, no celular intermediario, exatamente no momento
 * que a secao 8.3 do .md protege. O JS aplica no elemento imediatamente antes
 * de torna-lo visivel, se aplicar.
 * ========================================================================== */

.js .site-reveal {
  opacity: 0;
  transform: translateY(var(--site-reveal-shift));
  transition: opacity   var(--site-dur-reveal) var(--site-ease),
              transform var(--site-dur-reveal) var(--site-ease);
}
.js .site-reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Encadeamento: no maximo 4 (240ms de cauda) */
.js .site-reveal[data-delay="1"] { transition-delay: calc(1 * var(--site-stagger)); }
.js .site-reveal[data-delay="2"] { transition-delay: calc(2 * var(--site-stagger)); }
.js .site-reveal[data-delay="3"] { transition-delay: calc(3 * var(--site-stagger)); }


/* =============================================================================
 * 29. AVISO DE COOKIES
 *
 * Faixa no rodape da janela, pintada no terreno petroleo do proprio rodape
 * para nao parecer um enxerto de terceiro. Regras que valem como requisito,
 * nao como estetica:
 *
 *   - NAO bloqueia a pagina. Sem overlay, sem travar rolagem, sem travar
 *     foco. Quem so quer ler preco continua lendo preco. Muro de consentimento
 *     e justamente o padrao que o Guia de Cookies da ANPD reprova.
 *   - RECUSAR tem exatamente o mesmo peso visual de ACEITAR: mesma classe,
 *     mesmo tamanho, mesma cor, lado a lado, na mesma ordem em toda largura.
 *     Nao existe botao grande colorido de um lado e link cinza do outro.
 *   - Nao ha "X". Fechar sem escolher deixaria a pessoa achando que decidiu
 *     algo; enquanto nao ha escolha, nenhum cookie de medicao e gravado, e a
 *     faixa volta na proxima pagina.
 *   - Enquanto a faixa esta aberta, a barra de CTA fixa do celular some
 *     (regra logo abaixo): as duas sao `position: fixed` no rodape e
 *     empilhariam uma sobre a outra em 375px.
 * ========================================================================== */

.site-cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--site-z-modal);
  background: var(--site-deep-800);
  border-top: 1px solid var(--site-border-deep-strong);
  box-shadow: 0 -8px 32px -12px rgba(4, 20, 28, 0.55);
  color: var(--site-on-deep-1);
}

/* Sem a classe .js o elemento nem e injetado; este par existe para a
 * transicao de entrada e para o retorno pelo link do rodape. */
.site-cookies[hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .site-cookies {
    animation: site-cookies-entra var(--site-dur-slow) var(--site-ease) both;
  }
}
@keyframes site-cookies-entra {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.site-cookies__inner {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-16);
  padding-top: var(--site-space-20);
  padding-bottom: calc(var(--site-space-20) + env(safe-area-inset-bottom, 0px));
}

.site-cookies__texto {
  margin: 0;
  font-size: var(--site-fs-small);
  line-height: var(--site-lh-small);
  color: var(--site-on-deep-2);
  max-width: 68ch;
}

/* Os dois botoes ocupam a largura toda no celular e ficam lado a lado, com a
 * MESMA largura, a partir de 560px. `flex: 1 1 0` (e nao `auto`) e o que
 * garante largura identica independentemente do tamanho do rotulo — senao
 * "Aceitar" sairia menor que "Recusar" e o peso visual deixaria de ser igual. */
.site-cookies__acoes {
  display: flex;
  flex-direction: column;
  gap: var(--site-space-12);
}
.site-cookies__acoes .site-btn { width: 100%; }

@media (min-width: 560px) {
  .site-cookies__acoes { flex-direction: row; }
  .site-cookies__acoes .site-btn { flex: 1 1 0; width: auto; min-width: 0; }
}

/* A partir do tablet o texto e as acoes dividem a linha; as acoes param de
 * esticar e ficam no canto, com largura suficiente para os dois rotulos. */
@media (min-width: 900px) {
  .site-cookies__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-space-24);
  }
  .site-cookies__acoes { flex: 0 0 auto; }
  .site-cookies__acoes .site-btn { flex: 0 0 auto; min-width: 9.5rem; }
}

/* A barra de CTA fixa do celular cede a vez enquanto ha decisao pendente. */
html[data-cookies-aberto="true"] .site-cta-sticky { display: none !important; }

/* O link da faixa aponta para a secao da Politica que descreve cada cookie —
 * e a divulgacao que o aviso oferece, entao precisa ser legivel.
 *
 * `.site-link` sozinho usa `--site-accent-text` (#086375), que foi medido
 * contra fundo CLARO. Sobre o petroleo da faixa (#0c2e3a) isso da ~2,0:1,
 * abaixo do piso de 4,5:1. A variante escura existe, mas esta presa a
 * `.site-section--deep .site-link`, e a faixa nao e uma secao do documento —
 * e chrome fixo da janela, injetado no fim do body. Por isso a repeticao
 * abaixo, com os MESMOS valores da variante escura: #59b3c6 sobre #0c2e3a =
 * **5,92:1** (calculado pela formula WCAG 2.x, como o resto da secao 3.5 do
 * DESIGN_SYSTEM). O texto da faixa, em --site-on-deep-2, da 9,22:1.
 *
 * Link "Cookies" do rodape nao precisa de nada: ele vive dentro do rodape,
 * que ja e `.site-section--deep`. */
.site-cookies .site-link {
  color: var(--site-accent-on-deep);
  text-decoration-color: rgba(89, 179, 198, 0.45); /* --site-accent-on-deep a 45% */
}
.site-cookies .site-link:hover { color: var(--site-white); }


/* =============================================================================
 * 30. PREFERENCIAS DO SISTEMA
 * ========================================================================== */

/* Movimento reduzido — mesmo bloco do app, com !important, mais o estado final
 * das revelacoes (o observer tambem precisa checar matchMedia no JS). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .site-reveal { opacity: 1 !important; transform: none !important; }
  .site-message-in { animation: none !important; opacity: 1 !important; }
  /* Um spinner parado nao comunica "processando": esconde o arco e o rotulo
   * passa a carregar o estado (o JS troca o texto e poe aria-busy="true"). */
  .site-btn[data-loading="true"]::before { display: none !important; }
}

/* Contraste elevado do sistema */
@media (prefers-contrast: more) {
  :root {
    --site-text-2: var(--site-text-1);
    --site-text-3: #414d53;              /* 8,71:1 sobre branco */
    --site-border: var(--site-border-strong);
  }
  .site-link { text-decoration-color: currentColor; }
}

/* Alto Contraste do Windows — box-shadow NAO e renderizado em forced-colors.
 * Sem este bloco, `outline: none` + anel por sombra apaga o foco por completo
 * para quem usa o modo. */
@media (forced-colors: active) {
  :focus-visible,
  .site-section--deep :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
  .site-btn, .site-card, .site-frame, .site-input, .site-textarea, .site-select,
  .site-price-card, .site-toggle {
    border: 1px solid CanvasText;
  }
  .site-rule-gold { background: CanvasText; }
}

/* Impressao — o site nao imprime faixas escuras. E preciso resetar tambem os
 * FILHOS: eles tem cor propria declarada, que vence a heranca do container
 * (lead a 1,55:1, legal a 2,18:1, botao secundario a 1,00:1 no papel). */
@media print {
  /* Chrome da janela, nao conteudo: o aviso de cookies nunca vai ao papel. */
  .site-cookies { display: none !important; }

  .site-section--deep {
    background: #ffffff !important;
    background-image: none !important;
    color: #000000 !important;
  }
  .site-section--deep * {
    color: #000000 !important;
    background: transparent !important;
    border-color: #999999 !important;
  }
  .site-header, .site-skip-link, .site-cta-sticky,
  .site-nav-drawer, .site-nav-toggle { display: none !important; }
  .site-btn { box-shadow: none !important; }
}