/* Fontes self-hosted — geradas de fonts.googleapis.com, subsets latin e latin-ext.
   Nenhuma requisição a terceiro em runtime (o visitante não tem IP enviado ao Google). */

/* As familias em si. Vinham do fonts.css original do DS, que foi substituido por
   este arquivo — sem elas o navegador cai no serifado padrao. */
:root {
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif; /* @kind font */
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif; /* @kind font */
  --font-mono: "JetBrains Mono", ui-monospace, monospace; /* @kind font */
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/sora-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/sora-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/sora-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/sora-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/sora-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/assets/fonts/sora-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* --- Brand core: sampled from the Stonni mark (cyan -> indigo gradient) --- */
  --stonni-cyan-400: #35C2F0;
  --stonni-cyan-500: #01A9DF; /* lightest point of the mark */
  --stonni-cyan-600: #0090C4;
  --stonni-blue-400: #2E86D8;
  --stonni-blue-500: #1B6BB8; /* mid-gradient */
  --stonni-blue-600: #14539A;
  --stonni-indigo-500: #4131AE; /* deepest point of the mark */
  --stonni-indigo-600: #33268C;

  /* --- Neutrals: cold, near-black navy family (night / road at dark) --- */
  --ink-1000: #05080F;
  --ink-900: #0A1020;
  --ink-800: #101A2E;
  --ink-700: #1A2640;
  --ink-600: #2A3855;
  --ink-500: #465575;
  --ink-400: #6B7A99;
  --ink-300: #9AA7BF;
  --ink-200: #C7D0DF;
  --ink-100: #E4E9F1;
  --ink-050: #F3F6FA;
  --white: #FFFFFF;

  /* --- Semantic --- */
  --success-500: #1FA97A;
  --warning-500: #E8A419;
  --danger-500: #DC3B4B;
  --info-500: var(--stonni-cyan-500);

  /* --- Gradients (the single most recognisable brand device) --- */
  --grad-brand: linear-gradient(115deg, var(--stonni-cyan-500) 0%, var(--stonni-blue-500) 52%, var(--stonni-indigo-500) 100%);
  --grad-brand-soft: linear-gradient(115deg, rgba(1,169,223,.16) 0%, rgba(65,49,174,.16) 100%); /* @kind color */
  --grad-night: linear-gradient(180deg, #0A1020 0%, #101A2E 60%, #15224A 100%); /* @kind color */
  --grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(1,169,223,.35) 0%, rgba(10,16,32,0) 70%); /* @kind color */
  --grad-protect: linear-gradient(180deg, rgba(5,8,15,0) 0%, rgba(5,8,15,.75) 60%, rgba(5,8,15,.94) 100%); /* @kind color */
  --grad-hairline: linear-gradient(90deg, rgba(1,169,223,0) 0%, rgba(1,169,223,.7) 35%, rgba(65,49,174,.7) 65%, rgba(65,49,174,0) 100%); /* @kind color */

  /* --- Semantic aliases: dark surfaces are the default brand mode --- */
  --surface-page: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-card: rgba(255,255,255,.04);
  --surface-card-hover: rgba(255,255,255,.07);
  --surface-glass: rgba(10,16,32,.72);
  --surface-inverse: var(--white);
  --surface-subtle: var(--ink-050);

  --text-strong: var(--white);
  --text-body: var(--ink-200);
  --text-muted: var(--ink-400);
  --text-accent: var(--stonni-cyan-400);
  --text-on-brand: var(--white);
  --text-strong-on-light: var(--ink-900);
  --text-body-on-light: var(--ink-600);
  --text-muted-on-light: var(--ink-400);

  --border-subtle: rgba(255,255,255,.08);
  --border-default: rgba(255,255,255,.14);
  --border-strong: rgba(255,255,255,.24);
  --border-on-light: var(--ink-100);
  --border-accent: rgba(1,169,223,.45);

  --focus-ring: 0 0 0 3px rgba(1,169,223,.45);
}
/* Light scope: opt in with class="stonni-light" on any container */
.stonni-light {
  --surface-page: var(--white);
  --surface-raised: var(--ink-050);
  --surface-card: var(--white);
  --surface-card-hover: var(--ink-050);
  --surface-glass: rgba(255,255,255,.78);
  --text-strong: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-400);
  --text-accent: var(--stonni-blue-500);
  --border-subtle: var(--ink-100);
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
}

:root {
  /* Scale — display sizes are for 1440px+ marketing layouts */
  --fs-display-1: clamp(40px, 5.4vw, 76px); /* @kind font */
  --fs-display-2: clamp(30px, 4.2vw, 58px); /* @kind font */
  --fs-display-3: clamp(28px, 3.2vw, 44px); /* @kind font */
  --fs-h1: clamp(26px, 2.6vw, 36px); /* @kind font */
  --fs-h2: clamp(22px, 2vw, 28px); /* @kind font */
  --fs-h3: clamp(19px, 1.6vw, 22px); /* @kind font */
  --fs-h4: 18px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;

  --lh-tight: 1.02; /* @kind font */
  --lh-display: 1.08; /* @kind font */
  --lh-heading: 1.2; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-loose: 1.75; /* @kind font */

  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-black: 800; /* @kind font */

  --ls-display: -0.03em; /* @kind font */
  --ls-heading: -0.015em; /* @kind font */
  --ls-body: 0em; /* @kind font */
  --ls-eyebrow: 0.18em; /* @kind font */
  --ls-button: 0.02em; /* @kind font */

  /* Semantic roles */
  --type-display: var(--fw-black) var(--fs-display-1) / var(--lh-display) var(--font-display); /* @kind font */
  --type-hero-light: var(--fw-light) var(--fs-display-1) / var(--lh-display) var(--font-display); /* @kind font */
  --type-h1: var(--fw-bold) var(--fs-h1) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h2: var(--fw-bold) var(--fs-h2) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3: var(--fw-semibold) var(--fs-h3) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-h4: var(--fw-semibold) var(--fs-h4) / var(--lh-heading) var(--font-display); /* @kind font */
  --type-body: var(--fw-regular) var(--fs-body) / var(--lh-body) var(--font-body); /* @kind font */
  --type-body-lg: var(--fw-regular) var(--fs-body-lg) / var(--lh-body) var(--font-body); /* @kind font */
  --type-body-sm: var(--fw-regular) var(--fs-body-sm) / var(--lh-body) var(--font-body); /* @kind font */
  --type-caption: var(--fw-medium) var(--fs-caption) / 1.45 var(--font-body); /* @kind font */
  --type-button: var(--fw-semibold) var(--fs-body-sm) / 1 var(--font-display); /* @kind font */
  --type-eyebrow: var(--fw-semibold) var(--fs-eyebrow) / 1.2 var(--font-display); /* @kind font */
  --type-stat: var(--fw-black) var(--fs-display-2) / 1 var(--font-display); /* @kind font */
}

