/* =========================================================
   Indominus Licitações
   CSS "vanilla", mobile-first, sem dependencia de build.
   ========================================================= */

:root{
  --bg-void:#0e1013;
  --bg-surface:#1b1f26;
  --bg-surface-2:#262b34;
  --text-primary:#F3F1EA;
  --text-secondary:#9EA3AD;
  --gold-300:#D9AD5B;   /* unico dourado autorizado para TEXTO */
  --gold-100:#F3D48A;   /* so para momentos grandes de destaque (H1, glow) */
  --gold-500:#A9812E;   /* DECORATIVO APENAS - nunca como color de texto, so border/stroke */
  --ink:#2A1E0C;         /* texto sobre preenchimento dourado */
  --hairline:rgba(217,173,91,0.14);
  --border-interactive:rgba(217,173,91,0.55); /* borda de controles de formulario: >=3:1 contra --bg-surface-2 (WCAG 1.4.11). NAO usar em cards decorativos, so em inputs/textarea/select operaveis. */
  --gradient-gold:linear-gradient(135deg,var(--gold-100),var(--gold-300));

  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Public Sans', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'SFMono-Regular', monospace;

  --container-max:1240px;
  --header-h:76px;

  --radius-card:8px;
  --radius-card-sm:6px;
  --radius-card-tight:4px;

  --ease-premium: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset basico ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  background:var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--text-primary); margin:0 0 0.6em; line-height:1.15; font-weight:600; }
p{ margin:0 0 1em; }
table{ border-collapse:collapse; width:100%; }
button{ font-family:inherit; background:none; border:none; color:inherit; }
figure{ margin:0; }
cite{ font-style:normal; }

::selection{ background:var(--gold-300); color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Foco acessivel (WCAG 2.4.11) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--gold-300);
  color:var(--ink);
  padding:0.8em 1.2em;
  z-index:1000;
  font-weight:600;
  border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

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

/* ---------- Layout util ---------- */
.container{ max-width:var(--container-max); margin:0 auto; padding:0 1.5rem; }
.container-narrow{ max-width:800px; }
.section{ padding:clamp(3.5rem, 7vw, 6.5rem) 0; }
.section-alt{ background:var(--bg-surface); }

/* Compensa o header sticky ao navegar por ancora */
#hero,#mecanismo,#como-funciona,#tecnologia,#comparativo,#numeros,#beneficios,
#investimento,#depoimentos,#faq,#fale-conosco,#contato{ scroll-margin-top:var(--header-h); }

.section-head{ max-width:44rem; margin:0 0 3rem; }
.kicker{
  font-family:var(--font-mono);
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-300);
  margin:0 0 0.9em;
}
.kicker-center{ text-align:center; }
h2{ font-size:clamp(1.75rem, 3.2vw, 2.5rem); letter-spacing:-0.01em; max-width:22ch; }
.section-lede{ font-size:1.05rem; color:var(--text-secondary); max-width:56ch; margin:0; }
.lede-center{ margin:0 auto; text-align:center; }

/* Numeros/valores/prazos: sistema tipografico mono obrigatorio */
.hl-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  color:var(--gold-300);
}

/* ---------- Botoes ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.55em;
  padding:0.85em 1.6em;
  border-radius:999px;
  font-weight:600;
  font-size:0.95rem;
  min-height:44px;
  transition:transform 0.15s ease, box-shadow 0.15s ease;
  border:none;
  cursor:pointer;
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn-gold{
  background:var(--gradient-gold);
  color:var(--ink);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--gold-500), 0 12px 28px rgba(217,173,91,0.18); }
.btn-lg{ padding:1.05em 2.1em; font-size:1rem; }

/* Brilho diagonal discreto no CTA principal do hero: overflow:hidden
   respeita o border-radius:999px do .btn (nao vaza dos cantos).
   Ciclo longo (5.5s) com pausa entre passadas, zerado globalmente em
   prefers-reduced-motion:reduce. */
.hero-cta .btn-gold{ position:relative; overflow:hidden; isolation:isolate; }
.hero-cta .btn-gold::after{
  content:"";
  position:absolute;
  top:-50%;
  left:0;
  width:30%;
  height:200%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-22deg) translateX(-350%);
  animation:heroButtonGlint 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroButtonGlint{
  0%, 60%{ transform:skewX(-22deg) translateX(-350%); }
  85%, 100%{ transform:skewX(-22deg) translateX(350%); }
}

/* =========================================================
   REVEAL ON SCROLL - classe adicionada via JS (data-reveal e
   apenas um marcador estatico; a classe que zera opacidade e
   inserida dinamicamente, entao sem JS o conteudo nasce visivel)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  .reveal-init{
    opacity:0;
    transform:translateY(22px);
    filter:blur(6px);
    transition:opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium), filter 0.6s var(--ease-premium);
  }
  .reveal-init.is-visible{ opacity:1; transform:translateY(0); filter:blur(0); }
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;
  top:0;
  z-index:500;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:rgba(14,16,19,0.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:1.75rem;
  width:100%;
}
.logo-link{ display:block; flex-shrink:0; margin-right:auto; }
.logo-img{ width:150px; height:auto; }

.site-nav{
  position:fixed;
  top:var(--header-h);
  right:0;
  height:calc(100vh - var(--header-h));
  width:min(78vw, 320px);
  background:var(--bg-surface);
  border-left:1px solid var(--hairline);
  padding:2rem 1.75rem;
  transform:translateX(100%);
  transition:transform 0.25s ease;
  overflow-y:auto;
  z-index:400;
}
.site-nav.is-open{ transform:translateX(0); }
.nav-list{ display:flex; flex-direction:column; gap:1.4rem; }
.nav-link{
  font-weight:500;
  font-size:1.05rem;
  color:var(--text-primary);
  display:inline-block;
  padding:0.2em 0;
  transition:color 0.2s ease;
}
.nav-link:hover{ color:var(--gold-300); }

.nav-scrim{
  position:fixed;
  inset:0;
  top:var(--header-h);
  background:rgba(14,16,19,0.6);
  z-index:390;
  opacity:0;
  transition:opacity 0.25s ease;
}
.nav-scrim.is-open{ opacity:1; }

.header-cta{ flex-shrink:0; padding:0.65em 1.3em; font-size:0.88rem; min-height:40px; }
.header-cta-label{ white-space:nowrap; }

/* Link social reutilizavel (icone ~24px dentro de area clicavel ~40-44px).
   Usado no header e no footer. */
