/* ZOESYSTEM MLM · futuro.css (pulido visual «red bioluminiscente», 2026-11-11; skill de diseño 1.2)
   Capa visual sobre lo existente: superficies pino con rejilla de datos, halos menta, tarjetas con borde neón, órbitas
   con el anillo de la marca, titulares Unbounded más grandes y cortes en diagonal entre secciones oscuras y claras.
   Va DESPUÉS de formulario.css y ANTES de animaciones.css: en cada capa gana a las reglas de igual peso de los demás archivos.
   Solo tokens de base.css o transparencias de colores de marca; ningún color de texto nuevo (contraste en la skill, 3.2).
   Nada depende del JavaScript: lo que sigue al puntero (clase «efectos-puntero», js/m/efectos.js) solo existe con puntero
   fino y sin «reducir movimiento». Los movimientos van en la capa «animaciones» y solo con «no-preference». */

@layer base, componentes, secciones, animaciones;

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

  /* Encabezado: filo neón de 1 px abajo (sombra interior: no cambia el alto de 64/72 px) */
  .encabezado { box-shadow: inset 0 -1px 0 var(--borde-neon); }
  .encabezado--sombra { box-shadow: inset 0 -1px 0 var(--borde-neon), var(--sombra-2); }

  /* Botones primarios: destello que cruza al pasar el puntero (capa propia; solo se mueve con transform) */
  .btn--menta, .btn--verde { isolation: isolate; overflow: hidden; }
  .btn--menta::after, .btn--verde::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
    transform: translateX(-100%) skewX(-18deg);
    pointer-events: none;
  }
  /* Sobre el verde el destello es más tenue: el texto blanco nunca baja de 4,5:1 */
  .btn--verde::after { background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .16), rgba(255, 255, 255, 0)); }
  .btn--menta { box-shadow: var(--sombra-menta), 0 0 0 1px rgba(116, 231, 202, .45); }
  .btn--verde { box-shadow: 0 12px 26px -14px rgba(11, 122, 105, .85); }
  .btn--borde-claro { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
  @media (hover: hover) {
    .btn--borde-claro:hover:not(:disabled):not([aria-disabled="true"]) { box-shadow: 0 0 22px -6px rgba(116, 231, 202, .55); }
  }

  /* Control segmentado: indicador con filo; en oscuro, halo menta */
  .segmentado::before { box-shadow: var(--sombra-1), 0 0 0 1px rgba(11, 122, 105, .14); }
  .segmentado--oscuro { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--borde-neon); }
  .segmentado--oscuro::before { box-shadow: 0 0 22px -4px rgba(116, 231, 202, .75); }

  /* Celular de ejemplo: filo neón y halo verde */
  .celular__marco { box-shadow: var(--sombra-3), 0 0 0 1px var(--borde-neon), 0 40px 90px -40px rgba(24, 152, 136, .6); }

  /* Órbita: el anillo abierto de la marca con dos órbitas punteadas y sus extremos como nodos. Decorativa (aria-hidden). */
  .orbita { display: block; overflow: visible; pointer-events: none; }
  .orbita__trazos { fill: none; stroke: var(--zoe-200); stroke-opacity: .22; stroke-width: .16; stroke-dasharray: .45 1.6; }
  .orbita__anillo { fill: none; stroke: var(--zoe-200); stroke-opacity: .42; stroke-width: .24; stroke-linecap: round; }
  .orbita__nodo { fill: var(--zoe-200); }
}

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

  /* ---------- Tipografía: titulares de sección más protagonistas, con degradado de marca ---------- */
  .titular-2 {
    font-size: clamp(28px, 2.9vw + 17.6px, 56px);
    line-height: 1.05;
    letter-spacing: -.03em;
  }
  /* En las tarjetas oscuras de dos columnas (simulador y demo) y en las columnas angostas de multipaís y preguntas el titular conserva la escala 1.1: a 56 px bajaba a 4 y 5 renglones */
  .simulador__cab .titular-2, .demo__texto .titular-2 { font-size: clamp(28px, 2vw + 16px, 46px); line-height: 1.08; }
  @media (min-width: 900px) {
    #t-multipais, #t-preguntas { font-size: clamp(28px, 2vw + 16px, 46px); line-height: 1.08; }
  }

  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .titular-2, .inicio__titulo .resalte {
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    /* Tinta 900 → verde 800 sobre claro (13,1 → 7,1:1); blanco → verde 100 sobre oscuro (12,4 → 10,9:1) */
    .titular-2 { background-image: linear-gradient(120deg, var(--ink-900) 35%, var(--zoe-800)); }
    :is(.sup-oscura, .seccion--pino) .titular-2 { background-image: linear-gradient(120deg, var(--white) 40%, var(--zoe-100)); }
    /* Menta → verde 100 sobre pino 925 (9,5 → 12:1) */
    .inicio__titulo .resalte {
      width: fit-content;
      background-image: linear-gradient(100deg, var(--zoe-200) 15%, var(--zoe-100) 55%, var(--zoe-200) 90%);
    }
    .titular-2::selection, .inicio__titulo .resalte::selection { -webkit-text-fill-color: var(--ink-900); background: var(--zoe-200); }
  }
  /* Alto contraste: sin degradados, texto del sistema */
  @media (forced-colors: active) {
    .titular-2, .inicio__titulo .resalte { background: none; -webkit-text-fill-color: currentColor; }
  }

  /* Trazo de datos sobre cada titular de sección (decorativo) */
  .seccion__cabecera::before {
    content: "";
    display: block;
    width: 56px;
    height: 4px;
    margin-bottom: var(--e-4);
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--zoe-700), var(--zoe-400) 60%, rgba(116, 231, 202, 0));
    box-shadow: 0 0 18px rgba(43, 181, 155, .45);
    transform-origin: left center;
  }
  .seccion--pino .seccion__cabecera::before {
    background: linear-gradient(90deg, var(--zoe-200), rgba(116, 231, 202, 0));
    box-shadow: 0 0 18px rgba(116, 231, 202, .55);
  }
  /* Introducciones de sección: tinta 700 sobre claro y aire constante bajo el titular */
  .seccion:not(.seccion--pino) .seccion__cabecera > .texto-destacado,
  .comparador__intro .texto-destacado { color: var(--ink-700); }
  .flujo__intro { margin-top: var(--e-4); }

  /* ---------- Fondos: rejilla de datos, malla de luz y cortes en diagonal ---------- */
  .seccion--niebla {
    background-image:
      linear-gradient(var(--rejilla-clara) 1px, transparent 1px),
      linear-gradient(90deg, var(--rejilla-clara) 1px, transparent 1px);
    background-size: 56px 56px;
  }
  .seccion--malla {
    background-color: var(--white);
    background-image:
      radial-gradient(44rem 30rem at 0% 0%, rgba(221, 246, 238, .95), rgba(221, 246, 238, 0) 70%),
      radial-gradient(40rem 28rem at 100% 35%, rgba(116, 231, 202, .16), rgba(116, 231, 202, 0) 70%),
      radial-gradient(36rem 26rem at 40% 100%, rgba(221, 246, 238, .8), rgba(221, 246, 238, 0) 70%);
  }
  /* Secciones oscuras: pino 925 (más profundo que 900; todo el texto gana contraste), halos y rejilla */
  .seccion--pino {
    background-color: var(--pine-925);
    background-image:
      radial-gradient(48rem 32rem at 100% 0%, var(--halo-menta), rgba(24, 152, 136, 0) 70%),
      radial-gradient(40rem 30rem at 0% 100%, rgba(24, 152, 136, .14), rgba(24, 152, 136, 0) 70%),
      linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
      linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
    background-size: auto, auto, 56px 56px, 56px 56px;
  }
  /* Corte en diagonal: la sección oscura sube sobre el relleno inferior de la anterior y la siguiente sube sobre la
     oscura, en sentido contrario (zigzag). Solo usa clip-path estático; el alto de la página no cambia al cargar. */
  .seccion--pino,
  .seccion--pino + .seccion {
    --corte: clamp(20px, 4vw, 64px);
    margin-top: calc(-1 * var(--corte));
    padding-top: calc(var(--e-8) + var(--corte));
  }
  .seccion--pino { clip-path: polygon(0 var(--corte), 100% 0, 100% 100%, 0 100%); }
  .seccion--pino + .seccion { clip-path: polygon(0 0, 100% var(--corte), 100% 100%, 0 100%); }
  @media (min-width: 900px) {
    .seccion--pino,
    .seccion--pino + .seccion { padding-top: calc(var(--e-9) + var(--corte)); }
  }

  /* ---------- S01 Inicio ---------- */
  .inicio {
    overflow: hidden;
    background-color: var(--pine-925);
    background-image:
      radial-gradient(60% 70% at 85% 30%, var(--halo-menta), rgba(24, 152, 136, 0) 70%),
      radial-gradient(50% 60% at 100% 100%, rgba(11, 122, 105, .28), rgba(11, 122, 105, 0) 70%),
      linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
      linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
  }
  .inicio__titulo { text-shadow: 0 0 48px rgba(116, 231, 202, .16); }
  .inicio__titulo .resalte { text-shadow: none; }

  .pildora {
    border-color: var(--borde-neon);
    background: linear-gradient(90deg, rgba(116, 231, 202, .14), rgba(116, 231, 202, .04));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .pildora__punto { box-shadow: 0 0 0 3px rgba(116, 231, 202, .18), 0 0 12px var(--zoe-200); }

  /* Red de ejemplo en celular y tableta: tarjeta profunda con halo y rejilla */
  .red {
    border-color: var(--borde-neon);
    background-color: var(--pine-950);
    background-image:
      radial-gradient(70% 80% at 70% 30%, var(--halo-menta), rgba(24, 152, 136, 0) 70%),
      linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
      linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
    background-size: auto, 32px 32px, 32px 32px;
    box-shadow: var(--sombra-neon);
  }
  .red__contador { background: var(--vidrio-oscuro); box-shadow: inset 0 0 0 1px var(--borde-neon); }

  /* Órbita y foco del inicio: solo en escritorio, detrás de la red */
  .inicio__orbita, .inicio__foco { display: none; }

  @media (min-width: 1024px) {
    .red { background: transparent; box-shadow: none; }
    /* La rejilla sigue sobre el velo (el velo tapa los puntos, no la rejilla) y se desvanece con él */
    .red__velo::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
        linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 var(--velo-corte), transparent calc(var(--velo-corte) + 300px));
      mask-image: linear-gradient(90deg, #000 0, #000 var(--velo-corte), transparent calc(var(--velo-corte) + 300px));
    }
    .red__contador {
      padding: var(--e-2) var(--e-4);
      border-radius: var(--r-pill);
      box-shadow: inset 0 0 0 1px var(--borde-neon), 0 12px 32px -14px rgba(0, 0, 0, .6);
    }
    /* La cápsula de la nota solo aparece con la red activa: sin JavaScript la instrucción está oculta y quedaría una cápsula casi vacía */
    .red-bloque--activa .red__nota { background: var(--vidrio-oscuro); box-shadow: inset 0 0 0 1px var(--borde-neon); }

    .inicio__orbita {
      --orbita-tam: min(780px, 60vw);
      display: block;
      position: absolute;
      z-index: 0;
      top: 50%;
      right: max(-200px, calc(50% - var(--ancho-max) / 2 - 240px));
      width: var(--orbita-tam);
      height: var(--orbita-tam);
      margin-top: calc(var(--orbita-tam) / -2);
    }
    /* Foco de luz: en reposo queda sobre la red; con puntero fino lo mueve efectos.js (--foco-x, --foco-y) */
    .inicio__foco {
      display: block;
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 560px;
      height: 560px;
      border-radius: 50%;
      background: radial-gradient(closest-side, rgba(116, 231, 202, .13), rgba(116, 231, 202, .05) 45%, rgba(116, 231, 202, 0));
      transform: translate3d(calc(var(--foco-x, 72vw) - 50%), calc(var(--foco-y, 320px) - 50%), 0);
      pointer-events: none;
    }
  }

  /* ---------- S02 Respaldo y S03 Cinta ---------- */
  .respaldo__tarjeta {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, var(--white), var(--mist-50));
    box-shadow: var(--sombra-3);
  }
  .respaldo__tarjeta::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 10%;
    right: 10%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(43, 181, 155, 0), var(--zoe-400), rgba(43, 181, 155, 0));
    pointer-events: none;
  }
  .sello { background: var(--white); box-shadow: inset 0 0 0 1px var(--line); }
  .cinta { box-shadow: 0 0 44px -8px rgba(116, 231, 202, .65); }

  /* ---------- S04 Problema ---------- */
  @media (min-width: 900px) {
    /* El control se alinea sobre la columna de la ilustración: llena el hueco a la derecha de la introducción */
    .comparador__intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--e-7); align-items: end; }
    .comparador__control { width: 100%; }
  }
  .problema {
    border: 1px solid var(--line);
    box-shadow: var(--sombra-suave);
    padding: 14px var(--e-4);
  }
  .problema__icono--mal { box-shadow: 0 0 0 4px rgba(163, 38, 27, .07); }
  .problema__icono--bien { box-shadow: 0 0 0 4px rgba(116, 231, 202, .3), 0 0 16px rgba(116, 231, 202, .55); }
  [data-vista-panel="con"] .problema { border-color: rgba(11, 122, 105, .24); }

  /* Hoja de cálculo: ventana con tres puntos y pila de hojas detrás (sombra dura, sin girar el texto) */
  .hoja { box-shadow: 14px 14px 0 -2px var(--mist-200), var(--sombra-2); }
  .hoja__titulo { display: flex; align-items: center; gap: var(--e-3); }
  .hoja__titulo::before {
    content: "";
    flex: none;
    width: 40px;
    height: 10px;
    background:
      radial-gradient(circle at 5px 5px, var(--borde-campo) 3.5px, transparent 4px),
      radial-gradient(circle at 20px 5px, var(--borde-campo) 3.5px, transparent 4px),
      radial-gradient(circle at 35px 5px, var(--borde-campo) 3.5px, transparent 4px);
  }
  .hoja__tabla .error { box-shadow: inset 3px 0 0 var(--error-700); }
  /* Detalle calculado: filo verde arriba y pila menta */
  .detalle {
    position: relative;
    overflow: hidden;
    border-color: rgba(11, 122, 105, .26);
    box-shadow: 14px 14px 0 -2px var(--zoe-100), 0 0 0 1px rgba(116, 231, 202, .22), var(--sombra-2);
  }
  .detalle::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--zoe-700), var(--zoe-200));
  }
  .panel .burbuja { justify-self: start; max-width: 92%; margin-left: var(--e-4); box-shadow: var(--sombra-suave); }

  /* ---------- S05 Del registro al cobro ---------- */
  .paso__grupo {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, var(--white), var(--mist-50));
    box-shadow: var(--sombra-suave);
  }
  .paso__numero { background: var(--pine-900); color: var(--zoe-200); box-shadow: 0 0 0 4px var(--zoe-100); }
  .flujo__boton[aria-current="true"] { box-shadow: 0 10px 24px -12px rgba(11, 122, 105, .9); }

  @media (min-width: 900px) {
    /* Línea de tiempo: riel gris, tramo activo verde luminoso y número sobre el riel */
    .flujo--activo .paso { position: relative; padding-left: 72px; border-left: 0; }
    .flujo--activo .paso::before,
    .flujo--activo .paso::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 23px;
      width: 2px;
      border-radius: 2px;
      background: var(--line);
    }
    .flujo--activo .paso::after {
      background: linear-gradient(180deg, var(--zoe-700), var(--zoe-400));
      box-shadow: 0 0 12px rgba(43, 181, 155, .6);
      transform: scaleY(0);
      transform-origin: top center;
    }
    .flujo--activo .paso--activo::after { transform: scaleY(1); }
    .flujo--activo .paso__grupo {
      padding: var(--e-5) var(--e-6);
      border: 1px solid transparent;
      border-radius: var(--r-lg);
      background: transparent;
      box-shadow: none;
    }
    .flujo--activo .paso--activo .paso__grupo {
      border-color: var(--line);
      background: linear-gradient(180deg, var(--white), var(--mist-50));
      box-shadow: var(--sombra-suave);
    }
    .flujo--activo .paso__numero {
      position: absolute;
      z-index: 1;
      top: var(--e-5);
      left: 0;
      width: 48px;
      height: 48px;
      margin: 0;
      border: 2px solid var(--line);
      background: var(--white);
      color: var(--ink-700);
      font-size: 18px;
      box-shadow: none;
    }
    .flujo--activo .paso--activo .paso__numero {
      border-color: var(--pine-900);
      background: var(--pine-900);
      color: var(--zoe-200);
      box-shadow: 0 0 0 6px var(--zoe-100), 0 0 26px rgba(43, 181, 155, .55);
    }
    /* Halo detrás del celular fijo */
    .flujo__sticky::before {
      content: "";
      position: absolute;
      inset: 8% -18%;
      background: radial-gradient(closest-side, rgba(116, 231, 202, .3), rgba(116, 231, 202, 0));
      pointer-events: none;
    }
  }

  /* ---------- S06 Simulador: consola de vidrio oscuro sobre la sección pino ---------- */
  .simulador {
    position: relative;
    border: 1px solid var(--borde-neon);
    background:
      radial-gradient(40rem 26rem at 100% 0%, rgba(24, 152, 136, .22), rgba(24, 152, 136, 0) 70%),
      linear-gradient(160deg, var(--pine-900), var(--pine-950));
    box-shadow: var(--sombra-neon), inset 0 1px 0 rgba(255, 255, 255, .06);
  }
  .arbol {
    border-color: var(--borde-neon);
    background-color: var(--pine-950);
    background-image: radial-gradient(rgba(116, 231, 202, .13) 1px, transparent 1.5px);
    background-size: 22px 22px;
    box-shadow: inset 0 0 60px -20px rgba(24, 152, 136, .55);
  }
  .enlace { stroke: rgba(116, 231, 202, .22); }
  .enlace--oro { stroke: var(--coin-400); }
  .nodo__circulo { box-shadow: 0 0 0 1px var(--borde-neon); }
  .nodo--gana .nodo__circulo { box-shadow: 0 0 0 4px rgba(245, 196, 81, .14), 0 0 20px rgba(245, 196, 81, .45); }
  .nodo--compra .nodo__circulo { box-shadow: 0 0 0 5px rgba(255, 255, 255, .12), 0 0 24px rgba(255, 255, 255, .4); }

  /* Registro: consola con tres puntos de ventana y viñeta luminosa por línea */
  .registro {
    position: relative;
    padding-top: calc(var(--e-4) + 20px);
    border-color: var(--borde-neon);
    background: rgba(10, 42, 38, .72);
  }
  .registro::before {
    content: "";
    position: absolute;
    top: 12px;
    left: var(--e-4);
    width: 40px;
    height: 10px;
    background:
      radial-gradient(circle at 5px 5px, rgba(116, 231, 202, .5) 3.5px, transparent 4px),
      radial-gradient(circle at 20px 5px, rgba(116, 231, 202, .32) 3.5px, transparent 4px),
      radial-gradient(circle at 35px 5px, rgba(116, 231, 202, .2) 3.5px, transparent 4px);
  }
  .registro__linea { position: relative; padding-left: 18px; border-top-color: rgba(116, 231, 202, .14); }
  .registro__linea::before {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--zoe-200);
    box-shadow: 0 0 8px var(--zoe-200);
  }
  .comprobante { box-shadow: 0 0 28px -6px rgba(245, 196, 81, .6); }
  /* Estado vacío (escritorio): el mensaje se centra con el anillo de la marca sobre el espacio reservado de la lista,
     sin cambiar el alto del registro. Solo cuando la lista está vacía. */
  @media (min-width: 900px) {
    .registro__mensaje:has(+ .registro__lista:empty) {
      position: absolute;
      left: var(--e-5);
      right: var(--e-5);
      top: calc(50% + 12px);
      display: grid;
      justify-items: center;
      gap: var(--e-3);
      text-align: center;
      transform: translateY(-50%);
    }
    .registro__mensaje:has(+ .registro__lista:empty)::before {
      content: "";
      width: 48px;
      height: 48px;
      border: 2px solid var(--zoe-200);
      border-top-color: transparent;
      border-radius: 50%;
      box-shadow: 0 0 20px -4px rgba(116, 231, 202, .6);
      transform: rotate(45deg);
    }
  }

  /* ---------- S07 Funciones: mosaico de vidrio con ícono, escenario punteado para cada ilustración ---------- */
  .fn {
    position: relative;
    background: linear-gradient(180deg, var(--white), var(--mist-50));
    box-shadow: var(--sombra-suave);
  }
  @media (min-width: 900px) { .fn { padding: 28px; } }
  .fn--oscura {
    border-color: var(--borde-neon);
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(24, 152, 136, .26), rgba(24, 152, 136, 0) 60%),
      linear-gradient(160deg, var(--pine-900), var(--pine-950));
    box-shadow: var(--sombra-neon);
  }
  .fn__icono {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: var(--e-4);
    border-radius: var(--r-sm);
    background: var(--zoe-100);
    color: var(--zoe-700);
    box-shadow: inset 0 0 0 1px rgba(11, 122, 105, .18);
  }
  .fn--oscura .fn__icono {
    background: rgba(116, 231, 202, .1);
    color: var(--zoe-200);
    box-shadow: inset 0 0 0 1px var(--borde-neon), 0 0 18px -6px rgba(116, 231, 202, .6);
  }
  .fn__ilus {
    height: 136px;
    padding: var(--e-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--white);
    background-image: radial-gradient(rgba(11, 122, 105, .12) 1px, transparent 1.5px);
    background-size: 16px 16px;
  }
  .fn__ilus > svg { margin-inline: auto; }
  .fn--oscura .fn__ilus {
    border-color: var(--borde-neon);
    background-color: rgba(10, 42, 38, .55);
    background-image: radial-gradient(rgba(116, 231, 202, .12) 1px, transparent 1.5px);
  }
  .fn-bill, .fn-cel { justify-content: center; }
  .fn-cel { padding-bottom: 0; }
  .fn-bill__tarjeta { box-shadow: var(--sombra-suave); }
  .fn-mon__chip { box-shadow: var(--sombra-1); }

  /* ---------- S08, S09, S10: coherencia ---------- */
  .dif__tarjeta { position: relative; background: linear-gradient(180deg, var(--white), var(--mist-50)); box-shadow: var(--sombra-suave); }
  .seg { position: relative; background: linear-gradient(180deg, var(--white), var(--mist-50)); box-shadow: var(--sombra-suave); }
  .seg__icono { box-shadow: inset 0 0 0 1px rgba(11, 122, 105, .18), 0 0 0 4px rgba(221, 246, 238, .6); }
  .mp__pasos .paso__caja { box-shadow: inset 0 0 0 1px var(--borde-neon); }
  .mp__pasos .paso--final .paso__caja { box-shadow: 0 0 0 1px rgba(116, 231, 202, .5), 0 0 32px -6px rgba(116, 231, 202, .55); }
  .mp__pasos .paso__num { box-shadow: 0 0 14px -2px rgba(116, 231, 202, .6); }
  .pais[aria-pressed="true"] { box-shadow: 0 0 24px -4px rgba(116, 231, 202, .75); }

  /* ---------- S13 Planes: tres etapas con su red dibujada (1, 2 y 3 niveles) ---------- */
  .planes__tarjeta {
    position: relative;
    background: linear-gradient(180deg, var(--white), var(--mist-50));
    box-shadow: var(--sombra-suave);
  }
  .planes__ilus { display: block; width: 160px; max-width: 100%; height: auto; margin-bottom: var(--e-2); overflow: visible; }
  .planes__lineas { fill: none; stroke: var(--zoe-400); stroke-width: 1.5; stroke-linecap: round; }
  .planes__nodo { fill: var(--pine-700); }
  .planes__raiz { fill: var(--zoe-700); }
  .planes__tarjeta--destacada {
    border-color: var(--borde-neon);
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(24, 152, 136, .3), rgba(24, 152, 136, 0) 60%),
      linear-gradient(160deg, var(--pine-900), var(--pine-950));
    box-shadow: var(--sombra-neon), var(--sombra-3);
  }
  .planes__tarjeta--destacada::after {
    content: "";
    position: absolute;
    top: -1px;
    left: 12%;
    right: 12%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(116, 231, 202, 0), var(--zoe-200), rgba(116, 231, 202, 0));
    box-shadow: 0 0 14px var(--zoe-200);
    pointer-events: none;
  }
  .planes__tarjeta--destacada .planes__lineas { stroke: rgba(116, 231, 202, .55); }
  .planes__tarjeta--destacada .planes__nodo { fill: var(--zoe-200); }
  .planes__tarjeta--destacada .planes__raiz { fill: var(--white); }
  .planes__tarjeta--destacada .planes__ilus { filter: drop-shadow(0 0 6px rgba(116, 231, 202, .5)); }

  /* ---------- S14 Preguntas ---------- */
  .pregunta[open] { box-shadow: var(--sombra-suave), 0 0 0 1px rgba(11, 122, 105, .18); }
  .pregunta[open] .pregunta__icono { box-shadow: 0 0 0 4px var(--zoe-100); }
  .preguntas__ayuda {
    border: 1px solid var(--borde-neon);
    background:
      radial-gradient(120% 90% at 100% 0%, rgba(24, 152, 136, .26), rgba(24, 152, 136, 0) 60%),
      linear-gradient(160deg, var(--pine-900), var(--pine-950));
    box-shadow: var(--sombra-neon);
  }

  /* ---------- S15 Demo: consola oscura con rejilla, halo y órbita; formulario con filo de marca ---------- */
  .demo__tarjeta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid var(--borde-neon);
    background-color: var(--pine-925);
    background-image:
      radial-gradient(44rem 30rem at 0% 100%, var(--halo-menta), rgba(24, 152, 136, 0) 70%),
      radial-gradient(30rem 24rem at 100% 0%, rgba(24, 152, 136, .16), rgba(24, 152, 136, 0) 70%),
      linear-gradient(var(--rejilla-oscura) 1px, transparent 1px),
      linear-gradient(90deg, var(--rejilla-oscura) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
    box-shadow: var(--sombra-neon);
  }
  .demo__orbita {
    position: absolute;
    z-index: -1;
    left: -160px;
    bottom: -220px;
    width: 560px;
    height: 560px;
  }
  .demo__lista .icono {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 4px;
    border-radius: 50%;
    background: rgba(116, 231, 202, .14);
    box-shadow: 0 0 0 1px var(--borde-neon);
  }
  .formulario { position: relative; }
  .formulario::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--e-6);
    right: var(--e-6);
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--zoe-700), var(--zoe-200));
    pointer-events: none;
  }

  /* ---------- Brillo que sigue al puntero (solo con efectos.js, puntero fino y sin «reducir movimiento») ----------
     La capa de luz va debajo del contenido de la tarjeta: los hijos pasan a «relative» para pintarse encima. */
  .efectos-puntero :is(.fn, .planes__tarjeta, .dif__tarjeta, .seg, .problema, .respaldo__tarjeta) > * { position: relative; }
  .efectos-puntero :is(.fn, .planes__tarjeta, .dif__tarjeta, .seg, .problema, .respaldo__tarjeta)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--brillo-x, 50%) var(--brillo-y, 50%), rgba(116, 231, 202, .2), rgba(116, 231, 202, 0) 65%);
    opacity: 0;
    pointer-events: none;
  }
  .efectos-puntero :is(.fn--oscura, .planes__tarjeta--destacada)::before {
    background: radial-gradient(380px circle at var(--brillo-x, 50%) var(--brillo-y, 50%), rgba(116, 231, 202, .16), rgba(116, 231, 202, 0) 65%);
  }
  .efectos-puntero :is(.fn, .planes__tarjeta, .dif__tarjeta, .seg, .problema, .respaldo__tarjeta):hover::before { opacity: 1; }
}

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

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

    /* Botones: el destello cruza una vez al entrar el puntero; al salir vuelve sin animarse */
    @media (hover: hover) {
      .btn--menta:hover:not(:disabled):not([aria-disabled="true"])::after,
      .btn--verde:hover:not(:disabled):not([aria-disabled="true"])::after {
        transform: translateX(380%) skewX(-18deg);
        transition: transform 750ms var(--curva-salida);
      }
    }

    /* Botones grandes magnéticos (efectos.js fija --iman-x / --iman-y; propiedad «translate», no choca con la subida) */
    .efectos-puntero main a.btn--grande {
      translate: var(--iman-x, 0px) var(--iman-y, 0px);
      transition-property: color, background-color, border-color, box-shadow, transform, translate;
    }

    /* Tarjetas: el revelado conserva su escalonado y la sombra vuelve suave al salir el puntero */
    .js.efectos-puntero :is(.fn, .planes__tarjeta, .dif__tarjeta) {
      transition: opacity var(--dur-3) var(--curva-salida) var(--retardo, 0ms),
        transform var(--dur-3) var(--curva-salida) var(--retardo, 0ms),
        box-shadow var(--dur-2) var(--curva-estandar), border-color var(--dur-2) var(--curva-estandar);
    }
    /* Inclinación 3D bajo el puntero (efectos.js fija --incl-x / --incl-y y la clase «inclinando») */
    .js.efectos-puntero :is(.fn, .planes__tarjeta, .dif__tarjeta).inclinando {
      transform: perspective(1000px) rotateX(var(--incl-x, 0deg)) rotateY(var(--incl-y, 0deg)) translateY(-4px);
      border-color: rgba(116, 231, 202, .55);
      box-shadow: var(--sombra-neon);
      transition: transform 140ms linear, box-shadow var(--dur-2) var(--curva-estandar), border-color var(--dur-2) var(--curva-estandar);
    }
    .efectos-puntero :is(.fn, .planes__tarjeta, .dif__tarjeta, .seg, .problema, .respaldo__tarjeta)::before {
      transition: opacity var(--dur-2) var(--curva-estandar);
    }

    /* Foco del inicio: persigue al puntero con un retraso suave */
    .inicio__foco { transition: transform 700ms var(--curva-salida); will-change: transform; }

    /* Flujo: el tramo luminoso del riel crece al activarse el paso */
    .flujo--activo .paso::after { transition: transform var(--dur-3) var(--curva-salida); }
    .flujo--activo .paso__grupo { transition: border-color var(--dur-2) var(--curva-estandar), box-shadow var(--dur-2) var(--curva-estandar); }
    .flujo--activo .paso__numero { transition: color var(--dur-2) var(--curva-estandar), background-color var(--dur-2) var(--curva-estandar), border-color var(--dur-2) var(--curva-estandar), box-shadow var(--dur-2) var(--curva-estandar); }

    /* Animaciones ligadas al desplazamiento (solo se mueven al desplazar; sin soporte, todo queda en su estado final) */
    @supports (animation-timeline: view()) {
      .seccion__cabecera::before {
        animation: zs-trazo linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
      }
      @keyframes zs-trazo {
        from { opacity: 0; transform: scaleX(0); }
        to { opacity: 1; transform: scaleX(1); }
      }
      .inicio__orbita {
        animation: zs-orbita linear both;
        animation-timeline: scroll(root block);
        animation-range: 0px 900px;
      }
      @keyframes zs-orbita {
        from { rotate: 0deg; translate: 0 0; }
        to { rotate: 55deg; translate: 0 140px; }
      }
      .demo__orbita, .dif__anillo {
        animation: zs-paralaje linear both;
        animation-timeline: view();
      }
      @keyframes zs-paralaje {
        from { rotate: -24deg; translate: 0 70px; }
        to { rotate: 24deg; translate: 0 -70px; }
      }
    }
  }

  /* Reducir movimiento: sin destello, sin imán, sin inclinación, sin órbitas que giran (efectos.js tampoco arranca) */
  @media (prefers-reduced-motion: reduce) {
    .btn--menta::after, .btn--verde::after { display: none; }
    .inicio__foco { transition: none; }
  }
}