/* La manuscrita de las anotaciones del hero. El @import tiene que ir
   antes de cualquier otra regla del archivo. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&display=swap');

/* ============================================================
   Dashcrab · Landing Creators
   Paleta y espiritu editorial de DESIGN (2).md (Agence Foudre):
   canvas crema, display magenta, cuerpo verde bosque, cero sombras.
   Estructura, fuentes, nav, botones y footer heredados de landingv3.

   Nota sobre densidad: DESIGN (2) pide evitar layouts cargados de
   tarjetas. Esta pagina necesita mostrar metricas y componentes de
   producto, asi que la regla se aplica donde manda: aperturas de
   seccion con display gigante y mucho aire, y las tarjetas planas,
   sin sombra, como bloques de contenido y no como grillas decorativas.
   ============================================================ */

:root {
  /* Colors — DESIGN (2).md */
  --color-lipstick-magenta: #db3c8a;
  --color-forest-ink: #00522d;
  --color-blush-cream: #fce5df;
  --color-warm-chalk: #fff8f6;
  --color-charcoal-black: #000000;
  --color-lilac-mist: #d1cfe4;
  --color-bubblegum: #f29ebd;
  --color-cotton-pink: #e878b2;

  /* Roles */
  --canvas: var(--color-warm-chalk);
  --ink: var(--color-forest-ink);
  --ink-soft: color-mix(in srgb, var(--color-forest-ink) 62%, var(--color-warm-chalk));
  --accent: var(--color-lipstick-magenta);
  --accent-echo: var(--color-bubblegum);
  --accent-wash: var(--color-blush-cream);
  --hairline: color-mix(in srgb, var(--color-forest-ink) 18%, transparent);

  /* Typography — heredado de landingv3 */
  --font-cond: 'Anton', 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing — base 4, escala de DESIGN (2) */
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-20: 20px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-120: 120px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 120px;

  /* Radius — cards de DESIGN (2), botones de landingv3 */
  --radius-cards: 20px;
  --radius-elevated: 25px;
  --radius-tags: 9999px;
  --radius-buttons: 8px;
  --radius-nav-pill: 48px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* ---------- Display ----------
   DESIGN (2) pide 0.70 de interlineado. Con Anton y castellano las
   tildes de las mayusculas chocan con la linea de arriba, asi que se
   mantiene el 0.95 que ya se valido en landingv3. */
.display-xl, .display, .display-sm {
  font-family: var(--font-cond);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0;
}
/* Misma formula que site.css (ver "Hero a prueba de fold" alla), con el
   techo de esta pagina en 128px: el coeficiente vh acota por altura,
   --h1-fit por ancho de columna para que ninguna linea del titulo envuelva.
   Si se redefine font-size a secas aca, el techo por columna deja de
   aplicarse.
   10.4vh y no 11vh como el resto del sitio: el titular de creator tiene
   cinco lineas en ingles ("stop counting / views. / start / understanding /
   them.") y a 11vh el CTA se iba abajo del fold en un notebook de 720px. */
.display-xl {
  --h1-cap-vp: clamp(52px, min(9vw, 10.4vh), 128px);
  --h1-cap-col: calc(100cqi * var(--h1-fit, 1));
  font-size: max(38px, min(var(--h1-cap-vp), var(--h1-cap-col)));
}
.display    { font-size: clamp(40px, 6.4vw, 88px); }
.display-sm { font-size: clamp(30px, 3.6vw, 52px); }

/* Eco desvaido: la misma frase, dicha mas bajo */
.echo { color: var(--accent-echo); }
.echo-faint { color: var(--accent-wash); }
.ink-display { color: var(--ink); }

.heading {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.heading-sm {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lead {
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 60ch;
}
.body { font-size: 16px; line-height: 1.45; margin: 0; max-width: 60ch; }
.body-sm { font-size: 14px; line-height: 1.4; margin: 0; }
.soft { color: var(--ink-soft); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--spacing-20); }
.section { padding: var(--section-gap) 0; }
.section-head { margin-bottom: var(--spacing-60); }
.section-head .mono { color: var(--accent); margin-bottom: var(--spacing-20); }
.section-head .lead { margin-top: var(--spacing-30); color: var(--ink); }

/* ---------- Botones (landingv3) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 16px 24px;
  border-radius: var(--radius-buttons);
  border: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn-filled { background: var(--ink); color: var(--color-warm-chalk); }
.btn-filled:hover { background: var(--accent); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  border-radius: 4px;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-invert { background: var(--color-warm-chalk); color: var(--ink); }
.btn-invert:hover { color: var(--accent); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Tags ---------- */
.tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent-wash);
  color: var(--ink);
  border-radius: var(--radius-tags);
  padding: 7px 15px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.tag-accent { background: var(--accent); color: var(--color-warm-chalk); }
.tag-outline { background: transparent; border: 1px solid var(--hairline); }

/* ---------- Cards ---------- */
.card {
  background: #ffffff;
  border-radius: var(--radius-cards);
  padding: var(--spacing-30);
}
.card-wash { background: var(--accent-wash); }
.card-ink { background: var(--ink); color: var(--color-warm-chalk); }
.card-ink .soft { color: color-mix(in srgb, var(--color-warm-chalk) 68%, var(--ink)); }
.card-ink .tag { background: color-mix(in srgb, var(--color-warm-chalk) 18%, transparent); color: var(--color-warm-chalk); }
.card-elevated { background: var(--color-cotton-pink); color: var(--color-warm-chalk); border-radius: var(--radius-elevated); }

/* ---------- Placeholders ---------- */
.ph {
  position: relative;
  background: var(--accent-wash);
  border-radius: var(--radius-cards);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: var(--spacing-30);
  overflow: hidden;
}
.ph::after {
  content: '';
  position: absolute; inset: 10px;
  border: 1.5px dashed var(--color-bubblegum);
  border-radius: calc(var(--radius-cards) - 10px);
  pointer-events: none;
}
.ph .ph-kind { color: var(--accent); }
.ph .ph-desc { color: var(--ink); max-width: 34ch; font-size: 14px; line-height: 1.4; }
.ph .ph-dim { color: var(--ink-soft); }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-9x16 { aspect-ratio: 9 / 16; }
.ph-1x1  { aspect-ratio: 1 / 1; }

/* ============================================================
   NAV (landingv3)
   ============================================================ */
.topbar { height: 8rem; display: flex; align-items: center; background: var(--canvas); }
.topbar-inner {
  width: 100%; max-width: var(--page-max-width); margin: 0 auto;
  padding: 0 var(--spacing-20);
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-20);
}
.brand {
  font-family: var(--font-cond);
  font-size: 26px; text-transform: uppercase;
  letter-spacing: -0.03em; line-height: 1;
  color: var(--ink);
}
.brand em { font-style: normal; color: var(--accent); }
.nav-pill {
  background: #ffffff;
  border-radius: var(--radius-nav-pill);
  padding: 14px 28px;
  display: flex; align-items: center; gap: var(--spacing-20);
}
.nav-pill a { font-size: 16px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
.nav-pill a:hover { color: var(--accent); }
.nav-actions { display: flex; align-items: center; gap: 16px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: var(--spacing-60) 0 var(--spacing-120); }
.hero .mono { color: var(--accent); margin-bottom: var(--spacing-20); }
.hero .lead { margin-top: var(--spacing-30); }
.hero .btn-row { margin-top: var(--spacing-60); }

.strip {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--spacing-20) 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px var(--spacing-30);
}
.strip .mono { color: var(--ink-soft); }
.strip .strip-item { color: var(--ink); }