.social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  color:var(--text-secondary);
  transition:color 0.2s ease;
}
.social-link svg{ width:24px; height:24px; }
.social-link:hover{ color:var(--gold-300); }
.social-link:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:2px;
  border-radius:8px;
}

.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:8px;
  cursor:pointer;
  flex-shrink:0;
}
.nav-toggle-bar{
  display:block;
  width:100%;
  height:2px;
  background:var(--text-primary);
  border-radius:2px;
  transition:transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (min-width:960px){
  .logo-img{ width:180px; }
  .nav-toggle{ display:none; }
  .site-nav{
    position:static;
    height:auto; width:auto;
    background:transparent;
    border-left:none;
    padding:0;
    transform:none;
    overflow:visible;
  }
  .nav-list{ flex-direction:row; gap:2rem; }
  .header-cta{ font-size:0.92rem; padding:0.75em 1.5em; }
}
@media (max-width:959px){
  /* Aperta o espacamento entre logo/CTA/instagram/hamburguer para os 3
     alvos de toque (cta circular + social + nav-toggle) caberem sem
     estourar a largura em telas pequenas (~360px). */
  .header-inner{ gap:0.6rem; }
  .header-cta-label{ display:none; }
  .header-cta{ width:44px; height:44px; padding:0; border-radius:50%; }
}
@media (max-width:380px){
  /* Abaixo de ~380px os 4 alvos de toque (logo + cta + social + hamburguer)
     nao cabem sem apertar demais. O Instagram ja existe no footer, entao
     escondemos so a copia do header nessas telas bem estreitas. */
  .header-inner .social-link{ display:none; }
}

/* =========================================================
   HERO (Efeito 1: video + scrim + radar dos portais)
   ========================================================= */
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(3rem, 7vw, 5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.hero-media{
  position:absolute;
  inset:0;
  z-index:0;
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.55) sepia(.18) saturate(1.3);
}
.hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg, var(--bg-void) 38%, rgba(14,16,19,.75) 62%, rgba(14,16,19,.3) 100%);
}
@media (prefers-reduced-motion:reduce){
  .hero-video{ display:none; }
  .hero-media{
    background-image:url('../img/hero-poster.jpg');
    background-size:cover;
    background-position:center;
  }
}

.video-toggle{
  position:absolute;
  right:1.25rem;
  bottom:1.25rem;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(27,31,38,.85);
  border:1px solid var(--hairline);
  color:var(--text-primary);
  cursor:pointer;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.video-toggle:hover{ border-color:var(--gold-500); }
.video-toggle svg{ width:16px; height:16px; }
@media (prefers-reduced-motion:reduce){ .video-toggle{ display:none; } }

.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  gap:2.5rem;
  align-items:center;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:0.76rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gold-300);
  background:rgba(217,173,91,0.08);
  border:1px solid var(--hairline);
  padding:0.5em 0.9em;
  border-radius:999px;
  margin:0 0 1.5rem;
}
.eyebrow img{ height:16px; width:auto; flex-shrink:0; }

.hero-text h1{
  font-size:clamp(2.75rem, 6vw, 5.25rem);
  line-height:1.04;
  letter-spacing:-0.015em;
  font-weight:600;
  margin-bottom:0.5em;
  max-width:16ch;
}
.hero-text h1 .hl-num{ color:var(--gold-100); font-weight:600; }
.hero-sub{ font-size:1.12rem; color:var(--text-secondary); max-width:42ch; margin:0 0 2.1em; }

@media (min-width:960px){
  .hero-grid{ grid-template-columns:1.15fr 0.85fr; gap:3rem; }
}

/* ---- Radar dos portais ---- */
.hero-visual{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; }
.radar{
  position:relative;
  width:min(78vw, 360px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(27,31,38,.6), rgba(27,31,38,.18) 68%, transparent 100%);
  pointer-events:none;
}
.radar-ring{
  position:absolute;
  border:1px solid var(--hairline);
  border-radius:50%;
}
.radar-ring-1{ inset:0; }
.radar-ring-2{ inset:15%; }
.radar-ring-3{ inset:32%; }

.radar-center{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:32%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1px solid var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:500;
  line-height:1.25;
  color:var(--text-primary);
  z-index:2;
}

.radar-ray{
  position:absolute;
  left:50%; top:50%;
  width:1px; height:38%;
  background:linear-gradient(to top, rgba(217,173,91,0), var(--gold-300));
  transform-origin:bottom center;
  transform:translate(-50%,-100%);
}
.radar-ray-dot{
  position:absolute;
  left:50%; bottom:0;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold-100);
  box-shadow:0 0 6px var(--gold-100);
  transform:translate(-50%,50%);
  animation:rayTravel 2.4s ease-in-out infinite;
}
@keyframes rayTravel{
  0%{ bottom:0; opacity:0; }
  15%{ opacity:1; }
  88%{ opacity:1; }
  100%{ bottom:100%; opacity:0; }
}

.radar-orbit{ position:absolute; inset:0; transform:rotate(calc(360deg / 8 * var(--i))); }
.radar-node-wrap{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-50%) rotate(calc(-360deg / 8 * var(--i)));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  z-index:1;
}
.radar-node{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gold-300);
  position:relative;
}
.radar-node.pulse::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid var(--gold-300);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%{ transform:scale(.6); opacity:.9; }
  100%{ transform:scale(2.2); opacity:0; }
}
.radar-node-label{
  font-family:var(--font-mono);
  font-size:0.62rem;
  color:var(--text-secondary);
  white-space:nowrap;
}
/* Nomes mais longos (ex: "Portal de Compras Publicas") quebram em ate 3
   linhas curtas em vez de estourar a largura do radar */
.radar-node-label-wrap{
  white-space:normal;
  max-width:8ch;
  text-align:center;
  line-height:1.2;
}
@media (prefers-reduced-motion:reduce){
  .radar-ray-dot,.radar-node.pulse::after{ display:none; }
}

.radar-caption{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--text-secondary);
  text-align:center;
  margin:0;
}

/* =========================================================
   MARQUEE DE PORTAIS
   ========================================================= */
