/* =========================================================================
   MOTORISTAS EM SANTOS — site.css · Material Design 3 (Fase 3b · 2026-09-28)
   Camadas: md.ref (paleta/tipografia) → md.sys (papéis) → tokens de componente.
   Esquema: claro apenas (o tema escuro da Fase 3 foi retirado a pedido).
   Regras de uso dos papéis:
     · `secondary` (#5e4310) e `on-surface-variant` (#3a4552) só sobre surface*;
       sobre `inverse-surface` o acento é `inverse-primary` e o texto `inverse-on-surface`.
     · brass como PREENCHIMENTO = secondary-container / on-secondary-container;
       brass como TEXTO, ÍCONE ou BORDA sobre fundo escuro = inverse-primary.
     · Preenchimentos claros (secondary-container, tertiary-container) têm borda
       `outline` de 2px: é ela que garante o limite 3:1 (WCAG 1.4.11).
     · Cards (Fase 3b): "filled card" — surface-container-highest + linha `outline-variant`
       de 1px (3,5:1), canto medium, sem sombra, não interativos; o link fica DENTRO do card
       (`.card-link`). Sobre inverse-surface o card usa a variante tonal navy-20.
       Exceção: `.faq-card` mantém o outlined de 2px da Fase 3.
     · Links de conteúdo (.card-link, .inline-link, .hero-aside-link) seguem o menu superior:
       amarelo `nav` (escurecido para 5,2:1 sobre superfícies claras; puro sobre navy), vermelho
       em hover/ativo/visitado e o símbolo ↗ (route-symbol) como indicador. Navegação (app bar,
       breadcrumb, rodapé) mantém o padrão próprio.
   ========================================================================= */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2-variations"), url("../../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================================
   1. TOKENS
   ========================================================================= */