/* ---------- Grids ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--spacing-20); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--spacing-20); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--spacing-20); }
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--spacing-60); align-items: center; }
.split-wide { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); align-items: start; }

/* ============================================================
   TARJETA DE CONTENIDO (anatomia del producto)
   ============================================================ */
.content-card {
  max-width: 360px;
  width: 100%;
  justify-self: center;
  background: #ffffff;
  border-radius: var(--radius-cards);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.cc-media {
  aspect-ratio: 4 / 5;
  background: var(--accent-wash);
  position: relative;
  display: flex; align-items: flex-end; padding: 14px;
}
.cc-media::after {
  content: '';
  position: absolute; inset: 10px;
  border: 1.5px dashed var(--color-bubblegum);
  border-radius: 12px;
}
.cc-badges { display: flex; gap: 6px; position: relative; z-index: 1; }
.cc-badge {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  background: var(--ink); color: var(--color-warm-chalk);
  padding: 4px 9px; border-radius: var(--radius-tags);
}
.cc-badge-accent { background: var(--accent); }
.cc-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.cc-title { font-size: 15px; font-weight: 500; line-height: 1.3; margin: 0; }
.cc-hero-kpi { display: flex; align-items: baseline; gap: 8px; }
.cc-hero-kpi .v { font-family: var(--font-cond); font-size: 40px; line-height: .95; color: var(--accent); letter-spacing: -0.03em; }
.cc-hero-kpi .l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--ink-soft); }
.cc-kpis { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.cc-kpi { display: flex; flex-direction: column; gap: 2px; }
.cc-kpi .v { font-size: 15px; font-weight: 500; }
.cc-kpi .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.cc-signal {
  background: var(--accent-wash);
  border-radius: 14px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-signal .sig-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-signal .sig-name { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--accent); }
.cc-signal .sig-copy { font-size: 13px; line-height: 1.35; }
.cc-signal .sig-copy b { font-weight: 500; }

/* Mini visualizaciones */
.spark { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.spark i { flex: 1; background: var(--color-bubblegum); border-radius: 2px 2px 0 0; }
.spark i.peak { background: var(--accent); }
.navbars { display: grid; gap: 6px; }
.navbar-row { display: grid; grid-template-columns: 62px 1fr 38px; align-items: center; gap: 8px; }
.navbar-row .nb-l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.navbar-row .nb-track { display: block; height: 7px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 9999px; overflow: hidden; }
.navbar-row .nb-fill { display: block; height: 100%; background: var(--accent); border-radius: 9999px; }
.navbar-row .nb-fill.warn { background: var(--color-bubblegum); }
.navbar-row .nb-fill.dim { background: var(--color-lilac-mist); }
.navbar-row .nb-v { font-family: var(--font-mono); font-size: 11px; text-align: right; }

/* Curva de retencion */
.curve { width: 100%; height: 64px; display: block; }

/* ============================================================
   ANALISIS IA
   ============================================================ */
.ai-panel {
  background: var(--ink);
  color: var(--color-warm-chalk);
  border-radius: var(--radius-elevated);
  padding: var(--spacing-60) var(--spacing-30);
}
.ai-panel .display-sm { color: var(--color-warm-chalk); }
.ai-panel .mono { color: var(--color-bubblegum); }
.ai-block {
  background: color-mix(in srgb, var(--color-warm-chalk) 8%, transparent);
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}
.ai-block .ai-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--color-bubblegum); }
.ai-block .ai-value { font-family: var(--font-cond); font-size: 34px; line-height: .95; letter-spacing: -0.03em; color: var(--color-warm-chalk); }
.ai-block p { margin: 0; font-size: 14px; line-height: 1.45; color: color-mix(in srgb, var(--color-warm-chalk) 74%, var(--ink)); }

