/* ==========================================================================
   MP360 · Jacarandá — Proyectá tu cuota

   Superficie propia del proyecto: usa el armazón compartido
   (mp360-superficie.css), los CTA aprobados y la escala del Design System.
   No es un wizard genérico ni un modal blanco sin jerarquía.

   Composición derivada de REFERENCIAS-MOBBIN-PROYECTOR.md:
     · la cuota elegida queda ANCLADA arriba y se actualiza al cambiar de plan;
     · los planes se eligen como opciones discretas, no con un slider: son
       siete cuotas reales, no un rango continuo;
     · el resultado informa una proporción, sin veredicto ni semáforo.

   RITMO VERTICAL (DESIGN.md §4 · escala 4/8/12/16/24/32/48)
   Un solo criterio, aplicado en las dos columnas por igual:

     6–8px    partes del MISMO dato        cuota ↔ entrega, label ↔ valor
     16px     título de sección ↔ contenido
     24px     cambio de grupo              entrada ↔ resultado ↔ desglose
     32px     cuerpo ↔ pie                 lo separa además un divisor

   Las variables de abajo son el único lugar donde se tocan esos saltos.
   ========================================================================== */

.mp360-surface--cuota .mp360-surface__dialog {
  /* 72vw era una proporción de pantalla grande: en 1024px dejaba el panel en
     737px y la columna derecha desbordaba 79px por puro ancho faltante. Con
     94vw el tope de 940px sigue mandando de 1000px para arriba —el panel no
     crece— y en pantallas menores usa el ancho que hay. */
  width: min(94vw, 940px);
  height: auto;
  /* Sin tope fijo. El alto lo decide el contenido (`height: auto`) y el único
     límite es el viewport. Con el tope de 720px, en una tablet de 1180px de
     alto el cuerpo scrolleaba 273px teniendo 295px de alto libre al lado: se
     recortaba a una medida de escritorio en una pantalla que no lo era. */
  max-height: 86dvh;
  background: var(--sf-blanco);
}

.mp360-cuota {
  --cu-pad: clamp(1.25rem, 2.6vw, 2rem);
  --cu-linea: rgba(21, 21, 21, 0.10);

  /* Los saltos del ritmo, nombrados. TODOS se aplican como `gap` de un
     contenedor, nunca como `margin` de un nodo: un margen por clase pierde
     contra cualquier reset de elemento y se anula sin dejar síntoma.
     `gap` no tiene ese problema. */
  --cu-titulo: 0.375rem;    /* 6px  · título de sección ↔ su pregunta */
  --cu-dato: 0.5rem;        /* 8px  · entre opciones, entre filas del desglose */
  --cu-campo: 0.8125rem;    /* 13px · encabezado de sección ↔ campo */
  --cu-seccion: 0.875rem;   /* 14px · título ↔ lista · resultado ↔ desglose */
  --cu-grupo: 1.5rem;       /* 24px · cambio de grupo: ayuda ↔ resultado */

  /* Tokens que el componente de CTA necesita en su anfitrión. Mismo bloque
     que declaran la ficha de lote y la entrada: el componente no los trae,
     los toma del scope donde se lo monta. */
  --white: #FFFFFF;
  --primary-700: #4742A1;
  --secondary-600: #A16455;
  --secondary-700: #7F4B3E;
  --radius-compact: 6px;
  --radius-control: 8px;
  --radius-control-inner: var(--radius-compact);

  /* Interruptor de composición. 0 = los tres pasos a la vista (escritorio).
     1 = un paso por vez. Lo lee mp360-cuota.js con getComputedStyle: el
     umbral se declara UNA sola vez, acá abajo en su media query. */
  --cu-pasos: 0;

  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: "Manrope", system-ui, sans-serif;
  color: var(--sf-tinta);
}

.mp360-cuota *,
.mp360-cuota *::before,
.mp360-cuota *::after { box-sizing: border-box; }

/* Reset de márgenes del navegador.
   Va dentro de `:where()` a propósito: un selector de elemento —(0,1,1)— le
   gana a cualquier regla por clase —(0,1,0)— y dejaba en cero TODOS los
   márgenes del ritmo vertical de más abajo, sin que nada lo señalara.
   `:where()` no aporta especificidad, así que el reset queda en (0,1,0) y las
   clases lo pisan por orden, que es lo que se espera de un reset. */
.mp360-cuota :where(h2, h3, p, dl, dt, dd) { margin: 0; }

