/* ============================================================
   KEYASSOCIADOS — assets/css/style.css
   Zero estilos inline · Zero scripts embutidos · CSP-safe
   ============================================================ */

/* ── 1. DESIGN TOKENS ───────────────────────────────────────── */
:root {
  /* Cores */
  /* Azul institucional sóbrio — diretriz explícita do cliente:
     eliminar qualquer vestígio de tom arroxeado/violeta. */
  --blue-deep:     #0B2545;
  --blue-mid:      #1B3D96;
  /* Azul ajustado: a tonalidade anterior (#2C5FD4) tinha o canal
     vermelho proporcionalmente alto, puxando para violeta. Este
     tom reduz o vermelho e reforça azul/ciano, ficando mais "azul puro". */
  --blue-light:    #1670E8;
  --orange:        #F4820E;
  --orange-dark:   #D4700C;
  --green:         #27B862;
  --green-dark:    #1E9A50;
  --white:         #FFFFFF;
  --off-white:     #F0F4FA;
  --text-muted:    rgba(255,255,255,0.70);
  --border-dark:   rgba(11,37,69,0.12);
  --border-light:  rgba(255,255,255,0.12);
  --surface-light: rgba(255,255,255,0.05);

  /* Tipografia */
  /* Fonte de display: Poppins (bold) — substitui definitivamente
     qualquer fonte com esticamento horizontal (Syne e variantes
     anteriores). Poppins garante leitura limpa, elegante e moderna
     em h1/h2/h3 conforme diretriz do cliente. */
  --font-display: 'Poppins', system-ui, sans-serif;
  /* Fonte de corpo: Inter — usada em parágrafos, com line-height
     ampliado (1.6) aplicado via classe base do body, ver seção 2. */
  --font-body:    'Inter', system-ui, sans-serif;

  /* Escala fluida */
  --t-xs:   clamp(0.70rem,  0.65rem + 0.25vw, 0.80rem);
  --t-sm:   clamp(0.85rem,  0.80rem + 0.25vw, 0.95rem);
  --t-base: clamp(0.95rem,  0.90rem + 0.25vw, 1.05rem);
  --t-lg:   clamp(1.10rem,  1.00rem + 0.50vw, 1.25rem);
  --t-xl:   clamp(1.25rem,  1.10rem + 0.75vw, 1.50rem);
  --t-2xl:  clamp(1.50rem,  1.20rem + 1.50vw, 2.00rem);
  --t-3xl:  clamp(2.00rem,  1.50rem + 2.50vw, 3.00rem);
  --t-4xl:  clamp(2.50rem,  1.80rem + 3.50vw, 4.00rem);

  /* Espaços */
  --sp-1:  0.25rem;
  --sp-2:  0.50rem;
  --sp-3:  0.75rem;
  --sp-4:  1.00rem;
  --sp-5:  1.25rem;
  --sp-6:  1.50rem;
  --sp-8:  2.00rem;
  --sp-10: 2.50rem;
  --sp-12: 3.00rem;
  --sp-16: 4.00rem;
  --sp-20: 5.00rem;
  --sp-24: 6.00rem;

  /* Forma */
  --r-sm:  6px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;

  /* Sombras */
  --sh-sm:   0 2px 8px  rgba(11,37,69,0.08);
  --sh-md:   0 8px 24px rgba(11,37,69,0.12);
  --sh-lg:   0 16px 48px rgba(11,37,69,0.16);
  --sh-glow: 0 0 30px rgba(244,130,14,0.25);

  /* Transições */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast:   150ms;
  --norm:   300ms;
  --slow:   600ms;

  /* Layout */
  --max-w:   1200px;
  --nav-h:   78px;
}

/* ── 2. RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.65;
  color: var(--blue-deep);
  background: var(--off-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Reset tipográfico global — diretriz do cliente:
   Poppins (bold) para todos os headings, Inter para corpo/parágrafos
   com respiro de linha confortável (line-height 1.6). Classes
   específicas (.hero-heading, .section-title etc.) já aplicam
   var(--font-display) individualmente; esta regra é a rede de
   segurança para qualquer h1/h2/h3/p sem classe dedicada. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
}

p {
  font-family: var(--font-body);
  line-height: 1.6;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul[role="list"] { list-style: none; }
address { font-style: normal; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* Reduzir motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:  0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 3. ACESSIBILIDADE ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--orange);
  color: var(--white);
  font-weight: 600;
  border-radius: var(--r-sm);
  z-index: 9999;
  transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

.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;
}

/* ── 4. LAYOUT ───────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

/* ── 5. TIPOGRAFIA COMPARTILHADA ─────────────────────────────── */
.eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-3);
}
.eyebrow--light { color: var(--green); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  color: var(--blue-deep);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.section-title--light { color: var(--white); }

.section-sub {
  font-size: var(--t-lg);
  color: rgba(11,37,69,0.60);
  max-width: 52ch;
  margin-inline: auto;
}
.section-sub--light { color: var(--text-muted); }

.section-header { text-align: center; margin-bottom: var(--sp-12); }

em { font-style: normal; color: var(--orange); }

/* ── 6. BOTÕES ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 600;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--norm) var(--ease);
  white-space: nowrap;
  background: none;
}

.btn-primary {
  background: var(--orange);
  color: var(--white);
  border-color: var(--orange);
}
.btn-primary:hover {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  transform: translateY(-2px);
  box-shadow: var(--sh-glow);
}

.btn-secondary {
  background: rgba(255,255,255,0.10);
  color: var(--white);
  border-color: rgba(255,255,255,0.28);
  backdrop-filter: blur(4px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-2px);
}

.btn-dark {
  background: var(--blue-deep);
  color: var(--white);
  border-color: var(--blue-deep);
}
.btn-dark:hover {
  background: var(--blue-mid);
  border-color: var(--blue-mid);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.40);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.70);
}

.btn-outline {
  background: transparent;
  color: var(--blue-deep);
  border-color: var(--blue-deep);
}
.btn-outline:hover {
  background: var(--blue-deep);
  color: var(--white);
}

.btn-sm { padding: var(--sp-2) var(--sp-4); font-size: var(--t-xs); }

/* ── 7. HEADER / NAV ─────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-h);
  background: rgba(11,37,69,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-light);
  transition: background var(--norm) var(--ease),
              box-shadow var(--norm) var(--ease);
}
.site-header.scrolled {
  background: rgba(11,37,69,0.98);
  box-shadow: 0 4px 30px rgba(0,0,0,0.25);
}

.nav-inner {
  max-width: var(--max-w);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-8);
}

/* Logo no header escuro: substituído pela versão branca real do
   arquivo (assets/img/logo-white.png), gerada a partir do logo
   colorido original. O logo fonte é um JPEG opaco sem canal alfa
   — aplicar filter:brightness(0) invert(1) diretamente nele
   produziria um retângulo branco sólido (sem desenho visível),
   já que o filtro zera e inverte TODOS os pixels uniformemente
   quando não há transparência para preservar o contorno do desenho.
   A troca de asset resolve isso de forma definitiva e sem dependência
   de filtro CSS. */
.nav-logo {
  display: inline-flex;
  align-items: center;
}
.nav-logo img { height: 60px; width: auto; display: block; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  list-style: none;
}

.nav-link {
  font-size: var(--t-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  transition: color var(--fast), background var(--fast);
}
.nav-link:hover {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}

.nav-cta {
  background: var(--orange);
  color: var(--white) !important;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-md);
  font-weight: 600;
}
.nav-cta:hover { background: var(--orange-dark) !important; }

/* ── Dropdown "Soluções" — 4 verticais de negócio ────────────── */
.nav-item--dropdown { position: relative; }

.nav-link--dropdown {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.nav-link__chevron {
  transition: transform var(--fast);
}
.nav-item--dropdown.open .nav-link__chevron,
.nav-link--dropdown[aria-expanded="true"] .nav-link__chevron {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--sp-3));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 360px;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--border-dark);
  padding: var(--sp-3);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--fast), transform var(--fast), visibility var(--fast);
  z-index: 50;
}
.nav-item--dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Ponte invisível de hover: preenche o espaço entre o link e o
   dropdown (var(--sp-3) de gap) para que o mouse não "perca" o
   menu ao se mover do trigger até o submenu. */
.nav-item--dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: var(--sp-3);
}

.nav-dropdown__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  transition: background var(--fast);
}
.nav-dropdown__item:hover { background: var(--off-white); }

.nav-dropdown__title {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--blue-deep);
}
.nav-dropdown__desc {
  font-size: var(--t-xs);
  color: rgba(11,37,69,0.55);
  line-height: 1.45;
}

/* Hambúrguer */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
}
.nav-toggle .bar {
  display: block;
  width: 22px; height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--norm) var(--ease),
              opacity var(--norm) var(--ease);
}

/* ── 8. ANIMAÇÕES SCROLL ─────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transition: opacity var(--slow) var(--ease),
              transform var(--slow) var(--ease);
}
[data-reveal="fade-up"]  { transform: translateY(28px); }
[data-reveal="fade-left"]{ transform: translateX(28px); }
[data-reveal].revealed   { opacity: 1; transform: none; }

[data-delay="80"]  { transition-delay:  80ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="160"] { transition-delay: 160ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="240"] { transition-delay: 240ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="320"] { transition-delay: 320ms; }
[data-delay="400"] { transition-delay: 400ms; }

/* ── 9. HERO ─────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #020C1E 0%, #0B2545 30%, #1040A0 60%, #071A4F 100%);
  background-size: 400% 400%;
  animation: hero-gradient 7s ease infinite;
  padding-top: var(--nav-h);
  overflow: hidden;
}

@keyframes hero-gradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Orbs flutuantes ─────────────────────────────────────────── */
.hero-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  animation: orb-float 0s ease-in-out infinite alternate;
}