.moments { display: grid; gap: 8px; }
.moment { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: start; padding: 12px 0; border-top: 1px solid color-mix(in srgb, var(--color-warm-chalk) 16%, transparent); }
.moment .t { font-family: var(--font-mono); font-size: 12px; color: var(--color-bubblegum); padding-top: 2px; }
.moment .w { font-size: 14px; line-height: 1.4; }
.moment .sig { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.sig-pos { background: var(--color-bubblegum); }
.sig-neg { background: var(--accent); }
.sig-neu { background: var(--color-lilac-mist); }

.recos { display: grid; gap: 12px; }
.reco { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; background: color-mix(in srgb, var(--color-warm-chalk) 8%, transparent); border-radius: 14px; padding: 16px 18px; }
.reco .r-txt { font-size: 14px; line-height: 1.4; }
.reco .r-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.chip {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-tags);
  background: color-mix(in srgb, var(--color-warm-chalk) 16%, transparent);
  color: var(--color-warm-chalk); white-space: nowrap;
}
.chip-hi { background: var(--accent); }

/* Clasificacion */
.classif { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--hairline); border-radius: var(--radius-cards); overflow: hidden; }
.classif div { background: var(--canvas); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.classif .k { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--accent); }
.classif .v { font-size: 15px; font-weight: 500; }

/* ============================================================
   TABLA DE METRICAS
   ============================================================ */
.metrics-table { width: 100%; border-collapse: collapse; }
.metrics-table th, .metrics-table td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.metrics-table th {
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase;
  color: var(--accent); font-weight: 400; white-space: nowrap;
}
.metrics-table td { font-size: 14px; line-height: 1.4; }
.metrics-table td:first-child { font-weight: 500; white-space: nowrap; }
.metrics-table .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; }
.table-scroll { overflow-x: auto; }

/* ============================================================
   AUDIENCIA
   ============================================================ */
.heat { display: grid; grid-template-columns: 34px repeat(7, 1fr); gap: 3px; }
.heat .hd { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--ink-soft); text-align: center; padding-bottom: 4px; }
.heat .rowlabel { font-family: var(--font-mono); font-size: 9px; color: var(--ink-soft); display: flex; align-items: center; }
.heat i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--color-blush-cream); }
.heat i[data-v="1"] { background: color-mix(in srgb, var(--accent) 22%, var(--canvas)); }
.heat i[data-v="2"] { background: color-mix(in srgb, var(--accent) 46%, var(--canvas)); }
.heat i[data-v="3"] { background: color-mix(in srgb, var(--accent) 72%, var(--canvas)); }
.heat i[data-v="4"] { background: var(--accent); }

.demo-rows { display: grid; gap: 10px; }
.demo-row { display: grid; grid-template-columns: 54px 1fr 46px; gap: 10px; align-items: center; }
.demo-row .d-l { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.demo-row .d-track { display: block; height: 10px; background: var(--accent-wash); border-radius: 9999px; overflow: hidden; }
.demo-row .d-fill { display: block; height: 100%; background: var(--accent); border-radius: 9999px; }
.demo-row .d-v { font-family: var(--font-mono); font-size: 11px; text-align: right; }

/* ============================================================
   COMPASS
   ============================================================ */
.insight { display: grid; gap: 14px; }
.insight-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hairline); }
.insight-row .i-k { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--accent); }
.insight-row .i-v { font-size: 15px; line-height: 1.45; }

