/* ============================================================================
   MÉTODO — la tira de 90 días + los KPI que se miden en cada control
   Componente de #metodo en fatburner.html. Sustituye al viejo .crono (una línea
   que se dibujaba y no decía nada) por dos piezas:

     1 · .kpi-tira   — los 90 días en una sola línea fina: 7 controles y los
                       dos paneles de sangre. Dice CUÁNDO.
     2 · .kpi-grid   — seis fichas, una por medición real del protocolo, cada
                       una con su propio gráfico y su propia entrada. Dice QUÉ.

   Regla dura del componente: ningún gráfico dibuja un RESULTADO. Se anima la
   medición y su cadencia (lo que está documentado en #ficha), nunca una curva
   de evolución — la página promete mediciones, no kilos, y el componente no
   puede contradecirla.

   Motor: reutiliza lo que ya está en la página, sin escena de scroll nueva —
     · .rv + IntersectionObserver de _motion-spark.js pone .in en SOLO tres
       elementos (.kpi-cab, .kpi-lead, .kpi-grid): un disparador por capítulo,
       no uno por pieza. Todo lo demás (líneas, puntos, fichas, gráficos)
       cuelga de esos tres .in con sus propios tiempos — un montaje, no ocho
       reveals sueltos coincidiendo por casualidad.
     · .cuenta[data-n] de _fatburner-micro.js cuenta las cifras del resumen.
     · La inclinación 3D de las fichas (_fatburner-micro.js §4) reutiliza el
       idioma magnético de los pills/botones de _motion-spark.js — sin pinning
       ni altura nueva, solo ~15 líneas sobre el motor que ya existía.

   Va DESPUÉS de _motion-spark.css (usa --e-expo y .rv) y ANTES del CSS de la
   página (CONSUMO-SISTEMA.md §1). Solo tokens de _sistema-spark.css.
   ============================================================================ */

.metodo-kpi{
  --k-expo: var(--e-expo, cubic-bezier(.16,1,.3,1));
  --k-ease: var(--ease, cubic-bezier(.4,0,.2,1));
  /* lenguaje dual: lo que SE MIDE (trazos, barras, rellenos) dibuja mecánico
     con --k-expo; lo que LLEGA (puntos, marcas, confirmaciones) aterriza con
     un pequeño resorte, --k-pop. Dos verbos, no un efecto repetido ocho veces. */
  --k-pop: cubic-bezier(.34,1.56,.64,1);
  --k-graf: 78px;            /* alto reservado al gráfico: alinea las 6 fichas */
  --k-fig: calc(var(--k-graf) - 4px);   /* alto de las figuras SVG dentro de esa banda */
  margin-top: clamp(2.4rem, 4.2vw, 3.4rem);
}
/* en desktop hay sitio: los seis gráficos crecen a la vez y ganan presencia */
@media(min-width:700px){ .metodo-kpi{ --k-graf: 94px } }

/* Entrada: el reveal del sistema (.rv de _motion-spark) y nada más. Las
   cortinas de clip-path se retiraron (28-ago): el trabajo lo hace el contenido
   al dibujarse, no la tarjeta al entrar. .kpi-cab y .kpi-grid solo OBSERVAN el
   scroll (disparan su .in para la coreografía interna): no se ocultan a sí
   mismos, el marco está firme desde el primer frame. */
.metodo-kpi .kpi-cab.rv,
.metodo-kpi .kpi-grid.rv{
  opacity: 1; clip-path: none; transform: none; transition: none;
}

/* ============================================================
   1 · TIRA DE 90 DÍAS — cuándo se mide
   ============================================================ */
.kpi-cab{
  position: relative;
  display: grid; gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start; padding-bottom: clamp(1.6rem,3vw,2.2rem);
  border-bottom: 1px solid var(--linea);
}
@media(min-width:900px){ .kpi-cab{ grid-template-columns: minmax(0,1fr) auto } }

