/* =====================================================================
   WIREFRAME — Guiaderodas
   Design system REAL extraído de guiaderodas.com via /design-md
   + WCAG 2.2 AAA + essência editorial On Running + copy literal
   Squad 7Tima · Drake + Brisa + Uxi + Cleo + Mira · 2026-05-11
===================================================================== */

/* ---------- Tokens reais Guiaderodas (extraídos via design-md) ---------- */
:root {
  /* nova paleta aprovada em reunião 2026-05-22 (Leo + Bianca + Bruno + Larissa) */
  --gdr-green: #366531;          /* primary — verde oliva (substitui verde Crefisa) */
  --gdr-green-light: #7FA67B;    /* secondary — verde pistache (análoga, Adobe Color) */
  --gdr-green-dark: #244621;     /* tertiary — oliva escuro p/ hover + AAA on white */
  --gdr-yellow: #FCC755;         /* accent — badge pendente (mantido) */
  --gdr-pink: #7FA67B;           /* acento pontual — verde pistache (verde antigo Crefisa eliminado em 2026-05-22) */
  --gdr-red: #E32B4E;            /* semântica de erro (formulário, status) */
  --gdr-near-black: #222222;     /* cinza chumbo (substitui near-black) */
  --gdr-text: #414148;
  --gdr-text-muted: #636064;
  --gdr-border: #D6D7D8;
  --gdr-subtle: #F2F2F2;
  --gdr-surface: #FFFFFF;

  /* ajustes a11y persistentes via toolbar */
  --font-scale: 1;
  --space-scale: 1;

  /* tipografia (Roboto + escala extraída) */
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-body: calc(18px * var(--font-scale));
  --text-lead: calc(21px * var(--font-scale));
  --text-h3: calc(24px * var(--font-scale));
  --text-h2: clamp(28px, calc(3.8vw * var(--font-scale)), calc(45px * var(--font-scale)));
  --text-h1: clamp(36px, calc(5vw * var(--font-scale)), calc(64px * var(--font-scale)));

  /* spacing tokens (4/8/10/16/20/40/60 do DS) */
  --space-2xs: calc(4px * var(--space-scale));
  --space-xs: calc(8px * var(--space-scale));
  --space-sm: calc(10px * var(--space-scale));
  --space-md: calc(16px * var(--space-scale));
  --space-lg: calc(20px * var(--space-scale));
  --space-xl: calc(40px * var(--space-scale));
  --space-2xl: calc(60px * var(--space-scale));
  --space-section: calc(80px * var(--space-scale));

  /* radius tokens (ajustados em 2026-05-22: meio termo entre flat e arredondado) */
  --r-btn: 4px;
  --r-card: 6px;
  --r-input: 3px;
  --r-full: 999px;

  /* foco AAA dual-tone — preto + branco (sem amarelo) */
  --focus: var(--gdr-near-black);
  --focus-ring: 4px solid var(--gdr-near-black);
  --focus-shadow: 0 0 0 8px #ffffff, 0 0 0 12px var(--gdr-near-black);

  /* target mínimo AAA */
  --target-min: 56px;
}

/* High-contrast toggle */
body[data-contrast="high"] {
  --gdr-text: #000000;
  --gdr-text-muted: #000000;
  --gdr-border: #000000;
  --gdr-subtle: #FFFFFF;
  --gdr-green: var(--gdr-green-dark);
}
body[data-contrast="high"] *,
body[data-contrast="high"] *::before,
body[data-contrast="high"] *::after {
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Dyslexia-friendly */
body[data-dyslexia="on"] {
  font-family: "Comic Sans MS", "OpenDyslexic", var(--font-body);
  letter-spacing: 0.04em;
  word-spacing: 0.12em;
}

/* Sem imagens */
body[data-images="off"] img:not(.keep-on-no-img),
body[data-images="off"] .hero__bg-photo,
body[data-images="off"] .spotlight__bg-photo {
  display: none !important;
}
body[data-images="off"] .hero,
body[data-images="off"] .spotlight {
  background: var(--gdr-green-dark) !important;
  min-height: auto !important;
  padding: var(--space-section) var(--space-lg) !important;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--gdr-text);
  background: var(--gdr-surface);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body[data-motion="off"] * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Focus AAA ---------- */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 4px;
  box-shadow: var(--focus-shadow);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Skip links ---------- */
.skip-links { position: absolute; top: 0; left: 0; z-index: 200; }
.skip-link {
  position: absolute; left: 8px; top: -200px;
  background: var(--gdr-near-black); color: #fff;
  padding: 14px 20px; min-height: var(--target-min);
  text-decoration: underline; font-weight: 700;
  border: 3px solid var(--focus);
  display: inline-flex; align-items: center;
}
.skip-link:focus-visible { top: 8px; }
.skip-link + .skip-link:focus-visible { top: 80px; }
.skip-link:nth-child(3):focus-visible { top: 152px; }
.skip-link:nth-child(4):focus-visible { top: 224px; }

/* ---------- A11y toolbar ---------- */
.a11y-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  background: var(--gdr-near-black); color: #fff;
  border: 2px solid var(--gdr-near-black);
  border-radius: var(--r-btn); /* flat — mesmo padrão dos .btn */
  font: inherit; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  line-height: 1;
  cursor: pointer;
}
.a11y-toggle:hover { background: transparent; color: var(--gdr-near-black); }
.a11y-toggle .a11y-toggle__label { display: inline; }
.a11y-toggle .a11y-toggle__icon { font-size: 16px; line-height: 1; }
@media (max-width: 980px) {
  /* A1 fix: sem caixa, só ícone grande */
  .a11y-toggle {
    background: transparent !important;
    border: none !important;
    color: var(--gdr-near-black) !important;
    padding: 8px;
    min-width: 44px; min-height: 44px;
    justify-content: center;
  }
  .a11y-toggle:hover { color: var(--gdr-text-muted) !important; }
  .a11y-toggle .a11y-toggle__label { display: none; }
  .a11y-toggle .a11y-toggle__icon { font-size: 28px; }
}
.a11y-toolbar {
  position: fixed; top: 92px; right: 16px; z-index: 90;
  background: var(--gdr-surface); color: var(--gdr-text);
  border: 3px solid var(--gdr-near-black);
  padding: 24px;
  width: 340px; max-width: calc(100vw - 32px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
  max-height: calc(100vh - 110px); overflow-y: auto;
}
.a11y-toolbar:not([data-open="true"]) {
  display: none;
}
.a11y-toolbar[data-open="true"] { display: block; }
.a11y-toolbar h2 {
  font-size: 20px; margin: 0 0 16px; line-height: 1.3;
  font-weight: 700; color: var(--gdr-green-dark);
}
.a11y-toolbar fieldset {
  border: 1px solid var(--gdr-border); padding: 12px 14px; margin: 0 0 12px;
}
.a11y-toolbar legend {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0 6px; color: var(--gdr-green-dark);
}
.a11y-toolbar .row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.a11y-toolbar button.opt {
  flex: 1; min-width: 64px; min-height: 44px;
  padding: 8px 12px; background: var(--gdr-surface);
  border: 2px solid var(--gdr-text); color: var(--gdr-text);
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.a11y-toolbar button.opt[aria-pressed="true"] {
  background: var(--gdr-green-dark); color: #fff; border-color: var(--gdr-green-dark);
}
.a11y-toolbar .help {
  font-size: 13px; margin: 4px 0 0; color: var(--gdr-text-muted);
}
.a11y-toolbar .reset {
  width: 100%; margin-top: 8px;
  padding: 12px; min-height: var(--target-min);
  background: var(--gdr-text); color: #fff;
  border: none; font: inherit; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}

/* Reading ruler */
body[data-ruler="on"]::after {
  content: '';
  position: fixed; left: 0; right: 0;
  height: 64px;
  background: rgba(16, 16, 16, 0.10);
  border-top: 2px solid var(--gdr-near-black);
  border-bottom: 2px solid var(--gdr-near-black);
  pointer-events: none;
  z-index: 80;
  top: var(--ruler-top, 50%);
}

/* Live region */
.live-region {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.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;
}
.container { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-lg); }
.container--narrow { max-width: 62ch; }

.wf-section-marker {
  display: none;
  position: absolute; left: 16px; top: 16px;
  background: var(--gdr-near-black); color: #fff;
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  padding: 4px 10px; z-index: 5;
}

/* =====================================================================
   HEADER
===================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--gdr-surface);
  border-bottom: 1px solid var(--gdr-border);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  max-width: 1280px; margin: 0 auto;
}
.site-header__logo {
  display: inline-flex; align-items: center;
  min-height: var(--target-min);
  padding: 4px 0;
  flex-shrink: 0;
}
.site-header__logo img { height: 48px; width: auto; }

.site-nav { flex: 1; }
.site-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 6px; align-items: center;
  justify-content: center;   /* menu equilibrado/centralizado no desktop */
}
.site-nav__list a {
  display: inline-flex; align-items: center;
  min-height: var(--target-min);
  padding: 12px 16px;
  color: var(--gdr-text); text-decoration: none;
  font-size: 16px; font-weight: 500;
  border-bottom: 4px solid transparent;
}
.site-nav__list a:hover { color: var(--gdr-green-dark); border-bottom-color: var(--gdr-green-dark); }
.site-nav__list a[aria-current="page"] {
  color: var(--gdr-green-dark);
  border-bottom-color: var(--gdr-green-dark);
  font-weight: 700;
}
.site-nav__list a[aria-haspopup="true"]::after {
  content: ' ▾'; font-size: 12px; margin-left: 4px;
}
/* Login só aparece no menu mobile (no desktop fica no header-actions) */
.site-nav__list-item--mobile { display: none; }
@media (max-width: 980px) {
  .site-nav__list-item--mobile { display: list-item; }
}

.header-actions { display: flex; gap: var(--space-xs); align-items: center; flex-shrink: 0; }
/* Seletor de idioma (bandeira EUA → versão em inglês) — minimalista */
.header-lang { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: var(--r-sm); }
.header-lang img, .header-lang svg {
  display: block; width: 22px; height: auto; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.10); opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}