/* orb 1 — verde sustentabilidade, canto sup dir */
.orb--1 {
  width: 620px; height: 620px;
  top: -140px; right: -80px;
  background: radial-gradient(circle, rgba(39,184,98,0.45) 0%, transparent 70%);
  animation: orb-float 8s ease-in-out infinite alternate;
  animation-delay: 0s;
}
/* orb 2 — laranja KEY, canto inf esq */
.orb--2 {
  width: 500px; height: 500px;
  bottom: -80px; left: -60px;
  background: radial-gradient(circle, rgba(244,130,14,0.35) 0%, transparent 70%);
  animation: orb-float 10s ease-in-out infinite alternate;
  animation-delay: -3s;
}
/* orb 3 — azul claro, centro */
.orb--3 {
  width: 700px; height: 700px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(22,112,232,0.30) 0%, transparent 70%);
  animation: orb-pulse 6s ease-in-out infinite;
  animation-delay: -1s;
}
/* orb 4 — verde escuro, meio dir */
.orb--4 {
  width: 380px; height: 380px;
  top: 30%; right: 18%;
  background: radial-gradient(circle, rgba(39,184,98,0.25) 0%, transparent 70%);
  animation: orb-float 12s ease-in-out infinite alternate;
  animation-delay: -5s;
}
/* orb 5 — laranja suave, topo esq */
.orb--5 {
  width: 320px; height: 320px;
  top: 8%; left: 28%;
  background: radial-gradient(circle, rgba(244,130,14,0.20) 0%, transparent 70%);
  animation: orb-float 9s ease-in-out infinite alternate;
  animation-delay: -4s;
}

@keyframes orb-float {
  0%   { opacity: 1; transform: translateY(0px)   scale(1); }
  100% { opacity: 1; transform: translateY(-55px) scale(1.12); }
}
@keyframes orb-pulse {
  0%,100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  50%      { opacity: 1; transform: translate(-50%,-50%) scale(1.25); }
}

/* ── Grid de pontos decorativos — mais denso e mais branco ──── */
.hero-dots-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  /* Duas camadas de pontos com tamanhos e offsets diferentes → mais densidade */
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,0.20) 1px,   transparent 1px);
  background-size: 28px 28px, 14px 14px;
  background-position: 0 0, 7px 7px;
  animation: dots-twinkle 3s ease-in-out infinite alternate;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,
    black 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%,
    black 20%, transparent 100%);
}

@keyframes dots-twinkle {
  0%   { opacity: 0.6; }
  100% { opacity: 1.0; }
}

/* ── Scroll hint (seta animada) ─────────────────────────────── */
.hero-scroll-hint {
  position: absolute;
  bottom: 38px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s;
  animation: scroll-hint-fade 1.5s ease 2s both;
}
.hero-scroll-hint:hover { color: rgba(255,255,255,0.90); }

.scroll-hint-label { white-space: nowrap; }

.scroll-hint-arrow {
  display: flex;
  animation: arrow-bounce 1.8s ease-in-out infinite;
}
.scroll-hint-arrow svg { display: block; }

@keyframes arrow-bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}
@keyframes scroll-hint-fade {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Texto hero com reveal animation ────────────────────────── */
.hero-heading {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--white);
  line-height: 1.10;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-4);
  animation: text-reveal 0.9s var(--spring) 0.2s both;
}
.hero-heading em {
  font-style: normal;
  background: linear-gradient(90deg, var(--green) 0%, #00d68f 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-sub {
  animation: text-reveal 0.9s var(--spring) 0.45s both;
}
.hero-eyebrow {
  animation: text-reveal 0.9s var(--spring) 0s both;
}
.hero-dots { animation: text-reveal 0.9s var(--spring) 0.7s both; }
.hero-actions { animation: text-reveal 0.9s var(--spring) 0.9s both; }

@keyframes text-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.65;
}

/* Wrapper de duas colunas: texto (esq) | diagrama (dir) */
.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--sp-6);
  padding-block: var(--sp-20) var(--sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

/* Coluna esquerda — texto */
.hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-eyebrow {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-4);
}

.hero-heading {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 800;
  color: var(--white);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-bottom: var(--sp-5);
}

.hero-sub {
  font-size: var(--t-lg);
  color: var(--text-muted);
  max-width: 42ch;
  line-height: 1.70;
  margin-bottom: var(--sp-8);
}

/* ── Hero Slider — 3 slides de texto em rotação automática ───────
   Slides empilhados via grid (todos na mesma célula), com apenas
   o .is-active visível. min-height reserva espaço para o slide
   mais alto, evitando que o layout "salte" ao trocar de slide. */
.hero-slides {
  display: grid;
  width: 100%;
  min-height: 280px;   /* acomoda heading de até 3 linhas + eyebrow + sub */
}

.hero-slide {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.hero-slide.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-slide .hero-eyebrow,
.hero-slide .hero-heading,
.hero-slide .hero-sub {
  margin-bottom: var(--sp-4);
}
.hero-slide .hero-heading { margin-bottom: var(--sp-5); }
.hero-slide .hero-sub     { margin-bottom: 0; }

/* Dots de navegação manual */
.hero-dots {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.hero-dot {
  width: 32px;
  height: 4px;
  border-radius: 100px;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--fast), width var(--fast);
}
.hero-dot:hover { background: rgba(255,255,255,0.45); }
.hero-dot.is-active {
  background: var(--green);
  width: 48px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* Coluna direita — diagrama */
.hero-diagram {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.diagram-svg {
  width: 100%;
  max-width: 460px;
  border-radius: var(--r-xl);
  /* Fundo do "quadro" do diagrama: era quase imperceptível
     (branco a 2.5% de opacidade), ficando parecido com o fundo
     do Hero. Ajustado para um tom levemente azulado mais perceptível,
     dando contorno mais definido à caixa onde ficam os nós ISO. */
  background: linear-gradient(135deg, rgba(22,112,232,0.10), rgba(11,37,69,0.18));
  border: 1px solid rgba(255,255,255,0.10);
  filter: drop-shadow(0 0 40px rgba(244,130,14,0.12));
}

/* Animações SVG internas */
/* .svg-conn removida: as linhas de conexão agora vivem dentro dos
   grupos orbitais (orbit-group) no próprio SVG, animadas via
   <animateTransform> nativo. O efeito de "desenhar a linha" foi
   substituído pelo movimento orbital contínuo dos satélites. */

.svg-node { animation: node-pulse 3s ease-in-out infinite; }
.svg-node:nth-child(odd) { animation-delay: 1.5s; }

.svg-hub {
  transform-box: fill-box;
  transform-origin: center;
  animation: hub-pulse 2.5s ease-in-out infinite;
}

/* Sistema de satélites em órbita — diretriz do cliente: "colocar o
   sistema de satélites em movimento". Cada .orbit-group já tem sua
   própria rotação via <animateTransform> SMIL no SVG, com centro de
   rotação absoluto (ex: "rotate(ângulo 220 220)"). NÃO aplicamos
   transform-box/transform-origin via CSS aqui: SMIL puro já opera em
   coordenadas globais do viewBox, e misturar com transform-box:fill-box
   fazia o navegador recalcular a origem incorretamente, acumulando
   deslocamento progressivo até os satélites saírem da área visível
   durante a órbita (bug identificado e corrigido). */

/* Constelação secundária — subprodutos flutuantes em segundo plano.
   Pulsar lento e assíncrono cria sensação de profundidade e
   dinamismo técnico sem disputar atenção com os 4 nós principais.
   CORREÇÃO CSP: os delays eram aplicados via style="animation-delay"
   inline no SVG, o que violava a Content Security Policy do projeto
   (style-src sem 'unsafe-inline'). Substituído por seletores
   :nth-child, preservando exatamente os mesmos 17 valores de delay
   na mesma ordem em que os <text> aparecem dentro de .constellation. */
.svg-twinkle {
  animation: twinkle 4.5s ease-in-out infinite;
}
.constellation text:nth-child(1)  { animation-delay: 0.2s; }
.constellation text:nth-child(2)  { animation-delay: 1.1s; }
.constellation text:nth-child(3)  { animation-delay: 0.6s; }
.constellation text:nth-child(4)  { animation-delay: 1.8s; }
.constellation text:nth-child(5)  { animation-delay: 0.4s; }
.constellation text:nth-child(6)  { animation-delay: 2.1s; }
.constellation text:nth-child(7)  { animation-delay: 1.4s; }
.constellation text:nth-child(8)  { animation-delay: 0.9s; }
.constellation text:nth-child(9)  { animation-delay: 0.3s; }
.constellation text:nth-child(10) { animation-delay: 1.6s; }
.constellation text:nth-child(11) { animation-delay: 2.3s; }
.constellation text:nth-child(12) { animation-delay: 0.7s; }
.constellation text:nth-child(13) { animation-delay: 1.2s; }
.constellation text:nth-child(14) { animation-delay: 1.9s; }
.constellation text:nth-child(15) { animation-delay: 0.5s; }
.constellation text:nth-child(16) { animation-delay: 1.3s; }
.constellation text:nth-child(17) { animation-delay: 2.0s; }

@keyframes twinkle {
  0%, 100% { opacity: 0.20; }
  50%      { opacity: 0.55; }
}

@keyframes node-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.60; }
}
@keyframes hub-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.85; transform: scale(1.05); }
}