/* ============================================================
   PRECIOS
   ============================================================ */
.price-card { display: flex; flex-direction: column; gap: 16px; min-height: 460px; }
.price-card .price { font-family: var(--font-cond); font-size: 52px; line-height: .95; letter-spacing: -0.03em; color: var(--accent); }
.price-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.price-card li { font-size: 14px; line-height: 1.4; padding-left: 18px; position: relative; }
.price-card li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--color-bubblegum); }
.price-card .btn { margin-top: auto; justify-content: center; }
.price-card.featured { background: var(--ink); color: var(--color-warm-chalk); border-radius: var(--radius-elevated); }
.price-card.featured .price { color: var(--color-bubblegum); }
.price-card.featured li::before { background: var(--color-bubblegum); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { border-top: 1px solid var(--hairline); }
.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: var(--spacing-20) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-20);
  font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-family: var(--font-mono); font-size: 20px; color: var(--accent); flex: none; }
.faq-item[open] summary::after { content: '–'; }
.faq-item .answer { padding: 0 0 var(--spacing-20); color: var(--ink-soft); max-width: 72ch; }

/* ============================================================
   CTA FINAL + FOOTER (landingv3)
   ============================================================ */
.final { padding: var(--spacing-120) 0; text-align: left; }
.final .lead { margin-top: var(--spacing-30); }
.final .btn-row { margin-top: var(--spacing-60); }

