@import url('fuentes.css');

/* ============================================================
   Primer episodio psicótico — sistema visual
   Diseñado a 1600×900; el motor escala al viewport.
   ============================================================ */
:root{
  --bg:#FAF9FC; --panel:#FFFFFF;
  --line:rgba(18,36,74,.13); --line-soft:rgba(18,36,74,.07);
  --fg:#12244A; --mid:#514C68; --dim:#6E6885;
  --lav:#6D3BC4; --lav-dim:#8B62CF; --lav-fill:#CCA8FC;
  --coral:#C4442C; --coral-fill:#F0897A; --blue:#5B8FB5;
  --sh-sm:0 1px 2px rgba(18,36,74,.05), 0 2px 6px rgba(18,36,74,.04);
  --sh-md:0 1px 2px rgba(18,36,74,.04), 0 10px 26px rgba(18,36,74,.07),
          0 28px 64px rgba(109,59,196,.06);
  --sh-lg:0 2px 4px rgba(18,36,74,.05), 0 18px 44px rgba(18,36,74,.09),
          0 48px 100px rgba(109,59,196,.10);
  --sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);overflow:hidden;}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility;}

/* ---------- escenario: escala 1600×900 al viewport ---------- */
/* El fondo (video, velo y grano) cubre toda la pantalla. El contenido vive
   en el lienzo 1600×900, que se escala entero y sin recortes: en una pantalla
   más ancha o más alta que 16:9 solo aparece más fondo, nunca texto afuera. */
#escenario{position:fixed;inset:0;overflow:hidden;background:var(--bg);}
/* El lienzo se ancla al centro y se escala desde ahí: la rejilla no centra
   de forma fiable una caja mayor que su contenedor. */
#lienzo{width:1600px;height:900px;position:absolute;left:50%;top:50%;z-index:2;
        transform-origin:center center;}

/* ---------- fondo en movimiento ---------- */
#fondos{position:absolute;inset:0;z-index:0;}
#fondos video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
              opacity:0;transition:opacity 1.1s var(--e);}
#fondos video.on{opacity:1;}
.velo{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,249,252,.90) 0%,rgba(250,249,252,.66) 34%,
             rgba(250,249,252,.58) 62%,rgba(250,249,252,.88) 100%);}
.grano{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  mix-blend-mode:multiply;
  background-image:radial-gradient(circle at 1px 1px,rgba(18,36,74,.055) 1px,transparent 0);
  background-size:3px 3px;}

/* ---------- láminas ---------- */
.lamina{position:absolute;inset:0;z-index:2;display:none;flex-direction:column;}
.lamina.viva{display:flex;}
/* sin recorte: el halo sigue hacia los márgenes cuando la pantalla no es 16:9 */
.aura{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible;}
.blob{position:absolute;border-radius:50%;filter:blur(90px);}

/* ---------- chrome ---------- */
.top{position:relative;z-index:3;display:flex;align-items:center;
     justify-content:space-between;padding:38px 72px 0;}
.marca{display:flex;align-items:center;gap:14px;}
.marca img{height:30px;width:auto;}
.wordmark{font-family:var(--mono);font-size:10.5px;letter-spacing:.19em;
          color:var(--mid);text-transform:uppercase;}
.topR{display:flex;align-items:center;gap:22px;font-family:var(--mono);
      font-size:10.5px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;}
.topR .num{color:var(--lav);}
.filete{position:relative;z-index:3;height:1px;background:var(--line);margin:22px 72px 0;}
.cuerpo{position:relative;z-index:3;flex:1;padding:0 72px;display:flex;
        flex-direction:column;justify-content:center;}

/* ---------- barra de avance ---------- */
.pie{position:relative;z-index:3;padding:0 72px 34px;display:flex;
     flex-direction:column;gap:11px;}
.riel{display:flex;gap:5px;align-items:center;}
.seg{height:3px;border-radius:2px;background:rgba(18,36,74,.10);
     transition:background .5s var(--e),box-shadow .5s var(--e);}