/* --------------------------------------------------------------------------
   Encabezado persistente

   El título nombra la herramienta; debajo, cuando viene de una ficha, el lote;
   y a la derecha la cuota elegida, que es la respuesta y no se pierde de vista
   mientras se cambia de plan.

   El resumen alinea por LÍNEA DE BASE con el título, no por caja: "60 cuotas
   de" y el importe tienen tamaños muy distintos y centrarlos por caja los
   dejaba flotando a media altura.
   -------------------------------------------------------------------------- */
.mp360-cuota__head {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  /* Título, resumen y botón de cierre comparten el borde superior. Con
     `baseline` el bloque de tres líneas del resumen colgaba del renglón del
     título y su rótulo quedaba por encima del borde del panel. */
  align-items: flex-start;
  gap: var(--cu-dato) var(--cu-grupo);
  padding: var(--cu-pad);
  /* deja libre la esquina del cierre */
  padding-right: calc(var(--cu-pad) + var(--sf-cierre) + 1rem);
  border-bottom: 1px solid var(--cu-linea);
}

.mp360-cuota__title {
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mp360-cuota__lote {
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(21, 21, 21, 0.62);
}

.mp360-cuota__lote[hidden] { display: none !important; }

/* Confirmación de estado: rótulo → importe → plazo. Las tres líneas van
   pegadas —son el mismo dato— y con line-heights ajustados, para que el bloque
   sume ~53px y el encabezado no se infle. */
.mp360-cuota__resumen {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
}

.mp360-cuota__resumen[hidden] { display: none !important; }

.mp360-cuota__resumen-label {
  font-size: 0.6875rem;       /* 11px · es un rótulo de estado, no contenido */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(21, 21, 21, 0.56);
}

.mp360-cuota__resumen-amount {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  color: var(--sf-primary-700);
}

.mp360-cuota__resumen-count {
  font-size: 0.75rem;         /* 12px */
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: rgba(21, 21, 21, 0.68);
}

/* Controles de la composición por pasos. Existen siempre en el DOM; en
   escritorio no se muestran porque ahí no hay nada que navegar. */
.mp360-cuota__nav,
.mp360-cuota__progreso,
.mp360-cuota__sub,
.mp360-cuota__proporcion-label,
.mp360-cuota__paso--resultado { display: none; }

/* Todo importe se alinea por columna: los dígitos de Manrope no son de ancho
   fijo y sin esto "$247.000" y "$1.200.000" bailan entre filas. Se declara una
   sola vez, para todo lo que muestre un número. */
.mp360-cuota__resumen-amount,
.mp360-cuota__resumen-count,
.mp360-cuota__plan-cuota,
.mp360-cuota__plan-entrega,
.mp360-cuota__input,
.mp360-cuota__proporcion-pct,
.mp360-cuota__fila dd { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Cuerpo: elección | ingreso + resultado
   -------------------------------------------------------------------------- */
.mp360-cuota__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "plan ingreso"
    "plan resultado";
  align-content: start;
  gap: 0 var(--cu-pad);
  padding: var(--cu-pad);
  /* Única región con scroll, y sólo si el contenido real no entra. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Cada zona es un contenedor: su `gap` define la relación entre los grupos que
   contiene. Ningún hijo lleva margen propio. */
.mp360-cuota__zona {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* título → 14px → primera opción */
.mp360-cuota__zona--plan { grid-area: plan; gap: var(--cu-seccion); }

/* encabezado de sección → 13px → grupo del campo */
.mp360-cuota__zona--ingreso { grid-area: ingreso; gap: var(--cu-campo); }

/* Entrada y resultado son GRUPOS distintos: los separa el salto de grupo, que
   acá es `padding-top` porque son dos áreas del grid, no dos hermanos.
   Adentro, la conclusión y el desglose van a 14px. */
.mp360-cuota__zona--resultado {
  grid-area: resultado;
  padding-top: var(--cu-grupo);
  gap: var(--cu-seccion);
}

/* El título de sección y su pregunta son el MISMO encabezado: van juntos, a
   6px, y como bloque se despegan del campo. */
.mp360-cuota__encabezado {
  display: flex;
  flex-direction: column;
  gap: var(--cu-titulo);
}

/* El campo y lo que lo explica —privacidad y error— son un solo grupo. */
.mp360-cuota__campo-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--cu-titulo);
}

/* Título de sección real, equivalente en las dos columnas.
   Antes era una versalita de 12px con letter-spacing: se leía como eyebrow
   secundario y dejaba las dos columnas sin cabeza comparable. */
.mp360-cuota__paso:focus { outline: none; }

.mp360-cuota__paso {
  font-size: 1.125rem;        /* 18px */
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--sf-tinta);
}

