/* =========================================================================
   🌟 TASK-VRO-140 — AUTO SLIDER · ESCENARIO (activo congelado)
   Base: INSTRUCCIONES — HTMLs de VRO v1 + ajustes v1.1 + reglas de slider del brief.
   El escenario es fijo: navegación, temas, accesibilidad. El libreto (JSON del deck)
   y la utilería (SVG) entran por vro-slider.js. La IA nunca toca este archivo.

   Todo vive bajo .vsl (prefijo propio): no pisa ni hereda reglas del view.
   Sin la clase .vsl--js (sin JS) las slides quedan apiladas en vertical y cada
   ilustración en su estado final.

   Color, tres ejes, todos vivos (cambian sin recargar):
   - Acento: --vro-theme (themeColor del mentor; el view lo fija en :root).
   - Tinta de significado: --accent-ink, derivada de data-vro-reading (light/sepia/dark).
   - Superficie: [data-vro-skin="snow"] = papel con sombra; sin atributo = Brutalist (borde).
   ========================================================================= */

/* ===== TOKENS (único lugar con HEX) ===== */
.vsl{
  --vro-theme-fallback:#d36f4d;
  --ease:cubic-bezier(0.25,1,0.5,1);
  --pill-radius:50px; --card-radius:16px;
  --font-display:'Space Grotesk',sans-serif; --font-read:var(--font-display);
  --on-accent:#0a0a0a;                      /* vro-slider.js lo recalcula según el contraste real */
  --bg:#0a0a0a; --surface:#1a1a1a; --fg:#ffffff; --muted:#b7b7b7;
  --line:rgba(255,255,255,.12);
  --accent-ink:var(--vro-theme,var(--vro-theme-fallback));
  --accent-ui:var(--vro-theme,var(--vro-theme-fallback));  /* paso actual, play, barra de tiempo */
  /* Brutalist: separa el borde */
  --edge:var(--line); --lift:none;
}
:is([data-vro-reading="light"] .vsl, .vsl[data-vro-reading="light"]){
  --bg:#ffffff; --surface:#f5f4f1; --fg:#111111; --muted:rgba(0,0,0,.6); --line:rgba(0,0,0,.12);
}
:is([data-vro-reading="sepia"] .vsl, .vsl[data-vro-reading="sepia"]){
  --bg:#f6efdf; --surface:#efe8d5; --fg:#2a2418; --muted:rgba(42,36,24,.65); --line:rgba(42,36,24,.15);
}
/* En Light y Sepia el acento crudo puede perderse (p. ej. #ffffba sobre blanco): la tinta se oscurece.
   --ink-mix (55 % por defecto) baja a ~38 % cuando el color del VRO es muy claro: lo fija vro-slider.js. */