:root {
  color-scheme: light;

  /* ---------- md.ref.palette — valores de origem (tons ≈ L*) ---------- */
  --md-ref-palette-navy-10: #0f172a;        /* legado --midnight */
  --md-ref-palette-navy-90: #dee2f2;        /* derivado: matiz navy, L* 90 */
  --md-ref-palette-navy-20: #232b42;        /* derivado: matiz navy, L* 18 — card sobre inverse-surface */
  --md-ref-palette-ochre-30: #5e4310;       /* legado --brass-deep */
  --md-ref-palette-ochre-85: #dfd17c;       /* legado --brass */
  --md-ref-palette-whatsapp-15: #0b2e22;    /* legado --wa-ink */
  --md-ref-palette-whatsapp-75: #25d366;    /* legado --wa-green */
  --md-ref-palette-neutral-100: #ffffff;
  --md-ref-palette-neutral-99: #fdfbf7;     /* legado --cream */
  --md-ref-palette-neutral-96: #f9f4ec;     /* derivado: matiz/croma da paper, L* 96,5 */
  --md-ref-palette-neutral-95: #f5f0e8;     /* legado --paper */
  --md-ref-palette-neutral-92: #ece8e0;     /* derivado, L* 92 */
  --md-ref-palette-neutral-90: #e7e2da;     /* derivado, L* 90 */
  --md-ref-palette-neutral-87: #ded9d2;     /* derivado, L* 87 */
  --md-ref-palette-neutral-30: #3a4552;     /* legado --ink-muted */
  --md-ref-palette-neutral-50: #7a7570;     /* derivado, L* 50 — linha dos cards claros (3,5:1 sobre neutral-90) */
  --md-ref-palette-neutral-60: #8d909b;     /* derivado, L* 60 — linha dos cards sobre navy (4,4:1 sobre navy-20) */
  --md-ref-palette-neutral-0: #000000;
  --md-ref-palette-nav-yellow: #feda15;     /* legado --menu-cta */
  --md-ref-palette-nav-yellow-40: #6b5b00;  /* derivado: mesmo matiz, L* 39 — link sobre superfícies claras (5,2:1) */
  --md-ref-palette-nav-grey-97: #f5f5f4;    /* legado --menu-surface */
  --md-ref-palette-nav-grey-10: #1c1c1c;    /* legado --menu-ink */
  --md-ref-palette-error-40: #b3261e;       /* baseline M3 — vermelho dos links em hover/ativo/visitado (5,1:1 sobre neutral-90) */
  --md-ref-palette-error-70: #ec928e;       /* baseline M3 — idem sobre navy (6,1:1 sobre navy-20) */
  --md-ref-palette-error-90: #f9dedc;
  --md-ref-palette-error-10: #410e0b;

  /* ---------- md.sys.color — papéis semânticos (esquema claro) ---------- */
  --md-sys-color-primary: var(--md-ref-palette-navy-10);
  --md-sys-color-on-primary: var(--md-ref-palette-neutral-99);
  --md-sys-color-primary-container: var(--md-ref-palette-navy-90);
  --md-sys-color-on-primary-container: var(--md-ref-palette-navy-10);

  --md-sys-color-secondary: var(--md-ref-palette-ochre-30);
  --md-sys-color-on-secondary: var(--md-ref-palette-neutral-99);
  --md-sys-color-secondary-container: var(--md-ref-palette-ochre-85);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-navy-10);

  --md-sys-color-tertiary: var(--md-ref-palette-whatsapp-15);
  --md-sys-color-on-tertiary: var(--md-ref-palette-neutral-99);
  --md-sys-color-tertiary-container: var(--md-ref-palette-whatsapp-75);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-whatsapp-15);

  --md-sys-color-error: var(--md-ref-palette-error-40);
  --md-sys-color-on-error: var(--md-ref-palette-neutral-100);
  --md-sys-color-error-container: var(--md-ref-palette-error-90);
  --md-sys-color-on-error-container: var(--md-ref-palette-error-10);

  --md-sys-color-surface: var(--md-ref-palette-neutral-99);
  --md-sys-color-on-surface: var(--md-ref-palette-navy-10);
  --md-sys-color-surface-variant: var(--md-ref-palette-neutral-90);
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-30);
  --md-sys-color-surface-dim: var(--md-ref-palette-neutral-87);
  --md-sys-color-surface-bright: var(--md-ref-palette-neutral-99);
  --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral-100);
  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral-96);
  --md-sys-color-surface-container: var(--md-ref-palette-neutral-95);
  --md-sys-color-surface-container-high: var(--md-ref-palette-neutral-92);
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-90);
  --md-sys-color-background: var(--md-ref-palette-neutral-99);
  --md-sys-color-on-background: var(--md-ref-palette-navy-10);

  --md-sys-color-outline: var(--md-ref-palette-navy-10);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-50);   /* linha de 1px dos cards */

  --md-sys-color-inverse-surface: var(--md-ref-palette-navy-10);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-99);
  --md-sys-color-inverse-primary: var(--md-ref-palette-ochre-85);

  --md-sys-color-surface-tint: var(--md-ref-palette-navy-10);
  --md-sys-color-scrim: var(--md-ref-palette-neutral-0);
  --md-sys-color-shadow: var(--md-ref-palette-neutral-0);

  /* Cor customizada M3 "nav": paleta exclusiva da navegação (botão do menu e painel) */
  --md-custom-color-nav: var(--md-ref-palette-nav-yellow);
  --md-custom-color-on-nav: var(--md-ref-palette-nav-grey-10);
  --md-custom-color-nav-container: var(--md-ref-palette-nav-grey-97);
  --md-custom-color-on-nav-container: var(--md-ref-palette-nav-grey-10);

  /* Cores customizadas M3 (Fase 3b): card sobre inverse-surface e links internos dos cards */
  --md-custom-color-inverse-surface-container: var(--md-ref-palette-navy-20);
  --md-custom-color-inverse-outline-variant: var(--md-ref-palette-neutral-60);
  --md-custom-color-link: var(--md-ref-palette-nav-yellow-40);
  --md-custom-color-link-state: var(--md-ref-palette-error-40);
  --md-custom-color-inverse-link: var(--md-ref-palette-nav-yellow);
  --md-custom-color-inverse-link-state: var(--md-ref-palette-error-70);

  /* ---------- md.sys.state — camadas de estado ---------- */
  --md-sys-state-hover-state-layer-opacity: .08;
  --md-sys-state-focus-state-layer-opacity: .10;
  --md-sys-state-pressed-state-layer-opacity: .10;
  --md-sys-state-dragged-state-layer-opacity: .16;
  --md-sys-state-disabled-container-opacity: .12;
  --md-sys-state-disabled-content-opacity: .38;

  /* ---------- md.ref.typeface ---------- */
  --md-ref-typeface-brand: "Atkinson Hyperlegible Next", sans-serif;
  --md-ref-typeface-plain: var(--md-ref-typeface-brand);
  --md-ref-typeface-weight-regular: 400;
  --md-ref-typeface-weight-medium: 500;   /* sem consumidor: o legado usa 400/700 */
  --md-ref-typeface-weight-bold: 700;

  /* ---------- md.sys.typescale — 15 papéis × {font, size, line-height, weight, tracking}
     Piso tipográfico do projeto: nenhum papel abaixo de 1rem (16px). ---------- */
  --md-sys-typescale-display-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-large-size: clamp(2.75rem, 6vw, 4.75rem);
  --md-sys-typescale-display-large-line-height: 1.05;
  --md-sys-typescale-display-large-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-display-large-tracking: -.015em;

  --md-sys-typescale-display-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-medium-size: clamp(2.25rem, 5vw, 4rem);
  --md-sys-typescale-display-medium-line-height: 1.1;
  --md-sys-typescale-display-medium-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-display-medium-tracking: -.015em;

  --md-sys-typescale-display-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-display-small-size: clamp(2.25rem, 4.2vw, 3.6rem);
  --md-sys-typescale-display-small-line-height: 1.05;
  --md-sys-typescale-display-small-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-display-small-tracking: -.015em;

  --md-sys-typescale-headline-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-large-size: clamp(2.2rem, 4vw, 3.55rem);
  --md-sys-typescale-headline-large-line-height: 1.1;
  --md-sys-typescale-headline-large-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-headline-large-tracking: -.015em;

  --md-sys-typescale-headline-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-medium-size: clamp(1.75rem, 3vw, 2.5rem);
  --md-sys-typescale-headline-medium-line-height: 1.15;
  --md-sys-typescale-headline-medium-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-headline-medium-tracking: -.01em;

  --md-sys-typescale-headline-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-headline-small-size: 1.45rem;
  --md-sys-typescale-headline-small-line-height: 1.2;
  --md-sys-typescale-headline-small-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-headline-small-tracking: 0;

  --md-sys-typescale-title-large-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-large-size: clamp(1.35rem, 2vw, 1.8rem);
  --md-sys-typescale-title-large-line-height: 1.25;
  --md-sys-typescale-title-large-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-title-large-tracking: 0;

  --md-sys-typescale-title-medium-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-medium-size: 1.2rem;
  --md-sys-typescale-title-medium-line-height: 1.15;
  --md-sys-typescale-title-medium-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-title-medium-tracking: -.02em;

  --md-sys-typescale-title-small-font: var(--md-ref-typeface-brand);
  --md-sys-typescale-title-small-size: 1.1875rem;
  --md-sys-typescale-title-small-line-height: 1.25;
  --md-sys-typescale-title-small-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-title-small-tracking: 0;

  --md-sys-typescale-body-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-large-size: clamp(1.1rem, 1.5vw, 1.25rem);
  --md-sys-typescale-body-large-line-height: 1.6;
  --md-sys-typescale-body-large-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-large-tracking: 0;

  --md-sys-typescale-body-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-medium-size: clamp(1rem, .96rem + .18vw, 1.125rem);
  --md-sys-typescale-body-medium-line-height: 1.6;
  --md-sys-typescale-body-medium-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-medium-tracking: 0;

  --md-sys-typescale-body-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-body-small-size: 1rem;
  --md-sys-typescale-body-small-line-height: 1.6;
  --md-sys-typescale-body-small-weight: var(--md-ref-typeface-weight-regular);
  --md-sys-typescale-body-small-tracking: 0;

  --md-sys-typescale-label-large-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-large-size: 1.125rem;
  --md-sys-typescale-label-large-line-height: 1.15;
  --md-sys-typescale-label-large-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-label-large-tracking: 0;

  --md-sys-typescale-label-medium-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-medium-size: 1rem;
  --md-sys-typescale-label-medium-line-height: 1.2;
  --md-sys-typescale-label-medium-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-label-medium-tracking: 0;

  --md-sys-typescale-label-small-font: var(--md-ref-typeface-plain);
  --md-sys-typescale-label-small-size: 1rem;
  --md-sys-typescale-label-small-line-height: 1.2;
  --md-sys-typescale-label-small-weight: var(--md-ref-typeface-weight-bold);
  --md-sys-typescale-label-small-tracking: .06em;

  /* ---------- md.sys.shape — escala oficial (D1: família "caixa" em corner-small) ---------- */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* ---------- md.sys.elevation — níveis 0–5 (site plano: nível 0 salvo menu e skip link) ---------- */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px 0 rgb(0 0 0 / .30), 0 1px 3px 1px rgb(0 0 0 / .15);
  --md-sys-elevation-level2: 0 1px 2px 0 rgb(0 0 0 / .30), 0 2px 6px 2px rgb(0 0 0 / .15);
  --md-sys-elevation-level3: 0 1px 3px 0 rgb(0 0 0 / .30), 0 4px 8px 3px rgb(0 0 0 / .15);
  --md-sys-elevation-level4: 0 2px 3px 0 rgb(0 0 0 / .30), 0 6px 10px 4px rgb(0 0 0 / .15);
  --md-sys-elevation-level5: 0 4px 4px 0 rgb(0 0 0 / .30), 0 8px 12px 6px rgb(0 0 0 / .15);

  /* ---------- md.sys.motion ---------- */
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);

  /* ---------- Extensões (não normativas no M3) ---------- */
  --md-custom-space-1: .25rem;
  --md-custom-space-2: .5rem;
  --md-custom-space-3: .75rem;
  --md-custom-space-4: 1rem;
  --md-custom-space-5: 1.25rem;
  --md-custom-space-6: 1.5rem;
  --md-custom-space-7: 1.75rem;
  --md-custom-space-8: 2rem;
  --md-custom-space-10: 2.5rem;
  --md-custom-space-12: 3rem;
  --md-custom-space-16: 4rem;
  --md-custom-space-section: clamp(4.5rem, 8vw, 7.5rem);
  --md-custom-space-hero: clamp(3.5rem, 6vw, 5rem);
  --md-custom-space-card: clamp(1.5rem, 4vw, 2.5rem);

  --md-custom-stroke: 2px;            /* borda "outlined" */
  --md-custom-stroke-thin: 1px;       /* linha delimitadora dos cards */
  --md-custom-stroke-strong: 4px;
  --md-custom-target-min: 3rem;       /* 48px — alvo de toque */
  --md-custom-target-menu: 3.25rem;   /* 52px — botão do menu */
  --md-custom-focus-width: 3px;       /* indicador de foco M3: 3dp */
  --md-custom-focus-offset: 2px;      /* 2dp */

  /* Tokens de componente */
  --md-focus-ring-color: var(--md-sys-color-on-surface);                    /* anel de foco, redefinido por superfície */
  --md-comp-button-filled-outline-color: var(--md-sys-color-outline);       /* borda do botão preenchido (verde WhatsApp) */
}