/* Métricas */
.hero-metrics {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  padding-bottom: var(--sp-20);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

.metric-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  text-align: center;
  backdrop-filter: blur(6px);
  transition: background var(--norm), border-color var(--norm),
              transform var(--norm) var(--spring);
}
.metric-pill:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(244,130,14,0.40);
  transform: translateY(-3px);
}

.metric-num {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--green);
  line-height: 1;
  display: inline;
}
.metric-unit {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--green);
}
.metric-label {
  font-size: var(--t-xs);
  color: var(--text-muted);
  margin-top: var(--sp-2);
  font-weight: 500;
}

/* Onda final da hero */
.hero-wave {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  line-height: 0;
}
.hero-wave svg { width: 100%; display: block; }

/* ── 10. SOLUÇÕES ────────────────────────────────────────────── */
.section-solutions {
  position: relative;
  background: var(--off-white);
  padding-block: var(--sp-20) 0;
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  gap: var(--sp-6);
  list-style: none;
}

/* Grade de 8 cards: 4 colunas × 2 linhas */
.solutions-grid--8 {
  grid-template-columns: repeat(4, 1fr);
}

/* Numeração do serviço */
.sol-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.sol-card--accent .sol-number {
  background: var(--orange);
  color: var(--white);
}
.sol-card--green .sol-number {
  background: var(--green-dark);
  color: var(--white);
}

/* CTA abaixo do grid de serviços */
.sol-cta {
  text-align: center;
  margin-top: var(--sp-12);
}

.sol-card {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: border-color var(--norm), box-shadow var(--norm),
              transform var(--norm) var(--spring);
}
.sol-card:hover {
  border-color: rgba(11,37,69,0.25);
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
}

.sol-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: rgba(11,37,69,0.06);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3);
  color: var(--blue-deep);
  flex-shrink: 0;
}
.sol-icon svg { width: 100%; height: 100%; }

.sol-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.2;
}
.sol-card p {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.60);
  line-height: 1.70;
  flex: 1;
}

/* Variante azul escura — especificidade maior, declarada APÓS as bases */
.sol-card.sol-card--accent {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}
.sol-card.sol-card--accent:hover {
  border-color: rgba(244,130,14,0.50);
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.sol-card.sol-card--accent h3     { color: var(--white); }
.sol-card.sol-card--accent p      { color: rgba(255,255,255,0.70); }
.sol-card.sol-card--accent .sol-icon {
  color: var(--orange);
  background: rgba(244,130,14,0.15);
}

/* Variante verde — especificidade maior, declarada APÓS as bases */
.sol-card.sol-card--green .sol-icon {
  color: var(--green-dark);
  background: rgba(39,184,98,0.10);
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--blue-light);
  margin-top: auto;
  transition: gap var(--fast), color var(--fast);
}
.card-link:hover         { gap: var(--sp-3); color: var(--orange); }
.card-link--light        { color: var(--orange); }
.card-link--light:hover  { color: #ffa54f; }
.card-link--green        { color: var(--green-dark); }
.card-link--green:hover  { color: var(--green); }

/* Divisor diagonal */
.divider-diagonal {
  margin-top: var(--sp-20);
  line-height: 0;
}
.divider-diagonal svg { width: 100%; display: block; }

/* ── 11. CERTIFICAÇÕES ───────────────────────────────────────── */
.section-certs {
  position: relative;
  background: linear-gradient(160deg, var(--blue-deep) 0%, var(--blue-mid) 60%, #0D2A72 100%);
  padding-block: var(--sp-20) 0;
  overflow: hidden;
}
.section-certs::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(244,130,14,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(39,184,98,0.04) 0%, transparent 40%);
  pointer-events: none;
}

.certs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  list-style: none;
}
/* 6 cards = 3 + 3, grid limpo (a regra de centralização do 7º
   card foi removida — o LGPD/GDPR passou a viver na seção de
   Soluções Sustentáveis, não nas Certificações ISO). */

.cert-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  /* Padding corrigido: a versão anterior usava var(--sp-7), token
     inexistente no sistema de design — o navegador descartava a
     propriedade inválida, deixando o texto colado nas bordas.
     Agora --sp-8 (32px) garante o respiro mínimo exigido. */
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  backdrop-filter: blur(8px);
  transition: background var(--norm), border-color var(--norm),
              transform var(--norm) var(--spring);
}
.cert-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(244,130,14,0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.20);
}

.cert-card-header {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.cert-badge {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -0.02em;
}
.cert-badge--green  { color: var(--green); }
.cert-badge--orange { color: var(--orange); }
.cert-badge--blue   { color: var(--blue-light); }
.cert-year {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.40);
  font-weight: 500;
}
.cert-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--white);
  line-height: 1.3;
}
.cert-card p {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.70;
  flex: 1;
}

.cert-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }

.tag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Padding aumentado: feedback do PPTX (slide 4) — texto ficava
     colado no contorno das caixinhas com o padding anterior (--sp-1). */
  padding: var(--sp-2) var(--sp-4);
  border-radius: 100px;
  background: rgba(244,130,14,0.15);
  color: var(--orange);
  border: 1px solid rgba(244,130,14,0.25);
  line-height: 1.4;
}
.tag--green  { background: rgba(39,184,98,0.12);  color: var(--green);      border-color: rgba(39,184,98,0.20); }
.tag--orange { background: rgba(244,130,14,0.15); color: var(--orange);     border-color: rgba(244,130,14,0.25); }
/* Variante azul nova — diversifica a paleta dos badges conforme
   pedido no slide 4 ("aqui eu tentaria outra opção de cores"). */
.tag--blue   { background: rgba(22,112,232,0.12);  color: var(--blue-light); border-color: rgba(22,112,232,0.22); }

.cert-wave { margin-top: var(--sp-20); line-height: 0; }
.cert-wave svg { width: 100%; display: block; }

/* ── 12. SOBRE ───────────────────────────────────────────────── */
.section-sobre {
  background: var(--off-white);
  padding-block: var(--sp-20);
}

.sobre-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
}

.sobre-text p {
  font-size: var(--t-base);
  color: rgba(11,37,69,0.70);
  line-height: 1.75;
  margin-bottom: var(--sp-4);
}
.sobre-text .btn-primary { margin-top: var(--sp-4); }

.sobre-values { display: flex; flex-direction: column; gap: var(--sp-5); }

.value-card {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--orange);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-4);
  transition: box-shadow var(--norm), transform var(--norm) var(--spring);
}
.value-card:hover { box-shadow: var(--sh-md); transform: translateX(4px); }

.value-num {
  grid-row: 1 / 3;
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  color: rgba(244,130,14,0.18);
  line-height: 1;
  align-self: center;
}
.value-card h3 {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: var(--sp-1);
}
.value-card p { font-size: var(--t-sm); color: rgba(11,37,69,0.60); line-height: 1.60; }

/* ── 13. NOTÍCIAS / CMS ──────────────────────────────────────── */
.section-news {
  background: var(--white);
  padding-block: var(--sp-20);
  border-top: 1px solid var(--border-dark);
}

/* ── Grid principal ──────────────────────────────────────────────
   Adaptativo: 1 card = coluna única centrada; 2 = duas; 3+ = grid
   responsivo. Gap generoso para os cards respirarem no desktop. */
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
  justify-content: center;
  align-items: stretch;
}

/* Grid da página insights.html — mais colunas, mais respiro */
.news-grid--insights {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: var(--sp-10);
}

/* ── Card de notícia ──────────────────────────────────────────── */
.news-card {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  transition: border-color var(--norm), box-shadow var(--norm),
              transform var(--norm) var(--spring);
}
.news-card:hover {
  border-color: rgba(11,37,69,0.22);
  box-shadow: var(--sh-lg);
  transform: translateY(-6px);
}

/* Imagem de capa — link real envolvendo a figure, zoom sutil no hover */
.news-card__cover-link {
  display: block;
  text-decoration: none;
}
.news-card__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--off-white);
  flex-shrink: 0;
  margin: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.news-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease);
}
.news-card:hover .news-card__cover img {
  transform: scale(1.08);
}

/* Corpo do card — padding generoso (32px) para respiro confortável */
.news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);   /* 32px */
  flex: 1;
}

/* Categoria */
.news-card__cat {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--orange);   /* cor padrão — sobrescrita por data-category abaixo */
  flex-shrink: 0;
}

/* ── Cores por categoria dinâmica (vinda do CMS via post.category) ──
   Mapeamento alinhado às 4 verticais de negócio + fallback genérico.
   Aplicado tanto no card da listagem (.news-card__cat) quanto na
   página individual do artigo (.article-page__cat). */
.news-card__cat[data-category="esg"],
.news-card__cat[data-category="sustentabilidade"],
.article-page__cat[data-category="esg"],
.article-page__cat[data-category="sustentabilidade"] {
  color: var(--green-dark);
}

.news-card__cat[data-category="meio-ambiente"],
.article-page__cat[data-category="meio-ambiente"] {
  color: var(--green);
}

.news-card__cat[data-category="lgpd"],
.news-card__cat[data-category="governanca-digital"],
.article-page__cat[data-category="lgpd"],
.article-page__cat[data-category="governanca-digital"] {
  color: var(--blue-light);
}

.news-card__cat[data-category="ifrs"],
.news-card__cat[data-category="gestao-empresarial"],
.article-page__cat[data-category="ifrs"],
.article-page__cat[data-category="gestao-empresarial"] {
  color: var(--orange);
}

