/* ===== 00-tokens.css ===== */
/* ==========================================================================
   AUTO ELÉTRICA LAÉRCIO — DESIGN TOKENS
   Fonte de verdade para cor, tipografia, espaçamento, containers, z-index
   e transições. Nenhum valor "solto" deve aparecer fora deste arquivo.

   Identidade preservada do site atual do cliente (autoeletricalaercio.com.br):
     dourado  #FCD62B   -> --voltage-500   (elipse do logotipo)
     vermelho #C42B18   -> --ember-500      (letras "LAÉRCIO" e barra)
     preto    #000000   -> base do logotipo
     branco   #FFFFFF   -> texto "AUTO ELÉTRICA"
   Valores medidos pixel a pixel no logotipo oficial. Tons derivados foram
   criados apenas para contraste, hierarquia e superfície — a matiz nunca muda.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --------------------------------------------------------------------
     1. COR — escalas
     -------------------------------------------------------------------- */

  /* Grafite / superfícies escuras (derivadas do #232323 do cliente) */
  --ink-950: #070809;
  --ink-900: #0B0C0E;
  --ink-850: #101216;
  --ink-800: #15181D;
  --ink-700: #1C2027;
  --ink-600: #232323; /* cor original do cliente */
  --ink-500: #2E2E2E; /* cor original do cliente */
  --ink-400: #3A4048;

  /* Superfícies claras (papel) */
  --bone-50:  #FBFBF8;
  --bone-100: #F4F4EF;
  --bone-200: #E7E7DF;
  --bone-300: #D5D5CA;

  /* Amarelo de marca — "voltagem" */
  --voltage-300: #FFF2B8;
  --voltage-400: #FFE573;
  --voltage-500: #FCD62B; /* dourado do logotipo */
  --voltage-600: #E3BE1B;
  --voltage-700: #A58B12; /* grafismos sobre superfícies claras (3,21:1) */
  --voltage-800: #826D0E; /* TEXTO sobre superfícies claras (4,89:1) */

  /* Gradiente da elipse do logotipo — usado em faixas e realces */
  --voltage-gradient: linear-gradient(135deg, #FFEC89 0%, #FED966 46%, #FCD424 100%);

  /* Vermelho de marca — usado com parcimônia (alerta / urgência) */
  --ember-400: #E84734;
  --ember-500: #C42B18; /* vermelho do logotipo */
  --ember-600: #A82010;
  --ember-700: #82180B; /* legível sobre superfícies claras */

  /* Verde de ação (WhatsApp é o canal real de atendimento do cliente) */
  --leaf-500: #25D366;
  --leaf-600: #1EA952;
  --leaf-700: #157F3D;

  /* --------------------------------------------------------------------
     2. COR — papéis semânticos (tema escuro é o padrão)
     -------------------------------------------------------------------- */
  --bg:            var(--ink-900);
  --bg-elevated:   var(--ink-800);
  --bg-sunken:     var(--ink-950);
  --surface:       var(--ink-850);
  --surface-hover: var(--ink-700);

  --fg:         #F2F3F1;
  --fg-strong:  #FFFFFF;
  --fg-muted:   #A7ADB4;
  --fg-subtle:  #767D85;

  --accent:          var(--voltage-500);
  --accent-strong:   var(--voltage-400);
  --accent-contrast: var(--ink-950); /* texto sobre o amarelo */

  --border:        color-mix(in srgb, var(--fg) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--fg) 24%, transparent);

  --focus-ring: var(--voltage-400);

  /* Inversão para seções claras — aplicada via [data-surface="light"] */
  --light-bg:        var(--bone-50);
  --light-surface:   #FFFFFF;
  --light-fg:        #14161A;
  --light-fg-muted:  #4C535B;
  --light-border:    color-mix(in srgb, #14161A 12%, transparent);

  /* --------------------------------------------------------------------
     3. TIPOGRAFIA
     Escala modular fluida. Razão ~1.200 em telas pequenas e ~1.333
     (quarta justa) em telas grandes, para ganhar contraste editorial
     no desktop sem estourar o mobile.
     -------------------------------------------------------------------- */
  --font-sans: "Rubik", "Rubik Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Archivo", "Archivo Fallback", "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --step--2: clamp(0.75rem, 0.73rem + 0.11vw, 0.82rem);
  --step--1: clamp(0.84rem, 0.80rem + 0.19vw, 0.96rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.40vw, 1.50rem);
  --step-2:  clamp(1.42rem, 1.26rem + 0.78vw, 2.00rem);
  --step-3:  clamp(1.70rem, 1.42rem + 1.40vw, 2.66rem);
  --step-4:  clamp(1.80rem, 1.36rem + 2.20vw, 3.35rem);
  --step-5:  clamp(2.00rem, 1.34rem + 3.30vw, 4.40rem);
  --step-6:  clamp(2.15rem, 1.05rem + 5.50vw, 5.60rem);

  --lh-tight: 1.02;
  --lh-snug: 1.14;
  --lh-heading: 1.18;
  --lh-body: 1.65;
  --lh-relaxed: 1.75;

  --tracking-display: -0.03em;
  --tracking-heading: -0.018em;
  --tracking-body: 0em;
  --tracking-eyebrow: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --measure: 68ch;      /* largura confortável de leitura */
  --measure-tight: 46ch;

  /* --------------------------------------------------------------------
     4. ESPAÇAMENTO — progressão Fibonacci (px): 2 4 8 13 21 34 55 89 144 233
     Harmonia por proporção, não por números arbitrários.
     -------------------------------------------------------------------- */
  --space-3xs: 0.125rem; /*   2px */
  --space-2xs: 0.25rem;  /*   4px */
  --space-xs:  0.5rem;   /*   8px */
  --space-sm:  0.8125rem;/*  13px */
  --space-md:  1.3125rem;/*  21px */
  --space-lg:  2.125rem; /*  34px */
  --space-xl:  3.4375rem;/*  55px */
  --space-2xl: 5.5625rem;/*  89px */
  --space-3xl: 9rem;     /* 144px */

  /* Ritmo vertical de seção — fluido entre 55px e 144px */
  --section-y: clamp(3.4375rem, 2.2rem + 6.2vw, 9rem);
  --section-y-tight: clamp(2.125rem, 1.4rem + 3.6vw, 5.5625rem);

  /* --------------------------------------------------------------------
     5. LAYOUT
     -------------------------------------------------------------------- */
  --container: 78.75rem;      /* 1260px */
  --container-narrow: 48.75rem;
  --container-wide: 92.5rem;  /* 1480px */
  --gutter: clamp(1.25rem, 0.9rem + 1.75vw, 4rem);

  --golden: 1.618;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --border-hairline: 1px;

  /* --------------------------------------------------------------------
     6. MOVIMENTO
     -------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);

  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 520ms;
  --dur-reveal: 820ms;

  /* --------------------------------------------------------------------
     7. Z-INDEX — escala única e documentada
     -------------------------------------------------------------------- */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-menu: 300;
  --z-skip: 400;

  /* --------------------------------------------------------------------
     8. ALTURAS E ALVOS DE TOQUE
     -------------------------------------------------------------------- */
  --header-h: 4.25rem;      /* 68px no mobile */
  --header-h-lg: 5.5rem;    /* 88px no desktop */
  --tap-min: 2.75rem;       /* 44px — mínimo de alvo de toque */

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --shadow-md: 0 10px 30px -12px rgb(0 0 0 / 0.55);
  --shadow-lg: 0 30px 70px -30px rgb(0 0 0 / 0.7);
}