/* --------------------------------------------------------------------------
   Opciones de cuota

   Cada una se nombra por su CUOTA, que es lo que el comprador compara. La
   entrega la acompaña como dato secundario del mismo grupo, y el color va como
   apoyo —el mismo que identifica el plan en el panel y en el plano— nunca como
   único identificador.
   -------------------------------------------------------------------------- */
.mp360-cuota__planes {
  display: flex;
  flex-direction: column;
  gap: var(--cu-dato);
}

.mp360-cuota__plan {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  min-height: 2.75rem;          /* 44px · target mínimo DESIGN.md §7 */
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--cu-linea);
  border-radius: var(--radius-control);
  background: var(--sf-blanco);
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.25s var(--mp360-ease-ui, ease),
              border-color 0.25s var(--mp360-ease-ui, ease),
              box-shadow 0.25s var(--mp360-ease-ui, ease);
}

@media (hover: hover) and (pointer: fine) {
  .mp360-cuota__plan:hover { background: rgba(21, 21, 21, 0.04); }
}

.mp360-cuota__plan:active { background: rgba(21, 21, 21, 0.07); }

/* Estado elegido: borde + fondo + peso del dato principal. El GROSOR del borde
   cambia con un anillo interior en vez de con `border-width`, que reflowearía
   la fila 1px por lado en cada elección. El estado accesible lo lleva
   `aria-checked` en el propio `role="radio"`: el reconocimiento no depende
   sólo del color. */
.mp360-cuota__plan.is-on {
  border-color: var(--sf-primary-700);
  box-shadow: inset 0 0 0 1px var(--sf-primary-700);
  background: var(--sf-primary-50);
}

.mp360-cuota__plan.is-on .mp360-cuota__plan-cuota { font-weight: 700; }

.mp360-cuota__plan:focus-visible {
  outline: 2px solid var(--sf-primary-700);
  outline-offset: 2px;
}

.mp360-cuota__plan-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--mp360-band, transparent);
  box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.32);
}

/* La entrega va en la MISMA línea, a la derecha: es el dato secundario de la
   opción, no un segundo renglón. Apiladas, las siete filas pedían 392px y el
   cuerpo terminaba con scroll en escritorio; en una línea piden 308 y entra
   todo sin scroll. */
.mp360-cuota__plan-txt {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

.mp360-cuota__plan-cuota {
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mp360-cuota__plan-entrega {
  flex: 0 0 auto;
  font-size: 0.75rem;         /* 12px */
  line-height: 1.4;
  /* 0.56 daba 3.5:1 sobre blanco, por debajo del 4.5:1 de DESIGN.md §6 para
     texto chico. 0.68 da ~5.2:1 y sigue claramente por debajo de la cuota,
     que es peso 600 y 15px. */
  color: rgba(21, 21, 21, 0.68);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Ingreso — una sola pregunta

   Orden y aire: título de sección → 16px → pregunta → 8px → campo → 8px →
   privacidad. La pregunta ya no queda pegada al input.
   -------------------------------------------------------------------------- */
.mp360-cuota__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(21, 21, 21, 0.86);
}

.mp360-cuota__campo {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--cu-linea);
  border-radius: var(--radius-control);
  background: var(--sf-blanco);
  transition: border-color 0.25s var(--mp360-ease-ui, ease),
              box-shadow 0.25s var(--mp360-ease-ui, ease);
}

.mp360-cuota__campo:focus-within {
  border-color: var(--sf-primary-700);
  box-shadow: inset 0 0 0 1px var(--sf-primary-700);
}

.mp360-cuota__signo {
  font-size: 1.25rem;
  font-weight: 700;
  color: rgba(21, 21, 21, 0.5);
}

/* El importe es la pieza tipográfica del paso, no un campo más de un
   formulario: por eso es grande y sin borde propio. Los separadores de miles
   los pone el formateador de mp360-cuota.js, no el navegador. */
.mp360-cuota__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-family: inherit;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--sf-tinta);
}

/* La privacidad pertenece al campo: va cerca —6px, por el `gap` del grupo— y
   con menos contraste. */
.mp360-cuota__ayuda {
  font-size: 0.75rem;         /* 12px */
  line-height: 1.5;
  color: rgba(21, 21, 21, 0.68);   /* ~5.2:1 sobre blanco */
}

.mp360-cuota__error {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sf-secondary-700, #7F4B3E);
}