.header-lang:hover img, .header-lang:focus-visible img,
.header-lang:hover svg, .header-lang:focus-visible svg { opacity: 1; transform: translateY(-1px); }
.header-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 10px 18px;
  font-size: 13px; font-weight: 700;
  text-decoration: none; color: var(--gdr-near-black);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 2px solid var(--gdr-near-black);
  border-radius: var(--r-btn); /* flat — mesmo padrão dos .btn */
  background: transparent;
  line-height: 1;
}
.header-link:hover { background: var(--gdr-near-black); color: #fff; }

.nav-toggle {
  display: none;
  min-height: 44px; min-width: 44px;
  background: transparent; color: var(--gdr-near-black); border: none;
  font-size: 28px; line-height: 1; cursor: pointer;
  padding: 8px;
  align-items: center; justify-content: center;
}
.nav-toggle:hover { color: var(--gdr-text-muted); }
@media (max-width: 980px) {
  /* A2 fix: hamburger sem caixa, à direita perto da engrenagem (via order flex) */
  .nav-toggle {
    display: inline-flex;
    order: 3;                      /* depois das header-actions */
  }
  .site-header__inner { gap: 8px; }
  .site-header__logo { margin-right: auto; }   /* logo na esquerda; resto na direita */

  /* A3 fix: dropdown menu suavizado (max-height transition) + letras maiores */
  .site-nav {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--gdr-surface);
    border-bottom: 1px solid var(--gdr-border);
    padding: 0 var(--space-lg);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 240ms ease,
                padding 240ms ease;
    pointer-events: none;
  }
  .site-nav[data-open="true"] {
    max-height: calc(100vh - 88px);
    opacity: 1;
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    pointer-events: auto;
    box-shadow: 0 16px 32px rgba(0,0,0,0.08);
  }
  .site-nav__list { flex-direction: column; gap: 4px; align-items: stretch; }
  .site-nav__list a {
    width: 100%;
    padding: 18px 8px;
    font-size: 20px;
    font-weight: 500;
    border-bottom: 1px solid var(--gdr-border);
    min-height: 60px;
  }
  .site-nav__list li:last-child a { border-bottom: none; }
  /* Mobile: mantém as bandeiras (PT/EN/ES) visíveis no header, igual ao desktop;
     só o botão Login desce pro menu hambúrguer. */
  .header-actions { display: flex; order: 2; gap: 6px; }
  .header-actions .header-link { display: none; }
  .header-actions .header-lang { display: inline-flex; }
  /* Os itens de idioma em texto no menu ficam redundantes com as bandeiras */
  .site-nav__list .gr-langitem { display: none; }
  /* Logo encolhe pra abrir espaço pras bandeiras + hambúrguer */
  .site-header__logo img { height: 40px; }
}

/* Telas estreitas: aperta o header pras 3 bandeiras + hambúrguer caberem */
@media (max-width: 480px) {
  .site-header__inner { padding-left: 16px; padding-right: 16px; gap: 6px; }
  .site-header__logo img { height: 34px; }
  .header-actions { gap: 3px; }
  .header-lang { padding: 4px 3px; }
}

main { outline: none; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  min-height: var(--target-min);
  padding: 16px 28px;
  background: var(--gdr-green-dark); color: #fff;
  border: 2px solid var(--gdr-green-dark);
  font: inherit; font-size: 14px; font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: var(--r-btn);
}
.btn:hover { background: var(--gdr-near-black); border-color: var(--gdr-near-black); }
.btn--white {
  background: #fff; color: var(--gdr-green-dark); border-color: #fff;
}
.btn--white:hover { background: var(--gdr-near-black); border-color: var(--gdr-near-black); color: #ffffff; }
.btn--ghost-white {
  background: transparent; color: #fff; border-color: #fff;
}
.btn--ghost-white:hover { background: #fff; color: var(--gdr-green-dark); }
/* Variante ghost para usar em fundos claros (texto + borda verde oliva) */
.btn--ghost {
  background: transparent;
  color: var(--gdr-green-dark);
  border-color: var(--gdr-green-dark);
}
.btn--ghost:hover {
  background: var(--gdr-green-dark);
  color: #ffffff;
}

/* =====================================================================
   1 · HERO — full-bleed (On essence) com brand
===================================================================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 86vh;
  background: var(--gdr-near-black);
  display: flex; align-items: center;
  padding: 96px 0 80px;
}
.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 1280px; margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 1100px) and (min-width: 981px) {
  /* I3 fix: dá mais espaço ao vídeo em laptop intermediário (minmax permite shrink) */
  .hero__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 48px;
  }
  .hero__content { max-width: 100%; }
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-xl); }
  .hero { padding: 64px 0; }
}
.hero__bg-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Vídeo de background da hero (autoplay/mute/loop) */
.hero__video-bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__video-bg video {
  position: absolute;
  top: 50%; left: 50%;
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(100vh, calc(100vw * 9 / 16));
  transform: translate(-50%, -50%);
  pointer-events: none;
}
/* Película (overlay) por cima do vídeo — gradient horizontal:
   esquerda escura pra legibilidade do texto, direita limpa pra ver o vídeo */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(10,20,8,0.92) 0%,
      rgba(15,30,12,0.78) 20%,
      rgba(20,40,18,0.42) 40%,
      rgba(36,70,33,0.14) 62%,
      rgba(36,70,33,0.04) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.22) 100%);
  pointer-events: none;
}
.hero__bg-abstract {
  /* Glow sutil sobre a película — mantém DNA visual sem competir com o vídeo */
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,0.06) 0, transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(255,255,255,0.04) 0, transparent 40%);
}
.hero__bg-abstract::before,
.hero__bg-abstract::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
}
.hero__bg-abstract::before {
  width: 600px; height: 600px;
  background: rgba(255, 255, 255, 0.06);  /* era verde 0.22 → branco discreto */
  top: -200px; left: -150px;
}
.hero__bg-abstract::after {
  width: 400px; height: 400px;
  background: rgba(44, 132, 55, 0.14);    /* o único acento verde, no canto oposto */
  bottom: -100px; right: -100px;
}
.hero__shapes {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hero__shapes svg {
  position: absolute;
  opacity: 0.18;
}
.hero__content {
  text-align: left;
  color: #ffffff;
  max-width: 620px;
}
/* Botão de play do hero — lado direito */
.hero__play-wrap {
  position: relative; z-index: 3;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.hero-play {
  position: relative;
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  width: clamp(220px, 28vw, 320px);
  aspect-ratio: 1 / 1;
  padding: 0;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1), background 280ms ease, border-color 280ms ease;
}
.hero-play::before {
  /* Pulse decorativo ao redor */
  content: '';
  position: absolute; inset: -10px;
  border: 1.5px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  animation: hero-play-pulse 2.4s ease-out infinite;
}
@keyframes hero-play-pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  100% { transform: scale(1.18); opacity: 0;   }
}
.hero-play:hover,
.hero-play:focus-visible {
  background: rgba(255,255,255,0.12);
  border-color: #fff;
  transform: scale(1.04);
}
.hero-play:focus-visible { outline: var(--focus-ring); outline-offset: 6px; }
.hero-play__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px;
  border-radius: 50%;
  background: #fff;
  color: var(--gdr-green-dark);
  padding-left: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.hero-play:hover .hero-play__icon { transform: scale(1.08); }
.hero-play__text {
  font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  text-align: center; line-height: 1.3;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
@media (prefers-reduced-motion: reduce) {
  .hero-play::before { animation: none; }
}
/* Moldura clicável com thumbnail (mobile-only) */
.hero-video-card {
  display: none;
  position: relative;
  width: 100%; max-width: 520px;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: #000;
  border: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  box-shadow: 0 20px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.hero-video-card:hover,
.hero-video-card:focus-visible { transform: scale(1.02); }
.hero-video-card:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.hero-video-card__thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-video-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,40,18,0.25) 0%, rgba(20,40,18,0.55) 100%);
}
.hero-video-card__play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--gdr-green-dark);
  padding-left: 4px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.hero-video-card__label {
  position: absolute; left: 0; right: 0; bottom: 14px;
  text-align: center;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

@media (max-width: 980px) {
  /* Hero compactado pra thumb caber inteira na primeira dobra */
  .hero { min-height: auto; padding: 40px 0 32px; }
  .hero__inner { gap: var(--space-lg); }
  .hero__play-wrap { margin-top: var(--space-sm); }
  /* Mobile: esconde o vídeo de background (pesado + autoplay bloqueado iOS) */
  .hero__video-bg { display: none; }
  /* Fundo sólido em verde oliva no lugar do vídeo */
  .hero__overlay {
    background: linear-gradient(180deg, var(--gdr-green-dark) 0%, var(--gdr-green) 100%);
  }
  /* Esconde o botão circular, mostra a moldura com thumbnail */
  .hero-play { display: none; }
  .hero-video-card { display: block; margin: 0 auto; width: 100%; max-width: 480px; }
}
@media (max-width: 480px) {
  .hero-video-card__play { width: 56px; height: 56px; }
  .hero-video-card__play svg { width: 26px; height: 26px; }
  .hero-video-card__label { font-size: 12px; letter-spacing: 0.1em; bottom: 10px; }
}

/* Modal do vídeo (abre ao clicar no play) */
.video-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.video-modal[hidden] { display: none; }
.video-modal__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  animation: modal-fade-in 200ms ease-out;
}
.video-modal__dialog {
  position: relative;
  width: 100%; max-width: 1100px;
  animation: modal-zoom-in 280ms cubic-bezier(0.16,1,0.3,1);
}
.video-modal__close {
  position: absolute; top: -56px; right: 0;
  width: 48px; height: 48px;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  color: #fff;
  font-size: 28px; line-height: 1;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 180ms ease, border-color 180ms ease;
}
.video-modal__close:hover,
.video-modal__close:focus-visible {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}
.video-modal__close:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.video-modal__frame {
  position: relative;
  width: 100%; aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.video-modal__frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
}
@keyframes modal-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes modal-zoom-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .video-modal__overlay,
  .video-modal__dialog { animation: none; }
}
@media (max-width: 980px) {
  .hero__content { max-width: none; text-align: center; margin: 0 auto; }
  .hero__ctas { justify-content: center; }
}
.hero h1 {
  font-size: var(--text-h1);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0 0 28px;
  text-shadow: 0 2px 16px rgba(0,0,0,0.8), 0 0 32px rgba(0,0,0,0.5);
}
.hero h1 strong { font-weight: 700; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 var(--space-lg);
}
.hero__eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: rgba(255, 255, 255, 0.4);
  display: inline-block;
}
.hero__tagline {
  font-size: clamp(13px, calc(1.2vw * var(--font-scale)), 15px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin: 0 0 var(--space-xl);
  color: rgba(255, 255, 255, 0.7);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.hero__tagline span:not(.annot) { display: inline; }
@media (max-width: 980px) {
  /* Mobile: eyebrow sem linha decorativa (texto centralizado), tagline +2px e em 2 linhas */
  .hero__eyebrow::before { display: none; }
  .hero__eyebrow { display: inline-block; }
  .hero__tagline { font-size: 15px; line-height: 1.5; }
  .hero__tagline span:not(.annot) { display: block; }
}
.hero__ctas {
  display: flex; gap: var(--space-md); justify-content: flex-start; flex-wrap: nowrap;
}
.hero__ctas .btn {
  flex: 0 1 auto;
  white-space: nowrap;
}
/* S2 — Hierarquia primário vs secundário no hero */
.hero__ctas .btn--white {
  padding: 18px 34px;
  font-size: 15px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.hero__ctas .btn--ghost-white {
  border-width: 1.5px;
  opacity: 0.88;
  transition: opacity 200ms ease, background 200ms ease, color 200ms ease;
}
.hero__ctas .btn--ghost-white:hover,
.hero__ctas .btn--ghost-white:focus-visible { opacity: 1; }
@media (max-width: 480px) {
  .hero__ctas { flex-wrap: wrap; }
  .hero__ctas .btn { flex: 1 1 100%; white-space: normal; }
}

/* =====================================================================
   2 · CERTIFICAÇÃO — texto puro
===================================================================== */
.pure-text {
  position: relative;
  padding: var(--space-section) var(--space-lg);
  text-align: center;
  background: var(--gdr-surface);
}
.pure-text__inner { max-width: 62ch; margin: 0 auto; }

/* A4 fix: variante com placa de certificação ao lado */
.pure-text--with-image .pure-text__inner {
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-2xl);
  align-items: center;
  text-align: left;
}
.pure-text--with-image .pure-text__text { max-width: 60ch; }
.pure-text--with-image .eyebrow { margin-bottom: var(--space-md); }
.pure-text__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  align-items: stretch;
}
.pure-text__ctas .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .pure-text__ctas { flex-direction: column; align-items: stretch; }
  .pure-text__ctas .btn { width: 100%; white-space: normal; text-align: center; justify-content: center; }
}
.pure-text--with-image .pure-text__placa {
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
}
.pure-text--with-image .pure-text__placa img {
  width: 100%;
  max-width: 360px;
  height: auto;
  filter: drop-shadow(0 24px 48px rgba(0,0,0,0.18));
}
/* Variante vídeo (Reel 9:16) na coluna direita da seção Certificação */
.pure-text--with-image .pure-text__placa--video { padding: 0; }
.pure-text--with-image .pure-text__reel {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  height: auto;
  display: block;
  border-radius: var(--r-card);
  background: var(--gdr-green-dark);
  object-fit: cover;
  box-shadow: 0 24px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05);
}
@media (max-width: 900px) {
  .pure-text--with-image .pure-text__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
  }
  .pure-text--with-image .pure-text__text { max-width: none; margin: 0 auto; }
  .pure-text--with-image .pure-text__placa { order: -1; padding: 0; }
  .pure-text--with-image .pure-text__placa img { max-width: 240px; }
  .pure-text--with-image .pure-text__reel { max-width: 240px; }
}
.eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gdr-green-dark);
  margin: 0 0 var(--space-lg);
}
.pure-text h2 {
  font-size: var(--text-h2);
  line-height: 1.22; letter-spacing: 0;
  font-weight: 300;
  margin: 0 0 var(--space-lg);
  color: var(--gdr-text);
}
.pure-text .subhead {
  font-size: var(--text-lead);
  line-height: 1.4; font-weight: 400;
  font-style: italic;
  color: var(--gdr-text-muted);
  margin: 0 0 var(--space-xl);
}
.pure-text p.body {
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--gdr-text);
  margin: 0 0 var(--space-lg);
}

