/* ==========================================================================
   C DEV — Design System v2 (tema escuro "produto")
   Fonte: artefato "C DEV" (claude.ai/artifact/HvifZhDVohoQ1n69Ay2VTE) —
   project/tokens.json + project/components/bundle.css.

   ESCOPO: tudo aqui vive sob `.cd` (aplicado em <main>, no rodapé e no CTA
   flutuante). A navbar e o #hero foram feitos à mão pelo dono e continuam
   usando só tokens.css/base.css/navbar.css/word-scroll.css — por isso os
   tokens abaixo NÃO ficam em :root: vários nomes (--space-*, --radius-*,
   --font-mono) colidem com tokens.css com valores diferentes, e redefinir
   no :root mudaria a navbar/hero sem ninguém pedir.
   ========================================================================== */

.cd {
  /* ---- Cor (tema escuro) ---- */
  /* 2026-09-28: bg/superfícies em chumbo (pedido do dono) em vez do grafite
     #0A0A0A/#141416 do artefato — mesma escala, profundidade por luminosidade. */
  --bg: #0D0F12;
  --surface: #161922;
  --surface-raised: #1C202A;
  --surface-sunken: #13161C;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: #3A3E48;
  --ink: #F4F4F5;
  --ink-muted: #A1A1A8;
  --ink-faint: #8C8C94;
  --brand: #E8125C;
  --brand-strong: #D6104F;
  --brand-ink: #FF5A96;
  --brand-tint: #2A0B17;
  --brand-tint-line: #4A1328;
  --on-brand: #FFFFFF;
  --positive: #3DD68C;
  --attention: #F5B84A;
  --critical: #FF6B6B;

  /* ---- Tipografia ---- */
  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ---- Espaço (grid de 4px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 80px;

  /* ---- Raio ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* ---- Sombra ---- */
  --shadow-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 0 0 1px rgba(232, 18, 92, 0.45), 0 8px 24px rgba(232, 18, 92, 0.25);
  --ring: 0 0 0 2px rgba(232, 18, 92, 0.35);
  --shadow-pop: 0 16px 40px rgba(0, 0, 0, 0.5);

  /* ---- Movimento ---- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease: cubic-bezier(.2, .8, .2, 1);

  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* base.css aplica Poppins/cor a h1–h6 globalmente (necessário pro #hero);
   dentro do escopo, o título segue o DS. */
.cd h1, .cd h2, .cd h3, .cd h4 {
  font-family: var(--font-sans);
  color: var(--ink);
}

.cd a:focus-visible,
.cd summary:focus-visible,
.cd [tabindex]:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- Utilitários ---- */
.cd-eyebrow {
  display: inline-block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-ink);
}
.cd-muted { color: var(--ink-muted); }
.cd-mono { font-family: var(--font-mono); }

.cd-icon {
  flex: none;
  width: 20px;
  height: 20px;
}
.cd-icon svg { display: block; width: 100%; height: 100%; }

/* ---- Button ---- */
.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 40px;
  padding: 10px var(--space-4);
  border-radius: var(--radius-sm);
  font: 600 14px/1.25 var(--font-sans);
  text-align: center;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.cd-btn:active { transform: translateY(1px); }
.cd .cd-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.cd-btn--primary {
  background: var(--brand-strong);
  color: var(--on-brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.cd-btn--primary:hover { color: var(--on-brand); box-shadow: var(--shadow-glow); }
.cd-btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
.cd-btn--secondary:hover { color: var(--ink); background: var(--surface-raised); }
.cd-btn--ghost { background: transparent; color: var(--ink-muted); }
.cd-btn--ghost:hover { color: var(--ink); background: var(--surface); }
.cd-btn--lg { min-height: 48px; padding: 12px var(--space-5); font-size: 15px; }

/* ---- Badge ---- */
.cd-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-full);
  font: 500 12px/1 var(--font-sans);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-muted);
  white-space: nowrap;
}
.cd-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.cd-badge--brand { color: var(--brand-ink); background: var(--brand-tint); border-color: var(--brand-tint-line); }
.cd-badge--positive { color: var(--positive); }
.cd-badge--attention { color: var(--attention); }

/* ---- SectionHeader (numeração editorial 01, 02…) ---- */
.cd-section {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-4);
  align-items: start;
}
.cd-section__no {
  grid-row: 1 / span 3;
  font: 700 44px/1 var(--font-mono);
  letter-spacing: -.04em;
  /* --brand-ink a 60%: ~3.2:1 sobre --bg (mínimo pra texto grande); o
     --brand-tint-line do artefato sumia no chumbo. */
  color: rgba(255, 90, 150, 0.6);
}
.cd-section__title {
  margin: var(--space-2) 0 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.cd-section__lead {
  margin: var(--space-3) 0 0;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 26px;
  max-width: 60ch;
}
@media (min-width: 992px) {
  .cd-section__title { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -.025em; }
  .cd-section__lead { font-size: 18px; line-height: 28px; }
}

/* ---- MetricCard ---- */
.cd-metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  box-shadow: var(--shadow-edge);
}
.cd-metric__value {
  display: block;
  margin-top: var(--space-2);
  font: 700 24px/1.15 var(--font-sans);
  letter-spacing: -.02em;
  color: var(--ink);
}
.cd-metric__hint {
  display: block;
  margin-top: var(--space-1);
  font: 500 12px/18px var(--font-mono);
  color: var(--ink-faint);
}