/* el corte de capítulo: cuando la tira TERMINA de dibujarse, un wipe barre
   el borde inferior de punta a punta y se asienta en una línea fina — el
   mismo gesto de una transición de video que hace su corte y se retira,
   no dos piezas que coinciden por casualidad. Entrega la posta a lo que
   sigue: el remate ocurre justo cuando arranca el capítulo de las fichas. */
.kpi-cab::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--carmin);
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s var(--k-expo) 2s;
}
.js .kpi-cab.in::after{ clip-path: inset(0 0% 0 0) }

.kpi-tira{ min-width: 0 }
.kpi-tira .eyebrow{ display: block; margin-bottom: clamp(2.2rem, 3.4vw, 2.8rem) }

/* los días cuelgan por debajo y la sangre por encima: ambos son absolute y no
   ocupan layout, así que el aire lo abre el propio eje. El eje mismo tiene
   MÁS peso del que tenía — 3px y puntos de 13px se leían como wireframe de
   specs, no como una pieza de diseño: ahora el trazo tiene presencia real y
   el contraste hace todo el trabajo de comunicar, no la curva de easing. */
.kpi-eje{ position: relative; height: 5px; margin: 0 10px 32px }
.kpi-linea{
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 999px; background: var(--linea);
}
.kpi-linea i{
  display: block; height: 100%; background: var(--carmin);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.9s var(--k-expo) .1s;
}
.js .kpi-cab.in .kpi-linea i{ transform: scaleX(1) }

.kpi-nodos{ position: absolute; inset: 0; list-style: none; margin: 0; padding: 0 }
.kpi-nodo{
  position: absolute; top: 50%; left: calc(var(--i) / 6 * 100%);
  width: 19px; height: 19px; margin: 0;
  transform: translate(-50%,-50%);
}
.kpi-punto{
  position: absolute; inset: 0; border-radius: 50%; corner-shape: round;
  background: var(--carmin); box-shadow: 0 0 0 4px var(--fondo);
  opacity: 0; transform: scale(.2);
  transition: opacity .4s var(--k-ease), transform .6s var(--k-pop);
  transition-delay: calc(.28s + var(--i) * .24s);
}
.js .kpi-cab.in .kpi-punto{ opacity: 1; transform: scale(1) }
/* el pulso: cada punto, al aterrizar, suelta un eco que se expande y se
   apaga — el gesto de un latido, no decoración gratis. Comunica "acá se
   tomó una medición", que es exactamente lo que el punto representa. */
.kpi-punto::after{
  content: ""; position: absolute; inset: 0; border-radius: 50%; corner-shape: round;
  border: 1.5px solid var(--carmin); opacity: 0; pointer-events: none;
}
@keyframes kpi-pulso{
  0%   { opacity: .5; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.6); }
}
.js .kpi-cab.in .kpi-punto::after{
  animation: kpi-pulso .8s var(--k-ease) calc(.4s + var(--i) * .24s) both;
}

.kpi-dia{
  position: absolute; top: 19px; left: 50%; transform: translateX(-50%);
  font-family: var(--dato); font-size: 11.5px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta);
  opacity: 0; transition: opacity .5s var(--k-ease);
  transition-delay: calc(.34s + var(--i) * .24s);
}
.js .kpi-cab.in .kpi-dia{ opacity: 1 }
@media(min-width:900px){ .kpi-dia{ font-size: 12.5px } }
.kpi-nodo:first-child .kpi-dia{ left: 0; transform: none }
.kpi-nodo:last-child  .kpi-dia{ left: auto; right: 0; transform: none }
@media(max-width:420px){ .kpi-nodo:nth-child(even) .kpi-dia{ display: none } }

/* los dos paneles de sangre, colgados sobre los extremos */
.kpi-sangre-m{
  position: absolute; left: calc(var(--i) / 6 * 100%); bottom: calc(100% + 19px);
  transform: translateX(-50%); color: var(--carmin); line-height: 0;
  opacity: 0; transition: opacity .6s var(--k-ease);
}
.js .kpi-cab.in .kpi-sangre-m{ opacity: 1 }
/* cada gota se enciende cuando la línea la alcanza de verdad, no en un tiempo
   fijo: la de D·0 casi de inmediato, la de D·90 justo cuando el trazo llega. */