.footer { background: var(--ink); color: color-mix(in srgb, var(--color-warm-chalk) 70%, var(--ink)); padding: var(--spacing-60) 0 var(--spacing-30); }
.footer a { color: inherit; }
.footer a:hover { color: var(--color-bubblegum); }
.footer .brand { color: var(--color-warm-chalk); }
.footer .brand em { color: var(--color-bubblegum); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--spacing-30); }
.footer-col h4 {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: -0.02em; color: var(--color-warm-chalk);
  margin: 0 0 16px; font-weight: 400;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col li { font-size: 14px; }
.footer-bottom {
  margin-top: var(--spacing-60); padding-top: var(--spacing-20);
  border-top: 1px solid color-mix(in srgb, var(--color-warm-chalk) 20%, transparent);
  display: flex; justify-content: space-between; gap: var(--spacing-20); flex-wrap: wrap;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-gap: 90px; }
  .split, .split-wide { grid-template-columns: minmax(0,1fr); gap: var(--spacing-30); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .classif { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nav-pill { display: none; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  :root { --section-gap: 64px; }
  .topbar { height: 5.5rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); }
  .classif { grid-template-columns: minmax(0,1fr); }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .insight-row { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .reco { grid-template-columns: minmax(0,1fr); }
  .reco .r-meta { justify-content: flex-start; }
  .ai-panel { padding: var(--spacing-30) var(--spacing-20); }
  .nav-actions .btn-ghost { display: none; }
  .heat { grid-template-columns: 26px repeat(7, 1fr); }
}

/* ============================================================
   FOTOGRAFÍA UGC — frames reales de la creadora de ejemplo.
   El frame se genera limpio (sin texto ni UI) y toda la capa de
   anotación (badges, banda de señal, timestamps) se dibuja en HTML,
   igual que el resto de las reconstrucciones de producto.
   ============================================================ */

/* --- Hero: el frame arranca a la altura del titular ---
   El frame vive en .hero-media, absoluto contra el wrap del hero, para
   subirlo al nivel del h1. La segunda columna de .hero-grid queda vacía
   pero reserva el ancho, así el lead y los bullets no se meten debajo.

   .hero-media tiene que ser hijo del .wrap, NO de .hero-grid: los hijos
   directos de un .reveal-group arrancan con transform: translateY(24px), y
   un transform convierte a .hero-grid en bloque contenedor. Adentro del
   grid, el top: 40px se medía desde abajo del titulo y el frame terminaba
   ~430px mas abajo, fuera de la primera pantalla. */
.hero .wrap { position: relative; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: var(--spacing-60);
  align-items: start;
}
/* El titulo cuelga del wrap y ocupa el ancho entero, pero el frame y sus
   notas viven arriba a la derecha: 300px de frame + 20px de offset + 188px
   que las notas sobresalen a su izquierda + aire. Sin este tope, una linea
   larga (en ingles "understanding them.") se mete abajo de la nota "the
   hook is strong because...". El techo por columna de site.css se mide
   contra este ancho, no contra el del wrap.
   Solo de 1025px para arriba: apilado el frame vuelve al flujo y las notas
   se ocultan, no hay nada a la derecha que esquivar (y el calc daria
   negativo en un telefono, dejando el titulo en una tira de un caracter). */
@media (min-width: 1025px) {
  .hero .display-xl { max-width: calc(100% - 540px); }
}
.hero-media {
  position: absolute;
  top: 40px; /* alineado con el arranque del h1, debajo del eyebrow */
  right: var(--spacing-20);
  width: 300px;
  z-index: 1;
}
/* Es hijo directo del .reveal-group, pero queda afuera del reveal: la
   imagen del hero entrando con un translateY se lee como un salto, no como
   una aparicion. El resto del hero (eyebrow, titulo, copy) si revela. */
html.js .hero .reveal-group > .hero-media {
  opacity: 1;
  transform: none;
  transition: none;
}
.hero-frame {
  margin: 0;
  position: relative;
  width: 100%;
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--accent-wash);
}
.hero-frame img {
  display: block;
  width: 100%;
  height: auto; /* anula el hint del atributo height; manda el aspect-ratio */
  aspect-ratio: 9 / 16;
  object-fit: cover;
}
.hero-frame .hf-badges {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 6px;
}
.hero-frame .hf-signal {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  background: color-mix(in srgb, var(--color-charcoal-black) 58%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid; gap: 4px;
}
.hero-frame .hf-signal .sig-name {
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-bubblegum);
}
.hero-frame .hf-signal .sig-copy {
  margin: 0; font-size: 12.5px; line-height: 1.35;
  color: var(--color-warm-chalk);
}
.hero-frame .hf-signal .sig-copy b { font-weight: 600; }

/* --- Anotaciones manuscritas del hero (máximo 3) --- */
.hand-note {
  position: absolute;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--accent);
}
.hand-note svg {
  display: block;
  width: 34px;
  height: 20px;
  overflow: visible;
}
.hand-note svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Por qué el hook funciona: a la izquierda del frame, apuntando a la cara */
.hn-hook {
  top: 34px;
  right: calc(100% + 12px);
  width: 168px;
  text-align: right;
  transform: rotate(-2.5deg);
  display: flex;
  align-items: center;
  gap: 6px;
}
/* La retención: a la izquierda del frame, abajo, apuntando al gesto.
   Va por debajo de la línea del echo del h1 para no cruzarse nunca. */
.hn-cut {
  top: 424px;
  right: calc(100% + 12px);
  width: 176px;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 6px;
  transform: rotate(-2deg);
}
.hn-cut svg { transform: rotate(14deg); }
/* Por qué se van: debajo del frame, apuntando a la banda de señal */
.hn-skip {
  top: calc(100% + 8px);
  left: 16px;
  width: 240px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transform: rotate(-1.5deg);
}
.hn-skip svg { margin-top: -4px; }

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-30); }
  /* Apilado: el frame vuelve al flujo y las notas no tienen lugar */
  .hero-media { position: relative; top: 0; right: auto; width: 260px; }
  .hand-note { display: none; }
}
@media (max-width: 720px) {
  /* El wrap del hero es flex en mobile; .hero-copy replica esa columna para
     que el order de btn-row (4) siga aplicando.
     align-items tiene que quedar en stretch: con flex-start los hijos se
     miden fit-content, y .hero-grid (una sola columna minmax(0,1fr)) mide 0
     ahi adentro. El lead terminaba en una tira de 80px de ancho y 485px de
     alto, con los CTAs muy abajo del fold. */
  .hero-copy { display: flex; flex-direction: column; align-items: stretch; }
}

/* --- Tarjeta del feed: la cover reemplaza al placeholder punteado --- */
.cc-media.has-img::after { display: none; }
.cc-media .cc-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* --- Feed público: el media kit reconstruido en HTML, con las fotos
   de la creadora de ejemplo como avatar y covers --- */
