/* 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);
  /* --text-secundario vive em acessibilidade.css como var(--ink-300) e nao
     era redefinido aqui — ninguem tinha usado .stonni-light em conteudo de
     verdade ainda. Sem isto, .produto__tagline (e qualquer texto secundario)
     ficaria cinza-claro sobre fundo quase branco: 2,24:1, reprova ate o
     limite frouxo de AA para texto grande (3:1). Medido com ink-500: 6,88:1. */
  --text-secundario: var(--ink-500);
}

: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 baixado de 40px para 34px, rampa de 5,4vw para 4,6vw e teto de 76px
     para 68px. Os três por medição, e sempre pela mesma palavra.

     O comentário do DS diz que os tamanhos de display são "for 1440px+ marketing
     layouts". Em português isso não sobrevive a "ar-condicionado": 15 caracteres
     numa palavra só, e ela é a palavra-chave do site.

     Piso — em 375px a área útil é 327px. "Ar-condicionado" em 40px ocupa 360px e
     arrastava a coluna para fora da tela; em 34px ocupa 306px.

     Rampa e teto — num notebook de 1366px a rampa de 5,4vw dava 74px, e nessa
     fonte a palavra mede 650px. Cabia na largura do container (1192px), mas NÃO
     na coluna de 564px do hero de duas colunas: quebrava no hífen, o h1 ia a
     7 linhas e 566px de altura, e os botões caíam em 973px — fora de uma tela de
     630px de altura. O hero da home passou a ser de coluna única (largura cheia),
     e aqui a rampa desceu para 4,6vw: 63px em 1366px, com a palavra em 553px.
     Em 1920px o teto de 68px mantém o título imponente sem voltar ao problema. */
  --fs-display-1: clamp(34px, 4.6vw, 68px);
}

/* 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); }
/* Ritmo claro/escuro pela secao inteira, nao so por cartao — usar com a
   classe `stonni-light` no MESMO elemento (o token vira branco/texto escuro
   pelo escopo; aqui so o fundo, porque .secao nunca definia background
   nenhum fora de --escura). Poucas secoes, de proposito: alternancia em toda
   secao do site seria o mesmo problema de repeticao que a analise da Apple
   apontou, só que invertido. */
.secao--clara { background: var(--white); }
/* 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)); }

/* 🔴 Colunas DECLARADAS, e nao `auto-fit`, porque o numero de cartoes aqui e
   cinco e o `auto-fit` escolhe pelo espaco: com minmax(230px) ele dava 5
   colunas a 1366 e 4 a 1240, e em 4 sobra um orfao sozinho na segunda fila.

   Foram TRES colunas e nao cinco, e a escolha foi medida. Cinco fecha exato e
   nao deixa orfao, mas entrega cartao de 219px — e ali o titulo, que usa
   tamanho de h2, nao cabe: "Ar-condicionado eletrico" quebrava em QUATRO
   linhas, partindo a palavra ("Ar-" / "condicion" / "ado" / "eletrico"). Em
   tres colunas o cartao vai para ~397px, o titulo cabe em duas linhas e a
   placa de foto quase TRIPLICA de area (395x247 contra 217x136), que e o que
   de fato carrega a enfase que o Leo pediu.

   Quem acrescentar ou tirar um produto refaz a conta: 3+2 hoje, e com seis
   viraria 3+3 (melhor), com quatro 3+1 (pior — orfao sozinho, e ai o certo
   passa a ser duas ou quatro colunas). */
/* `grid-auto-rows: 1fr` iguala as DUAS filas. Sem ele o grid dimensiona cada
   fila pelo conteudo dela: medido, a fila de cima ficava com 490px (o titulo do
   ar-condicionado ocupa duas linhas) e a de baixo com 430px, e 60px de
   diferenca entre filas e visivel — justamente a hierarquia que o pedido era
   para tirar. Com as filas iguais, os cinco cartoes tem a mesma altura. */