/* =====================================================================
   3 · SPOTLIGHT GRESB — Parceiro Internacional
===================================================================== */
.spotlight {
  position: relative; overflow: hidden;
  min-height: 56vh;
  display: flex; align-items: center; justify-content: center;
  /* Degradê verde oliva → preto (cor oficial Guiaderodas) */
  background:
    linear-gradient(135deg, var(--gdr-green-dark) 0%, var(--gdr-near-black) 100%);
  color: #fff;
}
.spotlight__bg-photo {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0.22;
}
.spotlight::after {
  /* Overlay sutil pra dar profundidade — gradient não-chapado */
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 0%, transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}
/* Variante com foto de fundo (ex: Parceiro Internacional GRESB) — foto + overlay verde oliva mais presente */
.spotlight--photo .spotlight__bg-photo { opacity: 0.6; }
.spotlight--photo::after {
  background: linear-gradient(180deg, rgba(36,70,33,0.55) 0%, rgba(20,40,18,0.75) 100%);
  mix-blend-mode: multiply;
}
.spotlight__content {
  position: relative; z-index: 2;
  text-align: center;
  padding: 80px var(--space-lg);
  max-width: 1000px;
}
.spotlight .eyebrow { color: rgba(255, 255, 255, 0.85); }
.spotlight h2 {
  font-size: var(--text-h2);
  line-height: 1.22;
  font-weight: 300;
  margin: 0 0 var(--space-lg);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.spotlight__partner {
  margin-top: var(--space-xl);
  display: inline-flex; flex-direction: column; align-items: center;
  gap: var(--space-sm);
}
.spotlight__partner img {
  height: 80px; width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.spotlight__partner-caption {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* =====================================================================
   4 e 7 · CAROUSELS
===================================================================== */
.carousel-section {
  padding: var(--space-section) 0;
  position: relative;
  background: var(--gdr-surface);
}
.carousel-section--alt { background: var(--gdr-subtle); }

.carousel-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-lg); flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto var(--space-xl);
  padding: 0 var(--space-lg);
}
.carousel-head h2 {
  font-size: var(--text-h2);
  line-height: 1.22; letter-spacing: 0;
  font-weight: 300; margin: 0;
  max-width: 700px;
  color: var(--gdr-text);
}
.carousel-head .lede {
  font-size: var(--text-body); color: var(--gdr-text-muted);
  max-width: 560px; margin: 8px 0 0;
  line-height: 1.5;
}
.carousel-controls { display: flex; gap: 8px; align-items: center; }
.carousel-controls button {
  width: var(--target-min); height: var(--target-min);
  background: var(--gdr-surface); border: 1.5px solid var(--gdr-border);
  color: var(--gdr-green-dark); cursor: pointer;
  font-size: 20px; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.carousel-controls button:hover {
  background: var(--gdr-surface);
  border-color: var(--gdr-green-dark);
  color: var(--gdr-green);
}
.carousel-controls button:disabled {
  opacity: 0.35; cursor: not-allowed;
  background: transparent;
}
/* v1.2 — Barra de progresso do carrossel */
.carousel-progress {
  display: inline-block;
  width: 80px; height: 4px;
  margin: 0 4px 0 8px;
  background: var(--gdr-border);
  border-radius: 2px;
  position: relative; overflow: hidden;
  align-self: center;
}
.carousel-progress::before {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: var(--progress, 0%);
  background: var(--gdr-green-dark);
  border-radius: 2px;
  transition: width 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (max-width: 600px) {
  .carousel-progress { width: 56px; }
}
.carousel-status {
  font-size: 14px; font-weight: 700;
  margin: 0 12px; min-width: 64px; text-align: center;
  color: var(--gdr-text-muted);
}

.carousel-track {
  display: flex; gap: var(--space-lg);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 8px var(--space-lg) 24px;
  scroll-padding-left: var(--space-lg);
  -webkit-overflow-scrolling: touch;
}
.carousel-track:focus-visible { outline: var(--focus-ring); outline-offset: 0; }
.carousel-track::-webkit-scrollbar { height: 12px; }
.carousel-track::-webkit-scrollbar-track { background: var(--gdr-subtle); }
.carousel-track::-webkit-scrollbar-thumb { background: var(--gdr-green-dark); }

/* Story card */
.story-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: var(--gdr-surface);
  border: 1px solid var(--gdr-border);
  border-radius: var(--r-card);
  text-decoration: none;
  color: var(--gdr-text);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.story-card:hover {
  border-color: var(--gdr-green-dark);
  box-shadow: 0 12px 32px rgba(36, 70, 33, 0.18);
}
.story-card:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.story-card__media {
  /* Foto real do case (uber, sap, mondelez, roche, totvs) com overlay verde oliva */
  position: relative;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(135deg, var(--gdr-green-dark) 0%, var(--gdr-green) 100%);
  overflow: hidden;
}
.story-card__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* Foto recebe leve dessaturação + escurecimento pra integrar à paleta verde oliva */
  filter: saturate(0.92) brightness(1);
  transition: filter 280ms ease, transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.story-card__media::after {
  /* Película verde oliva sobre a foto — clareada ~30% para foto mais visível */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(36,70,33,0.16) 0%, rgba(20,40,18,0.36) 100%);
  pointer-events: none;
  mix-blend-mode: multiply;
}
.story-card:hover .story-card__media img,
.story-card:focus-visible .story-card__media img {
  transform: scale(1.04);
  filter: saturate(1) brightness(1);
}
.story-card__body { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); }
.story-card__label {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gdr-green-dark);
  margin: 0;
}

/* Status badges — texto + ícone + cor + border */
.story-card__status {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  padding: 4px 10px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 4px;
}
.story-card__status[data-status="em-certificacao"] {
  background: transparent;
  color: var(--gdr-text);
  border: 1.5px solid var(--gdr-text);
}
.story-card__status[data-status="em-certificacao"]::before { content: '◷'; font-size: 14px; }
.story-card__status[data-status="certificado"] {
  background: var(--gdr-near-black); color: #fff;
  border: 1.5px solid var(--gdr-near-black);
}
.story-card__status[data-status="certificado"]::before { content: '✓'; font-size: 14px; }

.story-card__title {
  font-size: var(--text-h3);
  line-height: 1.3; margin: 0;
  font-weight: 700; color: var(--gdr-text);
}
.story-card__desc {
  font-size: 15px; line-height: 1.55;
  color: var(--gdr-text-muted); margin: 0;
  flex: 1;
}
.story-card__meta {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gdr-green-dark);
  margin: 0; padding-top: 8px;
}
.story-card__link {
  margin-top: 4px;
  font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
  color: var(--gdr-green-dark);
  text-transform: uppercase; letter-spacing: 0.04em;
}

@media (max-width: 600px) {
  /* Card e meio visível no mobile (decisão de reunião 2026-05-22): indica scroll lateral. */
  .story-card { flex-basis: 70vw; }
}

.carousel-footer { text-align: center; padding: var(--space-xl) var(--space-lg) 0; }

/* =====================================================================
   6 · GUI FEATURES — grid + ilustração do mascote
===================================================================== */
.gui-section { padding: var(--space-section) 0; background: var(--gdr-surface); }
.gui-head {
  text-align: center; max-width: 64ch;
  margin: 0 auto var(--space-2xl); padding: 0 var(--space-lg);
}
.gui-head img.gui-mascot {
  width: 160px; height: auto;
  margin: 0 auto var(--space-lg);
}
.gui-head h2 {
  font-size: var(--text-h2); line-height: 1.22;
  font-weight: 300; margin: 0 0 var(--space-md);
  color: var(--gdr-text);
}
.gui-head .subhead {
  font-size: var(--text-lead); color: var(--gdr-green-dark);
  font-weight: 700; line-height: 1.4; margin: 0;
  font-style: italic;
}
.gui-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  padding: 0 var(--space-lg);
  max-width: 1280px; margin: 0 auto;
  list-style: none;
}
@media (max-width: 1024px) {
  .gui-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .gui-grid { grid-template-columns: 1fr; }
}
.gui-feature {
  background: var(--gdr-subtle);
  border-radius: var(--r-card);
  padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-sm);
  border-top: 4px solid var(--gdr-green-dark);
}
.gui-feature__num {
  font-size: 32px; font-weight: 900;
  color: var(--gdr-green-dark);
  margin: 0; line-height: 1;
}
.gui-feature h3 {
  font-size: var(--text-h3); line-height: 1.3;
  font-weight: 700; margin: 0;
}
.gui-feature p {
  font-size: 16px; line-height: 1.55;
  color: var(--gdr-text-muted); margin: 0;
}
.gui-footer { text-align: center; padding: var(--space-2xl) var(--space-lg) 0; }