/* =========================================================================
   2. BASE
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 11rem; }
body { margin: 0; background: var(--md-sys-color-background); color: var(--md-sys-color-on-background); font-family: var(--md-sys-typescale-body-medium-font); font-size: var(--md-sys-typescale-body-medium-size); font-weight: var(--md-sys-typescale-body-medium-weight); line-height: var(--md-sys-typescale-body-medium-line-height); letter-spacing: var(--md-sys-typescale-body-medium-tracking); }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
svg { display: block; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .footer-wordmark { overflow-wrap: break-word; }

/* Indicador de foco (WCAG 2.4.7 / 2.4.11): 3px, offset 2px, cor por superfície */
*:focus-visible { outline: var(--md-custom-focus-width) solid var(--md-focus-ring-color); outline-offset: var(--md-custom-focus-offset); }
[tabindex="-1"]:focus-visible { outline: var(--md-custom-stroke-strong) solid var(--md-focus-ring-color); outline-offset: calc(-1 * var(--md-custom-stroke-strong)); }

/* Primitivas: "outlined" (chips, caixas de ícone, FAQ), botões (pílula), cards preenchidos (linha 1px) e superfícies inversas */
.icon-box, .chip, .faq-card { border: var(--md-custom-stroke) solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); }
.skip-link, .button { border: var(--md-custom-stroke) solid var(--md-sys-color-inverse-primary); border-radius: var(--md-sys-shape-corner-full); }
.modality-card, .service-card, .info-card, .link-card, .check-list--card, .note { border: var(--md-custom-stroke-thin) solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-sys-color-surface-container-highest); }
.step-card, .area-card, .hero-aside { border: var(--md-custom-stroke-thin) solid var(--md-custom-color-inverse-outline-variant); border-radius: var(--md-sys-shape-corner-medium); background: var(--md-custom-color-inverse-surface-container); color: var(--md-sys-color-inverse-on-surface); }
.steps-grid, .area-grid, .footer-grid ul { display: grid; margin: 0; padding: 0; list-style: none; }
.hero, .section--midnight, .final-cta { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }

/* =========================================================================
   3. TOP APP BAR (site-header) — container inverse-surface, elevação 0
   ========================================================================= */
.skip-link { position: fixed; left: var(--md-custom-space-4); top: -100%; z-index: 60; display: inline-flex; min-height: 3.5rem; align-items: center; padding: var(--md-custom-space-3) var(--md-custom-space-5); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary); font-weight: var(--md-ref-typeface-weight-bold); box-shadow: var(--md-sys-elevation-level3); transition: top var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard-decelerate); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }
.skip-link:focus { top: var(--md-custom-space-4); }
.skip-link:active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }

