/* ============================
   Questrial self-hosted (Google Fonts CC OFL, latin subset v19)
   Sprint 4 Wave 6.6 fix: Chrome real fallback system-ui (SF Pro Display)
   renderizava bold/rounded extra-pesado em vez de Questrial 400 leve.
   ============================ */
@font-face {
  font-family: 'Questrial';
  src: url('/fonts/questrial-regular.woff2') format('woff2');
  font-weight: 400;
  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+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ============================
   DESIGN SYSTEM — Shared
   Isenção IR · Borges Alves Advogados
   ============================
   Paleta TIER 1 empírica via screenshot Chrome headless 2026-05-14 10:45 BRT:
   site Victor é DARK MODE INTEGRAL verde-floresta (#002417 dominante 90% pixels)
   + texto branco/cinza claro + acento bege-dourado #FFE4B1.

   Correção retroativa da extração 09/05 que interpretou tokens --color_N
   isolados como light mode (errata documentada brand-book v1.2 + Decision 0034 D2).

   Tokens canônicos Decision 0034 D1+D2+D3 (identidade visual herdada Borges Alves).
   Adaptações ICP 60+ aplicadas: base 18px, line-height 1.6, contraste WCAG AAA 7:1,
   click-area 48×48px + 8px gap, prefers-reduced-motion respeitado.
   Spec canonical: ../SPEC-landing-isencao-ir-fase2-design.md §03 + brand-book/03-visual.md v1.2
   STYLE-GUIDE: ./STYLE-GUIDE-isencao-ir.md
   ============================ */

/* ============================
   WCAG 2.4.1 Skip Link
   ============================ */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-accent-gold); color: var(--color-bg);
  padding: 12px 20px; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

:root {
  /* Paleta REAL Victor (dark mode verde-floresta) */
  --color-bg: #002417;                  /* verde-floresta institucional — body principal */
  --color-bg-elevated: #0F3026;         /* variação clara — cards, sections destacadas */
  --color-bg-deep: #001B11;             /* mais escuro — header sticky, footer, form qualif */
  --color-bg-hero: #002214;             /* hero topo */

  --color-text-primary: #FFFFFF;        /* branco — heading principal · contraste 21:1 sobre verde-escuro AAA */
  --color-text-secondary: #E8E8E8;      /* cinza claro — body · contraste 17:1 sobre verde-escuro AAA */
  --color-text-tertiary: #939393;       /* cinza médio — metadata, captions · contraste 5.4:1 AA */

  /* Acento institucional bege-dourado (TIER 1 empírico — site Victor) */
  --color-accent-gold: #FFE4B1;         /* eyebrow, tagline italic, divisores, stat numbers, CTA primário */
  --color-accent-gold-hover: #FFD685;

  /* CTA WhatsApp (brand WhatsApp herdado) */
  --color-cta-whatsapp: #1A815B;
  --color-cta-whatsapp-hover: #13AA72;

  /* Divisores sobre dark */
  --color-divider: rgba(255, 255, 255, 0.1);
  --color-divider-strong: rgba(255, 255, 255, 0.2);

  /* Placeholders documentais [Item N Victor] */
  --color-placeholder-bg: rgba(255, 228, 177, 0.1);

  /* Compat: tokens legados light mode mantidos como aliases (dark equivalents) */
  --color-bg-alt: var(--color-bg-elevated);
  --color-bg-strong: var(--color-bg-deep);

  /* Tipografia ICP 60+ (Decision 0034 D2+D3) */
  --font-stack: 'Questrial', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-size-base: 18px;
  --line-height-body: 1.6;
  --line-height-heading: 1.4;

  /* Áreas clicáveis (Decision 0034 D3) */
  --click-area-min: 48px;
  --click-gap-min: 8px;

  /* Espaçamento */
  --container-max: 760px;
  --container-wide: 1180px;
  --section-padding-y: 80px;
  --content-gap: 32px;

  /* Animações (easing curves — NUNCA usar bounce ou elastic) */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Respeita preferência do usuário por menos animação (Decision 0034 D3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

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

/* Desktop ≥1100px reduz section-padding-y (NRT-_10 fix CEO "muito espaçamento" — 10 big-gaps detectados Patchright) */
@media (min-width: 1100px) {
  :root {
    --section-padding-y: 56px;
    --content-gap: 28px;
  }
}

/* Mobile-first global · ICP 60+ Decision 0034 D3 · reduz section-padding e content-gap em viewport ≤768px */
@media (max-width: 768px) {
  :root {
    --section-padding-y: 40px;
    --content-gap: 20px;
  }
  /* Touch targets WCAG AAA + ICP 60+ legibilidade — botões + links ≥44px + fonte ≥18px */
  .btn-primary,
  .btn-link,
  .back-link,
  .cta-whatsapp-float { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .btn-primary,
  .btn-link { font-size: 1.125rem; line-height: 1.4; } /* 18px ICP 60+ floor */
}

/* ============================
   ARTICLE-FIGURE (SVG infografias) · global · cobre index + LPs + blog
   ============================
   Sem isso, SVGs com viewBox grande (700-1200) ficam ilegíveis em mobile (texto interno 2-3px).
   Solução: overflow-x: auto no container + min-width 700/1200 no SVG = scroll horizontal mobile.
*/
.article-figure {
  margin: 32px 0;
  padding: 28px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-divider);
  border-radius: 8px;
  text-align: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
/* Sprint 4 Wave 3 · mobile-first canonical (Decision 0064 R7)
   viewBox + preserveAspectRatio cuidam do scaling responsive
   Removido band-aid `min-width: 700px/1200px !important` (pre-Decision 0064 R5-R8) */
.article-figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  color: var(--color-accent-gold);
}
@media (min-width: 768px) {
  .article-figure svg {
    max-width: 800px;
  }
}
.article-figure figcaption {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
  line-height: 1.5;
  text-align: center;
}
.article-figure figcaption strong {
  color: var(--color-accent-gold);
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}
@media (max-width: 768px) {
  .article-figure {
    margin-left: 0;
    margin-right: 0;
    padding: 16px 12px 4px;
  }
  /* Removido ::after "arraste pro lado" — SVGs Wave 3 são mobile-first portrait (Decision 0064 R7) · não há overflow horizontal */
}

html { font-size: var(--font-size-base); scroll-behavior: smooth; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font-stack);
  font-size: 1rem;
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Wave 3.6 V1 fix — prevent off-canvas fixed .site-nav (right:0 + translateX(100%))
     from contributing to documentElement.scrollWidth in mobile viewports ≤375px.
     `clip` (vs `hidden`) preserva position:sticky em descendentes. */
  overflow-x: clip;
}

a { color: var(--color-text-primary); }
a:hover { color: var(--color-accent-gold); }

/* Texto principal headings sempre branco sobre dark */
h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); font-weight: 400; }