/* WhatsApp CTA com cor verde do WhatsApp não — manter brand */
/* I2 fix: WhatsApp green oficial (#25D366) só no botão WhatsApp do Gui */
.btn--wa {
  gap: var(--space-xs);
  background: #25D366;
  border-color: #25D366;
  color: #ffffff;
}
.btn--wa:hover { background: #1da955; border-color: #1da955; }
.btn--wa::before { content: '💬'; font-size: 18px; }

/* =====================================================================
   8 · APOIADORES — logos reais
===================================================================== */
.supporters {
  padding: var(--space-section) 0;
  background: var(--gdr-subtle);
}
.supporters__head {
  text-align: center; margin-bottom: var(--space-xl);
}
.supporters__head h2 {
  font-size: 24px; font-weight: 300;
  color: var(--gdr-text); margin: 0;
}
.supporters__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: var(--space-lg); align-items: center;
  max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg);
}
.supporters__grid li {
  list-style: none;
  background: var(--gdr-surface);
  border: 1px solid var(--gdr-border);
  border-radius: var(--r-card);
  padding: var(--space-lg);
  display: flex; align-items: center; justify-content: center;
  min-height: 100px;
  transition: border-color 200ms ease;
}
.supporters__grid li:hover { border-color: var(--gdr-green-dark); }
.supporters__grid img { max-height: 64px; width: auto; object-fit: contain; }
@media (max-width: 980px) {
  .supporters__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .supporters__grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   9 · CONTATO
===================================================================== */
.contact-block {
  padding: var(--space-section) var(--space-lg);
  text-align: center;
  background: var(--gdr-surface);
  color: var(--gdr-text);
  border-top: 1px solid var(--gdr-border);
  border-bottom: 1px solid var(--gdr-border);
}
.contact-block h2 {
  font-size: var(--text-h2);
  line-height: 1.22; font-weight: 300;
  margin: 0 0 var(--space-lg);
}
.contact-email {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: var(--target-min);
  font-size: clamp(20px, calc(2.2vw * var(--font-scale)), 32px);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 2px;
  color: var(--gdr-near-black);
  padding: 16px 24px;
}
.contact-email:hover {
  background: var(--gdr-near-black);
  color: #fff;
  text-decoration-color: #fff;
}
.contact-email::before { content: '✉'; font-size: 0.9em; }

/* =====================================================================
   FOOTER
===================================================================== */
.site-footer {
  background: var(--gdr-green-dark); color: #fff;
  padding: var(--space-section) 0 var(--space-lg);
}
.site-footer a {
  color: #fff; text-decoration: underline;
  text-underline-offset: 4px;
}
.site-footer a:focus-visible {
  background: #ffffff; color: var(--gdr-near-black);
  text-decoration: none; outline: var(--focus-ring);
}

.footer-top {
  text-align: center; max-width: 800px; margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-lg);
}
.footer-top img { height: 56px; width: auto; margin: 0 auto var(--space-lg); }
.footer-top h3 {
  font-size: var(--text-h2); line-height: 1.22;
  font-weight: 400; margin: 0;
  color: #ffffff;
  font-style: normal;
  text-transform: uppercase;
}
.footer-top h3 .line { display: inline; }
@media (min-width: 980px) {
  .footer-top h3 { font-weight: 300; font-style: normal; }
}
@media (max-width: 700px) {
  /* Mobile: sempre quebra na vírgula pra não cortar palavra ("é boa para todos" embaixo) */
  .footer-top h3 .line { display: block; }
}

.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
  max-width: 1280px; margin: 0 auto var(--space-xl);
  padding: 0 var(--space-lg);
}
@media (max-width: 768px) {
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}
.footer-grid h4 {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin: 0 0 var(--space-md);
  color: #ffffff;
  opacity: 0.85;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li {
  margin-bottom: 10px;
  font-size: 15px; line-height: 1.5;
}
.footer-grid a { display: inline-block; padding: 4px 0; }

.footer-badges {
  max-width: 1280px; margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) 0;
  display: flex; gap: var(--space-lg); flex-wrap: wrap; align-items: center;
}
.footer-badge {
  display: inline-flex; align-items: center;
  text-decoration: none;
  transition: opacity 200ms ease;
}
.footer-badge:hover { opacity: 0.85; }
.footer-badge img {
  height: 64px; width: auto;
}
/* Selo Amigo do Surdo — 15% maior + sobe 10px do rodapé */
.footer-badge--amigo-surdo { margin-bottom: 10px; }
.footer-badge--amigo-surdo img { height: 74px; }

.footer-legal {
  max-width: 1280px; margin: 0 auto;
  padding: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 14px; opacity: 0.85;
  display: flex; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}

/* =====================================================================
   FORM — bloco de contato (adição estrutural ao site original)
===================================================================== */
.contact-section {
  background: var(--gdr-subtle);
  padding: var(--space-section) 0;
}
.contact-grid {
  max-width: 1100px; margin: 0 auto;
  padding: 0 var(--space-lg);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
}
.contact-intro h2 {
  font-size: var(--text-h2);
  line-height: 1.22; font-weight: 300;
  margin: 0 0 var(--space-md);
  color: var(--gdr-text);
}
.contact-intro p {
  font-size: var(--text-lead);
  line-height: 1.55; color: var(--gdr-text-muted);
  margin: 0 0 var(--space-xl);
}
.contact-channels {
  display: flex; flex-direction: column; gap: var(--space-md);
  margin-top: var(--space-xl);
}
.contact-channel {
  display: flex; align-items: center; gap: var(--space-md);
  background: var(--gdr-surface);
  border: 2px solid var(--gdr-border);
  border-radius: var(--r-card);
  padding: var(--space-md) var(--space-lg);
  min-height: var(--target-min);
  text-decoration: none; color: var(--gdr-text);
  font-weight: 500;
}
.contact-channel:hover { border-color: var(--gdr-green-dark); }
.contact-channel__icon {
  width: 32px; height: 32px;
  background: transparent;
  color: var(--gdr-green-dark);
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-channel__icon svg {
  width: 28px; height: 28px;
  fill: currentColor;
  display: block;
}
.contact-channel__label {
  display: block;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gdr-green-dark);
}
.contact-channel__value {
  display: block;
  font-size: 16px; font-weight: 700;
  color: var(--gdr-text);
}

/* Form */
.contact-form {
  background: var(--gdr-surface);
  border: 2px solid var(--gdr-border);
  border-radius: var(--r-card);
  padding: var(--space-xl);
}
.contact-form fieldset {
  border: none; padding: 0; margin: 0;
}
.contact-form legend {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--gdr-green-dark);
  margin: 0 0 var(--space-md); padding: 0;
}
.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: var(--space-lg);
}
.field label {
  font-size: 14px; font-weight: 700;
  color: var(--gdr-text);
}
.field .req {
  color: #c40010;            /* contraste 6.5:1 em branco */
  font-weight: 900;
  margin-left: 2px;
}
.field .helper {
  font-size: 13px; color: var(--gdr-text-muted);
  margin: 0;
}
.field input,
.field select,
.field textarea {
  font: inherit; font-size: 16px;
  padding: 14px 16px;
  background: var(--gdr-surface);
  color: var(--gdr-text);
  border: 2px solid var(--gdr-border);
  border-radius: var(--r-input);
  min-height: var(--target-min);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gdr-green-dark);
  outline: var(--focus-ring);
  outline-offset: 0;
  box-shadow: var(--focus-shadow);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: #c40010;
}
.field-error {
  display: none;
  font-size: 13px; font-weight: 600;
  color: #c40010;
  margin-top: 2px;
}
.field-error::before { content: '⚠ '; font-weight: 700; }
.field[data-invalid="true"] .field-error { display: block; }

.checkbox-field {
  display: flex; gap: var(--space-md);
  align-items: flex-start;
  margin-bottom: var(--space-lg);
}
.checkbox-field input[type="checkbox"] {
  width: 28px; height: 28px;
  margin: 0; flex-shrink: 0;
  accent-color: var(--gdr-green-dark);
  cursor: pointer;
}
.checkbox-field label {
  font-size: 14px; line-height: 1.5;
  color: var(--gdr-text-muted);
  cursor: pointer;
}
.checkbox-field label a {
  color: var(--gdr-green-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-submit {
  width: 100%;
  margin-top: var(--space-md);
  padding: 18px 28px;
}

.form-status {
  display: none;
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--gdr-green-dark);
  background: rgba(60, 167, 72, 0.1);
  color: var(--gdr-near-black);
  font-weight: 500;
}
.form-status[data-show="true"] { display: block; }

/* =====================================================================
   FAIXA — Clientes Certificados (após hero, antes da §2)
===================================================================== */
/* A5: faixa Clientes Certificados como carrossel infinito automático */
.clients-strip {
  background: var(--gdr-surface);
  border-bottom: 1px solid var(--gdr-border);
  padding: var(--space-xl) 0;
}
.clients-strip__inner {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-xl);
  align-items: center;
}
.clients-strip__label {
  padding-left: var(--space-lg);
  border-right: 1px solid var(--gdr-border);
  padding-right: var(--space-lg);
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gdr-green-dark);
  line-height: 1.4;
}
.clients-marquee {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 60px,
    #000 calc(100% - 60px),
    transparent 100%);
  padding-right: var(--space-lg);
}
.clients-marquee__track {
  display: flex; gap: var(--space-md);
  width: max-content;
  /* S4 — velocidade adaptativa por viewport */
  animation: marquee-scroll clamp(32s, 7vw + 22s, 60s) linear infinite;
}
.clients-marquee:hover .clients-marquee__track,
.clients-marquee:focus-within .clients-marquee__track {
  animation-play-state: paused;
}
.client-card {
  flex-shrink: 0;
  background: var(--gdr-surface);
  border: 1.5px solid var(--gdr-border);
  border-radius: var(--r-card);
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 200px; height: 80px;
  text-decoration: none;
  color: var(--gdr-text);
  transition: border-color 200ms ease;
}
.client-card:hover { border-color: var(--gdr-near-black); }
.client-card__name {
  font-size: 16px; font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.15;
}
.client-card__location {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--gdr-text-muted);
  margin-top: 4px;
}
.client-card__status-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.client-card__status-dot--certificado { background: var(--gdr-near-black); }
.client-card__status-dot--em-certificacao {
  background: transparent;
  border: 1.5px solid var(--gdr-text-muted);
  width: 8px; height: 8px;
}

@media (max-width: 700px) {
  /* I4 + A5: em mobile label vira centralizado acima do marquee */
  .clients-strip__inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    text-align: center;
  }
  .clients-strip__label {
    border-right: none;
    border-bottom: 1px solid var(--gdr-border);
    padding: 0 var(--space-lg) var(--space-sm);
    font-size: 14px;
  }
  .clients-marquee { padding: 0; }
  .clients-marquee__track { animation-duration: 24s; }
  .client-card { min-width: 160px; height: 72px; padding: var(--space-sm) var(--space-md); }
  .client-card__name { font-size: 14px; }
}