.site-container { width: min(100% - 2.5rem, 80rem); margin-inline: auto; }

.site-header { position: sticky; top: 0; z-index: 50; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-bottom: var(--md-custom-stroke) solid var(--md-sys-color-inverse-surface); box-shadow: var(--md-sys-elevation-level0); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }
.header-inner { min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: var(--md-custom-space-5); }

.brand { display: inline-flex; align-items: center; gap: .7rem; min-height: var(--md-custom-space-16); flex: none; }
.brand:active .brand-wordmark { color: var(--md-sys-color-inverse-primary); }
.brand-mark { width: 2.7rem; height: 2.7rem; color: var(--md-sys-color-inverse-primary); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-wordmark, .footer-wordmark { font-size: var(--md-sys-typescale-title-medium-size); font-weight: var(--md-sys-typescale-title-medium-weight); line-height: var(--md-sys-typescale-title-medium-line-height); letter-spacing: var(--md-sys-typescale-title-medium-tracking); text-transform: uppercase; }
.brand-wordmark { white-space: nowrap; }
.brand-wordmark span, .footer-wordmark span { color: var(--md-sys-color-inverse-primary); }

.header-cta-wrapper { padding-bottom: var(--md-custom-space-4); display: flex; justify-content: center; }

/* =========================================================================
   4. BUTTONS — tamanho "medium" (56px) do M3 Expressive; forma corner-full (pílula, Fase 3b);
      borda 2px mantida como limite 1.4.11 (divergência deliberada do botão preenchido M3)
   ========================================================================= */
.button { display: inline-flex; width: 100%; max-width: 28rem; min-height: 3.5rem; align-items: center; justify-content: center; gap: .6rem; padding: var(--md-custom-space-3) 1.3rem; font-size: var(--md-sys-typescale-label-large-size); font-weight: var(--md-sys-typescale-label-large-weight); line-height: var(--md-sys-typescale-label-large-line-height); letter-spacing: var(--md-sys-typescale-label-large-tracking); transition: background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard-decelerate), transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard-decelerate); }
.button:active { transform: scale(.97); }

/* Filled button — tertiary-container (verde WhatsApp); estados por camada M3 (D2) */
.button--whatsapp { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); border-color: var(--md-comp-button-filled-outline-color); --md-focus-ring-color: var(--md-sys-color-inverse-on-surface); }
.button--whatsapp:hover { background: #23c661; background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%), var(--md-sys-color-tertiary-container)); }
.button--whatsapp:active { background: #22c25f; background: color-mix(in srgb, var(--md-sys-color-on-tertiary-container) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), var(--md-sys-color-tertiary-container)); }
.button--whatsapp:focus-visible { outline-offset: 3px; }
.section--cream .button--whatsapp, .section--paper .button--whatsapp { --md-focus-ring-color: var(--md-sys-color-on-surface); }

/* Outlined button — sobre inverse-surface; hover por inversão (11,52:1) em vez da camada de 8 % */
.button--ghost { background: transparent; color: var(--md-sys-color-inverse-primary); border-color: var(--md-sys-color-inverse-primary); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }
.button--ghost:hover, .button--ghost:active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.button--ghost .route-symbol { width: 1.35rem; height: 1.35rem; }
.hero-cta { width: 100%; }

/* =========================================================================
   5. NAVEGAÇÃO — botão do menu (outlined, ícone + rótulo) e painel (M3 menu)
   ========================================================================= */
.nav-container { position: relative; display: flex; align-items: center; }
.hamburger-menu-btn { display: flex; min-width: var(--md-custom-target-menu); min-height: var(--md-custom-target-menu); flex-direction: column; align-items: center; justify-content: center; gap: .125rem; padding: var(--md-custom-space-1) var(--md-custom-space-2); border: var(--md-custom-stroke) solid var(--md-custom-color-nav); border-radius: var(--md-sys-shape-corner-small); background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); font-family: inherit; cursor: pointer; --md-focus-ring-color: var(--md-custom-color-nav); }
.hamburger-lines { font-size: 1.375rem; line-height: 1; }
.hamburger-label { font-size: var(--md-sys-typescale-label-small-size); font-weight: var(--md-sys-typescale-label-small-weight); line-height: 1; /* controle compacto: mantém o botão em 52px */ letter-spacing: var(--md-sys-typescale-label-small-tracking); text-transform: uppercase; }

.nav-list { display: none; margin: 0; padding: 0; list-style: none; }
.nav-link { display: flex; min-height: var(--md-custom-target-min); align-items: center; font-size: var(--md-sys-typescale-title-small-size); font-weight: var(--md-sys-typescale-title-small-weight); line-height: var(--md-sys-typescale-title-small-line-height); letter-spacing: var(--md-sys-typescale-title-small-tracking); text-decoration: underline; text-underline-offset: .1875rem; --md-focus-ring-color: var(--md-custom-color-nav); }
/* Estado ativo/pressionado e estado "aberto" (aria-expanded) visível */
.hamburger-menu-btn:active, .hamburger-menu-btn[aria-expanded="true"], .nav-link:active { background-color: var(--md-custom-color-nav); color: var(--md-custom-color-on-nav); border-color: var(--md-custom-color-on-nav); }

@media (max-width: 63.999rem) {
  .nav-list.is-open { display: block; position: absolute; right: 0; top: calc(100% + .6rem); z-index: 50; width: min(88vw, 20rem); max-height: calc(100vh - 8rem); overflow-y: auto; overscroll-behavior: contain; padding: var(--md-custom-space-5); border: var(--md-custom-stroke-strong) solid var(--md-custom-color-on-nav-container); border-radius: var(--md-sys-shape-corner-extra-small); background-color: var(--md-custom-color-nav-container); box-shadow: var(--md-sys-elevation-level2); }
  .nav-list.is-open li { margin-bottom: var(--md-custom-space-5); }
  .nav-list.is-open li:last-child { margin-bottom: 0; }
  .nav-list.is-open .nav-link { padding: .4rem .6rem; color: var(--md-custom-color-on-nav-container); --md-focus-ring-color: var(--md-custom-color-on-nav-container); }
}

@media (min-width: 64rem) {
  .hamburger-menu-btn { display: none; }
  .nav-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; row-gap: 0; column-gap: var(--md-custom-space-1); }
  /* Links no app bar: text buttons (label-medium) */
  .nav-link { padding-inline: .6rem; font-size: var(--md-sys-typescale-label-medium-size); font-weight: var(--md-sys-typescale-label-medium-weight); line-height: var(--md-sys-typescale-label-medium-line-height); letter-spacing: var(--md-sys-typescale-label-medium-tracking); color: var(--md-sys-color-inverse-on-surface); text-decoration: none; white-space: nowrap; }
  .nav-link:hover { color: var(--md-custom-color-nav); text-decoration: underline; }
}