:root {
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Layout */
  --container-max: 1240px; /* @kind spacing */
  --container-narrow: 820px; /* @kind spacing */
  --gutter: var(--space-6);
  --section-y: var(--space-32);
  --section-y-compact: var(--space-20);
  --grid-gap: var(--space-6);
  --header-h: 76px; /* @kind spacing */
}

:root {
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --radius-control: var(--radius-pill); /* buttons, chips, inputs read as pills */
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-2xl);
  --radius-media: var(--radius-xl);

  --border-w-hair: 1px; /* @kind radius */
  --border-w-thick: 2px; /* @kind radius */
}

:root {
  /* Dark-surface elevation is built from glow + inner hairline, not grey drop shadow */
  --shadow-sm: 0 1px 2px rgba(5,8,15,.4);
  --shadow-md: 0 8px 24px -8px rgba(5,8,15,.6);
  --shadow-lg: 0 24px 60px -20px rgba(5,8,15,.75);
  --shadow-card: 0 20px 50px -24px rgba(5,8,15,.8), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-brand: 0 14px 40px -12px rgba(1,169,223,.45);
  --shadow-brand-strong: 0 18px 48px -10px rgba(1,169,223,.6);
  --shadow-inset-top: inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-focus: var(--focus-ring);

  --blur-glass: 18px; /* @kind other */
  --blur-soft: 40px; /* @kind other */
  --glass: blur(18px) saturate(140%); /* @kind other */
}

:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 160ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --dur-reveal: 700ms; /* @kind other */

  --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* @kind other */
  --ease-in: cubic-bezier(.5, 0, 1, 1); /* @kind other */
  --ease-emphasis: cubic-bezier(.2, .8, .2, 1); /* @kind other */

  --transition-control: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-card: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); /* @kind other */

  --lift-card: translateY(-4px); /* @kind other */
  --press-scale: scale(.97); /* @kind other */
}

/* ============================================================================
   Correções de contraste — acrescentam tokens, não editam os do design system.
   Os três pares abaixo foram MEDIDOS (WCAG 2.1 relative luminance), não estimados.

     --text-muted  #6B7A99  sobre --ink-900   4,40:1  reprova AA (precisa 4,5)
     branco        sobre    --stonni-cyan-500 2,71:1  reprova até o AA de texto grande
     --ink-300     #9AA7BF  sobre --ink-900   7,85:1  passa com folga

   O gradiente da marca continua livre para hairline, glow e superfície. O que ele não
   pode é carregar texto: a ponta clara (#01A9DF) não sustenta branco em cima.
   ========================================================================== */
:root {
  /* Botão preenchido: gradiente só do azul ao índigo — branco passa (5,47:1 a 9,32:1)
     em toda a extensão, em vez de só na metade escura. */
  --grad-brand-cta: linear-gradient(115deg, var(--stonni-blue-500) 0%, var(--stonni-indigo-500) 100%);

  /* Texto em gradiente sobre fundo escuro: ponta clara puxada para o cyan-400 (9,3:1)
     e a escura clareada, para o meio da frase não afundar. */
  --grad-brand-text: linear-gradient(115deg, #35C2F0 0%, #9A8CF5 100%);

  /* Texto secundário corrido. --text-muted fica reservado a texto >=19px e a elemento
     decorativo, onde 4,40:1 é suficiente pela regra de texto grande. */
  --text-secundario: var(--ink-300);

  /* Anel de foco de dupla camada: o halo escuro por dentro garante >=3:1 contra
     QUALQUER superfície, inclusive sobre o gradiente ou uma foto clara. O original
     (rgba a 45%) some sobre superfície clara. */
  --focus-ring: 0 0 0 2px var(--ink-1000), 0 0 0 4px var(--stonni-cyan-400);

  /* Piso do display baixado de 40px para 34px.
     O comentário do DS diz que os tamanhos de display são "for 1440px+ marketing
     layouts" — e o piso de 40px vazava em celular. Medido em 375px, onde a área
     útil do container é 327px: a palavra "Ar-condicionado" em 40px ocupa 360px.
     Não cabia, e arrastava a coluna inteira para fora da tela.
     Em 34px ela ocupa 306px e sobra folga. Só o piso muda: o teto de 76px e a
     rampa de 5,4vw continuam iguais, então nada se altera acima de ~740px. */
  --fs-display-1: clamp(34px, 5.4vw, 76px);
}

/* Rede de segurança: título nenhum pode estourar a própria caixa por causa de
   uma palavra comprida. Com `minmax(0,1fr)` a trilha do grid não estica mais,
   mas sem isto a palavra passaria a vazar do bloco em vez de vazar a página —
   o mesmo defeito, mudando de lugar. Vale para conteúdo futuro que ninguém vai
   medir antes de publicar. */
h1, h2, h3, .numero__valor { overflow-wrap: break-word; }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text-body); font: var(--type-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-family: var(--font-display); letter-spacing: var(--ls-heading); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--text-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--stonni-cyan-500); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; box-shadow: var(--focus-ring); }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(1,169,223,.35); color: var(--white); }
.stonni-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); }
.stonni-gradient-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stonni-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ============================================================================
   COMPONENTES — porte vanilla do Stonni Design System.

   Os arquivos em ds/components/ sao a ESPECIFICACAO. Eles usam objetos de estilo
   inline do React (style={{...}}), entao nao havia CSS a reaproveitar: cada
   propriedade do objeto virou declaracao aqui, cada `hover ? A : B` virou :hover,
   e cada prop booleana (featured, accent, interactive) virou modificador.

   Regra que nao se quebra: so variaveis de token. Nada de hex cru fora dos casos
   herdados do proprio DS (tons de estado do Badge), nada de familia de fonte fora
   de Sora / Barlow / JetBrains Mono. E a mesma regra que o
   ds/_adherence.oxlintrc.json aplica no kit original.
   ========================================================================== */