.grade--linha { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
/* Cinco numa linha no desktop: o documento de reformulacao da Home pede o
   portfolio compacto, sem cartao grande nem espaco vazio. */
@media (min-width: 1101px) { .grade--linha { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .grade--linha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grade--linha { grid-template-columns: minmax(0, 1fr); } }
/* Para conjunto de QUATRO que precisa fechar. O `auto-fit` do .grade--4 cabe 4
   acima de ~1040px e 3 abaixo — e 3 de 4 deixa o quarto sozinho numa linha. No
   bifurcador da home o quarto e "Tenho oficina", justamente o caminho que a
   marca mais precisa que seja visto. Abaixo de 520px o bloco ja vira coluna
   unica pela regra geral, entao o par so vale acima disso. */
@media (max-width: 1040px) and (min-width: 521px) {
  .grade--par { grid-template-columns: repeat(2, minmax(0, 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);
}
/* Home: cabecalho fora do fluxo, escondido sobre o banner (site.js). O foco
   por teclado o traz de volta, para quem navega sem mouse nao perder o menu. */
.cabecalho--sobre-banner { position: fixed; left: 0; right: 0; transition: transform var(--dur-base, .25s) ease; }
.cabecalho--oculto { transform: translateY(-100%); }
.cabecalho--oculto:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { .cabecalho--sobre-banner { transition: none; } }
.cabecalho__interno { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
/* `min-height: 44px` com a imagem em 30px: o alvo de toque cresce e o logotipo
   NAO. Medido no celular em 16/09/2026, o link media 112x30 — abaixo do minimo
   de 44px, e ele e o atalho para a home no aparelho de onde vem a maior parte
   do trafego. Nao mexe na altura do cabecalho porque `.cabecalho` tem
   `height: var(--header-h)` fixa e 44 cabe dentro dela.
   Mesmo padrao do `.cabecalho__link` logo abaixo. */
.cabecalho__marca {
  display: flex; flex: 0 0 auto;
  align-items: center; min-height: 44px;
}
.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; }
/* Rotulo de menu nunca quebra: com quebra livre, "A Stonni" e "Onde comprar"
   viravam duas linhas abaixo de ~1140px, e o menu parecia caber quando nao
   cabia. Sem quebra, quem decide e o breakpoint medido, mais abaixo. */
.cabecalho__link, .menu__botao { white-space: nowrap; }

/* 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);
}
/* Quatro colunas de links, nao tres: o rodape e o mapa completo do site, e o
   Guia do Consumidor virou uma secao inteira que nao cabia nas outras. */
.rodape__topo { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-10); }
.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);
}
/* A ressalva e legal, nao editorial: fica abaixo da linha de copyright, num
   tom mais apagado, sem competir com os links. */
.rodape__nota {
  padding-bottom: var(--space-8);
  font: var(--type-caption); color: var(--text-secundario);
  opacity: .75; max-width: 92ch;
}
.rodape__nota p { margin: 0; }
/* O icone continua com 22px; o que cresce e a caixa em volta dele, para 44x44.
   Medido no celular em 16/09/2026: o link media 22x22, metade do alvo minimo.
   O `gap` cai a zero porque a folga agora vem do respiro proprio de cada
   caixa — com o gap antigo de 20px, dois icones ficariam a 42px de distancia
   visual. E o `margin-inline-start: -11px` devolve o icone ao alinhamento da
   coluna: sem ele a caixa de 44px empurraria o desenho 11px para a direita e
   ele sairia do prumo do logotipo e do texto acima. */
.rodape__social { display: flex; gap: 0; align-items: center; margin-inline-start: -11px; }
.rodape__social a {
  color: var(--text-secundario);
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}
.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; }

/* Cor solida, sem gradiente nem glow — e o botao mais repetido do site (51
   ocorrencias em 27 paginas), entao era o maior peso decorativo sozinho.
   --stonni-blue-500 e o mesmo ponto de partida que o gradiente antigo usava;
   branco sobre ele mede 5,47:1, acima de AA. O hover so escurece um passo
   (--stonni-blue-600, 7,68:1) — sem sombra colorida, sem levantar o botao. */
.btn--primaria {
  background: var(--stonni-blue-500); color: var(--text-on-brand);
}
.btn--primaria:hover { background: var(--stonni-blue-600); }

.btn--secundaria {
  background: var(--surface-card); color: var(--text-strong);
  border-color: var(--border-default);
}
.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;
  /* Tinta solida, no mesmo padrao das variantes sucesso/alerta/perigo abaixo
     (que ja sao rgba() chapado, nunca gradiente) — 23 usos no site, era o
     segundo componente que mais repetia o degrade da marca. */
  background: rgba(1, 169, 223, .14); 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(--stonni-blue-500); color: var(--white); border-color: transparent; }

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

/* Sem backdrop-filter aqui de proposito. Cartao parado sobre fundo solido nao
   tem nada atras para desfocar — o vidro so tem funcao no .cabecalho, que fica
   por cima de conteudo rolando. Nos cartoes era so decoracao repetida em toda
   secao do site, e virou o motivo nº1 de o site parecer gerado por template. */
.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);
  overflow: hidden; transition: var(--transition-card);
}
/* 🔴 ARMADILHA — NAO devolva `transform: var(--lift-card)` para as regras de
   :hover daqui nem do .produto. O token e translateY(-4px) e estava aplicado no
   PROPRIO elemento que recebe o :hover, entao o ponteiro parado na faixa de 4px
   da borda de baixo entrava em loop: hover -> sobe 4px -> o pixel sob o ponteiro
   nao e mais o cartao -> hover perdido -> desce -> hover de novo. Com a
   transicao de 240ms, ~2 ciclos por segundo: o cursor piscava entre mao e seta
   e o realce acendia e apagava SEM MEXER O MOUSE. Reclamado em 16/09/2026.
   Medido: elementFromPoint(centro, bottom-1) devolvia ARTICLE.cartao--interativo
   com o cartao parado e DIV.grade com o lift aplicado. O botao, com
   translateY(-1px), nao tem o defeito — 1px nao chega a vagar o pixel.
   O realce agora e box-shadow + border-color + background, que nao movem a
   caixa de hit. Se o lift voltar um dia, ele tem de ir num wrapper INTERNO,
   com a caixa externa parada. */

/* :focus-within em regra separada de proposito: se o navegador nao entender
   `:has()`, ele descarta a regra inteira em que o `:has()` aparece — e o
   realce de teclado nao pode cair junto. */
.cartao--interativo:focus-within {
  background: var(--surface-card-hover);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-lg);
}