/* =====================================================================
   VÍDEO — Filme Único institucional (será exibido como background da hero)
===================================================================== */
.video-section {
  background: var(--gdr-surface);
  padding: var(--space-section) var(--space-lg);
}
.video-section__inner {
  max-width: 1100px; margin: 0 auto;
}
.video-block__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.video-block__label {
  font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--gdr-green-dark);
  margin: 0 0 var(--space-sm);
}
.video-block__title {
  font-size: var(--text-h2); line-height: 1.22;
  font-weight: 300; color: var(--gdr-text); margin: 0;
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--gdr-green-dark) 0%, var(--gdr-green) 100%);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.video-frame__play {
  width: 88px; height: 88px;
  background: rgba(255,255,255,0.95);
  border: 3px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--gdr-near-black);
  padding-left: 6px;
  transition: transform 200ms ease, background 200ms ease;
  pointer-events: none;
}
.video-frame:hover .video-frame__play { transform: scale(1.08); background: #fff; }
.video-frame__caption {
  position: absolute; bottom: var(--space-md); left: var(--space-md);
  color: #fff; font-size: 13px; font-weight: 600;
  background: rgba(0,0,0,0.7); padding: 6px 12px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  pointer-events: none;
}
@media (max-width: 600px) {
  .video-section { padding: var(--space-2xl) var(--space-md); }
  .video-frame__play { width: 64px; height: 64px; font-size: 22px; }
}

/* =====================================================================
   GUI SPLIT — mascote ao lado direito do texto
===================================================================== */
.gui-split {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl); align-items: center;
  max-width: 1200px; margin: 0 auto var(--space-2xl);
  padding: 0 var(--space-lg);
}
.gui-split__text { text-align: left; }
.gui-split__text .eyebrow { display: inline-block; margin-bottom: var(--space-md); }
.gui-split__text h2 {
  font-size: var(--text-h2); line-height: 1.22;
  font-weight: 300; margin: 0 0 var(--space-md);
  color: var(--gdr-text);
}
.gui-split__text .subhead {
  font-size: var(--text-lead); color: var(--gdr-text-muted);
  font-style: italic; margin: 0 0 var(--space-lg);
}
.gui-split__media {
  display: flex; align-items: center; justify-content: center;
}
.gui-split__media img {
  width: 100%; max-width: 320px; height: auto;
}
@media (max-width: 900px) {
  .gui-split { grid-template-columns: 1fr; text-align: center; }
  .gui-split__text { text-align: center; }
  .gui-split__media img { max-width: 220px; }
}
/* I5 fix: compactar seção Gui em mobile (era 2013px → vai pra ~1500px) */
@media (max-width: 600px) {
  .gui-split__media img { max-width: 180px; }
  .gui-section { padding: var(--space-2xl) 0; }
  .gui-head { margin-bottom: var(--space-xl); }
  .gui-feature {
    padding: var(--space-md) var(--space-lg);
    gap: 6px;
  }
  .gui-feature__num { font-size: 24px; }
  .gui-feature h3 { font-size: 18px; }
  .gui-feature p { font-size: 15px; line-height: 1.45; }
  .gui-footer { padding: var(--space-xl) var(--space-lg) 0; }
}

/* =====================================================================
   MARQUEE — Apoiadores em carrossel infinito
===================================================================== */
.marquee {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
}
.marquee__track {
  display: flex; gap: var(--space-xl);
  width: max-content;
  /* S4 — velocidade adaptativa por viewport (mobile passa mais devagar) */
  animation: marquee-scroll clamp(40s, 8vw + 30s, 70s) linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee__item {
  flex-shrink: 0;
  height: 96px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--space-md);
}
.marquee__item img {
  max-height: 56px; width: auto; object-fit: contain;
}
/* Variante logos: sem caixa branca, logos 15% maiores */
.marquee--logos .marquee__item {
  background: transparent;
  border: 0;
  padding: 0 var(--space-lg);
}
.marquee--logos .marquee__item img {
  max-height: 72px;  /* +28% pra dar destaque sem caixa */
}

/* =====================================================================
   AUTO-SCROLL — carrossel infinito automático + drag manual
   Usado em: Locais Certificados (cards) e Apoiadores (logos)
===================================================================== */
.auto-scroll {
  position: relative;
  display: flex;
  gap: var(--space-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: auto;
  cursor: grab;
  padding: 8px var(--space-lg) 24px;
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 80px,
    #000 calc(100% - 80px),
    transparent 100%);
}
.auto-scroll::-webkit-scrollbar { display: none; }
.auto-scroll.is-dragging { cursor: grabbing; user-select: none; }
.auto-scroll.is-dragging * { pointer-events: none; }
.auto-scroll > * { flex-shrink: 0; }
.auto-scroll--cards > .story-card { width: 340px; }
.auto-scroll--logos {
  padding: 24px var(--space-lg);
  gap: var(--space-xl);
}
/* Variante faixa de clientes (Uber/SAP/Mondelez abaixo do hero) */
.auto-scroll--strip {
  padding: 0;
  gap: var(--space-md);
  mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
}
.auto-scroll--logos .marquee__item {
  background: transparent;
  border: 0;
  padding: 0 var(--space-md);
  height: 96px;
  display: flex; align-items: center; justify-content: center;
}
.auto-scroll--logos .marquee__item img {
  max-height: 72px; width: auto; object-fit: contain;
}

/* =====================================================================
   FAB — Estilo do botão flutuante (markup removido da home em 2026-05-22)
   Reuso: ver snippet HTML logo abaixo do bloco @media (max-width: 400px).
   Decisão de reunião: aparece só em páginas de ação social, sem a
   palavra "WhatsApp" no texto visível.
===================================================================== */
/* FAB CTA — botão flutuante "Veja se o seu local está habilitado" (canto inferior esquerdo) */
.fab-cta {
  position: fixed;
  bottom: 15px; left: 15px;
  z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  background: #25D366;
  color: #ffffff;
  border-radius: var(--r-btn);
  padding: 10px 16px 10px 12px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
  transition: transform 200ms ease, box-shadow 200ms ease;
  max-width: calc(100vw - 30px);
}
.fab-cta:hover,
.fab-cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.35);
  color: #fff;
}
.fab-cta:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }
.fab-cta__icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fab-cta__icon svg { width: 32px; height: 32px; fill: currentColor; }
.fab-cta__text {
  display: flex; flex-direction: column;
  font-size: 13px; line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fab-cta__text span { display: block; }
@media (max-width: 480px) {
  .fab-cta { bottom: 12px; left: 12px; padding: 8px 14px 8px 10px; }
  .fab-cta__icon { width: 32px; height: 32px; }
  .fab-cta__icon svg { width: 28px; height: 28px; }
  .fab-cta__text { font-size: 11px; }
}
@media print {
  .fab-cta { display: none; }
}

.fab-gui {
  position: fixed; bottom: 24px; left: 24px; z-index: 80;
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--gdr-surface);
  border: 2px solid var(--gdr-near-black);
  border-radius: var(--r-full);
  padding: 8px 24px 8px 8px;
  min-height: var(--target-min);
  text-decoration: none;
  color: var(--gdr-near-black);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  font-weight: 700;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.fab-gui:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.24);
  background: var(--gdr-near-black);
  color: #fff;
}
.fab-gui__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gdr-subtle);
  border: 2px solid var(--gdr-near-black);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fab-gui__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fab-gui__text {
  display: flex; flex-direction: column;
  line-height: 1.15;
}
.fab-gui__label {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  opacity: 0.7;
}
.fab-gui__value {
  font-size: 15px; font-weight: 700;
}
@media (max-width: 600px) {
  .fab-gui { padding: 6px 18px 6px 6px; bottom: 16px; left: 16px; }
  .fab-gui__label { display: none; }
  .fab-gui__value { font-size: 14px; }
}
/* Em telas muito pequenas vira avatar circular com pequeno indicador de chat ativo */
@media (max-width: 400px) {
  .fab-gui {
    width: 56px; height: 56px;
    padding: 4px; border-radius: 50%;
    justify-content: center;
    gap: 0;
    overflow: visible;
  }
  .fab-gui__avatar {
    width: 100%; height: 100%;
    border-width: 0;
  }
  .fab-gui__text { display: none; }
  .fab-gui::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    background: var(--gdr-green);
    border: 2px solid var(--gdr-surface);
    border-radius: 50%;
    right: -2px; bottom: -2px;
  }
}

/* =====================================================================
   FAB do Gui — SNIPPET PARA PÁGINAS DE AÇÃO SOCIAL
   Cole o markup abaixo dentro do <body> de qualquer página de ação
   social do site (ex: /conheca-o-gui, /ideia-boa-para-todos). Decisão
   da reunião 2026-05-22: o FAB não aparece na home; só onde a narrativa
   for ação social. Texto sem a palavra "WhatsApp".

   <a class="fab-gui"
      href="https://api.whatsapp.com/send?phone=+5511914614421&text=Oi+Gui%2C+como+voc%C3%AA+pode+me+ajudar%3F"
      rel="noopener"
      aria-label="Fale com o Gui, consultor de acessibilidade Guiaderodas">
     <span class="fab-gui__avatar">
       <img src="https://guiaderodas.com/wp-content/uploads/2025/07/GUI.png"
            alt=""
            aria-hidden="true"
            class="keep-on-no-img">
     </span>
     <span class="fab-gui__text">
       <span class="fab-gui__label">Ação Social</span>
       <span class="fab-gui__value">Fale com o Gui</span>
     </span>
   </a>

   Notas operacionais:
   1. Prompt do Gui no Boardmaker deve ser ajustado (Bianca) para
      escopo "só acessibilidade de locais" e redirecionar perguntas
      sobre certificação ao formulário em #section-contato.
   2. "WhatsApp" não aparece visualmente; o link abre o WhatsApp por
      ser o canal nativo do consultor, mas o usuário percebe o Gui
      como um consultor, não como um canal de WhatsApp da empresa.
===================================================================== */

/* =====================================================================
   MOTION — microinterações (spec: clientes/guiaderodas/motion.md)
   Todas desligáveis via reduced-motion + toggle "Sem movimento"
===================================================================== */

html { scroll-padding-top: 88px; }

/* M1 — Fade-in scroll-triggered */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 400ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal][data-revealed="true"] {
  opacity: 1;
  transform: translateY(0);
}