/* O atributo [hidden] perde para QUALQUER declaracao de display numa classe.
   Ja mordeu duas vezes aqui: os menus do cabecalho nasciam abertos, e o botao
   "Ver no mapa" continuava na tela depois de carregar o mapa. Uma regra so,
   no topo, resolve para sempre. */
[hidden] { display: none !important; }

/* ---------- Acessibilidade transversal ---------------------------------- */

.pular-link {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 100;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-control);
  background: var(--white); color: var(--ink-900);
  font: var(--type-button); text-decoration: none;
  transform: translateY(-250%);
}
.pular-link:focus { transform: translateY(0); }

/* O cabecalho fixo de 76px comeria o alvo de toda ancora. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }

.so-leitor {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ------------------------------------------------------ */

.secao { padding-block: var(--section-y); }
.secao--compacta { padding-block: var(--section-y-compact); }
.secao--escura { background: var(--ink-1000); }
/* As duas gerais do layout levam `minmax(0, 1fr)` pelo mesmo motivo que a
   .hero__texto: grid sem colunas declaradas cria uma trilha implicita `auto`,
   que se dimensiona pelo maior min-content entre os filhos. Basta um botao com
   `white-space: nowrap` la dentro para a trilha inteira ficar maior que o
   container e empurrar todo o texto para fora da tela no celular. */
.secao__interno { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); }

.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--grid-gap); }
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grade--3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grade--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grade--topo { align-items: start; }
.grade--centro { align-items: center; }
.grade--larga { gap: var(--space-16); }

/* ---------- Cabecalho (SiteHeader.jsx) ---------------------------------- */

.cabecalho {
  position: sticky; top: 0; z-index: 40; height: var(--header-h);
  background: var(--surface-glass);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border-bottom: var(--border-w-hair) solid var(--border-subtle);
}
.cabecalho__interno { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
.cabecalho__marca { display: flex; flex: 0 0 auto; }
.cabecalho__marca img { height: 30px; width: auto; }

.cabecalho__nav { display: flex; gap: var(--space-6); margin-left: auto; align-items: center; }
.cabecalho__link {
  /* inline-flex com altura minima: o alvo clicavel tem que ter tamanho mesmo
     quando o texto e curto. So o texto dava 19px de altura. */
  display: inline-flex; align-items: center; min-height: 44px;
  font: var(--type-button); font-weight: var(--fw-medium);
  color: var(--text-body); text-decoration: none;
  border-bottom: var(--border-w-thick) solid transparent;
  transition: color var(--dur-fast) var(--ease-standard);
}
.cabecalho__link:hover { color: var(--text-strong); }
.cabecalho__link[aria-current="page"] {
  color: var(--text-accent); border-bottom-color: var(--stonni-cyan-500);
}
.cabecalho__acao { flex: 0 0 auto; }

/* Menu suspenso — abre no hover E no foco. So hover exclui teclado e toque. */
.menu { position: relative; }
.menu__botao {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; cursor: pointer;
  font: var(--type-button); font-weight: var(--fw-medium);
  color: var(--text-body); font-family: var(--font-display);
  padding: var(--space-2) 0; min-height: 44px;
  transition: color var(--dur-fast) var(--ease-standard);
}
.menu__botao:hover, .menu__botao[aria-expanded="true"] { color: var(--text-strong); }
.menu__seta { transition: transform var(--dur-fast) var(--ease-standard); flex: 0 0 auto; }
.menu__botao[aria-expanded="true"] .menu__seta { transform: rotate(180deg); }
.menu__lista {
  position: absolute; top: calc(100% + var(--space-3)); left: 50%; transform: translateX(-50%);
  min-width: 250px; margin: 0; padding: var(--space-3); list-style: none;
  display: grid; gap: 2px; z-index: 50;
  background: var(--ink-800); border: var(--border-w-hair) solid var(--border-default);
  border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
}
/* A ponte sobre o vao.
   A lista abre 12px (--space-3) abaixo do botao, e a caixa da .menu termina na
   borda de baixo do botao: essa faixa de 12px nao pertence nem a uma nem a
   outra. Descer o mouse em direcao ao menu atravessava esse nada, o mouseleave
   disparava no meio do caminho e o menu fechava na cara de quem ia clicar.
   Passar o mouse NA lista nunca foi o problema: ela e filha da .menu no DOM, e
   mouseleave so dispara ao sair do elemento E de todos os descendentes.
   Este pseudo-elemento cobre exatamente o vao, e some junto com a lista porque
   o pai fica [hidden]. Se mudar o `top` da lista, mudar a altura aqui junto. */
.menu__lista::before {
  content: ""; position: absolute;
  bottom: 100%; left: 0; right: 0; height: var(--space-3);
}
.menu__item {
  display: block; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm); text-decoration: none;
  font: var(--type-body-sm); color: var(--text-body);
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.menu__item:hover { background: var(--surface-card-hover); color: var(--text-strong); }
.menu__item--externo::after { content: " \2197"; color: var(--text-muted); }

.cabecalho__hamburguer { display: none; }

/* ---------- Rodape (SiteFooter.jsx) ------------------------------------- */

.rodape {
  border-top: var(--border-w-hair) solid var(--border-subtle);
  background: var(--ink-1000); padding-top: var(--space-20);
}
.rodape__topo { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--space-12); }
.rodape__marca { display: grid; gap: var(--space-5); align-content: start; }
.rodape__marca img { height: 34px; width: auto; }
.rodape__blurb { font: var(--type-body-sm); color: var(--text-secundario); max-width: 34ch; }
.rodape__coluna { display: grid; gap: var(--space-4); align-content: start; }
.rodape__titulo {
  font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-strong); margin: 0;
}
.rodape__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.rodape__lista a, .rodape__lista span {
  font: var(--type-body-sm); color: var(--text-secundario); text-decoration: none;
}
.rodape__lista a:hover { color: var(--text-strong); }
.rodape__legal {
  margin-top: var(--space-16); padding-block: var(--space-6);
  border-top: var(--border-w-hair) solid var(--border-subtle);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4);
  font: var(--type-caption); color: var(--text-secundario);
}
.rodape__social { display: flex; gap: var(--space-5); align-items: center; }
.rodape__social a { color: var(--text-secundario); display: inline-flex; }
.rodape__social a:hover { color: var(--text-accent); }