.seg.hecho{background:rgba(109,59,196,.34);}
.seg.ahora{background:var(--lav);box-shadow:0 0 12px rgba(109,59,196,.45);}
.pieR{display:flex;justify-content:space-between;font-family:var(--mono);
      font-size:10px;letter-spacing:.15em;color:var(--dim);text-transform:uppercase;}
.pieR b{color:var(--mid);font-weight:500;}

/* ---------- tipografía ---------- */
.ceja{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--lav);
      text-transform:uppercase;margin-bottom:22px;}
h1{font-size:104px;line-height:.94;font-weight:700;letter-spacing:-.042em;margin:0;
   text-wrap:balance;}
h2{font-size:60px;line-height:1.03;font-weight:700;letter-spacing:-.034em;margin:0;
   text-wrap:pretty;}
h3{font-size:36px;line-height:1.16;font-weight:600;letter-spacing:-.024em;margin:0;}
p{font-size:19px;line-height:1.52;color:var(--mid);margin:0;font-weight:400;}
.fuente{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);}
.dato{font-size:96px;line-height:.9;font-weight:400;letter-spacing:-.045em;}

/* ---------- piezas ---------- */
.tarjeta{background:rgba(255,255,255,.82);border:1px solid var(--line-soft);
         border-radius:15px;padding:26px 24px;box-shadow:var(--sh-md);
         backdrop-filter:blur(16px) saturate(1.25);
         -webkit-backdrop-filter:blur(16px) saturate(1.25);}
.chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
      font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;padding:6px 11px;
      border-radius:100px;border:1px solid var(--line);color:var(--mid);
      background:rgba(255,255,255,.7);}
.clave{border-left:2px solid var(--lav);padding:16px 0 16px 22px;}
.rejilla{display:grid;gap:16px;}
.fila{display:flex;gap:16px;}

/* ============================================================
   ANIMACIONES DE ENTRADA
   Cada elemento con [data-a] entra al activarse la lámina.
   El retardo lo pone --d (en ms) desde el generador.
   ============================================================ */
[data-a]{opacity:0;will-change:transform,opacity,filter;}
.viva [data-a]{animation-duration:.85s;animation-fill-mode:forwards;
               animation-timing-function:var(--e-out);
               animation-delay:calc(var(--d,0) * 1ms);}

.viva [data-a="sube"]   {animation-name:a-sube;}
.viva [data-a="baja"]   {animation-name:a-baja;}
.viva [data-a="niebla"] {animation-name:a-niebla;animation-duration:1.1s;}
.viva [data-a="entra"]  {animation-name:a-entra;}
.viva [data-a="tarjeta"]{animation-name:a-tarjeta;animation-duration:.95s;}
.viva [data-a="barra"]  {animation-name:a-barra;animation-duration:1.1s;
                         transform-origin:left center;}
.viva [data-a="linea"]  {animation-name:a-linea;animation-duration:.9s;
                         transform-origin:left center;}
.viva [data-a="punto"]  {animation-name:a-punto;animation-duration:.6s;
                         animation-timing-function:cubic-bezier(.34,1.56,.64,1);}

@keyframes a-sube   {from{opacity:0;transform:translateY(26px);}
                     to{opacity:1;transform:none;}}
@keyframes a-baja   {from{opacity:0;transform:translateY(-18px);}
                     to{opacity:1;transform:none;}}
@keyframes a-niebla {from{opacity:0;transform:translateY(20px);filter:blur(12px);}
                     to{opacity:1;transform:none;filter:blur(0);}}
@keyframes a-entra  {from{opacity:0;transform:translateX(-24px);}
                     to{opacity:1;transform:none;}}
@keyframes a-tarjeta{from{opacity:0;transform:translateY(22px) scale(.975);}
                     to{opacity:1;transform:none;}}
@keyframes a-barra  {from{opacity:0;transform:scaleX(0);}
                     to{opacity:1;transform:scaleX(1);}}
@keyframes a-linea  {from{opacity:0;transform:scaleX(0);}
                     to{opacity:1;transform:scaleX(1);}}
