/* ═══════════════════════════════════════════════════════════
   PETRICORP — Site institucional
   Base: Design System Petricorp (neumorfismo + glass, navy)
   ═══════════════════════════════════════════════════════════ */

/* ═══ FONTE ════════════════════════════════════════════════ */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}

/* ═══ TOKENS ═══════════════════════════════════════════════ */
:root {
  /* Brand */
  --navy-900: #03054F;
  --navy-800: #0A0F6B;
  --navy-700: #141C87;
  --navy-600: #2A34A8;
  --navy-400: #6B76D6;
  --navy-200: #B9BFEE;
  --navy-100: #DFE2FA;
  --navy-050: #F0F2FD;

  --accent:       var(--navy-600);
  --accent-hover: var(--navy-700);
  --whats:        #25D366;
  --whats-dark:   #1DA851;

  --ok:     #17A45C;  --ok-ink:     #0C7040;  --ok-tint:     rgba(23,164,92,0.14);
  --warn:   #E8A33D;  --warn-ink:   #96601A;  --warn-tint:   rgba(232,163,61,0.16);
  --danger: #DB5348;  --danger-ink: #A32E24;  --danger-tint: rgba(219,83,72,0.14);
  --brand-tint: rgba(42,52,168,0.10);

  /* Ink
     ink-500 é o tom do texto de apoio, usado em quase toda a página. O valor
     do design system (#6B7191) fica em 4,05:1 sobre --neu-bg, logo abaixo do
     mínimo AA; este tom, meio passo mais fundo, chega a 4,76:1 sem alterar a
     leitura visual da paleta. */
  --ink-900: #14172E;
  --ink-700: #3A3F5C;
  --ink-500: #616787;
  --ink-300: #9AA0BC;

  /* Neumorfismo */
  --neu-bg:     #E9ECF6;
  --neu-bg-alt: #EFF1F9;
  --neu-light:  #FFFFFF;
  --neu-dark:   #C3C9E0;

  --neu-1: 3px 3px 7px var(--neu-dark), -3px -3px 7px var(--neu-light);
  --neu-2: 7px 7px 16px var(--neu-dark), -7px -7px 16px var(--neu-light);
  --neu-3: 14px 14px 30px var(--neu-dark), -12px -12px 26px var(--neu-light);
  --neu-4: 22px 22px 48px var(--neu-dark), -18px -18px 40px var(--neu-light);

  --neu-in-1: inset 3px 3px 6px var(--neu-dark), inset -3px -3px 6px var(--neu-light);
  --neu-in-2: inset 6px 6px 12px var(--neu-dark), inset -6px -6px 12px var(--neu-light);
  --neu-in-3: inset 10px 10px 20px var(--neu-dark), inset -8px -8px 16px var(--neu-light);

  --neu-flat: 0 0 0 1px rgba(255,255,255,0.7) inset, 0 1px 2px rgba(30,36,80,0.06);
  --neu-edge: 1px solid rgba(255,255,255,0.65);

  /* Glass */
  --glass-bg:     rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.75);
  --glass-blur:   blur(22px) saturate(180%);
  --glass-shadow: 0 12px 40px rgba(20,28,80,0.12);

  /* Gradientes de marca */
  --grad-brand: linear-gradient(135deg, #2A34A8 0%, #03054F 100%);
  --grad-soft:  linear-gradient(135deg, #DFE2FA 0%, #F3EEFB 45%, #E4F0FB 100%);
  --grad-mesh:  radial-gradient(60% 70% at 15% 20%, #DDE2FF 0%, transparent 60%),
                radial-gradient(50% 60% at 85% 15%, #F6E4F2 0%, transparent 60%),
                radial-gradient(60% 60% at 75% 85%, #DFF1F8 0%, transparent 60%);

  /* Tipografia */
  --font-ui: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --track-tight: -0.022em;
  --track-soft:  -0.011em;
  --lh-body: 1.47059;

  /* Espaço */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --sp-24:96px;

  /* Raio */
  --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 9999px;

  /* Motion */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast:150ms; --normal:220ms; --slow:380ms;

  /* Layout */
  --wrap: 1160px;
  --nav-h: 76px;
}

/* Tema escuro */
[data-theme="dark"] {
  --neu-bg:     #12163C;
  --neu-bg-alt: #171C48;
  --neu-light:  #1D2358;
  --neu-dark:   #080B26;
  --ink-900: #F2F4FF;
  --ink-700: #C3C8EA;
  --ink-500: #9098C4;
  --ink-300: #6B73A0;
  --glass-bg: rgba(29,35,88,0.55);
  --glass-border: rgba(255,255,255,0.12);
  --neu-edge: 1px solid rgba(255,255,255,0.06);
  --ok-ink: #4FD394;     --ok-tint: rgba(23,164,92,0.20);
  --warn-ink: #F0B863;   --warn-tint: rgba(232,163,61,0.20);
  --danger-ink: #FF8A7E; --danger-tint: rgba(219,83,72,0.20);
  --brand-tint: rgba(122,133,232,0.18);
  --navy-600: #7A85E8;
  --navy-700: #A7B0F5;
  --navy-900: #DCE0FB;
  --accent: #7A85E8;
  --grad-mesh: radial-gradient(60% 70% at 15% 20%, #1A2064 0%, transparent 62%),
               radial-gradient(50% 60% at 85% 15%, #291B57 0%, transparent 62%),
               radial-gradient(60% 60% at 75% 85%, #11294F 0%, transparent 62%);
  --grad-soft: linear-gradient(135deg, #1A2060 0%, #251B55 45%, #12304E 100%);
  --grad-brand: linear-gradient(135deg, #2A34A8 0%, #060A3A 100%);
  --glass-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

/* ═══ BASE ═════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-ui);
  background: var(--neu-bg);
  background-image: var(--grad-mesh);
  background-attachment: fixed;
  color: var(--ink-900);
  font-size: 17px;
  line-height: var(--lh-body);
  letter-spacing: 0;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
ul { list-style: none; }

::selection { background: rgba(42,52,168,0.18); }

/* Foco visível e consistente */
:focus-visible {
  outline: 3px solid rgba(42,52,168,0.55);
  outline-offset: 3px;
  border-radius: 6px;
}
[data-theme="dark"] :focus-visible { outline-color: rgba(167,176,245,0.7); }

.skip-link {
  position: absolute; left: 50%; top: 8px; transform: translate(-50%, -140%);
  z-index: 300; background: var(--navy-700); color: #fff;
  padding: 12px 22px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600;
  text-decoration: none; transition: transform var(--fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 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;
}

/* ═══ LAYOUT ═══════════════════════════════════════════════ */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.section { padding: clamp(64px, 9vw, 112px) 0; position: relative; }
.section--tight { padding: clamp(48px, 6vw, 72px) 0; }

.eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--navy-600); margin-bottom: 18px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--neu-bg); box-shadow: var(--neu-1);
}
.on-brand .eyebrow {
  background: rgba(255,255,255,0.12); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24);
}

.section-title {
  font-size: clamp(28px, 4.2vw, 44px); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.1; margin-bottom: 16px;
  text-wrap: balance;
}
.section-sub {
  font-size: clamp(16px, 1.6vw, 18px); font-weight: 400; line-height: var(--lh-body);
  color: var(--ink-500); max-width: 66ch;
}
.section-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 56px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .section-sub { margin-left: auto; margin-right: auto; }

.prose p { color: var(--ink-500); font-size: clamp(16px, 1.6vw, 18px); margin-bottom: 18px; max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink-900); font-weight: 600; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--neu-dark), transparent); border: 0; }

/* ═══ SUPERFÍCIES ══════════════════════════════════════════ */
.neu      { background: var(--neu-bg); border-radius: var(--r-lg); box-shadow: var(--neu-2); }
.neu-lg   { box-shadow: var(--neu-3); }
.neu-in   { background: var(--neu-bg); border-radius: var(--r-lg); box-shadow: var(--neu-in-2); }
.neu-flat { background: var(--neu-bg-alt); border-radius: var(--r-lg); box-shadow: var(--neu-flat); border: var(--neu-edge); }
.glass {
  background: var(--glass-bg); border-radius: var(--r-lg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow);
}

/* Bloco navy — as seções alternam entre a superfície clara e este bloco,
   dando ritmo à leitura da página. */
.on-brand { background: var(--grad-brand); color: #fff; }
/* Superfícies neumórficas viram vidro quando caem sobre o navy */
.on-brand .neu {
  background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.on-brand .section-title { color: #fff; }
.on-brand .section-sub,
.on-brand .prose p { color: rgba(255,255,255,0.76); }
.on-brand .prose strong { color: #fff; }

/* ═══ BOTÕES ═══════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: none; cursor: pointer; font-family: var(--font-ui); font-weight: 500;
  border-radius: var(--r-pill); transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease), background var(--normal) var(--ease), color var(--normal) var(--ease);
  text-decoration: none; white-space: nowrap;
  font-size: 15px; letter-spacing: var(--track-soft); padding: 13px 26px;
  line-height: 1.2;
}
.btn svg { flex-shrink: 0; }
.btn-lg { font-size: 17px; padding: 16px 32px; }
.btn-sm { font-size: 13px; padding: 9px 18px; letter-spacing: 0; }

.btn-primary {
  background: var(--grad-brand); color: #fff;
  box-shadow: 6px 6px 14px rgba(3,5,79,0.28), -4px -4px 12px var(--neu-light);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 8px 10px 22px rgba(3,5,79,0.32), -5px -5px 14px var(--neu-light); }
.btn-primary:active { transform: translateY(0); box-shadow: inset 4px 4px 10px rgba(0,0,0,0.32), inset -3px -3px 8px rgba(255,255,255,0.12); }

.btn-neu { background: var(--neu-bg); color: var(--navy-700); box-shadow: var(--neu-1); }
.btn-neu:hover { box-shadow: var(--neu-2); transform: translateY(-1px); }
.btn-neu:active { box-shadow: var(--neu-in-1); transform: translateY(0); color: var(--navy-900); }

.btn-ghost { background: transparent; color: var(--navy-600); }
.btn-ghost:hover { background: var(--neu-bg); box-shadow: var(--neu-1); }

.btn-whats {
  background: linear-gradient(180deg, #2FE075, #1DA851); color: #fff;
  box-shadow: 0 6px 16px rgba(20,120,60,0.32), inset 0 1px 0 rgba(255,255,255,0.35);
}
.btn-whats:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,120,60,0.38), inset 0 1px 0 rgba(255,255,255,0.4); }
.btn-whats:active { transform: translateY(0); box-shadow: inset 0 3px 8px rgba(0,0,0,0.28); }

.on-brand .btn-neu {
  background: rgba(255,255,255,0.12); color: #fff;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
}
.on-brand .btn-neu:hover { background: rgba(255,255,255,0.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }

/* Glow reativo ao cursor */
.btn-primary, .btn-whats, .btn-glow { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary > *, .btn-whats > *, .btn-glow > * { position: relative; z-index: 1; }
.btn-primary::after, .btn-whats::after, .btn-glow::after {
  content: ""; position: absolute; inset: -40%; z-index: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.24), transparent 42%);
  opacity: 0; transition: opacity var(--slow) var(--ease); pointer-events: none;
}
.btn-primary:hover::after, .btn-whats:hover::after, .btn-glow:hover::after { opacity: 1; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ═══ NAV ══════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 100; width: min(var(--wrap), calc(100% - 28px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--r-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: var(--neu-edge);
  box-shadow: var(--glass-shadow);
  transition: box-shadow var(--normal) var(--ease), background var(--normal) var(--ease);
}
.nav.is-scrolled { box-shadow: 0 16px 48px rgba(20,28,80,0.18); }

.nav-brand { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; padding: 2px 6px; }

/* ═══ LOCKUP ═══════════════════════════════════════════════
   O arquivo é navy, para as superfícies claras. No tema escuro,
   brightness(0) achata para preto e invert(1) devolve branco puro —
   sem depender de uma segunda imagem. */
.logo-lockup { width: var(--logo-w, 150px); height: auto; }
[data-theme="dark"] .logo-lockup { filter: brightness(0) invert(1); }

.nav-brand .logo-lockup { --logo-w: 138px; }
.drawer-logo { --logo-w: 132px; margin: 6px 0 14px 16px; }
.footer-logo { --logo-w: 178px; }
.cta-logo { width: clamp(160px, 22vw, 210px); height: auto; margin: 0 auto 28px; opacity: 0.95; }

.nav-links { display: flex; gap: 2px; align-items: center; }
.nav-links a {
  display: block; font-size: 13px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-700);
  text-decoration: none; padding: 8px 13px; border-radius: var(--r-pill);
  transition: color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav-links a:hover { color: var(--navy-700); box-shadow: var(--neu-1); background: var(--neu-bg); }
.nav-links a.is-active { color: var(--navy-700); font-weight: 500; box-shadow: var(--neu-in-1); background: var(--neu-bg); }

.nav-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.theme-btn, .menu-btn {
  border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%;
  background: var(--neu-bg); box-shadow: var(--neu-1); color: var(--ink-700);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
}
.theme-btn:hover, .menu-btn:hover { color: var(--navy-700); box-shadow: var(--neu-2); }
.theme-btn:active, .menu-btn:active { box-shadow: var(--neu-in-1); }
.menu-btn { display: none; }
.theme-btn .ic-moon { display: none; }
[data-theme="dark"] .theme-btn .ic-moon { display: block; }
[data-theme="dark"] .theme-btn .ic-sun { display: none; }

/* Menu mobile */
.nav-drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(12,16,50,0.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--normal) var(--ease), visibility var(--normal);
}
.nav-drawer.is-open { opacity: 1; visibility: visible; }
.nav-drawer-panel {
  position: absolute; top: 74px; left: 14px; right: 14px;
  background: var(--neu-bg); border-radius: var(--r-lg);
  box-shadow: var(--neu-3); border: var(--neu-edge);
  padding: 14px; transform: translateY(-14px); opacity: 0;
  transition: transform var(--normal) var(--ease), opacity var(--normal) var(--ease);
  max-height: calc(100vh - 100px); overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateY(0); opacity: 1; }
.nav-drawer-panel a {
  display: block; padding: 13px 16px; border-radius: var(--r-md);
  font-size: 16px; font-weight: 500; color: var(--ink-700); text-decoration: none;
  transition: box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav-drawer-panel a:hover, .nav-drawer-panel a:focus-visible { color: var(--navy-700); box-shadow: var(--neu-in-1); }
.nav-drawer-panel .btn { width: 100%; margin-top: 10px; }

/* ═══ HERO ═════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 96px)) 0 clamp(56px, 7vw, 88px);
  overflow: hidden;
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero-copy { max-width: 640px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--navy-600); padding: 8px 16px; border-radius: var(--r-pill);
  background: var(--neu-bg); box-shadow: var(--neu-1); margin-bottom: 24px;
}
.hero-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex-shrink: 0; }

.hero-title {
  font-size: clamp(34px, 5.6vw, 62px); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.04; margin-bottom: 22px;
  text-wrap: balance;
}
/* ═══ DESTAQUE ANIMADO ═════════════════════════════════════
   Marca as palavras-chave dos títulos. O gradiente tem o dobro da largura do
   texto e começa e termina na mesma cor: deslocá-lo exatamente uma volta
   completa faz o brilho circular sem emenda.
   O ângulo é 90° de propósito — um gradiente inclinado mostraria costura ao
   se repetir horizontalmente. */
.hl {
  background-image: linear-gradient(90deg,
    #2A34A8 0%, #5A66D8 25%, #03054F 50%, #5A66D8 75%, #2A34A8 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: hl-flow 9s linear infinite;
}
@keyframes hl-flow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* Sobre o fundo escuro do tema noturno, o gradiente sobe para os tons claros */
[data-theme="dark"] .hl {
  background-image: linear-gradient(90deg,
    #8E99FF 0%, #C9CFFF 25%, #6E7AE6 50%, #C9CFFF 75%, #8E99FF 100%);
}

/* Nas seções navy o título já é branco: o destaque vira lavanda luminosa.
   Vem por último para vencer a regra do tema escuro nos dois temas. */
.on-brand .hl {
  background-image: linear-gradient(90deg,
    #A8B1FF 0%, #FFFFFF 25%, #C9CFFF 50%, #FFFFFF 75%, #A8B1FF 100%);
}

@media (prefers-reduced-motion: reduce) {
  .hl { animation: none; background-position: 25% center; }
}

/* Sem recorte no texto, o preenchimento transparente deixaria o trecho
   invisível. Nesse caso o destaque vira cor sólida. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hl {
    background-image: none; animation: none;
    color: var(--navy-600); -webkit-text-fill-color: currentColor;
  }
  .on-brand .hl { color: #C9CFFF; }
}
.hero-sub {
  font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-500);
  letter-spacing: var(--track-soft); margin-bottom: 28px; max-width: 58ch;
}
.hero-sign {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 32px;
}
.hero-sign i { width: 5px; height: 5px; border-radius: 50%; background: var(--navy-400); display: block; }
.hero-note { font-size: 13.5px; color: var(--ink-500); margin-top: 18px; }

/* Painel visual do hero */
.hero-panel {
  position: relative; border-radius: var(--r-xl); padding: clamp(20px, 3vw, 30px);
  background: var(--neu-bg); box-shadow: var(--neu-3); border: var(--neu-edge);
}
.hero-panel-title {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-500); margin-bottom: 18px;
}
.hero-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--neu-bg); box-shadow: var(--neu-1);
  font-size: 14px; font-weight: 500; color: var(--ink-700);
  transition: box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.hero-chip:hover { transform: translateY(-2px); box-shadow: var(--neu-2); }
.hero-chip .ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  background: var(--grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 8px rgba(3,5,79,0.24), -2px -2px 6px var(--neu-light);
}
.hero-chip .ic svg { width: 17px; height: 17px; }
.hero-panel-foot {
  margin-top: 18px; padding: 14px 18px; border-radius: var(--r-md);
  background: var(--neu-bg); box-shadow: var(--neu-in-1);
  font-size: 13px; color: var(--ink-500); text-align: center;
}
.hero-panel-foot b { color: var(--navy-600); font-weight: 600; }

/* ═══ MARQUEE ══════════════════════════════════════════════ */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.marquee {
  overflow: hidden; display: flex; padding: 18px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display: flex; flex-shrink: 0; white-space: nowrap; will-change: transform;
  animation: marquee-x var(--marquee-speed, 28s) linear infinite;
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex; align-items: center; gap: 18px;
  font-size: clamp(16px, 2.2vw, 28px); font-weight: 700;
  letter-spacing: var(--track-tight); text-transform: uppercase;
  padding-right: 18px;
}
.marquee__sep { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* Faixa de borda a borda: fica fora do .wrap, então já nasce com a largura
   total do fluxo. Nada de 100vw aqui — o vw inclui a barra de rolagem e
   deslocaria a faixa alguns pixels para a esquerda. */
.marquee--full {
  width: 100%;
  border-radius: 0;
  padding: clamp(20px, 3vw, 30px) 0;
}

.marquee--brand { background: var(--grad-brand); border-radius: var(--r-lg); }
.marquee--brand.marquee--full { border-radius: 0; }
.marquee--brand .marquee__item { color: #fff; }
.marquee--brand .marquee__sep { background: rgba(255,255,255,0.45); }
.marquee--neu { background: var(--neu-bg); border-radius: var(--r-lg); box-shadow: var(--neu-in-2); }
.marquee--neu .marquee__item { color: var(--ink-700); font-size: clamp(14px, 1.4vw, 18px); font-weight: 600; letter-spacing: var(--track-soft); text-transform: none; }
.marquee--neu .marquee__sep { background: var(--navy-600); }

/* ═══ CARDS ════════════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
/* Cinco cards em 3 + 2: a grade tem 6 colunas e cada card ocupa 2, então os
   dois últimos podem começar na coluna 2 e 4 e ficar centralizados na linha
   de baixo, em vez de escorarem à esquerda. */
.grid-benefits { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.grid-benefits > * { grid-column: span 2; }
.grid-benefits > *:nth-child(4) { grid-column: 2 / span 2; }
.grid-benefits > *:nth-child(5) { grid-column: 4 / span 2; }

.card {
  background: var(--neu-bg); border-radius: var(--r-lg); box-shadow: var(--neu-2);
  padding: 28px; transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
  height: 100%;
}
.card-hover:hover { transform: translateY(-4px); box-shadow: var(--neu-3); }
.card-tile {
  width: 52px; height: 52px; border-radius: 16px; background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 5px 5px 12px rgba(3,5,79,0.26), -3px -3px 9px var(--neu-light);
  margin-bottom: 18px; flex-shrink: 0;
}
.card-tile svg { width: 24px; height: 24px; }
.card-title { font-size: 17px; font-weight: 600; letter-spacing: var(--track-soft); margin-bottom: 8px; }
.card-text { font-size: 14.5px; color: var(--ink-500); line-height: 1.55; }

.on-brand .card {
  background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.on-brand .card-hover:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 18px 40px rgba(0,0,0,0.24); }
.on-brand .card-title { color: #fff; }
.on-brand .card-text { color: rgba(255,255,255,0.72); }
.on-brand .card-tile { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }

/* ═══ TRILHA DO ECOSSISTEMA ════════════════════════════════
   Um trilho vertical acompanha a leitura dos seis serviços: o preenchimento
   e o ponto seguem o scroll, e o serviço mais próximo da linha de foco fica
   ativo. O texto nunca é esmaecido — só os elementos decorativos reagem, para
   que os seis continuem legíveis a qualquer momento. */
.svc-rail { display: grid; grid-template-columns: 64px 1fr; }
.svc-rail__track {
  position: relative;
  justify-self: center;
  width: 4px;
  margin: 56px 0;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, transparent, var(--neu-dark) 5%, var(--neu-dark) 95%, transparent);
}
.svc-rail__highlight {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--navy-400), var(--navy-600));
  transition: height 0.25s linear;
}
.svc-rail__dot {
  position: absolute; left: 50%; top: 0%;
  transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 6px rgba(42,52,168,0.14), 3px 3px 9px rgba(3,5,79,0.32);
  transition: top 0.25s linear;
}
.svc-rail__node {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: inset 0 0 0 2px var(--neu-dark);
  transition: background var(--slow) var(--ease), box-shadow var(--slow) var(--ease),
              transform var(--slow) var(--ease-spring);
}
.svc-rail__node.is-done { background: var(--navy-400); box-shadow: inset 0 0 0 2px var(--navy-600); }
.svc-rail__node.is-active {
  background: var(--navy-600);
  box-shadow: 0 0 0 5px rgba(42,52,168,0.16);
  transform: translate(-50%, -50%) scale(1.4);
}

/* Estado ativo do serviço: só o que é decorativo se move */
.svc-media { transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease); }
.svc.is-active .svc-media { transform: translateY(-8px); box-shadow: var(--neu-4); }
.svc-index { transition: color var(--slow) var(--ease); }
.svc.is-active .svc-index { color: var(--navy-600); }
.svc-by { transition: transform var(--slow) var(--ease-spring), box-shadow var(--slow) var(--ease); }
.svc.is-active .svc-by {
  transform: translateY(-2px);
  box-shadow: 7px 7px 18px rgba(3,5,79,0.3), -4px -4px 12px var(--neu-light);
}

/* ═══ SERVIÇOS ═════════════════════════════════════════════ */
.svc { padding: clamp(48px, 6vw, 84px) 0; }
.svc-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.svc--flip .svc-media { order: -1; }

.svc-index {
  display: inline-flex; align-items: center; margin: 0 16px 18px 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-500);
}
.svc-title {
  font-size: clamp(24px, 3.2vw, 36px); font-weight: 700;
  letter-spacing: var(--track-tight); line-height: 1.12; margin-bottom: 18px;
  text-wrap: balance;
}
.svc-micro {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  font-size: 13.5px; font-weight: 500; color: var(--navy-600);
  padding: 11px 18px; border-radius: var(--r-pill);
  background: var(--neu-bg); box-shadow: var(--neu-in-1);
}
.svc-micro svg { width: 15px; height: 15px; flex-shrink: 0; }

.on-brand .svc-micro {
  background: rgba(255,255,255,0.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  color: #fff;
}

/* Selo da empresa responsável
   Pílula navy: os logotipos do grupo vieram em versão branca, então o fundo
   escuro serve os dois temas com um arquivo só, sem filtro nem troca de src. */
.svc-by {
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
  padding: 10px 20px 10px 18px; border-radius: var(--r-pill);
  background: var(--grad-brand);
  box-shadow: 5px 5px 14px rgba(3,5,79,0.26), -3px -3px 10px var(--neu-light);
}
.svc-by-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); white-space: nowrap;
  padding-right: 14px; border-right: 1px solid rgba(255,255,255,0.22);
}
.svc-by img { height: 17px; width: auto; flex-shrink: 0; }
/* O IAFlow traz assinatura em duas linhas e o brasão é quadrado:
   ambos precisam de mais altura para não virarem borrão. */
.svc-by--iaflow img { height: 26px; }
.svc-by--juris img { height: 22px; }
.svc-by--crest img { height: 32px; }

/* Mídia da seção de serviço */
.svc-media {
  position: relative; border-radius: var(--r-xl); padding: clamp(18px, 2.6vw, 28px);
  background: var(--neu-bg); box-shadow: var(--neu-3); border: var(--neu-edge);
}
.svc-media-inner {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--grad-soft); box-shadow: var(--neu-in-1);
  aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
}
.svc-media-inner svg { width: 100%; height: 100%; }
.svc-media-inner img { width: 100%; height: 100%; object-fit: cover; }

/* ═══ LISTA DE PILARES ═════════════════════════════════════ */
.pillars { display: grid; gap: 14px; }
.pillar {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; border-radius: var(--r-md);
  background: var(--neu-bg); box-shadow: var(--neu-1);
  transition: box-shadow var(--normal) var(--ease), transform var(--normal) var(--ease);
}
.pillar:hover { transform: translateX(3px); box-shadow: var(--neu-2); }
.pillar .ic {
  width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
  background: var(--grad-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 3px 3px 9px rgba(3,5,79,0.24), -2px -2px 6px var(--neu-light);
}
.pillar .ic svg { width: 18px; height: 18px; }
.pillar h3 { font-size: 16px; font-weight: 600; letter-spacing: var(--track-soft); margin-bottom: 4px; }
.pillar p { font-size: 14.5px; color: var(--ink-500); line-height: 1.5; }

.on-brand .pillar {
  background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.on-brand .pillar:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.on-brand .pillar h3 { color: #fff; }
.on-brand .pillar p { color: rgba(255,255,255,0.72); }
.on-brand .pillar .ic { background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); }

/* ═══ PMV ══════════════════════════════════════════════════ */
.pmv { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.pmv-card { padding: 32px; border-radius: var(--r-lg); background: var(--neu-bg); box-shadow: var(--neu-2); }
.pmv-card .num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-600); margin-bottom: 14px; display: block;
}
.pmv-card h3 { font-size: 20px; font-weight: 700; letter-spacing: var(--track-soft); margin-bottom: 10px; }
.pmv-card p { font-size: 15.5px; color: var(--ink-500); line-height: 1.55; }

.on-brand .pmv-card {
  background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.on-brand .pmv-card .num { color: var(--navy-200); }
.on-brand .pmv-card h3 { color: #fff; }
.on-brand .pmv-card p { color: rgba(255,255,255,0.72); }

/* ═══ EMPRESAS DO GRUPO ════════════════════════════════════ */
/* Cinco empresas em 3 + 2, mesma técnica da grade de benefícios:
   6 colunas, cada card ocupa 2, e os dois últimos começam na 2 e na 4. */
.group-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.group-grid > * { grid-column: span 2; }
.group-grid > *:nth-child(4) { grid-column: 2 / span 2; }
.group-grid > *:nth-child(5) { grid-column: 4 / span 2; }
.group-card {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px; border-radius: var(--r-lg);
  background: var(--neu-bg); box-shadow: var(--neu-2);
  transition: transform var(--normal) var(--ease), box-shadow var(--normal) var(--ease);
}
.group-card:hover { transform: translateY(-4px); box-shadow: var(--neu-3); }
.group-logo {
  height: 92px; border-radius: var(--r-md); background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 5px 5px 14px rgba(3,5,79,0.24), -3px -3px 9px var(--neu-light);
  padding: 0 24px;
}
.group-logo img { max-width: 100%; width: auto; height: 30px; }
.group-logo--iaflow img { height: 46px; }
.group-logo--juris img { height: 34px; }
.group-logo--crest img { height: 64px; }
.group-card h3 { font-size: 17px; font-weight: 600; letter-spacing: var(--track-soft); }
.group-card p { font-size: 14.5px; color: var(--ink-500); line-height: 1.55; flex: 1; }
.group-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
/* Vale para <a> e para o <span class="is-soon">: os dois são a mesma pílula.
   Sem o span no seletor ele perdia o inline-flex, e o SVG sem largura definida
   crescia até o tamanho padrão de imagem substituída, torcendo a linha toda. */
.group-links a,
.group-links .is-soon {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; line-height: 1.2; white-space: nowrap;
  color: var(--navy-700); text-decoration: none;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--neu-bg); box-shadow: var(--neu-1);
  transition: box-shadow var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.group-links a:hover { box-shadow: var(--neu-2); transform: translateY(-1px); }
.group-links svg { width: 13px; height: 13px; flex-shrink: 0; }
.group-links .is-soon { color: var(--ink-500); box-shadow: var(--neu-in-1); cursor: default; }
.group-links .is-soon:hover { transform: none; box-shadow: var(--neu-in-1); }

/* ═══ ÁREA DE ATUAÇÃO ══════════════════════════════════════ */
.reach {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 60px); align-items: center;
}
/* Mapa do Brasil: silhueta preenchida na cor da marca, com as divisas dos
   estados desenhadas pelo próprio contorno de cada path. */
.map-brazil { width: 100%; height: auto; display: block; }
.map-brazil path {
  fill: var(--navy-600);
  stroke: var(--neu-bg);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transition: fill var(--normal) var(--ease);
}
.map-brazil path:hover { fill: var(--navy-700); }

/* Sobre o bloco navy o mapa inverte: silhueta clara, divisas escuras */
.on-brand .map-brazil path { fill: #C7CCF5; stroke: rgba(6,10,58,0.55); }
.on-brand .map-brazil path:hover { fill: #fff; }

.reach-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin-top: 32px; }
.reach-stat { padding: 22px; border-radius: var(--r-md); background: var(--neu-bg); box-shadow: var(--neu-in-1); text-align: center; }
.reach-stat b { display: block; font-size: 26px; font-weight: 700; letter-spacing: var(--track-tight); color: var(--navy-600); margin-bottom: 4px; }
.reach-stat span { font-size: 13px; color: var(--ink-500); }

.on-brand .reach-stat {
  background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
}
.on-brand .reach-stat b { color: #fff; }
.on-brand .reach-stat span { color: rgba(255,255,255,0.72); }

/* ═══ CTA FINAL ════════════════════════════════════════════ */
.cta-final { text-align: center; }
.cta-final .section-title { font-size: clamp(28px, 4.6vw, 46px); max-width: 20ch; margin-left: auto; margin-right: auto; }
.cta-final .section-sub { margin: 0 auto 34px; }
.cta-micro { font-size: 13.5px; color: rgba(255,255,255,0.6); margin-top: 18px; }

/* ═══ FOOTER ═══════════════════════════════════════════════ */
/* ═══ FOOTER ═══════════════════════════════════════════════
   O rodapé é sempre escuro, nos dois temas: redefinir os tokens no próprio
   bloco faz todos os componentes internos virarem junto, sem precisar
   reescrever cada regra. É o mesmo mecanismo do [data-theme="dark"]. */
.footer {
  padding: clamp(56px, 7vw, 80px) 0 40px;

  --neu-bg:     #12163C;
  --neu-bg-alt: #171C48;
  --neu-light:  #1D2358;
  --neu-dark:   #080B26;
  --ink-900: #F2F4FF;
  --ink-700: #C3C8EA;
  --ink-500: #9098C4;
  --ink-300: #6B73A0;
  --navy-600: #7A85E8;
  --navy-700: #A7B0F5;

  background: var(--neu-bg);
  background-image:
    radial-gradient(60% 70% at 15% 20%, #1A2064 0%, transparent 62%),
    radial-gradient(50% 60% at 85% 15%, #291B57 0%, transparent 62%),
    radial-gradient(60% 60% at 75% 85%, #11294F 0%, transparent 62%);
  color: var(--ink-900);
}

/* Sobre fundo escuro fixo, o lockup é sempre branco */
.footer .footer-logo { filter: brightness(0) invert(1); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px); margin-bottom: 44px;
}
.footer h2 { margin-bottom: 18px; }
.footer-tagline { font-size: 15px; color: var(--ink-500); margin-bottom: 10px; max-width: 42ch; }
.footer-sign { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.footer-col h3 { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 4px; }
/* Padding vertical dá altura de toque confortável aos links do rodapé */
.footer-col a, .footer-col span {
  display: inline-block; padding: 7px 0;
  font-size: 14.5px; color: var(--ink-700); text-decoration: none;
  transition: color var(--fast) var(--ease);
}
.footer-col a:hover { color: var(--navy-600); }
/* Precisa vencer o display:inline-block de .footer-col a */
.footer-col .footer-contact { display: flex; align-items: center; gap: 10px; }
.footer-contact svg { width: 15px; height: 15px; color: var(--ink-300); flex-shrink: 0; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  /* No fundo escuro, --neu-dark sumiria: a divisória usa branco translúcido */
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 12.5px; color: var(--ink-500);
}
.footer-bottom a { text-decoration: none; }
.footer-bottom a:hover { color: var(--navy-600); }

/* ═══ FAB WHATSAPP ═════════════════════════════════════════ */
.fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 13px 22px 13px 15px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, #2FE075, #1DA851); color: #fff;
  text-decoration: none; font-size: 14.5px; font-weight: 600; letter-spacing: var(--track-soft);
  box-shadow: 0 12px 30px rgba(29,168,81,0.38), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform var(--normal) var(--ease-spring), box-shadow var(--normal) var(--ease), opacity var(--normal) var(--ease);
}
.fab:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 38px rgba(29,168,81,0.46), inset 0 1px 0 rgba(255,255,255,0.35); }
.fab:active { transform: translateY(0) scale(0.99); }
.fab svg { width: 24px; height: 24px; flex-shrink: 0; }
.fab-label { white-space: nowrap; }

/* ═══ REVEAL ═══════════════════════════════════════════════
   Só esconde o conteúdo quando há JS para revelá-lo de volta.
   Sem a classe .js no <html>, tudo nasce visível.

   A entrada usa animation, não transition, de propósito: vários elementos
   revelados (cards, cards do grupo) também têm hover próprio, e um transition
   aqui sobrescreveria o transition deles — o box-shadow do hover passava a
   trocar de estalo. Com animation, a propriedade transition fica livre para
   o componente. O JS remove a classe quando a entrada termina. */
.js .reveal { opacity: 0; }
.js .reveal.is-in { opacity: 1; animation: reveal-in 620ms var(--ease) backwards; }
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.reveal-d1 { animation-delay: 80ms; }
.reveal-d2 { animation-delay: 160ms; }
.reveal-d3 { animation-delay: 240ms; }
.reveal-d4 { animation-delay: 320ms; }

/* ═══ RESPONSIVO ═══════════════════════════════════════════ */
@media (max-width: 1080px) {
  .nav-links a { padding: 8px 10px; font-size: 12.5px; }
}

@media (max-width: 980px) {
  .nav-links { display: none; }
  .menu-btn { display: flex; }
  .nav .btn-whats { display: none; }
  /* Duas colunas: o quinto card ficaria sozinho e torto à esquerda,
     então ele atravessa a linha e se centraliza na largura de um card. */
  .grid-benefits, .group-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-benefits > *, .grid-benefits > *:nth-child(4),
  .group-grid > *, .group-grid > *:nth-child(4) { grid-column: auto; }
  .grid-benefits > *:nth-child(5),
  .group-grid > *:nth-child(5) {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 11px);
  }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 100%; }
  .hero-panel { max-width: 560px; }
  .svc-grid { grid-template-columns: 1fr; gap: 32px; }
  .svc--flip .svc-media { order: 0; }
  .svc-media { max-width: 620px; }
  /* Em coluna única não há margem lateral para o trilho */
  .svc-rail { grid-template-columns: 1fr; }
  .svc-rail__track { display: none; }
  .svc.is-active .svc-media { transform: none; }
  .reach { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .card, .pmv-card, .group-card { padding: 24px; }
  .grid-benefits, .group-grid { grid-template-columns: 1fr; }
  .grid-benefits > *, .group-grid > *,
  .grid-benefits > *:nth-child(5),
  .group-grid > *:nth-child(5) { grid-column: auto; width: auto; }
  .hero-chips { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .fab { right: 14px; bottom: 14px; padding: 12px; }
  .fab-label { display: none; }
  .nav { top: 10px; width: calc(100% - 20px); padding: 8px 8px 8px 12px; }
  .nav-brand .logo-lockup { --logo-w: 122px; }
  .btn-lg { font-size: 15px; padding: 14px 26px; }
  .btn-row .btn { width: 100%; }
  .section-head { margin-bottom: 32px; }
}

/* Em telas muito estreitas o lockup encolhe, mas nunca some: agora ele é a
   única marca presente na nav. */
@media (max-width: 340px) {
  .nav-brand .logo-lockup { --logo-w: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  /* Sem transform aqui: esta regra vem depois dos hovers e, com a mesma
     especificidade, travaria o transform deles. */
  .js .reveal { opacity: 1; animation: none; }
}

/* ═══ IMPRESSÃO ════════════════════════════════════════════ */
@media print {
  .nav, .fab, .nav-drawer, .marquee { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1; animation: none; }
}