/* ══════════════════════════════════════════════════════════════════════
   MarketBrain · capa FX de la landing (solo en/index + es/index) — VOID
   Micro-interacciones portadas del diseño canónico, adaptadas al lienzo
   oscuro: sin sombras (la plantilla no usa elevación), el header pasa de
   transparente a void al hacer scroll, subrayados que se dibujan.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Header: transparente en reposo, fondo void al hacer scroll ── */
.fx-header {
  background: transparent;
  transition: background .25s var(--ease-out);
}
.fx-header.is-scrolled {
  background: rgba(251, 250, 247, .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ── Nav: subrayado que se dibuja al hover ── */
.mb-nav a {
  padding-bottom: 3px;
  background: linear-gradient(var(--teal-soft), var(--teal-soft)) left bottom / 0 1px no-repeat;
  transition: color .18s var(--ease-out), background-size .28s var(--ease-out);
}
.mb-nav a:hover { background-size: 100% 1px; }

/* ── CTAs: lift sutil sin sombra ── */
.mb-cta {
  transition: background .18s var(--ease-out), transform .18s var(--ease-out);
}
.mb-cta:hover { transform: translateY(-1px); }
.v-ghost { transition: color .18s var(--ease-out), transform .18s var(--ease-out); }
.v-ghost:hover { transform: translateY(-1px); }

/* ── Separadores que se trazan al revelarse (hairline mínima sobre void) ── */
.fx-line, .fx-line-dk { border-top: none !important; position: relative; }
.fx-line::before, .fx-line-dk::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--rv-ease) .15s;
}
.fx-line::before, .fx-line-dk::before { background: rgba(23, 62, 99, .16); }
.fx-line[data-shown="1"]::before, .fx-line-dk[data-shown="1"]::before,
.fx-line[data-done="1"]::before, .fx-line-dk[data-done="1"]::before { transform: scaleX(1); }

/* ── Puntuaciones con count-up: ancho estable durante la animación ── */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fx-line::before, .fx-line-dk::before { transform: scaleX(1) !important; transition: none !important; }
  .mb-cta, .v-ghost, .fx-header, .mb-nav a { transition: none !important; }
  .mb-cta:hover, .v-ghost:hover { transform: none; }
}