/* Superfície clara: reescreve apenas os papéis semânticos, nunca as escalas. */
[data-surface="light"] {
  color-scheme: light;
  --bg: var(--light-bg);
  --bg-elevated: var(--light-surface);
  --bg-sunken: var(--bone-100);
  --surface: var(--light-surface);
  --surface-hover: var(--bone-100);
  --fg: var(--light-fg);
  --fg-strong: #000000;
  --fg-muted: var(--light-fg-muted);
  --fg-subtle: #6B7280;
  --border: var(--light-border);
  --border-strong: color-mix(in srgb, #14161A 26%, transparent);
  --accent: var(--voltage-800);      /* amarelo puro não tem contraste sobre papel */
  --accent-strong: var(--voltage-700);
  --accent-contrast: var(--ink-950);
  --focus-ring: var(--ink-900);
}

/* ===== 01-base.css ===== */
/* ==========================================================================
   BASE — reset moderno, tipografia, acessibilidade, scrollbar
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa o header fixo ao navegar por âncoras */
  scroll-padding-top: calc(var(--header-h) + var(--space-md));
  /* Impede que qualquer filho estoure a largura da viewport */
  overflow-x: clip;
}

@media (min-width: 64rem) {
  html { scroll-padding-top: calc(var(--header-h-lg) + var(--space-md)); }
}

body {
  min-height: 100svh;
  margin: 0;
  background-color: var(--ink-900);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

input, button, textarea, select { font: inherit; color: inherit; }

/* Um <svg> com viewBox e sem width/height cresce até preencher o container —
   foi o que estourou o formato de botões e selos. Este padrão de
   especificidade zero (:where) dá a todo ícone inline o tamanho do texto;
   qualquer componente que precise de outro tamanho continua sobrescrevendo. */
svg:where(:not([width]):not([height])) {
  inline-size: 1em;
  block-size: 1em;
  flex: none;
}

p, li, figcaption { text-wrap: pretty; overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
  overflow-wrap: break-word;
  /* Impede hifenização forçada em títulos, mas permite quebra de palavras
     muito longas em telas de 320px. */
  hyphens: manual;
}

h1 { font-size: var(--step-5); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--step-4); line-height: var(--lh-snug); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }

ul, ol { padding: 0; list-style: none; }

hr { border: 0; border-top: var(--border-hairline) solid var(--border); }

:target { scroll-margin-top: calc(var(--header-h) + var(--space-md)); }