.mp360-cuota__error[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Resultado — informa una relación, no dictamina

   Orden de lectura: proporción → entrega → lista → contado → nota.
   La caja violeta es la CONCLUSIÓN: tiene el padding y la línea de lectura de
   un bloque que se lee entero, no los de una etiqueta.
   -------------------------------------------------------------------------- */
/* La conclusión se lee de un vistazo: el número primero y grande, debajo de
   qué es. Sin adjetivo, sin semáforo y sin recomendación: informa una
   proporción y el juicio es de quien compra. */
.mp360-cuota__proporcion {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-container, 12px);
  background: var(--sf-primary-50);
  color: var(--sf-primary-800);
}

.mp360-cuota__proporcion-pct {
  font-size: clamp(1.75rem, 3.4vw, 2rem);   /* 28–32px */
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.mp360-cuota__proporcion-pie {
  font-size: 0.8125rem;       /* 13px */
  font-weight: 600;
  line-height: 1.4;
  color: rgba(51, 47, 123, 0.78);   /* --sf-primary-800 atenuado */
  text-wrap: pretty;
}

.mp360-cuota__proporcion[hidden] { display: none !important; }

.mp360-cuota__datos {
  display: flex;
  flex-direction: column;
  gap: var(--cu-dato);
}

/* Label a la izquierda, valor a la derecha. */
.mp360-cuota__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.875rem;
}

.mp360-cuota__fila dt { color: rgba(21, 21, 21, 0.68); }

.mp360-cuota__fila dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(21, 21, 21, 0.82);
}

/* El contado se destaca MODERADAMENTE: cierra el desglose y es el otro camino
   de compra. Sube a tinta plena y peso 700; no cambia de tamaño ni toma color
   de marca, que lo convertiría en una segunda conclusión al lado de la caja. */
.mp360-cuota__fila--contado {
  padding-top: var(--cu-dato);
  border-top: 1px solid var(--cu-linea);
}

.mp360-cuota__fila--contado dt { color: rgba(21, 21, 21, 0.82); }
.mp360-cuota__fila--contado dd { font-weight: 700; color: var(--sf-tinta); }

/* La nota legal se separa del último valor por el `gap` de la zona (14px), no
   por un margen propio: no es una fila más del desglose. */
.mp360-cuota__nota {
  font-size: 0.75rem;         /* 12px */
  line-height: 1.5;
  color: rgba(21, 21, 21, 0.68);   /* ~5.2:1 sobre blanco */
}

/* --------------------------------------------------------------------------
   Pie: las dos acciones, como un grupo

   El primario es el componente aprobado (assets/css/mp360-cta.css), variante
   `btn--primary-solid` —la inversión para superficies claras, la misma que usa
   la ficha de lote— y el secundario es `btn--secondary` con el glifo de
   WhatsApp. Acá NO se redefine forma, color, radio, ícono, expansión ni
   motion: sólo dónde van y cuánto ancho ocupan, que es lo que le toca al
   anfitrión.

   En escritorio el grupo se alinea a la derecha y cada botón mide según su
   rótulo: no hay franja de ancho completo ni superficie vacía.
   -------------------------------------------------------------------------- */
.mp360-cuota__pie {
  flex: 0 0 auto;
  padding: var(--cu-seccion) var(--cu-pad);
  padding-bottom: max(var(--cu-seccion), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cu-linea);
  background: var(--sf-blanco);
}

.mp360-cuota__acciones {
  display: flex;
  flex-direction: row-reverse;   /* el primario cierra el grupo, a la derecha */
  justify-content: flex-start;
  align-items: center;
  gap: 0.75rem;
}

/* El control y su bloque nacen en `scale(0)` porque en la barra y en la
   entrada los revela una timeline de GSAP. Acá entran con la superficie, así
   que el anfitrión los deja en su tamaño natural. */
.mp360-cuota__pie .btn {
  --btn-circle: 2.5rem;
  --btn-icon: 1.25rem;
  transform: none;
}

/* El atributo `hidden` pierde contra cualquier `display` de autor, y el
   componente declara `display: inline-flex`. Sin esto, el botón que el paso
   actual no ofrece se sigue viendo —en escritorio aparecía "Continuar" al lado
   de las dos salidas comerciales—. Va acá, fuera de toda media query: la
   composición de escritorio también oculta botones. */
.mp360-cuota__pie .btn[hidden] { display: none !important; }

.mp360-cuota__pie .btn .circle { transform: none; }

/* El ícono no se desplaza en hover: mismo criterio que la barra y la ficha. */
.mp360-cuota__pie .btn:hover .icon,
.mp360-cuota__pie .btn:focus-visible .icon { transform: none; }

/* El contorno de foco del componente es blanco, pensado para anfitriones
   oscuros. Este pie es blanco: cada botón lo pasa a su propio color. */