/* =========================================================================
   6. ÍCONES E CONTÊINERES DE ÍCONE
   ========================================================================= */
.icon { width: 1.55rem; height: 1.55rem; fill: currentColor; flex: none; }
.route-symbol { width: 1.65rem; height: 1.65rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.route-symbol--lg { width: 2rem; height: 2rem; }
.route-symbol--deco { width: 2.25rem; height: 2.25rem; margin-top: var(--md-custom-space-6); color: var(--md-sys-color-secondary); }

/* Quadrado de ícone: preenchimento secondary-container; tamanho via --size */
.icon-box { display: grid; width: var(--size, 3.5rem); height: var(--size, 3.5rem); place-items: center; background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.icon-box--dark { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary); }
.icon-box--lg { --size: 4rem; }

.step-num { display: grid; width: 4rem; height: 4rem; place-items: center; margin-bottom: var(--md-custom-space-5); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-size: var(--md-sys-typescale-headline-small-size); font-weight: var(--md-sys-typescale-headline-small-weight); line-height: var(--md-sys-typescale-headline-small-line-height); letter-spacing: var(--md-sys-typescale-headline-small-tracking); }

/* =========================================================================
   7. HERO E SEÇÕES (superfícies)
   ========================================================================= */
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-8); padding-block: var(--md-custom-space-hero); }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--md-custom-space-6); }
.eyebrow { margin: 0; color: var(--md-sys-color-secondary); font-size: var(--md-sys-typescale-label-small-size); font-weight: var(--md-sys-typescale-label-small-weight); line-height: var(--md-sys-typescale-label-small-line-height); letter-spacing: var(--md-sys-typescale-label-small-tracking); text-transform: uppercase; }
.eyebrow--light { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .4rem; padding-inline: .85rem; border-left: var(--md-custom-stroke-strong) solid var(--md-sys-color-inverse-primary); color: var(--md-sys-color-inverse-primary); }

.hero h1 { max-width: 16ch; margin-bottom: 0; font-size: var(--md-sys-typescale-display-large-size); font-weight: var(--md-sys-typescale-display-large-weight); line-height: var(--md-sys-typescale-display-large-line-height); letter-spacing: var(--md-sys-typescale-display-large-tracking); }
.hero--inner h1 { max-width: 22ch; font-size: var(--md-sys-typescale-display-small-size); line-height: var(--md-sys-typescale-display-small-line-height); letter-spacing: var(--md-sys-typescale-display-small-tracking); }
.hero h1 span { color: var(--md-sys-color-inverse-primary); }
.hero-copy > p:not(.eyebrow) { max-width: 40rem; margin-bottom: 0; font-size: var(--md-sys-typescale-body-large-size); line-height: var(--md-sys-typescale-body-large-line-height); }
.hero-copy strong { color: var(--md-sys-color-inverse-primary); }
.hero-lead { font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-inverse-primary); }
.hero-copy > p.hero-note { font-size: var(--md-sys-typescale-body-small-size); }

.section { position: relative; padding-block: var(--md-custom-space-section); }
.section--cream { background: var(--md-sys-color-surface); }
.section--paper { background-color: var(--md-sys-color-surface-container); }
.section-heading { max-width: 44rem; margin-bottom: var(--md-custom-space-12); }
.heading { margin-bottom: .7rem; color: var(--md-sys-color-on-surface); font-size: var(--md-sys-typescale-headline-large-size); font-weight: var(--md-sys-typescale-headline-large-weight); line-height: var(--md-sys-typescale-headline-large-line-height); letter-spacing: var(--md-sys-typescale-headline-large-tracking); }
.heading--light { color: var(--md-sys-color-inverse-primary); }
.section-copy { max-width: 42rem; margin-bottom: 0; color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-large-size); }

.final-cta { padding-block: var(--md-custom-space-section); text-align: center; }
.final-cta-inner { display: flex; max-width: 52rem; flex-direction: column; align-items: center; gap: var(--md-custom-space-6); }
.final-cta h2 { margin-bottom: 0; color: var(--md-sys-color-inverse-primary); font-size: var(--md-sys-typescale-display-medium-size); font-weight: var(--md-sys-typescale-display-medium-weight); line-height: var(--md-sys-typescale-display-medium-line-height); letter-spacing: var(--md-sys-typescale-display-medium-tracking); }
.final-cta p:not(.eyebrow) { max-width: 38rem; margin-bottom: 0; font-size: var(--md-sys-typescale-body-large-size); }
.final-cta p.final-note { font-size: var(--md-sys-typescale-body-small-size); }

/* =========================================================================
   8. CARDS — "filled card" (Fase 3b): surface-container-highest + linha outline-variant 1px,
      canto medium, nível 0, não interativos (link interno via .card-link). FAQ: outlined 2px
   ========================================================================= */
