@charset "utf-8";
:root{
  --bg:#f8fafc;
  --surface:#ffffff;
  --surface-raised:#ffffff;
  --border:#e2e8f0;
  --border-hover:#cbd5e1;
  --text-900:#0f172a;
  --text-700:#334155;
  --text-500:#64748b;
  --text-400:#94a3b8;
  --teal-600:#0d9488;
  --teal-700:#0b7d72;
  --teal-500:#14b8a6;
  --teal-100:#ccfbf1;
  --teal-50:#f0fdfa;
  --purple-600:#7c3aed;
  --purple-500:#8b5cf6;
  --purple-100:#ede9fe;
  --purple-50:#f5f3ff;
  --blue-600:#2563eb;
  --blue-100:#dbeafe;
  --blue-50:#eff6ff;
  --amber-500:#f59e0b;
  --amber-100:#fef3c7;
  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 4px 12px rgba(15,23,42,.08);
  --shadow-md:0 8px 24px rgba(15,23,42,.10);
  --shadow-lg:0 16px 40px rgba(15,23,42,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-700);
  font-family:'DM Sans',system-ui,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Space Grotesk',system-ui,sans-serif;
  color:var(--text-900);
  line-height:1.2;
  margin:0 0 .6em;
}
p{margin:0 0 1em}
a{color:inherit}
img,svg{max-width:100%}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--text-900); color:#fff;
  padding:.75rem 1.25rem; border-radius:0 0 8px 0; z-index:200; font-weight:600;
}
.skip-link:focus{left:0}

.container-ds{max-width:1120px; margin:0 auto; padding:0 24px}

/* Header */
header.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(248,250,252,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-ds{display:flex; align-items:center; justify-content:space-between; padding:16px 24px}
.brand-ds{display:flex; align-items:center; gap:10px; text-decoration:none}
.brand-mark{
  width:34px; height:34px; border-radius:9px; background:var(--text-900);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{width:18px; height:18px}
.brand-name{font-family:'Space Grotesk'; font-weight:700; font-size:1.05rem; color:var(--text-900)}
.brand-sub{display:block; font-size:.68rem; letter-spacing:.06em; color:var(--text-500); font-weight:500; text-transform:uppercase}

.nav-links{display:flex; align-items:center; gap:28px; list-style:none; margin:0; padding:0}
.nav-links a{
  text-decoration:none; color:var(--text-700); font-size:.92rem; font-weight:500;
}
.nav-links a:hover{color:var(--text-900)}
.nav-links.is-open{
  display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0;
  background:#fff; padding:20px 24px; border-bottom:1px solid var(--border);
}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; background:none; border:none; font-size:1.4rem; color:var(--text-900); cursor:pointer}

@media (max-width:900px){
  .nav-links{display:none}
  .nav-links.is-open{display:flex}
  .nav-toggle{display:block}
}

/* Buttons */
.btn-primary, .btn-secondary, .btn-ghost-ds{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Sans'; font-weight:700; font-size:.92rem;
  padding:12px 22px; border-radius:var(--radius-sm);
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn-primary{background:var(--teal-700); color:#fff; box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:#096b62; box-shadow:var(--shadow)}
.btn-primary:disabled{opacity:.6; cursor:not-allowed}
.btn-secondary{background:var(--surface); color:var(--text-900); border-color:var(--border)}
.btn-secondary:hover{border-color:var(--border-hover); background:var(--teal-50)}
.btn-ghost-ds{background:transparent; color:var(--text-700); border-color:transparent}
.btn-ghost-ds:hover{color:var(--text-900)}
.btn-ghost-ds.on-dark{color:#fff}
.btn-sm{padding:8px 16px; font-size:.82rem}

/* Section Hero (dark) */
.section-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, var(--text-900), #1e293b);
  color:#fff; padding:96px 24px 88px; text-align:center;
}
.section-hero .container-ds{position:relative; z-index:1}
.section-hero::before, .section-hero::after{
  content:''; position:absolute; z-index:0; border-radius:50%;
  filter:blur(90px); opacity:.32; pointer-events:none;
  animation:heroDrift 16s ease-in-out infinite alternate;
}
.section-hero::before{
  width:420px; height:420px; background:var(--teal-500); top:-140px; left:-100px;
}
.section-hero::after{
  width:380px; height:380px; background:var(--purple-600); bottom:-160px; right:-80px;
  animation-delay:-8s;
}
@keyframes heroDrift{
  from{ transform:translate(0,0) scale(1); }
  to{ transform:translate(50px,30px) scale(1.18); }
}
.section-hero-overline{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-500); background:rgba(20,184,166,.12);
  padding:6px 14px; border-radius:20px; margin-bottom:24px;
}
.section-hero h1{
  color:#fff; font-size:clamp(2.1rem, 4.2vw, 3.4rem); max-width:820px; margin:0 auto .28em;
}
.section-hero .lead{
  max-width:640px; margin:0 auto 2em; color:#cbd5e1; font-size:1.1rem;
}
.hero-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px}
.section-hero-meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:40px;
  max-width:760px; margin:0 auto; padding-top:40px; border-top:1px solid rgba(255,255,255,.12);
}
.section-hero-stat strong{display:block; font-family:'Space Grotesk'; font-size:1.5rem; color:#fff}
.section-hero-stat span{font-size:.82rem; color:var(--text-400)}

/* Hero entrance animation */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
.reveal{ opacity:0; animation:fadeUp .7s ease forwards; }
.reveal-1{ animation-delay:.05s }
.reveal-2{ animation-delay:.15s }
.reveal-3{ animation-delay:.28s }
.reveal-4{ animation-delay:.4s }
.reveal-5{ animation-delay:.55s }

.btn-primary.pulse-ring{ position:relative }
.btn-primary.pulse-ring::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  border:2px solid var(--teal-500); opacity:.6;
  animation:pulseRing 2.2s ease-out infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.55; }
  100%{ transform:scale(1.35); opacity:0; }
}