.mp360-cuota__pie .btn--primary-solid:focus-visible { outline-color: var(--primary-700); }
.mp360-cuota__pie .btn--secondary:focus-visible { outline-color: var(--secondary-700); }

/* ==========================================================================
   Escritorio de altura corta (1280×720, 1366×768 y equivalentes)

   La composición de dos columnas pide 463px de cuerpo y a 720px de alto sólo
   hay 423. Los 40px que faltan salen del aire exterior, no del contenido: el
   panel usa el mismo padding compacto de tablet.
   ========================================================================== */
@media (min-width: 900px) and (max-height: 819.98px) {
  .mp360-cuota { --cu-pad: 1.25rem; }
}

/* ==========================================================================
   Composición por pasos — un paso por pantalla

   Regla del proyecto: en mobile no se scrollea para leer el contenido de un
   panel. Cuando los tres pasos no entran a la vez, se muestra UNO por vez.

   El umbral es de ancho Y de alto: no alcanza con "es angosto". Un apaisado de
   740×360 tiene ancho de sobra y no le entra ninguna de las dos columnas.

   `--cu-pasos: 1` es además lo que lee el JS. Si este umbral cambia, cambia
   para los dos: no hay una segunda copia en JavaScript.
   ========================================================================== */
@media (max-width: 899.98px), (max-height: 619.98px) {
  .mp360-cuota { --cu-pasos: 1; }

  /* El panel se ata al alto ÚTIL —el del visual viewport, no el de layout—
     para que con el teclado abierto el pie suba con él. El alto CONCRETO de
     cada paso lo pone mp360-cuota.js midiendo el contenido real: acá sólo se
     declara el techo. */
  .mp360-surface--cuota {
    box-sizing: border-box;
    top: var(--mp360-vv-top, 0px);
    bottom: auto;
    height: var(--mp360-vv-h, 100%);
    align-items: end;              /* el panel se apoya abajo, junto al pulgar */
  }

  .mp360-surface--cuota .mp360-surface__dialog {
    height: auto;                  /* lo mide el JS, paso por paso */
    max-height: 100%;
  }

  /* El cuerpo deja de ser una grilla de tres áreas y pasa a ser el marco de
     un solo paso. */
  .mp360-cuota__grid {
    display: block;
    gap: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mp360-cuota[data-paso] .mp360-cuota__zona { display: none; }
  .mp360-cuota[data-paso="1"] .mp360-cuota__zona--plan,
  .mp360-cuota[data-paso="2"] .mp360-cuota__zona--ingreso,
  .mp360-cuota[data-paso="3"] .mp360-cuota__zona--resultado { display: flex; }

  .mp360-cuota__paso--resultado { display: block; }
  .mp360-cuota__zona--resultado { padding-top: 0; }
  .mp360-cuota__sub { display: block; }

  .mp360-cuota__sub {
    font-size: 0.875rem;
    line-height: 1.45;
    color: rgba(21, 21, 21, 0.68);
  }

  /* --------------------------------------------------------------------
     Cabecera: tres funciones, tres filas

     Antes compartían una sola franja el número de paso, el retroceso, el
     cierre, el nombre de la herramienta y la cuota elegida. Cinco cosas para
     entender en qué paso se estaba.
     -------------------------------------------------------------------- */
  .mp360-cuota__head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--cu-titulo);
    padding: var(--cu-pad);
    padding-right: var(--cu-pad);
  }

  /* El nombre de la herramienta deja de dibujarse: el título visible pasa a
     ser el del paso. Sigue siendo el nombre accesible del diálogo, que lo toma
     por `aria-labelledby`, así que se retira de la vista sin `display: none`. */
  .mp360-cuota__title {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Fila 1 · navegación. Sin hueco reservado en el paso 1: el retroceso
     simplemente no está. La derecha se la deja al cierre de la superficie. */
  .mp360-cuota__nav {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 2.75rem;                                  /* 44px */
    padding-right: calc(var(--sf-cierre) + 0.5rem);
  }

  .mp360-cuota__volver {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    margin-left: -0.5rem;        /* el rótulo vuelve al eje del contenido */
    border: 0;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sf-primary-700);
    border-radius: var(--radius-compact);
  }

  .mp360-cuota__volver[hidden] { display: none !important; }

  .mp360-cuota__volver:focus-visible {
    outline: 2px solid var(--sf-primary-700);
    outline-offset: 2px;
  }

  .mp360-cuota__volver-icon { display: block; width: 1rem; height: 1rem; }
  .mp360-cuota__volver-icon svg { display: block; width: 100%; height: 100%; }

  /* Fila 2 · progreso. Información secundaria: tres segmentos y su lectura. */
  .mp360-cuota__progreso {
    display: flex;
    align-items: center;
    gap: 0.625rem;
  }

  .mp360-cuota__segmentos {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .mp360-cuota__seg {
    display: block;
    width: 1.25rem;
    height: 3px;
    border-radius: 2px;
    background: rgba(21, 21, 21, 0.14);
    transition: background-color 0.3s var(--mp360-ease-ui, ease),
                width 0.3s var(--mp360-ease-ui, ease);
  }

  /* Los pasos dados quedan completos; el actual toma el violeta primario y
     algo más de largo; el que falta se queda neutro. */
  .mp360-cuota__seg.is-hecho { background: var(--sf-primary-700); opacity: 0.45; }
  .mp360-cuota__seg.is-actual { background: var(--sf-primary-700); width: 1.75rem; }

  .mp360-cuota__indicador {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(21, 21, 21, 0.5);
  }

  /* --------------------------------------------------------------------
     La cuota elegida, como pill de confirmación

     En la cabecera competía con el título. Acá acompaña al paso que la usa,
     debajo de su título, y se lee como estado: no es un botón.
     -------------------------------------------------------------------- */
  .mp360-cuota__resumen {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "label label label"
      "color monto plazo";
    align-items: baseline;
    justify-self: start;
    align-self: flex-start;
    text-align: left;
    margin-left: 0;
    max-width: 100%;
    column-gap: 0.375rem;
    row-gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-control);
    background: var(--sf-primary-50);
  }

  .mp360-cuota__resumen-label {
    grid-area: label;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgba(51, 47, 123, 0.72);
  }

  /* El punto del plan, mismo lenguaje que el panel de lotes y el plano. Lleva
     un aro interior porque hay planes claros —crema, amarillo— que sobre el
     fondo violeta suave se perderian. */
  .mp360-cuota__resumen-swatch {
    grid-area: color;
    align-self: center;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-circle, 50%);
    background: var(--mp360-band, transparent);
    box-shadow: inset 0 0 0 1px rgba(21, 21, 21, 0.32);
  }

  .mp360-cuota__resumen-amount { grid-area: monto; font-size: 1.125rem; line-height: 1.2; }

  .mp360-cuota__resumen-count {
    grid-area: plazo;
    font-size: 0.8125rem;
    color: rgba(51, 47, 123, 0.72);
  }

  .mp360-cuota__resumen-count::before { content: "\00b7\00a0"; }

  /* El resultado gana su rótulo: la caja dice qué es antes de dar el número. */
  .mp360-cuota__proporcion-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(51, 47, 123, 0.78);
  }

  /* --------------------------------------------------------------------
     Pie: sigue al contenido

     Sólo se pega abajo cuando el paso scrollea de verdad. Fijo siempre,
     reservaba una franja en pasos que no la necesitaban.
     -------------------------------------------------------------------- */
  .mp360-cuota.is-scrolleando .mp360-cuota__pie {
    position: sticky;
    bottom: 0;
    box-shadow: 0 -8px 16px -12px rgba(0, 0, 0, 0.4);
  }

  .mp360-cuota__pie .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
}