/* --------------------------------------------------------------------------
   Fontes — Rubik (identidade do cliente) + Archivo (display editorial).
   Auto-hospedadas em /fonts (variáveis, subconjunto latin — cobre todo o
   português) e pré-carregadas no <head>: nenhum terceiro no caminho crítico.

   Fallbacks com métricas MEDIDAS contra a Arial (largura média de um texto
   em português e ascent/descent reais de cada fonte). Há uma face por peso
   porque o negrito precisa cair na Arial Bold de verdade — com uma face só,
   o navegador engorda a Arial regular e as larguras não batem, o que fazia
   os títulos mudarem de número de linhas quando a webfont chegava.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("/fonts/rubik-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rubik Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  font-weight: 400;
  size-adjust: 102.9%;
  ascent-override: 90.4%;
  descent-override: 24.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Rubik Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold");
  font-weight: 700;
  size-adjust: 102.5%;
  ascent-override: 90.7%;
  descent-override: 24.4%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
  font-weight: 400;
  size-adjust: 100%;
  ascent-override: 88%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold");
  font-weight: 700;
  size-adjust: 99%;
  ascent-override: 88.9%;
  descent-override: 21.2%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   Acessibilidade
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

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

.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-skip);
  padding: var(--space-sm) var(--space-md);
  background: var(--voltage-500);
  color: var(--ink-950);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-base) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --------------------------------------------------------------------------
   Scrollbar — discreta, com a identidade do cliente.
   Só no desktop: no mobile o comportamento nativo é preservado.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-400) var(--ink-950);
  }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: var(--ink-950); }
  ::-webkit-scrollbar-thumb {
    background: var(--ink-400);
    border: 3px solid var(--ink-950);
    border-radius: var(--radius-pill);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--voltage-600); }
}

::selection { background: var(--voltage-500); color: var(--ink-950); }

/* --------------------------------------------------------------------------
   Movimento reduzido — obrigatório.
   Nada de conteúdo pode depender de animação para existir.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .marquee__track { animation: none !important; transform: none !important; }
  .marquee__toggle { display: none; } /* parada, não há o que pausar */
}

/* Impressão: conteúdo legível, sem artefatos de tela. */
@media print {
  body { background: #fff; color: #000; }
  .site-header, .menu, .marquee, .hero__scroll { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===== 02-layout.css ===== */
/* ==========================================================================
   LAYOUT — containers, ritmo de seção, grids editoriais
   Tudo fluido: clamp / minmax / grid. Media queries só onde a hierarquia
   realmente muda, nunca para "consertar" o mobile depois.
   ========================================================================== */

.container {
  width: 100%;
  /* Guarda estrutural: impede que um filho com min-content grande estoure
     o track do grid/flex pai e crie scroll horizontal. */
  min-inline-size: 0;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--bg);
  color: var(--fg);
}
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-block-start: 0; }

/* Cabeçalho de seção: eyebrow + título + apoio -------------------------- */
.section-head {
  display: grid;
  gap: var(--space-md);
  margin-block-end: var(--space-xl);
}
.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.section-head__eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 4vw, 2.75rem);
  block-size: 2px;
  background: currentColor;
  flex: none;
}
.section-head__title { max-width: 20ch; }
.section-head__lead {
  max-width: var(--measure);
  color: var(--fg-muted);
  font-size: var(--step-1);
  line-height: var(--lh-relaxed);
}

/* No desktop o cabeçalho vira duas colunas na proporção áurea. */
@media (min-width: 60rem) {
  .section-head--split {
    grid-template-columns: 1.618fr 1fr;
    align-items: end;
    column-gap: var(--space-xl);
  }
  .section-head--split .section-head__eyebrow { grid-column: 1 / -1; }
  .section-head--split .section-head__lead { padding-block-end: var(--space-xs); }
}

/* Grid editorial genérico ------------------------------------------------ */
.grid {
  display: grid;
  gap: var(--space-lg);
}
.grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
}
.grid--auto-sm {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
}

/* Bloco editorial texto + mídia na proporção áurea ----------------------- */
.editorial {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
@media (min-width: 60rem) {
  .editorial { grid-template-columns: 1.618fr 1fr; column-gap: var(--space-2xl); }
  .editorial--reverse { grid-template-columns: 1fr 1.618fr; }
  .editorial--reverse > :first-child { order: 2; }
  .editorial--reverse > :last-child { order: 1; }
}

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-md); }
.prose p { color: var(--fg-muted); line-height: var(--lh-relaxed); }
.prose strong { color: var(--fg); font-weight: var(--weight-semibold); }

/* Régua fina entre blocos */
.rule { block-size: 1px; background: var(--border); border: 0; }

/* Utilitários de fluxo --------------------------------------------------- */
.stack > * + * { margin-block-start: var(--flow, var(--space-md)); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}