/* Reveal on scroll (KPIs, pilares, módulos) */
.reveal-on-scroll{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal-on-scroll.is-visible{ opacity:1; transform:translateY(0); }

/* Stagger delays (replaces inline style="transition-delay:...") */
.delay-50{ transition-delay:.05s }
.delay-150{ transition-delay:.15s }
.delay-180{ transition-delay:.18s }
.delay-200{ transition-delay:.2s }
.delay-250{ transition-delay:.25s }
.delay-300{ transition-delay:.3s }
.delay-350{ transition-delay:.35s }

@media (prefers-reduced-motion: reduce){
  .section-hero::before, .section-hero::after{ animation:none; }
  .reveal{ animation:none; opacity:1; transform:none; }
  .btn-primary.pulse-ring::after{ animation:none; display:none; }
  .reveal-on-scroll{ opacity:1; transform:none; transition:none; }
  .kpi-card:hover, .pillar-card:hover, .module-item:hover{ transform:none; }
  html{ scroll-behavior:auto; }
}

/* Generic sections */
.ds-section{padding:88px 24px}
.ds-section.alt{background:var(--surface)}
.section-head{max-width:640px; margin:0 auto 56px; text-align:center}
.hero-overline-ds{
  display:inline-block; font-size:.76rem; font-weight:700; letter-spacing:.08em;
  /* --teal-600 sobre fundo branco dá 3.74:1 (falha WCAG AA pra texto normal,
     que exige 4.5:1 — texto pequeno em negrito não conta como "large text").
     --teal-700 dá 5.01:1, passa com folga. Achado real do relatório de
     acessibilidade do PageSpeed Insights (16/08/2026). */
  text-transform:uppercase; color:var(--teal-700); margin-bottom:14px;
}
.hero-title-ds{font-size:clamp(1.6rem,3vw,2.2rem)}
.hero-desc-ds{color:var(--text-500); font-size:1.02rem}

/* Pills */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.76rem; font-weight:700; letter-spacing:.02em;
  padding:5px 12px; border-radius:20px;
}
.pill-teal{background:var(--teal-100); color:#0b6d63}
.pill-purple{background:var(--purple-100); color:#5b21b6}
.pill-amber{background:var(--amber-100); color:#92400e}
.pill-blue{background:var(--blue-100); color:#1d4ed8}

/* Grids */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.grid-2-cols{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start}
@media (max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2-cols{grid-template-columns:1fr}
}
@media (max-width:560px){ .grid-4{grid-template-columns:1fr} }

.kpi-card{
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.kpi-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-hover);
}
.kpi-card i{
  font-size:1.5rem; color:var(--teal-600); margin-bottom:14px; display:block;
  transition:transform .3s ease;
}
.kpi-card:hover i{transform:scale(1.15) rotate(-4deg)}
.kpi-card h3{font-size:1rem; margin-bottom:.4em}
.kpi-card p{color:var(--text-500); font-size:.9rem; margin:0}

/* Value pillars */
.pillar-card{
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow-sm); height:100%;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pillar-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:var(--teal-500);
}
.pillar-num{
  font-family:'Space Grotesk'; font-weight:700; font-size:.8rem; color:var(--teal-600);
  letter-spacing:.08em; margin-bottom:16px; display:block;
}
.pillar-card h3{font-size:1.15rem}
.pillar-card p{color:var(--text-500); font-size:.92rem; margin:0}

/* Modules */
.track-header{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.track-header h3{margin:0; font-size:1.15rem}
.track-header-link{display:inline-flex; align-items:center; gap:6px; color:var(--text-900); text-decoration:none}
.track-header-link i{font-size:.85rem; color:var(--teal-700); transition:transform .15s ease}
.track-header-link:hover{color:var(--teal-700); text-decoration:underline}
.track-header-link:hover i, .track-header-link:focus-visible i{transform:translateX(3px)}
.track-header-link:focus-visible{outline:2px solid var(--teal-600); outline-offset:3px; border-radius:4px}
.module-list{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.module-item{
  display:flex; align-items:flex-start; gap:14px;
  background:var(--surface-raised); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:16px 18px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.module-item:hover{
  transform:translateX(4px);
  box-shadow:var(--shadow-sm);
}
.module-item.exec:hover{border-color:var(--teal-500)}
.module-item.leg:hover{border-color:var(--purple-500)}
.module-item i{font-size:1.1rem; margin-top:2px; flex-shrink:0}
.module-item.exec i{color:var(--teal-600)}
.module-item.leg i{color:var(--purple-600)}
.module-item strong{display:block; font-size:.95rem; color:var(--text-900); margin-bottom:2px}
.module-item span{font-size:.85rem; color:var(--text-500)}

/* Quote */
.quote-block{
  max-width:760px; margin:0 auto; text-align:center;
}
.quote-block blockquote{
  font-family:'Space Grotesk'; font-size:clamp(1.3rem,2.4vw,1.8rem);
  color:var(--text-900); margin:0 0 20px; font-weight:600;
}
.quote-block cite{color:var(--text-500); font-size:.9rem; font-style:normal}

/* CTA final */
.cta-final{
  background:var(--text-900); color:#fff; border-radius:24px;
  padding:64px 40px; text-align:center;
}
.cta-final h2{color:#fff}
.cta-final p{color:#cbd5e1; max-width:520px; margin:0 auto 8px}

/* Contact form */
.contato-form{max-width:440px; margin:32px auto 0; text-align:left; display:grid; gap:14px}
.hp-field{position:absolute; left:-9999px; top:-9999px}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){ .form-row{grid-template-columns:1fr} }
.input-ds{
  width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:'DM Sans'; font-size:.92rem; background:#fff; color:var(--text-900);
}
.input-ds:focus{ outline:2px solid var(--teal-500); outline-offset:1px; border-color:var(--teal-500) }
textarea.input-ds{resize:vertical; min-height:88px}
.contato-form .btn-primary{justify-content:center}
.form-status{margin:0; font-size:.85rem; color:#cbd5e1; min-height:1.2em}
.form-status.is-error{color:#fca5a5}
.form-status.is-ok{color:#5eead4}

/* Legal note */
.legal-note-ds{
  background:var(--blue-50); border:1px solid var(--blue-100); border-radius:var(--radius-sm);
  padding:16px 20px; font-size:.84rem; color:var(--text-700); display:flex; gap:10px; align-items:flex-start;
}
.legal-note-ds i{color:var(--blue-600); margin-top:2px}
.legal-note-footer{margin-bottom:24px}

/* Footer */
footer{padding:56px 24px 40px; border-top:1px solid var(--border)}
.footer-grid{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; margin-bottom:32px}
.footer-brand p{color:var(--text-500); font-size:.86rem; max-width:280px}
.footer-brand-link{margin-bottom:12px; display:inline-flex}
.footer-cols{display:flex; gap:56px; flex-wrap:wrap}
.footer-col h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-500); margin-bottom:14px}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer-col a{text-decoration:none; color:var(--text-700); font-size:.88rem}
.footer-col a:hover{color:var(--text-900)}
/* --text-400 sobre --bg dá 2.45:1 (falha WCAG AA, precisa de 4.5:1) —
   --text-500 dá 4.55:1, passa. Mesmo achado do relatório de acessibilidade
   do PageSpeed Insights (16/08/2026). */
.footer-bottom{font-size:.78rem; color:var(--text-500)}

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