/* O realce de mouse existe SO onde o cartao inteiro e clicavel, e `:has(titulo
   com link)` e exatamente a condicao do link esticado logo abaixo. Cartao que
   levanta e acende sem levar a lugar nenhum e promessa falsa: em 16/09/2026
   eram 1 na home ("Sem cadastro previo", sem link nenhum) e 15 no
   /ar-condicionado, que e catalogo e nao tem pagina por SKU. Onde `:has()`
   nao existe a regra cai inteira e nenhum cartao acende — o lado seguro. */
.cartao--interativo:has(:is(h2, h3, h4) > a):hover {
  background: var(--surface-card-hover);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-lg);
}

/* Link esticado. O ::after do link do titulo cobre o cartao inteiro, entao o
   clique e o `cursor: pointer` passam a valer na superficie toda. Antes disto
   uma malha de 144 pontos media 3% de area clicavel num cartao que levantava
   inteiro no hover: o link era so o texto do titulo.
   O <a> fica no titulo e nao no <article>: bloco com onClick nao e focavel nem
   anunciado por leitor de tela. Mesmo padrao de .produto__corpo h3 a.
   Nenhum cartao do site tem um segundo link dentro (medido), e por isso a capa
   nao engole nada. Se algum dia tiver, o segundo link precisa de
   `position: relative; z-index: 1` para ficar por cima desta capa. */
.cartao--interativo :is(h2, h3, h4) > a::after {
  content: ""; position: absolute; inset: 0;
}

/* Pe do cartao: o rotulo da acao com a seta. Nao e link, e `aria-hidden`, e os
   dois de proposito — quem clica e a capa esticada do titulo, e um segundo link
   com outro texto para o MESMO destino faria o leitor de tela anunciar o cartao
   duas vezes. Aqui ele e sinal visual, e so.
   Existe porque a superficie inteira do cartao passou a ser clicavel em
   16/09/2026 e o unico aviso disso era o titulo em ciano. */
.cartao__ir {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font: var(--type-caption); font-weight: var(--fw-semibold);
  color: var(--text-accent);
}
/* `margin-top: auto` cola o pe na base, e para isso o .atributo precisa de
   altura definida — ela vem da linha do grid, que estica todos os cartoes pelo
   mais alto. So os cartoes QUE TEM o pe mudam de display, via `:has()`: sem o
   escopo isto mexeria nos 23 cartoes interativos do site. Onde `:has()` nao
   existe, o pe fica logo depois do paragrafo em vez de colado na base — que e
   uma degradacao sem dano. */
.cartao--interativo:has(.cartao__ir) .atributo {
  height: 100%; display: flex; flex-direction: column; gap: var(--space-4);
}
.cartao--interativo:has(.cartao__ir) .cartao__ir { margin-top: auto; }
/* A seta anda 3px no hover. O transform e no <svg> de dentro, entao nao move a
   caixa de hit do cartao e nao pisca — ver a armadilha anotada acima. */
.cartao__ir svg { transition: transform var(--dur-fast) var(--ease-standard); }
.cartao--interativo:has(:is(h2, h3, h4) > a):hover .cartao__ir svg {
  transform: translateX(3px);
}

/* O hairline gradiente de 2px no topo e a assinatura do sistema — mas em
   paginas como /ar-condicionado e /rede-autorizada ele se repete em 6 a 8
   cartoes da mesma tela, e assinatura repetida em cada elemento deixa de ler
   como assinatura e passa a ler como textura de template. A opacidade mais
   baixa aqui mantem o fio visivel de perto sem ele competir por atencao
   quando aparece em bloco; `.faixa-cta` e `.depoimento`, que aparecem no
   maximo uma vez por pagina, continuam com o fio na forca cheia. */
.cartao--destaque::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: var(--border-w-thick);
  background: var(--grad-hairline); opacity: .55;
}
.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: cor solida por padrao. O gradiente (--grad-brand-text) e reservado
   ao h1 do hero — a UNICA linha por pagina que leva ele, mais abaixo em
   `.hero .destaque`. So na home ele aparecia em 9 titulos diferentes: repetir
   o recurso mais chamativo do sistema em cada secao apagava o efeito de
   assinatura e lia como gerado por template. */
.destaque { color: var(--text-accent); }

/* O unico lugar que ainda leva o gradiente de texto: o h1 do hero. */
.hero .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; }
/* Refeito em 16/09/2026: o Leo reclamou, e a reclamacao tinha medida por tras.
   A versao anterior era caixa de 52px com borda ciana de 1px solida e glifo de
   24px — o glifo ocupava 46% da caixa e sobrava um anel vazio em volta. Com a
   borda fechada, aquilo lia como BOTAO DESABILITADO, nao como icone.
   Tres mudancas, e nenhuma delas e gosto solto:
   - a borda sai. Icone nao e controle, e o unico contorno fechado do sistema
     esta nos botoes e nos campos — repetir o contorno aqui confundia os dois;
   - o raio vai de --radius-md (12px) para --radius-lg (18px), o mesmo raio dos
     cartoes. Em caixa de 52px, 12px e o meio de caminho que nao le nem como
     quadrado nem como pastilha — e pastilha comecaria em 26px;
   - o glifo vai de 24 para 28px no HTML (58% da caixa, contra 46%).
   O destino e a arte que o Leo aprovou: nos banners de referencia, em
   arte/referencia/, os icones das placas estao em quadrado macio SEM contorno.
   A fonte da decisao e ela, e nao a minha preferencia. */