/* M2 — Hover lift em cards (só com mouse) */
@media (hover: hover) {
  .story-card {
    transition: border-color 200ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .story-card:hover { transform: translateY(-4px); }
}

/* M3 — Mascote Gui breathing */
@keyframes gui-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.gui-mascot {
  animation: gui-breathe 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
}

/* M4 — Toolbar slide-in */
.a11y-toolbar {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.a11y-toolbar[data-open="true"] {
  opacity: 1;
  transform: translateX(0);
}

/* M5 — Spinner no botão submit */
@keyframes spin { to { transform: rotate(360deg); } }
.btn__spinner {
  display: none;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.btn[aria-busy="true"] .btn__spinner { display: inline-block; }
.btn[aria-busy="true"] .btn__arrow,
.btn[aria-busy="true"] .btn__label { display: none; }
.btn[aria-busy="true"] .btn__busy-label { display: inline; }
.btn .btn__busy-label { display: none; }

/* M6 — Pulse no banner status */
@keyframes status-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}
.form-status[data-show="true"] {
  animation: status-pulse 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Reduced motion — desliga TUDO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gui-mascot,
  [data-reveal],
  .a11y-toolbar,
  .story-card,
  .form-status,
  .btn__spinner,
  .marquee__track,
  .clients-marquee__track,
  .fab-gui {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .a11y-toolbar { opacity: 1; transform: none; }
  /* Marquees estáticos: mostram 1 conjunto sem rolar */
  .marquee, .clients-marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

/* Toggle manual "Sem movimento" */
body[data-motion="off"] .gui-mascot,
body[data-motion="off"] [data-reveal],
body[data-motion="off"] .a11y-toolbar,
body[data-motion="off"] .story-card,
body[data-motion="off"] .form-status,
body[data-motion="off"] .btn__spinner,
body[data-motion="off"] .marquee__track,
body[data-motion="off"] .clients-marquee__track,
body[data-motion="off"] .fab-gui {
  animation: none !important;
  transition: none !important;
}
body[data-motion="off"] [data-reveal] { opacity: 1; transform: none; }
body[data-motion="off"] .a11y-toolbar { opacity: 1; transform: none; }
body[data-motion="off"] .marquee,
body[data-motion="off"] .clients-marquee { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }

@media print {
  .a11y-toggle, .a11y-toolbar, .skip-links, .carousel-controls { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .spotlight, .contact-block { background: #fff !important; color: #000 !important; }
  .hero h1, .spotlight h2 { color: #000 !important; text-shadow: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Annotation pins (modo debug Alt+A) — I1 fix: display:none remove do accessibility tree */
.annot {
  display: none;
  background: #ffffff; color: var(--gdr-near-black);
  border: 1.5px solid var(--gdr-near-black);
  font-family: ui-monospace, monospace;
  font-size: 11px; font-weight: 700;
  padding: 2px 6px; margin-right: 8px; vertical-align: middle;
  speak: never;
}
body[data-annot="on"] .annot { display: inline-block; }
body[data-annot="on"] section { outline: 1px dashed var(--gdr-near-black); outline-offset: -1px; }

/* =====================================================================
   COMPONENTES DE PÁGINA — wireframe multi-página (jun/2026)
   Adicionados para as páginas institucionais além da home.
   Todos construídos sobre os tokens já definidos no :root acima.
   REUSE > ADAPT > CREATE — nada inventa cor/spacing fora dos tokens.
===================================================================== */

/* --- Page hero (cabeçalho enxuto das páginas internas) --- */
.page-hero {
  position: relative;
  background: linear-gradient(135deg, var(--gdr-green-dark) 0%, var(--gdr-near-black) 100%);
  color: #fff;
  padding: calc(var(--space-section) + 24px) var(--space-lg) var(--space-section);
  overflow: hidden;
}
.page-hero::after {
  /* PIN decorativo discreto, mesma linguagem da home */
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px; border-radius: var(--r-full);
  border: 1px dashed rgba(255,255,255,0.18);
  pointer-events: none;
}
.page-hero__inner { max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; }
.page-hero .eyebrow { color: rgba(255,255,255,0.85); margin-bottom: var(--space-md); }
.page-hero h1 {
  font-size: var(--text-h1); font-weight: 700; line-height: 1.15;
  letter-spacing: -0.005em; margin: 0; max-width: 18ch;
}
.page-hero h1 strong { font-weight: 900; }
.page-hero__lede {
  font-size: var(--text-lead); line-height: 1.5; margin: var(--space-lg) 0 0;
  max-width: 60ch; color: rgba(255,255,255,0.92);
}
.page-hero__breadcrumb {
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin: 0 0 var(--space-md);
}
.page-hero__breadcrumb a { color: rgba(255,255,255,0.85); }

/* --- Seção de conteúdo genérica --- */
.section { padding: var(--space-section) var(--space-lg); background: var(--gdr-surface); }
.section--alt { background: var(--gdr-subtle); }
/* Aproxima duas seções verticalmente (ex.: chat → QR na gui.html) */
.section--tight-bottom { padding-bottom: var(--space-xl); }
.section--tight-top { padding-top: var(--space-xl); }
.section--green { background: var(--gdr-green); color: #fff; }
.section__inner { max-width: 1280px; margin: 0 auto; }
.section__inner--narrow { max-width: 64ch; }
.section-head { max-width: 70ch; margin: 0 0 var(--space-2xl); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.22; margin: var(--space-sm) 0 0; }
.section-head .lede { font-size: var(--text-lead); line-height: 1.5; color: var(--gdr-text-muted); margin: var(--space-md) 0 0; }

/* --- Prose (texto longo legível) --- */
.prose { max-width: 64ch; }
.prose p { font-size: var(--text-body); line-height: 1.65; margin: 0 0 var(--space-lg); color: var(--gdr-text-body); }
.prose h2 { font-size: var(--text-h2); font-weight: 700; margin: var(--space-2xl) 0 var(--space-md); }
.prose h3 { font-size: var(--text-h3); font-weight: 700; margin: var(--space-xl) 0 var(--space-sm); }
.prose ul, .prose ol { margin: 0 0 var(--space-lg); padding-left: var(--space-xl); }
.prose li { font-size: var(--text-body); line-height: 1.65; margin: 0 0 var(--space-xs); color: var(--gdr-text-body); }
.prose strong { font-weight: 700; color: var(--gdr-near-black); }
.prose blockquote {
  margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--gdr-green); background: var(--gdr-subtle);
  font-size: var(--text-lead); font-style: italic; color: var(--gdr-near-black);
}

/* --- Grid de cards (prêmios, valores, categorias) --- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-lg); }
.card-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.info-card {
  background: var(--gdr-surface); border: 1px solid var(--gdr-border);
  border-top: 4px solid var(--gdr-green); border-radius: var(--r-card);
  padding: var(--space-xl); transition: box-shadow 200ms ease, border-color 200ms ease;
}
.info-card:hover { box-shadow: var(--shadow-card); }
.info-card__num { font-size: 28px; font-weight: 900; color: var(--gdr-green); line-height: 1; }
.info-card__icon { font-size: 32px; line-height: 1; margin-bottom: var(--space-sm); }
.info-card h3 { font-size: var(--text-h3); font-weight: 700; margin: var(--space-sm) 0 var(--space-xs); }
.info-card p { font-size: 15px; line-height: 1.55; color: var(--gdr-text-muted); margin: 0; }
.info-card .info-card__tag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gdr-green); }

/* --- Timeline (linha do tempo) --- */
.timeline { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.timeline__item { position: relative; padding: 0 0 var(--space-xl) var(--space-2xl); border-left: 2px solid var(--gdr-border); }
.timeline__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: -9px; top: 2px;
  width: 16px; height: 16px; border-radius: var(--r-full);
  background: var(--gdr-green); border: 3px solid var(--gdr-surface);
}
.timeline__year { font-size: var(--text-h3); font-weight: 900; color: var(--gdr-green); line-height: 1; }
.timeline__title { font-size: 17px; font-weight: 700; margin: var(--space-2xs) 0 var(--space-2xs); }
.timeline__desc { font-size: 15px; line-height: 1.55; color: var(--gdr-text-muted); margin: 0; }

/* --- CTA band (faixa de chamada) --- */
.cta-band { background: var(--gdr-green); color: #fff; padding: var(--space-section) var(--space-lg); text-align: center; }
.cta-band__inner { max-width: 760px; margin: 0 auto; }
.cta-band .eyebrow { color: rgba(255,255,255,0.85); }
.cta-band h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.22; margin: var(--space-sm) 0 var(--space-md); }
.cta-band p { font-size: var(--text-lead); line-height: 1.5; margin: 0 auto var(--space-xl); max-width: 56ch; color: rgba(255,255,255,0.92); }
.cta-band .btn--white { --x: 0; }

/* --- Split media (texto + imagem, genérico, reusa lógica do pure-text) --- */
.split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-2xl); align-items: center; max-width: 1180px; margin: 0 auto; }
.split--reverse .split__media { order: -1; }
.split__media img, .split__media video {
  width: 100%; height: auto; border-radius: var(--r-card);
  border: 1px solid var(--gdr-border); display: block;
}
.split__text h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.22; margin: var(--space-sm) 0 var(--space-md); }
.split__text p { font-size: var(--text-body); line-height: 1.65; color: var(--gdr-text-body); margin: 0 0 var(--space-lg); }
@media (max-width: 820px) {
  .split { grid-template-columns: 1fr; gap: var(--space-xl); }
  .split--reverse .split__media { order: 0; }
}

/* Reduz hero em telas pequenas */
@media (max-width: 600px) {
  .page-hero { padding: calc(var(--space-section)) var(--space-lg) var(--space-2xl); }
  .page-hero h1 { max-width: none; }
}

/* --- Placeholder de mídia (foto que o web designer ainda vai inserir) --- */
.media-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-xs); text-align: center;
  background: repeating-linear-gradient(45deg, var(--gdr-subtle), var(--gdr-subtle) 12px, #ececed 12px, #ececed 24px);
  border: 2px dashed var(--gdr-border); border-radius: var(--r-card);
  color: var(--gdr-text-muted); padding: var(--space-2xl) var(--space-lg);
  min-height: 240px;
}
.media-ph__icon { font-size: 32px; line-height: 1; color: var(--gdr-green); }
.media-ph__label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.media-ph__hint { font-size: 12px; max-width: 32ch; }
.media-ph--portrait { aspect-ratio: 4/5; min-height: 0; }
.media-ph--wide { aspect-ratio: 16/7; min-height: 0; }

/* --- Award card (prêmio com logo real) + figure (foto com legenda) --- */
.info-card--award { text-align: center; display: flex; flex-direction: column; align-items: center; }
.info-card__logo { display: block; height: 54px; width: auto; max-width: 160px; object-fit: contain; margin: 0 0 var(--space-md); }
.info-card--award h3 { font-size: 17px; margin: 0 0 var(--space-2xs); }
.info-card--award p { font-size: 14px; }
.figure { margin: 0; }
.figure img { width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--gdr-border); display: block; }
.figure figcaption { margin-top: var(--space-md); font-size: 14px; color: var(--gdr-text-muted); line-height: 1.5; }
.figure figcaption strong { color: var(--gdr-near-black); display: block; font-weight: 700; }
.slogan-accent { color: var(--gdr-yellow); }
.placa-figure img { max-width: 420px; margin: 0 auto; border: none; background: transparent; }

/* =====================================================================
   REFINO Quem Somos — conceito On + feedback Leo (2026-06-15)
   - remove amarelo decorativo · vídeo hero · carrossel infinito prêmios
===================================================================== */
.slogan-accent { color: #fff; }   /* amarelo removido — não existe na marca */

/* Vídeo em destaque (hero / seções) */
.page-hero__media { max-width: 680px; margin: var(--space-xl) auto 0; }   /* vídeo ~30% menor */
.page-hero__hint { font-size: 14px; color: rgba(255,255,255,0.75); margin: var(--space-sm) 0 0; }

/* Caixa da Missão — verde nos detalhes (caixa clara + acento verde) */
.mission-box {
  background: var(--gdr-surface); color: var(--gdr-near-black);
  border: 1px solid var(--gdr-border);
  border-top: 5px solid var(--gdr-green);
  border-radius: var(--r-card);
  max-width: 1000px; margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  box-shadow: var(--shadow-card);
}
.mission-box h2 {
  font-size: clamp(20px, 2.6vw, 30px); font-weight: 400;
  line-height: 1.35; margin: 0; letter-spacing: 0;
}
.mission-box h2 strong { font-weight: 700; color: var(--gdr-green); }
.video-feature {
  position: relative; display: block; width: 100%; aspect-ratio: 16/9;
  border: 0; padding: 0; cursor: pointer; border-radius: var(--r-card);
  overflow: hidden; background: #000;
}
.video-feature img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.92; transition: opacity 200ms ease, transform 400ms ease; }
.video-feature:hover img, .video-feature:focus-visible img { opacity: 1; transform: scale(1.02); }
.video-feature__play {
  position: absolute; inset: 0; margin: auto; width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gdr-green); color: #fff; border-radius: var(--r-full);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.video-feature:hover .video-feature__play { background: var(--gdr-near-black); }
.video-feature__label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-lg);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.65));
  color: #fff; font-weight: 700; text-align: left;
}

/* Carrossel infinito de prêmios (estilo On) */
.award-scroll { padding: var(--space-md) 0; }
.award-scroll > .info-card--award { width: 250px; min-height: 230px; justify-content: flex-start; }