@keyframes a-punto  {from{opacity:0;transform:scale(0);}
                     to{opacity:1;transform:scale(1);}}

/* trazo del stepper */
.viva .traza{animation:a-traza 3.6s cubic-bezier(.32,.06,.24,1) forwards;
             animation-delay:calc(var(--d,0) * 1ms);}
@keyframes a-traza{from{stroke-dashoffset:var(--largo);}to{stroke-dashoffset:0;}}

/* respeta preferencias de accesibilidad */
@media (prefers-reduced-motion:reduce){
  .viva [data-a],.viva .traza{animation:none!important;opacity:1!important;
                              transform:none!important;filter:none!important;
                              stroke-dashoffset:0!important;}
  #fondos video{display:none;}
}

/* ---------- ayuda ---------- */
#ayuda{position:fixed;inset:0;z-index:99;display:none;place-items:center;
       background:rgba(8,7,12,.86);backdrop-filter:blur(8px);}
#ayuda.on{display:grid;}
#ayuda .caja{background:var(--bg);border-radius:18px;padding:38px 44px;max-width:560px;
             box-shadow:var(--sh-lg);}
#ayuda h4{margin:0 0 20px;font-size:22px;font-weight:500;color:var(--fg);}
#ayuda dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:0;}
#ayuda dt{font-family:var(--mono);font-size:12px;color:var(--lav);
          background:rgba(109,59,196,.09);padding:4px 9px;border-radius:5px;
          justify-self:start;}
#ayuda dd{margin:0;font-size:15px;color:var(--mid);align-self:center;}

/* ---------- cronómetro ---------- */
#reloj{position:fixed;right:18px;bottom:14px;z-index:98;display:none;
       font-family:var(--mono);font-size:13px;letter-spacing:.1em;color:#EDEAF4;
       background:rgba(8,7,12,.55);padding:6px 12px;border-radius:7px;
       backdrop-filter:blur(6px);}
#reloj.on{display:block;}

/* ============================================================
   ANIMACIÓN AVANZADA — números, tarjetas, gráficas, transición
   ============================================================ */

/* --- transición entre láminas --- */
.lamina{opacity:0;transition:opacity .42s var(--e);}
.lamina.viva{opacity:1;}
.lamina.saliendo{display:flex;opacity:0;pointer-events:none;}

/* --- números que cuentan --- */
/* Sin cifras tabulares: en Schibsted Grotesk la coma tabular queda
   centrada en una casilla completa y "1,7" se lee como "1 , 7".
   El pequeño vaivén de ancho durante el conteo se nota menos que eso. */
.cuenta{font-variant-numeric:normal;}

/* --- tarjetas: entrada con profundidad --- */
.viva [data-a="tarjeta"]{animation-name:a-tarjeta;animation-duration:1s;}
@keyframes a-tarjeta{
  from{opacity:0;transform:translateY(26px) scale(.965);filter:blur(6px);
       box-shadow:0 0 0 rgba(18,36,74,0);}
  60% {opacity:1;filter:blur(0);}
  to  {opacity:1;transform:none;filter:blur(0);}
}

/* --- barras: crecen con leve rebase --- */
.viva [data-a="barra"]{animation-name:a-barra;animation-duration:1.15s;
                       animation-timing-function:cubic-bezier(.2,.9,.25,1.06);
                       transform-origin:left center;}
