/* FATBURNER MICRO — CSS de: [data-traza] (trazo de íconos), .cuenta (cifras)
   y componente BALANZA (báscula vs InBody).
   El cronograma de 12 semanas ya no vive aquí: ver §3 y _metodo90-spark.css. */

:root {
  --fbm-expo: var(--e-expo, cubic-bezier(.16, 1, .3, 1));
  --fbm-ease: var(--ease, cubic-bezier(.4, 0, .2, 1));

  /* trazo de íconos */
  --traza-dur: .9s;
  --traza-stagger: .12s;
  --traza-fill-dur: .4s;
  --traza-fill-delay: .7s;

  /* balanza báscula vs InBody */
  --bal-dur: .8s;
  --bal-stagger: .18s;
  --bal-alto: 220px;
  --bal-seg-grasa: 38%;
  --bal-seg-magra: 44%;
  --bal-seg-agua: 18%;
}

/* ============================================================
   1. TRAZO DE ÍCONOS — contrato [data-traza] (markup: frente FB-4)
   JS pone pathLength="1" en cada trazo que no sea relleno sólido.
   ============================================================ */
.js [data-traza] svg * {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--traza-dur) var(--fbm-expo);
}
.js [data-traza] svg *:nth-child(2) { transition-delay: var(--traza-stagger); }
.js [data-traza] svg *:nth-child(3) { transition-delay: calc(var(--traza-stagger) * 2); }
.js [data-traza] svg *:nth-child(4) { transition-delay: calc(var(--traza-stagger) * 3); }
.js [data-traza] svg *:nth-child(5) { transition-delay: calc(var(--traza-stagger) * 4); }
.js [data-traza] svg *:nth-child(6) { transition-delay: calc(var(--traza-stagger) * 5); }

/* los rellenos sólidos no se trazan: aparecen al final por opacidad */
.js [data-traza] svg [fill="currentColor"] {
  stroke-dasharray: none;
  fill-opacity: 0;
  transition: fill-opacity var(--traza-fill-dur) var(--fbm-ease) var(--traza-fill-delay);
}

/* dispara cuando el propio [data-traza] o un ancestro tiene .in, o dentro del
   explainer pineado activo (.ex-panel.on) */
.js .in [data-traza] svg *,
.js [data-traza].in svg *,
.js .ex-panel.on [data-traza] svg *,
.js [data-traza].ex-panel.on svg * {
  stroke-dashoffset: 0;
}
.js .in [data-traza] svg [fill="currentColor"],
.js [data-traza].in svg [fill="currentColor"],
.js .ex-panel.on [data-traza] svg [fill="currentColor"],
.js [data-traza].ex-panel.on svg [fill="currentColor"] {
  fill-opacity: 1;
}

html:not(.js) [data-traza] svg * { stroke-dashoffset: 0; }
html:not(.js) [data-traza] svg [fill="currentColor"] { fill-opacity: 1; }

/* ============================================================
   2. CIFRAS QUE CUENTAN
   ============================================================ */
.cuenta { font-variant-numeric: tabular-nums; }

/* ============================================================
   3. CRONOGRAMA — retirado el 19-ago-2026
   El componente .crono (traza + 7 puntos + cifras) lo reemplaza .metodo-kpi de
   _metodo90-spark.css: la misma línea de 90 días, ahora fina, más una rejilla de
   seis fichas con lo que mide cada control. Nada más en el sitio usaba .crono
   (solo #metodo de fatburner.html), así que su CSS se va con él en vez de
   quedarse muerto en un partial compartido.
   ============================================================ */

/* ============================================================
   4. BALANZA — báscula vs InBody (vive sobre tema-oscuro)
   ============================================================ */
.balanza-idea { max-width: 56ch; color: var(--oscuro-suave); }

.balanza-comp { margin-top: clamp(2rem, 3.6vw, 3rem); display: grid; grid-template-columns: 1fr; gap: 2.2rem; }
@media (min-width: 700px) { .balanza-comp { grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: end; } }

.balanza-col { display: flex; flex-direction: column; }
.balanza-etq { font-family: var(--dato); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--oscuro-suave); margin-bottom: 1rem; }

/* la báscula: un solo número, y se queda solo */
.balanza-num { font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 9vw, 96px); line-height: 1; color: var(--oscuro-tinta); display: flex; align-items: baseline; gap: .3rem; }
.balanza-unidad { font-family: var(--dato); font-size: clamp(16px, 1.8vw, 20px); font-weight: 500; letter-spacing: .03em; color: var(--oscuro-suave); }
.balanza-cop { margin-top: .9rem; max-width: 32ch; font-size: 15px; line-height: 1.5; color: var(--oscuro-suave); }

/* el InBody: el mismo peso, descompuesto en una barra apilada */
.balanza-barras { width: min(180px, 60vw); height: var(--bal-alto); display: flex; flex-direction: column-reverse; border-radius: var(--r-xs); overflow: hidden; background: rgba(242, 237, 232, .06); }
.balanza-barra { width: 100%; transform: scaleY(0); transform-origin: bottom; transition: transform var(--bal-dur) var(--fbm-expo); }
.js .balanza.in .balanza-barra { transform: scaleY(1); }
html:not(.js) .balanza-barra { transform: scaleY(1); }
.balanza-agua { height: var(--bal-seg-agua); background: rgba(189, 14, 49, .28); }
.balanza-magra { height: var(--bal-seg-magra); background: rgba(189, 14, 49, .62); }
.balanza-grasa { height: var(--bal-seg-grasa); background: var(--carmin); }
.js .balanza.in .balanza-agua { transition-delay: 0s; }
.js .balanza.in .balanza-magra { transition-delay: var(--bal-stagger); }
.js .balanza.in .balanza-grasa { transition-delay: calc(var(--bal-stagger) * 2); }

.balanza-leyenda { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; list-style: none; padding: 0; }
.balanza-leyenda li { display: flex; align-items: center; gap: .5rem; font-size: 13px; color: var(--oscuro-tinta); }
.balanza-leyenda .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.balanza-leyenda .sw-grasa { background: var(--carmin); }
.balanza-leyenda .sw-magra { background: rgba(189, 14, 49, .62); }
.balanza-leyenda .sw-agua { background: rgba(189, 14, 49, .28); }

.balanza-spec { margin-top: clamp(1.8rem, 3vw, 2.6rem); font-family: var(--dato); font-size: 13px; letter-spacing: .03em; color: var(--oscuro-suave); }
.balanza-spec b { color: var(--carmin); font-variant-numeric: tabular-nums; }
.balanza-fuente { opacity: .8; }

/* ============================================================
   5. DEGRADACIÓN — reduced-motion (global a este partial)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-traza] svg * { stroke-dashoffset: 0 !important; transition: none !important; }
  [data-traza] svg [fill="currentColor"] { fill-opacity: 1 !important; transition: none !important; }
  .balanza-barra { transform: scaleY(1) !important; transition: none !important; }
}