/* Reproductor de presentaciones "vivas" (uso interno en la cita). Las láminas miden 1920×1080
   y se escalan a la pantalla; cada lámina se anima al entrar. */
html, body { margin:0; height:100%; background:#06101f; overflow:hidden }
#escenario { position:fixed; inset:0; overflow:hidden }
#escenario > .slide { position:absolute; left:0; top:0; transform-origin:0 0; opacity:0; visibility:hidden;
  transition:opacity .45s ease, visibility 0s linear .45s; box-shadow:0 30px 90px rgba(0,0,0,.45) }
#escenario > .slide.activa { opacity:1; visibility:visible; transition:opacity .45s ease }

/* ——— Animaciones (solo con .anim; sin JS o con ?sinanim todo se ve normal) ——— */
.anim .slide [data-a] { opacity:0; transform:translateY(28px) }
.anim .slide [data-a="zoom"] { transform:scale(1.08) }
.anim .slide [data-a="pop"] { transform:scale(.6) }
.anim .slide [data-a="barra"] { transform:scaleY(0); transform-origin:50% 100% }
.anim .slide [data-a="izq"] { transform:translateX(-40px) }
.anim .slide.in [data-a] { opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--d,0s) }
.anim .slide.in [data-a="barra"] { transition:transform 1.1s cubic-bezier(.22,1,.36,1), opacity .3s; transition-delay:var(--d,0s) }
.anim .slide.in [data-a="zoom"] { transition:opacity 1s ease, transform 2.4s cubic-bezier(.22,1,.36,1); transition-delay:var(--d,0s) }
.anim .slide [data-trazo] { stroke-dashoffset:var(--len) }
.anim .slide.in [data-trazo] { stroke-dashoffset:0; transition:stroke-dashoffset var(--t,1.6s) cubic-bezier(.45,0,.2,1); transition-delay:var(--d,0s) }

/* ——— Barra de controles: aparece al mover el mouse ——— */
#barra { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:999px; background:rgba(6,16,31,.78); backdrop-filter:blur(10px);
  font:500 14px system-ui,-apple-system,"Segoe UI",sans-serif; color:#cbd5e1; z-index:10;
  transition:opacity .4s ease; opacity:0; pointer-events:none }
body.controles #barra { opacity:1; pointer-events:auto }
#barra button, #barra a { all:unset; cursor:pointer; min-width:40px; height:40px; padding:0 12px; box-sizing:border-box;
  display:inline-flex; align-items:center; justify-content:center; border-radius:999px; color:#e2e8f0 }
#barra button:hover, #barra a:hover { background:rgba(255,255,255,.12) }
#barra button:disabled { opacity:.3; cursor:default; background:none }
#barra .cuenta { min-width:64px; text-align:center; font-variant-numeric:tabular-nums; color:#94a3b8 }

/* ——— Cuadrícula de láminas (G) ——— */
#rejilla { position:fixed; inset:0; z-index:20; overflow-y:auto; background:rgba(6,16,31,.96); padding:32px; display:none }
#rejilla.abierta { display:block }
#rejilla .mosaico { max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px }
#rejilla .mini { cursor:pointer; border-radius:8px; overflow:hidden; outline:2px solid transparent; position:relative; aspect-ratio:16/9; background:#fff }
#rejilla .mini.actual { outline-color:#2f7ff0 }
#rejilla .mini:hover { outline-color:rgba(255,255,255,.5) }
#rejilla .mini .slide { position:absolute; left:0; top:0; transform-origin:0 0; pointer-events:none }
#rejilla .mini span { position:absolute; right:8px; bottom:6px; font:600 12px system-ui,sans-serif; color:#475569; background:rgba(255,255,255,.85); padding:1px 7px; border-radius:99px }

@media (prefers-reduced-motion: reduce) { #escenario > .slide { transition:none } }

/* Láminas armadas a partir de secciones de una página web (Herencia) */
#escenario > .slide.hz { overflow:hidden; position:absolute }
.slide.hz > .hz-fit { width:100% }