/* ---------- Botao (Button.jsx) ------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: var(--type-button); letter-spacing: var(--ls-button);
  border-radius: var(--radius-control); border: var(--border-w-hair) solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  padding: 13px 26px; font-size: var(--fs-body-sm);
  transition: var(--transition-control);
  min-height: 44px; /* alvo de toque, inclusive no tamanho pequeno */
}
.btn--sm { padding: 9px 18px; font-size: var(--fs-caption); }
.btn--lg { padding: 17px 34px; font-size: 16px; }

/* Primario usa --grad-brand-cta, nao --grad-brand: branco sobre a ponta cyan do
   gradiente original da 2,71:1 e reprova em qualquer tamanho de texto. */
.btn--primaria {
  background: var(--grad-brand-cta); color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.btn--primaria:hover { box-shadow: var(--shadow-brand-strong); transform: translateY(-1px); }

.btn--secundaria {
  background: var(--surface-card); color: var(--text-strong);
  border-color: var(--border-default); backdrop-filter: blur(var(--blur-glass));
}
.btn--secundaria:hover { background: var(--surface-card-hover); border-color: var(--border-strong); }

.btn--contorno { background: transparent; color: var(--text-accent); border-color: var(--border-accent); }
.btn--contorno:hover { background: rgba(1, 169, 223, .1); }

.btn--fantasma { background: transparent; color: var(--text-body); }
.btn--fantasma:hover { color: var(--text-strong); }

.btn--solida { background: var(--white); color: var(--ink-900); }
.btn--solida:hover { background: var(--ink-050); }

.btn:active { transform: var(--press-scale); }
.btn--bloco { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* ---------- Selo (Badge.jsx) -------------------------------------------- */

.selo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 14px; border-radius: var(--radius-pill);
  border: var(--border-w-hair) solid;
  font: var(--type-caption); font-family: var(--font-display);
  font-weight: var(--fw-semibold); letter-spacing: .04em;
  background: var(--grad-brand-soft); color: var(--text-accent); border-color: var(--border-accent);
}
.selo--neutro { background: var(--surface-card); color: var(--text-body); border-color: var(--border-default); }
.selo--sucesso { background: rgba(31, 169, 122, .14); color: #4BD3A5; border-color: rgba(31, 169, 122, .4); }
.selo--alerta { background: rgba(232, 164, 25, .14); color: #F0BE55; border-color: rgba(232, 164, 25, .4); }
.selo--perigo { background: rgba(220, 59, 75, .14); color: #F4707C; border-color: rgba(220, 59, 75, .4); }
.selo--cheio { background: var(--grad-brand-cta); color: var(--white); border-color: transparent; }

/* ---------- Cartao (Card.jsx) ------------------------------------------- */

.cartao {
  position: relative; padding: var(--space-8); border-radius: var(--radius-card);
  background: var(--surface-card);
  border: var(--border-w-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  overflow: hidden; transition: var(--transition-card);
}
.cartao--interativo:hover,
.cartao--interativo:focus-within {
  background: var(--surface-card-hover);
  border-color: var(--border-accent);
  transform: var(--lift-card);
}
/* O hairline gradiente de 2px no topo e a assinatura do sistema. */
.cartao--destaque::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--border-w-thick);
  background: var(--grad-hairline);
}
.cartao--painel { border-radius: var(--radius-panel); }
.cartao--compacto { padding: var(--space-6); }

/* ---------- Titulo de secao (SectionHeading.jsx) ------------------------ */

.secao-titulo {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4);
  justify-items: center;
  text-align: center; max-width: var(--container-narrow); margin-inline: auto;
}
.secao-titulo--esq { justify-items: start; text-align: left; max-width: 620px; margin-inline: 0; }
.secao-titulo h2, .secao-titulo h1 {
  font: var(--type-h1); font-size: var(--fs-display-3);
  letter-spacing: var(--ls-display); line-height: var(--lh-display);
}
.secao-titulo p {
  font: var(--type-body-lg); color: var(--text-secundario); max-width: 56ch;
}
/* Destaque em gradiente: usa --grad-brand-text, com a ponta clara puxada para o
   cyan-400. O gradiente cheio nao sustenta texto. */
.destaque {
  background: var(--grad-brand-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.olho { font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); }

/* ---------- Numero de prova (StatBlock.jsx) ----------------------------- */

.numero { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }
.numero__valor { font: var(--type-stat); background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.numero__rotulo { font: var(--type-body-sm); color: var(--text-secundario); }

/* ---------- Cartao de atributo (FeatureCard.jsx) ------------------------ */

.atributo { display: grid; gap: var(--space-4); align-content: start; }
.atributo__icone {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center;
  background: var(--grad-brand-soft);
  border: var(--border-w-hair) solid var(--border-accent);
  color: var(--stonni-cyan-400);
}
.atributo h3 { font: var(--type-h4); }
.atributo p { font: var(--type-body-sm); color: var(--text-secundario); }

/* ---------- Cartao de produto (ProductCard.jsx) ------------------------- */

.produto {
  display: grid; grid-template-rows: auto 1fr;
  border-radius: var(--radius-panel); overflow: hidden;
  background: var(--surface-card);
  border: var(--border-w-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-card); transition: var(--transition-card);
}
.produto--destaque { background: var(--ink-800); }
.produto:hover, .produto:focus-within {
  border-color: var(--border-accent); box-shadow: var(--shadow-lg); transform: var(--lift-card);
}
.produto__midia {
  position: relative; aspect-ratio: 16 / 10; background: var(--grad-night);
  display: grid; place-items: center; overflow: hidden;
}
/* `position: absolute; inset: 0` em vez de `width/height: 100%`.
   Parece a mesma coisa e nao e: a altura do pai vem de `aspect-ratio`, nao de
   uma altura definida, entao `height: 100%` NAO resolve — cai para `auto`, a
   proporcao natural da imagem assume, e uma foto quadrada de 960x960 vira uma
   caixa 379x379 dentro de um espaco 379x237. O `overflow: hidden` corta 71px em
   cima e 71px embaixo, e o `object-fit` nao salva porque ele ajusta a foto
   dentro da caixa do <img> — que ja estava errada. Com `inset: 0` a caixa passa
   a ser exatamente a do pai, e o object-fit volta a significar o que diz. */
.produto__midia img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.produto:hover .produto__midia img { transform: scale(1.04); }
.produto__selo { position: absolute; top: var(--space-5); left: var(--space-5); z-index: 2; }
.produto__corpo { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8); }
.produto__corpo h3 { font: var(--type-h2); }
/* O link envolve o titulo, nao o cartao: <article> com onClick nao e focavel
   nem anunciado por leitor de tela. O ::after estende a area clicavel. */
.produto__corpo h3 a { color: inherit; text-decoration: none; }
.produto__corpo h3 a::after { content: ""; position: absolute; inset: 0; }
.produto__tagline { font: var(--type-body); color: var(--text-secundario); }
.produto__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.produto__lista li {
  display: flex; gap: var(--space-3); align-items: center;
  font: var(--type-body-sm); color: var(--text-body);
}
.produto__lista li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--stonni-cyan-500); flex: 0 0 auto;
}

/* ---------- Passo de linha do tempo (TimelineStep.jsx) ------------------ */

.passo { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); padding-bottom: var(--space-8); position: relative; }
.passo:not(.passo--ultimo)::before {
  content: ""; position: absolute; left: 21px; top: 48px; bottom: 0; width: var(--border-w-hair);
  background: var(--border-subtle);
}
.passo__numero {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--grad-brand-soft); border: var(--border-w-hair) solid var(--border-accent);
  color: var(--text-accent); font: var(--type-h4); font-family: var(--font-display);
}
.passo__texto { display: grid; gap: var(--space-2); }
.passo__texto h3 { font: var(--type-h3); }
.passo__texto p { font: var(--type-body); color: var(--text-secundario); }