.kpi-sangre-a{ transition-delay: .15s }
.kpi-sangre-b{ transition-delay: 2s }
.kpi-sangre-m svg{ width: 17px; height: 17px; display: block }
.kpi-sangre-m::after{
  content: ""; position: absolute; left: 50%; top: calc(100% + 3px);
  width: 1px; height: 16px; background: var(--linea);
}
.kpi-s-etq{
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--dato); font-size: 10.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
  color: var(--suave); line-height: 1.2;
}
.kpi-sangre-a .kpi-s-etq{ left: calc(100% + 7px) }
.kpi-sangre-b .kpi-s-etq{ right: calc(100% + 7px) }
@media(max-width:899px){ .kpi-s-etq{ display: none } }

/* resumen: las tres cifras del programa */
.kpi-cifras{ display: flex; flex-wrap: wrap; gap: 1.1rem 2rem; margin-top: 1.5rem }
@media(min-width:900px){
  .kpi-cifras{ display: grid; gap: .9rem; margin-top: 0; text-align: right; justify-items: end }
}
.kpi-cifras p{ display: flex; align-items: baseline; gap: .5rem }
.kpi-cf-n{
  font-family: var(--dato); font-weight: 300; line-height: 1;
  font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  color: var(--carmin);
}
.kpi-cf-l{ font-size: 13px; color: var(--suave); line-height: 1.3 }

/* ============================================================
   2 · REJILLA DE FICHAS — qué se mide
   ============================================================ */
.kpi-lead{
  margin: clamp(1.6rem,3vw,2.2rem) 0 clamp(1.2rem,2.2vw,1.6rem);
  max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--suave);
}
@media(min-width:900px){ .kpi-lead{ font-size: 17px } }

.kpi-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media(min-width:700px){ .kpi-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px } }
/* la composición corporal es la ficha principal: ocupa el ancho en móvil */
@media(max-width:699px){ .kpi-t-ancha{ grid-column: 1 / -1 } }

/* Las seis fichas entran con un solo gesto sobrio: fade + asentamiento, en el
   orden del DOM (--i 0..5, 70 ms entre una y otra). Los iris-wipe y la
   inclinación 3D se retiraron (28-ago): el interés lo ponen los gráficos al
   dibujarse, no la tarjeta al moverse. Hover: solo el borde responde. */
.kpi-t{
  display: flex; flex-direction: column;
  padding: clamp(.95rem, 2.2vw, 1.35rem);
  border: 1px solid var(--linea); border-radius: var(--r-card);
  background: var(--panel);
  opacity: 0; transform: translateY(14px);
  transition: opacity .35s var(--k-ease), transform .5s var(--k-expo), border-color .3s var(--k-ease);
  transition-delay: calc(var(--i, 0) * .07s), calc(var(--i, 0) * .07s), 0s;
}
.js .kpi-grid.in .kpi-t{ opacity: 1; transform: none }
html:not(.js) .kpi-t{ opacity: 1; transform: none }
@media(prefers-reduced-motion:reduce){
  .kpi-t{ opacity: 1 !important; transform: none !important }
}
@media(hover:hover) and (pointer:fine){
  .kpi-t:hover{ border-color: color-mix(in srgb, var(--carmin) 45%, var(--linea)) }
}