@supports (color: color-mix(in srgb, red 50%, blue)){
  :is([data-vro-reading="light"] .vsl, .vsl[data-vro-reading="light"]){
    --accent-ink:color-mix(in srgb, var(--vro-theme,var(--vro-theme-fallback)) var(--ink-mix,55%), #000000);
    --accent-ui:var(--accent-ink);
  }
  :is([data-vro-reading="sepia"] .vsl, .vsl[data-vro-reading="sepia"]){
    --accent-ink:color-mix(in srgb, var(--vro-theme,var(--vro-theme-fallback)) var(--ink-mix,55%), #2a2418);
    --accent-ui:var(--accent-ink);
  }
}
/* V.SKIN = snow: papel con sombra. El borde no se quita (transparent): el layout no se mueve. */
[data-vro-skin="snow"] .vsl{
  --edge:transparent; --surface:#202020;
  --lift:0 8px 24px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
}
[data-vro-skin="snow"] :is([data-vro-reading="light"] .vsl, .vsl[data-vro-reading="light"]){
  --bg:#ffffff; --surface:#ffffff;
  --lift:0 8px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
}
[data-vro-skin="snow"] :is([data-vro-reading="sepia"] .vsl, .vsl[data-vro-reading="sepia"]){
  --surface:#fbf6ea;
  --lift:0 8px 24px rgba(42,36,24,.12), 0 2px 6px rgba(42,36,24,.08);
}
:is([data-vro-font="serif"] .vsl){ --font-read:'Newsreader',Georgia,serif; }
:is([data-vro-font="lexend"] .vsl){ --font-read:'Lexend','Space Grotesk',sans-serif; }
:is([data-vro-font="mono"] .vsl){ --font-read:'JetBrains Mono',monospace; }

/* ===== BASE ===== */
.vsl{position:relative; container:vsl / inline-size; background:var(--bg); color:var(--fg); font-family:var(--font-display);
  font-size:calc(16px * var(--vro-read-scale,1)); text-align:left;
  transition:background-color .3s var(--ease), color .3s var(--ease);}
.vsl *{box-sizing:border-box}
.vsl :is(h1,h2,h3){font-family:var(--font-display); margin:0; color:inherit}
.vsl p{margin:0 0 .9em}
.vsl button{font-family:var(--font-display); -webkit-tap-highlight-color:transparent}
.vsl :is(a,button,[tabindex]):focus-visible{outline:2px solid var(--accent-ui); outline-offset:3px}
.vsl .vsl-title:focus{outline:none}
.vsl .vsl-title:focus-visible{outline:2px solid var(--accent-ui); outline-offset:6px; border-radius:4px}
.vsl:focus{outline:none}
.vsl-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}
.vsl-probe{position:absolute; width:0; height:0; overflow:hidden; color:var(--accent-ui); pointer-events:none}
.vsl-read{font-family:var(--font-read); font-weight:400; line-height:1.6}
.vsl-read strong{font-weight:700; color:var(--fg)}

/* ===== DECK: sin JS = apiladas; con JS = track horizontal ===== */
.vsl--js{height:100svh; min-height:560px; overflow:hidden}
.vsl--js.vsl--hosted{height:100%; min-height:0}
.vsl--js .vsl-track{display:flex; height:100%; transition:transform .7s var(--ease)}
.vsl-slide{border-top:1px solid var(--line)}
.vsl-slide:first-child{border-top:0}
.vsl--js .vsl-slide{flex:0 0 100%; height:100%; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border-top:0}
.vsl-in{max-width:72rem; margin:0 auto; padding:56px clamp(20px,5cqi,64px) 64px; display:flex; flex-direction:column; justify-content:center}
.vsl--js .vsl-in{min-height:100%; padding-top:clamp(28px,6vh,64px); padding-bottom:96px}
/* Dentro del view: la esquina superior derecha es del engrane (46 px a y=18). */
.vsl--js.vsl--hosted .vsl-in{padding-top:max(80px, clamp(28px,6vh,64px))}

.vsl-kicker{font:700 14px/1.35 var(--font-display); color:var(--muted); margin-bottom:14px}
.vsl h1.vsl-title{color:var(--accent-ink); font-weight:900; font-size:clamp(1.6rem,5.2cqi,4.6rem); line-height:.98; letter-spacing:-.03em; margin-bottom:22px; max-width:22ch}
.vsl h2.vsl-title{color:var(--accent-ink); font-weight:900; font-size:clamp(1.5rem,5.6cqi,4.8rem); line-height:.96; letter-spacing:-.035em; margin-bottom:20px; max-width:20ch}
.vsl-copy .vsl-read{font-size:1.1em; max-width:40rem}
.vsl-split{display:grid; gap:28px; grid-template-columns:1fr; align-items:center}
.vsl-split .vsl-read{max-width:34rem}

/* ===== TIRA DE FÓRMULA / MARCO (opcional): se enciende la parte que mueve la slide ===== */
.vsl-formula{display:flex; flex-wrap:wrap; align-items:baseline; font-weight:900; letter-spacing:-.04em; line-height:.95}
.vsl-formula .op{margin:0 .14em}
.vsl-formula--hero{font-size:clamp(1.8rem,9cqi,7rem); color:var(--accent-ink); margin:14px 0 6px}
.vsl-formula--mini{font-size:18px; letter-spacing:0; color:var(--muted); line-height:1.2}
.vsl-formula--mini .t{padding:4px 8px; border-radius:6px}
.vsl-formula--mini .op{margin:0 3px}
.vsl-formula--mini .t.is-on{background:var(--accent-ui); color:var(--on-accent)}
.vsl-fstrip{display:flex; align-items:center; gap:10px 16px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:clamp(18px,4vh,40px); border-bottom:1px solid var(--line)}
.vsl-fstrip p{margin:0; color:var(--muted); font:500 15px/1.35 var(--font-display)}
.vsl-fstrip b{color:var(--fg)}

/* ===== ILUSTRACIONES (SVG con tokens, nunca HEX) ===== */
/* Sin caja: la ilustración va directo sobre el fondo, sin marco, sombra ni recorte (overflow visible: nada se corta). */
.vsl-ill{margin:0; padding:0; overflow:visible}
.vsl-ill svg{display:block; width:100%; height:auto; max-height:56vh; overflow:visible; color:var(--fg); fill:var(--fg)}
.vsl-ill svg text{fill:currentColor; font-family:var(--font-display); font-weight:700}
.vsl-ill figcaption{font:700 14px/1.35 var(--font-display); color:var(--muted); margin-top:10px}
.vsl-ill .body{fill:var(--surface); stroke:var(--fg); stroke-width:2; stroke-linejoin:round}
.vsl-ill .ring{fill:none; stroke:var(--line); stroke-width:2}
.vsl-ill .ink{fill:none; stroke:var(--fg); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.vsl-ill .soft{fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linecap:round}
.vsl-ill .acc{fill:var(--accent-ink)}                 /* significado = --accent-ink, nunca --vro-theme */
.vsl-ill .acc-s{fill:none; stroke:var(--accent-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round}
.vsl-ill .muted{fill:var(--muted)}
.vsl-ill .surface{fill:var(--surface)}
/* Etiqueta: su tamaño real en pantalla lo fija vro-slider.js (--lbl = px deseados / escala del viewBox), para que no
   crezca con la figura. 13 es el valor de respaldo (sin JS). */
.vsl-ill .label{fill:var(--muted); font-size:calc(var(--lbl,13) * 1px); font-weight:700}

/* 🌟 Fase 4: plantillas de infografía. Se dibujan en píxeles reales (viewBox = ancho de la figura): sin escala ni --lbl. */
.vsl-ill svg.vsl-g{max-height:none; margin:0 auto}
.vsl-g text{font-family:var(--font-display); font-weight:700; fill:var(--fg)}
.vsl-g .gm{fill:var(--muted); font-weight:500}
.vsl-g .gf{fill:var(--on-accent)}
.vsl-g .gk{fill:var(--fg)}
.vsl-g .gfc{fill:var(--on-accent)}
.vsl-g .gfs{fill:none; stroke:var(--on-accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.vsl-g .ink{stroke-width:1.6}
.vsl-g .acc-s{stroke-width:2.5}
/* 🌟 Red interactiva (grafico.particle): líneas por cercanía en 4 niveles de transparencia, irradiación del foco, líneas del cursor. */
.vsl-g[data-net]{touch-action:none; cursor:crosshair}
.vsl-g .pn-l{fill:none; stroke:var(--fg); stroke-width:1}
.vsl-g .pn-l0{stroke-opacity:.10} .vsl-g .pn-l1{stroke-opacity:.20} .vsl-g .pn-l2{stroke-opacity:.32} .vsl-g .pn-l3{stroke-opacity:.46}
.vsl-g .pn-acc{fill:none; stroke:var(--accent-ink); stroke-width:1.4; stroke-opacity:.55}
.vsl-g .pn-c{fill:none; stroke:var(--accent-ink); stroke-width:1.2}
.vsl-g .pn-c0{stroke-opacity:.25} .vsl-g .pn-c1{stroke-opacity:.45} .vsl-g .pn-c2{stroke-opacity:.7}
.vsl-g .pn-dot{fill:var(--muted)}
.vsl-g .pn-cur{fill:var(--accent-ink); pointer-events:none}

/* Actúan UNA vez al entrar. Estado final por defecto (sin JS / reduced-motion);
   con JS arrancan en el inicio y corren cuando la figura recibe .is-in.
   Solo transform y opacity. --d = orden de entrada (0, 1, 2...). */
.vsl-ill :is(.grow,.rise,.fade,.slide,.pop,.drift,.spin,.pulse,.bob){transform-box:fill-box; transform-origin:center}
.vsl--js .vsl-ill:not(.is-in) .grow{transform:scale(.4); opacity:.35}
.vsl--js .vsl-ill:not(.is-in) .pop{transform:scale(0); opacity:0}
.vsl--js .vsl-ill:not(.is-in) .rise{transform:translateY(24px); opacity:0}
.vsl--js .vsl-ill:not(.is-in) .slide{transform:translateX(-28px); opacity:0}
.vsl--js .vsl-ill:not(.is-in) .fade{opacity:0}
.vsl-ill.is-in :is(.grow,.pop,.rise,.slide,.fade){
  transition:transform 1.1s var(--ease), opacity 1.1s var(--ease);
  transition-delay:calc(.45s + var(--d,0) * .18s)}

/* Movimiento firma: continuo, solo mientras la slide está en pantalla. */
.vsl-ill .drift{animation:vsl-drift 30s linear infinite paused}
.vsl-ill .spin{animation:vsl-spin 24s linear infinite paused}
.vsl-ill .pulse{animation:vsl-pulse 2.6s var(--ease) infinite alternate paused}
.vsl-ill .bob{animation:vsl-bob 3.2s var(--ease) infinite alternate paused}
.vsl-slide.is-on .vsl-ill :is(.drift,.spin,.pulse,.bob){animation-play-state:running}
@keyframes vsl-drift{to{transform:translateX(-600px)}}
@keyframes vsl-spin{to{transform:rotate(360deg)}}
@keyframes vsl-pulse{to{transform:scale(1.07)}}
@keyframes vsl-bob{to{transform:translateY(-6px)}}

/* ===== NAVEGACIÓN: pasos clicables que expresan la metáfora (menú cerrado) =====
   Abajo a la derecha (la izquierda es de las pestañas de ronda del view), compacta y en píldora.
   Los pasos miden 12 px de ancho; el control equivalente de 24 px o más son las flechas ‹ ›
   (28 px), visibles también en celular (WCAG 2.5.8, excepción "equivalente"). */
.vsl-nav,.vsl-timer{display:none}
.vsl--js .vsl-nav{display:flex; align-items:flex-end; gap:6px; position:absolute; z-index:45;
  right:max(16px,env(safe-area-inset-right)); bottom:max(16px,env(safe-area-inset-bottom)); max-width:calc(100% - 32px);
  padding:5px 6px 5px 12px; background:var(--surface); border:1px solid var(--edge); box-shadow:var(--lift); border-radius:999px;
  transition:transform .35s var(--ease), opacity .35s var(--ease)}
.vsl-steps{position:relative; display:flex; align-items:flex-end; flex:0 1 auto; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; padding-bottom:4px}
.vsl-steps::-webkit-scrollbar{display:none}
/* Cada paso es un botón transparente; lo que se ve va en ::before, redondeado. */
.vsl-step{position:relative; flex:0 0 12px; width:12px; min-height:24px; padding:0; margin:0; border:0; background:transparent; cursor:pointer}
.vsl-step::before{content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); background:var(--line); border-radius:999px; transition:transform .2s var(--ease)}
.vsl-step:hover::before{transform:translate(-50%,-2px)}
.vsl-step.is-past::before{background:var(--muted)}
.vsl-step.is-here::before{background:var(--accent-ui)}
.vsl-mark{position:absolute; left:0; top:0; pointer-events:none; transition:transform .6s var(--ease)}
.vsl-hop{display:block}
.vsl-hop.hop{animation:vsl-hop .6s var(--ease)}
@keyframes vsl-hop{45%{transform:translateY(-6px)}}

/* Escalera: peldaños que suben; un punto salta al peldaño actual. */
.vsl--escalera .vsl-steps{padding-top:16px}
.vsl--escalera .vsl-step{height:calc(var(--h) * 1px + 4px)}
.vsl--escalera .vsl-step::before{width:8px; height:calc(var(--h) * 1px)}
.vsl--escalera .vsl-hop{width:7px; height:7px; border-radius:50%; background:var(--accent-ui)}
/* Guía de TV: bloques de programación iguales; una línea marca "ahora". */
.vsl--guia_tv .vsl-steps{padding-top:6px}
.vsl--guia_tv .vsl-step::before{width:10px; height:9px; bottom:2px}
.vsl--guia_tv .vsl-hop{width:2px; height:28px; border-radius:2px; background:var(--fg)}
/* Pasillos: puertas en fila; un punto camina por delante de la puerta actual. */
.vsl--pasillos .vsl-steps{padding-bottom:9px}
.vsl--pasillos .vsl-step::before{width:7px; height:16px; border-radius:999px 999px 2px 2px}
.vsl--pasillos .vsl-hop{width:5px; height:5px; border-radius:50%; background:var(--accent-ui)}

.vsl-count{font:700 11px/1 var(--font-display); color:var(--muted); letter-spacing:.5px; white-space:nowrap; padding:0 2px 8px; font-variant-numeric:tabular-nums}
.vsl-btns{display:flex; gap:4px; flex:0 0 auto}
.vsl-btn{width:28px; height:28px; display:grid; place-items:center; padding:0; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--fg); cursor:pointer; transition:transform .2s var(--ease)}
.vsl-btn:hover{transform:translateY(-2px)}
.vsl-btn:disabled{opacity:.35; cursor:default; transform:none}
.vsl-btn svg{width:10px; height:10px; fill:currentColor}
.vsl-btn.play{background:var(--accent-ui); color:var(--on-accent); border-color:var(--accent-ui)}
.vsl-btn .i-pause{display:none}
.vsl-btn[aria-pressed="true"] .i-play{display:none}
.vsl-btn[aria-pressed="true"] .i-pause{display:block}
.vsl--js .vsl-timer{display:block; position:absolute; top:0; left:0; right:0; height:3px; z-index:46; background:var(--accent-ui); transform:scaleX(0); transform-origin:left}
.vsl-timer.run{animation:vsl-fill var(--dur) linear forwards}
@keyframes vsl-fill{to{transform:scaleX(1)}}

/* ===== MOTION BASE: entrada escalonada del texto al activarse la slide ===== */
.vsl--js .vsl-slide .vro-t{opacity:0; transform:translateX(70px)}
.vsl--js .vsl-slide .vro-in{opacity:0}
.vsl--js .vsl-slide.is-on .vro-t{opacity:1; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}
.vsl--js .vsl-slide.is-on .vro-in{opacity:1; transition:opacity .8s var(--ease); transition-delay:calc(var(--i,0) * 70ms)}

/* ===== RESPONSIVE (probar a 375 px y en la caja del Turnario) ===== */
/* Container queries: el deck se adapta a SU caja (view, Turnario o página sola), no a la ventana. */
@container vsl (min-width:700px){ .vsl-split{grid-template-columns:1.1fr 1fr; gap:56px} }
/* Celular (caja del deck ≤ 520 px): la slide usa 16 px de margen lateral para darle ancho a la ilustración. */
@container vsl (max-width:520px){
  .vsl-in{padding-left:16px; padding-right:16px}
  .vsl-ill figcaption{margin-top:8px}
}
@container vsl (max-width:760px){
  .vsl--js .vsl-in{padding-bottom:96px; justify-content:flex-start}
  /* La barra se esconde al hacer scroll hacia abajo dentro de una slide. */
  .vsl--navhide .vsl-nav{transform:translateY(calc(100% + 32px)); opacity:0; pointer-events:none}
}

/* ===== REDUCED MOTION: todo en estado final, sin autoplay ===== */
@media (prefers-reduced-motion:reduce){
  .vsl *,.vsl *::before,.vsl *::after,.vsl{transition:none !important; animation:none !important}
  .vsl--js .vsl-slide .vro-t,.vsl--js .vsl-slide .vro-in{opacity:1; transform:none}
  .vsl--js .vsl-ill:not(.is-in) :is(.grow,.pop,.rise,.slide,.fade){opacity:1; transform:none}
  .vsl-btn.play{display:none}
}