/* ═════════════════════════════════════════════════════════════════════════════════════════════════
   lux-jarvis.css — LA SEGUNDA CAPA DE LUJO de la portada (v1.184.0, docs/60 §5)

   Diego, 2026-09-23 (el mismo encargo que dio origen a lux.css el 2026-08-12, ahora para toda la portada):
   «cajas de luz, nodos de luz respirando en movimiento que se vea de altísima tecnología […] Que parezca salido
   de la película iron man hecho por Jarvis […] sin romper nada de las funcionalidades y respetando todos los
   guardianes» y «mantener el fondo negro como esta la pagina para que se integre bien».

   LA REGLA DE ESTA HOJA: SÓLO AÑADE LUZ. No cambia el tamaño, el margen ni el orden de nada — un probe que
   mide la biblioteca antes y después ve las mismas cajas en el mismo sitio (_QA/prueba_ojo.py, H1/H3). Cumple la
   LEY LUXE de lux.css: se anima sólo opacity/transform/box-shadow; lo ambiental es lento; prefers-reduced-motion
   lo APAGA; la luz nunca lleva información sola.

   LAS PIEZAS
     .lux-red        el campo neural de fondo: nodos de luz que respiran y se enlazan (lux-jarvis.js, lienzo 2D,
                     sólo escritorio, 30 fps, en pausa con la pestaña oculta)
     .lux-progreso   el filete de lectura: una línea de luz arriba que dice cuánto de la página lleva
     cajas de luz    .tarjeta · .paso · .ejemplo · .plan: una luz que sigue al puntero por dentro (--mx/--my) y un
                     borde que se enciende
     rótulos         .sec-t con su nodo de luz que respira; .sec-h con el degradado del titular de la casa
   ═════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── el campo neural ───────────────────────────────────────────────────────────────────────────── */
.lux-red{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;opacity:.55;contain:strict}

/* ── el filete de lectura ──────────────────────────────────────────────────────────────────────── */
.lux-progreso{position:fixed;left:0;top:0;right:0;height:2px;z-index:1000;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--mr-tiffany,#0ABAB5),var(--mr-tiffany-2,#3fe0db) 55%,var(--mr-gold,#d4af37));
  box-shadow:0 0 12px color-mix(in srgb,var(--mr-tiffany,#0ABAB5) 70%,transparent)}

/* ── cajas de luz: la luz sigue al puntero por dentro, el borde se enciende ────────────────────── */
.ejemplo{position:relative}
.tarjeta,.paso,.ejemplo,.plan{isolation:isolate}
.tarjeta::before,.paso::before,.ejemplo::before,.plan::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--mr-tiffany,#0ABAB5) 17%,transparent),transparent 62%);
  transition:opacity var(--mr-dur-base,400ms) var(--mr-ease,ease)}
.tarjeta:hover::before,.paso:hover::before,.ejemplo:hover::before,.plan:hover::before,
.tarjeta:focus-visible::before{opacity:1}
.paso,.ejemplo,.plan{transition:box-shadow var(--mr-dur-base,400ms) var(--mr-ease,ease),border-color var(--mr-dur-base,400ms) var(--mr-ease,ease)}
.tarjeta:hover,.paso:hover,.ejemplo:hover,.plan:hover{
  box-shadow:var(--mr-elev-3,0 14px 40px rgba(0,0,0,.45)),0 0 0 1px color-mix(in srgb,var(--mr-tiffany,#0ABAB5) 30%,transparent),
             0 0 42px -16px color-mix(in srgb,var(--mr-tiffany,#0ABAB5) 75%,transparent)}

/* ── rótulos: el nodo de luz que respira y el titular con la luz de la casa ────────────────────── */
/* el margen vertical negativo saca al punto de la caja de línea: el rótulo mide exactamente lo mismo que antes */
.sec-t::before{content:"";display:inline-block;width:7px;height:7px;margin:-8px var(--mr-sp-25,10px) -8px 0;vertical-align:middle;border-radius:50%;
  background:currentColor;box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent);animation:lux-j-respira var(--mr-breathe,4500ms) infinite}
@keyframes lux-j-respira{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 55%,transparent);opacity:1}
  60%{box-shadow:0 0 0 7px transparent;opacity:.72}100%{box-shadow:0 0 0 0 transparent;opacity:1}}
.sec-h{background:linear-gradient(180deg,var(--mr-text,#eef2f7) 35%,color-mix(in srgb,var(--mr-text,#eef2f7) 66%,var(--mr-tiffany,#0ABAB5)) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.sec-h{color:var(--mr-text,#eef2f7)}}

@media (max-width:900px),(pointer:coarse){.lux-red{display:none}}
@media (prefers-reduced-motion:reduce){
  .lux-red{display:none}
  .sec-t::before{animation:none}
  .tarjeta::before,.paso::before,.ejemplo::before,.plan::before{transition:none}
}
@media print{.lux-red,.lux-progreso{display:none}}