/* ============================
   CONTAINERS
   ============================ */

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }
.container--wide { max-width: var(--container-wide); }

/* ============================
   HEADER (sticky)
   ============================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-divider);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-bottom-color 0.3s ease;
}
.site-header.scrolled {
  background: rgba(0, 36, 23, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  border-bottom-color: transparent;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 24px;
  max-width: var(--container-wide);
  margin: 0 auto;
  min-height: var(--click-area-min);
}

/* Sub-marca tipográfica (Decision 0034 D1) — símbolo provisório "§" enquanto Item 11 Victor logo vetorial pending */
.brand {
  display: flex;
  flex-direction: row;       /* horizontal — símbolo esquerda + texto direita */
  align-items: center;
  gap: 12px;
  line-height: 1.2;
  text-decoration: none;
  color: var(--color-text-primary);
  flex-shrink: 0;
  white-space: nowrap;
}
.brand__symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: 28px;
  font-weight: 400;
  color: var(--color-accent-gold);
  border: 1px solid var(--color-accent-gold);
  border-radius: 4px;
  flex-shrink: 0;
  font-family: Georgia, "Times New Roman", serif;   /* § elegante em serif vs Questrial sans-serif do texto */
}
.brand__text {
  display: flex;
  flex-direction: column;
}
.brand__line1 { font-size: 1.2rem; font-weight: 400; color: var(--color-text-primary); white-space: nowrap; }
.brand__line2 { font-size: 0.85rem; color: var(--color-accent-gold); margin-top: 2px; white-space: nowrap; }
@media (max-width: 768px) {
  .brand__symbol { width: 28px; height: 28px; font-size: 24px; }
}