.modality-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-6); }
.modality-card { display: flex; min-height: 22rem; flex-direction: column; align-items: flex-start; gap: var(--md-custom-space-8); padding: var(--md-custom-space-card); }
.modality-card h3, .service-card h3, .step-card h3, .faq-card h3 { margin-bottom: .55rem; font-size: var(--md-sys-typescale-title-large-size); font-weight: var(--md-sys-typescale-title-large-weight); line-height: var(--md-sys-typescale-title-large-line-height); letter-spacing: var(--md-sys-typescale-title-large-tracking); }
.modality-body { display: flex; flex-direction: column; gap: var(--md-custom-space-4); }
.modality-card--auto { min-height: 0; gap: var(--md-custom-space-4); }
.modality-body h3, .modality-card--auto h3 { margin-bottom: 0; }
.modality-body p, .modality-card--auto p { margin-bottom: 0; color: var(--md-sys-color-on-surface-variant); }
.modality-head { display: flex; width: 100%; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--md-custom-space-4); }
.modality-head > .route-symbol--lg { color: var(--md-sys-color-secondary); }


.service-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-5); }
.service-card { display: flex; flex-direction: column; min-height: 17rem; padding: var(--md-custom-space-6); }
.service-card > .icon-box { margin-bottom: var(--md-custom-space-6); }
.service-card p { margin-bottom: var(--md-custom-space-4); color: var(--md-sys-color-on-surface-variant); }
.service-card--row { flex-direction: row; align-items: flex-start; gap: var(--md-custom-space-4); min-height: 0; }
.service-card--row .route-symbol { flex: none; margin-top: .2rem; color: var(--md-sys-color-secondary); }
.service-card--row .step-num { flex: none; }
.service-card--auto { min-height: 0; }
.service-card .card-body { flex: 1 1 auto; min-width: 0; }
.service-card .card-body h3 { margin-bottom: .35rem; }
.service-card .card-body p { margin-bottom: 0; }
.service-card p + p { margin-top: var(--md-custom-space-3); }
.service-card p:last-child { margin-bottom: 0; }
.service-card p + h3 { margin-top: var(--md-custom-space-5); }
.service-card .info-title { margin-bottom: 0; font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-on-surface); }
.service-card .info-title + p { margin-top: var(--md-custom-space-1); }
.service-card .modality-head { margin-bottom: var(--md-custom-space-5); }

.steps-grid { grid-template-columns: 1fr; gap: var(--md-custom-space-5); }
.step-card { min-height: 18rem; padding: var(--md-custom-space-7); }
.step-card p { margin-bottom: 0; }

.info-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-3); margin: 0; padding: 0; list-style: none; }
.info-card { padding: var(--md-custom-space-5); }
.info-card dt, .info-card .info-title { margin: 0; font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-on-surface); }
.info-card dd, .info-card p { margin: .35rem 0 0; color: var(--md-sys-color-on-surface-variant); }

.faq-list { display: grid; gap: var(--md-custom-space-4); }
.faq-card { padding: var(--md-custom-space-6); background: var(--md-sys-color-surface); }
.faq-card p { margin-bottom: 0; color: var(--md-sys-color-on-surface-variant); }
.faq-card summary { display: flex; min-height: var(--md-custom-target-min); align-items: center; justify-content: space-between; gap: var(--md-custom-space-4); cursor: pointer; list-style: none; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary h3 { margin: 0; }
.faq-card summary .route-symbol { color: var(--md-sys-color-secondary); transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard-decelerate); }
.faq-card[open] summary .route-symbol { transform: rotate(180deg); }
.faq-card[open] summary { margin-bottom: var(--md-custom-space-3); }

.link-list { display: grid; gap: var(--md-custom-space-3); margin: 0; padding: 0; list-style: none; }
.link-card { display: flex; min-height: var(--md-custom-space-16); align-items: center; gap: var(--md-custom-space-3); padding: var(--md-custom-space-2) var(--md-custom-space-5); font-weight: var(--md-ref-typeface-weight-bold); }
.link-card .card-link { margin-top: 0; }
.link-card > span > .card-link { margin-top: var(--md-custom-space-2); }
.link-card > span { flex: 1 1 auto; min-width: 0; }
.link-card > .route-symbol { flex: none; color: var(--md-sys-color-secondary); }
.link-card strong { display: block; }
.link-card strong + span { display: block; margin-top: var(--md-custom-space-1); font-weight: var(--md-ref-typeface-weight-regular); color: var(--md-sys-color-on-surface-variant); }


/* Cards sobre inverse-surface */
.area-card { padding: var(--md-custom-space-card); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }
.area-grid { grid-template-columns: 1fr; gap: var(--md-custom-space-3); }
.area-grid .route-symbol { width: 1.1rem; height: 1.1rem; }

.hero-aside-wrap { padding-bottom: var(--md-custom-space-hero); }
.hero-aside { padding: clamp(1.5rem, 4vw, 2rem); }
.hero-aside-head { display: flex; align-items: flex-start; gap: .85rem; }
.hero-aside-head .route-symbol { width: 2rem; height: 2rem; flex: none; margin-top: .2rem; color: var(--md-sys-color-inverse-primary); }
.hero-aside-title { margin-bottom: 0; color: var(--md-sys-color-inverse-primary); font-size: var(--md-sys-typescale-title-large-size); font-weight: var(--md-sys-typescale-title-large-weight); line-height: var(--md-sys-typescale-title-large-line-height); letter-spacing: var(--md-sys-typescale-title-large-tracking); }
.hero-aside-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-4); margin: var(--md-custom-space-6) 0 0; padding: 0; list-style: none; }
.hero-aside-item { padding-top: var(--md-custom-space-4); border-top: var(--md-custom-stroke) solid var(--md-sys-color-inverse-primary); }
.hero-aside-item dt { font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-inverse-primary); }
.hero-aside-item dd { margin: .35rem 0 0; }
.hero-aside-link { display: inline-flex; min-height: var(--md-custom-target-min); align-items: center; gap: .6rem; font-weight: var(--md-ref-typeface-weight-bold); text-decoration: underline; text-underline-offset: .1875rem; }
.hero-aside-num { font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-inverse-primary); }
.hero-aside-foot { margin: var(--md-custom-space-6) 0 0; }

/* =========================================================================
   9. CHIPS E RÓTULOS (não interativos)
   ========================================================================= */