.marquee-section{
  background:var(--bg-surface);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:1.75rem 0;
}
.marquee-head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.65rem;
  margin:0 0 1.1rem;
}
.marquee-label{
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--text-secondary);
  text-transform:uppercase;
  letter-spacing:0.1em;
  margin:0;
}
.marquee-toggle{
  width:28px;
  height:28px;
  min-width:24px;
  min-height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--text-secondary);
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.marquee-toggle:hover,
.marquee-toggle:focus-visible{ border-color:var(--gold-500); color:var(--text-primary); }
.marquee-toggle svg{ width:11px; height:11px; }
.marquee-viewport{ overflow:hidden; }
.marquee-track{
  display:flex;
  width:max-content;
  animation:scrollX 30s linear infinite;
}
/* Pausa no hover (mouse), no foco do botao de controle (teclado) e via
   classe .is-paused alternada pelo botao (touch e reforco acessivel - WCAG 2.2.2) */
.marquee-track:hover,
.marquee-section:focus-within .marquee-track,
.marquee-track.is-paused{ animation-play-state:paused; }
@keyframes scrollX{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){
  .marquee-track{ animation:none; }
  .marquee-toggle{ display:none; }
}
.marquee-group{ display:flex; }
.chip{
  display:flex;
  align-items:center;
  color:var(--text-secondary);
  font-weight:600;
  font-size:0.92rem;
  padding:0 2rem;
  white-space:nowrap;
  border-right:1px solid var(--hairline);
}

/* =========================================================
   O MECANISMO - Laboratorio de conexoes (fonte -> hub -> destinos)
   ========================================================= */
#mecanismo{ position:relative; overflow:hidden; }

/* Textura de fundo em video (infograficos/dados abstratos), bem discreta,
   igual ao padrao usado em #numeros. Fica ATRAS do glow/grade decorativo
   (.mecanismo-bg) para nao competir com o efeito "blueprint" existente. */
.mecanismo-media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.mecanismo-video{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.12;
  filter:grayscale(1) sepia(.3) hue-rotate(-8deg) brightness(.6) blur(1px);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){ .mecanismo-video{ display:none; } }

/* Fundo sutil: glow dourado discreto + grade fina tipo blueprint/papel
   milimetrado, reforcando a estetica de "documento oficial". Opacidade
   bem baixa de proposito, e so decorativo (aria-hidden). */
.mecanismo-bg{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 16% 8%, rgba(243,212,138,0.12), transparent 55%),
    repeating-linear-gradient(0deg, rgba(217,173,91,0.05) 0, rgba(217,173,91,0.05) 1px, transparent 1px, transparent 32px),
    repeating-linear-gradient(90deg, rgba(217,173,91,0.05) 0, rgba(217,173,91,0.05) 1px, transparent 1px, transparent 32px);
}
#mecanismo .container{ position:relative; z-index:2; }

/* Diagrama interativo: cartao "fonte" (Edital) ligado por linhas SVG a
   um hub central (emblema Indominus) que se ramifica para 3 destinos
   clicaveis. Ao clicar, a linha daquele destino acende e o painel de
   detalhe abaixo atualiza (rota tecnica + checklist + resultado).
   Clique manual, sem auto-play/ciclo automatico.

   Geometria das linhas: calculada em runtime por JS (setupConnectionsLab
   em script.js le a posicao real de cada "porta" de conexao via
   getBoundingClientRect e desenha o <path>), nunca com coordenadas fixas
   no CSS/HTML — assim o tracado nao desalinha por causa de quebra de
   linha, fonte carregando devagar, zoom do usuario ou texto traduzido
   maior/menor. Sem JS, os nos continuam legiveis; so as linhas
   decorativas nao aparecem (d vazio = path nao desenha nada). */
.connections-wrap{ position:relative; }

.connections-hint{
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--text-secondary);
  margin:0 0 2rem;
}

.connections-lab{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2.75rem;
  padding:clamp(1.5rem, 4vw, 2.5rem) 0;
}

.connection-paths{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  overflow:visible;
  pointer-events:none;
}
.connection-paths-desktop{ display:none; }

.connection-wire{
  fill:none;
  stroke:var(--hairline);
  stroke-width:2;
  opacity:0.6;
  transition:stroke 0.4s var(--ease-premium), opacity 0.4s var(--ease-premium), filter 0.4s var(--ease-premium);
}
.connection-wire-trunk{ stroke:var(--gold-500); stroke-width:2.5; opacity:0.85; }
.connection-wire.is-active{
  stroke:var(--gold-300);
  opacity:1;
  filter:drop-shadow(0 0 5px rgba(217,173,91,0.55));
}
@media (prefers-reduced-motion:reduce){
  .connection-wire{ transition:none; }
}

/* "Porta" de conexao: pequeno terminal dourado nas bordas de cada no.
   A posicao muda por breakpoint (mobile = fluxo vertical, desktop =
   fluxo horizontal); o JS le a posicao real (ja calculada pelo CSS)
   pra desenhar a linha, entao so trocar left/top/right/bottom aqui
   já move a linha certinho, sem tocar no JS. */
.connection-port{
  position:absolute;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1.5px solid var(--gold-500);
  z-index:1;
  pointer-events:none;
}
.connection-port-source{ left:50%; bottom:0; transform:translate(-50%,50%); }
.connection-port-hub-in{ left:50%; top:0; transform:translate(-50%,-50%); }
.connection-port-hub-out{ left:50%; bottom:0; transform:translate(-50%,50%); }
.connection-port-dest{ left:50%; top:0; transform:translate(-50%,-50%); }
.connection-destination.is-active .connection-port-dest{
  background:var(--gradient-gold);
  border-color:var(--gold-100);
  box-shadow:0 0 8px rgba(217,173,91,0.6);
}

.connection-node-label{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin:0 0 0.75rem;
  text-align:center;
}

/* ---- Fonte ---- */
.connection-source{ position:relative; z-index:1; }
.connection-source-card{
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:1.5rem;
  text-align:center;
}
.connection-source-title{
  font-family:var(--font-display);
  font-size:1.3rem;
  font-weight:600;
  color:var(--text-primary);
  margin:0 0 0.5em;
}
.connection-source-example{
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--text-secondary);
  margin:0 0 0.9em;
}
.connection-source-flag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.68rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-secondary);
  background:var(--bg-surface-2);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:0.35em 0.9em;
  margin:0;
}

/* ---- Hub ---- */
.connection-hub{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
}
.connection-hub-core{
  position:relative;
  width:76px; height:76px;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1px solid var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 0 1px rgba(217,173,91,0.08), 0 0 30px -8px rgba(217,173,91,0.4);
  margin-bottom:0.9rem;
}
.connection-hub-core img{ width:44px; height:44px; object-fit:contain; }
.connection-hub-pulse{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid var(--gold-300);
  animation:ping 2.4s ease-out infinite;
  pointer-events:none;
}
@media (prefers-reduced-motion:reduce){ .connection-hub-pulse{ display:none; } }
.connection-hub-label{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--gold-100);
  margin:0 0 0.2em;
}
.connection-hub-caption{
  font-family:var(--font-mono);
  font-size:0.72rem;
  color:var(--text-secondary);
  margin:0;
}