.pubfeed {
  background: #ffffff;
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.pf-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--accent-wash);
}
.pf-head { display: flex; gap: 14px; align-items: center; padding: 20px 20px 0; }
.pf-avatar {
  width: 56px; height: 56px; flex: none;
  border-radius: 50%;
  object-fit: cover; object-position: 50% 16%;
  border: 2px solid var(--accent);
}
.pf-name { margin: 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.pf-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--hairline);
}
.pf-stats > div { display: flex; flex-direction: column; gap: 3px; }
.pf-stats .v { font-family: var(--font-cond); font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.pf-stats .l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.pf-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 12px 20px;
}
.pf-row + .pf-row { border-top: 1px solid var(--hairline); }
.pf-media { position: relative; display: block; width: 48px; }
.pf-thumb { display: block; width: 48px; height: 64px; object-fit: cover; border-radius: 8px; }
/* Logo de plataforma como sticker en la esquina del thumb */
.pf-plogo {
  position: absolute; top: -5px; left: -5px;
  width: 20px; height: 20px;
  padding: 3px;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid var(--hairline);
  object-fit: contain;
}
.pf-title { margin: 6px 0 0; font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--ink); }
.pf-metrics { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.pf-m { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.pf-m b { font-size: 15px; font-weight: 600; color: var(--ink); }
.pf-m span { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
@media (max-width: 720px) {
  .pf-metrics { gap: 12px; }
  .pf-row { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .pf-media, .pf-thumb { width: 40px; }
  .pf-thumb { height: 54px; }
  .pf-plogo { width: 18px; height: 18px; top: -4px; left: -4px; }
}

/* --- El video anotado por la IA: teléfono TikTok + callouts ---
   Las sombras de texto acá son funcionales: UI blanca sobre foto,
   como en la banda de señal del hero. */
.af {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
  margin-top: 24px;
}
.af-col {
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}
.af-note { position: relative; }
.af-note p { font-size: 13.5px; }
/* Conector punteado hacia el teléfono */
.af-col-l .af-note::after,
.af-col-r .af-note::before {
  content: '';
  position: absolute; top: 50%; width: 26px;
  border-top: 1.5px dashed color-mix(in srgb, var(--color-bubblegum) 70%, transparent);
}
.af-col-l .af-note::after { right: -30px; }
.af-col-r .af-note::before { left: -30px; }
.af-chips { display: flex; gap: 6px; flex-wrap: wrap; }

.af-phone {
  position: relative;
  border-radius: 34px;
  overflow: hidden;
  border: 6px solid #101010;
  background: #101010;
}
.af-video {
  display: block; width: 100%;
  height: auto; aspect-ratio: 9 / 16;
  object-fit: cover;
}
.af-tabs {
  position: absolute; top: 14px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 16px;
  font-size: 12.5px; color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.af-tabs .on { color: #ffffff; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.af-screen-text {
  position: absolute; top: 13%; left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  background: #ffffff; color: #101010;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: 6px;
  white-space: nowrap;
}
.af-rail {
  position: absolute; right: 10px; bottom: 92px;
  display: grid; gap: 14px; justify-items: center;
}
.af-rail .av { width: 36px; height: 36px; border-radius: 50%; border: 2px solid #ffffff; object-fit: cover; object-position: 50% 16%; }
.af-rail .ri { display: grid; justify-items: center; gap: 2px; }
.af-rail svg { width: 26px; height: 26px; fill: #ffffff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.35)); }
.af-rail .n { font-size: 10.5px; font-weight: 600; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); }
.af-cap {
  position: absolute; left: 12px; right: 60px; bottom: 14px;
  color: #ffffff; font-size: 11.5px; line-height: 1.4;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.af-cap b { display: block; font-size: 12.5px; margin-bottom: 2px; }
.af-cap .au { display: block; margin-top: 4px; opacity: 0.85; }

@media (max-width: 1024px) {
  .af { grid-template-columns: minmax(0, 1fr); }
  .af-phone { width: min(290px, 100%); margin: 0 auto; order: -1; }
  .af-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .af-col-l .af-note::after, .af-col-r .af-note::before { display: none; }
}
@media (max-width: 720px) {
  .af-col { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   AUDIENCIA — componentes del Resumen y del drill-down
   La pagina real se ordena en cinco preguntas mas una tabla
   comparativa; estos primitivos replican esos bloques.
   ============================================================ */

/* Par de numerones: comunidad y personas alcanzadas */
.aud-hero { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--spacing-20); }
.aud-hero .ah {
  background: #ffffff; border-radius: var(--radius-cards);
  padding: var(--spacing-30); display: flex; flex-direction: column; gap: 8px;
}
.aud-hero .ah-eyebrow { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; color: var(--accent); }
.aud-hero .ah-v {
  font-family: var(--font-cond); font-size: clamp(44px, 5.4vw, 72px);
  line-height: .95; letter-spacing: -0.03em; color: var(--ink);
}
.aud-hero .ah-sub { font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.aud-hero .ah-delta {
  align-self: flex-start; font-family: var(--font-mono); font-size: 11px;
  background: var(--accent-wash); color: var(--ink);
  padding: 4px 12px; border-radius: var(--radius-tags);
}

/* Pregunta del resumen */
.q-block { display: flex; flex-direction: column; gap: 18px; }
.q-block .q-title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
.q-block .q-note { font-size: 13px; line-height: 1.4; color: var(--ink-soft); margin: 0; }

/* Barra partida: comunidad vs gente nueva */
.splitbar { display: flex; height: 40px; border-radius: var(--radius-tags); overflow: hidden; }
.splitbar span { display: block; height: 100%; }
.splitbar .s-a { background: var(--ink); }
.splitbar .s-b { background: var(--accent); }
.splitbar-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.splitbar-legend b { font-weight: 500; }
.leg { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.leg i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: none; }
.leg .k-ink { background: var(--ink); }
.leg .k-accent { background: var(--accent); }
.leg .k-echo { background: var(--color-bubblegum); }
.leg .k-lilac { background: var(--color-lilac-mist); }

/* Barras apiladas por tipo de contenido */
.stack-rows { display: grid; gap: 14px; }
.stack-row { display: grid; gap: 6px; }
.stack-row .st-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.stack-row .st-head .st-l { font-weight: 500; }
.stack-row .st-head .st-v { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.stack-row .st-track { display: flex; height: 12px; border-radius: var(--radius-tags); overflow: hidden; background: var(--accent-wash); }
.stack-row .st-track span { display: block; height: 100%; }
.stack-row .st-a { background: var(--ink); }
.stack-row .st-b { background: var(--accent); }

/* Donut de genero, plano y sin sombra */
.donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.donut {
  --a: 68; /* mujeres % */
  --b: 29; /* hombres % */
  width: 132px; height: 132px; flex: none;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) 0 calc(var(--a) * 1%),
    var(--ink) 0 calc((var(--a) + var(--b)) * 1%),
    var(--color-lilac-mist) 0 100%
  );
  position: relative;
}
.donut::after {
  content: '';
  position: absolute; inset: 30px;
  background: var(--canvas);
  border-radius: 50%;
}
.donut-center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.donut-center .dc-v { font-family: var(--font-cond); font-size: 26px; line-height: 1; color: var(--ink); }
.donut-center .dc-l { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; color: var(--ink-soft); }
.card .donut::after { background: #ffffff; }

/* Trio de crecimiento: nuevos / bajas / neto */
.growth-trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--hairline); border-radius: var(--radius-cards); overflow: hidden; }
.growth-trio div { background: #ffffff; padding: 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.growth-trio .g-l { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--ink-soft); }
.growth-trio .g-v { font-family: var(--font-cond); font-size: 34px; line-height: .95; letter-spacing: -0.03em; color: var(--ink); }
.growth-trio .g-v.up { color: var(--accent); }
.growth-trio .g-v.down { color: var(--color-lilac-mist); }

/* Listado de plataforma en profundidad */
.plat-card { display: flex; flex-direction: column; gap: 16px; }
.plat-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plat-card li { font-size: 13px; line-height: 1.4; padding-left: 16px; position: relative; color: var(--ink); }
.plat-card li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-bubblegum); }

@media (max-width: 720px) {
  .aud-hero { grid-template-columns: minmax(0,1fr); }
  .growth-trio { grid-template-columns: minmax(0,1fr); }
}

/* Apertura de seccion con el titulo a todo el ancho: el parrafo baja a la
   columna izquierda de la grilla, asi la pieza de la derecha arranca a la
   altura del texto y no hereda el margen del section-head. */
.head-title { margin-bottom: var(--spacing-30); }
.head-title .mono { color: var(--accent); margin-bottom: var(--spacing-20); }

/* ============================================================
   REVEAL AL SCROLL — portado de landingv3
   Un IntersectionObserver (script inline al final del HTML) agrega
   .is-visible una sola vez por elemento. Todo el estado oculto cuelga
   de html.js: sin JavaScript la pagina se ve completa y quieta.
   ============================================================ */
html.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Stagger por hijos directos, sin JS de indices. */
html.js .reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
html.js .reveal-group.is-visible > * { opacity: 1; transform: none; }
html.js .reveal-group.is-visible > *:nth-child(2) { transition-delay: .07s; }
html.js .reveal-group.is-visible > *:nth-child(3) { transition-delay: .14s; }
html.js .reveal-group.is-visible > *:nth-child(4) { transition-delay: .21s; }
html.js .reveal-group.is-visible > *:nth-child(5) { transition-delay: .28s; }
html.js .reveal-group.is-visible > *:nth-child(6) { transition-delay: .35s; }
html.js .reveal-group.is-visible > *:nth-child(7) { transition-delay: .42s; }
html.js .reveal-group.is-visible > *:nth-child(8) { transition-delay: .49s; }
html.js .reveal-group.is-visible > *:nth-child(9) { transition-delay: .56s; }

/* ---------- Las mini-vizs se cargan al revelarse su contenedor ----------
   Barras horizontales crecen desde la izquierda; el spark desde abajo;
   la curva de retencion se dibuja; el heatmap hace pop celda a celda. */
html.js .reveal .d-fill,
html.js .reveal .nb-fill,
html.js .reveal .splitbar span,
html.js .reveal .st-track span,
html.js .reveal-group .d-fill,
html.js .reveal-group .nb-fill,
html.js .reveal-group .splitbar span,
html.js .reveal-group .st-track span {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s cubic-bezier(.16,1,.3,1) .25s;
}
html.js .reveal.is-visible .d-fill,
html.js .reveal.is-visible .nb-fill,
html.js .reveal.is-visible .splitbar span,
html.js .reveal.is-visible .st-track span,
html.js .reveal-group.is-visible .d-fill,
html.js .reveal-group.is-visible .nb-fill,
html.js .reveal-group.is-visible .splitbar span,
html.js .reveal-group.is-visible .st-track span { transform: scaleX(1); }

html.js .reveal .spark i,
html.js .reveal-group .spark i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .55s cubic-bezier(.16,1,.3,1) .3s;
}
html.js .reveal.is-visible .spark i,
html.js .reveal-group.is-visible .spark i { transform: scaleY(1); }
html.js .reveal.is-visible .spark i:nth-child(2),
html.js .reveal-group.is-visible .spark i:nth-child(2) { transition-delay: .34s; }
html.js .reveal.is-visible .spark i:nth-child(3),
html.js .reveal-group.is-visible .spark i:nth-child(3) { transition-delay: .38s; }
html.js .reveal.is-visible .spark i:nth-child(4),
html.js .reveal-group.is-visible .spark i:nth-child(4) { transition-delay: .42s; }
html.js .reveal.is-visible .spark i:nth-child(5),
html.js .reveal-group.is-visible .spark i:nth-child(5) { transition-delay: .46s; }
html.js .reveal.is-visible .spark i:nth-child(6),
html.js .reveal-group.is-visible .spark i:nth-child(6) { transition-delay: .5s; }
html.js .reveal.is-visible .spark i:nth-child(7),
html.js .reveal-group.is-visible .spark i:nth-child(7) { transition-delay: .54s; }
html.js .reveal.is-visible .spark i:nth-child(8),
html.js .reveal-group.is-visible .spark i:nth-child(8) { transition-delay: .58s; }
html.js .reveal.is-visible .spark i:nth-child(9),
html.js .reveal-group.is-visible .spark i:nth-child(9) { transition-delay: .62s; }
html.js .reveal.is-visible .spark i:nth-child(10),
html.js .reveal-group.is-visible .spark i:nth-child(10) { transition-delay: .66s; }
html.js .reveal.is-visible .spark i:nth-child(11),
html.js .reveal-group.is-visible .spark i:nth-child(11) { transition-delay: .7s; }
html.js .reveal.is-visible .spark i:nth-child(12),
html.js .reveal-group.is-visible .spark i:nth-child(12) { transition-delay: .74s; }

/* Solo se dibuja la curva real; la punteada (promedio) queda fija porque
   ya usa stroke-dasharray como estilo. */
html.js .reveal .curve path:first-child,
html.js .reveal-group .curve path:first-child {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 1.2s cubic-bezier(.16,1,.3,1) .3s;
}
html.js .reveal.is-visible .curve path:first-child,
html.js .reveal-group.is-visible .curve path:first-child { stroke-dashoffset: 0; }

html.js .reveal .heat i,
html.js .reveal-group .heat i {
  opacity: 0;
  transform: scale(.5);
  transition: opacity .5s ease .25s, transform .5s cubic-bezier(.16,1,.3,1) .25s;
}
html.js .reveal.is-visible .heat i,
html.js .reveal-group.is-visible .heat i { opacity: 1; transform: scale(1); }

/* Quien pide menos movimiento ve todo en su estado final, sin animar. */
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .reveal-group > * { opacity: 1; transform: none; transition: none; }
  html.js .reveal .d-fill, html.js .reveal .nb-fill,
  html.js .reveal .splitbar span, html.js .reveal .st-track span,
  html.js .reveal-group .d-fill, html.js .reveal-group .nb-fill,
  html.js .reveal-group .splitbar span, html.js .reveal-group .st-track span,
  html.js .reveal .spark i, html.js .reveal-group .spark i,
  html.js .reveal .heat i, html.js .reveal-group .heat i { opacity: 1; transform: none; transition: none; }
  html.js .reveal .curve path:first-child,
  html.js .reveal-group .curve path:first-child { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* ---------- Hero a prueba de fold ----------
   El titulo + lead + CTAs tienen que quedar arriba del fold en cualquier
   pantalla. En viewports cortos se achican topbar y ritmo vertical; en
   mobile los CTAs suben por encima de los bullets. */
@media (min-width: 721px) and (max-height: 1000px) {
  .topbar { height: 5.5rem; }
  .hero { padding-top: clamp(12px, 3vh, 40px); }
  .hero .mono { margin-bottom: 12px; }
  .hero .lead { margin-top: 16px; }
  .hero .btn-row { margin-top: 24px; }
}
@media (max-width: 720px) {
  .hero { padding-top: var(--spacing-20); }
  .hero .wrap { display: flex; flex-direction: column; align-items: stretch; }
  .hero .mono { margin-bottom: 12px; }
  .hero .lead { margin-top: 16px; }
  .hero .btn-row { order: 4; margin-top: 24px; }
}