/* LinkedIn dos sócios */
.founder-links { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.founder-link {
  display: inline-flex; align-items: center; gap: var(--space-xs);
  min-height: 48px; padding: 10px 16px; border: 2px solid var(--gdr-green);
  color: var(--gdr-green-dark); font-weight: 700; font-size: 14px;
  border-radius: var(--r-btn); text-decoration: none;
}
.founder-link:hover { background: var(--gdr-green); color: #fff; }
.founder-link svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* =====================================================================
   Quem Somos v5 — primeira dobra mais clara + verde nos detalhes +
   barra fixa "habilitado" com setinha (feedback Leo 2026-06-15)
===================================================================== */
/* Hero CLARO (primeira dobra leve, verde nos detalhes) */
.page-hero--light {
  background: var(--gdr-surface);
  color: var(--gdr-near-black);
  border-bottom: 1px solid var(--gdr-border);
}
.page-hero--light::after { border-color: rgba(54,101,49,0.16); }   /* PIN tracejado verde discreto */
.page-hero--light h1 { color: var(--gdr-green); }
.page-hero--light .page-hero__hint { color: var(--gdr-text-muted); }
/* título centralizado de verdade (bloco + texto) */
.page-hero--media .page-hero__inner h1 { margin: 0 auto; max-width: 24ch; }

/* FAB → padrão Holuboski (verde da marca) + setinha para baixo */
.fab-cta--brand { background: var(--gdr-green); }
.fab-cta--brand:hover, .fab-cta--brand:focus-visible { background: var(--gdr-green-dark); }
.fab-cta__arrow {
  width: 30px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700; line-height: 1;
  animation: fab-arrow-bounce 1.6s ease-in-out infinite;
}
@keyframes fab-arrow-bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Citação do fundador (hero do O Fundador) */
.founder-quote {
  font-size: var(--text-lead); font-style: italic;
  color: var(--gdr-green-dark); line-height: 1.45;
  margin: var(--space-lg) 0; max-width: 40ch;
}

/* =====================================================================
   Dropdown de submenu no header (Quem Somos / Certificação / Ação Social)
   Desktop: hover + focus-within (acessível). Mobile: inline indentado.
===================================================================== */
.site-nav__list .nav-item--has-sub { position: relative; }
.site-nav__list .nav-item--has-sub > a::after { content: " ▾"; font-size: 11px; opacity: 0.7; }
.site-nav__list .submenu {
  list-style: none; margin: 0; padding: var(--space-xs) 0;
  position: absolute; top: 100%; left: 0;
  min-width: 232px;
  background: var(--gdr-surface);
  border: 1px solid var(--gdr-border);
  border-top: 3px solid var(--gdr-green);
  border-radius: 0 0 var(--r-card) var(--r-card);
  box-shadow: 0 14px 34px rgba(0,0,0,0.14);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  z-index: 60;
}
.site-nav__list .nav-item--has-sub:hover > .submenu,
.site-nav__list .nav-item--has-sub:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-nav__list .submenu a {
  display: block; min-height: 48px; padding: 11px 18px;
  font-size: 15px; font-weight: 500; line-height: 1.3;
  color: var(--gdr-near-black); border-bottom: 0; white-space: nowrap;
}
.site-nav__list .submenu a::after { content: none; }
.site-nav__list .submenu a:hover,
.site-nav__list .submenu a:focus-visible {
  background: var(--gdr-subtle); color: var(--gdr-green-dark);
}
.site-nav__list .submenu a[aria-current="page"] { color: var(--gdr-green-dark); font-weight: 700; }

@media (max-width: 980px) {
  /* Mobile: submenu sempre visível, indentado dentro do painel */
  .site-nav__list .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 0 0 0 var(--space-lg);
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
  }
  .site-nav__list .submenu a {
    font-size: 17px; min-height: 52px; padding: 14px 8px;
    border-bottom: 1px solid var(--gdr-border);
  }
  .site-nav__list .nav-item--has-sub > a::after { opacity: 0.5; }
}

/* Fundador — refinos (foto maior, leitura mais larga à esquerda, logos maiores) */
.section__inner--read { max-width: 860px; margin: 0 auto; }
.section__inner--read .prose { max-width: none; }
@media (min-width: 821px) { .split--media-lg { grid-template-columns: 1fr 1.15fr; } }
.award-cards-lg .info-card__logo { height: 72px; max-width: 200px; }

/* =====================================================================
   Certificação — FAQ accordion (<details>) + grids específicos
===================================================================== */
.faq { max-width: 860px; margin: 0 auto; }
.faq__item {
  border: 1px solid var(--gdr-border); border-radius: var(--r-card);
  margin-bottom: var(--space-sm); background: var(--gdr-surface); overflow: hidden;
}
.faq__item[open] { border-color: var(--gdr-green); }
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: var(--space-md) var(--space-lg); min-height: 56px;
  font-weight: 700; font-size: 16px; color: var(--gdr-near-black);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--gdr-green); flex-shrink: 0; line-height: 1; }
.faq__item[open] summary::after { content: "-"; }
.faq__item summary:hover { color: var(--gdr-green-dark); }
.faq__answer { padding: 0 var(--space-lg) var(--space-lg); }
.faq__answer p { font-size: 15px; line-height: 1.65; color: var(--gdr-text-body); margin: 0 0 var(--space-sm); }
.faq__answer p:last-child { margin-bottom: 0; }

/* Tipos de local / fases — imagem no topo do card */
.media-card { background: var(--gdr-surface); border: 1px solid var(--gdr-border); border-radius: var(--r-card); overflow: hidden; text-align: center; transition: box-shadow 200ms ease, border-color 200ms ease; }
.media-card:hover { box-shadow: var(--shadow-card); border-color: var(--gdr-green); }
.media-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--gdr-subtle); }
.media-card__body { padding: var(--space-md) var(--space-md) var(--space-lg); }
.media-card h3 { font-size: 16px; font-weight: 700; margin: 0; }

/* Fases (numeradas) */
.phase-card { position: relative; }
.phase-card__num { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gdr-green); }

/* ODS icons */
.ods-grid { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; margin: 0 auto var(--space-xl); max-width: 720px; }
.ods-grid img { width: 92px; height: 92px; border-radius: 8px; }

/* =====================================================================
   Cases — galeria de locais certificados
===================================================================== */
.location-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: var(--space-lg); }
.location-card {
  border: 1px solid var(--gdr-border); border-radius: var(--r-card); overflow: hidden;
  background: var(--gdr-surface); transition: box-shadow 200ms ease, border-color 200ms ease;
}
.location-card:hover { box-shadow: var(--shadow-card); border-color: var(--gdr-green); }
.location-card__media {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: linear-gradient(135deg, var(--gdr-green-light) 0%, var(--gdr-green-dark) 100%);
  display: flex; align-items: center; justify-content: center;
}
.location-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.location-card__media .location-card__initials {
  font-size: 30px; font-weight: 900; color: #fff; opacity: 0.85; letter-spacing: 0.02em;
}
.location-card__body { padding: var(--space-md); display: flex; flex-direction: column; gap: 6px; }
.location-card__name { font-size: 15px; font-weight: 700; color: var(--gdr-near-black); line-height: 1.25; }
.location-card__status {
  align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: var(--r-badge); background: var(--gdr-green); color: #fff;
}
.location-card__status::before { content: "✓ "; }

/* =====================================================================
   Ajustes Cases + Certificação (feedback Leo 2026-06-15)
===================================================================== */
/* Cases — carrossel infinito de locais */
.location-scroll { padding: var(--space-sm) 0; }
.location-scroll > .location-card { width: 300px; }

/* Certificação — ícone no topo do benefit card */
.info-card__topicon { height: 56px; width: auto; display: block; margin: 0 0 var(--space-md); }

/* Certificação — carrossel "Locais Certificados" reusado da home: status sempre verde */
.locais-green .story-card__status[data-status="certificado"] { background: var(--gdr-green); color: #fff; border-color: var(--gdr-green); }

/* Certificação — Official Guide: selo na imagem */
.og-figure img { max-width: 320px; margin: 0 auto; display: block; }

/* Certificação — Fases timeline: selo no topo */
.timeline-seal { display: block; width: 110px; height: auto; margin: 0 auto var(--space-xl); }

/* =====================================================================
   Certificação v3 (feedback Leo) — tipos carrossel, benefícios 3+3,
   CTA em linha, OG cover, rodapé 2 linhas
===================================================================== */
.tipos-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--space-2xl); align-items: center; }
.tipos-layout__head h2 { margin: 0; font-size: var(--text-h2); }
.tipos-scroll { min-width: 0; }
.tipos-scroll > .media-card { width: 230px; }
@media (max-width: 860px) { .tipos-layout { grid-template-columns: 1fr; gap: var(--space-lg); } }

.benefits-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
@media (max-width: 900px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefits-grid { grid-template-columns: 1fr; } }

.cta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap;
  max-width: 1080px; margin: 0 auto; padding: var(--space-xl) var(--space-2xl);
  background: var(--gdr-surface); border: 2px solid var(--gdr-green); border-radius: var(--r-card); }
.cta-row h2 { margin: 0; font-size: var(--text-h3); color: var(--gdr-near-black); }

.og-figure img { max-width: 460px; }

/* Rodapé: slogan sempre em 2 linhas */
.footer-top h3 .line { display: block; }

/* =====================================================================
   Impactos e Resultados — roda ODS + abas (fiel ao site original)
===================================================================== */
.ods-impacto { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: center; max-width: 1180px; margin: 0 auto; }
.ods-impacto__wheel img { width: 100%; max-width: 420px; margin: 0 auto; display: block; }
.ods-impacto__intro { font-size: var(--text-body); line-height: 1.6; color: var(--gdr-text-body); margin: 0 0 var(--space-lg); }
.ods-tabs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.ods-tab {
  padding: 10px 16px; min-height: 44px; cursor: pointer;
  border: 1px solid var(--gdr-border); background: var(--gdr-surface);
  border-radius: var(--r-badge); font: inherit; font-weight: 700; font-size: 14px;
  color: var(--gdr-text-muted);
}
.ods-tab[aria-selected="true"] { background: var(--gdr-green); color: #fff; border-color: var(--gdr-green); }
.ods-tab:hover { border-color: var(--gdr-green); color: var(--gdr-green-dark); }
.ods-tab[aria-selected="true"]:hover { color: #fff; }
.ods-panel {
  display: flex; gap: var(--space-md); align-items: center;
  background: var(--gdr-surface); border: 1px solid var(--gdr-border);
  border-left: 4px solid var(--gdr-green); border-radius: var(--r-card);
  padding: var(--space-lg); min-height: 120px;
}
.ods-panel[hidden] { display: none; }
.ods-panel__icon { width: 88px; height: 88px; flex-shrink: 0; border-radius: 6px; }
.ods-panel p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gdr-text-body); }
@media (max-width: 860px) { .ods-impacto { grid-template-columns: 1fr; gap: var(--space-xl); } }


/* =====================================================================
   Official Guide — check-list + card de download
===================================================================== */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-sm); }
.check-list li { position: relative; padding-left: 34px; font-size: var(--text-body); line-height: 1.5; color: var(--gdr-text-body); }
.check-list li::before {
  content: "✓"; position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; display: flex; align-items: center; justify-content: center;
  background: var(--gdr-green); color: #fff; border-radius: var(--r-full);
  font-size: 12px; font-weight: 700;
}
.check-list--2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-sm) var(--space-xl); }
@media (max-width: 640px) { .check-list--2 { grid-template-columns: 1fr; } }