/* ---- Destinos ---- */
.connection-destinations{
  display:flex;
  flex-direction:column;
  gap:1rem;
  position:relative;
  z-index:1;
}
.connection-destination{
  position:relative;
  display:flex;
  align-items:center;
  gap:1rem;
  width:100%;
  text-align:left;
  padding:1.1rem 1.3rem;
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  cursor:pointer;
  transition:border-color 0.35s var(--ease-premium), background-color 0.35s var(--ease-premium);
}
.connection-destination:hover{ border-color:var(--gold-500); }
.connection-destination.is-active{
  border-color:var(--gold-300);
  background:var(--bg-surface-2);
  box-shadow:0 0 0 1px rgba(217,173,91,0.12), 0 16px 34px -18px rgba(217,173,91,0.35);
}
.connection-destination-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1px solid var(--gold-500);
  flex-shrink:0;
  transition:background-color 0.35s ease, border-color 0.35s ease;
}
.connection-destination-icon svg{ width:20px; height:20px; stroke:var(--gold-300); transition:stroke 0.35s ease; }
.connection-destination.is-active .connection-destination-icon{ border-color:var(--gold-300); background:var(--gradient-gold); }
.connection-destination.is-active .connection-destination-icon svg{ stroke:var(--ink); }
.connection-destination-text{ display:flex; flex-direction:column; gap:0.15rem; }
.connection-destination-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.05rem;
  color:var(--text-primary);
}
.connection-destination-sub{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-secondary);
}
.connection-destination.is-active .connection-destination-title{ color:var(--gold-100); }

@media (prefers-reduced-motion:reduce){
  .connection-destination{ transition:none; }
  .connection-destination-icon{ transition:none; }
}

@media (min-width:960px){
  .connections-lab{
    display:grid;
    grid-template-columns:minmax(230px,1fr) minmax(150px,190px) minmax(300px,1.3fr);
    align-items:center;
    column-gap:1.75rem;
    row-gap:0;
    padding:2.5rem 0;
  }
  .connection-paths-mobile{ display:none; }
  .connection-paths-desktop{ display:block; }

  .connection-port-source{ left:auto; right:0; bottom:auto; top:50%; transform:translate(50%,-50%); }
  .connection-port-hub-in{ left:0; top:50%; transform:translate(-50%,-50%); }
  .connection-port-hub-out{ left:auto; right:0; bottom:auto; top:50%; transform:translate(50%,-50%); }
  .connection-port-dest{ left:0; top:50%; transform:translate(-50%,-50%); }
}

/* ---- Painel de detalhe ---- */
.connections-detail{
  display:grid;
  gap:1.75rem;
  margin-top:0.5rem;
  padding:clamp(1.5rem, 4vw, 2.25rem);
  background:rgba(27,31,38,0.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--gold-500);
  border-radius:var(--radius-card);
}
.connection-route{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:0.95rem;
  color:var(--gold-300);
  background:var(--bg-surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card-sm);
  padding:0.7em 1em;
  margin:0 0 1.1em;
}
.connection-checklist{ display:flex; flex-direction:column; gap:0.7rem; }
.connection-checklist li{
  position:relative;
  padding-left:2.6rem;
  font-size:0.92rem;
  color:var(--text-secondary);
  min-height:20px;
}
.connection-checklist li[data-status="done"]::before{
  content:"OK";
  position:absolute;
  left:0; top:50%;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:20px;
  padding:0 0.35em;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.62rem;
  font-weight:700;
  letter-spacing:0.03em;
  background:var(--gradient-gold);
  color:var(--ink);
}
.connection-outcome h3{ font-size:1.35rem; margin:0 0 0.4em; }
.connection-outcome p{ color:var(--text-secondary); margin:0; max-width:52ch; }

@media (min-width:760px){
  .connections-detail{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* ---- Rodape ---- */
.connections-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.75rem;
}
.connections-disclaimer{
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:var(--text-secondary);
  margin:0;
}
.connections-reset{
  display:inline-flex;
  align-items:center;
  gap:0.5em;
  padding:0.65em 1.3em;
  min-height:44px;
  background:none;
  border:1px solid var(--gold-500);
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.82rem;
  font-weight:600;
  color:var(--gold-300);
  cursor:pointer;
  transition:border-color 0.3s ease, background-color 0.3s ease;
}
.connections-reset:hover{ background:var(--bg-surface-2); border-color:var(--gold-300); }
.connections-reset svg{ width:16px; height:16px; flex-shrink:0; }
@media (prefers-reduced-motion:reduce){
  .connections-reset{ transition:none; }
}

/* =========================================================
   COMO FUNCIONA - timeline
   ========================================================= */
.timeline{
  display:flex;
  flex-direction:column;
  gap:2.25rem;
  position:relative;
  margin-top:2.5rem;
}
.timeline::before{
  content:"";
  position:absolute;
  left:23px;
  top:8px;
  bottom:8px;
  width:1px;
  background:linear-gradient(to bottom, var(--gold-500), rgba(169,129,46,0.05));
}
.timeline-step{ position:relative; padding-left:64px; }

/* Efeito "blur to focus" staggered (01 -> 04) ao entrar na viewport.
   Classe adicionada via JS (setupTimelineBlur). Sem JS ou com
   prefers-reduced-motion, os passos nascem nitidos e visiveis, pois
   esta regra so existe dentro do media (no-preference). */
@media (prefers-reduced-motion:no-preference){
  .timeline-step.step-blur-init{
    opacity:0;
    filter:blur(8px);
    transition:opacity 0.7s var(--ease-premium), filter 0.7s var(--ease-premium);
  }
  .timeline-step.step-blur-init.step-in-focus{ opacity:1; filter:blur(0); }
  .timeline-step:nth-child(1).step-blur-init{ transition-delay:0ms; }
  .timeline-step:nth-child(2).step-blur-init{ transition-delay:120ms; }
  .timeline-step:nth-child(3).step-blur-init{ transition-delay:240ms; }
  .timeline-step:nth-child(4).step-blur-init{ transition-delay:360ms; }
}
.step-num{
  position:absolute;
  left:0; top:0;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1px solid var(--gold-500);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.92rem;
  color:var(--gold-300);
}
.step-title{ font-size:1.2rem; margin:0 0 0.4em; }
.step-desc{ color:var(--text-secondary); font-size:0.96rem; max-width:52ch; margin:0; }

@media (min-width:960px){
  .timeline{ flex-direction:row; gap:1.5rem; }
  .timeline::before{ left:24px; right:24px; top:24px; bottom:auto; width:auto; height:1px; }
  .timeline-step{ flex:1; padding-left:0; padding-top:68px; }
  .step-num{ left:50%; top:0; transform:translateX(-50%); }
  .timeline-step .step-title,
  .timeline-step .step-desc{ text-align:center; margin-left:auto; margin-right:auto; }
}

/* =========================================================
   TECNOLOGIA / SaaS PROPRIO - Efeito futurista (pipeline de IA)
   Terminal com scanline + fundo em grade animada + coluna de passos
   que acende (nó + glow dourado) ao entrar na viewport. Tudo em CSS
   puro + um IntersectionObserver simples (setupTechPipeline no JS),
   coerente com o restante do site: sem libs, graceful sem JS.
   ========================================================= */
.section-tech{ position:relative; overflow:hidden; }
.tech-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 12% -6%, rgba(243,212,138,0.16), transparent 45%),
    radial-gradient(circle at 92% 106%, rgba(217,173,91,0.14), transparent 42%),
    repeating-linear-gradient(0deg, rgba(217,173,91,0.045) 0, rgba(217,173,91,0.045) 1px, transparent 1px, transparent 36px),
    repeating-linear-gradient(90deg, rgba(217,173,91,0.045) 0, rgba(217,173,91,0.045) 1px, transparent 1px, transparent 36px);
  background-position:0 0;
  animation:techBgDrift 26s linear infinite;
}
@keyframes techBgDrift{
  0%{ background-position:0 0, 0 0, 0 0, 0 0; }
  100%{ background-position:0 0, 0 0, -72px -72px, 72px 72px; }
}
.section-tech .container{ position:relative; z-index:1; }

