/* ZOESYSTEM MLM · producto.css (M09)
   Bloque B: S04 comparador, S05 flujo «Del registro al cobro» y S06 simulador de comisiones. Se carga DESPUÉS de
   secciones.css y ANTES de animaciones.css. Mismas capas que el resto; solo tokens de base.css (el único color suelto es el
   de la burbuja de WhatsApp ilustrada, permitido por la skill de diseño, 3.4). Diseño desde el celular (min-width).
   Todo movimiento va en la capa «animaciones» y solo con «no-preference». Nada depende del JavaScript para leerse:
   las clases «comparador--activo», «flujo--activo» y «simulador--activo» las pone cada módulo al arrancar. */

@layer base, componentes, secciones, animaciones;

/* ====================================================================== componentes */
@layer componentes {

  /* ---------- Control segmentado (skill 9.2): comparador (2 opciones) y monedas (4) ---------- */
  .segmentado {
    --n: 2;
    --i: 0;
    position: relative;
    isolation: isolate;
    display: flex;
    padding: 4px;
    border-radius: var(--r-pill);
    background: var(--mist-200);
  }
  .segmentado--4 { --n: 4; }
  .segmentado[data-activa="1"] { --i: 1; }
  .segmentado[data-activa="2"] { --i: 2; }
  .segmentado[data-activa="3"] { --i: 3; }
  /* Indicador: se desliza hasta la opción elegida */
  .segmentado::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 8px) / var(--n));
    border-radius: var(--r-pill);
    background: var(--white);
    box-shadow: var(--sombra-1);
    transform: translateX(calc(var(--i) * 100%));
  }
  .segmentado__op {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 8px 10px;
    border: 2px solid transparent;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-700);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }
  .segmentado__op[aria-pressed="true"] { color: var(--ink-900); font-weight: 800; }
  @media (hover: hover) {
    .segmentado__op:hover { color: var(--ink-900); }
  }
  /* Variante oscura: cápsula de negro al 25 % e indicador menta */
  .segmentado--oscuro { background: rgba(0, 0, 0, .25); }
  .segmentado--oscuro::before { background: var(--zoe-200); box-shadow: none; }
  .segmentado--oscuro .segmentado__op { color: var(--on-dark); }
  .segmentado--oscuro .segmentado__op[aria-pressed="true"] { color: var(--ink-900); }
  @media (hover: hover) {
    .segmentado--oscuro .segmentado__op:hover { color: var(--white); }
    .segmentado--oscuro .segmentado__op[aria-pressed="true"]:hover { color: var(--ink-900); }
  }
  /* Alta visibilidad: sin colores de fondo, la opción elegida lleva borde */
  @media (forced-colors: active) {
    .segmentado__op[aria-pressed="true"] { border-color: Highlight; }
  }

  /* ---------- Burbuja ilustrada (decorativa): mensaje de WhatsApp o aviso de cobro ---------- */
  .burbuja {
    --burbuja-wa: #DCF8C6; /* solo la burbuja de WhatsApp ilustrada (skill 3.4) */
    display: inline-flex;
    align-items: flex-start;
    gap: var(--e-2);
    max-width: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: 16px 16px 16px 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }
  .burbuja--wa { background: var(--burbuja-wa); color: var(--ink-900); }
  .burbuja--ok { background: var(--zoe-100); color: var(--zoe-800); font-weight: 800; }
  .burbuja .icono { width: 18px; height: 18px; margin-top: 1px; }

  /* ---------- Celular de ejemplo (skill 9.13). Ilustración: nada de esto se pulsa. ---------- */
  .celular { width: 100%; margin-inline: auto; }
  .celular__marco {
    padding: 12px;
    border-radius: 44px;
    background: var(--pine-950);
    box-shadow: var(--sombra-3);
  }
  .pantalla {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 34px;
    background: var(--mist-50);
    color: var(--ink-900);
    font-size: 13px;
    line-height: 1.3;
    text-align: left;
    overflow: hidden;
  }
  .pantalla__app { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; }
  .pantalla__app picture { flex: none; }
  .pantalla__app img { width: 20px; height: 21px; max-width: none; }
  .pantalla__titulo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); font-size: 15px; font-weight: 800; }
  .pantalla__titulo .etiqueta { flex: none; padding: 1px 8px; font-size: 13px; }
  .pantalla__segmentos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .pantalla__segmentos span { height: 4px; border-radius: 2px; background: var(--mist-200); }
  /* Los segmentos se llenan hasta el paso de la pantalla */
  .pantalla[data-n="1"] .pantalla__segmentos span:nth-child(-n+1),
  .pantalla[data-n="2"] .pantalla__segmentos span:nth-child(-n+2),
  .pantalla[data-n="3"] .pantalla__segmentos span:nth-child(-n+3),
  .pantalla[data-n="4"] .pantalla__segmentos span:nth-child(-n+4) { background: var(--zoe-700); }
  .pantalla__monto {
    display: grid;
    gap: 2px;
    padding: 8px 12px;
    border-radius: 14px;
    background: var(--pine-900);
    color: var(--white);
  }
  .pantalla__monto strong { font-size: 21px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .pantalla__monto span { color: var(--on-dark); font-size: 13px; line-height: 1.3; }
  .pantalla__filas { display: grid; margin: 0; padding: 0; list-style: none; }
  .pantalla__filas li {
    display: flex;
    justify-content: space-between;
    gap: var(--e-2);
    padding: 4px 0;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
  }
  .pantalla__filas li span:first-child { color: var(--ink-600); }
  .pantalla__filas li span:last-child { color: var(--ink-900); font-weight: 700; text-align: right; }
  .pantalla__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: auto;
    border-radius: var(--r-pill);
    background: var(--zoe-700);
    color: var(--white);
    font-size: 14px;
    font-weight: 800;
  }

  /* Variante en tarjeta (celular): pantalla de 300 px de alto, debajo del texto del paso */
  .celular--tarjeta { max-width: 260px; }
  .celular--tarjeta .celular__marco { padding: 8px; border-radius: 34px; }
  .celular--tarjeta .pantalla { height: 300px; border-radius: 26px; }

  /* Variante fija (escritorio): la ventana reserva su alto y apila las 4 pantallas */
  .celular--fijo { max-width: 340px; }
  .celular__ventana {
    position: relative;
    height: clamp(380px, calc(100vh - 250px), 560px);
    border-radius: 34px;
    background: var(--mist-50);
    overflow: hidden;
  }
  @supports (height: 1svh) {
    .celular__ventana { height: clamp(380px, calc(100svh - 250px), 560px); }
  }
  .celular__ventana .pantalla {
    position: absolute;
    inset: 0;
    gap: var(--e-3);
    padding: var(--e-5) var(--e-4);
    border-radius: 0;
    font-size: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
  }
  .celular__ventana .pantalla__app,
  .celular__ventana .pantalla__titulo { font-size: 16px; }
  .celular__ventana .pantalla__monto { padding: var(--e-4); gap: var(--e-1); }
  .celular__ventana .pantalla__monto strong { font-size: 28px; }
  .celular__ventana .pantalla__monto span { font-size: 14px; }
  .celular__ventana .pantalla__filas li { padding: var(--e-2) 0; font-size: 15px; }
  .celular__ventana .pantalla__boton { min-height: 48px; font-size: 16px; }
  /* Solo la pantalla del paso activo se ve */
  .flujo[data-paso="1"] .celular__ventana .pantalla[data-n="1"],
  .flujo[data-paso="2"] .celular__ventana .pantalla[data-n="2"],
  .flujo[data-paso="3"] .celular__ventana .pantalla[data-n="3"],
  .flujo[data-paso="4"] .celular__ventana .pantalla[data-n="4"] {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* ---------- Rótulo «Datos ficticios» seguido de su nota corta ---------- */
  .rotulo-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-2);
    margin: 0;
    max-width: none;
    color: var(--ink-700);
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ====================================================================== secciones */
@layer secciones {

  /* ---------- S04 Problema y solución ---------- */
  .comparador__intro { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
  .comparador__intro p { margin: 0; }
  /* El control ocupa su lugar desde el inicio (sin saltos de página); sin JavaScript queda invisible y fuera del teclado */
  .comparador__control { max-width: 460px; min-height: 56px; }
  .comparador:not(.comparador--activo) .comparador__control { visibility: hidden; }
  .comparador__vistas { display: grid; gap: var(--e-7); }
  .vista { display: grid; gap: var(--e-5); min-width: 0; align-content: start; }
  .vista__lista { display: grid; gap: var(--e-4); min-width: 0; align-content: start; }
  .vista__panel { display: grid; gap: var(--e-3); min-width: 0; align-content: start; }
  .vista__titulo { font-size: 21px; }

  /* Con JavaScript las dos vistas se apilan en el mismo lugar: el alto es el de la más alta y no cambia al alternar */
  .comparador--activo .comparador__vistas { gap: 0; }
  .comparador--activo .vista { grid-area: 1 / 1; }
  .comparador--activo .vista--inactiva { visibility: hidden; opacity: 0; pointer-events: none; }

  /* Subtítulo: sin JavaScript se ve «Sin sistema» (H3 visible); con JavaScript el control ya lo dice y el H3 lo leen los lectores */
  .vista__t-lector { display: none; }
  .comparador--activo .vista__t-visible { display: none; }
  .comparador--activo .vista__t-lector { display: block; }
  .comparador--activo .vista__titulo { margin: 0; }

  .problemas { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
  .problema {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--e-3);
    align-items: start;
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-md);
    background: var(--white);
    font-size: 17px;
    line-height: 1.45;
    overflow-wrap: break-word;
  }
  .problema__icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
  .problema__icono .icono { width: 20px; height: 20px; }
  .problema__icono--mal { background: var(--error-50); color: var(--error-700); }
  .problema__icono--bien { background: var(--zoe-100); color: var(--zoe-800); }

  /* Hoja de cálculo con errores (ilustración, datos ficticios) */
  .panel { display: grid; gap: var(--e-3); min-width: 0; max-width: 460px; }
  .hoja {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    box-shadow: var(--sombra-2);
  }
  .hoja__titulo {
    margin: 0;
    padding: var(--e-2) var(--e-3);
    max-width: none;
    background: var(--mist-200);
    color: var(--ink-700);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .hoja__tabla { width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
  .hoja__tabla th,
  .hoja__tabla td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; }
  .hoja__tabla th { background: var(--mist-100); color: var(--ink-900); font-size: 13px; font-weight: 800; }
  .hoja__tabla .error { background: var(--error-50); color: var(--error-700); font-weight: 700; }
  .hoja__tabla .total th,
  .hoja__tabla .total td { font-weight: 800; }

  /* Detalle de comisión calculado (ilustración, datos ficticios) */
  .detalle {
    padding: var(--e-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--white);
    box-shadow: var(--sombra-2);
  }
  .detalle__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-2); margin-bottom: var(--e-3); }
  .detalle__titulo { margin: 0; max-width: none; font-size: 15px; font-weight: 800; line-height: 1.3; }
  .detalle__filas { display: grid; margin: 0; }
  .detalle__fila {
    display: flex;
    justify-content: space-between;
    gap: var(--e-3);
    padding: var(--e-2) 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
    line-height: 1.35;
  }
  .detalle__fila dt { min-width: 0; color: var(--ink-700); }
  .detalle__fila dd { flex: none; margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
  .detalle__fila--total { padding-top: var(--e-3); border-top: 2px solid var(--ink-900); font-size: 16px; }
  .detalle__fila--total dt { color: var(--ink-900); font-weight: 800; }
  .detalle__fila--total dd { font-weight: 800; }

  @media (min-width: 900px) {
    .comparador__intro { grid-template-columns: minmax(0, 34em); margin-bottom: var(--e-6); }
    .vista { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-7); align-items: start; }
    .vista__titulo { grid-column: 1 / -1; }
    .comparador--activo .vista__titulo { grid-column: auto; }
    .vista__lista { grid-column: 1; }
    .vista__panel { grid-column: 2; }
  }

  /* ---------- S05 Del registro al cobro ---------- */
  .flujo__intro { margin: 0; }
  .flujo__intro--escritorio { display: none; }
  .flujo { display: grid; gap: var(--e-5); }
  .flujo__cuerpo { min-width: 0; }

  /* Botones de paso (celular): enlaces a #paso-1 … #paso-4, 2 × 2 o en fila según el ancho */
  .flujo__botones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-2); }
  .flujo__boton {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    min-height: 48px;
    padding: 8px 12px;
    border: 1.5px solid var(--borde-campo);
    border-radius: var(--r-pill);
    background: var(--white);
    color: var(--ink-900);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .flujo__boton:hover { color: var(--ink-900); text-decoration: none; }
  .flujo__num {
    display: grid;
    flex: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--mist-200);
    color: var(--ink-900);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
  }
  .flujo__boton[aria-current="true"] { border-color: var(--zoe-700); background: var(--zoe-700); color: var(--white); }
  .flujo__boton[aria-current="true"]:hover { color: var(--white); }
  .flujo__boton[aria-current="true"] .flujo__num { background: var(--white); color: var(--zoe-800); }
  @media (hover: hover) {
    .flujo__boton:not([aria-current="true"]):hover { border-color: var(--zoe-700); }
  }
  @media (min-width: 560px) {
    .flujo__botones { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* Carrusel con imán: tarjetas al 86 % del ancho para que asome la siguiente */
  .flujo__carrusel {
    position: relative;
    margin-inline: calc(-1 * var(--margen));
    padding: 4px var(--margen) var(--e-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margen);
    scrollbar-width: thin;
  }
  .flujo__pasos { display: flex; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
  .paso { flex: 0 0 min(86%, 420px); min-width: 0; scroll-snap-align: start; }
  .paso__grupo {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    height: 100%;
    padding: var(--e-5) var(--e-4);
    border-radius: var(--r-lg);
    background: var(--mist-50);
  }
  .paso__numero {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 0 var(--e-3);
    border-radius: 50%;
    background: var(--mist-200);
    color: var(--ink-700);
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }
  .paso__titulo { margin: 0 0 var(--e-2); color: var(--ink-900); }
  .paso__texto { flex: 1 1 auto; min-width: 0; }
  .paso__texto p:not(.paso__numero) { margin: 0; }
  .paso__pantalla { display: grid; gap: var(--e-3); justify-items: center; min-width: 0; }
  .paso__pantalla .rotulo-fila { justify-content: center; text-align: center; }
  .paso__ver { display: none; margin-top: var(--e-4); }

  /* Celular fijo: solo en escritorio y con JavaScript */
  .flujo__lateral { display: none; }

  @media (min-width: 560px) {
    .paso__grupo { padding: var(--e-5); }
  }

  @media (min-width: 900px) {
    .flujo__intro--movil { display: none; }
    .flujo__intro--escritorio { display: block; }
    .flujo__botones { display: none; }
    .flujo__carrusel { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
    .flujo__pasos { display: grid; gap: var(--e-5); }
    .paso { flex: none; }
    /* Sin JavaScript: cada paso muestra su pantalla al lado del texto */
    .paso__grupo { display: grid; grid-template-columns: minmax(0, 1fr) 260px; align-items: center; gap: var(--e-6); padding: var(--e-6); }
    .paso__ver { margin-top: var(--e-5); }

    .flujo--activo .flujo__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--e-8); }
    .flujo--activo .flujo__lateral { position: relative; display: block; overflow-x: clip; }
    .flujo--activo .flujo__pasos { gap: 0; }
    .flujo--activo .paso {
      min-height: 460px;
      padding-left: var(--e-5);
      border-left: 4px solid var(--line);
    }
    .flujo--activo .paso--activo { border-left-color: var(--zoe-700); }
    .flujo--activo .paso__grupo { display: block; height: auto; padding: var(--e-5) 0; background: transparent; }
    .flujo--activo .paso__pantalla { display: none; }
    .flujo--activo .paso__ver { display: inline-flex; }
    .flujo--activo .paso__titulo { color: var(--ink-600); font-family: var(--font-display); font-size: clamp(20px, 1vw + 16.4px, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
    .flujo--activo .paso--activo .paso__titulo { color: var(--ink-900); }
    .flujo--activo .paso__numero { background: var(--mist-200); color: var(--ink-700); }
    .flujo--activo .paso--activo .paso__numero { background: var(--pine-900); color: var(--zoe-200); }
    .flujo--activo .paso__texto p:not(.paso__numero) { font-size: 18px; color: var(--ink-700); max-width: 30em; }
    .paso__ver[aria-pressed="true"] { border-color: var(--zoe-700); background: var(--zoe-700); color: var(--white); }

    .flujo__sticky { position: sticky; top: calc(var(--header-h) + 28px); display: grid; gap: var(--e-3); justify-items: center; }
    .flujo__anillo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 116%;
      aspect-ratio: 1;
      margin: 0;
      color: var(--zoe-400);
      opacity: .18;
      pointer-events: none;
      transform: translate(-50%, -50%) rotate(0deg);
    }
    .flujo__anillo .icono { width: 100%; height: 100%; }
    .flujo[data-paso="2"] .flujo__anillo { transform: translate(-50%, -50%) rotate(90deg); }
    .flujo[data-paso="3"] .flujo__anillo { transform: translate(-50%, -50%) rotate(180deg); }
    .flujo[data-paso="4"] .flujo__anillo { transform: translate(-50%, -50%) rotate(270deg); }
    .flujo__sticky .celular,
    .flujo__sticky .rotulo-fila { position: relative; }
    .flujo__sticky .rotulo-fila { justify-content: center; text-align: center; }
  }

  /* ---------- S06 Simulador de comisiones ---------- */
  .simulador {
    display: grid;
    gap: var(--e-5);
    grid-template-areas: "cab" "arbol" "controles" "registro" "nota";
    min-width: 0;
    padding: var(--e-5) var(--e-4);
    border-radius: var(--r-lg);
    background: var(--pine-900);
    box-shadow: var(--sombra-3);
  }
  .simulador > * { min-width: 0; }
  .simulador__cab { grid-area: cab; }
  .simulador__cab h2 { margin-bottom: var(--e-4); color: var(--white); }
  .simulador__cab p { margin: 0; color: var(--on-dark); }
  .simulador__controles { grid-area: controles; display: grid; gap: var(--e-4); align-content: start; }
  .simulador__controles .acciones { align-items: stretch; }
  .simulador__nota { grid-area: nota; display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; max-width: 46em; color: var(--on-dark); font-size: 13px; line-height: 1.45; align-self: start; }
  .simulador__nota .icono { width: 14px; height: 14px; margin-top: 2px; }
  .simulador__nota p { margin: 0; max-width: none; }
  .simulador__nota p + p { margin-top: var(--e-1); }

  /* Árbol de la red de ejemplo: nodos en HTML (texto real), líneas en SVG detrás */
  .arbol-envoltura { grid-area: arbol; }
  .arbol {
    position: relative;
    height: 300px;
    padding: 12px 8px;
    border: 1px solid var(--pine-line);
    border-radius: var(--r-lg);
    background: var(--pine-925);
  }
  .arbol__lienzo { position: relative; height: 100%; }
  .arbol__enlaces {
    position: absolute;
    top: 18px;
    left: 0;
    width: 100%;
    height: 72%;
    max-width: none;
    overflow: visible;
  }
  .enlace {
    fill: none;
    stroke: var(--pine-line);
    stroke-width: 2px;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .enlace--oro { stroke: var(--coin-400); }

  .nodo {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: 2px;
    width: 25%;
    text-align: center;
    transform: translateX(-50%);
  }
  .nodo--a { top: 0; left: 50%; }
  .nodo--b { top: 36%; left: 27%; }
  .nodo--c { top: 36%; left: 73%; }
  .nodo--d { top: 72%; left: 14%; }
  .nodo--e { top: 72%; left: 40%; }
  .nodo--f { top: 72%; left: 60%; }
  .nodo--g { top: 72%; left: 86%; }
  .nodo__circulo {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid transparent;
    border-radius: 50%;
    background: var(--pine-700);
    color: var(--on-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
  }
  .nodo__nombre { color: var(--white); font-size: 14px; font-weight: 700; line-height: 1.1; }
  .nodo__monto {
    min-height: 17px;
    color: var(--on-dark);
    font-size: 13px;
    font-weight: 700;
    line-height: 17px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  /* Quien recibió comisión: borde y monto dorados (el monto con cifras es la señal; el color acompaña) */
  .nodo--gana .nodo__circulo { border-color: var(--coin-400); }
  .nodo--gana .nodo__monto { color: var(--coin-400); }
  /* Quien compró: blanco y 10 % más grande, y el monto dice «compró» */
  .nodo--compra .nodo__circulo { border-color: var(--white); background: var(--white); color: var(--ink-900); transform: scale(1.1); }
  .nodo--compra .nodo__monto { color: var(--white); }
  .nodo__flota {
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    color: var(--coin-400);
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
  }

  /* Registro */
  .registro {
    grid-area: registro;
    display: grid;
    gap: var(--e-3);
    align-content: start;
    min-height: 232px;
    padding: var(--e-4);
    border: 1px solid var(--pine-line);
    border-radius: var(--r-md);
    background: var(--pine-925);
  }
  .registro__total { margin: 0; max-width: none; color: var(--on-dark); font-size: 15px; font-weight: 700; line-height: 1.4; }
  .registro__ciclo { display: inline-block; font-variant-numeric: tabular-nums; }
  .registro__monto { color: var(--coin-400); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .registro__mensaje { margin: 0; max-width: none; color: var(--on-dark); font-size: 15px; line-height: 1.45; }
  .registro__lista { display: grid; margin: 0; padding: 0; list-style: none; align-content: start; }
  .registro__linea {
    min-height: 48px;
    padding: 8px 0;
    border-top: 1px solid var(--pine-line);
    color: var(--white);
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: break-word;
  }
  .registro__linea:first-child { border-top: 0; }
  /* Comprobante dorado de cierre de ciclo */
  .comprobante {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-3) var(--e-4);
    border-radius: var(--r-sm);
    background: var(--coin-400);
    color: var(--coin-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.4;
  }
  .comprobante .icono { width: 20px; height: 20px; margin-top: 1px; }
  .comprobante p { margin: 0; max-width: none; }

  @media (min-width: 560px) {
    .simulador { padding: var(--e-6) var(--e-5); }
  }
  @media (min-width: 900px) {
    .simulador {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto auto 1fr;
      grid-template-areas: "cab arbol" "controles arbol" "registro arbol" "nota arbol";
      column-gap: var(--e-7);
      padding: var(--e-7);
      border-radius: var(--r-xl);
    }
    .arbol-envoltura { align-self: start; position: sticky; top: calc(var(--header-h) + 28px); }
    .arbol { height: 440px; padding: 16px 12px; }
    .arbol__lienzo { height: 100%; }
    .nodo__circulo { width: 44px; height: 44px; font-size: 17px; }
    .arbol__enlaces { top: 22px; }
    .nodo__nombre { font-size: 15px; }
    .nodo__monto { font-size: 14px; }
    /* Alto fijo con 8 líneas (cada línea admite 2 renglones) */
    .registro__lista { height: 384px; overflow: hidden; }
    .registro__linea { display: flex; align-items: center; height: 48px; padding: 4px 0; overflow: hidden; }
    .registro__linea > span {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
    }
    .registro { min-height: 0; }
  }
}

/* ====================================================================== animaciones */
@layer animaciones {

  @media (prefers-reduced-motion: no-preference) {

    /* Control segmentado: el indicador se desliza (250 ms) */
    .segmentado::before { transition: transform var(--dur-2) var(--curva-estandar); }
    .segmentado__op { transition: color var(--dur-1) var(--curva-estandar); }

    /* Comparador: la vista que sale se desvanece y la que entra sube 12 px; las líneas entran con 40 ms de separación */
    .comparador--activo .vista {
      transition: opacity var(--dur-3) var(--curva-salida), transform var(--dur-3) var(--curva-salida), visibility 0s linear 0s;
    }
    .comparador--activo .vista--inactiva {
      transform: translateY(12px);
      transition: opacity var(--dur-2) var(--curva-estandar), transform var(--dur-2) var(--curva-estandar), visibility 0s linear var(--dur-2);
    }
    .comparador--activo .problema { transition: opacity var(--dur-2) var(--curva-salida), transform var(--dur-2) var(--curva-salida); }
    .comparador--activo .vista--inactiva .problema { opacity: 0; transform: translateY(8px); }
    .comparador--activo .vista:not(.vista--inactiva) .problema:nth-child(2) { transition-delay: 40ms; }
    .comparador--activo .vista:not(.vista--inactiva) .problema:nth-child(3) { transition-delay: 80ms; }
    .comparador--activo .vista:not(.vista--inactiva) .problema:nth-child(4) { transition-delay: 120ms; }
    .comparador--activo .vista:not(.vista--inactiva) .problema:nth-child(5) { transition-delay: 160ms; }

    /* Flujo: la pantalla del celular sube 16 px y aparece (350 ms); el anillo gira (800 ms) */
    .celular__ventana .pantalla {
      transition: opacity 350ms var(--curva-salida), transform 350ms var(--curva-salida), visibility 0s linear 350ms;
    }
    .flujo[data-paso="1"] .celular__ventana .pantalla[data-n="1"],
    .flujo[data-paso="2"] .celular__ventana .pantalla[data-n="2"],
    .flujo[data-paso="3"] .celular__ventana .pantalla[data-n="3"],
    .flujo[data-paso="4"] .celular__ventana .pantalla[data-n="4"] { transition-delay: 0s; }
    .flujo__anillo { transition: transform 800ms var(--curva-estandar); }
    .flujo__boton, .flujo__num, .paso__numero, .paso__titulo, .paso { transition: color var(--dur-2) var(--curva-estandar), background-color var(--dur-2) var(--curva-estandar), border-color var(--dur-2) var(--curva-estandar); }

    /* Simulador: nodos y líneas */
    .nodo__circulo {
      transition: transform var(--dur-2) var(--curva-salida), background-color var(--dur-2) var(--curva-estandar),
        border-color var(--dur-2) var(--curva-estandar), color var(--dur-2) var(--curva-estandar);
    }
    .nodo__monto { transition: color var(--dur-2) var(--curva-estandar); }
    .enlace { transition: stroke var(--dur-2) var(--curva-estandar); }
  }

  /* Reducir movimiento: cambios instantáneos; los colores sí cambian (la información se mantiene) */
  @media (prefers-reduced-motion: reduce) {
    .comparador--activo .vista--inactiva { transform: none; }
    .comparador--activo .vista--inactiva .problema { transform: none; }
    .celular__ventana .pantalla { transform: none; }
    .nodo--compra .nodo__circulo { transform: none; }
    .flujo__anillo { transition: none; }
  }
}