/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--step--1);
  color: var(--fg-subtle);
}
.breadcrumb a,
.breadcrumb span[aria-current] {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  padding-inline: 0.15rem;
  color: inherit;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span[aria-current] { color: var(--fg); }

/* --------------------------------------------------------------------------
   Utilitários de espaçamento — apoiados nos mesmos tokens, sem números soltos
   -------------------------------------------------------------------------- */
.u-mt-sm { margin-block-start: var(--space-sm); }
.u-mt-md { margin-block-start: var(--space-md); }
.u-mt-lg { margin-block-start: var(--space-lg); }
.u-mt-xl { margin-block-start: var(--space-xl); }
.u-mb-md { margin-block-end: var(--space-md); }
.u-mb-lg { margin-block-end: var(--space-lg); }
.u-mb-xl { margin-block-end: var(--space-xl); }
.u-mb-0  { margin-block-end: 0; }
.u-m-0   { margin: 0; }
.u-measure-sm { max-width: 36ch; }

/* Primeira seção de uma página interna precisa limpar o header fixo. */
.section--page-top { padding-block-start: calc(var(--header-h) + var(--section-y)); }
@media (min-width: 64rem) {
  .section--page-top { padding-block-start: calc(var(--header-h-lg) + var(--section-y)); }
}

/* Centralização de conteúdo curto (404, CTA final de página interna) */
.u-center-content {
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  text-align: center;
}

/* Página de erro — conteúdo curto centralizado na viewport */
.page-error {
  min-block-size: 100svh;
  display: grid;
  place-content: center;
}

/* ===== 03-components.css ===== */
/* ==========================================================================
   COMPONENTES
   Cada bloco é independente e usa apenas tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botões — alvo mínimo de 44px em qualquer viewport
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--voltage-500);
  --btn-fg: var(--ink-950);
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-block-size: var(--tap-min);
  padding: 0.75rem clamp(1.1rem, 3vw, 1.75rem);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-hairline) solid var(--btn-bd);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn { align-self: center; block-size: fit-content; }
.btn:hover { background: var(--voltage-400); }
.btn:active { transform: translateY(1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--border-strong);
}
.btn--ghost:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }

.btn--whats { --btn-bg: var(--leaf-500); --btn-fg: #062B14; }
.btn--whats:hover { background: var(--leaf-600); color: #fff; }

.btn--lg { font-size: var(--step-0); padding: 1rem clamp(1.4rem, 4vw, 2.25rem); }
.btn--block { inline-size: 100%; }

.btn__icon { flex: none; inline-size: 1.15em; block-size: 1.15em; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-block-end: var(--border-hairline) solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    block-size var(--dur-base) var(--ease-out);
  padding-block-start: env(safe-area-inset-top, 0px);
}
@media (min-width: 64rem) {
  .site-header { block-size: var(--header-h-lg); }
}
.site-header[data-scrolled="true"] {
  background: color-mix(in srgb, var(--ink-950) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-block-end-color: var(--border);
}
.site-header__inner {
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Marca tipográfica original (o site atual não possui logotipo próprio) */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  color: var(--fg-strong);
  min-block-size: var(--tap-min);
}
/* Logotipo oficial. O arquivo é um "chip" de cantos arredondados sobre preto:
   some nas superfícies escuras do site e garante legibilidade quando o header
   está transparente sobre a foto do hero. */
.brand__logo {
  flex: none;
  block-size: 2.35rem;
  inline-size: auto;
  border-radius: var(--radius-md);
}
@media (min-width: 64rem) { .brand__logo { block-size: 3rem; } }
.brand--footer .brand__logo { block-size: 3.25rem; }

.brand__tag {
  display: none;
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--voltage-500);
  padding-inline-start: 0.6rem;
  border-inline-start: 1px solid var(--border);
  line-height: 1.1;
}
@media (min-width: 30rem) { .brand__tag { display: inline-block; } }

/* Navegação desktop */
.nav { display: none; }
@media (min-width: 64rem) {
  .nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
  .nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    font-size: var(--step--1);
    font-weight: var(--weight-medium);
    color: var(--fg-muted);
    text-decoration: none;
    transition: color var(--dur-base) var(--ease-out);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 1.1rem;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 2px;
    background: var(--voltage-500);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .nav__link:hover, .nav__link:focus-visible { color: var(--fg-strong); }
  .nav__link:hover::after, .nav__link:focus-visible::after { transform: scaleX(1); }
  .nav__link[aria-current="page"] { color: var(--fg-strong); }
  .nav__link[aria-current="page"]::after { transform: scaleX(1); }
}

.header__cta { display: none; }
@media (min-width: 64rem) { .header__cta { display: inline-flex; } }

/* Botão hambúrguer */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  padding: 0;
  background: transparent;
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--fg-strong);
  cursor: pointer;
}
@media (min-width: 64rem) { .menu-toggle { display: none; } }
.menu-toggle__bars { position: relative; inline-size: 1.125rem; block-size: 0.75rem; }
.menu-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.menu-toggle__bars span:nth-child(1) { inset-block-start: 0; }
.menu-toggle__bars span:nth-child(2) { inset-block-start: 50%; translate: 0 -50%; }
.menu-toggle__bars span:nth-child(3) { inset-block-end: 0; }
/* Menu aberto: o header (com o botão que vira "X") fica acima do painel —
   sem isso o painel o cobria e, no toque, não havia como fechar o menu. */
.site-header:has(.menu-toggle[aria-expanded="true"]) { z-index: calc(var(--z-menu) + 1); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Menu mobile — painel inteiro, navegável por toque e por teclado
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  grid-template-rows: 1fr auto;
  background: var(--ink-950);
  padding-block: calc(var(--header-h) + env(safe-area-inset-top, 0px)) calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  translate: 0 -1.5rem;
  transition:
    opacity var(--dur-base) var(--ease-out),
    translate var(--dur-base) var(--ease-out),
    visibility 0s linear var(--dur-base);
}
.menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
@media (min-width: 64rem) { .menu { display: none; } }