.atributo__icone {
  width: 52px; height: 52px; border-radius: var(--radius-lg);
  display: grid; place-items: center;
  background: rgb(1 169 223 / .12);
  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) ------------------------- */

/* 🔴 `position: relative` e OBRIGATORIO aqui, e a falta dele nao dava erro
   nenhum. O link esticado do titulo (`.produto__corpo :is(h2,h3) a::after`) usa
   `position: absolute; inset: 0`, que resolve contra o ANCESTRAL POSICIONADO
   mais proximo. Com `.produto` estatico nao havia nenhum, e o `inset: 0` passou
   a medir o bloco de contencao inicial: em 16/09/2026 a capa invisivel do
   cartao "Ar-condicionado eletrico" da home media 1351x768 ancorada na origem
   do DOCUMENTO — ou seja, cobria o hero inteiro. Medido: elementFromPoint em
   (80,300), (400,380), (1200,200) e em cima do botao "Conheca a Stonni" (300,560)
   devolvia esse <a> com href="/ar-condicionado", e nao o hero. O botao primario
   da home levava para a pagina errada, sem erro em lugar nenhum.
   O `overflow: hidden` daqui NAO protege: ele so recorta descendente cujo bloco
   de contencao esteja dentro deste elemento, e o da capa estava fora. */
/* 🔴 `grid-template-columns: minmax(0, 1fr)` e OBRIGATORIO, e ficou faltando
   desde 14/09. Sem ele o grid cria uma coluna IMPLICITA `auto`, dimensionada
   pelo max-content do filho mais largo — que aqui e o TEXTO do corpo. Medido em
   16/09/2026, com os cinco cartoes da home em 219px: a placa de foto do
   ar-condicionado saiu com 257px, 40px mais larga que o proprio cartao, e as
   outras quatro com 217, 218 e 223 — cada uma do tamanho da frase dela. O
   `overflow: hidden` do cartao cortava o excedente sem avisar, entao o defeito
   aparecia como "a foto do primeiro esta com outro enquadramento".
   Ficou dormente por dois dias porque `.produto--largo`, no /produtos, declara
   as colunas dele a partir de 761px — e ali era o unico lugar onde `.produto`
   era usado. */
.produto {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); 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); }
/* Na pagina-mae da linha cada bloco ocupa a largura inteira do container. Com o
   empilhamento padrao a placa de foto ficaria com 744px de altura (1190 de
   largura vezes a razao 16/10); lado a lado ela cai para ~372. O minmax(0,1fr)
   nao e decorativo: sem ele a coluna do texto estica pela palavra mais longa. */
@media (min-width: 761px) {
  .produto--largo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: center;
  }
  .produto--largo .produto__corpo { padding: var(--space-10); }
}
/* Sem `transform` — ver a armadilha anotada em .cartao--interativo:hover.
   E o realce de mouse so vale quando o bloco inteiro e clicavel, o que aqui
   significa titulo com link (a mesma condicao do ::after esticado abaixo):
   no /ar-condicionado sao 15 cartoes de catalogo sem link nenhum, e no
   /produtos sao 5 blocos cujo link e o botao de acao, nao o bloco.
   `:focus-within` fica de fora do `:has()` porque ali ha, de fato, algo
   focavel dentro — e o realce mostra onde o teclado esta. */
.produto:focus-within {
  border-color: var(--border-accent); box-shadow: var(--shadow-lg);
}
.produto:has(:is(h2, h3) > a):hover {
  border-color: var(--border-accent); box-shadow: var(--shadow-lg);
}
.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);
}
/* O zoom da foto nao move a caixa de hit (o transform e no <img> de dentro),
   entao nao pisca — mas continua sendo sinal de "clique aqui", e por isso
   segue a mesma condicao do realce. */
.produto:has(:is(h2, h3) > a):hover .produto__midia img { transform: scale(1.04); }
/* `pointer-events: none` porque o selo e rotulo, nunca controle: com
   `z-index: 2` ele fica por cima da capa do link esticado e era o unico ponto
   dos 144 da malha que nao respondia ao clique no cartao da home. */
.produto__selo {
  position: absolute; top: var(--space-5); left: var(--space-5); z-index: 2;
  pointer-events: none;
}
.produto__corpo { display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8); }
.produto__corpo :is(h2, 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 ao cartao
   inteiro — e so funciona porque `.produto` e `position: relative`; ver a nota
   la em cima antes de mexer.
   `:is(h2, h3)` nos dois, e nao so `h3`, para casar exatamente com a condicao
   `:has(:is(h2,h3) > a)` que liga o realce de hover: se as duas divergirem, um
   cartao passa a acender no hover sem ter a area clicavel esticada — que foi o
   cartao de 6% medido na home em 16/09/2026. */
.produto__corpo :is(h2, h3) a { color: inherit; text-decoration: none; }
.produto__corpo :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
.produto__tagline { font: var(--type-body); color: var(--text-secundario); }
/* O pe cola na base tambem no cartao de produto. Mesmo mecanismo do
   .cartao--interativo: o corpo vira coluna flex, e para isso ele precisa de
   altura definida — ela vem do `grid-template-rows: auto 1fr` do .produto. */
.produto:has(.cartao__ir) .produto__corpo { display: flex; flex-direction: column; }
.produto .cartao__ir { margin-top: auto; padding-top: var(--space-4); }
.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);
}
/* Mesma tinta chapada do .selo, e nao mais o --grad-brand-soft: 30 usos em
   timelines pelo site — terceiro componente que mais repetia o degrade. */