/* ---- Note ---- */
.cd-note {
  background: var(--brand-tint);
  border: 1px solid var(--brand-tint-line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
}
.cd-note strong {
  display: block;
  margin-bottom: 2px;
  color: var(--ink);
  font-weight: 600;
}
.cd-note p { margin: 0; }

/* ---- OfferCard ---- */
.cd-offer {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-edge);
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.cd-offer:hover { border-color: var(--line-strong); background: var(--surface-raised); }
.cd-offer h3 {
  margin: var(--space-2) 0 var(--space-1);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.cd-offer p {
  margin: 0;
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-muted);
}
.cd-offer__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
  font: 500 12px/1.4 var(--font-mono);
  color: var(--ink-faint);
}

/* ---- Table ---- */
.cd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  line-height: 22px;
}
.cd-table th {
  text-align: left;
  font: 600 11px/16px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
}
.cd-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  color: var(--ink-muted);
  vertical-align: middle;
}
.cd-table tbody tr:last-child > * { border-bottom: 0; }

/* ---- Timeline (empilha no mobile, horizontal no desktop) ----
   src/scripts/motion/timeline.ts mede os nós, posiciona o trilho
   (.cd-timeline__rail), enche a linha (.cd-timeline__fill, scaleX/scaleY com
   scrub) e acende cada etapa com .is-lit. O estado padrão é TUDO ACESO: o
   apagado só existe sob .is-js, que o script põe quando vai animar. */
.cd-timeline-wrap { position: relative; }
.cd-timeline__rail {
  position: absolute;
  top: 4px;
  left: 3px;
  width: 1px;
  height: calc(100% - 4px);
  background: var(--line);
  pointer-events: none;
}
.cd-timeline__fill {
  position: absolute;
  inset: 0;
  background: var(--brand);
  box-shadow: 0 0 10px rgba(232, 18, 92, .55);
  transform-origin: 0 0;
  will-change: transform;
}
.cd-timeline { position: relative; list-style: none; margin: 0; padding: 0; display: grid; }
.cd-timeline li {
  position: relative;
  padding: 0 0 var(--space-5) var(--space-6);
  transition: opacity var(--motion-slow) var(--ease);
}
.cd-timeline li:last-child { padding-bottom: 0; }
.cd-timeline li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-tint), 0 0 12px rgba(232, 18, 92, .6);
  transition: background var(--motion-slow) var(--ease), box-shadow var(--motion-slow) var(--ease);
}
.cd-timeline .when { font: 500 12px/1 var(--font-mono); color: var(--brand-ink); transition: color var(--motion-slow) var(--ease); }
.cd-timeline h3 { margin: var(--space-2) 0 2px; font-size: 16px; line-height: 22px; font-weight: 600; }
.cd-timeline p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

.is-js .cd-timeline li { opacity: .45; }
.is-js .cd-timeline li.is-lit { opacity: 1; }
.is-js .cd-timeline li::before { background: var(--line-strong); box-shadow: none; }
.is-js .cd-timeline li.is-lit::before { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-tint), 0 0 12px rgba(232, 18, 92, .6); }
.is-js .cd-timeline .when { color: var(--ink-faint); }
.is-js .cd-timeline li.is-lit .when { color: var(--brand-ink); }

@media (min-width: 992px) {
  .cd-timeline__rail { top: 3px; left: 3px; width: calc(100% - 3px); height: 1px; }
  .cd-timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cd-timeline li { padding: var(--space-5) var(--space-4) 0 0; }
  .cd-timeline li:last-child { padding-bottom: 0; }
  .cd-timeline li::before { top: 0; }
}

/* ---- LeadForm ---- */
.cd-form {
  display: grid;
  gap: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-edge);
}
.cd-field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-muted); }
.cd-input {
  height: 44px;
  width: 100%;
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink);
  font: 400 15px var(--font-sans);
  transition: box-shadow var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
select.cd-input { appearance: none; padding-right: var(--space-8); background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%), linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 19px, calc(100% - 15px) 19px; background-size: 5px 5px; background-repeat: no-repeat; }
.cd-input::placeholder { color: var(--ink-faint); }
.cd-input:hover { border-color: #4A4F5B; }
.cd-input:focus { outline: none; border-color: rgba(232, 18, 92, 0.7); box-shadow: var(--ring); }
.cd-input[aria-invalid="true"] { border-color: var(--critical); }
.cd-form small { font-size: 12px; line-height: 18px; color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .cd *, .cd *::before { transition: none !important; }
}