.menu__nav { display: grid; align-content: center; justify-content: stretch; gap: var(--space-2xs); }
.menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-block-size: 3.25rem;
  padding-block: var(--space-xs);
  border-block-end: var(--border-hairline) solid var(--border);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
  text-decoration: none;
}
.menu__link span {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: var(--weight-regular);
  letter-spacing: 0.1em;
  color: var(--voltage-500);
}
.menu__foot {
  display: grid;
  gap: var(--space-sm);
  align-content: start;   /* impede que o botão estique na faixa livre */
  justify-items: stretch;
}
.menu__meta {
  font-size: var(--step--1);
  color: var(--fg-subtle);
  line-height: var(--lh-body);
}
/* Um WhatsApp por unidade — cada oficina atende pelo próprio número */
.menu__units { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.menu__unit { justify-content: flex-start; text-align: start; }
.menu__unit b { font-weight: var(--weight-bold); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  min-block-size: 100svh;
  padding-block: calc(var(--header-h) + var(--space-2xl)) var(--space-xl);
  background: var(--ink-950);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 64rem) {
  .hero { padding-block: calc(var(--header-h-lg) + var(--space-2xl)) var(--space-2xl); }
}
/* Em telas baixas e deitadas, a altura mínima cede para não engolir o conteúdo */
@media (max-height: 34rem) and (orientation: landscape) {
  .hero { min-block-size: auto; padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-xl); }
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Enquadramento diferente por breakpoint: no mobile a foto é vertical e o
     ponto de interesse fica acima do centro, atrás do texto. */
  object-position: 62% 38%;
}
@media (min-width: 48rem) { .hero__media img { object-position: 60% 50%; } }

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ink-950) 74%, transparent) 0%,
      color-mix(in srgb, var(--ink-950) 34%, transparent) 34%,
      color-mix(in srgb, var(--ink-950) 84%, transparent) 76%,
      var(--ink-950) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--ink-950) 70%, transparent) 0%,
      color-mix(in srgb, var(--ink-950) 10%, transparent) 70%);
}

.hero__inner { position: relative; display: grid; gap: var(--space-lg); }

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--voltage-500);
}
.hero__eyebrow i { font-style: normal; color: var(--fg-subtle); }

.hero__title {
  max-width: 15ch;
  color: var(--fg-strong);
  font-size: var(--step-6);
}
.hero__title em {
  font-style: normal;
  color: var(--voltage-500);
}

.hero__lead {
  max-width: 46ch;
  font-size: var(--step-1);
  line-height: var(--lh-relaxed);
  color: color-mix(in srgb, var(--fg) 88%, transparent);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__actions .btn { flex: 1 1 14rem; }
@media (min-width: 30rem) { .hero__actions .btn { flex: 0 1 auto; } }

.hero__facts {
  display: grid;
  max-inline-size: 44rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
  gap: var(--space-md);
  margin-block-start: var(--space-sm);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline) solid var(--border);
}
.hero__fact { display: grid; gap: 0.15rem; }
.hero__fact dt {
  order: 2;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.hero__fact dd {
  order: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}

.hero__scroll {
  display: none;
  position: absolute;
  inset-block-end: var(--space-md);
  inset-inline-end: var(--gutter);
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-decoration: none;
}
@media (min-width: 64rem) and (min-height: 40rem) { .hero__scroll { display: inline-flex; } }
.hero__scroll::after {
  content: "";
  inline-size: 1px;
  block-size: 2.75rem;
  background: linear-gradient(180deg, var(--voltage-500), transparent);
}

/* --------------------------------------------------------------------------
   Marquee / faixa de provas
   -------------------------------------------------------------------------- */
.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  padding-block: var(--space-md);
  background: var(--voltage-gradient), var(--voltage-500);
  color: var(--ink-950);
  border-block: var(--border-hairline) solid var(--ink-950);
  user-select: none;
}
.marquee__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-lg);
  padding-inline-end: var(--space-lg);
  min-inline-size: max-content;
  margin: 0;
  padding-inline-start: 0;
  list-style: none;
  animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee:has([data-marquee-pause]:checked) .marquee__track { animation-play-state: paused; }

/* Controle de pausa (WCAG 2.2.2) — fixo na borda direita, sobre a faixa */
.marquee__toggle {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-raised);
  display: grid;
  place-items: center;
  inline-size: var(--tap-min);
  min-block-size: var(--tap-min);
  background: var(--voltage-500);
  border-inline-start: var(--border-hairline) solid var(--ink-950);
  color: var(--ink-950);
  cursor: pointer;
}
.marquee__toggle:has(:focus-visible) { outline: 2px solid var(--ink-950); outline-offset: -4px; }
.marquee__toggle svg { inline-size: 1.1rem; block-size: 1.1rem; }
.marquee__toggle-icon { display: grid; grid-area: 1 / 1; }
.marquee__toggle-icon--play,
.marquee__toggle:has(:checked) .marquee__toggle-icon--pause { display: none; }
.marquee__toggle:has(:checked) .marquee__toggle-icon--play { display: grid; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.marquee__item::after {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--ember-500);
}
@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* Em telas pequenas a faixa anda mais devagar para não competir com o scroll */
@media (max-width: 47.9375rem) {
  .marquee__track { animation-duration: 30s; }
}