.download-card { background: var(--gdr-green); color: #fff; border-radius: var(--r-card); padding: var(--space-2xl); }
.download-card .eyebrow { color: rgba(255,255,255,0.85); }
.download-card h2 { color: #fff; font-size: var(--text-h2); margin: var(--space-sm) 0; }
.download-card p { color: rgba(255,255,255,0.92); }
.download-card .btn--white { margin-top: var(--space-sm); }
.download-card .check-decl { display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-lg); font-size: 13px; color: rgba(255,255,255,0.85); }

/* Cases — linha "locais registrados" dentro da seção Empreendimentos */
.registrados-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg); flex-wrap: wrap;
  margin-top: var(--space-2xl); padding-top: var(--space-xl);
  border-top: 1px solid var(--gdr-border);
}
.registrados-row__title { font-size: var(--text-h3); font-weight: 700; margin: 0; color: var(--gdr-near-black); max-width: 38ch; }

/* Anuário — form de download */
.anuario-form { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.anuario-form .field { margin: 0; }
.anuario-form .btn { margin-top: var(--space-2xs); }

/* =====================================================================
   Gui (Ação Social) — balão de chat, passos, QR
===================================================================== */
/* Chat demo — mock de WhatsApp centralizado (exemplo de mensagem) */
.chat-demo {
  max-width: 460px; margin: var(--space-xl) auto 0; text-align: left;
  background: var(--gdr-surface); border: 1px solid var(--gdr-border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card); overflow: hidden;
}
.chat-demo__head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--gdr-subtle);
  border-bottom: 1px solid var(--gdr-border);
}
.chat-demo__avatar {
  width: 36px; height: 36px; border-radius: var(--r-full); background: var(--gdr-green);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-demo__avatar svg { width: 20px; height: 20px; fill: #fff; }
.chat-demo__name { font-weight: 700; font-size: 15px; color: var(--gdr-near-black); }
.chat-demo__body { padding: var(--space-lg); }
.chat-bubble {
  display: inline-block; background: var(--gdr-green); color: #fff;
  border-radius: 14px 14px 14px 4px; padding: 12px 16px;
  font-size: 15px; line-height: 1.5; text-align: left; margin: 0; max-width: 90%;
}
.chat-bubble--user { border-radius: 14px 14px 4px 14px; }

/* Vídeo institucional inline (história — app que virou Gui) */
.video-story { margin: var(--space-2xl) auto 0; max-width: 880px; }
.video-story__player {
  width: 100%; aspect-ratio: 16 / 9; display: block;
  background: #000; object-fit: cover;
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.video-story__caption {
  margin: var(--space-md) 0 0; text-align: center;
  font-size: 14px; color: var(--gdr-text-muted);
}
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-lg); }
.steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-md); align-items: start; }
.steps__num {
  width: 44px; height: 44px; border-radius: var(--r-full); background: var(--gdr-green);
  color: #fff; font-weight: 900; font-size: 18px; display: flex; align-items: center; justify-content: center;
}
.steps__title { font-weight: 700; font-size: 17px; margin: 0 0 var(--space-2xs); }
.steps__desc { font-size: 15px; line-height: 1.55; color: var(--gdr-text-muted); margin: 0; }
.qr-figure img { max-width: 280px; margin: 0 auto; display: block; border-radius: var(--r-card); }
.qr-figure figcaption { text-align: center; margin-top: var(--space-sm); font-weight: 700; font-size: 14px; color: var(--gdr-green-dark); }

/* =====================================================================
   Official Guide v2 — público com ícones, capa maior, form de download
===================================================================== */
.audience-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
@media (max-width: 860px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .audience-grid { grid-template-columns: 1fr; } }
.audience-card { text-align: center; padding: var(--space-xl) var(--space-md); border: 1px solid var(--gdr-border); border-top: 4px solid var(--gdr-green); border-radius: var(--r-card); background: var(--gdr-surface); transition: box-shadow 200ms ease; }
.audience-card:hover { box-shadow: var(--shadow-card); }
.audience-card__icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 auto var(--space-sm); color: var(--gdr-green); }
.audience-card__icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; }
.audience-card h3 { font-size: 16px; margin: 0; line-height: 1.3; }

.og-figure--lg img { max-width: 560px; }

/* Form de download do Official Guide (2 colunas) */
.og-download-form { max-width: 780px; margin: var(--space-xl) auto 0; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.form-grid .field--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Blog índice + Post (artigo)
===================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-lg); }
.post-hero { background: linear-gradient(135deg, var(--gdr-green-dark) 0%, var(--gdr-near-black) 100%); color: #fff; padding: calc(var(--space-section) + 16px) var(--space-lg) var(--space-section); }
.post-hero__inner { max-width: 780px; margin: 0 auto; }
.post-hero__meta { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.75); margin: 0 0 var(--space-sm); }
.post-hero__meta a { color: rgba(255,255,255,0.92); }
.post-hero h1 { font-size: var(--text-h1); line-height: 1.15; margin: 0; color: #fff; letter-spacing: -0.005em; }
.post-figure { max-width: 900px; margin: 0 auto var(--space-2xl); }
.post-figure img { width: 100%; height: auto; border-radius: var(--r-card); display: block; border: 1px solid var(--gdr-border); }
.post-back { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 700; color: var(--gdr-green-dark); margin-bottom: var(--space-lg); }

/* =====================================================================
   Post — estrutura de blog completa (categoria, autor, share, relacionados)
===================================================================== */
.post-tag { display: inline-block; background: rgba(255,255,255,0.16); color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 12px; border-radius: var(--r-badge); margin-bottom: var(--space-md); }
.post-meta-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; margin-top: var(--space-lg); color: rgba(255,255,255,0.82); font-size: 14px; }
.post-meta-row__author { display: flex; align-items: center; gap: var(--space-xs); font-weight: 700; color: #fff; }
.post-meta-row__avatar { width: 38px; height: 38px; border-radius: var(--r-full); background: var(--gdr-green); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 14px; }
.post-share { display: flex; gap: var(--space-sm); align-items: center; margin: var(--space-2xl) 0 0; padding-top: var(--space-lg); border-top: 1px solid var(--gdr-border); }
.post-share__label { font-weight: 700; font-size: 14px; color: var(--gdr-near-black); margin-right: var(--space-2xs); }
.post-share a { width: 42px; height: 42px; border-radius: var(--r-full); border: 1px solid var(--gdr-border); display: inline-flex; align-items: center; justify-content: center; color: var(--gdr-green-dark); }
.post-share a:hover { background: var(--gdr-green); color: #fff; border-color: var(--gdr-green); }
.post-share a svg { width: 18px; height: 18px; fill: currentColor; }
.author-box { display: flex; gap: var(--space-lg); align-items: center; background: var(--gdr-subtle); border-radius: var(--r-card); padding: var(--space-lg); margin: var(--space-2xl) 0 0; }
.author-box__avatar { width: 64px; height: 64px; border-radius: var(--r-full); flex-shrink: 0; object-fit: cover; }
.author-box h3 { margin: 0 0 var(--space-2xs); font-size: 17px; }
.author-box p { margin: 0; font-size: 14px; color: var(--gdr-text-muted); line-height: 1.5; }

/* Botão flutuante de acessibilidade (substitui o do cabeçalho) */
.a11y-fab {
  position: fixed; top: 104px; right: 16px; z-index: 70;
  width: 50px; height: 50px; border-radius: var(--r-full);
  background: var(--gdr-green); color: #fff; border: none; cursor: pointer;
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: background 200ms ease, transform 200ms ease;
}
.a11y-fab:hover { background: var(--gdr-green-dark); transform: scale(1.05); }
.a11y-fab:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
@media (max-width: 600px) { .a11y-fab { width: 46px; height: 46px; top: 80px; } }

/* =====================================================================
   Botão "voltar ao topo" (substitui o FAB do WhatsApp) — canto inf. direito,
   aparece ao rolar. + Acessibilidade flutuante removida (Hand Talk cobre).
===================================================================== */
.back-to-top {
  position: relative;
  width: 52px; height: 52px; flex-shrink: 0; border-radius: var(--r-full);
  background: var(--gdr-green); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 240ms ease, transform 240ms ease, visibility 240ms, background 200ms ease;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gdr-green-dark); }
.back-to-top:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.back-to-top svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 600px) { .back-to-top { width: 46px; height: 46px; } }
/* Esconde de vez o botão flutuante de acessibilidade (não usamos mais) */
.a11y-fab { display: none !important; }

/* Official Guide v3 — ícones de público menores + 4 caixas 2x2 */
.audience-card__icon { width: 30px; height: 30px; }
.audience-card { padding: var(--space-lg) var(--space-md); }
.guide-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); max-width: 1080px; margin: 0 auto; }
@media (max-width: 760px) { .guide-boxes { grid-template-columns: 1fr; } }
.guide-box { background: var(--gdr-surface); border: 1px solid var(--gdr-border); border-top: 4px solid var(--gdr-green); border-radius: var(--r-card); padding: var(--space-xl); }
.guide-box h3 { font-size: var(--text-h3); font-weight: 700; margin: 0 0 var(--space-md); }
.guide-box__intro { font-size: 14px; color: var(--gdr-text-muted); margin: 0 0 var(--space-md); }
.guide-box .check-list { gap: var(--space-xs); }
.guide-box__note { font-size: 13px; font-style: italic; color: var(--gdr-text-muted); margin: var(--space-md) 0 0; }

/* Gui — QR maior + seção mais centrada */
.qr-figure img { max-width: 360px; }
/* Blog — primeira dobra: busca + artigos */
.blog-intro { padding-top: var(--space-2xl); }
.blog-intro__head { text-align: center; margin-bottom: var(--space-lg); }
.blog-intro__head h1 { margin: var(--space-xs) auto 0; }
/* Blog — barra de pesquisa */
.blog-search { max-width: 560px; margin: 0 auto var(--space-2xl); position: relative; }
.blog-search input {
  width: 100%; font: inherit; font-size: 16px; padding: 16px 52px 16px 20px;
  border: 2px solid var(--gdr-border); border-radius: var(--r-full);
  min-height: var(--target-min); background: var(--gdr-surface); color: var(--gdr-near-black);
}
.blog-search input:focus { border-color: var(--gdr-green); outline: none; }
.blog-search__icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--gdr-green-dark); pointer-events: none; }
.blog-search__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Stack flutuante (canto inf. direito): CTA "habilitado" + voltar ao topo */
.fab-stack {
  position: fixed; bottom: 24px; right: 24px; z-index: 80;
  display: flex; align-items: center; gap: var(--space-sm);
}
.fab-cta-pill {
  display: inline-flex; align-items: center; max-width: 230px;
  background: var(--gdr-green); color: #fff; text-decoration: none;
  padding: 13px 20px; border-radius: var(--r-full);
  font-weight: 700; font-size: 13.5px; line-height: 1.25;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); transition: background 200ms ease, transform 200ms ease;
}
.fab-cta-pill:hover { background: var(--gdr-green-dark); transform: translateY(-2px); }
.fab-cta-pill:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
@media (max-width: 600px) { .fab-stack { bottom: 16px; right: 16px; gap: 8px; } .fab-cta-pill { font-size: 12px; padding: 11px 15px; max-width: 170px; } }