/* Page-header (LPs doença + blog) — variante leve do site-header pra páginas internas */
.page-header {
  background: var(--color-bg-deep);
  border-bottom: 1px solid var(--color-divider);
  padding: 16px 0;
}
.page-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 24px;
  min-height: var(--click-area-min);
}

/* Back-link (LPs e blog articles) */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--click-area-min);
  padding: 0 8px;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}
.back-link:hover { color: var(--color-accent-gold); }

/* ============================
   NAV (header inline + footer)
   ============================ */

.site-nav { display: flex; gap: var(--click-gap-min); align-items: center; }
.site-nav__list {
  display: flex;
  gap: var(--click-gap-min);
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-nav__list li { margin: 0; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--click-area-min);
  padding: 0 12px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  position: relative;
  white-space: nowrap;  /* Wave 3 P0 fix — impede quebra de linha mid-text em cada nav item */
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  height: 1px;
  background: var(--color-accent-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out-quart);
}
.site-nav__link:hover::after, .site-nav__link:focus-visible::after {
  transform: scaleX(1);
}
.site-nav__link:hover { color: var(--color-text-primary); }
.site-nav__link:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}

/* ============================
   BUTTONS
   ============================ */

/* CTA WhatsApp flutuante (paridade Victor borgesalvesadvogados.com.br — Provimento 205 §3 sobriedade preservada via tamanho discreto) */
.cta-whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-cta-whatsapp, #1A815B);
  color: var(--color-text-primary, #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 100;
}
.cta-whatsapp-float:hover, .cta-whatsapp-float:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 4px;
}
.cta-whatsapp-float svg { width: 28px; height: 28px; stroke-width: 1.8; }
@media (max-width: 768px) {
  .cta-whatsapp-float { bottom: 16px; right: 16px; width: 48px; height: 48px; }
  .cta-whatsapp-float svg { width: 24px; height: 24px; }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--click-area-min);
  padding: 0 32px;
  white-space: nowrap;     /* não quebrar palavra em CTA estreito */
  background: var(--color-accent-gold);
  color: var(--color-bg);
  border: 2px solid var(--color-accent-gold);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--color-accent-gold-hover);
  border-color: var(--color-accent-gold-hover);
  color: var(--color-bg);
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 4px;
  transform: translateY(-2px);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--click-area-min);
  color: var(--color-accent-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  background: transparent;
  border: 0;
  padding: 0 8px;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.btn-link:hover { color: var(--color-accent-gold-hover); }

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--click-area-min);
  padding: 0 28px;
  background: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-cta-whatsapp);
  text-decoration: none;
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s var(--ease-out-quart);
}
.btn-whatsapp:hover, .btn-whatsapp:focus-visible {
  background: var(--color-cta-whatsapp);
  color: var(--color-text-primary);
}

/* ============================
   SECTION GENERIC
   ============================ */

.section {
  padding: var(--section-padding-y) 0;
  border-bottom: 1px solid var(--color-divider);
}
.section h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);   /* 27-35px */
  line-height: var(--line-height-heading);
  margin: 0 0 var(--content-gap);
  color: var(--color-text-primary);
  letter-spacing: -0.005em;
}
.section p { color: var(--color-text-secondary); margin-bottom: 18px; }
.section--alt { background: var(--color-bg-elevated); }
.section--elevated { background: var(--color-bg-elevated); }

.section__eyebrow {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-gold);
  margin-bottom: 16px;
}

/* NRT-_10 cycle 3 fix CEO "continua desalinhado" · eyebrow seguido de h2 centered DEVE centralizar
   :has() suportado 95%+ browsers 2026 · zero touch HTML · zero JS */
.section__eyebrow:has(+ .section-title-centered) {
  text-align: center;
}

/* Garante <p> descritivo dentro de section com h2 centered também centraliza
   (cobre intros explicativas tipo "Cada caso exige análise individual...") */