/* --------------------------------------------------------------------------
   Lista indexada de serviços — leitura editorial, sem depender de hover
   -------------------------------------------------------------------------- */
.service-index { border-block-start: var(--border-hairline) solid var(--border); }
.service-index__row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-end: var(--border-hairline) solid var(--border);
  transition: background-color var(--dur-base) var(--ease-out);
}
.service-index__num {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.service-index__name {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
  line-height: var(--lh-snug);
}
@media (min-width: 48rem) {
  .service-index__row {
    grid-template-columns: 4.5rem 1fr;
    padding-inline: var(--space-sm);
  }
  .service-index__row:hover { background: color-mix(in srgb, var(--fg) 5%, transparent); }
}
@media (min-width: 64rem) {
  .service-index { columns: 2; column-gap: var(--space-2xl); }
  .service-index__row { break-inside: avoid; }
}

/* Cartões de grupo (Consertos / Prevenção) ------------------------------- */
.group-card {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  padding: var(--space-lg);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
}
.group-card__title {
  font-size: var(--step-2);
  color: var(--fg-strong);
}
.group-card__list { display: grid; gap: var(--space-xs); }
.group-card__list li {
  position: relative;
  padding-inline-start: var(--space-md);
  color: var(--fg-muted);
  line-height: var(--lh-body);
}
.group-card__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 0.5rem;
  block-size: 2px;
  background: var(--accent);
}

/* --------------------------------------------------------------------------
   Cartões de unidade
   -------------------------------------------------------------------------- */
.unit-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.unit {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .unit:hover { border-color: var(--border-strong); transform: translateY(-3px); }
}
.unit:focus-within { border-color: var(--accent); }

.unit__media {
  position: relative;
  /* Os posts do cliente são quadrados e trazem texto sobreposto; qualquer
     recorte cortaria endereço e telefone. O slot acompanha a arte. */
  aspect-ratio: 1 / 1;
  background: var(--ink-800);
  overflow: hidden;
}
.unit__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.unit__badge {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  padding: 0.3rem 0.6rem;
  background: var(--voltage-500);
  color: var(--ink-950);
  border-radius: var(--radius-sm);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.unit__body {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg);
}
.unit__city {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
  line-height: var(--lh-snug);
}
.unit__city small {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-block-end: 0.35rem;
}
.unit__address { color: var(--fg-muted); font-size: var(--step--1); line-height: var(--lh-body); font-style: normal; }
.unit__contacts { display: grid; gap: var(--space-2xs); margin-block-start: var(--space-2xs); }
.unit__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--tap-min);
  font-size: var(--step--1);
  color: var(--fg);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.unit__contact:hover { color: var(--accent); text-decoration: underline; }
.unit__contact svg { flex: none; inline-size: 1rem; block-size: 1rem; color: var(--accent); }
.unit__actions { margin-block-start: var(--space-xs); }

/* --------------------------------------------------------------------------
   Faixa de citação editorial
   -------------------------------------------------------------------------- */
.pullquote {
  display: grid;
  gap: var(--space-md);
}
.pullquote__text {
  font-family: var(--font-display);
  font-size: var(--step-4);
  /* A medida fica no elemento que carrega a fonte grande: 'ch' é relativo ao
     font-size do próprio elemento, não do contêiner. */
  max-width: 16ch;
  font-weight: var(--weight-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  color: var(--fg-strong);
  text-wrap: balance;
}
.pullquote--wide .pullquote__text { font-size: var(--step-3); max-width: 24ch; }
.pullquote__meta {
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.quote-block {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-inline-start: 3px solid var(--accent);
  background: color-mix(in srgb, var(--fg) 4%, transparent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.quote-block blockquote {
  margin: 0;
  font-size: var(--step-1);
  line-height: var(--lh-relaxed);
  color: var(--fg);
}
.quote-block figcaption { font-size: var(--step--1); color: var(--fg-subtle); }
.quote-block figcaption b { color: var(--fg); font-weight: var(--weight-semibold); }

/* --------------------------------------------------------------------------
   Linha do tempo
   -------------------------------------------------------------------------- */
.timeline { display: grid; gap: 0; }
.timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  padding-block: var(--space-md);
  border-block-end: var(--border-hairline) solid var(--border);
}
.timeline__item:first-child { border-block-start: var(--border-hairline) solid var(--border); }
.timeline__year {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: 0.08em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.2em;
}
.timeline__body { display: grid; gap: var(--space-2xs); }
.timeline__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
  line-height: var(--lh-snug);
}
.timeline__text { color: var(--fg-muted); font-size: var(--step--1); line-height: var(--lh-body); }
@media (min-width: 48rem) {
  .timeline__item { grid-template-columns: 7rem 1fr; column-gap: var(--space-lg); padding-block: var(--space-lg); }
}

/* --------------------------------------------------------------------------
   Cartões de informação (horários, socorro, prêmio)
   -------------------------------------------------------------------------- */
.info-card {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--surface);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-lg);
  block-size: 100%;
}
.info-card--accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.info-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}
.info-card__title svg { flex: none; inline-size: 1.1em; block-size: 1.1em; color: var(--accent); }
.info-card p { color: var(--fg-muted); font-size: var(--step--1); line-height: var(--lh-body); }