.tech-terminal{
  margin-top:2.5rem;
  position:relative;
  overflow:hidden;
  background:rgba(27,31,38,0.72);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border:1px solid var(--gold-500);
  border-radius:var(--radius-card);
  box-shadow:0 0 0 1px rgba(217,173,91,0.08), 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 46px -12px rgba(217,173,91,0.25);
  padding:clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.75rem) clamp(2rem, 4vw, 2.75rem);
  transition:box-shadow 0.35s ease, border-color 0.35s ease;
}
.tech-terminal:hover{
  border-color:var(--gold-300);
  box-shadow:0 0 0 1px rgba(217,173,91,0.14), 0 30px 60px -20px rgba(0,0,0,0.55), 0 0 64px -10px rgba(243,212,138,0.35);
}
.tech-terminal-bar{
  display:flex;
  align-items:center;
  gap:0.6rem;
  padding-bottom:1.4rem;
  margin-bottom:1.6rem;
  border-bottom:1px solid var(--hairline);
}
.tech-dot{ width:9px; height:9px; border-radius:50%; background:var(--gold-500); flex-shrink:0; }
.tech-dot-r{ opacity:0.9; }
.tech-dot-y{ opacity:0.6; }
.tech-dot-g{ opacity:0.35; }
.tech-terminal-label{
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--text-secondary);
  letter-spacing:0.02em;
  margin-left:0.4rem;
}
.tech-terminal-scan{
  position:absolute;
  left:0; right:0;
  height:140px;
  top:-140px;
  background:linear-gradient(180deg, transparent, rgba(243,212,138,0.12), transparent);
  animation:techScan 6.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes techScan{
  0%{ top:-140px; }
  55%{ top:100%; }
  100%{ top:100%; }
}
@media (prefers-reduced-motion:reduce){
  .tech-bg{ animation:none; }
  .tech-terminal-scan{ display:none; }
}

.tech-pipeline{ position:relative; padding-left:34px; }
.tech-pipeline::before{
  content:"";
  position:absolute;
  left:6px; top:6px; bottom:6px;
  width:1px;
  background:linear-gradient(to bottom, var(--gold-300), rgba(169,129,46,0.06));
}
/* "Dado" viajando pela linha do pipeline, loop continuo e lento (ver
   .tech-pipeline::before acima). top:6px/calc(100% - ...) usa o mesmo
   raciocinio de .tech-terminal-scan (top em %, ancorado no container
   com altura definida pelo conteudo). Zerado globalmente em
   prefers-reduced-motion:reduce (regra no topo do arquivo). */
.tech-pipeline::after{
  content:"";
  position:absolute;
  left:6px;
  top:6px;
  width:1px;
  height:28px;
  background:linear-gradient(to bottom, transparent, var(--gold-100), transparent);
  filter:blur(0.5px);
  animation:techPipelineTravel 3.6s linear infinite;
  pointer-events:none;
}
@keyframes techPipelineTravel{
  0%{ top:6px; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ top:calc(100% - 34px); opacity:0; }
}
.tech-step{ position:relative; padding-bottom:2.1rem; }
.tech-step:last-child{ padding-bottom:0; }
.tech-step-node{
  position:absolute;
  left:-34px; top:2px;
  width:13px; height:13px;
  background:var(--bg-surface-2);
  border:1px solid var(--gold-500);
  transform:rotate(45deg);
  transition:background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.tech-step-meta{ display:flex; align-items:center; gap:0.7rem; margin-bottom:0.5em; }
.tech-step-num{ font-family:var(--font-mono); font-size:0.78rem; color:var(--text-secondary); }
.tech-step-badge{
  font-family:var(--font-mono);
  font-size:0.64rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:0.3em 0.65em;
  border-radius:999px;
  border:1px solid var(--hairline);
  color:var(--text-secondary);
}
.tech-badge-ia{ background:var(--gradient-gold); color:var(--ink); border-color:transparent; font-weight:700; }
.tech-step-title{ font-size:1.08rem; margin:0 0 0.4em; transition:color 0.4s ease; }
.tech-step-desc{ color:var(--text-secondary); font-size:0.92rem; max-width:58ch; margin:0; }

@media (prefers-reduced-motion:no-preference){
  .tech-step.tech-step-init{
    opacity:0;
    transform:translateX(-14px);
    filter:blur(3px);
    transition:opacity 0.6s var(--ease-premium), transform 0.6s var(--ease-premium), filter 0.6s var(--ease-premium);
  }
  .tech-step.tech-step-init.is-active{ opacity:1; transform:translateX(0); filter:blur(0); }
}
.tech-step.is-active .tech-step-node{
  background:var(--gradient-gold);
  border-color:transparent;
  box-shadow:0 0 0 4px rgba(217,173,91,0.16), 0 0 16px rgba(243,212,138,0.55);
}
.tech-step.is-active .tech-step-title{ color:var(--gold-300); }

.tech-stat-row{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.25rem;
  padding-top:1.75rem;
  border-top:1px solid var(--hairline);
}
.tech-stat{
  flex:1 1 220px;
  background:var(--bg-surface-2);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card-sm);
  padding:1.1rem 1.25rem;
}
.tech-stat-num{ display:block; font-size:1.3rem; font-weight:600; margin-bottom:0.25em; }
.tech-stat-label{ display:block; font-size:0.82rem; color:var(--text-secondary); }

/* =========================================================
   COMPARATIVO - tabela semantica
   ========================================================= */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-card);
  border:1px solid var(--hairline);
  margin-top:2.5rem;
}
.compare-table{ min-width:660px; }
.compare-table th,.compare-table td{
  padding:1.1rem 1.4rem;
  text-align:left;
  border-bottom:1px solid var(--hairline);
  vertical-align:middle;
}
.compare-table thead th{
  font-family:var(--font-mono);
  font-size:0.76rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--text-secondary);
  background:var(--bg-surface);
}
.compare-table thead th.col-hi{ color:var(--gold-300); }
.compare-table tbody th{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.95rem;
  color:var(--text-primary);
}
.compare-table tbody td{ font-size:0.95rem; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{ border-bottom:none; }
.compare-table td.col-hi,
.compare-table th.col-hi{
  background:var(--bg-surface-2);
  border-left:2px solid var(--gold-300);
}
.compare-table tbody tr td.col-hi{ transform:translateY(-8px); box-shadow:0 0 0 1px var(--hairline) inset; }
.mark{ font-family:var(--font-mono); font-size:1.05rem; font-weight:600; }
.mark.yes{ color:var(--gold-300); }
.mark.no{ color:var(--text-secondary); }

@media (max-width:640px){
  .compare-table tbody tr td.col-hi{ transform:none; }
}

/* Abaixo de 700px a tabela nao cabe em colunas sem espremer demais o
   texto (o rotulo da primeira coluna e as duas colunas de comparacao
   sao longas). Em vez de exigir arrastar pro lado, cada linha vira um
   cartao empilhado: o item comparado como titulo, e as 3 respostas
   como pares rotulo/valor um abaixo do outro. */
@media (max-width:700px){
  .table-wrap{ overflow-x:visible; }
  .compare-table{ min-width:0; width:100%; border-collapse:separate; border-spacing:0; }
  .compare-table thead{ display:none; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td{
    display:block;
    width:100%;
  }
  .compare-table tbody tr{
    margin-bottom:1rem;
    border-radius:var(--radius-card);
    border:1px solid var(--hairline);
    overflow:hidden;
  }
  .compare-table tbody tr:last-child{ margin-bottom:0; }
  .compare-table tbody th{
    padding:0.9rem 1.1rem;
    background:var(--bg-surface-2);
    border-bottom:1px solid var(--hairline);
    font-size:0.92rem;
  }
  .compare-table tbody td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:0.7rem 1.1rem;
    border-bottom:1px solid var(--hairline);
  }
  .compare-table tbody tr td:last-child{ border-bottom:none; }
  .compare-table td::before{
    content:attr(data-label);
    font-family:var(--font-mono);
    font-size:0.72rem;
    text-transform:uppercase;
    letter-spacing:0.03em;
    color:var(--text-secondary);
  }
  .compare-table td.col-hi{
    background:transparent;
    border-left:none;
  }
  .compare-table td.col-hi::before{ color:var(--gold-300); font-weight:600; }
}

/* =========================================================
   NUMEROS - Efeito 3 (contador + video textura)
   ========================================================= */
.numeros{ position:relative; overflow:hidden; }
.numeros-media{ position:absolute; inset:0; z-index:0; }
.numeros-video{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.10;
  filter:grayscale(1) sepia(.3) hue-rotate(-8deg) brightness(.6) blur(1px);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){ .numeros-video{ display:none; } }

.numeros .container{ position:relative; z-index:1; }
.stats-grid{
  display:grid;
  gap:1.5rem;
  margin-top:2.5rem;
}
.stat-card{
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:2rem 1.75rem;
}
.stat-card-lg{ display:flex; flex-direction:column; justify-content:center; }
.stat-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--gold-100);
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1;
  margin:0 0 0.4em;
}
.stat-card-lg .stat-num{ font-size:clamp(2.8rem, 6vw, 4.6rem); }
.stat-label{ color:var(--text-secondary); font-size:0.96rem; margin:0; max-width:34ch; }
.stat-stack{ display:flex; flex-direction:column; gap:1.5rem; }

