/* =========================================================
   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);
  --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;
}

/* ---------- 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,#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; }

/* =========================================================
   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);
    transition:opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  .reveal-init.is-visible{ opacity:1; transform:translateY(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; }

.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){
  .header-cta-label{ display:none; }
  .header-cta{ width:44px; height:44px; padding:0; border-radius:50%; }
}

/* =========================================================
   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 - Efeito 2 (cards que se "traduzem" no scroll)
   ========================================================= */
#mecanismo{ position:relative; }

/* 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:0;
  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:1; }

.stack-wrap{ position:relative; }

/* Entrada em scroll dos cards (fade + translateY), coexiste com o
   efeito de "traducao" abaixo, que muda cor/tipografia do conteudo.
   Classe adicionada via JS (setupStackCards); sem JS ou com
   prefers-reduced-motion, os cards nascem visiveis normalmente. */
@media (prefers-reduced-motion:no-preference){
  .stack-card.stack-in-init{
    opacity:0;
    transform:translateY(26px);
    transition:opacity 0.6s ease-out, transform 0.6s ease-out, background-color 0.4s ease, border-color 0.4s ease;
  }
  .stack-card.stack-in-init.stack-in-visible{ opacity:1; transform:translateY(0); }
}
.stack-card{
  position:sticky;
  top:calc(var(--header-h) + 16px);
  margin-bottom:1.75rem;
  padding:clamp(1.75rem, 4vw, 2.75rem);
  background:var(--bg-surface);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  transition:background-color 0.4s ease, border-color 0.4s ease;
}
.stack-card:nth-child(1){ z-index:1; }
.stack-card:nth-child(2){ z-index:2; }
.stack-card:nth-child(3){ z-index:3; margin-bottom:0; }

.stack-tag{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-secondary);
  margin-bottom:0.9em;
  transition:color 0.4s ease;
}
.stack-title{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:1.65rem;
  color:var(--text-secondary);
  margin:0 0 0.6em;
  transition:color 0.4s ease, font-family 0.1s;
}
.stack-desc{
  font-family:var(--font-mono);
  font-size:0.92rem;
  color:var(--text-secondary);
  max-width:52ch;
  margin:0 0 1.3em;
  transition:color 0.4s ease;
}
.stack-stat{
  display:inline-block;
  background:var(--bg-surface-2);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:0.5em 1.1em;
  font-family:var(--font-mono);
  font-size:0.82rem;
  color:var(--text-secondary);
}
.stack-stat .hl-num{ font-weight:600; }

/* Card 1 "Edital": permanece cru/burocratico - so o border esquenta um pouco */
.stack-card[data-stack-card].translated:nth-of-type(1){ border-color:rgba(169,129,46,0.45); }

/* Card 2 "Traducao": estagio intermediario, titulo/descricao migram para
   tipografia legivel (Public Sans) e tom dourado, tag/stat seguem mono/cinza */
.stack-card:nth-child(2).translated{
  background:var(--bg-surface);
  border-color:var(--gold-500);
}
.stack-card:nth-child(2).translated .stack-title{
  font-family:var(--font-display);
  font-weight:600;
  font-variation-settings:'opsz' 20;
  color:var(--gold-300);
}
.stack-card:nth-child(2).translated .stack-desc{
  font-family:var(--font-body);
  color:var(--text-primary);
}

/* Card 3 "Proposta pronta": chega inteiro em Fraunces + dourado, cantos quase retos */
.stack-card:nth-child(3).translated{
  background:var(--bg-surface-2);
  border-color:var(--gold-300);
  border-radius:var(--radius-card-tight);
}
.stack-card:nth-child(3).translated .stack-tag{ color:var(--gold-300); }
.stack-card:nth-child(3).translated .stack-title{
  font-family:var(--font-display);
  font-weight:700;
  font-variation-settings:'opsz' 60;
  color:var(--gold-100);
}
.stack-card:nth-child(3).translated .stack-desc{
  font-family:var(--font-body);
  color:var(--text-primary);
}

@media (prefers-reduced-motion:reduce){
  .stack-card{ transition:none; }
  .stack-card *{ transition:none; }
}

@media (max-width:640px){
  .stack-card{ position:relative; top:auto; }
}

/* =========================================================
   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 ease-out, filter 0.7s ease-out;
  }
  .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; }
}

/* =========================================================
   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; }
}

/* =========================================================
   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:ease-out, ease-out, 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
   ========================================================= */
.depo-layout{ margin-top:2.5rem; display:flex; flex-direction:column; gap:1.5rem; }
.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-grid{ display:grid; gap:1.5rem; }
.depo-card{
  background:var(--bg-void);
  border:1px solid var(--hairline);
  border-radius:var(--radius-card);
  padding:1.75rem;
}
.depo-card p{ font-size:0.96rem; color:var(--text-primary); margin:0 0 1.4rem; line-height:1.65; }
.depo-featured footer,
.depo-card 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); }

@media (min-width:760px){
  .depo-grid{ grid-template-columns:repeat(3, 1fr); }
}

/* =========================================================
   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"]{
  background:var(--bg-surface-2);
  border:1px solid var(--hairline);
  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 input::placeholder{ color:var(--text-secondary); opacity:0.85; }
.form-field input:hover{ border-color:var(--gold-500); }
.form-field input: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);
}
.cta-final-watermark{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:min(70vw, 620px);
  aspect-ratio:1/1;
  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; }
}