@keyframes a-barra{from{opacity:.35;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}

/* --- viñetas: entran una a una --- */
.viva li[data-li]{opacity:0;animation:a-li .6s var(--e-out) forwards;
                  animation-delay:calc(var(--d,0) * 1ms);}
@keyframes a-li{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}

/* --- nodos y puntos SVG --- */
.viva [data-a="punto"], .viva circle[data-a]{animation-name:a-punto;animation-duration:.62s;
  animation-timing-function:cubic-bezier(.34,1.56,.64,1);transform-box:fill-box;
  transform-origin:center;}
@keyframes a-punto{from{opacity:0;transform:scale(0);}to{opacity:1;transform:scale(1);}}

/* --- números grandes: entran y respiran --- */
.viva [data-a="cifra"]{animation-name:a-cifra;animation-duration:1.05s;}
@keyframes a-cifra{
  from{opacity:0;transform:translateY(20px) scale(.92);filter:blur(10px);}
  to  {opacity:1;transform:none;filter:blur(0);}
}

/* --- deriva lenta de la atmósfera --- */
.aura .blob{animation:deriva 26s ease-in-out infinite alternate;}
.aura .blob:nth-child(2){animation-duration:34s;animation-direction:alternate-reverse;}
.aura .blob:nth-child(3){animation-duration:41s;}
@keyframes deriva{
  from{transform:translate3d(0,0,0) scale(1);}
  to  {transform:translate3d(38px,-26px,0) scale(1.07);}
}

@media (prefers-reduced-motion:reduce){
  .lamina{transition:none;}
  .viva li[data-li]{animation:none!important;opacity:1!important;}
  .aura .blob{animation:none!important;}
}

/* ---- red de seguridad ----
   Si el navegador estrangula las animaciones (segundo plano, batería baja,
   GPU saturada), esta clase fuerza el estado final. En una charla en vivo
   ningún elemento puede quedarse invisible. */
.lamina.asentada [data-a],
.lamina.asentada li[data-li]{opacity:1!important;transform:none!important;filter:none!important;}
.lamina.asentada .traza{stroke-dashoffset:0!important;}

/* ============================================================
   OBTURADOR — entrada de titulares por persianas
   Cada carácter entra desde un desenfoque mientras tres franjas
   horizontales lo barren en direcciones alternas.
   Reimplementado en CSS nativo: sin React ni librerías, para que
   siga funcionando sin conexión.
   ============================================================ */
.obturador{opacity:1!important;}
.obt{position:relative;display:inline-block;overflow:hidden;vertical-align:top;
     padding-bottom:.18em;margin-bottom:-.18em;}
.obt > .base{display:inline-block;opacity:0;}
.obt > .capa{position:absolute;left:0;top:0;opacity:0;pointer-events:none;
             white-space:pre;will-change:transform,opacity;}
.obt > .c1,.obt > .c3{color:var(--lav);}
.obt > .c2{color:var(--fg);}
.obt > .c1{clip-path:polygon(0 0,100% 0,100% 35%,0 35%);}
.obt > .c2{clip-path:polygon(0 35%,100% 35%,100% 65%,0 65%);}
.obt > .c3{clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);}

.viva .obt > .base{animation:obt-base .82s cubic-bezier(.16,1,.3,1) forwards;
                   animation-delay:calc(var(--i,0) * 42ms + 300ms);}
@keyframes obt-base{from{opacity:0;filter:blur(11px);}to{opacity:1;filter:blur(0);}}

.viva .obt > .capa{animation-duration:.72s;animation-timing-function:ease-in-out;
                   animation-fill-mode:forwards;}
.viva .obt > .c1{animation-name:obt-der;animation-delay:calc(var(--i,0) * 42ms);}
.viva .obt > .c2{animation-name:obt-izq;animation-delay:calc(var(--i,0) * 42ms + 100ms);}
.viva .obt > .c3{animation-name:obt-der;animation-delay:calc(var(--i,0) * 42ms + 200ms);}
@keyframes obt-der{0%{transform:translateX(-100%);opacity:0;}
                   50%{opacity:1;}100%{transform:translateX(100%);opacity:0;}}
@keyframes obt-izq{0%{transform:translateX(100%);opacity:0;}
                   50%{opacity:1;}100%{transform:translateX(-100%);opacity:0;}}

.lamina.asentada .obt > .base{opacity:1!important;filter:none!important;}
.lamina.asentada .obt > .capa{opacity:0!important;}
@media (prefers-reduced-motion:reduce){
  .obt > .base{opacity:1!important;filter:none!important;animation:none!important;}
  .obt > .capa{display:none!important;}
}