/* ---------- Depoimento (Testimonial.jsx) -------------------------------- */

.depoimento {
  position: relative; padding: var(--space-10); border-radius: var(--radius-panel);
  background: var(--surface-card); border: var(--border-w-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-card); display: grid; gap: var(--space-6);
}
.depoimento::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--border-w-thick);
  background: var(--grad-hairline);
}
.depoimento blockquote { margin: 0; font: var(--type-body-lg); color: var(--text-strong); }
.depoimento figcaption { display: grid; gap: 2px; }
.depoimento__autor { font: var(--type-h4); color: var(--text-strong); }
.depoimento__papel { font: var(--type-body-sm); color: var(--text-secundario); }

/* ---------- Faixa de chamada (CTABanner.jsx) ---------------------------- */

.faixa-cta {
  position: relative; overflow: hidden;
  padding: var(--space-20) var(--space-12); border-radius: var(--radius-panel);
  background: var(--ink-800); border: var(--border-w-hair) solid var(--border-subtle);
  display: grid; gap: var(--space-5); justify-items: center; text-align: center;
}
.faixa-cta::before {
  content: ""; position: absolute; inset: 0; background: var(--grad-glow); opacity: .9;
}
.faixa-cta::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--border-w-thick);
  background: var(--grad-hairline);
}
.faixa-cta > * { position: relative; }
.faixa-cta h2 { font: var(--type-h1); font-size: var(--fs-display-3); letter-spacing: var(--ls-display); }
.faixa-cta p { font: var(--type-body-lg); color: var(--text-secundario); max-width: 52ch; }
.faixa-cta__acoes { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* ---------- Hero -------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  padding-top: var(--space-24); padding-bottom: var(--space-20);
  background: var(--grad-night);
}
.hero__brilho { position: absolute; inset: 0; background: var(--grad-glow); }
.hero__orbe {
  position: absolute; width: 720px; height: 720px; right: -14%; top: -28%;
  border-radius: 50%; background: var(--grad-brand);
  filter: blur(180px); opacity: .28;
}
.hero__interno { position: relative; }
/* `grid-template-columns: minmax(0, 1fr)` e obrigatorio aqui, nao decoracao.
   Sem ele o grid cria uma coluna IMPLICITA de tamanho `auto`, que se dimensiona
   pelo maior min-content entre os filhos. Em 14/09/2026 esse filho era o
   .hero__acoes: o botao tem `white-space: nowrap` e "Ver os modelos de
   ar-condicionado" mede 376px, entao a trilha virou 376px dentro de um
   elemento de 327px — e o h1 e o paragrafo, que cabiam de sobra, foram
   arrastados para fora da tela junto. O titulo parecia o culpado e nao era. */