.passo__numero {
  width: 44px; height: 44px; border-radius: var(--radius-pill);
  display: grid; place-items: center; flex: 0 0 auto;
  background: rgba(1, 169, 223, .14); 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(--surface-raised); border: var(--border-w-hair) solid var(--border-subtle);
  display: grid; gap: var(--space-5); justify-items: center; text-align: center;
}
/* --surface-raised e --ink-800 por padrao (mesmo valor, so trocado pelo
   token que responde a `.stonni-light`) — usada no final da home para o
   elemento claro desta secao. O glow, pensado pra fundo escuro, some nesse
   escopo: virar mancha de cor sobre fundo claro nao ajudava nada. */
.faixa-cta::before {
  content: ""; position: absolute; inset: 0; background: var(--grad-glow); opacity: .9;
}
.faixa-cta.stonni-light::before { opacity: 0; }
.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); }
/* Discreto de proposito. O "glow orb" borrado atras do titulo e o recurso
   decorativo mais repetido em landing page gerada por IA (v0, Lovable, Framer
   AI); em .28 de opacidade e 720px ele competia com o titulo por atencao em
   toda pagina do site. Aqui e so uma sugestao de luz no canto, nao um holofote. */
.hero__orbe {
  position: absolute; width: 560px; height: 560px; right: -18%; top: -32%;
  border-radius: 50%; background: var(--grad-brand);
  filter: blur(160px); opacity: .12;
}
.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; }

/* ---------- Hero da home: a foto da estrada ----------------------------- */
/* A arte chegou em 16/09/2026 e com ela o layout dos dois banners aprovados,
   que estao guardados em arte/referencia/ — texto a ESQUERDA, caminhao a
   direita no desktop; texto em cima, caminhao embaixo no celular.

   O que NAO voltou do layout anterior, e por que:

   - O logotipo dentro do hero. Ele existia quando o hero nao tinha imagem
     nenhuma. Com a foto, ele fica 40px abaixo do MESMO logotipo do cabecalho
     fixo, na mesma coluna da esquerda — e o h1 ja diz "Stonni". Saiu por
     repeticao, e os ~200px de altura que ele custava voltaram para o conteudo.
   - O texto centralizado. Centralizado sobre foto, a linha do olhar briga com
     o assunto da imagem; alinhado a esquerda, texto e caminhao dividem a tela
     em vez de disputarem o meio dela.

   O que ficou, e segue valendo: o titulo continua recebendo a largura que
   precisa. "ar-condicionado" a 74px mede 650px, e foi por nao caber num trilho
   de 564px que o h1 ja ocupou 7 linhas e 566px de altura aqui. Hoje a coluna
   tem teto em 640px e o titulo quebra em DUAS linhas declaradas
   (.hero__linha), o que tira a quebra do acaso da largura. */
.hero--marca { padding-top: var(--space-16); padding-bottom: var(--space-16); }

/* O fio ciano->indigo na borda de baixo e a assinatura do sistema, e aqui ele
   tambem costura o hero na secao seguinte. */
.hero__fio {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--border-w-thick); background: var(--grad-hairline);
}

.hero--marca .hero__interno {
  display: grid; grid-template-columns: minmax(0, 1fr);
  justify-items: start; text-align: left; gap: var(--space-10);
}
.hero--marca .hero__texto {
  justify-items: start; gap: var(--space-5);
  max-width: min(100%, 760px);
}
.hero--marca .hero__sub { max-width: 46ch; }
.hero__linha { display: block; }

/* 🔴 A fonte do h1 e a largura da coluna de texto sao UM PAR: o h1 quebra em
   linhas DECLARADAS (.hero__linha), e a mais longa tem de caber inteira na
   coluna, senao cada linha declarada quebra de novo e o h1 dobra de altura (ja
   aconteceu duas vezes, 15/09 e 16/09). QUEM MEXER NO TEXTO DO h1, NA COLUNA
   OU NESTE clamp TEM DE MEDIR DE NOVO: clonar a linha com white-space: nowrap
   e ler o getBoundingClientRect contra a largura da coluna.
   Medido em 28/09/2026: "Stonni, do Grupo Bononi:" = 12,26em; coluna de 599px
   a 1366. Teto = 599 / 12,26 = 48px; a 3,4vw a linha fica em ~570px. */
.hero--marca h1 { font-size: clamp(30px, 3.4vw, 48px); }
/* No celular a coluna e a tela menos o gutter de 24px: medido 327px em 375
   (e ~272px em 320). 6,8vw x 12,26em = 312px em 375 e 267px em 320. */