@media (min-width:760px){
  .stats-grid{ grid-template-columns:1.5fr 1fr; align-items:stretch; }
}

/* =========================================================
   BENEFICIOS
   ========================================================= */
.benef-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:1.5rem;
}
.benef-card{
  background:var(--bg-void);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:1.75rem 1.5rem;
  transition:transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
/* Hover mais rico: elevacao + realce dourado na borda. Independe de JS,
   a duracao ja e neutralizada globalmente pelo media prefers-reduced-motion.
   O seletor composto reforca a especificidade para vencer o estado final
   do efeito de entrada abaixo (.benef-init.benef-in tambem mexe em transform). */
.benef-card:hover,
.benef-card.benef-init.benef-in:hover{
  transform:translateY(-4px);
  border-color:var(--gold-500);
  box-shadow:0 14px 28px rgba(217,173,91,0.12);
}
.benef-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1px solid var(--gold-500);
  margin-bottom:1.1rem;
}
.benef-icon svg{ width:22px; height:22px; stroke:var(--gold-300); transform-origin:center; }
.benef-card:hover .benef-icon svg{ animation:benefIconPulse 0.5s ease; }
@keyframes benefIconPulse{
  0%{ transform:scale(1); }
  45%{ transform:scale(1.18); }
  100%{ transform:scale(1); }
}
.benef-title{ font-size:1.02rem; margin:0 0 0.5em; }
.benef-desc{ color:var(--text-secondary); font-size:0.92rem; margin:0; }