.section-title-centered + p {
  text-align: center;
  max-width: 60ch;
  margin-left: auto;
  margin-right: auto;
}

/* ============================
   FOOTER (Provimento OAB 205/2021 Art. 1º §1º)
   ============================ */

.site-footer {
  background: var(--color-bg-deep);
  padding: 60px 24px 40px;
  font-size: 0.9rem;
  color: var(--color-text-tertiary);
  border-top: 1px solid var(--color-accent-gold);
}
.site-footer p { margin: 0 0 12px; }
.site-footer .disclosure-bold { color: var(--color-text-primary); font-size: 1.05rem; }
.site-footer a { color: var(--color-text-secondary); }
.site-footer a:hover { color: var(--color-accent-gold); }
.site-footer__disclosure {
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-divider);
}
.site-footer__disclosure strong { color: var(--color-accent-gold); }
.site-footer__inner { max-width: var(--container-wide); margin: 0 auto; }
.site-footer__cols {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 40px;
}
.site-footer__col h4 {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 400;
}
.site-footer__col p { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-tertiary); margin-bottom: 8px; }
.site-footer__legal {
  font-size: 0.85rem;
  color: var(--color-text-tertiary);
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
}

/* ============================
   STATUS MESSAGES (form feedback)
   ============================ */

.status-message {
  padding: 16px 24px;
  margin: 24px 0;
  border-left: 4px solid var(--color-accent-gold);
  background: var(--color-bg-elevated);
  color: var(--color-text-secondary);
}
.status-message--ok { border-left-color: var(--color-cta-whatsapp); }
.status-message--error {
  border-left-color: #F87171;
  background: rgba(248, 113, 113, 0.1);
  color: var(--color-text-primary);
}

/* ============================
   CONSENT BANNER (LGPD analytics)
   ============================ */

.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--color-bg-deep);
  color: var(--color-text-primary);
  padding: 16px 24px;
  display: none;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--color-accent-gold);
}
.consent-banner p { margin: 0; flex: 1 1 320px; color: var(--color-text-secondary); }
.consent-banner button {
  min-height: var(--click-area-min);
  padding: 0 24px;
  background: var(--color-accent-gold);
  color: var(--color-bg);
  border: 2px solid var(--color-accent-gold);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.consent-banner a { color: var(--color-accent-gold); }
/* Gate opt-in (2 botões) — injetado por consent.js */
.consent-banner__texto { flex: 1 1 340px; }
.consent-banner__texto p { margin: 0; color: var(--color-text-secondary); }
.consent-banner__texto p + p { margin-top: 6px; }
.consent-banner__acoes { display: flex; gap: 12px; flex-wrap: wrap; }
/* "Só o necessário" = mesmo peso operacional que "Aceitar" (recusar tão fácil quanto aceitar — ANPD) */
.consent-banner button.consent-banner__secundario { background: transparent; color: var(--color-accent-gold); }
.consent-banner:focus, .consent-banner button:focus-visible { outline: 2px solid var(--color-accent-gold); outline-offset: 2px; }
@media (max-width: 640px) {
  .consent-banner__acoes { width: 100%; }
  .consent-banner__acoes button { flex: 1 1 100%; }
}

/* ============================
   PLACEHOLDERS [Item N Victor] visíveis durante skeleton pre-Victor
   ============================ */
.placeholder {
  display: inline-block;
  padding: 2px 8px;
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-accent-gold);
  color: var(--color-accent-gold);
  font-size: 0.85em;
  font-family: monospace;
}

/* ============================
   ANIMATIONS — scroll reveal (princípio visual 6)
   ============================ */

/* .reveal NO-OP (NRT-_10 2026-05-25 fix CEO "hover estraga") · classe mantida pra retrocompat HTML sem refactor
   sem opacity:0 inicial · sem transform · sem transition · zero animação · elementos sempre visíveis */
.reveal,
.reveal.visible,
.reveal-delay-1,
.reveal-delay-2,
.reveal-delay-3,
.reveal-delay-4 { opacity: 1; transform: none; transition: none; }

/* ============================
   FAQ — native details/summary accordion (sub-task 1)
   ============================ */