/* Link que envolve o título — link real, navega para noticia.html */
.news-card__title-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.news-card__title-link:hover .news-card__title {
  color: var(--blue-light);
}

/* Título — até 3 linhas, quebra natural sem reticências forçadas.
   line-clamp corta visualmente apenas em casos extremos; o normalize()
   já produz títulos curtos o suficiente para não precisar disso na maioria dos casos. */
.news-card__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.30;
  transition: color var(--fast);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Deixa o título "respirar": altura mínima reserva espaço para
     2 linhas mesmo quando o título é curto, mantendo o grid alinhado */
  min-height: calc(1.30em * 2);
}

/* Excerpt — até 3 linhas, sem reticências manuais no texto (já
   removidas no JS); o corte visual é só para textos muito longos */
.news-card__excerpt {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.62);
  line-height: 1.70;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rodapé do card: data + link "Ler artigo" */
.news-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--t-xs);
  color: rgba(11,37,69,0.40);
  border-top: 1px solid var(--border-dark);
  padding-top: var(--sp-4);
  flex-shrink: 0;
  margin-top: auto;
}

/* "Ler artigo" — link real <a>, navegação direta sem JS interceptando */
.news-card__link {
  font-weight: 600;
  color: var(--blue-light);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  text-decoration: none;
  transition: gap var(--fast), color var(--fast);
}
.news-card__link:hover { gap: var(--sp-2); color: var(--orange); }

/* ── Paginação (insights.html) ───────────────────────────────── */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
}
.news-pagination__btn {
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-md);
  border: 2px solid var(--blue-deep);
  background: transparent;
  color: var(--blue-deep);
  font-weight: 600;
  font-size: var(--t-sm);
  cursor: pointer;
  transition: background var(--fast), color var(--fast), opacity var(--fast);
}
.news-pagination__btn:hover:not(:disabled) {
  background: var(--blue-deep);
  color: var(--white);
}
.news-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.news-pagination__status {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.55);
  font-weight: 500;
}

/* ── Estado de erro (API fora do ar) ── */
.news-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-8);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
}
.news-error__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(11,37,69,0.06);
  display: flex; align-items: center; justify-content: center;
  color: rgba(11,37,69,0.40);
}
.news-error__title {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 700;
  color: var(--blue-deep);
}
.news-error__sub {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.55);
  max-width: 42ch;
  line-height: 1.65;
}
.news-error__btn { cursor: pointer; }

/* ── Estado vazio (sem artigos publicados) ── */
.news-empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--t-base);
  color: rgba(11,37,69,0.50);
  padding: var(--sp-12) 0;
}

/* ── Skeletons (placeholder de carregamento) ─────────────────── */
.news-skeleton {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.news-skeleton__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #e8ecf5 25%, #dde2ef 50%, #e8ecf5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  flex-shrink: 0;
}
.news-skeleton__body {
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.skel-bar {
  height: 14px;
  border-radius: 100px;
  background: linear-gradient(90deg, #e8ecf5 25%, #dde2ef 50%, #e8ecf5 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.skel-short { width: 35%; height: 10px; }
.skel-long  { width: 90%; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Hero da página insights.html ────────────────────────────── */
.insights-hero {
  background: linear-gradient(135deg, var(--blue-deep) 0%, #071A4F 45%, #0D2B6E 100%);
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-16);
  text-align: center;
}
.insights-hero .eyebrow      { color: var(--green); }
.insights-hero .section-title { color: var(--white); margin-bottom: var(--sp-3); }
.insights-hero .section-sub   { color: var(--text-muted); }

/* ── Página individual de artigo (noticia.html) ──────────────── */
.article-page {
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-20);
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--sp-6);
}
.article-page__cat {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--sp-3);
}
.article-page__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
}
.article-page__date {
  display: block;
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.45);
  margin-bottom: var(--sp-8);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-dark);
}
.article-page__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-xl);
  margin-bottom: var(--sp-8);
  display: block;
}
.article-page__content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.article-page__content p {
  font-size: var(--t-lg);
  color: rgba(11,37,69,0.78);
  line-height: 1.85;
}
.article-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  font-weight: 600;
  color: var(--blue-light);
  text-decoration: none;
  transition: color var(--fast);
}
.article-page__back:hover { color: var(--orange); }

/* Estado de erro na página de artigo individual */
.article-error {
  text-align: center;
  padding-block: var(--sp-20);
}
.article-error__title {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  color: var(--blue-deep);
  margin-bottom: var(--sp-3);
}
.article-error__sub {
  font-size: var(--t-base);
  color: rgba(11,37,69,0.55);
  margin-bottom: var(--sp-8);
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.news-cta { text-align: center; }

/* ── 14. CTA BAND ────────────────────────────────────────────── */
.section-cta {
  background: linear-gradient(110deg, var(--orange-dark) 0%, var(--orange) 60%, #F59D3A 100%);
  padding-block: var(--sp-16);
  position: relative;
  overflow: hidden;
}
.section-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
    radial-gradient(circle at 10% 20%, rgba(11,37,69,0.08) 0%, transparent 40%);
}

.cta-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-10);
  flex-wrap: wrap;
}
.cta-text { flex: 1; min-width: 280px; }
.cta-text h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--white);
  line-height: 1.10;
  margin-bottom: var(--sp-3);
}
.cta-text p { font-size: var(--t-lg); color: rgba(255,255,255,0.82); }
.cta-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* ── 15. FOOTER ──────────────────────────────────────────────── */
/* Fundo do footer: feedback do PPTX (slide 8) — "deixaria esse fundo
   num azul escuro, mas não tão escuro". Trocado de #060F2A (quase
   preto) para var(--blue-deep), o azul de marca já usado no header. */
.site-footer { background: var(--blue-deep); }

.footer-top { padding-block: var(--sp-16); border-bottom: 1px solid rgba(255,255,255,0.08); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: var(--sp-10);
  align-items: start;
}

/* Logo do footer: mesma versão branca real do asset (logo-white.png),
   substituindo a "pílula" branca usada anteriormente como solução
   provisória. */
.footer-brand a:first-child {
  display: inline-flex;
  margin-bottom: var(--sp-4);
}
.footer-brand a:first-child img { height: 58px; width: auto; display: block; margin-bottom: 0; }

.footer-tagline {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.45);
  max-width: 28ch;
  line-height: 1.65;
  margin-bottom: var(--sp-5);
}

.social-linkedin {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: rgba(255,255,255,0.65);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r-md);
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.social-linkedin:hover {
  color: var(--white);
  border-color: rgba(255,255,255,0.40);
  background: rgba(255,255,255,0.06);
}

.footer-nav h3,
.footer-contact h3 {
  font-family: var(--font-body);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: var(--sp-5);
}

.footer-nav ul { display: flex; flex-direction: column; gap: var(--sp-3); list-style: none; }
.footer-nav a {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.60);
  transition: color var(--fast);
}
.footer-nav a:hover { color: var(--orange); }

.footer-contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-contact p,
.footer-contact a {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.60);
  line-height: 1.60;
  transition: color var(--fast);
}
.footer-contact a:hover { color: var(--orange); }

.dpo-block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.dpo-label {
  font-size: var(--t-xs) !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30) !important;
  margin-bottom: var(--sp-1);
}
.dpo-name { color: rgba(255,255,255,0.80) !important; font-weight: 600; }

.footer-bottom { padding-block: var(--sp-5); }
.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.footer-bottom-inner p { font-size: var(--t-xs); color: rgba(255,255,255,0.45); }

.footer-legal {
  display: flex;
  gap: var(--sp-6);
  list-style: none;
}
.footer-legal a,
.footer-legal .link-btn {
  font-size: var(--t-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.25);
  text-underline-offset: 3px;
  transition: color var(--fast), text-decoration-color var(--fast);
}
.footer-legal a:hover,
.footer-legal .link-btn:hover {
  color: var(--white);
  text-decoration-color: var(--orange);
}

/* ── 16. LINK-BTN (botão sem estilo) ───────────────────────── */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { opacity: 0.80; }

/* ── 17. MODAL PRIVACIDADE ───────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(6,15,42,0.75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6);
  animation: modal-in var(--norm) var(--ease);
}
.modal-overlay[hidden] { display: none; }

@keyframes modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-box {
  position: relative;
  background: var(--white);
  border-radius: var(--r-xl);
  max-width: 700px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  animation: box-in var(--norm) var(--spring);
}

@keyframes box-in {
  from { transform: scale(0.94) translateY(16px); }
  to   { transform: none; }
}

.modal-close {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(11,37,69,0.08);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--blue-deep);
  transition: background var(--fast), transform var(--fast);
}
.modal-close:hover { background: rgba(11,37,69,0.16); transform: rotate(90deg); }

.modal-box > h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  color: var(--blue-deep);
  padding: var(--sp-8) var(--sp-8) var(--sp-5);
  border-bottom: 1px solid var(--border-dark);
}

.modal-body {
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-8) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.75);
  line-height: 1.75;
}
.modal-body h3 {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: calc(-1 * var(--sp-2));
}
.modal-body a { color: var(--blue-light); text-decoration: underline; }
.modal-body a:hover { color: var(--orange); }

/* ── 18. BANNER COOKIES ──────────────────────────────────────── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 400;
  background: rgba(6,15,42,0.96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: var(--sp-4) var(--sp-6);
  animation: slide-up var(--norm) var(--ease);
}
.cookie-banner[hidden] { display: none; }

@keyframes slide-up {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.cookie-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}
.cookie-text {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.75);
  flex: 1;
  min-width: 240px;
}
.cookie-text .link-btn {
  color: var(--green);
  font-weight: 600;
}
.cookie-actions { display: flex; gap: var(--sp-3); flex-shrink: 0; }

/* ── 19. WHATSAPP FLUTUANTE ──────────────────────────────────── */
.whatsapp-float {
  position: fixed;
  bottom: var(--sp-6);
  right: var(--sp-6);
  z-index: 300;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: transform var(--norm) var(--spring),
              box-shadow var(--norm) var(--ease);
}
.whatsapp-float:hover {
  transform: scale(1.10) translateY(-3px);
  box-shadow: 0 8px 30px rgba(37,211,102,0.55);
}
.whatsapp-float svg { width: 28px; height: 28px; }