.hours { display: grid; gap: var(--space-sm); }
.hours__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  padding-block: var(--space-xs);
  border-block-end: var(--border-hairline) solid var(--border);
  font-size: var(--step--1);
}
.hours__row:last-child { border-block-end: 0; }
.hours__label { color: var(--fg); font-weight: var(--weight-medium); }
.hours__value { color: var(--fg-muted); text-align: end; font-variant-numeric: tabular-nums; }

/* Selo Top of Mind */
.award {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
}
.award svg { inline-size: 1.15rem; block-size: 1.15rem; color: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   Figura com máscara (reveal editorial)
   -------------------------------------------------------------------------- */
.figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
}
.figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--landscape { aspect-ratio: 3 / 2; }
.figure--wide { aspect-ratio: 16 / 9; }
.figure--square { aspect-ratio: 1 / 1; }
.figure__caption {
  margin-block-start: var(--space-xs);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
/* As figuras verticais guardam posts com texto: manter 4:5 em toda largura,
   porque qualquer mudança de proporção recortaria a arte. */

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
.cta {
  background: var(--voltage-gradient), var(--voltage-500);
  color: var(--ink-950);
}
.cta__inner { display: grid; gap: var(--space-lg); }
.cta__title { color: var(--ink-950); max-width: 18ch; }
.cta__lead { max-width: 52ch; color: color-mix(in srgb, var(--ink-950) 78%, transparent); font-size: var(--step-1); line-height: var(--lh-relaxed); }
.cta__list {
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.cta__card {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md);
  background: var(--ink-950);
  color: #fff;
  border-radius: var(--radius-md);
  text-decoration: none;
  min-block-size: var(--tap-min);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.cta__card:hover { background: var(--ink-800); transform: translateY(-2px); }
.cta__card b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
}
.cta__card span { font-size: var(--step--1); color: var(--voltage-500); }
.cta__card em { font-style: normal; font-size: var(--step--1); color: #C9CDD2; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-950);
  color: var(--fg);
  padding-block: var(--section-y-tight) var(--space-lg);
  padding-block-end: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
  border-block-start: var(--border-hairline) solid var(--border);
}
.footer__grid {
  display: grid;
  gap: var(--space-xl);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: 1.618fr 1fr 1fr; column-gap: var(--space-xl); }
}
.footer__title {
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-block-end: var(--space-sm);
}
.footer__list { display: grid; gap: var(--space-2xs); }
.footer__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
  font-size: var(--step--1);
  color: var(--fg-muted);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.footer__link:hover { color: var(--voltage-500); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  align-items: center;
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-md);
  border-block-start: var(--border-hairline) solid var(--border);
  font-size: var(--step--2);
  color: var(--fg-subtle);
}

/* Botão flutuante de WhatsApp — não bloqueia conteúdo, respeita safe-area */
.whats-fab {
  position: fixed;
  inset-block-end: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  inset-inline-end: var(--space-md);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background: var(--leaf-500);
  color: #062B14;
  box-shadow: var(--shadow-md);
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  translate: 0 0.75rem;
  transition: opacity var(--dur-base) var(--ease-out), translate var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.whats-fab[data-visible="true"] { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.whats-fab svg { inline-size: 1.6rem; block-size: 1.6rem; }
@media (min-width: 64rem) { .whats-fab { inline-size: 3.5rem; block-size: 3.5rem; } }


/* Botão fantasma sobre a faixa amarela do CTA */
.btn--on-accent {
  --btn-bg: transparent;
  --btn-fg: var(--ink-950);
  --btn-bd: color-mix(in srgb, var(--ink-950) 38%, transparent);
}
.btn--on-accent:hover { background: color-mix(in srgb, var(--ink-950) 10%, transparent); }

/* --------------------------------------------------------------------------
   Prova social — capturas de avaliações reais publicadas pelo cliente
   -------------------------------------------------------------------------- */
.proof-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: start;
}
.proof-figure {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
  border: var(--border-hairline) solid var(--border);
}
.proof-figure img { inline-size: 100%; block-size: auto; }

/* --------------------------------------------------------------------------
   Seção de auto-socorro — destaque para a parceria Terra Guinchos
   -------------------------------------------------------------------------- */
.rescue {
  position: relative;
  background: var(--ink-950);
}
.rescue__grid {
  display: grid;
  gap: var(--space-xl);
}
/* Proporção áurea: texto 1.618, placa 1 */
@media (min-width: 60rem) {
  .rescue__grid { grid-template-columns: 1.618fr 1fr; align-items: start; column-gap: var(--space-xl); }
}
/* No celular a placa não precisa ocupar a tela inteira */
.rescue__figure { max-inline-size: 26rem; }
@media (min-width: 60rem) { .rescue__figure { max-inline-size: none; } }
.rescue__cta { margin-block-start: var(--space-lg); }
@media (min-width: 30rem) { .rescue__cta .btn { inline-size: auto; } }
.rescue__cards { display: grid; gap: var(--space-md); align-content: start; }

/* Passos numerados */
.steps {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--fg-muted);
  font-size: var(--step--1);
  line-height: var(--lh-body);
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  color: var(--voltage-500);
}