.faq details {
  border-bottom: 1px solid var(--color-divider);
}
.faq details summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 0;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  user-select: none;
}
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::after {
  content: "+";
  color: var(--color-accent-gold);
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out-quart);
}
.faq details[open] summary::after { content: "−"; }
.faq details summary:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 4px;
}
.faq-body {
  padding: 0 0 24px;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

/* ============================
   TYPOGRAPHY UTILITIES — section titles (sub-task 4)
   ============================ */

.section-title-centered {
  text-align: center;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.section-title-centered--narrow {
  max-width: 32ch;
}
/* NRT-_10 cycle 4 fix CEO "continua desalinhado" #3
   `.section h2` (specificity 0,1,1) sobrescreve `margin-left:auto` do `.section-title-centered` (0,1,0)
   → h2 fica deslocado 101px pra esquerda em vez de centralizado
   Patchright medição empírica pré-fix: container.cx=640 · h2.cx=539 (desvio -101px)
   Fix: regra `.section h2.section-title-centered` specificity 0,2,1 vence */
.section h2.section-title-centered {
  margin-left: auto;
  margin-right: auto;
}

/* ============================
   RESPONSIVE breakpoints
   ============================ */

/* ============================
   MENU TOGGLE (hamburger mobile — BUG 3 GRAVE fix QA persona)
   ============================ */

.menu-toggle {
  display: none;  /* hidden desktop */
  background: transparent;
  border: 0;
  padding: 12px;
  cursor: pointer;
  position: relative;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--color-accent-gold);
  outline-offset: 2px;
}
.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-text-primary);
  transition: transform 0.25s var(--ease-out-quart), opacity 0.2s var(--ease-out-quart);
}
.menu-toggle__icon { position: relative; }
.menu-toggle__icon::before { position: absolute; top: -8px; left: 0; }
.menu-toggle__icon::after { position: absolute; top: 8px; left: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 0; transform: rotate(-45deg); }

/* Tablet-ish range 769-1100 — antecipar hamburger (Decision 0061 Spec §2 — header content excede viewport antes do mobile breakpoint padrão) */
@media (max-width: 1100px) and (min-width: 769px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 320px);
    background: var(--color-bg-deep);
    border-left: 1px solid var(--color-divider-strong);
    padding: 80px 24px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out-quart);
    z-index: 200;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav__list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
  .site-nav__link { display: flex; width: 100%; padding: 14px 16px; border-bottom: 1px solid var(--color-divider); font-size: 1rem; }
  .site-nav__link::after { display: none; }
}

@media (max-width: 768px) {
  .container, .container--wide { padding: 0 20px; }
  .site-header__inner { padding: 12px 20px; gap: 12px; }

  /* Hamburger visible mobile */
  .menu-toggle { display: inline-flex; }

  /* Nav escondido por default mobile, mostra com .open via JS toggle */
  .site-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 320px);
    background: var(--color-bg-deep);
    border-left: 1px solid var(--color-divider-strong);
    padding: 80px 24px 32px;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-out-quart);
    z-index: 200;
    overflow-y: auto;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
  }
  .site-nav.open { transform: translateX(0); }

  .site-nav__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
  }
  .site-nav__link {
    display: flex;
    width: 100%;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-divider);
    font-size: 1rem;
  }
  .site-nav__link::after { display: none; }
  .site-nav .btn-primary {
    margin-top: 16px;
    width: 100%;
  }

  /* Backdrop quando nav aberto */
  .site-nav.open::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 320px;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
}

/* ============================
   ICON UTILITY (Wave 3 — biblioteca Lucide CC-license)
   ============================
   Família única: Lucide (https://lucide.dev) — peso visual leve, alinhamento ICP 60+.
   SVG inline mantém peso página zero (não-CDN, não-JS). stroke-width 1.5 = leve mas legível.
   Princípio sobriedade Manifesto Norte: 1 família única, sem overload visual.
*/

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex-shrink: 0;
  color: currentColor;
}
.icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 14px; height: 14px; }
.icon--md { width: 20px; height: 20px; }
.icon--lg { width: 40px; height: 40px; }
.icon--xl { width: 56px; height: 56px; }
.icon--gold { color: var(--color-accent-gold); }