@media (max-width: 760px) { .hero--marca h1 { font-size: min(6.8vw, 34px); } }
.hero__link {
  font: var(--type-body-sm); color: var(--text-secundario);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Hero da home: montagem do portfolio ------------------------- */
/* Documento de reformulacao (28/09/2026): o hero apresenta a MARCA e o
   portfolio, nao um produto so — a foto do caminhao com o ar no teto saiu.
   Texto a esquerda, montagem das cinco linhas a direita; no celular a montagem
   desce para baixo do texto. Colunas sempre declaradas (armadilha "grid sem
   colunas" registrada no STATUS). */
.hero--portfolio .hero__interno {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: var(--space-12);
}
.hero--portfolio .hero__texto { max-width: none; }
.hero__montagem {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}
/* Ladrilho BRANCO: as fotos de catalogo sao recorte para fundo claro (mesmo
   motivo da vitrine, ver .produto--vitrine). Sem transform no :hover — ele
   foge de baixo do ponteiro e o cursor pisca (armadilha registrada). */
.hero__peca {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  aspect-ratio: 1; min-width: 0;
  padding: var(--space-3);
  background: var(--white); border-radius: var(--radius-panel);
  text-decoration: none;
  transition: box-shadow var(--dur-fast) ease;
}
.hero__peca--grande { grid-row: span 2; aspect-ratio: auto; }
.hero__peca img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.hero__peca-nome {
  margin-top: var(--space-2); text-align: center;
  font: var(--type-caption); font-weight: var(--fw-semibold); color: var(--text-strong);
}
.hero__peca:hover, .hero__peca:focus-visible { box-shadow: var(--focus-ring); }

@media (max-width: 900px) {
  .hero--portfolio .hero__interno { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
}
/* No celular, tres colunas deixam o ladrilho com ~100px e "Ar-condicionado"
   quebra no hifen. Duas colunas: o ar-condicionado na largura toda, as outras
   quatro em 2x2. */
@media (max-width: 520px) {
  .hero__montagem { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .hero__peca--grande { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 2 / 1; }
}

/* ---------- Banner "Seja um revendedor" (abertura da home) --------------- */
/* A arte traz titulo e botao desenhados: o banner inteiro e o link. Sem
   padding, a imagem ocupa a largura toda (sem cortar: o texto esta na arte). */
.banner-revenda { background: var(--ink-1000); }
.banner-revenda__link { display: block; max-width: 1672px; margin: 0 auto; }
.banner-revenda__link:focus-visible { outline: 3px solid var(--focus-ring-color, #01A9DF); outline-offset: -3px; }
.banner-revenda img { display: block; width: 100%; height: auto; }
.faixa-links { background: var(--ink-1000); padding-block: var(--space-8); border-bottom: var(--border-w-hair) solid var(--border-accent); }
.faixa-links__interno { display: flex; gap: var(--space-4); flex-wrap: wrap; justify-content: center; }
@media (max-width: 760px) { .faixa-links .btn { width: 100%; justify-content: center; } }

/* ---------- Motivos (Por que revender / Pos-venda da home) -------------- */
/* Icone + titulo curto + uma linha, sem cartao: o documento pede evitar
   sequencia de cards grandes com muito texto. */
.motivos {
  list-style: none; margin: 0 0 var(--space-10); padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--space-10);
}
.motivos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.motivo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-content: start; }
.motivo .atributo__icone { margin-bottom: var(--space-2); }
.motivo h3 { font: var(--type-body-lg); font-weight: var(--fw-semibold); color: var(--text-strong); margin: 0; }
.motivo p { font: var(--type-body-sm); color: var(--text-secundario); margin: 0; }
@media (max-width: 900px) {
  .motivos, .motivos--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .motivos, .motivos--4 { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

/* A regrinha curta sob a sobrancelha, como nos banners. Pseudo-elemento para
   nao pedir uma <span> vazia no HTML. */
.hero--marca .olho { position: relative; padding-bottom: var(--space-4); }
.hero--marca .olho::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 88px; height: var(--border-w-thick); background: var(--grad-brand);
}

/* 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; }

/* ---------- Destaque de produto da home --------------------------------- */
/* Bloco pequeno de proposito (documento: "area pequena e atualizavel"). A
   midia leva `.stonni-light` no HTML — painel claro por baixo do print do app,
   que e tela escura e sumiria sobre o fundo escuro da secao. */
.destaque-produto {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center; gap: var(--space-10);
  padding: var(--space-10);
  background: var(--surface-card); border-radius: var(--radius-panel);
  border: var(--border-w-hair) solid var(--border-subtle);
}
.destaque-produto__texto {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4); justify-items: start;
}
.destaque-produto__texto h2 { margin: 0; }
.destaque-produto__texto p { margin: 0; color: var(--text-secundario); max-width: 52ch; }
.destaque-produto__nota { font: var(--type-caption); }
.destaque-produto__midia {
  display: grid; justify-content: center;
  padding: var(--space-6);
  background: var(--surface-card); border-radius: var(--radius-panel);
}
.destaque-produto__midia img {
  width: 100%; max-width: 180px; height: auto; border-radius: 22px;
  border: var(--border-w-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 760px) {
  .destaque-produto { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); gap: var(--space-6); }
}

/* ---------- 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); }

/* `appearance: auto` deixava a setinha nativa do sistema — cinza, quadrada,
   sem nada a ver com o resto do campo em radius-control. `appearance: none`
   tira, e a seta some junto: o svg aqui e o mesmo glifo do `.menu__seta` do
   cabecalho, so reaproveitado, para o site ter UM chevron so, nao dois. */
.campo select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; }
/* O <select> fechado usa --text-strong (claro), certo pro fundo escuro do
   campo. Mas a LISTA aberta e renderizada pelo SO, com fundo branco na
   grande maioria dos navegadores/SOs (nao segue o dark theme da pagina) —
   sem isto, o texto claro herdado fica branco sobre branco, invisivel exceto
   na linha em hover. Reportado em 21/09/2026: só "Selecione" aparecia,
   as outras opções pareciam ter sumido (estavam lá, só ilegíveis). */
.campo select option { color: var(--text-strong-on-light); background: var(--white); }
.campo__select { position: relative; display: grid; }
.campo__seta {
  position: absolute; right: var(--space-5); top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}

/* ---------- 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); }

/* `accent-color` sozinho so pinta o preenchido; o desmarcado continua sendo
   o quadrado nativo do sistema operacional, que nao respeita border-radius
   nem a paleta do site. `appearance: none` tira o widget nativo por completo
   dos dois estados, e o check vira svg de verdade — o mesmo estilo (trago,
   nao preenchido) dos outros icones do site — mostrado por `:checked ~`. */
.checkbox { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.checkbox__caixa {
  position: relative; width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px;
  display: grid; place-items: center;
}
.checkbox__caixa input {
  appearance: none; -webkit-appearance: none; margin: 0;
  width: 20px; height: 20px; border-radius: var(--radius-xs);
  border: var(--border-w-hair) solid var(--border-default);
  background: var(--surface-card); transition: var(--transition-control);
}
.checkbox__caixa input:hover { border-color: var(--border-strong); }
.checkbox__caixa input:checked { background: var(--stonni-blue-500); border-color: var(--stonni-blue-500); }
.checkbox__marca {
  position: absolute; color: var(--white); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.checkbox__caixa input:checked ~ .checkbox__marca { opacity: 1; }
.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 -------------------------------------------------- */

/* Cinco faixas (marca + 4 colunas) so cabem com o container inteiro. Abaixo
   disso o rotulo mais longo comeca a quebrar em tres linhas. */
@media (max-width: 1160px) {
  .rodape__topo { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-10); }

  /* 4px a menos entre os itens compra folga onde ela e escassa — remedido em
     28/09/2026, ver o comentario vermelho abaixo do breakpoint de 1100px. */
  .cabecalho__nav { gap: var(--space-5); }
}

/* 🔴 Este numero e o unico ponto de quebra do menu, e ele NAO e estetico: e o
   ponto medido em que o nav horizontal para de caber. Remedido em 28/09/2026
   apos a diretriz de reformulacao da Home trocar "Guia" por "Seja Revendedor"
   e promover "Contato" a item de topo: mesmo com um dropdown a menos, os dois
   rotulos novos sao mais longos e quebram em duas linhas, e o documento passou
   a transbordar (overflow do documento, nao a borda do nav) ja em 1075px —
   ~110px acima do limiar antigo de 966px. O piso medido sem quebra ficou entre
   1075px (transborda 12px) e 1100px (0px), com a folga de gap reduzido do
   breakpoint de 1160px acima ja ativa. 1000px SUBIU para 1100px, com folga.
   Remedido de novo no mesmo dia, depois de sair o "Controle Stonni" e de os
   rotulos ganharem white-space: nowrap (antes "A Stonni" e "Onde comprar"
   quebravam em duas linhas e o menu so PARECIA caber): transborda 85px em
   1000, 35px em 1050, 10px em 1075 e 0px em 1100. Ficou 1120px, com folga.
   Se um item for acrescentado ou um rotulo crescer, MEDIR de novo — senao a
   faixa entre o real e o declarado transborda em silencio, que foi exatamente
   o que aconteceu aqui.
   O JS nao repete este valor: ele pergunta ao CSS se o hamburguer esta visivel. */
@media (max-width: 1120px) {
  :root { --section-y: var(--space-20); --section-y-compact: var(--space-16); }

  .rodape__topo { grid-template-columns: 1fr 1fr; gap: var(--space-10); }

  /* 🔴 `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; }

  /* A regra acima so cobria botao dentro de .hero__acoes, e nem todo botao longo
     mora la: "Abrir chamado com a assistencia" fica solto dentro de um
     .secao-titulo--esq e media 352px numa faixa de 327px. Estourava 1px para
     fora do documento — pouco o bastante para nao chamar atencao e o bastante
     para dar rolagem lateral na home. Aqui a permissao de quebrar vale para
     QUALQUER botao; a largura inteira continua sendo decisao de quem agrupa. */
  .btn { max-width: 100%; white-space: normal; }

  /* No celular o hero da marca precisa caber num iPhone de 812px de altura com
     os DOIS botoes visiveis. Medido: faltavam 43px, e o segundo botao ficava
     cortado. Respiro menor e topo menor devolvem a altura — e desde 16/09 o
     logotipo saiu do hero, o que sozinho devolveu ~200px. */
  .hero--marca { padding-top: var(--space-10); }
  .hero--marca .hero__interno { gap: var(--space-6); }

  /* As tres placas viram uma coluna. Lado a lado em 375px elas ficariam com
     ~100px de largura cada, e o rotulo de duas palavras quebraria em quatro
     linhas. */
  .hero__fatos { width: 100%; }
  .hero__fatos li { width: 100%; }

  /* O subtitulo cai para o corpo normal. Em --type-body-lg ele vinha com ~44px
     de entrelinha; as tres placas ja custaram altura, e o que se ganha aqui e o
     que mantem os dois botoes acima da dobra de 812px. */
  .hero--marca .hero__sub { font: var(--type-body); }

  /* `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 BRANCO — 255,255,255 medido no
   pixel do arquivo, nao "um claro qualquer". Por isso a placa e --white e
   nao --ink-050: os dois parecem quase iguais lado a lado no editor, mas
   --ink-050 (243,246,250) tem um tanto de azul que --white nao tem, e essa
   diferenca de ~1-2% de luminancia e o suficiente para desenhar um contorno
   visivel em volta da foto — reclamado em 18/09/2026 numa captura real do
   site no ar. Forcar fundo escuro atras da foto deixaria uma moldura branca
   dura; a placa BRANCA, exata, e o que faz a moldura desaparecer de vez. */

.produto__midia--claro { background: var(--white); }
.produto__midia--claro img { object-fit: contain; padding: var(--space-5); }

/* ---------- Vitrine de produto (linha de produtos da home) -------------- */
/* Inspirado no jeito Apple de apresentar produto: a foto E o design, sem
   moldura de cartao em volta. Os cinco usam `.stonni-light` — nao por gosto,
   e porque a foto de catalogo (`.produto__midia--claro`, acima) e recorte
   feito para fundo claro. Sem isso, o cartao escuro padrao criaria uma
   "ilha branca" atras do produto: a placa clara ficando visivel como caixa
   dentro do cartao, em vez do produto flutuar direto no fundo. Com o cartao
   inteiro claro, a placa e o fundo do cartao sao a MESMA cor — a moldura
   desaparece. So essa secao leva o tratamento; o catalogo em /produtos e
   /ar-condicionado continua com `.produto` padrao, onde a borda ajuda a
   separar 15 itens densos numa grade, nao 5 espacados. */
.produto--vitrine {
  background: var(--white); border: none; box-shadow: none;
}
.produto--vitrine .produto__midia { aspect-ratio: 1; }
.produto--vitrine .produto__midia--claro img { padding: var(--space-5); }
.produto--vitrine .produto__corpo { padding: var(--space-3) var(--space-5) var(--space-5); }
@media (max-width: 620px) {
  .produto--vitrine .produto__midia { aspect-ratio: 4 / 3; }
}
/* O realce padrao de `.produto:hover` reintroduziria borda e sombra so no
   hover — inconsistente com "sem moldura" o resto do tempo. Aqui o unico
   sinal de clicavel e o zoom de 1.04 na propria foto, que .produto ja tem. */
.produto--vitrine:has(:is(h2, h3) > a):hover,
.produto--vitrine:focus-within {
  border-color: transparent; box-shadow: none;
}

.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 --------------------------------------------- */

/* Ponte de hierarquia: sem isto, o <h1> da secao de distribuidores (ver
   onde-comprar.html) e seguido direto pelos <h3 class="uf__titulo"> de cada
   estado — pulo de nivel que o lint de build acusa. Visualmente discreto de
   proposito (mesmo estilo eyebrow do .olho): e uma etiqueta separando a
   busca da lista completa, nao um titulo de destaque igual ao H1. */
.titulo-lista-distribuidores {
  font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--text-accent);
  margin-top: var(--space-8);
}

.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; }

/* ---------- Banner de cookies / consentimento do GA4 (site.js) ----------- */
.aviso-cookies {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface-raised);
  border-top: var(--border-w-hair) solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  padding: var(--space-5) 0;
}
.aviso-cookies__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.aviso-cookies__texto { margin: 0; font: var(--type-body-sm); color: var(--text-body); max-width: 640px; }
.aviso-cookies__texto a { color: var(--text-accent); }
.aviso-cookies__acoes { display: flex; gap: var(--space-3); flex-shrink: 0; }
@media (max-width: 560px) { .aviso-cookies__acoes { width: 100%; } .aviso-cookies__acoes .btn { flex: 1 1 0; } }

/* ---------- Busca de distribuidor por endereco (site.js) ----------------- */
.busca-distribuidor { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; }
.busca-distribuidor .campo { flex: 1 1 280px; margin: 0; }
.busca-distribuidor__resultado { margin-top: var(--space-6); }

/* Resultado da busca por endereco — lista PROPRIA, nao reaproveita .uf__lista:
   aquela e o indice completo (604 nomes, precisa ser compacta); esta e o
   resultado que a pessoa acabou de pedir (ate ~40 itens), com espaco pra
   respirar. A acao por linha chegou a ser "Ver no mapa", removida em 21/09
   porque a coordenada e a do centro da cidade (o dado de origem nao tem
   endereco) — virou telefone (link tel:), que existe de verdade por
   distribuidor em vez de repetir o mesmo pino pra cidade inteira. */
.busca-distribuidor__lista { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.busca-distribuidor__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius-card);
  background: var(--surface-card);
  border: var(--border-w-hair) solid var(--border-subtle);
  flex-wrap: wrap;
}
.busca-distribuidor__item-info { display: grid; gap: 2px; }
.busca-distribuidor__item-info strong { font: var(--type-body-sm); font-weight: var(--fw-semibold); color: var(--text-strong); }
.busca-distribuidor__item-info span { font: var(--type-caption); color: var(--text-secundario); }

/* ---------- 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(--stonni-blue-500); 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: rgba(1, 169, 223, .14); 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); }