/* ============================================================
   Sección: CHURN METRICS  (pieza reutilizable — ver ADR-0006)
   Clases con namespace a mano (BEM): .churn-metrics__...
   Contenido fijo. Animaciones = mejora progresiva (ADR-0003):
   los % cuentan con vanilla JS (scoops.js); 24/7 y "Miles" entran
   con CSS scroll-driven. Todo degrada al estado final si no hay
   soporte / si el usuario pide menos movimiento.
   ============================================================ */

.churn-metrics {
  padding-block: var(--section-y);
}

/* ---------- Encabezado (alineado a la izquierda) ---------- */
.churn-metrics__overline {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
}

.churn-metrics__headline {
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display-l);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.churn-metrics__line {
  display: block;
}
.churn-metrics__line--dark {
  color: var(--color-ink);
}
.churn-metrics__line--pink {
  color: var(--color-accent);
}

/* ---------- Bajada con tramos de color ---------- */
.churn-metrics__lead {
  max-width: 66ch;
  margin-top: var(--space-8);
  font-size: var(--fs-subtitle);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-body);
  color: var(--color-ink);
}

.churn-metrics__quote--muted {
  color: var(--color-neutral-400);
}
.churn-metrics__quote--accent {
  color: var(--color-primary);
}

/* ---------- Métricas ---------- */
.churn-metrics__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
  list-style: none;
  padding: 0;
}

/* Cada tono solo define el color de la barra inferior. */
.churn-metrics__stat--blue {
  --stat-color: var(--color-primary);
}
.churn-metrics__stat--pink {
  --stat-color: var(--color-accent);
}
.churn-metrics__stat--violet {
  --stat-color: var(--color-lavender);
}
.churn-metrics__stat--ink {
  --stat-color: var(--color-ink);
}

.churn-metrics__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.churn-metrics__value {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-h1);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  /* evita el salto de ancho mientras el número sube (0→92): reserva el hueco */
  font-variant-numeric: tabular-nums;
}

.churn-metrics__label {
  margin-top: var(--space-3);
  font-size: var(--fs-caption); /* 12px: entra en menos renglones bajo cada dato */
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.churn-metrics__bar {
  width: 100%;
  height: 3px;
  margin-top: var(--space-4);
  border-radius: 2px;
  background: var(--stat-color);
}

/* ---------- Entradas animadas (24/7 y "Miles") ----------
   Estado por defecto = FINAL (visible, sin transform). Así, sin soporte de
   scroll-driven o sin JS, se ve ya asentado. El @supports abajo agrega el
   movimiento SOLO donde el navegador lo entiende. */
.churn-metrics__flip,
.churn-metrics__fade {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /*
      Flip de calendario: la hoja arranca parada (rotateX -90° desde la bisagra
      de arriba) y cae hacia adelante hasta quedar plana. El paso por +8° antes
      del 0 es el "rebote" del asentarse. Se dispara al entrar en pantalla.
    */
    .churn-metrics__flip {
      transform-origin: top center;
      backface-visibility: hidden;
      animation: churn-page-drop 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }

    /* "Miles": no es contable → entra con un fade + leve subida. */
    .churn-metrics__fade {
      animation: churn-fade-up 600ms ease-out both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }
  }
}

@keyframes churn-page-drop {
  0% {
    transform: perspective(600px) rotateX(-90deg);
    opacity: 0;
  }
  60% {
    transform: perspective(600px) rotateX(8deg);
    opacity: 1;
  }
  100% {
    transform: perspective(600px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes churn-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .churn-metrics__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
  }
}

/* Mobile: de lado a lado; sección de puro texto, con respiro contra el borde. */
@media (max-width: 640px) {
  .churn-metrics {
    padding-top: var(--space-8);
  }
}