/* --------------------------------------------------------------------------
   Seletor de unidade — <dialog> aberto pelos botões genéricos de WhatsApp
   -------------------------------------------------------------------------- */
.picker {
  inline-size: min(100% - 2 * var(--space-md), 30rem);
  max-inline-size: none;
  max-block-size: calc(100dvh - 2 * var(--space-md));
  margin: auto;
  padding: 0;
  border: var(--border-hairline) solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--ink-900);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
  overscroll-behavior: contain;
}
.picker::backdrop { background: color-mix(in srgb, var(--ink-950) 76%, transparent); }
html:has(.picker[open]) { overflow: hidden; }

.picker__panel {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
}
@media (min-width: 30rem) { .picker__panel { padding: var(--space-lg); } }
.picker__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.picker__title { font-size: var(--step-2); color: var(--fg-strong); padding-block-start: var(--space-2xs); }
.picker__close {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  margin: calc(-1 * var(--space-xs)) calc(-1 * var(--space-xs)) 0 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-muted);
  cursor: pointer;
}
.picker__close:hover { background: var(--surface-hover); color: var(--fg-strong); }
.picker__close svg { inline-size: 1.25rem; block-size: 1.25rem; }
.picker__lead { margin-block-start: calc(-1 * var(--space-xs)); color: var(--fg-muted); font-size: var(--step--1); }
.picker__list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-block-size: var(--tap-min);
  padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-sm);
  border: var(--border-hairline) solid var(--border);
  border-radius: var(--radius-md);
  background: var(--ink-850);
  color: var(--fg);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.picker__option:hover { background: var(--ink-800); border-color: var(--leaf-500); }
.picker__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--leaf-500);
  color: #062B14;
}
.picker__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }
.picker__text { display: grid; gap: 0.1rem; min-inline-size: 0; }
.picker__label {
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--voltage-500);
}
.picker__text b {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-strong);
}
.picker__text em { font-style: normal; font-size: var(--step--1); color: var(--fg-muted); }

/* ===== 04-motion.css ===== */
/* ==========================================================================
   MOVIMENTO — reveals editoriais
   Regra: só transform e opacity (nunca propriedades que causam reflow).
   O conteúdo NUNCA depende da animação: sem JS, a classe .js não é aplicada
   e todos os elementos ficam visíveis.
   ========================================================================== */

/* Estado inicial só existe quando o JS está ativo. */
.js [data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--dur-reveal) var(--ease-editorial),
    transform var(--dur-reveal) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal="up"]    { transform: translate3d(0, 1.75rem, 0); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal="left"]  { transform: translate3d(-1.5rem, 0, 0); }
.js [data-reveal="right"] { transform: translate3d(1.5rem, 0, 0); }
/* Mask reveal: cortina que sobe + leve zoom da imagem.
   Nada de clip-path no elemento observado — isso zera a área pintada e o
   IntersectionObserver deixa de disparar em alguns navegadores. */
.js [data-reveal="mask"] { opacity: 1; position: relative; }
.js [data-reveal="mask"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg);
  transform-origin: bottom center;
  transition: transform var(--dur-reveal) var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
  pointer-events: none;
}
.js [data-reveal="mask"] > img,
.js [data-reveal="mask"] > picture > img {
  transform: scale(1.07);
  transition: transform 1100ms var(--ease-editorial);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal="lines"] { transform: translate3d(0, 0.9rem, 0); }

.js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.js [data-reveal="mask"].is-revealed::after { transform: scaleY(0); }
.js [data-reveal="mask"].is-revealed > img,
.js [data-reveal="mask"].is-revealed > picture > img { transform: none; }

/* Títulos revelados linha a linha (as linhas são criadas pelo JS) --------- */
/* Enquanto as fontes não chegam, o título espera invisível (mas ocupando o
   espaço). O JS limita essa espera a 1,2 s; sem JS a classe nunca existe. */
.split-pending [data-split] { opacity: 0; }
.line-mask { display: block; overflow: hidden; }
.js .line-mask > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--dur-reveal) var(--ease-editorial);
  transition-delay: var(--line-delay, 0ms);
}
.js .line-mask.is-revealed > span { transform: translate3d(0, 0, 0); }

/* Parallax leve — apenas ponteiro fino, telas altas e sem reduced-motion.
   O JS só ativa quando essas condições são verdadeiras. */
.parallax-layer { will-change: transform; }

/* Contador de anos */
.counter { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Redução no mobile: distâncias menores, sem escala, transições mais curtas.
   Animação nunca pode competir com o scroll por toque.
   -------------------------------------------------------------------------- */
@media (max-width: 47.9375rem) {
  .js [data-reveal] { transition-duration: 560ms; }
  .js [data-reveal="up"]    { transform: translate3d(0, 0.9rem, 0); }
  .js [data-reveal="left"],
  .js [data-reveal="right"] { transform: translate3d(0, 0.9rem, 0); }
  .js [data-reveal="mask"] > img { transform: scale(1.03); }
  .js [data-reveal] { transition-delay: min(var(--reveal-delay, 0ms), 120ms); }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .line-mask > span,
  .js [data-reveal="mask"] > img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js [data-reveal="mask"]::after { display: none !important; }
}