/* Entrada del paso cuando GSAP no esta cargado: misma direccion y la misma
   familia de curva. `--cu-desde` lo fija el JS segun se avance o se vuelva. */
@keyframes mp360CuotaPaso {
  from { opacity: 0; transform: translateX(var(--cu-desde, 24px)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ==========================================================================
   Una columna — tablet y mobile

   Los grupos conservan su orden y su contexto: elegir, comparar, resultado.
   ========================================================================== */
@media (max-width: 899.98px) {
  .mp360-surface--cuota .mp360-surface__dialog { width: 100%; }

  .mp360-cuota__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "plan"
      "ingreso"
      "resultado";
    gap: var(--cu-grupo);
  }

  /* En una columna el salto de grupo lo da el `gap` del grid. */
  .mp360-cuota__zona--resultado { padding-top: 0; }

  /* Apilados y a ancho completo, primario primero. El rótulo se centra sobre
     el control entero —igual que `btn--block` en el componente—, pero lo
     declara el anfitrión porque acá el ancho cambia por viewport y el
     modificador del componente es una clase fija en el marcado. */
  .mp360-cuota__acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .mp360-cuota__acciones .btn {
    width: 100%;
    padding-right: var(--btn-pad);
  }

  .mp360-cuota__acciones .btn .button-text {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: 0;
    text-align: center;
    padding-inline: calc(var(--btn-circle) + var(--btn-pad));
  }
}

/* ==========================================================================
   Alturas cortas — compactación, no scroll

   A 320×568 el paso 1 pide 7 opciones de 44px (el target táctil mínimo, que no
   se toca) más sus separaciones: 356px irreducibles. Con la cabecera y el pie
   de la escala normal quedaban 296px de alto útil y el paso desbordaba 60px.

   Lo que cede es la ESCALA de lo accesorio —paddings, título, rótulo del
   resumen, tamaño de la conclusión—, nunca el target táctil, el ritmo entre
   opciones ni el acceso al contenido.
   ========================================================================== */
@media (max-width: 899.98px) and (max-height: 700px) {
  .mp360-cuota { --cu-pad: 0.75rem; }

  /* El subtítulo del paso 1 explica lo que el propio paso ya muestra: una
     lista de cuotas con un botón que dice `Continuar`. En 568px de alto son
     34px que le hacen falta a las siete opciones, que no pueden bajar de los
     44px de objetivo táctil. Se retira antes que comprimir un target. */
  .mp360-cuota__sub { display: none; }

  /* La fila de navegación sólo tiene que dejarle la esquina al cierre, que
     mide 44px y arranca 8px adentro. */
  .mp360-cuota__nav { min-height: 2.5rem; }

  .mp360-cuota__title { font-size: 1.0625rem; }
  .mp360-cuota__paso { font-size: 1rem; }

  .mp360-cuota__resumen-label { font-size: 0.625rem; }
  .mp360-cuota__resumen-amount { font-size: 1.125rem; }
  .mp360-cuota__resumen-count { font-size: 0.6875rem; }

  /* La opción se queda EXACTAMENTE en su objetivo táctil de 44px. Medía 52:
     el padding vertical mas la caja de línea entre dos tamaños de fuente
     alineados por línea base la empujaban 8px por encima del mínimo, y siete
     filas convertían esos 8px en 56. Acá manda `min-height`, no el contenido. */
  .mp360-cuota__plan { padding: 0.25rem 0.75rem; }
  .mp360-cuota__plan-cuota,
  .mp360-cuota__plan-entrega { line-height: 1.2; }

  .mp360-cuota__proporcion { padding: 0.75rem 1rem; }
  .mp360-cuota__proporcion-pct { font-size: 1.625rem; }

  .mp360-cuota__input { font-size: 1.5rem; }
}

/* Pantallas muy cortas (320×568 y equivalentes): el panel va de borde a borde.

   Con la escala ya compactada al paso 1 le seguían faltando 28px, y los 45px
   que el velo se quedaba como aire alrededor del panel son exactamente lo que
   hacía falta. Ir a sangre no pierde ninguna información —el velo ahí no
   comunica nada, sólo separa— y es además el patrón normal de una superficie
   modal en un teléfono chico. Se respetan las áreas seguras del dispositivo. */
@media (max-width: 899.98px) and (max-height: 620px) {
  /* Los ultimos 7px del paso 1 y 15 del paso 3 salen del aire exterior, no
     del contenido: dos pixeles menos de padding por lado en la cabecera, el
     cuerpo y el pie alcanzan y no tocan ningun objetivo tactil. */
  .mp360-cuota {
    --cu-pad: 0.625rem;
    --cu-seccion: 0.75rem;
  }

  /* El paso 3 pedia 7px mas: salen del aire de la caja de conclusion y de un
     punto de su numero, que sigue siendo el dato mas grande de la pantalla. */
  .mp360-cuota__proporcion { padding: 0.625rem 0.875rem; }
  .mp360-cuota__proporcion-pct { font-size: 1.5rem; }

  .mp360-surface--cuota {
    padding: 0;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  .mp360-surface--cuota .mp360-surface__dialog { border-radius: 0; }
}

/* Vertical estrecho: el encabezado apila el resumen bajo el título para que la
   cuota elegida no compita por el ancho con el nombre de la herramienta. */
/* Vertical estrecho. Las reglas de cabecera-grilla que vivian aca se
   retiraron: la cabecera dejo de ser una grilla y la pill se mudo al cuerpo,
   asi que `grid-area` no ataba nada y `flex-direction: row` aplanaba la pill a
   un solo renglon, justo lo que habia que evitar. */
@media (max-width: 599.98px) {
  .mp360-cuota__paso { font-size: 1.0625rem; }
  .mp360-cuota__plan-cuota { font-size: 0.875rem; }
}

/* Apaisado corto: el alto útil ronda los 360px, así que la composición por
   pasos ya está activa por la condición de alto. Acá sólo se compacta lo que
   sigue siendo demasiado alto para ese espacio.

   Las opciones pasan a DOS columnas: siete filas apiladas piden 356px y no hay
   de dónde sacarlos. En dos columnas piden 200 y el paso entra entero. */
@media (orientation: landscape) and (max-height: 560px) {
  .mp360-surface--cuota .mp360-surface__dialog { max-height: 100%; }

  .mp360-cuota {
    --cu-pad: 0.75rem;
    --cu-grupo: 0.75rem;
    --cu-seccion: 0.625rem;
    /* Las cuatro filas de opciones desbordaban 3px. Se los sacan los tres
       espacios entre filas, que bajan de 8 a 6: sigue habiendo separación
       perceptible y el paso entra entero. */
    --cu-dato: 0.375rem;
  }

  /* Apaisado: sobra ancho y falta alto. Navegacion y progreso comparten fila
     —`← Cambiar cuota` a la izquierda, `Paso 2 de 3` al lado— y el paso
     recupera los 21px de la fila que se ahorra. El cierre sigue teniendo su
     esquina: el padding derecho de la cabecera se la reserva. */
  .mp360-cuota__head {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.875rem;
    padding-right: calc(var(--cu-pad) + var(--sf-cierre));
  }

  .mp360-cuota__nav { min-height: 2.25rem; padding-right: 0; }
  .mp360-cuota__volver { min-height: 2.25rem; }

  .mp360-cuota__title { font-size: 1rem; }
  .mp360-cuota__paso { font-size: 0.9375rem; }
  .mp360-cuota__resumen-amount { font-size: 1.125rem; }
  .mp360-cuota__proporcion-pct { font-size: 1.5rem; }

  .mp360-cuota__planes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cu-dato);
  }

  .mp360-cuota__plan { min-height: 2.5rem; padding: 0.25rem 0.625rem; }

  /* La cuota y la entrega vuelven a la MISMA linea. Apiladas venian de cuando
     las columnas eran angostas; con la grilla de dos columnas cada una mide
     355px y las dos entran de sobra en un renglon. Apiladas, cada fila pedia
     46px en vez de 40 y las cuatro filas se llevaban los 21px que hacian
     scrollear el paso. */
  .mp360-cuota__plan-txt { flex-direction: row; align-items: baseline; gap: 0.75rem; }

  .mp360-cuota__proporcion { padding: 0.625rem 0.875rem; }
  .mp360-cuota__proporcion-pct { font-size: 1.375rem; }
  .mp360-cuota__proporcion-pie { font-size: 0.75rem; }
  .mp360-cuota__input { font-size: 1.5rem; }

  /* La cabecera no puede llevarse 107 de los 360px de alto. El resumen pasa a
     UNA línea —rótulo, importe y plazo en fila— en vez de las tres apiladas de
     vertical. */
  .mp360-cuota__resumen {
    flex-direction: row;
    align-items: baseline;
    gap: 0.375rem;
  }

  .mp360-cuota__resumen-label { letter-spacing: 0.02em; }

  /* El resultado también se reparte a lo ancho: la conclusión a la izquierda y
     el desglose a la derecha. Apilados pedían 211px de alto y sobraban 47.
     La especificidad iguala a la del selector que enciende el paso activo
     (`[data-paso="3"] .mp360-cuota__zona--resultado`), que declara `flex`. */
  .mp360-cuota[data-paso="3"] .mp360-cuota__zona--resultado {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "titulo titulo"
      "prop   datos"
      "prop   nota";
    align-content: start;
    column-gap: 1rem;
    row-gap: var(--cu-seccion);
  }

  .mp360-cuota__paso--resultado { grid-area: titulo; }
  .mp360-cuota__proporcion { grid-area: prop; align-self: start; }
  .mp360-cuota__datos { grid-area: datos; }
  .mp360-cuota__nota { grid-area: nota; align-self: end; }

  /* El pie vuelve a ser una FILA. Apilado, los dos botones del último paso se
     comían 130px de los 360 de alto y el resultado desbordaba 116px. En fila
     ocupan 73 y el paso entra entero. */
  .mp360-cuota__acciones {
    flex-direction: row-reverse;
    align-items: center;
  }

  .mp360-cuota__acciones .btn {
    width: auto;
    padding-right: var(--btn-gap);
  }

  .mp360-cuota__acciones .btn .button-text {
    position: relative;
    left: auto;
    right: auto;
    margin-left: calc(var(--btn-circle) + var(--btn-gap));
    text-align: left;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp360-cuota__plan,
  .mp360-cuota__campo { transition: none !important; }
}