/* ── 20. RESPONSIVO ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-10);
    padding-bottom: var(--sp-12);
  }
  /* No tablet, diagrama aparece primeiro (acima do texto) */
  .hero-diagram { order: -1; }
  .diagram-svg  { max-width: 340px; }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }
  .solutions-grid     { grid-template-columns: repeat(2, 1fr); }
  .solutions-grid--8  { grid-template-columns: repeat(2, 1fr); }
  .certs-grid         { grid-template-columns: repeat(2, 1fr); }
  .sobre-grid     { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

@media (max-width: 768px) {
  /* Nav mobile */
  .nav-menu {
    display: none;
    position: fixed;
    top: var(--nav-h);
    right: 0;
    bottom: 0;
    left: 0;
    height: calc(100vh - var(--nav-h));
    background: var(--blue-deep);
    flex-direction: column;
    align-items: stretch;
    padding: var(--sp-6);
    gap: var(--sp-2);
    overflow-y: auto;
    z-index: 199;
  }
  .nav-menu.open { display: flex; }
  .nav-link {
    padding: var(--sp-4);
    font-size: var(--t-base);
    border-radius: var(--r-md);
  }
  .nav-cta { text-align: center; margin-top: var(--sp-4); }
  .nav-toggle { display: flex; }

  /* Dropdown "Soluções" no mobile: expande inline, sem overlay flutuante.
     CORREÇÃO: position:static por si só não cancela left:50% e o
     transform:translateX(-50%) herdados da regra desktop — esse
     transform continuava deslocando o elemento ~171px para a
     esquerda mesmo em mobile, fazendo o texto do submenu vazar
     para fora da tela pela borda esquerda. left e transform agora
     são explicitamente resetados aqui. */
  .nav-dropdown {
    position: static;
    left: auto;
    transform: none;
    width: 100%;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,0.04);
    margin-top: var(--sp-1);
    display: none;
  }
  .nav-item--dropdown.open .nav-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;  /* a regra desktop equivalente (mesma especifi-
                          cidade) define translateX(-50%); sem este
                          reset aqui, ela vencia a cascata e deslocava
                          o submenu para fora da tela no mobile. */
  }
  .nav-dropdown__title { color: var(--white); }
  .nav-dropdown__desc  { color: rgba(255,255,255,0.55); }
  .nav-dropdown__item:hover { background: rgba(255,255,255,0.06); }

  .hero-inner   { grid-template-columns: 1fr; }
  .hero-diagram { display: none; }
  .hero-actions { flex-direction: column; }
  .hero-metrics { grid-template-columns: repeat(2, 1fr); }

  .solutions-grid     { grid-template-columns: 1fr; }
  .solutions-grid--8  { grid-template-columns: repeat(2, 1fr); }
  .certs-grid         { grid-template-columns: 1fr; }
  .news-grid      { grid-template-columns: 1fr; }

  .cta-inner      { flex-direction: column; text-align: center; }
  .cta-actions    { justify-content: center; }

  .footer-grid    { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  .cookie-inner   { flex-direction: column; }
  .cookie-actions { width: 100%; justify-content: flex-end; }

  .whatsapp-float { bottom: var(--sp-4); right: var(--sp-4); }
}

@media (max-width: 480px) {
  .hero-metrics { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════════════
   PÁGINAS DE SERVIÇO — uma por card da seção Soluções
   ──────────────────────────────────────────────────────────────
   Estrutura: hero escuro institucional (reaproveita o gradiente
   do .hero da home) + corpo claro com lista "o que entregamos" +
   CTA final (reaproveita .section-cta). Todos os tokens de cor,
   fonte e espaçamento vêm do sistema de design já existente —
   nenhum valor novo foi introduzido.
═══════════════════════════════════════════════════════════════ */

.service-hero {
  position: relative;
  padding-block: calc(var(--nav-h) + var(--sp-16)) var(--sp-20);
  background: linear-gradient(135deg, var(--blue-deep) 0%, #071A4F 45%, #0D2B6E 100%);
  overflow: hidden;
}
.service-hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-6);
  align-items: start;
}
.service-hero__icon {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-xl);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--orange);
}
.service-hero__icon svg { width: 38px; height: 38px; }
.service-hero__icon--green { color: var(--green); }
.service-hero__eyebrow {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--sp-3);
}
.service-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, var(--t-3xl));
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-4);
  max-width: 18ch;
}
.service-hero__lede {
  font-size: var(--t-lg);
  color: rgba(255,255,255,0.78);
  max-width: 56ch;
  line-height: 1.6;
}
.service-hero__back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--sp-8);
  transition: color var(--norm);
}
.service-hero__back:hover { color: var(--white); }

/* Variante para uso sobre fundo claro (corpo da página, fora do hero) */
.service-back-light {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: rgba(11,37,69,0.55);
  transition: color var(--norm);
}
.service-back-light:hover { color: var(--orange); }

.service-body {
  max-width: 880px;
  margin-inline: auto;
  padding: var(--sp-16) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.service-section h2 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: var(--sp-4);
}
.service-section p {
  color: rgba(11,37,69,0.78);
  max-width: 70ch;
}
.service-section p + p { margin-top: var(--sp-3); }

.service-deliverables {
  list-style: none;
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}
.service-deliverables li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--off-white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
}
.service-deliverables__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(39,184,98,0.12);
  color: var(--green);
  margin-top: 2px;
}
.service-deliverables__check svg { width: 16px; height: 16px; }
.service-deliverables strong {
  display: block;
  color: var(--blue-deep);
  margin-bottom: 2px;
}
.service-deliverables span {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.65);
}

.service-related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}
.service-related a {
  padding: var(--sp-2) var(--sp-5);
  border-radius: 999px;
  border: 1px solid var(--border-dark);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--blue-deep);
  transition: border-color var(--norm), background var(--norm);
}
.service-related a:hover {
  border-color: var(--orange);
  background: rgba(244,130,14,0.06);
}

@media (max-width: 640px) {
  .service-hero__inner { grid-template-columns: 1fr; }
  .service-hero__icon { margin-bottom: var(--sp-2); }
}

/* ══════════════════════════════════════════════════════════════
   INDICADOR — Índice de Satisfação dos Clientes
   ──────────────────────────────────────────────────────────────
   Barras de progresso animadas, uma por categoria de serviço,
   usando as 4 cores institucionais do projeto (laranja, azul claro,
   verde, azul médio) em vez das cores genéricas (amarelo/vermelho)
   da referência visual original. A barra preenche da esquerda para
   a direita quando a seção entra na viewport — mesma técnica de
   IntersectionObserver já usada em ScrollReveal/CounterAnimation,
   implementada em IndicatorAnimation (script.js).
═══════════════════════════════════════════════════════════════ */

.section-indicator {
  padding-block: var(--sp-20);
  background: var(--off-white);
}

.indicator-list {
  list-style: none;
  max-width: 920px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.indicator-item { width: 100%; }

.indicator-track {
  position: relative;
  height: 56px;
  border-radius: var(--r-md);
  background: rgba(11,37,69,0.06);
  overflow: hidden;
}

.indicator-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: var(--r-md);
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.indicator-track--orange     .indicator-fill { background: var(--orange); }
.indicator-track--blue-light .indicator-fill { background: var(--blue-light); }
.indicator-track--green      .indicator-fill { background: var(--green); }
.indicator-track--blue-mid   .indicator-fill { background: var(--blue-mid); }

/* Estado animado: aplicado via JS (IndicatorAnimation) quando a
   seção entra na viewport. O atributo data-fill no .indicator-fill
   guarda o valor-alvo; o JS copia esse valor para a propriedade
   width somente neste momento, disparando a transição CSS acima. */
.indicator-track.is-visible .indicator-fill {
  width: var(--fill-target, 0%);
}

.indicator-label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding-inline: var(--sp-5);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--white);
}

