/* Páginas de escena de B&N Lectures (/lectures/escenas/<id>): el mismo lenguaje
   de /lectures (teaser de BN_Videos/teaser-v1b): fondo casi negro azulado, azul
   #5B86FF, Space Grotesk en mayúsculas con tracking cerrado, rótulos en IBM Plex
   Mono, look de cinta. Las genera build-lectures-escenas.js. */
:root{
  --bg:#020306; --ink:#F4F5F8;
  --ink-2:rgba(244,245,248,.74); --ink-3:rgba(244,245,248,.48); --ink-4:rgba(244,245,248,.30);
  --edge:rgba(244,245,248,.09); --edge-2:rgba(244,245,248,.18);
  --azul:#5B86FF; --azul-rgb:91 134 255; --hielo-rgb:205 218 255;
  --sans:'Space Grotesk',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(20px,5vw,96px); --max:1320px; --e-out:cubic-bezier(.16,1,.3,1);
}
html, html body{background:var(--bg)!important;}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;}
main{overflow-x:clip;}
@supports not (overflow:clip){ main{overflow-x:hidden;} }
html[lang="en"] .es, html:not([lang="en"]) .en{display:none !important;}
a{color:inherit;text-decoration:none;}
::selection{background:rgb(var(--azul-rgb)/.5);color:#fff;}
img,video{display:block;}

/* Look de cinta (igual que /lectures): scanlines, viñeta y grano real alternado. */
.crt{position:fixed;inset:0;z-index:900;pointer-events:none;}
.crt::before{content:'';position:absolute;inset:0;opacity:.45;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);}
.crt::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 120% 95% at 50% 46%,transparent 55%,rgba(0,0,0,.55) 100%);}
.crt i{position:absolute;inset:0;background-size:180px 180px;opacity:.07;mix-blend-mode:screen;visibility:hidden;animation:grano .5s steps(1) infinite;}
.crt i:nth-of-type(1){background-image:var(--g0,none);}
.crt i:nth-of-type(2){background-image:var(--g1,none);animation-delay:-.125s;}
.crt i:nth-of-type(3){background-image:var(--g2,none);animation-delay:-.25s;}
.crt i:nth-of-type(4){background-image:var(--g3,none);animation-delay:-.375s;}
@keyframes grano{0%{visibility:visible}25%{visibility:hidden}100%{visibility:hidden}}

.marco{max-width:var(--max);margin:0 auto;padding:0 var(--pad);position:relative;}
.mono{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.mono b{font-weight:500;color:var(--ink-2);}
.az{color:var(--azul);}

/* ── Portada de la escena ── */
.esc-tapa{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,100px);align-items:center;
  padding:clamp(56px,10vh,120px) 0 clamp(64px,10vh,120px);}
.migas{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 clamp(26px,4vh,40px);}
.migas a:hover{color:var(--ink);}
.migas span[aria-hidden]{color:var(--ink-4);}
.esc-tit{margin:0;font-weight:700;font-size:clamp(46px,7vw,112px);line-height:.9;letter-spacing:-.045em;text-transform:uppercase;}
.esc-tit .num{display:block;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.16em;color:var(--azul);margin-bottom:22px;}
.esc-eq{display:inline-block;margin:clamp(22px,3vh,30px) 0 0;padding:10px 14px;border:1px solid var(--edge-2);
  font-family:var(--mono);font-size:clamp(13px,1.1vw,15px);letter-spacing:.02em;color:var(--ink);background:rgb(var(--azul-rgb)/.06);}
.lead{font-size:clamp(16px,1.35vw,19px);line-height:1.62;color:var(--ink-2);max-width:52ch;margin:clamp(22px,3vh,30px) 0 0;}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:clamp(28px,4vh,40px);}
.haz{position:relative;display:inline-flex;align-items:center;gap:.8rem;padding:1.1rem 2rem;overflow:hidden;isolation:isolate;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  box-shadow:0 22px 60px -18px rgb(var(--azul-rgb)/.55);transition:transform .5s var(--e-out);}
.haz::before{content:'';position:absolute;z-index:-2;width:230%;aspect-ratio:1;left:-65%;top:50%;transform:translateY(-50%);
  background:conic-gradient(transparent 0deg,rgb(var(--azul-rgb)/.75) 40deg,var(--azul) 72deg,rgb(var(--azul-rgb)/.75) 104deg,transparent 150deg);
  animation:giro 3.4s linear infinite;}