.chip { display: flex; min-height: 3.3rem; align-items: center; gap: .6rem; padding: .65rem .85rem; background: var(--md-sys-color-surface); font-size: var(--md-sys-typescale-label-medium-size); font-weight: var(--md-sys-typescale-label-medium-weight); }
.chip--light { border-color: var(--md-sys-color-inverse-primary); background: transparent; color: var(--md-sys-color-inverse-primary); }
.city-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-3); margin: 0; padding: 0; list-style: none; }
.city-grid .route-symbol { width: 1.35rem; height: 1.35rem; color: var(--md-sys-color-secondary); }
.hero-highlights { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-3); margin: 0; padding: 0 0 var(--md-custom-space-hero); list-style: none; }

.badge { display: inline-flex; min-height: 2.25rem; align-items: center; padding: var(--md-custom-space-1) .85rem; border: var(--md-custom-stroke) solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); font-size: var(--md-sys-typescale-label-medium-size); font-weight: var(--md-sys-typescale-label-medium-weight); line-height: var(--md-sys-typescale-label-medium-line-height); }
.badge--solid { background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary); }
.badge--outline { background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); }
.badge + h3 { margin-top: var(--md-custom-space-5); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--md-custom-space-2); margin-bottom: var(--md-custom-space-4); }
.tag { display: inline-flex; min-height: 2.25rem; align-items: center; padding: .2rem .8rem; border: var(--md-custom-stroke) solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container); font-size: var(--md-sys-typescale-label-medium-size); font-weight: var(--md-sys-typescale-label-medium-weight); }

/* =========================================================================
   10. TEXTO, LINKS, LISTAS, NOTAS, BREADCRUMB, MÍDIA
   ========================================================================= */
.breadcrumb { padding-block: var(--md-custom-space-3); background: var(--md-sys-color-surface-container); border-bottom: var(--md-custom-stroke) solid var(--md-sys-color-outline); }
.breadcrumb ol { display: flex; min-height: var(--md-custom-target-min); flex-wrap: wrap; align-items: center; gap: var(--md-custom-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--md-sys-typescale-body-small-size); color: var(--md-sys-color-on-surface-variant); }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--md-custom-space-1); }
.breadcrumb [aria-current="page"] { display: inline-flex; min-height: var(--md-custom-target-min); align-items: center; padding-inline: var(--md-custom-space-1); font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-on-surface); }
.breadcrumb .crumb-link { display: inline-flex; min-height: var(--md-custom-target-min); align-items: center; padding-inline: var(--md-custom-space-1); font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-on-surface); text-decoration: underline; text-underline-offset: .1875rem; }
.breadcrumb .route-symbol { width: 1.1rem; height: 1.1rem; color: var(--md-sys-color-secondary); }

.difference-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-10); align-items: start; }
.difference-copy > .heading { margin-top: .6rem; }
.difference-copy .lead { margin-bottom: var(--md-custom-space-4); font-size: var(--md-sys-typescale-body-large-size); font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-sys-color-on-surface); }
.difference-copy .section-copy { margin-bottom: var(--md-custom-space-3); }
.difference-copy .section-copy:last-child { margin-bottom: 0; }
.difference-copy .card-link { margin-top: var(--md-custom-space-5); }
.difference-copy .section-heading { margin-bottom: var(--md-custom-space-4); }
.section-heading .section-copy { margin-top: var(--md-custom-space-2); }
.cta-row { margin-top: var(--md-custom-space-8); }

.inline-link { padding-block: .1em; font-weight: var(--md-ref-typeface-weight-bold); color: var(--md-custom-color-link); text-decoration: underline; text-underline-offset: .1875rem; } /* padding vertical: área de toque ≥ 24px sem mexer na linha */
.inline-link:visited { color: var(--md-custom-color-link-state); }
.inline-link:hover, .inline-link:active { color: var(--md-custom-color-link-state); text-decoration-thickness: 3px; }
.inline-link .route-symbol { display: inline-block; width: .95em; height: .95em; margin-inline-start: .2em; vertical-align: -.1em; }
.card-links { display: flex; flex-wrap: wrap; gap: var(--md-custom-space-2) var(--md-custom-space-5); margin-top: auto; }
.card-links--col { flex-direction: column; align-items: flex-start; gap: var(--md-custom-space-1); }
/* Link interno dos cards (Fase 3b) — padrão do menu superior: amarelo `nav` escurecido (5,2:1 sobre o
   preenchimento claro) e puro sobre navy; hover, ativo e visitado em vermelho (5,1:1 / 6,1:1) */
.card-link { display: inline-flex; min-height: var(--md-custom-target-min); align-items: center; gap: .4rem; margin-top: auto; padding-inline: var(--md-custom-space-1); color: var(--md-custom-color-link); font-weight: var(--md-ref-typeface-weight-bold); text-decoration: underline; text-underline-offset: .1875rem; }
.card-link:visited { color: var(--md-custom-color-link-state); }
.card-link:hover, .card-link:active { color: var(--md-custom-color-link-state); text-decoration-thickness: 3px; }
.card-link--light, .hero-aside-link { color: var(--md-custom-color-inverse-link); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }
.card-link--light:visited, .hero-aside-link:visited, .card-link--light:hover, .card-link--light:active, .hero-aside-link:hover, .hero-aside-link:active { color: var(--md-custom-color-inverse-link-state); }
.card-link .route-symbol, .hero-aside-link .route-symbol { width: 1.1rem; height: 1.1rem; }

.check-list { display: grid; gap: var(--md-custom-space-3); margin: 0 0 var(--md-custom-space-4); padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: .6rem; }
.check-list .route-symbol { width: 1.35rem; height: 1.35rem; margin-top: .15rem; flex: none; color: var(--md-sys-color-secondary); }
.check-list:last-child { margin-bottom: 0; }
.check-list--card { padding: var(--md-custom-space-card); }
.num-list { margin: var(--md-custom-space-2) 0 0; padding-left: 1.4rem; display: grid; gap: .6rem; }
.bullet-list { margin: 0; padding-left: 1.4rem; display: grid; gap: var(--md-custom-space-2); }
.stack { display: grid; gap: var(--md-custom-space-4); }
.stack .service-card { min-height: 0; }
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-5); margin: 0; padding: 0; list-style: none; }