.indicator-value {
  position: absolute;
  top: 0;
  right: var(--sp-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 800;
  color: var(--white);
}

@media (max-width: 640px) {
  .indicator-track { height: 64px; }
  .indicator-label { font-size: var(--t-xs); padding-inline: var(--sp-4); }
  .indicator-value { right: var(--sp-4); }
}

/* ══════════════════════════════════════════════════════════════
   CLIENTES — grade de wordmarks + link para lista completa (PDF)
   ──────────────────────────────────────────────────────────────
   Cada cliente é representado por um "wordmark card" tipográfico
   (sem depender de arquivos de logo externos, que não estavam
   disponíveis). Nomes extraídos da lista real de clientes da
   Keyassociados (assets/docs/clientes-keyassociados.pdf).
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   CLIENTES — faixa de logomarcas rotativa (marquee infinito)
   ──────────────────────────────────────────────────────────────
   Substitui a grade estática de wordmarks por uma faixa de logos
   que deslizam continuamente. A trilha (.clients-track) é
   duplicada no HTML; a animação desloca -50% do contêiner pai
   (.clients-marquee), que equivale a exatamente 1 cópia completa,
   criando um loop perfeito e imperceptível.
═══════════════════════════════════════════════════════════════ */

.section-clients {
  padding-block: var(--sp-20);
  background: var(--white);
}

.clients-marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  /* Fade nas bordas para suavizar a entrada/saída dos logos */
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.clients-track {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  width: max-content;
  flex-shrink: 0;          /* prevents track from shrinking and overlapping */
  animation: clients-scroll 36s linear infinite;
}

/* A segunda .clients-track (cópia aria-hidden) anda colada na
   primeira pois .clients-marquee é flex (definido acima), então
   as duas <ul> ficam lado a lado, formando a trilha contínua. */

.clients-track:hover {
  animation-play-state: paused;
}

@keyframes clients-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.client-card {
  flex: 0 0 180px;         /* fixed width, no shrink, no grow */
  width: 180px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-6);
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-lg);
  overflow: hidden;        /* clip any logo that overflows the card */
  transition: border-color var(--norm), transform var(--norm) var(--spring),
              box-shadow var(--norm);
}
.client-card:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: var(--sh-md);
}
.client-card img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
  /* Logos em escala de cinza por padrão, ganhando cor no hover —
     efeito comum em faixas de "clientes que confiam", reforça
     que a atenção do usuário deve focar na marca ao interagir. */
  filter: grayscale(1) opacity(0.7);
  transition: filter var(--norm);
}
.client-card:hover img {
  filter: grayscale(0) opacity(1);
}

.clients-footnote {
  text-align: center;
  margin-top: var(--sp-10);
}
.clients-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--orange);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid rgba(244,130,14,0.35);
  border-radius: 999px;
  transition: background var(--norm), border-color var(--norm);
}
.clients-link:hover {
  background: rgba(244,130,14,0.06);
  border-color: var(--orange);
}
.clients-link svg { transition: transform var(--norm); }
.clients-link:hover svg { transform: translateX(3px); }

@media (max-width: 768px) {
  .client-card { width: 140px; height: 84px; }
}

@media (max-width: 480px) {
  .client-card { width: 120px; height: 72px; padding: var(--sp-3); }
}

/* Respeita usuários que pediram menos movimento na interface */
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
}
/* ══════════════════════════════════════════════════════════════
   PÁGINA NOSSOS SERVIÇOS — ps-* (page-servicos)
   Todos os estilos aqui para cumprir CSP style-src 'self'
═══════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────── */
.ps-hero {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 100%);
  padding: calc(var(--nav-h) + var(--sp-16)) 0 var(--sp-16);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.ps-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(244,130,14,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.ps-breadcrumb {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.50);
  margin-bottom: var(--sp-6);
}
.ps-breadcrumb a { color: var(--orange); }
.ps-breadcrumb span { margin-inline: var(--sp-2); }
.ps-hero-title {
  font-family: var(--font-display);
  font-size: var(--t-4xl);
  font-weight: 800;
  color: var(--white);
  line-height: 1.1;
  margin-bottom: var(--sp-4);
}
.ps-hero-sub {
  font-size: var(--t-xl);
  color: var(--orange);
  font-weight: 600;
  margin-bottom: var(--sp-3);
}
.ps-hero-tagline {
  font-size: var(--t-lg);
  color: var(--text-muted);
  max-width: 600px;
  margin-inline: auto;
}

/* ── Sumário de navegação ────────────────────────────────────── */
.ps-summary {
  background: var(--blue-deep);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--sp-8);
  position: sticky;
  top: var(--nav-h);
  z-index: 90;
}
.ps-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3);
  list-style: none;
}
.ps-summary-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  color: rgba(255,255,255,0.65);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  transition: background var(--norm), border-color var(--norm), color var(--norm);
}
.ps-summary-item:hover {
  background: rgba(255,255,255,0.06);
  border-color: var(--orange);
  color: var(--white);
}
.ps-snum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--blue-mid);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: var(--font-display);
}
.ps-snum--green  { background: var(--green-dark); }
.ps-snum--orange { background: var(--orange); }
.ps-snum--dark   { background: rgba(255,255,255,0.15); }

/* ── Seções de serviço ───────────────────────────────────────── */
.ps-section {
  padding-block: var(--sp-20);
  /* Garante que ao navegar para uma âncora (#s1–#s8), o browser
     posicione a seção abaixo do nav fixo (78px) + sumário sticky (~210px)
     + respiro (22px) = 310px. Funciona nativamente sem JS. */
  scroll-margin-top: 310px;
}
.ps-section--light { background: var(--off-white); }
.ps-section--dark  {
  background: linear-gradient(160deg, var(--blue-deep) 0%, #0D2A72 100%);
  position: relative;
  overflow: hidden;
}
.ps-section--dark::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(244,130,14,0.05) 0%, transparent 50%);
  pointer-events: none;
}

/* Cabeçalho de cada serviço */
.ps-section-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin-bottom: var(--sp-12);
  padding-bottom: var(--sp-8);
  border-bottom: 2px solid rgba(11,37,69,0.10);
}
.ps-section--dark .ps-section-header {
  border-bottom-color: rgba(255,255,255,0.10);
}

/* Badge de ícone */
.ps-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: var(--r-xl);
  flex-shrink: 0;
  background: rgba(11,37,69,0.08);
  color: var(--blue-deep);
}
.ps-badge--green  { background: rgba(39,184,98,0.12);  color: var(--green-dark); }
.ps-badge--blue   { background: rgba(22,112,232,0.12); color: var(--blue-light); }
.ps-badge--orange { background: rgba(244,130,14,0.12); color: var(--orange); }
.ps-section--dark .ps-badge { border: 1px solid rgba(255,255,255,0.10); }
.ps-badge svg { display: block; }

/* Meta do serviço (número + título + subtítulo) */
.ps-section-meta { flex: 1; }
.ps-section-num {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 800;
  letter-spacing: 0.10em;
  color: var(--orange);
  margin-bottom: var(--sp-2);
  text-transform: uppercase;
}
.ps-section-num--light { color: rgba(255,255,255,0.40); }
.ps-section-meta h2 {
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--blue-deep);
  line-height: 1.15;
  margin-bottom: var(--sp-3);
}
.ps-h2--light { color: var(--white) !important; }
.ps-section-meta p { font-size: var(--t-lg); color: rgba(11,37,69,0.60); line-height: 1.5; }
.ps-sub--light { color: rgba(255,255,255,0.65) !important; }

/* ── Grid de itens (2 colunas) ───────────────────────────────── */
.ps-items-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.ps-items-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.ps-item {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: border-color var(--norm), box-shadow var(--norm), transform var(--norm) var(--spring);
}
.ps-item:hover {
  border-color: rgba(39,184,98,0.30);
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}
.ps-item--light {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.10);
}
.ps-item--light:hover {
  border-color: var(--orange);
  background: rgba(255,255,255,0.09);
}
.ps-item h3 {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--blue-deep);
  margin-bottom: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}
.ps-item h3::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  margin-top: 1px;
}
.ps-item--light h3 { color: var(--white); }
.ps-item--light h3::before { background: var(--orange); }
.ps-item p {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.62);
  line-height: 1.70;
  flex: 1;
}
.ps-item--light p { color: rgba(255,255,255,0.65); }

.ps-iso-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  align-items: stretch;
}
.ps-iso-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: background var(--norm), border-color var(--norm), transform var(--norm) var(--spring);
}
.ps-iso-card--wide {
  grid-column: span 4;
  border-color: rgba(244,130,14,0.25);
  background: rgba(244,130,14,0.05);
}
.ps-iso-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(244,130,14,0.40);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
}
.ps-iso-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--orange);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-2);
  flex-shrink: 0;
}
.ps-iso-badge--green { color: var(--green); }
.ps-iso-badge--blue  { color: var(--blue-light); }
.ps-iso-card p {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  flex: 1;
}

/* ── Grid Ratings (serviço 6) ────────────────────────────────── */
.ps-ratings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
}
.ps-rating-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: background var(--norm), border-color var(--norm), transform var(--norm) var(--spring);
}
.ps-rating-card:hover {
  background: rgba(255,255,255,0.09);
  border-color: var(--orange);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}
.ps-rating-logo {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.ps-rating-card p {
  font-size: var(--t-sm);
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  flex: 1;
}
/* ── Tags ────────────────────────────────────────────────────── */
.ps-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-10);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border-dark);
}
.ps-section--dark .ps-tags { border-top-color: rgba(255,255,255,0.08); }
.ps-tag {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: var(--sp-2) var(--sp-4);
  border-radius: 100px;
  background: rgba(11,37,69,0.07);
  color: var(--blue-deep);
  border: 1px solid rgba(11,37,69,0.12);
}
.ps-tag--light {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
  border-color: rgba(255,255,255,0.15);
}

/* ── CTA final ───────────────────────────────────────────────── */
.ps-cta {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 100%);
  padding-block: var(--sp-20);
}
.ps-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-12);
}
.ps-cta-text h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: var(--sp-3);
  max-width: 540px;
}
.ps-cta-text p { font-size: var(--t-lg); color: var(--text-muted); }
.ps-cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex-shrink: 0;
}