/* Entrada em scroll com stagger entre os 5 cards (fade + scale), efeito
   diferente do blur-to-focus da timeline. Classe via JS (setupBenefCards);
   sem JS/reduced-motion os cards nascem visiveis (regra so existe aqui
   dentro do media no-preference), delay calculado por --i (0 a 4). */
@media (prefers-reduced-motion:no-preference){
  .benef-card.benef-init{
    opacity:0;
    transform:scale(0.96);
    transition-property:opacity, transform, border-color, box-shadow;
    transition-duration:0.55s, 0.4s, 0.25s, 0.25s;
    transition-timing-function:var(--ease-premium), var(--ease-premium), ease, ease;
    transition-delay:calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0ms, 0ms;
  }
  .benef-card.benef-init.benef-in{ opacity:1; transform:scale(1); transition-delay:0ms; }
}

/* =========================================================
   INVESTIMENTO
   ========================================================= */
.invest-layout{
  display:grid;
  gap:1.75rem;
  margin-top:2.5rem;
  align-items:stretch;
}
.invest-cards{ display:grid; gap:1.5rem; }
.invest-card{
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:1.9rem 1.7rem;
}
.invest-card-primary{ display:flex; flex-direction:column; justify-content:center; border-color:var(--gold-500); }
.invest-cards-stack{ display:grid; gap:1.5rem; }
.invest-icon{ display:block; width:36px; height:36px; margin-bottom:1rem; }
.invest-icon svg{ width:100%; height:100%; stroke:var(--gold-300); }
.invest-title{ font-size:1.02rem; margin:0 0 0.5em; }
.invest-desc{ color:var(--text-secondary); font-size:0.92rem; margin:0; }

.invest-photo{ position:relative; border-radius:var(--radius-card); overflow:hidden; min-height:220px; }
.invest-photo img{
  width:100%; height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.1) brightness(.85);
}
.invest-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(160deg, rgba(217,173,91,.22), rgba(14,16,19,.55));
  mix-blend-mode:color;
}

.invest-cta{
  margin-top:2rem;
  padding:2.25rem 1.75rem;
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  text-align:center;
}
.invest-cta p{ color:var(--text-secondary); margin:0 0 1.3rem; font-size:0.98rem; }

@media (min-width:900px){
  .invest-layout{ grid-template-columns:1.4fr 1fr; }
  .invest-cards{ grid-template-columns:2fr 1fr; }
}

/* =========================================================
   DEPOIMENTOS - carrossel de slide unico. Cada slide reaproveita o
   tratamento visual "featured" (citacao grande + avatar/nome/cargo +
   borda dourada), ciclando pelos 4 depoimentos um de cada vez.

   Sem JS, os 4 depoimentos ficam empilhados e legiveis (regra padrao
   de .depo-track abaixo). A ocultacao dos slides nao-ativos (posicao
   absoluta + opacity:0) so passa a valer quando o JS adiciona a
   classe .is-js no viewport (setupTestimonialsCarousel em script.js)
   - mesmo cuidado ja usado em .reveal-init: nada fica escondido no
   HTML/CSS puro sem JS.

   Altura do track: os 4 depoimentos variam bastante de altura (mais
   em mobile). O slide ativo fica position:relative (dita a altura
   natural do .depo-track) e os demais position:absolute; nunca
   forcamos width/height diretamente aqui via valor fixo - quem anima
   a altura entre um slide e outro e o JS (tecnica FLIP: mede a altura
   "de" e "para" e deixa esta transicao de "height" interpolar entre
   os dois valores), sempre em sincronia com o fade de opacity/transform
   abaixo, pra nao dar salto de layout (CLS) ao trocar de slide.
   overflow:hidden evita que o conteudo do slide mais alto "vaze" da
   caixa enquanto a altura ainda esta animando.
   ========================================================= */
.depo-carousel{ margin-top:2.5rem; }
.depo-viewport{ position:relative; }
.depo-track{ display:flex; flex-direction:column; gap:1.5rem; }

.depo-viewport.is-js .depo-track{
  display:block;
  position:relative;
  overflow:hidden;
  transition:height 0.5s var(--ease-premium);
}
.depo-viewport.is-js .depo-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity 0.5s var(--ease-premium), transform 0.5s var(--ease-premium);
}
.depo-viewport.is-js .depo-slide.is-active{
  position:relative;
  inset:auto;
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.depo-featured{
  background:var(--bg-void);
  border:1px solid var(--gold-500);
  border-radius:var(--radius-card);
  padding:2.5rem;
}
.depo-featured p{
  font-family:var(--font-display);
  font-size:clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight:400;
  color:var(--text-primary);
  margin:0 0 1.5rem;
  max-width:60ch;
}
.depo-featured footer{ display:flex; align-items:center; gap:0.8rem; }
.depo-avatar{
  width:42px; height:42px;
  border-radius:50%;
  background:var(--gradient-gold);
  color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono);
  font-weight:600;
  font-size:0.85rem;
  flex-shrink:0;
}
.depo-name{ display:block; font-weight:600; font-size:0.92rem; }
.depo-role{ display:block; font-size:0.82rem; color:var(--text-secondary); }

/* ---- Controles: setas, dots e pausar/retomar. Visual reaproveitado
   de .marquee-toggle (botao pequeno circular, borda hairline, hover
   dourado), so aplicado tambem as setas prev/next. ---- */