.hero__texto { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); justify-items: start; }
.hero h1 { font: var(--type-display); letter-spacing: var(--ls-display); margin: 0; }
.hero h1 .leve {
  display: block; font-weight: var(--fw-light);
  font-size: var(--fs-display-2); color: var(--text-body);
}
.hero__sub { font: var(--type-body-lg); color: var(--text-secundario); max-width: 48ch; }
.hero__acoes { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
/* A marca solta, sobre o brilho do hero — sem placa, sem borda, sem sombra.
   O quadro escuro que aparecia aqui era duas coisas somadas: este cartao, e o
   fundo do og-stonni.png, que e a imagem de COMPARTILHAMENTO (logo sobre o
   azul-noite, 1200x630) e nasce opaca de proposito. Tirar so o CSS deixaria o
   retangulo do PNG; por isso a imagem tambem mudou, para o logotipo com fundo
   transparente. O og-stonni.png continua existindo para o que ele serve: a
   miniatura de link no WhatsApp e nas redes. */
.hero__midia { display: grid; place-items: center; padding: var(--space-8) 0; }
/* 340px de largura contra um arquivo de 680px = 2x. Ver a nota em
   tools/imagens.mjs sobre o teto de nitidez do master do DS. */
.hero__midia img { width: 100%; max-width: 340px; height: auto; }

/* ---------- Tabela de especificacao ------------------------------------- */

.tabela-envolve { overflow-x: auto; }
.tabela {
  width: 100%; border-collapse: collapse; font: var(--type-body-sm);
  min-width: 560px;
}
.tabela caption {
  font: var(--type-caption); color: var(--text-secundario);
  text-align: left; padding-bottom: var(--space-4);
}
.tabela th, .tabela td {
  text-align: left; padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-w-hair) solid var(--border-subtle);
}
.tabela thead th {
  font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
  border-bottom-color: var(--border-default);
}
.tabela tbody th { color: var(--text-body); font-weight: var(--fw-medium); }
.tabela td { color: var(--text-strong); font-family: var(--font-mono); font-size: 14px; }
.tabela td.txt { font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--text-secundario); }

.specs { display: grid; }
.specs__linha {
  display: flex; justify-content: space-between; gap: var(--space-6);
  padding: 14px 0; border-bottom: var(--border-w-hair) solid var(--border-subtle);
}
.specs__chave { font: var(--type-body-sm); color: var(--text-secundario); }
.specs__valor { font-family: var(--font-mono); font-size: 14px; color: var(--text-strong); }

/* ---------- Campos de formulario (Input/Select/Checkbox.jsx) ------------ */

.campo { display: grid; gap: var(--space-2); }
.campo__label { font: var(--type-body-sm); font-weight: var(--fw-medium); color: var(--text-body); }
.campo__obrig { color: var(--text-accent); font-size: var(--fs-caption); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px var(--space-5);
  border-radius: var(--radius-control);
  border: var(--border-w-hair) solid var(--border-default);
  background: var(--surface-card); color: var(--text-strong);
  font: var(--type-body); font-family: var(--font-body);
  transition: var(--transition-control);
  min-height: 48px;
}
.campo textarea { border-radius: var(--radius-lg); resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--text-muted); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: var(--border-strong); }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--danger-500); }
.campo__erro { font: var(--type-caption); color: #F4707C; }
.campo__ajuda { font: var(--type-caption); color: var(--text-secundario); }

/* ---------- Aviso ------------------------------------------------------- */
/* Para o que a pessoa precisa saber ANTES de agir, e que em letra miuda ela
   nao le. Criado para o "nao funciona no iPhone": estava como ressalva no fim
   de um paragrafo, e quem tem iPhone so descobria depois de tocar no botao,
   instalar e o app nao achar o ar.
   Medido: --warning-500 sobre --ink-900 da 8,81:1, e o corpo em --text-body
   12,20:1 — ambos passam AA com folga. A cor nao carrega a informacao
   sozinha: o icone e o titulo dizem o mesmo, para quem nao distingue amarelo. */
.aviso {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--space-6);
  border: var(--border-w-hair) solid rgba(232, 164, 25, .38);
  border-left: 3px solid var(--warning-500);
  border-radius: var(--radius-card);
  background: rgba(232, 164, 25, .07);
}
.aviso__icone { color: var(--warning-500); flex: 0 0 auto; margin-top: 1px; }
.aviso__texto { font: var(--type-body-sm); color: var(--text-body); margin: 0; }
.aviso__texto strong { color: var(--text-strong); }
.aviso__texto a { color: var(--text-accent); }