/* ── Responsivo ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ps-summary-grid    { grid-template-columns: repeat(2, 1fr); }
  .ps-iso-grid        { grid-template-columns: repeat(2, 1fr); }
  .ps-iso-card--wide  { grid-column: span 2; }
  .ps-ratings-grid    { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ps-hero-title      { font-size: var(--t-3xl); }
  .ps-summary         { position: static; }
  .ps-summary-grid    { grid-template-columns: 1fr; }
  .ps-section-header  { flex-direction: column; }
  .ps-items-grid,
  .ps-items-grid--3   { grid-template-columns: 1fr; }
  .ps-iso-grid        { grid-template-columns: 1fr; }
  .ps-iso-card--wide  { grid-column: span 1; }
  .ps-ratings-grid    { grid-template-columns: 1fr; }
  .ps-cta-inner       { flex-direction: column; text-align: center; }
  .ps-cta-text h2     { max-width: 100%; }
  .ps-cta-actions     { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   AJUSTES v3 — Carrossel / Serviços / Nav / Quem Somos / Globo
═══════════════════════════════════════════════════════════════ */

/* ── 1. Cards de serviço alternados (cor sim / cor não) ──────── */
/* Card alternado — laranja suave (substitui sol-card--accent azul) */
.sol-card--alt {
  background: rgba(244,130,14,0.05);
  border-color: rgba(244,130,14,0.20);
}
.sol-card--alt:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 36px rgba(244,130,14,0.12);
}
.sol-card--alt h3  { color: var(--orange-dark); }
.sol-card--alt p   { color: rgba(11,37,69,0.65); }
.sol-card--alt .sol-icon { color: var(--orange); background: rgba(244,130,14,0.10); }
.sol-card--alt .sol-number { background: var(--orange); }

.card-link--alt        { color: var(--orange); }
.card-link--alt:hover  { color: var(--orange-dark); }

/* ── 2. Quem Somos — layout redesenhado ─────────────────────── */
.section-sobre { background: var(--off-white); padding-block: var(--sp-20); }

.sobre-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  margin-bottom: var(--sp-16);
}
.sobre-text p { color: rgba(11,37,69,0.70); line-height: 1.75; margin-bottom: var(--sp-4); }

.sobre-actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-6); }

.btn-outline-dark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-lg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--blue-deep);
  border: 2px solid var(--blue-deep);
  transition: background var(--norm), color var(--norm);
}
.btn-outline-dark:hover { background: var(--blue-deep); color: var(--white); }

/* Métricas no Quem Somos */
.sobre-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.sobre-metric {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-8);
  text-align: center;
  transition: box-shadow var(--norm), transform var(--norm) var(--spring);
}
.sobre-metric:hover { box-shadow: var(--sh-md); transform: translateY(-3px); }
.sobre-metric .metric-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-3xl);
  font-weight: 800;
  color: var(--blue-deep);
  line-height: 1;
}
.sobre-metric .metric-unit { font-size: var(--t-xl); font-weight: 800; color: var(--orange); }
.sobre-metric .metric-label {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.55);
  margin-top: var(--sp-1);
}

/* Cards Missão / Visão / Valores */
.mvv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}
.mvv-card {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: border-color var(--norm), box-shadow var(--norm),
              transform var(--norm) var(--spring);
  width: 100%;
  font-family: inherit;
}
.mvv-card:hover {
  border-color: var(--orange);
  box-shadow: var(--sh-md);
  transform: translateY(-4px);
}
.mvv-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mvv-icon--blue   { background: rgba(11,37,69,0.07);  color: var(--blue-deep); }
.mvv-icon--green  { background: rgba(39,184,98,0.10); color: var(--green-dark); }
.mvv-icon--orange { background: rgba(244,130,14,0.10); color: var(--orange); }
.mvv-label {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
  color: var(--blue-deep);
  line-height: 1.1;
}
.mvv-preview {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.60);
  line-height: 1.60;
  flex: 1;
}
.mvv-cta {
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.02em;
  margin-top: auto;
}

/* ── 3. Globo — entrada animada ──────────────────────────────── */
.hero-diagram--animate {
  opacity: 0;
  transform: scale(0.75) translateY(40px);
  transition: opacity 0.9s var(--spring), transform 0.9s var(--spring);
}
.hero-diagram--animate.globe-entered {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── 4. Responsivo Quem Somos ────────────────────────────────── */
@media (max-width: 1024px) {
  .sobre-top { grid-template-columns: 1fr; gap: var(--sp-10); }
  .sobre-metrics { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
  .sobre-metrics { grid-template-columns: repeat(2, 1fr); }
  .mvv-grid { grid-template-columns: 1fr; }
  .sobre-actions { flex-direction: column; }
}

/* ── Linha de valores originais (Independência / Rastreabilidade / Resultado) ── */
.sobre-values-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* Reutiliza .value-card já definido, só precisa do grid acima */

/* ── Cards MVV compactos ──────────────────────────────────────── */
.mvv-grid--compact .mvv-card {
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-2);
  flex-direction: row;
  align-items: center;
}
.mvv-grid--compact .mvv-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
}
.mvv-grid--compact .mvv-icon svg { width: 20px; height: 20px; }
.mvv-grid--compact .mvv-label {
  font-size: var(--t-base);
  flex: 1;
}
.mvv-grid--compact .mvv-preview { display: none; }
.mvv-grid--compact .mvv-cta {
  font-size: var(--t-xs);
  white-space: nowrap;
  margin-top: 0;
}

@media (max-width: 768px) {
  .sobre-values-row { grid-template-columns: 1fr; }
  .mvv-grid--compact .mvv-card { flex-direction: column; align-items: flex-start; }
}

/* ── Quem Somos — reestruturação final ───────────────────────── */

/* Coluna direita: value cards empilhadas */
.sobre-values-right {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* MVV médio (entre compact e full) */
.mvv-grid--medium .mvv-card {
  padding: var(--sp-6) var(--sp-7);
  flex-direction: row;
  align-items: center;
  gap: var(--sp-4);
}
.mvv-grid--medium .mvv-icon { width: 48px; height: 48px; flex-shrink: 0; }
.mvv-grid--medium .mvv-label { font-size: var(--t-lg); flex: 1; }
.mvv-grid--medium .mvv-preview { display: none; }
.mvv-grid--medium .mvv-cta { font-size: var(--t-xs); margin-top: 0; white-space: nowrap; }

/* Métricas em linha (abaixo do MVV) */
.sobre-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.sobre-metrics-row .sobre-metric {
  background: var(--white);
  border: 1px solid var(--border-dark);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  transition: box-shadow var(--norm), transform var(--norm) var(--spring);
}
.sobre-metrics-row .sobre-metric:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-3px);
}

@media (max-width: 1024px) {
  .sobre-metrics-row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sobre-values-right { display: grid; grid-template-columns: 1fr; }
  .mvv-grid--medium .mvv-card { flex-direction: column; align-items: flex-start; }
  .sobre-metrics-row { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Cards Nossos Serviços — alternância branco / laranja ═══════ */

/* Branco (cards ímpares 1,3,5,7) */
.sol-card--white {
  background: var(--white);
  border-color: var(--border-dark);
}
.sol-card--white:hover {
  border-color: rgba(11,37,69,0.25);
  box-shadow: var(--sh-md);
}
.sol-card--white h3 { color: var(--blue-deep); }
.sol-card--white p  { color: rgba(11,37,69,0.62); }
.sol-card--white .sol-icon    { color: var(--blue-deep); background: rgba(11,37,69,0.06); }
.sol-card--white .sol-number  { background: var(--blue-deep); color: var(--white); }
.sol-card--white .card-link   { color: var(--blue-light); }
.sol-card--white .card-link:hover { color: var(--orange); }

/* Laranja (cards pares 2,4,6,8) */
.sol-card--orange {
  background: var(--orange);
  border-color: var(--orange-dark);
}
.sol-card--orange:hover {
  border-color: var(--orange-dark);
  box-shadow: 0 12px 36px rgba(244,130,14,0.25);
  transform: translateY(-4px);
}
.sol-card--orange h3 { color: var(--white); }
.sol-card--orange p  { color: rgba(255,255,255,0.85); }
.sol-card--orange .sol-icon   { color: var(--white); background: rgba(255,255,255,0.18); }
.sol-card--orange .sol-number { background: var(--white); color: var(--orange); }
.sol-card--orange .card-link,
.sol-card--orange .card-link--alt,
.sol-card--orange .card-link--light,
.sol-card--orange .card-link--green { color: var(--white); font-weight: 700; }
.sol-card--orange .card-link:hover  { color: rgba(255,255,255,0.80); }

/* ══ Cards Nossos Serviços — formato lista (imagem 1) ═══════════ */
.sol-card--clean {
  background: var(--white);
  border: 1px solid #E2E8F0;
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transition: box-shadow var(--norm), transform var(--norm) var(--spring), border-color var(--norm);
}
.sol-card--clean:hover {
  box-shadow: 0 8px 32px rgba(11,37,69,0.10);
  transform: translateY(-4px);
  border-color: rgba(244,130,14,0.30);
}

/* Linha topo: número + ícone lado a lado */
.sol-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-2);
}

.sol-card--clean .sol-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 800;
  flex-shrink: 0;
}

.sol-card--clean .sol-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11,37,69,0.05);
  border-radius: var(--r-md);
  color: var(--blue-deep);
  flex-shrink: 0;
}
.sol-card--clean .sol-icon svg { width: 28px; height: 28px; }

.sol-card--clean h3 {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--blue-deep);
  line-height: 1.3;
  margin: 0;
}