.haz::after{content:'';position:absolute;inset:1.5px;z-index:-1;background:rgb(2 3 6/.96);transition:background .45s var(--e-out);}
@keyframes giro{to{transform:translateY(-50%) rotate(360deg);}}
@media(hover:hover) and (pointer:fine){ .haz:hover{transform:translateY(-2px);} .haz:hover::after{background:rgb(var(--azul-rgb)/.16);} }
.haz svg,.boton svg{width:15px;height:15px;flex:none;}
.boton{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--edge-2);padding:1.05rem 1.5rem;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);transition:border-color .3s ease,color .3s ease;}
.boton:hover{border-color:rgb(var(--azul-rgb)/.6);color:var(--ink);}
.esc-video{position:relative;aspect-ratio:4/5;width:min(100%,560px);justify-self:end;border:1px solid var(--edge-2);background:#000;overflow:hidden;
  box-shadow:0 60px 140px -40px rgb(var(--azul-rgb)/.35);}
.esc-video video,.esc-video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.esc-video .tag{position:absolute;left:16px;bottom:14px;z-index:2;}

/* ── Secciones tipo README ── */
.bloque{position:relative;padding:clamp(64px,10vh,110px) 0;border-top:1px solid var(--edge);}
.bloque-cab{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);}
.bloque h2{margin:0;font-weight:500;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.02em;line-height:1.1;}
.bloque h2 .mono{display:block;color:var(--azul);margin-bottom:14px;}
.prosa p{font-size:clamp(16px,1.25vw,18px);line-height:1.7;color:var(--ink-2);margin:0;max-width:64ch;}
.prosa p + p{margin-top:1.1em;}
.prosa strong{color:var(--ink);font-weight:500;}
.prosa code,.pasos code{font-family:var(--mono);font-size:.88em;padding:.1em .35em;background:rgb(var(--hielo-rgb)/.07);border:1px solid var(--edge);color:var(--ink);}
.pasos{list-style:none;margin:0;padding:0;counter-reset:p;display:grid;gap:2px;}
.pasos li{counter-increment:p;display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--edge);
  font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.62;color:var(--ink-2);}
.pasos li::before{content:counter(p,decimal-leading-zero);font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--azul);padding-top:4px;}
.datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--edge);border:1px solid var(--edge);margin-top:clamp(36px,5vh,56px);}
.dato{background:var(--bg);padding:20px 22px;display:flex;flex-direction:column;gap:10px;}
.dato b{font-family:var(--mono);font-weight:400;font-size:clamp(15px,1.25vw,18px);color:var(--ink);text-transform:none;letter-spacing:0;line-height:1.35;}

/* ── Código ── */
.codigo{margin:clamp(28px,4vh,44px) 0 0;border:1px solid var(--edge-2);background:#05070d;
  box-shadow:0 40px 100px -50px rgb(var(--azul-rgb)/.4);}
.codigo + .codigo{margin-top:22px;}
.codigo-cab{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 16px;border-bottom:1px solid var(--edge);background:rgb(var(--hielo-rgb)/.03);}
.codigo-cab .ruta{display:flex;align-items:center;gap:10px;min-width:0;}
.codigo-cab .ruta i{width:8px;height:8px;border-radius:50%;background:var(--azul);box-shadow:0 0 10px var(--azul);flex:none;}
.codigo-cab .ruta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none;letter-spacing:.04em;}
.codigo-cab .ops{display:flex;gap:8px;}
.op{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--edge-2);background:none;color:var(--ink-3);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .25s ease,border-color .25s ease;}
.op:hover{color:var(--ink);border-color:rgb(var(--azul-rgb)/.6);}
.op svg{width:12px;height:12px;}
.op.hecho{color:var(--azul);border-color:var(--azul);}
.codigo-nota{padding:12px 16px 0;font-size:14px;line-height:1.55;color:var(--ink-3);}
pre.src{margin:0;padding:14px 0 16px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.72;color:#cfd8f2;tab-size:2;
  scrollbar-color:rgb(var(--hielo-rgb)/.2) transparent;}