.kpi-etq{
  font-family: var(--dato); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tinta);
  line-height: 1.3;
}
.kpi-graf{
  height: var(--k-graf); margin-top: .7rem;
  display: flex; align-items: center; justify-content: flex-start;
}
/* 28-ago: 11.5px era ilegible para texto que SÍ se lee; sube a 13 */
.kpi-pie{
  margin-top: auto; padding-top: .8rem;
  font-size: 13px; line-height: 1.45; color: var(--suave);
}
.kpi-pie b{ color: var(--tinta); font-weight: 500 }
.kpi-link{
  display: block; margin-top: .4rem; font-size: 13px; color: var(--carmin);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- 2.1 · composición corporal: la barra que se separa ---------- */
.kpi-comp{ flex-direction: column; align-items: stretch; justify-content: center; gap: .85rem }
/* tres pastillas separadas, no una barra continua: el gesto es "el InBody
   SEPARA el peso", y una barra de un solo trazo diría justo lo contrario */
/* las tres fracciones se arman por separado, no como una sola máscara: cada
   una es SU PROPIA medición y llega en su propio tiempo — grasa, magra, agua. */
.kc-barra{ display: flex; gap: 3px; height: 16px }
.kc-seg{
  display: block; height: 100%; border-radius: 999px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .8s var(--k-expo);
}
.js .kpi-grid.in .kpi-t .kc-seg{ transform: scaleX(1) }
.kc-grasa{ flex: 38; background: var(--carmin); transition-delay: .1s }
.kc-magra{ flex: 44; background: rgba(189,14,49,.6); transition-delay: .24s }
.kc-agua { flex: 18; background: rgba(189,14,49,.26); transition-delay: .38s }

.kc-leyenda{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
}
.kc-leyenda li{
  display: flex; align-items: center; gap: .4rem; font-size: 12px; color: var(--suave);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s var(--k-ease), transform .5s var(--k-expo);
}
.js .kpi-grid.in .kpi-t .kc-leyenda li{ opacity: 1; transform: none }
.kc-leyenda li:nth-child(1){ transition-delay: .55s }
.kc-leyenda li:nth-child(2){ transition-delay: .65s }
.kc-leyenda li:nth-child(3){ transition-delay: .75s }
.kc-leyenda i{ width: 9px; height: 9px; border-radius: 2px; flex: none }
.kc-leyenda .sw-grasa{ background: var(--carmin) }
.kc-leyenda .sw-magra{ background: rgba(189,14,49,.6) }
.kc-leyenda .sw-agua { background: rgba(189,14,49,.26) }

/* ---------- 2.2 · grasa visceral: los anillos que se dibujan hacia dentro ---------- */
.kpi-anillos{ width: var(--k-fig); height: var(--k-fig); display: block; overflow: visible }
.ka-ring{
  fill: none; stroke: var(--carmin); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.2s var(--k-expo);
}
.ka-out{ opacity: .32 }
.ka-mid{ opacity: .58; transition-delay: .18s }
.js .kpi-grid.in .kpi-t .ka-ring{ stroke-dashoffset: 0 }
.ka-in{
  fill: var(--carmin); opacity: 0; transform: scale(.2);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--k-ease) .62s, transform .7s var(--k-pop) .62s;
}
.js .kpi-grid.in .kpi-t .ka-in{ opacity: 1; transform: none }
.ka-t{
  font-family: var(--dato); font-size: 9px; font-weight: 500; letter-spacing: .06em;
  fill: var(--panel); text-anchor: middle;
  opacity: 0; transition: opacity .4s var(--k-ease) .9s;
}
.js .kpi-grid.in .kpi-t .ka-t{ opacity: 1 }

/* ---------- 2.3 · masa muscular: los cinco segmentos del InBody ----------
   Figura con proporciones humanas, no cinco cajas: el tronco es una pieza rellena
   (reloj de arena: hombro, cintura, cadera) y los cuatro miembros son TRAZOS de
   punta redonda. Esa distinción es la que hace la animación posible — un trazo se
   puede dibujar con stroke-dashoffset, que es el idioma de íconos del sitio
   ([data-traza], _fatburner-micro.css §1), y un relleno no.
   Coreografía: entra el tronco, después los brazos y las piernas se dibujan hacia
   fuera, en el mismo orden en que el InBody reparte los segmentos.
   Un solo acento graduado (playbook §0.4): tronco 100 %, piernas 88 %, brazos 76 %.
   Las capsulas son <path> con stroke-linecap:round — no <rect rx>, para que
   `corner-shape:squircle` del bloque global de _botones-spark.css no las cuadre. */