/* Lista de bullets estilo imagem 1 */
.sol-bullets {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sol-bullets li {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.70);
  line-height: 1.55;
  position: relative;
  padding-left: 14px;
  display: block;   /* bloco normal — texto flui sem quebrar em/itálico */
}
.sol-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
.sol-bullets li em { font-style: italic; color: inherit; }

@media (max-width: 768px) {
  .sol-card--clean { padding: var(--sp-5); }
}

/* ══ Sistema Solar — hub entrance + hero sub-items ═════════════ */

/* Hub cresce do zero ao entrar na viewport */
.hub-solar-system {
  transform-box: fill-box;
  transform-origin: center;
  animation: hub-enter 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
@keyframes hub-enter {
  0%   { opacity: 0; transform: scale(0.01); }
  60%  { opacity: 1; transform: scale(1.10); }
  100% { opacity: 1; transform: scale(1); }
}

/* Slide 4 — sub-itens em formato lista com ícone */
.hero-sub-item {
  display: block;
  font-size: var(--t-sm);
  line-height: 1.5;
  margin-bottom: var(--sp-2);
  padding-left: var(--sp-2);
}
.hero-sub-item strong { color: var(--orange); }

/* ══ Métricas — números em azul escuro (Parte II) ═══════════════ */
.metric-num--blue {
  color: var(--blue-deep) !important;
}
.metric-unit--blue {
  color: var(--blue-deep) !important;
  font-size: var(--t-xl);
  font-weight: 800;
}

/* ══ Cards Serviços — branco / navy alternados ══════════════════ */

/* BRANCO — ícone verde, título azul escuro, texto azul médio, link verde */
.sol-card--branco {
  background: var(--white);
  border: 1px solid #E2E8F0;
}
.sol-card--branco:hover {
  box-shadow: 0 8px 32px rgba(11,37,69,0.10);
  transform: translateY(-4px);
  border-color: rgba(39,184,98,0.35);
}
.sol-card--branco .sol-card-top .sol-icon {
  background: rgba(39,184,98,0.10);
  color: var(--green-dark);
}
.sol-card--branco .sol-number {
  background: var(--blue-deep);
  color: var(--white);
}
.sol-card--branco h3 {
  color: var(--blue-deep);
}
.sol-card--branco .sol-bullets li {
  color: rgba(11,37,69,0.72);
}
.sol-card--branco .sol-bullets li::before {
  background: var(--green);
}
.sol-card--branco .card-link {
  color: var(--green-dark);
  font-weight: 700;
  font-size: var(--t-sm);
  margin-top: auto;
  display: inline-block;
}
.sol-card--branco .card-link:hover { color: var(--green); }

/* NAVY — fundo azul escuro, título branco, texto azul claro, link laranja */
.sol-card--navy {
  background: var(--blue-deep);
  border: 1px solid rgba(255,255,255,0.06);
}
.sol-card--navy:hover {
  box-shadow: 0 12px 40px rgba(11,37,69,0.40);
  transform: translateY(-4px);
  border-color: rgba(244,130,14,0.40);
}
.sol-card--navy .sol-card-top .sol-icon {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
}
.sol-card--navy .sol-number {
  background: var(--orange);
  color: var(--white);
}
.sol-card--navy h3 {
  color: var(--white);
  font-weight: 800;
}
.sol-card--navy .sol-bullets li {
  color: rgba(180,210,255,0.85);
}
.sol-card--navy .sol-bullets li::before {
  background: var(--orange);
}
.sol-card--navy .card-link {
  color: var(--orange);
  font-weight: 700;
  font-size: var(--t-sm);
  margin-top: auto;
  display: inline-block;
}
.sol-card--navy .card-link:hover { color: #FFBA68; }

/* Ocultar pontos de fundo do hero */
.hero-dots-bg { display: none; }

/* ══ Quem Somos — tudo em azul escuro ══════════════════════════ */
.sobre-text p {
  color: var(--blue-deep) !important;
}
.value-card h3 {
  color: var(--blue-deep) !important;
}
.value-card p {
  color: var(--blue-deep) !important;
  opacity: 0.80;
}
.value-num {
  color: var(--blue-deep) !important;
  opacity: 0.45;
}
.sobre-metric .metric-num,
.sobre-metrics-row .metric-num {
  color: var(--blue-deep) !important;
}
.sobre-metric .metric-unit:not(.metric-unit--orange),
.sobre-metrics-row .metric-unit:not(.metric-unit--orange) {
  color: var(--blue-deep) !important;
}
.sobre-metric .metric-label,
.sobre-metrics-row .metric-label {
  color: var(--blue-deep) !important;
  opacity: 0.65;
}

/* ══ Soluções — indicador visual de scroll (Parte III slide 4) ══ */
.sol-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding: var(--sp-3) var(--sp-5);
  border: 1.5px solid rgba(11,37,69,0.18);
  border-radius: 100px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--blue-deep);
  opacity: 0.70;
  animation: hint-bounce 2s ease-in-out infinite;
}
.sol-scroll-hint svg { animation: arrow-bounce 2s ease-in-out infinite; }
@keyframes hint-bounce {
  0%,100% { opacity: 0.70; }
  50%      { opacity: 1.00; }
}

/* ══ Métricas — ajustes WhatsApp 28jul ═════════════════════════ */

/* Wrapper que mantém número + símbolo na mesma linha */
.metric-num-unit {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
  gap: 2px;
}

/* Alinhamento especial para % (menor, na base do número) */
.metric-num-unit--pct .metric-unit {
  font-size: var(--t-2xl) !important;
  margin-bottom: 4px;
}

/* "+" e "%" de volta à cor laranja */
.metric-unit--orange {
  color: var(--orange) !important;
  font-size: var(--t-xl);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 6px;
}

/* Força cor laranja nos símbolos +/% das métricas (maior especificidade) */
.sobre-metrics-row .metric-unit--orange,
.sobre-metric .metric-unit--orange {
  color: var(--orange) !important;
}

/* ══ Modal de Proposta — formulário de contato ═════════════════ */
.modal-box--form {
  max-width: 620px;
  width: 100%;
  max-height: calc(100svh - 48px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: var(--sp-10) var(--sp-10) var(--sp-10);
}
.proposta-header {
  margin-bottom: var(--sp-6);
}
.proposta-header h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  color: var(--blue-deep);
  margin-bottom: var(--sp-2);
}
.proposta-header p {
  font-size: var(--t-sm);
  color: rgba(11,37,69,0.60);
}
.proposta-form { display: flex; flex-direction: column; gap: var(--sp-4); }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.form-group label {
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--blue-deep);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--border-dark);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--t-sm);
  color: var(--blue-deep);
  background: var(--off-white);
  transition: border-color var(--norm), box-shadow var(--norm);
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(244,130,14,0.12);
  background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-group select { cursor: pointer; }

.form-actions { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-2); }
.btn--full { width: 100%; justify-content: center; }
.form-privacy {
  font-size: 11px;
  color: rgba(11,37,69,0.45);
  text-align: center;
  line-height: 1.5;
}

@media (max-width: 580px) {
  .form-row { grid-template-columns: 1fr; }
  /* Overlay sem padding lateral para o modal usar toda a largura */
  .modal-overlay { padding: var(--sp-3); align-items: flex-end; }
  .modal-box--form {
    padding: var(--sp-8) var(--sp-6) var(--sp-10);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    max-height: 92svh;
  }
  .proposta-header h2 { font-size: var(--t-xl); }
}

/* ── Feedback do formulário de proposta ──────────────────────── */
.proposta-feedback {
  display: none;
  padding: var(--sp-6) var(--sp-8);
  border-radius: var(--r-xl);
  font-size: var(--t-sm);
  line-height: 1.65;
  text-align: center;
}
.proposta-feedback--success {
  background: rgba(39,184,98,0.08);
  border: 1px solid rgba(39,184,98,0.30);
  color: var(--blue-deep);
}
.proposta-feedback--success strong { color: var(--green-dark); }
.proposta-feedback--error {
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.25);
  color: #7f1d1d;
}
.proposta-feedback--error a { color: var(--orange); font-weight: 600; }

/* ── Tags em grid 8 por linha ────────────────────────────────── */
.ps-tags--grid8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--sp-3);
}
.ps-tags--grid8 .ps-tag {
  text-align: center;
  justify-content: center;
}

@media (max-width: 1024px) {
  .ps-tags--grid8 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
  .ps-tags--grid8 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Conteúdo de artigo formatado ───────────────────────────── */
.article-page__content p {
  margin-bottom: var(--sp-5);
  line-height: 1.80;
  color: rgba(11,37,69,0.82);
  font-size: var(--t-base);
}
.article-page__content h2,
.article-body__h2 {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 700;
  color: var(--blue-deep);
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  line-height: 1.25;
}
.article-page__content h3,
.article-body__h3 {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--blue-deep);
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
}
.article-page__content ul,
.article-page__content ol {
  margin: var(--sp-4) 0 var(--sp-6) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.article-page__content ul li {
  list-style: none;
  position: relative;
  padding-left: var(--sp-5);
  color: rgba(11,37,69,0.82);
  line-height: 1.70;
}
.article-page__content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
}
.article-page__content ol {
  list-style: decimal;
}
.article-page__content ol li {
  color: rgba(11,37,69,0.82);
  line-height: 1.70;
  padding-left: var(--sp-2);
}
.article-page__content strong {
  font-weight: 700;
  color: var(--blue-deep);
}

/* ── Honeypot anti-bot — oculto via CSS (não via inline style bloqueado por CSP) */
input[name="_gotcha"] {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
  tabindex: -1;
}