/* ============================================================
   HAZ DE BORDE — una luz recorre el perímetro de la tarjeta.
   Misma técnica que el componente original: la luz sigue una ruta
   rectangular (offset-path) y una máscara la recorta al anillo del
   borde, para que sea un filo de luz y no una mancha interior.
   CSS nativo: sin motion ni React, no rompe el uso sin conexión.
   ============================================================ */
.tarjeta.haz{position:relative;isolation:isolate;}
.tarjeta.haz > *:not(.rayo){position:relative;z-index:1;}

@supports (offset-path: path("M 0 0 H 10 V 10 H 0 V 0")){
  .rayo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
        border-radius:inherit;padding:2px;opacity:0;
        -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite:xor;
        mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite:exclude;}
  .rayo > i{position:absolute;top:0;left:0;display:block;
            width:var(--rayo-ancho,300px);aspect-ratio:1;
            background:radial-gradient(ellipse at center,
                       rgba(109,59,196,.95) 0%,
                       rgba(139,98,207,.55) 30%,
                       transparent 58%);
            offset-path:var(--ruta);offset-distance:0%;offset-rotate:0deg;
            animation:rayo-corre var(--rayo-t,9s) linear infinite;
            animation-delay:var(--rayo-d,0s);}
  .viva .tarjeta.haz .rayo{animation:rayo-entra .9s ease-out forwards;
                           animation-delay:calc(var(--d,0) * 1ms + 520ms);}
  @keyframes rayo-corre{from{offset-distance:0%;}to{offset-distance:100%;}}
  @keyframes rayo-entra{from{opacity:0;}to{opacity:1;}}
}

@media (prefers-reduced-motion:reduce){ .rayo{display:none!important;} }

/* ============================================================
   REVELA — subtítulo que entra palabra por palabra desde un
   desenfoque. Arranca cuando el titular ya terminó.
   ============================================================ */
.revela{opacity:1!important;}
.pal{display:inline-block;opacity:0;white-space:pre;}
.viva .revela .pal{animation:pal-entra .92s cubic-bezier(.16,1,.3,1) forwards;
                   animation-delay:calc(var(--inicio,2200ms) + var(--w,0) * 78ms);}
@keyframes pal-entra{
  from{opacity:0;filter:blur(12px);transform:translateY(14px);}
  to  {opacity:1;filter:blur(0);transform:none;}
}

/* ============================================================
   BLOQUES — cada línea se revela tras el paso de un bloque de
   color: entra desde la izquierda, cubre, y sale por la derecha.
   ============================================================ */
.bloques{opacity:1!important;}
.lin{position:relative;display:block;overflow:hidden;
     padding-bottom:.1em;margin-bottom:-.1em;}
.lin > .txt{display:inline-block;opacity:0;}
.lin > .tapa{position:absolute;left:0;top:0;right:0;bottom:0;
             background:var(--lav);transform:scaleX(0);
             transform-origin:left center;pointer-events:none;}
.viva .lin > .tapa{animation:tapa-pasa .78s cubic-bezier(.66,0,.28,1) forwards;
                   animation-delay:calc(var(--l,0) * 130ms + 200ms);}
@keyframes tapa-pasa{
  0%  {transform:scaleX(0);transform-origin:left center;}
  46% {transform:scaleX(1);transform-origin:left center;}
  54% {transform:scaleX(1);transform-origin:right center;}
  100%{transform:scaleX(0);transform-origin:right center;}
}
.viva .lin > .txt{animation:txt-visible .01s linear forwards;
                  animation-delay:calc(var(--l,0) * 130ms + 200ms + .38s);}
@keyframes txt-visible{to{opacity:1;}}

.lamina.asentada .pal,
.lamina.asentada .lin > .txt{opacity:1!important;filter:none!important;transform:none!important;}
.lamina.asentada .lin > .tapa{display:none!important;}
@media (prefers-reduced-motion:reduce){
  .pal{opacity:1!important;filter:none!important;animation:none!important;}
  .lin > .txt{opacity:1!important;animation:none!important;}
  .lin > .tapa{display:none!important;}
}