/* viewBox recortada al ancho real de la figura: sin ella la ficha reservaba
   ~40 px de aire muerto a los lados y el cuerpo se leía más chico que los otros gráficos */
.kpi-cuerpo{ width: auto; height: var(--k-fig); display: block }
.kb-cab{
  fill: var(--linea); opacity: 0;
  transition: opacity .5s var(--k-ease) .08s;
}
.kb-tronco{
  fill: var(--carmin); opacity: 0;
  transform: scale(.84); transform-box: fill-box; transform-origin: center;
  transition: opacity .5s var(--k-ease), transform .85s var(--k-expo);
}
.kb-mi{
  fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s var(--k-expo);
}
.kb-brazo-i,.kb-brazo-d  { stroke: rgba(189,14,49,.76) }
.kb-pierna-i,.kb-pierna-d{ stroke: rgba(189,14,49,.88) }
.js .kpi-grid.in .kpi-t .kb-cab{ opacity: 1 }
.js .kpi-grid.in .kpi-t .kb-tronco{ opacity: 1; transform: none }
.js .kpi-grid.in .kpi-t .kb-mi{ stroke-dashoffset: 0 }
.js .kpi-grid.in .kpi-t .kb-brazo-i { transition-delay: .20s }
.js .kpi-grid.in .kpi-t .kb-brazo-d { transition-delay: .30s }
.js .kpi-grid.in .kpi-t .kb-pierna-i{ transition-delay: .44s }
.js .kpi-grid.in .kpi-t .kb-pierna-d{ transition-delay: .54s }

/* ---------- 2.4 · presión arterial: sistólica y diastólica ---------- */
.kpi-pa{ flex-direction: column; align-items: stretch; justify-content: center; gap: .8rem }
.kpa-fila{ display: grid; grid-template-columns: 1fr; gap: .3rem }
.kpa-etq{ font-size: 11.5px; color: var(--suave); line-height: 1 }
.kpa-pista{ display: block; height: 9px; border-radius: 999px; background: var(--linea); overflow: hidden }
.kpa-pista i{
  display: block; width: var(--w); height: 100%; border-radius: 999px;
  background: var(--carmin);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .95s var(--k-expo);
}
.kpa-fila:nth-child(2) .kpa-pista i{ background: rgba(189,14,49,.55); transition-delay: .14s }
.js .kpi-grid.in .kpi-t .kpa-pista i{ transform: scaleX(1) }

/* ---------- 2.5 · cintura / estatura: la cinta que se extiende ---------- */
.kpi-ratio{ width: auto; height: calc(var(--k-fig) - 6px); display: block; overflow: visible }
.kr-traza{
  fill: none; stroke: var(--carmin); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .95s var(--k-expo);
}
.kr-tope2{ transition-delay: .32s }
.kr-div  { stroke: var(--linea); stroke-width: 1.4; transition-delay: .46s }
.kr-alto { stroke: rgba(189,14,49,.5); transition-delay: .56s }
.kr-tope { stroke: rgba(189,14,49,.5); transition-delay: .88s }
.js .kpi-grid.in .kpi-t .kr-traza{ stroke-dashoffset: 0 }
.kr-t{
  font-family: var(--dato); font-size: 8.5px; font-weight: 500; letter-spacing: .06em;
  text-transform: uppercase; fill: var(--suave);
  opacity: 0; transition: opacity .4s var(--k-ease) .95s;
}
.js .kpi-grid.in .kpi-t .kr-t{ opacity: 1 }

/* ---------- 2.6 · panel de sangre: los trece marcadores ---------- */
.kpi-sangre{ align-items: center }
.ks-rejilla{
  display: grid; grid-template-columns: repeat(7, minmax(0,1fr));
  gap: 8px; width: 100%; max-width: 190px;
}
.ks-dot{
  aspect-ratio: 1; border-radius: 50%; corner-shape: round;
  background: var(--carmin);
  opacity: 0; transform: scale(.25);
  transition: opacity .4s var(--k-ease), transform .6s var(--k-pop);
  transition-delay: calc(var(--i) * .05s);
}
.js .kpi-grid.in .kpi-t .ks-dot{ opacity: 1; transform: none }