pre.src .ln{display:block;padding:0 18px 0 0;white-space:pre;}
pre.src .ln::before{content:attr(data-n);display:inline-block;width:4.2em;padding-right:1.2em;text-align:right;color:var(--ink-4);user-select:none;-webkit-user-select:none;}
pre.src .c{color:#6b7896;font-style:italic;}
pre.src .k{color:#8fb0ff;}
pre.src .n{color:#ffcf9a;}
pre.src .s{color:#9ee6c8;}
pre.src .f{color:#f4f5f8;}
pre.src .t{color:#c7a6ff;}

/* Terminal */
.term{margin:clamp(28px,4vh,40px) 0 0;border:1px solid var(--edge-2);background:#05070d;}
.term-cab{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--edge);}
.term-cab .luces{display:flex;gap:6px;}
.term-cab .luces i{width:9px;height:9px;border-radius:50%;background:var(--edge-2);}
.term pre{margin:0;padding:18px 20px;overflow:auto;font-family:var(--mono);font-size:12.5px;line-height:1.85;color:#cfd8f2;}
.term .p{color:var(--azul);user-select:none;-webkit-user-select:none;}
.term .c{color:#6b7896;}

/* ── Navegación entre escenas ── */
.vecinas{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);padding:clamp(56px,9vh,96px) 0 0;border-top:1px solid var(--edge);}
.vecina{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;padding:16px;border:1px solid var(--edge);transition:border-color .35s ease,background .35s ease;}
.vecina:hover{border-color:rgb(var(--azul-rgb)/.55);background:rgb(var(--azul-rgb)/.04);}
.vecina img{width:96px;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--edge);}
.vecina b{display:block;font-weight:500;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;text-transform:uppercase;margin-top:8px;color:var(--ink);}
.vecina.sig{text-align:right;grid-template-columns:minmax(0,1fr) 96px;}
.vecina.sig img{order:2;}
.pie{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 28px;padding:36px 0 calc(36px + env(safe-area-inset-bottom,0px));margin-top:clamp(56px,9vh,96px);border-top:1px solid var(--edge);}
.pie nav{display:flex;flex-wrap:wrap;gap:10px 22px;}
.pie a:hover{color:var(--ink);}

/* Aparición suave */
.sube{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1.1s var(--e-out);transition-delay:var(--d,0s);}
.sube.va{opacity:1;transform:none;}

@media(max-width:900px){
  .esc-tapa{grid-template-columns:1fr;padding-top:36px;}
  .esc-video{order:-1;justify-self:stretch;width:calc(100% + 2 * var(--pad));max-width:none;margin:0 calc(-1 * var(--pad));border-left:0;border-right:0;}
  .bloque-cab{grid-template-columns:1fr;}
  .datos{grid-template-columns:1fr 1fr;}
}
@media(max-width:700px){
  :root{--pad:20px;}
  .crt::before{opacity:.1;}
  .crt i{opacity:.022;background-size:110px 110px;mix-blend-mode:normal;}
  .esc-tit{font-size:13vw;}
  .acciones{flex-direction:column;align-items:stretch;}
  .haz,.boton{justify-content:center;}
  .pasos li{grid-template-columns:36px minmax(0,1fr);gap:10px;}
  pre.src{font-size:11.5px;}
  pre.src .ln::before{width:3.2em;padding-right:.9em;}
  .codigo,.term{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-left:0;border-right:0;}
  .vecinas{grid-template-columns:1fr;}
  .vecina,.vecina.sig{grid-template-columns:72px minmax(0,1fr);text-align:left;}
  .vecina img{width:72px;}
  .vecina.sig img{order:0;}
  .pie{flex-direction:column;}
}
@media(prefers-reduced-motion:reduce){
  .crt i,.haz::before{animation:none;} .crt i:first-of-type{visibility:visible;}
  .sube{opacity:1;transform:none;transition:none;}
}