/* ---- piezas nuevas: eje, hitos, línea de tiempo vertical ---- */
.viva [data-a="hilo"]{animation-name:a-hilo;animation-duration:1.25s;
                      transform-origin:top center;
                      animation-timing-function:cubic-bezier(.3,.05,.22,1);}
@keyframes a-hilo{from{opacity:0;transform:scaleY(0);}to{opacity:1;transform:scaleY(1);}}

.viva [data-a="eje"]{animation-name:a-eje;animation-duration:1.05s;
                     transform-origin:left center;
                     animation-timing-function:cubic-bezier(.3,.05,.22,1);}
@keyframes a-eje{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}

/* tirantes punteados del stepper: entran cuando la curva ya pasó */
.tirante{opacity:0;}
.viva .tirante{animation:a-tirante .5s ease-out forwards;
               animation-delay:calc(1400ms + var(--k,0) * 260ms);}
@keyframes a-tirante{to{opacity:1;}}

@media (prefers-reduced-motion:reduce){ .tirante{opacity:1!important;} }

/* ============================================================
   BUCLE — una palabra que rota. El ancho acompaña al texto para
   que la frase no salte.
   ============================================================ */
.bucle{display:inline-block;position:relative;overflow:hidden;color:var(--lav);
       vertical-align:bottom;text-align:left;
       transition:width .44s cubic-bezier(.22,.61,.36,1);}
.bucle > span{display:inline-block;white-space:pre;
              transition:transform .40s var(--e-out), opacity .40s var(--e-out);}
.bucle.sale > span{transform:translateY(-85%);opacity:0;}
.bucle.entra > span{transform:translateY(85%);opacity:0;}

/* ============================================================
   COMPARATIVO POR PASOS — el segundo panel se revela al avanzar
   con la flecha, no con el ratón.
   ============================================================ */
.compara{position:relative;}
.revelable{clip-path:inset(0 0 0 0);
           transition:clip-path 1s cubic-bezier(.66,0,.28,1),opacity .5s ease;}
.lamina[data-paso="0"] .revelable{clip-path:inset(0 100% 0 0);opacity:.25;}
.corte{position:absolute;top:0;bottom:0;width:2px;border-radius:2px;
       background:linear-gradient(180deg,transparent,var(--lav) 18%,var(--lav) 82%,transparent);
       transition:left 1s cubic-bezier(.66,0,.28,1),opacity .5s ease;
       box-shadow:0 0 14px rgba(109,59,196,.45);}
.lamina[data-paso="0"] .corte{left:calc(50% - 13px);opacity:1;}
.lamina[data-paso="1"] .corte{left:100%;opacity:0;}
.pista{position:absolute;left:calc(50% + 8px);top:50%;transform:translateY(-50%);
       font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--lav);
       text-transform:uppercase;white-space:nowrap;transition:opacity .4s ease;}
.lamina[data-paso="1"] .pista{opacity:0;}

@media (prefers-reduced-motion:reduce){
  .bucle > span{transition:none;}
  .revelable{clip-path:none!important;opacity:1!important;}
  .corte,.pista{display:none!important;}
}

/* ============================================================
   PARES — dos grupos que ocupan el mismo sitio; la flecha pasa
   de uno al otro sin cambiar de lámina.
   ============================================================ */
.pares{display:grid;}
.pares > .par{grid-area:1/1;
              transition:opacity .55s cubic-bezier(.22,.61,.36,1),
                         transform .55s cubic-bezier(.22,.61,.36,1);}
.lamina[data-paso="0"] .par-b{opacity:0;transform:translateX(28px);pointer-events:none;}
.lamina[data-paso="1"] .par-a{opacity:0;transform:translateX(-28px);pointer-events:none;}
.lamina[data-paso="0"] .contador-par::before{content:'1 / 2  \2192';}
.lamina[data-paso="1"] .contador-par::before{content:'2 / 2';}
@media (prefers-reduced-motion:reduce){ .pares > .par{transition:none;} }