.depo-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  margin-top:1.75rem;
  flex-wrap:wrap;
}
.depo-arrow,
.depo-toggle{
  width:40px;
  height:40px;
  min-width:40px;
  min-height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  padding:0;
  background:transparent;
  border:1px solid var(--hairline);
  color:var(--text-secondary);
  cursor:pointer;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.depo-arrow:hover,
.depo-arrow:focus-visible,
.depo-toggle:hover,
.depo-toggle:focus-visible{ border-color:var(--gold-500); color:var(--text-primary); }
.depo-arrow svg{ width:18px; height:18px; }
.depo-toggle svg{ width:14px; height:14px; }
/* Reforco necessario: o reset global "svg{ display:block }" (regra de
   autor) vence o "[hidden]{ display:none }" do user-agent stylesheet
   independente de especificidade (origem da regra pesa antes da
   especificidade na cascata) - sem isso, o icone alternado por
   "hidden" via JS ficaria sobreposto ao outro em vez de sumir. */
.depo-toggle svg[hidden]{ display:none; }

.depo-dots{ display:flex; align-items:center; gap:0.6rem; }
.depo-dot{
  width:28px;
  height:28px;
  min-width:24px;
  min-height:24px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.depo-dot::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--bg-surface-2);
  border:1px solid var(--hairline);
  transition:background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.depo-dot:hover::before,
.depo-dot:focus-visible::before{ border-color:var(--gold-500); }
.depo-dot[aria-current="true"]::before{
  background:var(--gradient-gold);
  border-color:transparent;
  transform:scale(1.15);
}

/* Autoplay nao roda em reduced-motion (JS), e o botao de pausar some,
   mesmo padrao ja usado em .marquee-toggle. A transicao de troca de
   slide ja fica quase instantanea pela regra global no topo do
   arquivo (transition-duration:0.001ms em prefers-reduced-motion). */
@media (prefers-reduced-motion:reduce){
  .depo-toggle{ display:none; }
}

@media (min-width:640px){
  .depo-controls{ gap:1.5rem; }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq-list{ margin-top:2.5rem; }
.faq-item{ border-top:1px solid var(--hairline); }
.faq-item:last-child{ border-bottom:1px solid var(--hairline); }
.faq-heading{ margin:0; }
.faq-q{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:1.4rem 0.2rem;
  text-align:left;
  font-weight:600;
  font-size:1.02rem;
  color:var(--text-primary);
  cursor:pointer;
  min-height:44px;
}
.faq-icon{ position:relative; width:18px; height:18px; flex-shrink:0; transition:transform 0.2s ease; }
.faq-icon::before,.faq-icon::after{
  content:"";
  position:absolute;
  background:var(--gold-300);
  transition:transform 0.2s ease;
}
.faq-icon::before{ width:100%; height:2px; top:50%; left:0; transform:translateY(-50%); }
.faq-icon::after{ width:2px; height:100%; left:50%; top:0; transform:translateX(-50%); }
.faq-q[aria-expanded="true"] .faq-icon{ transform:rotate(45deg); }
.faq-a{ padding:0 0.2rem 1.5rem; }
.faq-a p{ color:var(--text-secondary); font-size:0.96rem; max-width:64ch; margin:0; line-height:1.65; }

/* =========================================================
   FORMULARIO DE CONTATO
   ========================================================= */
.contact-form{
  margin-top:2.5rem;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:clamp(1.75rem, 4vw, 2.75rem);
}
.form-field{ display:flex; flex-direction:column; gap:0.55rem; }
.form-field label,
.form-fieldset legend{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  color:var(--text-primary);
}
.form-field input[type="text"],
.form-field input[type="tel"],
.form-field textarea{
  background:var(--bg-surface-2);
  border:1px solid var(--border-interactive);
  border-radius:var(--radius-card-sm);
  padding:0.85em 1em;
  font-family:var(--font-body);
  font-size:0.96rem;
  color:var(--text-primary);
  min-height:44px;
  transition:border-color 0.2s ease;
}
.form-field textarea{ min-height:110px; resize:vertical; }
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--text-secondary); opacity:0.85; }
.form-field input:hover,
.form-field textarea:hover{ border-color:var(--gold-500); }
.form-field input:focus-visible,
.form-field textarea:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:2px;
  border-color:var(--gold-300);
}
.form-fieldset{ border:none; padding:0; margin:0; }
.form-fieldset legend{ padding:0 0 0.7em; }
.radio-group{ display:flex; gap:1.75rem; flex-wrap:wrap; }
.radio-option{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-size:0.95rem;
  color:var(--text-primary);
  cursor:pointer;
  min-height:44px;
}
.radio-option input[type="radio"]{
  width:24px; height:24px;
  accent-color:var(--gold-300);
  cursor:pointer;
  flex-shrink:0;
}
.radio-option input[type="radio"]:focus-visible{
  outline:2px solid var(--gold-300);
  outline-offset:2px;
}
.contact-form .btn{ align-self:flex-start; margin-top:0.5rem; }

@media (min-width:640px){
  .contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
  .contact-form .form-fieldset,
  .contact-form .form-field-full,
  .contact-form .btn{ grid-column:1 / -1; }
}

/* =========================================================
   CTA FINAL - unico bloco centralizado do site
   ========================================================= */
.cta-final{
  position:relative;
  overflow:hidden;
  padding:clamp(4.5rem, 9vw, 7rem) 0;
  text-align:center;
  background:var(--bg-void);
}
/* Textura de fundo em video (Brasilia/predios publicos), bem discreta,
   igual ao padrao usado em #numeros. Fica atras do watermark e do
   conteudo (z-index 0), reforcando o tema "governo" sem atrapalhar a leitura. */
.cta-final-media{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.cta-final-video{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.12;
  filter:grayscale(1) sepia(.3) hue-rotate(-8deg) brightness(.6) blur(1px);
  mix-blend-mode:screen;
}
@media (prefers-reduced-motion:reduce){ .cta-final-video{ display:none; } }

.cta-final-watermark{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw, 620px);
  aspect-ratio:1/1;
  z-index:0;
  background-image:url('../img/logo-emblema.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.05;
  pointer-events:none;
}
.cta-final-inner{ position:relative; z-index:1; }
.cta-final h2{ max-width:26ch; margin:0 auto 0.7em; }
.cta-final .btn{ margin-top:0.5rem; }
.trust-line{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.5rem 1.6rem;
  margin-top:2.2rem;
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--text-secondary);
}
.trust-line li{ position:relative; padding-left:1.1em; }
.trust-line li::before{ content:"\2022"; position:absolute; left:0; color:var(--gold-300); }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  background:var(--bg-surface);
  border-top:1px solid var(--hairline);
  padding:2.5rem 0;
}
.footer-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1rem 2rem;
}
.footer-logo-link{ flex-shrink:0; }
.footer-logo{ width:130px; height:auto; }
.footer-tagline{ color:var(--text-secondary); font-size:0.9rem; margin:0; flex:1 1 240px; }
.footer-copy{ color:var(--text-secondary); font-size:0.8rem; margin:0; width:100%; }

@media (min-width:700px){
  .footer-copy{ width:auto; margin-left:auto; }
}

/* =========================================================
   FAB WHATSAPP (mobile)
   ========================================================= */
.fab-whatsapp{
  position:fixed;
  right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:450;
  width:56px; height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--gradient-gold);
  color:var(--ink);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  transition:transform 0.15s ease;
}
.fab-whatsapp:hover{ transform:translateY(-2px) scale(1.04); }
.fab-whatsapp svg{ width:26px; height:26px; }

@media (min-width:960px){
  .fab-whatsapp{ display:none; }
}