.note { padding: var(--md-custom-space-5); border-left: var(--md-custom-stroke-strong) solid var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-surface-variant); }
.note--icon { display: flex; gap: var(--md-custom-space-3); }
.note--icon .route-symbol { flex: none; margin-top: .2rem; color: var(--md-sys-color-secondary); }
.note--icon p { margin: 0; }
.inline-note { display: flex; align-items: center; gap: var(--md-custom-space-3); margin-top: var(--md-custom-space-5); color: var(--md-sys-color-on-surface-variant); }
.inline-note .route-symbol { flex: none; color: var(--md-sys-color-secondary); }
.inline-note p { margin: 0; }

.hero-figure { position: relative; margin: 0; min-width: 0; }
.hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: var(--md-custom-stroke) solid var(--md-sys-color-inverse-primary); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container); }
.hero-figure figcaption { display: flex; align-items: center; gap: .4rem; margin-top: var(--md-custom-space-3); font-size: var(--md-sys-typescale-body-small-size); }
.hero-figure figcaption .route-symbol { width: 1.1rem; height: 1.1rem; color: var(--md-sys-color-inverse-primary); }
.hero-badge { position: absolute; right: var(--md-custom-space-5); bottom: 3.75rem; display: none; padding: var(--md-custom-space-4) var(--md-custom-space-5); border: var(--md-custom-stroke) solid var(--md-sys-color-inverse-primary); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary); font-weight: var(--md-ref-typeface-weight-bold); line-height: 1.3; }
.section-photo { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; border: var(--md-custom-stroke) solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-small); background: var(--md-sys-color-surface-container); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.site-container.narrow { width: min(100% - 2.5rem, 56rem); }

/* =========================================================================
   11. RODAPÉ
   ========================================================================= */
.site-footer { background: var(--md-sys-color-inverse-surface); border-top: var(--md-custom-stroke) solid var(--md-sys-color-inverse-on-surface); color: var(--md-sys-color-inverse-on-surface); padding-top: var(--md-custom-space-16); --md-focus-ring-color: var(--md-sys-color-inverse-primary); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--md-custom-space-8); padding-bottom: var(--md-custom-space-12); }
.footer-grid p { margin-bottom: 0; }
.footer-grid ul { gap: var(--md-custom-space-2); font-size: var(--md-sys-typescale-body-small-size); }
.footer-grid li a { display: inline-flex; min-height: var(--md-custom-target-min); align-items: center; padding-block: var(--md-custom-space-1); text-decoration: underline; text-underline-offset: .1875rem; }
.footer-grid li a:hover, .footer-grid li a:active { color: var(--md-sys-color-inverse-primary); }
.footer-grid li a:active { text-decoration-thickness: 3px; }
.footer-nav ul { grid-template-columns: 1fr; }
.site-footer [aria-current="page"] { color: var(--md-sys-color-inverse-primary); text-decoration-thickness: 3px; }
.footer-bottom { display: flex; flex-direction: column; gap: var(--md-custom-space-4); border-top: var(--md-custom-stroke) solid var(--md-sys-color-inverse-primary); padding-block: var(--md-custom-space-6); font-size: var(--md-sys-typescale-body-small-size); }
.footer-bottom p { margin: 0; }

/* =========================================================================
   12. CONTEXTO DE SUPERFÍCIE (chips, tags e FAQ nas seções cream; os cards preenchidos
       usam surface-container-highest em qualquer seção)
   ========================================================================= */
.section--cream .chip:not(.chip--light), .section--cream .faq-card { background: var(--md-sys-color-surface-container); }
.section--cream .tag { background: var(--md-sys-color-surface); }

/* =========================================================================
   13. LAYOUT — grades e contratos de espaçamento entre irmãos
   ========================================================================= */
.difference-grid > .card-grid, .difference-grid > .info-grid, .difference-grid > .check-list--card, .difference-grid > .faq-list, .difference-grid > .stack { align-self: start; }
.difference-grid > .section-copy { grid-column: 1 / -1; margin-top: 0; }
.difference-grid > .service-card { min-height: 0; }
.section .difference-grid .section-heading { margin-bottom: 0; }

/* Contratos de espaçamento (ordem após .difference-grid > .section-copy é intencional) */
.section > .site-container > .section-copy, .section > .site-container > .card-link { margin-top: var(--md-custom-space-6); }
.section > .site-container > .heading + .section-copy { margin-top: 0; }
.section > .site-container > .section-copy + .link-list, .section > .site-container > .heading + .link-list { margin-top: var(--md-custom-space-6); }
.card-grid + .note, .card-grid + .section-copy, .card-grid + .cta-row, .info-grid + .section-copy, .city-grid + .section-copy { margin-top: var(--md-custom-space-6); }

/* =========================================================================
   14. BREAKPOINTS (classes de janela M3: 48rem ∈ medium, 64rem ∈ expanded) E MOVIMENTO
   ========================================================================= */
@media (min-width: 48rem) {
  .site-container { width: min(100% - 4rem, 80rem); }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .hero-highlights { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 3fr; }
  .footer-nav ul { grid-template-columns: repeat(2, 1fr); column-gap: var(--md-custom-space-6); }
  .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .info-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .city-grid, .city-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: 7fr 5fr; align-items: center; gap: var(--md-custom-space-12); padding-block: var(--md-custom-space-section); }
  .modality-grid { grid-template-columns: repeat(2, 1fr); }
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .difference-grid { grid-template-columns: repeat(2, 1fr); gap: var(--md-custom-space-16); align-items: center; }
  .hero-badge { display: block; }
  .footer-nav ul { grid-template-columns: repeat(3, 1fr); }
  .card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .city-grid { grid-template-columns: repeat(5, 1fr); }
  .city-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .hero-aside-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-aside-grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
  .hero-aside-grid:has(> :nth-child(6)) { grid-template-columns: repeat(3, 1fr); }
  .button--ghost, .hero-cta .button { width: auto; }
}
@media (max-width: 42rem) {
  .brand-mark { display: none; }
  .brand-wordmark { font-size: var(--md-sys-typescale-label-medium-size); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}