.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.checkbox input {
  width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px;
  accent-color: var(--stonni-blue-500);
  border-radius: var(--radius-xs);
}
.checkbox span { font: var(--type-body-sm); color: var(--text-body); }

/* Honeypot: invisivel para gente, preenchivel por robo. */
.armadilha { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Documento (paginas legais) ---------------------------------- */

.doc { max-width: 76ch; margin-inline: auto; display: grid; gap: var(--space-5); }
.doc h2 { font: var(--type-h1); margin-top: var(--space-10); }
.doc h3 { font: var(--type-h3); margin-top: var(--space-6); }
.doc p, .doc li { font: var(--type-body); color: var(--text-body); }
.doc ul, .doc ol { margin: 0; padding-left: var(--space-6); display: grid; gap: var(--space-3); }
.doc strong { color: var(--text-strong); }
.doc__meta { font: var(--type-body-sm); color: var(--text-secundario); }
.doc table { width: 100%; border-collapse: collapse; font: var(--type-body-sm); }
.doc table th, .doc table td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w-hair) solid var(--border-subtle); color: var(--text-body);
}

/* ---------- Trilha de navegacao ----------------------------------------- */

.trilha { font: var(--type-caption); color: var(--text-secundario); }
.trilha ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.trilha li:not(:last-child)::after { content: "/"; margin-left: var(--space-2); color: var(--text-muted); }
.trilha a { color: var(--text-secundario); text-decoration: none; }
.trilha a:hover { color: var(--text-accent); }

/* ---------- Revelacao no scroll ----------------------------------------- */

.revelar { opacity: 0; transform: translateY(4px); }
.revelar.visivel {
  opacity: 1; transform: none;
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
}
/* Sem JS, nada fica invisivel. */
.sem-js .revelar { opacity: 1; transform: none; }

/* ---------- Responsivo -------------------------------------------------- */

@media (max-width: 1000px) {
  .rodape__topo { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
}

@media (max-width: 920px) {
  :root { --section-y: var(--space-20); --section-y-compact: var(--space-16); }

  /* 🔴 `absolute` com altura explicita, e NAO `fixed` com inset.
     O .cabecalho tem backdrop-filter, e backdrop-filter faz o elemento virar
     BLOCO DE CONTENCAO dos descendentes `position: fixed`. Entao o antigo
     `position: fixed; inset: var(--header-h) 0 0 0` nao media a tela: media o
     proprio cabecalho, de 76px. O menu abria com 88px de altura, mostrando so
     o primeiro item — os outros tres ficavam cortados, e o conteudo da pagina
     aparecia por baixo. Ninguem enxerga isso lendo o CSS do menu, porque a
     causa esta no seletor do cabecalho.
     Aqui o `absolute` se ancora no .cabecalho de proposito (ele e sticky, logo
     ja e bloco de contencao), `top: 100%` desce para logo abaixo dele, e a
     altura e declarada em dvh — a unidade que desconta a barra do navegador do
     celular, que muda de tamanho conforme se rola. */
  .cabecalho__nav {
    position: absolute; top: 100%; left: 0; right: 0;
    height: calc(100dvh - var(--header-h));
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-6) var(--gutter) var(--space-16);
    background: var(--ink-900); overflow-y: auto;
  }
  .cabecalho__nav.aberto { display: flex; }
  .cabecalho__link { padding: var(--space-4) 0; border-bottom: var(--border-w-hair) solid var(--border-subtle); }

  /* O WhatsApp ERA `display: none` aqui — a acao principal do site sumia
     inteira no celular, que e de onde vem a maior parte do acesso. Agora ele
     vive dentro do <nav> e aparece no painel do menu, largo e depois dos itens
     de navegacao: quem abriu o menu procurando uma pagina acha a pagina
     primeiro, e quem abriu querendo falar acha o botao sem procurar. */
  .cabecalho__acao { display: block; margin-top: var(--space-6); }
  .cabecalho__acao .btn { width: 100%; white-space: normal; min-height: 52px; }

  .menu { width: 100%; }
  .menu__botao { width: 100%; justify-content: space-between; padding: var(--space-4) 0; border-bottom: var(--border-w-hair) solid var(--border-subtle); }
  .menu__lista {
    position: static; transform: none; min-width: 0; width: 100%;
    background: none; border: 0; box-shadow: none; padding: var(--space-2) 0 var(--space-4) var(--space-4);
  }
  /* aqui o menu e acordeao: nao ha vao para cobrir, e a ponte viraria um
     retangulo invisivel por cima do conteudo */
  .menu__lista::before { content: none; }

  .cabecalho__hamburguer {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px;
    background: none; border: 0; color: var(--text-strong); cursor: pointer;
  }

  .hero { padding-top: var(--space-16); }
  .hero__orbe { width: 420px; height: 420px; filter: blur(120px); }
  .faixa-cta { padding: var(--space-16) var(--space-6); }
  .depoimento { padding: var(--space-8); }
  .rodape__topo { grid-template-columns: 1fr; gap: var(--space-8); }
  .rodape__legal { flex-direction: column; gap: var(--space-2); }
}