/* ============================================================
   3 · NOTA AL PIE
   ============================================================ */
.kpi-nota{
  margin-top: clamp(1.2rem, 2.2vw, 1.7rem); max-width: 64ch;
  font-size: 13.5px; line-height: 1.55; color: var(--suave);
}

/* ============================================================
   4 · DEGRADACIÓN — sin JS y con reduced-motion, estado final
   Todo lo de arriba parte de un estado inicial "vacío" y llega al final con
   .in. Sin .in (sin JS) o sin movimiento, hay que entregar el final explícito:
   si no, la sección aparecería en blanco, que es peor que aparecer quieta.
   ============================================================ */
html:not(.js) .kpi-linea i,
html:not(.js) .kpa-pista i{ transform: scaleX(1) }
html:not(.js) .kpi-cab::after{ clip-path: none }
html:not(.js) .kpi-punto,
html:not(.js) .ks-dot,
html:not(.js) .ka-in,
html:not(.js) .kc-leyenda li{ opacity: 1; transform: none }
html:not(.js) .kpi-dia,
html:not(.js) .kpi-sangre-m,
html:not(.js) .ka-t,
html:not(.js) .kr-t{ opacity: 1 }
html:not(.js) .kc-seg{ transform: scaleX(1) }
html:not(.js) .ka-ring,
html:not(.js) .kr-traza{ stroke-dashoffset: 0 }
html:not(.js) .kb-cab,
html:not(.js) .kb-tronco{ opacity: 1; transform: none }
html:not(.js) .kb-mi{ stroke-dashoffset: 0 }

@media(prefers-reduced-motion:reduce){
  .kpi-linea i,.kpa-pista i{ transform: scaleX(1) !important }
  .kpi-cab::after{ clip-path: none !important }
  .kpi-punto,.ks-dot,.ka-in,.kc-leyenda li{ opacity: 1 !important; transform: none !important }
  .kpi-dia,.kpi-sangre-m,.ka-t,.kr-t{ opacity: 1 !important }
  .kc-seg{ transform: scaleX(1) !important }
  .ka-ring,.kr-traza{ stroke-dashoffset: 0 !important }
  .kb-cab,.kb-tronco{ opacity: 1 !important; transform: none !important }
  .kb-mi{ stroke-dashoffset: 0 !important }
  .kpi-punto::after{ animation: none !important; opacity: 0 !important }
}

/* ============================================================
   5 · PLEGABLE (28-ago, feedback Alex) — las 6 mediciones van
   dentro de un acordeón: la página cuenta el destino y el método,
   y la ficha por medición se abre solo para quien quiere estudiarla.
   ============================================================ */
.kpi-plegable{margin-top:clamp(1rem,2vw,1.4rem)}
.kpi-plegable summary{
  cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:clamp(1rem,2vw,1.25rem) clamp(1.1rem,2.2vw,1.5rem);min-height:44px;
  border:1px solid var(--linea);border-radius:var(--r-card);background:var(--panel);
  font-family:var(--serif);font-size:clamp(18px,1.8vw,21px);line-height:1.3;
  transition:border-color .3s var(--k-ease);
}
.kpi-plegable summary::-webkit-details-marker{display:none}
.kpi-plegable summary:hover{border-color:color-mix(in srgb,var(--carmin) 45%,var(--linea))}
.kp-signo{flex:none;line-height:1}
.kp-signo::after{content:"+";font-family:var(--dato);font-size:24px;color:var(--carmin)}
.kpi-plegable[open] .kp-signo::after{content:"\2212"}
.kpi-plegable[open] summary{margin-bottom:clamp(1rem,2vw,1.4rem)}
.kpi-plegable .kpi-nota{margin-top:clamp(1.2rem,2.2vw,1.7rem)}