@media (max-width: 520px) {
  /* Botao de largura inteira e rotulo que PODE quebrar.
     O `white-space: nowrap` do .btn e bom no desktop — mantem o rotulo numa
     linha so — e e exatamente o que estourava a home no celular: "Ver os
     modelos de ar-condicionado" mede 376px e nao tinha permissao de quebrar.
     Em tela estreita o rotulo quebra e o botao ocupa a largura toda, o que de
     quebra aumenta a area de toque. */
  .hero__acoes { width: 100%; }
  .hero__acoes .btn { width: 100%; white-space: normal; }

  /* `minmax(0, 1fr)` e nao `1fr`. Parece a mesma coisa e nao e: `1fr` equivale
     a `minmax(auto, 1fr)`, e esse `auto` e o tamanho da PALAVRA MAIS LONGA do
     conteudo. Em 14/09/2026 isso quebrou a home no celular — "Ar-condicionado"
     em 40px pede 360px, a area util tinha 327px, e a trilha inteira esticou
     para 375,6px levando titulo, paragrafo e botao para fora da tela. O zero
     permite a trilha encolher abaixo do conteudo, que e o que se quer. */
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }
  .cartao { padding: var(--space-6); }
  .faixa-cta { padding: var(--space-12) var(--space-5); }
}

/* ---------- Utilitarios -------------------------------------------------- */
/* Poucos e nomeados pelo papel, nao pelo valor. Existem para o HTML nao
   precisar de atributo style="", que obrigaria a afrouxar o CSP com
   'unsafe-inline' em style-src. */

.esp-abaixo { margin-bottom: var(--space-8); }
.esp-acima-g { margin-top: var(--space-20); }
.centro-txt { text-align: center; }
.grade--curta { gap: var(--space-5); }
.hero__texto--interna { margin-top: var(--space-8); max-width: 760px; }

/* ---------- Cartao de produto vindo do catalogo -------------------------- */
/* As fotos do catalogo sao recortes em fundo claro. Forcar fundo escuro atras
   delas deixaria uma moldura branca dura; melhor assumir a placa clara. */

.produto__midia--claro { background: var(--ink-050); }
.produto__midia--claro img { object-fit: contain; padding: var(--space-5); }
.produto__semfoto {
  font: var(--type-caption); color: var(--text-muted);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
}
.produto__ref { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- Rede autorizada --------------------------------------------- */

.uf { display: grid; gap: var(--space-3); align-content: start; }
.uf__titulo {
  font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-w-hair) solid var(--border-subtle);
}
.uf__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.uf__lista li { display: grid; gap: 2px; }
.uf__lista strong { font: var(--type-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.uf__lista span { font: var(--type-caption); color: var(--text-secundario); }

.autorizadas { display: grid; gap: var(--space-12); }
.mapa {
  height: 460px; border-radius: var(--radius-panel);
  border: var(--border-w-hair) solid var(--border-subtle);
  background: var(--ink-800); overflow: hidden;
}
.mapa[hidden] { display: none; }
/* O Leaflet injeta fundo claro proprio; estas regras so acertam o que fica por cima. */
.mapa .leaflet-container { background: var(--ink-800); font-family: var(--font-body); }
.mapa .leaflet-popup-content-wrapper, .mapa .leaflet-popup-tip {
  background: var(--ink-800); color: var(--text-body);
  border: var(--border-w-hair) solid var(--border-default);
}
.mapa .leaflet-popup-content { font: var(--type-body-sm); margin: var(--space-4); }
.mapa .leaflet-popup-content strong { color: var(--text-strong); display: block; }
.mapa .leaflet-control-attribution {
  background: var(--surface-glass); color: var(--text-muted); font-size: 10px;
}
.mapa .leaflet-control-attribution a { color: var(--text-secundario); }

@media (max-width: 920px) { .mapa { height: 340px; } }
.mapa-abrir { display: grid; gap: var(--space-3); justify-items: start; }

/* ---------- Catalogo com filtro ------------------------------------------ */
/* O filtro e conveniencia: sem JS, todos os grupos aparecem — que e o que o
   Google le e o que funciona se o script nao carregar. */

.catalogo { display: grid; gap: var(--space-16); }
.catalogo__grupo { display: grid; gap: var(--space-8); scroll-margin-top: calc(var(--header-h) + var(--space-8)); }
.catalogo__titulo {
  font: var(--type-h2); display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-4); border-bottom: var(--border-w-hair) solid var(--border-subtle);
}
.catalogo__titulo span {
  font: var(--type-caption); font-family: var(--font-mono); color: var(--text-muted);
}

.chips { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.chip {
  padding: 9px 18px; border-radius: var(--radius-pill);
  border: var(--border-w-hair) solid var(--border-default);
  background: var(--surface-card); color: var(--text-body);
  font: var(--type-button); font-size: var(--fs-caption); cursor: pointer;
  min-height: 44px; transition: var(--transition-control);
}
.chip:hover { background: var(--surface-card-hover); color: var(--text-strong); }
.chip--ativo {
  background: var(--grad-brand-cta); color: var(--text-on-brand); border-color: transparent;
}

/* ---------- Passos numerados em linha ------------------------------------ */

.etapas { counter-reset: etapa; display: grid; gap: var(--space-6); }
.etapas > li {
  counter-increment: etapa; list-style: none;
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start;
}
.etapas > li::before {
  content: counter(etapa); width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--grad-brand-soft); border: var(--border-w-hair) solid var(--border-accent);
  color: var(--text-accent); font: var(--type-h4); font-family: var(--font-display);
}
.etapas h3 { font: var(--type-h4); margin-bottom: var(--space-2); }
.etapas p { font: var(--type-body-sm); color: var(--text-secundario); }