/* =====================================================================
   JUNKOS · Estilos de la piel
   Sale de docs/direccion-de-arte/boceto-v1.html, adaptado a la
   especificación v2.1 y al motor 0.2.0.
   Colores y fuentes: identidad.css (se carga antes que este archivo).
   Los nombres de clase son los del boceto; las plantillas los usan tal cual.
   Índice:
     1. Tokens propios y base        8. Estudio: puerta y monitor
     2. Intro                        9. Estudio: ventanas 90s
     3. Cabecera                    10. Ventanas: Momentos, Música, La Ruta,
     4. Portada con vídeo               parada, Producción, Tienda
     5. Secciones y Sobre mí        11. Contrataciones (formulario del motor)
     6. La Ruta                     12. Piezas del motor: recuadro de permiso
     7. Redes, pie y legales            y aviso de cookies
                                    13. 404, móvil y movimiento reducido
   ===================================================================== */

/* ============ 1. TOKENS PROPIOS Y BASE ============ */
:root{
  --hdr:64px;                          /* alto de la cabecera */
  --barra:40px;                        /* alto de la barra de tareas del estudio */
  --px:clamp(18px,4.5vw,56px);         /* relleno lateral */
  --py:clamp(80px,11vw,150px);         /* relleno vertical de sección */
  --max:1240px;                        /* ancho máximo del contenido */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-card:6px; --r-story:12px; --r-pill:60px;
  --t-in:.8s; --t-hover:.25s;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--fb);font-size:16px;line-height:1.6;overflow-x:hidden}
body.lock{overflow:hidden}                  /* intro o estudio abiertos */
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
img{max-width:100%;display:block}
[hidden]{display:none!important}
.chrome{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
/* El cromo solo se pinta dentro de la caja: la de JUNKOS grande mide lo que el texto, más un margen para la S (el espaciado negativo la recortaba) */
.hero h1.chrome,.foot-logo.chrome{width:max-content;max-width:none;padding-right:.08em}
.acc{color:var(--acc)}
.solo-lectores{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
/* Grano */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ 2. INTRO (láseres que escriben JUNKOS) ============
   Marcado y JavaScript de referencia: docs/direccion-de-arte/intro-laser-referencia.html.
   Un SVG de 1000 × 500 con el texto JUNKOS dos veces: .stroke (el trazo que van dibujando
   los láseres, de izquierda a derecha) y .fill (el relleno cromado, que aparece al final).
   Los rayos (.beams) salen de debajo de la pantalla hacia la punta del trazo. */
#intro{position:fixed;inset:0;z-index:1000;background:#000;display:none;place-items:center;overflow:hidden;transition:opacity .55s ease}
#intro.out{opacity:0;pointer-events:none}
.intro-activa #intro,#intro.out{display:grid}   /* sin «intro-activa» (sin JS, ya vista o movimiento reducido) no sale */
#intro svg{width:100%;height:100%;overflow:visible}
#intro .stroke{fill:none;stroke:var(--acc);stroke-width:2.4}
#intro .fill{opacity:0;transition:opacity .35s ease}
#intro.done .fill{opacity:1}
#intro .beams line{stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;opacity:.9}
#intro .beams circle{fill:#fff}
#intro.done .beams{opacity:0;transition:opacity .3s}
#intro::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(184,255,60,.35),transparent 60%);opacity:0;pointer-events:none}
#intro.done::after{animation:flash .7s ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
#intro .skip{position:absolute;right:20px;bottom:20px;background:none;border:1px solid #333;color:#777;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:8px 14px;border-radius:40px}
#intro .skip:hover{color:#fff;border-color:#666}
/* Mientras la intro está en marcha, el aviso de cookies del motor no se ve.
   intro.js pone «intro-activa» en <html> desde el <head> y la quita al acabar o al saltarla. */
.intro-activa .cookies-aviso{display:none!important}

/* ============ 3. CABECERA ============ */
.hdr{position:fixed;top:0;left:0;right:0;height:var(--hdr);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 var(--px);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
.hdr.scrolled{background:rgba(7,7,8,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
/* JUNKOS en texto cromado: <a href="/" class="logo chrome">JUNKOS</a> */
.logo{display:block;font-family:var(--fd);font-weight:900;font-size:20px;line-height:1;letter-spacing:.02em;text-decoration:none}
.nav{display:flex;align-items:center;gap:28px;font-size:14px}
.nav a,.nav .navbtn{text-decoration:none;color:#c9c9cf;background:none;border:0;transition:color .2s}
.nav a:hover,.nav .navbtn:hover{color:#fff}
.btn-hire{border:1px solid var(--acc)!important;color:var(--acc)!important;padding:9px 18px;border-radius:40px;font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,color .2s!important}
.btn-hire:hover{background:var(--acc);color:#000!important}

/* ============ 4. PORTADA CON VÍDEO ============
   Marcado:
   <section class="hero">
     {{ imagen(pagina.portada.imagen, "100vw", "hero-poster") }}
     <video class="hero-video" muted loop playsinline preload="none" poster="/recursos/video/portada.jpg" aria-hidden="true">
       <source src="/recursos/video/portada-movil.mp4" media="(max-width: 900px) and (orientation: portrait)" type="video/mp4">
       <source src="/recursos/video/portada-1080.mp4" type="video/mp4">
     </video>
     <div class="hero-c">…</div>
   </section> */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;padding:0 var(--px) clamp(40px,8vh,90px);background:#060607}
.hero-poster,.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-poster{z-index:0}
.hero-video{z-index:1}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,8,.6) 0%,rgba(7,7,8,.15) 28%,rgba(7,7,8,.5) 50%,rgba(7,7,8,.95) 100%)}   /* más oscuro desde la mitad: los fogonazos del vídeo no tapan el texto */
.hero-c{position:relative;z-index:3;max-width:1100px;text-shadow:0 1px 10px rgba(0,0,0,.85)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#cfcfd5;font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 12px var(--acc);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
/* <h1 class="chrome">JUNKOS</h1> */
.hero h1{font-family:var(--fd);font-weight:900;font-size:clamp(54px,15.5vw,230px);line-height:.88;letter-spacing:-.02em;margin:14px 0 18px;filter:drop-shadow(0 6px 30px rgba(0,0,0,.6));text-shadow:none}   /* la sombra de .hero-c taparía el cromo (texto transparente) */
.hero p{max-width:520px;color:#d2d2d8;font-size:clamp(15px,1.4vw,18px)}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.btn-listen{display:inline-flex;align-items:center;gap:14px;background:rgba(10,10,12,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--acc);color:#fff;padding:14px 22px 14px 16px;border-radius:var(--r-pill);font-weight:600;font-size:15px;letter-spacing:.02em;text-decoration:none;
  box-shadow:0 0 0 0 var(--acc-soft),0 0 30px rgba(184,255,60,.18);transition:box-shadow .3s,transform .2s}
.btn-listen:hover{box-shadow:0 0 0 8px var(--acc-soft),0 0 50px rgba(184,255,60,.35);transform:translateY(-1px)}
.eq{display:flex;align-items:flex-end;gap:3px;height:20px;width:24px}
.eq i{flex:1;background:var(--acc);border-radius:1px;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.btn-listen .arr{transition:transform .2s}.btn-listen:hover .arr{transform:translateX(4px)}
.link-hire{background:none;border:0;color:#d5d5da;font-size:14px;font-weight:500;border-bottom:1px solid #555;padding-bottom:2px;text-decoration:none;transition:color .2s,border-color .2s}
.link-hire:hover{color:var(--acc);border-color:var(--acc)}
.scroll-cue{position:absolute;right:var(--px);bottom:clamp(40px,8vh,90px);z-index:3;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8a8a92;display:flex;align-items:center;gap:12px}
.scroll-cue::after{content:"";width:1px;height:60px;background:linear-gradient(#8a8a92,transparent)}

/* ============ 5. SECCIONES Y SOBRE MÍ ============ */
section{position:relative;padding:var(--py) var(--px)}
.wrap{max-width:var(--max);margin:0 auto}
.kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.kicker::before{content:"";width:28px;height:1px;background:var(--acc)}
h2{font-family:var(--fd);font-weight:800;font-size:clamp(30px,4.6vw,64px);line-height:1.04;letter-spacing:-.015em;overflow-wrap:anywhere}
@media (scripting:enabled){.reveal{opacity:0;transform:translateY(28px);transition:opacity var(--t-in) ease,transform var(--t-in) cubic-bezier(.2,.7,.2,1)}}   /* sin JS, todo se ve */
.reveal.in,[data-vista-previa] .reveal{opacity:1;transform:none}

.about-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,90px);margin-top:clamp(40px,6vw,70px);align-items:start}
.about-grid.sin-foto{grid-template-columns:minmax(0,1fr)}
.about-photo{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:4px}
.about-txt p{color:#c4c4cb;font-size:clamp(16px,1.35vw,18px);margin-bottom:18px;max-width:620px}
.about-txt p:first-child{color:#fff;font-size:clamp(18px,1.7vw,22px);line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 34px;list-style:none}
.chip{border:1px solid #2f2f37;color:#d8d8de;font-size:12px;letter-spacing:.06em;padding:7px 13px;border-radius:40px}
.facts{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);border-top:1px solid var(--line)}   /* con 1 o 2 datos, se reparten el ancho */
.fact{padding:20px 16px 0 0}
.fact b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(20px,2.2vw,28px);line-height:1.1;margin-bottom:6px}
.fact span{font-size:13px;color:var(--mut)}

.curve-box{margin-top:clamp(60px,8vw,110px);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(20px,3vw,36px);background:linear-gradient(180deg,#0c0c0f,#09090b)}
.curve-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:10px}
.curve-head h3{font-family:var(--fd);font-weight:800;font-size:clamp(16px,1.6vw,20px)}
.curve-head span{font-size:12px;color:var(--mut)}
.curve{position:relative;width:100%}
.curve svg{width:100%;height:auto;display:block;overflow:visible}
.curve .path{fill:none;stroke:url(#cg);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(184,255,60,.5))}
.curve .area{fill:url(#ca);opacity:0;transition:opacity 1.2s .6s}
.curve.in .area{opacity:1}
.curve .grid line{stroke:#1d1d23;stroke-width:1}
.cg-1{stop-color:var(--mut)}.cg-2{stop-color:var(--acc)}.cg-3{stop-color:var(--ink)}
.ca-1{stop-color:var(--acc);stop-opacity:.18}.ca-2{stop-color:var(--acc);stop-opacity:0}
.c-dot{position:absolute;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#000;border:2px solid var(--acc);opacity:0;transition:opacity .4s}
.c-lab{position:absolute;transform:translate(-50%,calc(-100% - 14px));font-size:clamp(9px,1vw,12px);letter-spacing:.06em;color:#d7d7dd;white-space:nowrap;opacity:0;transition:opacity .4s}
.curve.in .c-dot,.curve.in .c-lab{opacity:1}
.curve-axis{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:12px}
@media (max-width:600px){   /* en móvil: curva más alta, una de cada dos etiquetas debajo de la línea y aire para ellas sobre el eje */
  .curve svg{height:128px}
  .c-lab.alt{transform:translate(-50%,16px)}
  .curve-axis{margin-top:var(--s6)}
}

/* ============ 6. LA RUTA ============
   Tarjeta de parada:
   <div class="stop">
     <div class="sign"><small>PARADA</small><b>01</b></div>
     <article class="card">
       <div class="historia">{{ imagen(p.foto_1, "(min-width: 760px) 220px, 80vw") }}</div>
       <div class="card-b"><span class="date">…</span><h3>…</h3><p class="place">Sala · Ciudad</p><p>…</p>
         <button class="btn-visitar" data-parada="1">Visitar parada →</button></div>
     </article>
   </div> */
.ruta{background:linear-gradient(180deg,var(--bg) 0%,#0a0a0c 100%)}
.ruta-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.ruta-head p{color:#b9b9c0;max-width:420px}
.road-wrap{position:relative;margin-top:clamp(50px,7vw,90px);--p:0}
.road{position:absolute;top:0;bottom:0;left:50%;width:76px;transform:translateX(-50%);background:linear-gradient(90deg,#0b0b0d,#17171b 15%,#141418 85%,#0b0b0d);border-left:2px solid #2a2a30;border-right:2px solid #2a2a30}
.road::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);background:repeating-linear-gradient(180deg,#5a5a60 0 26px,transparent 26px 52px)}
.road-fill{position:absolute;left:50%;top:0;width:4px;transform:translateX(-50%);height:calc(var(--p) * 100%);background:var(--acc);box-shadow:0 0 14px var(--acc),0 0 40px rgba(184,255,60,.5);border-radius:2px}
.road-fill::after{content:"";position:absolute;bottom:-6px;left:50%;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#fff;box-shadow:0 0 16px #fff,0 0 40px var(--acc)}
.stop{position:relative;display:grid;grid-template-columns:1fr 76px 1fr;align-items:center;margin-bottom:clamp(40px,6vw,80px)}
.stop .card{grid-column:1;margin-right:clamp(20px,4vw,56px)}
.stop:nth-child(odd of .stop:not(.final)) .card{grid-column:3;margin-right:0;margin-left:clamp(20px,4vw,56px)}
.sign{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2;background:#0d0d10;color:#cfcfd5;border-radius:4px;padding:6px 8px;text-align:center;min-width:62px;
  box-shadow:inset 0 0 0 2px #2c2c33;transition:background .5s,color .5s,box-shadow .5s}
.sign small{display:block;font-size:8px;letter-spacing:.2em;font-weight:700}
.sign b{display:block;font-family:var(--fd);font-weight:900;font-size:20px;line-height:1.1}
.stop.in .sign{background:var(--acc);color:#000;box-shadow:inset 0 0 0 2px #000,0 0 0 2px var(--acc),0 0 30px rgba(184,255,60,.45)}

.card{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:transform .3s,border-color .3s}
.card:hover{transform:translateY(-4px);border-color:#3a3a44}
/* Foto tipo historia de Instagram: 9:16, esquinas de 12 px y barra fina arriba */
.historia{position:relative;aspect-ratio:9/16;margin:10px 0 10px 10px;border-radius:var(--r-story);overflow:hidden;background:#000}
.historia img{width:100%;height:100%;object-fit:cover}
.historia::before{content:"";position:absolute;z-index:1;top:8px;left:8px;right:8px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,.95) 0 62%,rgba(255,255,255,.35) 62%)}
.card-b{padding:20px 22px 24px;display:flex;flex-direction:column;align-items:flex-start;min-width:0;overflow-wrap:anywhere}
.date{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-bottom:8px;font-weight:600}
.card h3{font-family:var(--fd);font-weight:800;font-size:clamp(19px,1.9vw,26px);line-height:1.15}
.place{font-size:13px;color:var(--mut);margin:4px 0 12px}
.card p{font-size:15px;color:#c2c2c9}
.btn-visitar{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid #44444c;color:#fff;font-size:13px;font-weight:600;letter-spacing:.03em;padding:10px 16px;border-radius:40px;transition:border-color var(--t-hover),color var(--t-hover)}
.card p + .btn-visitar{margin-top:18px}
.btn-visitar:hover{border-color:var(--acc);color:var(--acc)}

.stop.final{grid-template-columns:1fr;justify-items:center;margin:clamp(60px,8vw,110px) 0 0;text-align:center}
.final-box{position:relative;z-index:2;background:radial-gradient(ellipse at 50% 0%,rgba(184,255,60,.14),transparent 70%),#0b0b0d;border:1px solid #2c2c33;border-radius:8px;padding:clamp(34px,5vw,60px) clamp(22px,5vw,70px);max-width:720px}
.final-box .sign{display:inline-block;margin-bottom:18px}
.final-box .kicker{justify-content:center;margin-bottom:0}
.final-box h3{font-family:var(--fd);font-weight:900;font-size:clamp(34px,6vw,84px);line-height:.95;letter-spacing:-.02em;margin:6px 0 18px}
.final-box p{color:#c2c2c9;margin-bottom:26px}
.btn-solid{display:inline-flex;align-items:center;gap:10px;background:var(--acc);color:#000;border:0;font-weight:700;font-size:15px;letter-spacing:.03em;padding:15px 26px;border-radius:var(--r-pill);text-decoration:none;transition:box-shadow .3s,transform .2s}
.btn-solid:hover{box-shadow:0 0 0 8px var(--acc-soft),0 0 40px rgba(184,255,60,.4);transform:translateY(-1px)}
.final-box .mail{display:block;margin-top:16px;font-size:13px;color:var(--mut)}
.final-box .mail a{color:#d6d6dc}

/* ============ 7. REDES, PIE Y LEGALES ============ */
.social-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,60px);align-items:stretch}
/* Tarjeta «Última sesión»: cinta + reproductor (recuadro de permiso hasta que se aceptan las cookies) */
.sc{border:1px solid var(--line);border-radius:var(--r-card);background:#0c0c0f;padding:22px;display:flex;flex-direction:column;gap:18px}
.sc-top{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);gap:18px;align-items:center}
.sc-top .tape .hand{font-size:clamp(14px,1.6vw,20px)}
.sc-top b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(17px,1.8vw,22px);line-height:1.2;overflow-wrap:anywhere}
.social-grid.una-col{grid-template-columns:minmax(0,1fr)}   /* solo la tarjeta o solo los enlaces */.sc-top span{font-size:13px;color:var(--mut)}
.links{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 4px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding .25s,color .25s}
.links a b{font-family:var(--fd);font-weight:800;font-size:clamp(22px,2.6vw,34px);letter-spacing:-.01em}
.links a span{font-size:13px;color:var(--mut);display:block}
.links a i{font-style:normal;font-size:22px;color:var(--mut);transition:transform .25s,color .25s}
.links a:hover{padding-left:12px;color:var(--acc)}
.links a:hover i{transform:translate(4px,-4px);color:var(--acc)}

footer{padding:clamp(60px,8vw,100px) var(--px) 30px;border-top:1px solid var(--line);overflow:hidden}
/* <div class="foot-logo chrome">JUNKOS</div> */
.foot-logo{font-family:var(--fd);font-weight:900;font-size:clamp(54px,15.5vw,230px);line-height:.8;letter-spacing:-.03em;text-align:center;opacity:.95;margin-inline:auto}
.foot-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:40px;font-size:13px;color:var(--mut)}
.foot-row nav{display:flex;gap:18px;flex-wrap:wrap}
.foot-row a{text-decoration:none}.foot-row a:hover{color:#fff}

/* Páginas legales del motor: <section class="bloque legal"> con h1, h2, p, ul y el botón .cookies-cambiar */
.bloque.legal{max-width:calc(760px + 2 * var(--px));margin:0 auto;padding-top:calc(var(--hdr) + var(--py));color:#c2c2c9;overflow-wrap:anywhere}
.legal h1{font-family:var(--fd);font-weight:800;font-size:clamp(30px,4.6vw,64px);line-height:1.04;letter-spacing:-.015em;color:var(--ink);margin-bottom:var(--s6)}
.legal h2{font-family:var(--fd);font-weight:800;font-size:clamp(19px,1.9vw,26px);line-height:1.15;color:var(--ink);margin:var(--s7) 0 var(--s3)}
.legal p,.legal ul{font-size:clamp(16px,1.35vw,18px);margin-bottom:var(--s4)}
.legal ul{padding-left:var(--s5)}
.legal li{margin-bottom:var(--s2)}
.legal strong{color:var(--ink)}
.legal a{color:var(--acc)}
.cookies-cambiar{font:600 14px var(--fb);background:transparent;color:var(--ink);border:1px solid #55555e;border-radius:var(--r-pill);padding:10px 16px;transition:border-color var(--t-hover),color var(--t-hover)}
.cookies-cambiar:hover{border-color:var(--acc);color:var(--acc)}

/* ============ 8. ESTUDIO: PUERTA Y MONITOR ============ */
.studio{position:fixed;inset:0;z-index:300;display:none;background:#050506;overflow:hidden;overflow:clip}   /* clip: no se desplaza ni al saltar a #contratar */
.studio.show{display:block}
.room{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(ellipse 70% 60% at 50% 45%,#1a1c20 0%,#070708 75%);transform:scale(.92);opacity:0;transition:transform 1.1s cubic-bezier(.2,.7,.2,1),opacity .7s}
.studio.open .room{opacity:1}
.studio.enter .room{transform:scale(1)}
.doorway{position:absolute;inset:0;display:grid;place-items:center;perspective:1500px;transition:transform .75s cubic-bezier(.6,0,.4,1),opacity .45s .25s;transform-origin:50% 52%;opacity:0}
.studio.show .doorway{opacity:1;transition:opacity .25s,transform .75s cubic-bezier(.6,0,.4,1)}
.studio.enter .doorway{transform:scale(3.4);opacity:0;transition:transform .75s cubic-bezier(.6,0,.4,1),opacity .45s .25s}
.studio.ready .doorway{visibility:hidden}
.frame{position:relative;width:min(400px,68vw);height:min(74vh,660px);border:12px solid #232328;box-shadow:0 0 0 220vmax #101012,inset 0 0 0 1px #000}
.frame::before{content:"";position:absolute;inset:-12px;border:1px solid #33333a;pointer-events:none}
.door{position:absolute;inset:0;transform-origin:0 50%;transition:transform 1s cubic-bezier(.55,0,.25,1);
  background:linear-gradient(90deg,#29292e,#1e1e22 60%,#1a1a1e);box-shadow:inset 0 0 0 2px #36363d,inset 0 0 80px rgba(0,0,0,.55)}
.studio.open .door{transform:rotateY(84deg)}
.door::before{content:"";position:absolute;left:12%;right:12%;top:44%;bottom:8%;border:2px solid #2f2f35;box-shadow:inset 0 0 30px rgba(0,0,0,.5)}
.door-win{position:absolute;left:22%;right:22%;top:9%;height:22%;border:6px solid #111;background:linear-gradient(135deg,rgba(255,255,255,.08) 0 18%,transparent 18% 40%,rgba(255,255,255,.04) 40% 46%,transparent 46%),radial-gradient(circle at 50% 70%,rgba(184,255,60,.35),#08090a 70%)}
.door-plate{position:absolute;top:35%;left:50%;transform:translateX(-50%);font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.35em;color:#9c9ca5;border:1px solid #44444c;padding:6px 6px 6px 12px;background:#141417}
.handle{position:absolute;right:9%;top:50%;width:10px;height:96px;border-radius:6px;background:linear-gradient(90deg,#666,#ddd 45%,#888)}
.onair{position:absolute;top:-62px;left:50%;transform:translateX(-50%);font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.3em;padding:9px 14px 9px 18px;border-radius:3px;
  background:#2a0b0b;color:#5d2424;border:2px solid #3a1212;transition:all .25s;white-space:nowrap}
.studio.lit .onair{background:var(--rec);color:#fff;border-color:#ff6b6b;box-shadow:0 0 30px var(--rec),0 0 90px rgba(255,43,43,.55)}
.door-hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#6a6a72}

.monitor{position:relative;width:min(1180px,96vw);height:min(760px,90vh);background:linear-gradient(#e4dece,#cbc4ae);border-radius:20px;padding:22px 22px 42px;
  box-shadow:0 50px 100px rgba(0,0,0,.75),inset 0 2px 0 #f6f1e3,inset 0 -4px 0 #aba38c}
.mon-brand{position:absolute;left:28px;bottom:12px;font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.25em;color:#8d866f}
.mon-led{position:absolute;right:30px;bottom:16px;width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
.screen{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;overflow:clip;background:radial-gradient(ellipse 90% 70% at 50% 120%,rgba(184,255,60,.16),transparent 60%),radial-gradient(ellipse at 50% 40%,#16181c,#08090a 80%);
  box-shadow:inset 0 0 0 3px #3b382f;font-family:var(--win);font-size:13px;color:#000;container-type:inline-size}
.screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:950;background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 80px rgba(0,0,0,.7)}
.wall-logo{position:absolute;inset:0 0 40px 0;display:grid;place-items:center;pointer-events:none}
.wall-logo b{font-family:var(--fd);font-weight:900;font-size:clamp(60px,13cqw,170px);letter-spacing:-.02em;opacity:.13}
.hint{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);color:#9fa39a;font-family:var(--fv);font-size:20px;letter-spacing:.05em;white-space:nowrap;transition:opacity .3s;pointer-events:none}
.hint.off{opacity:0}
.icons{position:absolute;top:16px;left:14px;display:grid;gap:10px;z-index:5}
.dicon{width:96px;display:grid;justify-items:center;gap:5px;background:none;border:0;padding:6px 2px;color:#fff;font:12px/1.25 var(--win);text-align:center;text-shadow:1px 1px 0 #000}
.dicon svg{width:46px;height:46px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6))}
.dicon span{padding:1px 3px}
.dicon:hover span,.dicon:focus-visible span{background:var(--w-sel);outline:1px dotted #fff}
.dicon:focus{outline:none}
.wins{position:absolute;inset:0 0 var(--barra) 0;z-index:10;pointer-events:none}
.wins>*{pointer-events:auto}
.taskbar{position:absolute;left:0;right:0;bottom:0;height:var(--barra);z-index:900;background:var(--w-face);border-top:2px solid #fff;box-shadow:inset 0 1px 0 var(--w-light);display:flex;align-items:center;gap:5px;padding:3px 4px}
.tbtn{height:31px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;background:var(--w-face);border:2px solid;border-color:#fff var(--w-dark) var(--w-dark) #fff;box-shadow:inset -1px -1px 0 var(--w-shadow);font:bold 12px var(--win);color:#000;white-space:nowrap}
.tbtn:active,.tbtn.active{border-color:var(--w-dark) #fff #fff var(--w-dark);box-shadow:inset 1px 1px 0 var(--w-shadow);background:repeating-conic-gradient(#c0c0c0 0 25%,#d6d6d6 0 50%) 0 0/2px 2px}
.tbtn.hire .led{width:9px;height:9px;border-radius:50%;background:#2fbf00;box-shadow:0 0 5px #4f0;animation:pulse 1.2s infinite}
.tasks{flex:1;display:flex;gap:4px;overflow:hidden;min-width:0;padding-left:4px;border-left:1px solid var(--w-shadow);margin-left:2px}
.tasks .tbtn{max-width:170px;font-weight:normal;overflow:hidden;text-overflow:ellipsis;display:block;line-height:27px}
.tray{height:31px;display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);font:12px var(--win)}
.tbtn.exit{font-weight:bold}

/* ============ 9. ESTUDIO: VENTANAS 90s ============ */
.win{position:absolute;display:flex;flex-direction:column;background:var(--w-face);border:2px solid;border-color:var(--w-light) var(--w-dark) var(--w-dark) var(--w-light);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 var(--w-shadow),8px 18px 40px rgba(0,0,0,.55);animation:winIn .18s ease-out;min-width:0}
@keyframes winIn{from{transform:scale(.94);opacity:0}}
.titlebar{display:flex;align-items:center;gap:6px;padding:3px 3px 3px 5px;background:var(--w-title);color:#fff;font:bold 13px var(--win);cursor:move;user-select:none;touch-action:none}
.win.blur .titlebar{background:linear-gradient(90deg,#808080,#b5b5b5);color:#d6d6d6}
.titlebar svg{width:16px;height:16px;flex:none}
.titlebar .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-x{width:22px;height:20px;flex:none;display:grid;place-items:center;background:var(--w-face);border:2px solid;border-color:#fff var(--w-dark) var(--w-dark) #fff;font:bold 14px/1 var(--win);color:#000;padding:0}
.tb-x:active{border-color:var(--w-dark) #fff #fff var(--w-dark)}
.menubar{display:flex;gap:14px;padding:3px 8px;font:12px var(--win)}
.menubar u{text-decoration:underline}
.win-body{position:relative;flex:1;overflow:auto;margin:2px 3px 3px;border:2px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);background:#fff;min-height:0}
.win-body.dark{background:#0d0d10;color:#e8e8ec;font-family:var(--fb)}
.win-body.gray{background:var(--w-face)}
.statusbar{display:flex;gap:4px;padding:0 3px 3px;font:11px var(--win)}
.statusbar span{flex:1;border:1px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Botón clásico de los 90 */
.btn90{display:inline-flex;align-items:center;gap:6px;font:bold 12px var(--win);background:var(--w-face);color:#000;border:2px solid;border-color:#fff var(--w-dark) var(--w-dark) #fff;box-shadow:inset -1px -1px 0 var(--w-shadow);padding:5px 14px;text-decoration:none}
.btn90:active{border-color:var(--w-dark) #fff #fff var(--w-dark);box-shadow:inset 1px 1px 0 var(--w-shadow)}
.btn90:focus-visible{outline:1px dotted #000;outline-offset:-5px}
/* Barra de dirección del explorador («C:\JUNKOS\…») */
.addr{display:flex;align-items:center;gap:6px;padding:4px 6px;font:12px var(--win)}
.addr span{flex:1;min-width:0;background:#fff;border:2px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);padding:2px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Ventanas escritas en el HTML (estudio.js las enseña y esconde): .win usa flex y anularía hidden */
.win[hidden]{display:none}
.win:focus,.studio:focus{outline:none}
.tb-x:focus-visible,.tbtn:focus-visible{outline:1px dotted #000;outline-offset:-5px}
.tbtn.exit{text-decoration:none}

/* ============ 10. VENTANAS ============ */
/* ---- Momentos destacados: visor con reproductor + rejilla de portadas 9:16 ---- */
.mom{padding:14px;display:grid;gap:14px}
.viewer{display:grid;gap:10px;justify-items:center;background:#000;border:1px solid #25252b;border-radius:4px;padding:12px}
.viewer .incrustado{margin:0}
.viewer-cap{justify-self:start;font-family:var(--fd);font-weight:800;font-size:clamp(14px,2.4cqw,20px);color:#fff}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.thumb{background:none;border:1px solid #25252b;border-radius:4px;overflow:hidden;text-align:left;color:#ddd;font:12px/1.3 var(--fb);transition:border-color .2s}
.thumb:hover,.thumb.on,.thumb[aria-pressed="true"]{border-color:var(--acc)}
.thumb .ti{display:block;position:relative;aspect-ratio:9/16;background:#111}
.thumb .ti img{width:100%;height:100%;object-fit:cover}
.thumb .ti::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:16px;color:#fff;opacity:.9;text-shadow:0 1px 6px #000}
.thumb .tc{display:block;padding:7px 8px 8px}
/* Momento sin vídeo: el visor enseña su portada */
.viewer-play{width:100%;display:grid;justify-items:center}
.viewer-foto{width:min(100%,calc(58vh * 9 / 16));aspect-ratio:9/16;background:#111;border-radius:var(--r-story);overflow:hidden}
.viewer-foto img{width:100%;height:100%;object-fit:cover}
/* Carpeta sin contenido */
.vacia{padding:16px;font:12px var(--win);color:#000}
.win-body.dark .vacia{color:#8a8a94}

/* ---- Música: pletina con la cinta + reproductor; estantería de cintas ---- */
.mus{padding:14px;display:grid;gap:16px}
.deck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center;background:linear-gradient(#1b1b1f,#121215);border:1px solid #2a2a31;border-radius:var(--r-card);padding:16px}
.tape{position:relative;aspect-ratio:1.58;border-radius:7px;background:linear-gradient(#303036,#1e1e22);box-shadow:inset 0 0 0 2px #45454c,0 6px 16px rgba(0,0,0,.5)}
.tape::before{content:"";position:absolute;left:3%;right:3%;top:3%;bottom:3%;border-radius:5px;border:1px solid #3c3c43}
.tape .lab{position:absolute;left:7%;right:7%;top:9%;height:50%;border-radius:3px;background:var(--lab,#efe8d4);color:#141414;padding:5% 6%;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start}
.tape .lab::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:var(--band,var(--acc))}
.tape .hand{font-family:var(--fm);line-height:1.05;position:relative;z-index:1}
.tape .sub{font:10px/1.2 var(--fb);opacity:.7;position:relative;z-index:1;margin-top:3px}
.tape .win2{position:absolute;left:25%;right:25%;bottom:11%;height:25%;border-radius:40px;background:#0a0a0c;box-shadow:inset 0 0 0 2px #46464d;display:flex;align-items:center;justify-content:space-between;padding:0 6%}
.reel{height:72%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#e6e6e6 0 9%,#4c4c52 0 33%,#e6e6e6 0 42%,#4c4c52 0 66%,#e6e6e6 0 75%,#4c4c52 0);box-shadow:0 0 0 3px #222,0 0 0 4px #555}
.playing .reel{animation:spin 1.4s linear infinite}   /* unos segundos al elegir la cinta */
@keyframes spin{to{transform:rotate(360deg)}}
/* Color de la franja de cada cinta (campo «color» de la sesión): class="tape color-rosa"… */
.color-amarillo{--band:#fef116}.color-rosa{--band:#ff4fa3}.color-azul{--band:#2f7bff}.color-naranja{--band:#ff8a1f}.color-negro{--band:#111}
.deck .tape .hand{font-size:clamp(16px,3.2cqw,26px)}
.deck .tape .sub{font-size:clamp(9px,1.4cqw,12px)}
.ctrl{display:grid;gap:10px;min-width:0}
.ctrl .now{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a94}
.ctrl .ttl{font-family:var(--fd);font-weight:800;font-size:clamp(16px,2.6cqw,22px);line-height:1.15;color:#fff}
.ctrl .dur{font:12px var(--fb);color:#8a8a94}
.ctrl .incrustado{margin:4px 0 0}
.ctrl-mix:not(:has(.incrustado)){display:none}   /* sesión sin enlace: ni reproductor ni hueco */
.shelf-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a94}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.shelf button{background:none;border:0;padding:0;border-radius:7px;transition:transform .2s}
.shelf button:hover{transform:translateY(-3px) rotate(-1deg)}
.shelf button.on .tape,.shelf button[aria-pressed="true"] .tape{box-shadow:inset 0 0 0 2px #45454c,0 0 0 2px var(--acc),0 0 18px rgba(184,255,60,.35)}
.shelf .hand{font-size:13px}
.shelf .sub{font-size:8px}

/* ---- La Ruta (explorador): una carpeta por parada ---- */
.carpetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;padding:12px;list-style:none}
.carpeta{width:100%;display:grid;justify-items:center;gap:4px;background:none;border:0;padding:8px 4px;color:#000;font:12px/1.25 var(--win);text-align:center}
.carpeta svg{width:48px;height:48px}
.carpeta .n{padding:1px 3px;word-break:break-word}
.carpeta small{font-size:11px;color:#555}
.carpeta:hover .n,.carpeta:focus-visible .n{background:var(--w-sel);color:#fff;outline:1px dotted #000}
.carpeta:focus{outline:none}

/* ---- Ventana de parada: vista Fotos (rejilla 9:16) y vista Vídeos ---- */
.parada{padding:14px;display:grid;gap:14px;align-content:start}
.parada-cab .date{margin-bottom:4px}
.parada-cab h3{font-family:var(--fd);font-weight:800;font-size:clamp(17px,2.6cqw,24px);line-height:1.15;color:#fff}
.parada-cab .place{margin:2px 0 0}
.fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none}
.fotos button{display:block;width:100%;padding:0;border:1px solid #25252b;border-radius:4px;overflow:hidden;background:#000;transition:border-color .2s}
.fotos button:hover,.fotos button:focus-visible{border-color:var(--acc)}
.fotos img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.parada-acciones{display:flex;flex-wrap:wrap;gap:8px}
.videos{display:grid;gap:18px;justify-items:center}
.videos .incrustado{margin:0}
.vista-fotos,.vista-videos{display:grid;gap:14px}
.vista-fotos[hidden],.vista-videos[hidden],.foto-grande[hidden],.btn90[hidden]{display:none}
/* Foto en grande dentro de la ventana, con anterior, siguiente y cerrar */
.foto-grande{position:absolute;inset:0;z-index:20;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;padding:12px;background:rgba(5,5,6,.96)}
.foto-grande img{justify-self:center;height:100%;width:auto;max-width:100%;min-height:0;border-radius:var(--r-story)}   /* imagen() pone en línea el 9:16 y su recorte */
.win-body.con-foto{overflow:hidden}
.foto-grande .controles{flex-wrap:wrap;align-items:center}
.fg-n{font:12px var(--win);color:#c2c2c9;min-width:44px;text-align:center}
.foto-grande .controles{display:flex;justify-content:center;gap:8px}

/* ---- Producción: explorador de archivos ---- */
.files{width:100%;border-collapse:collapse;font:12px var(--win)}
.files th{text-align:left;font-weight:normal;background:var(--w-face);border:1px solid;border-color:#fff var(--w-shadow) var(--w-shadow) #fff;padding:3px 8px;white-space:nowrap}
.files td{padding:6px 8px;white-space:nowrap;border-bottom:1px dotted #e1e1e1}
.files tr:hover td,.files tr:focus-within td{background:var(--w-sel);color:#fff}
.files td:first-child{display:flex;align-items:center;gap:7px;white-space:normal;overflow-wrap:anywhere}
.files td a{color:inherit;text-decoration:none}
.files tr[data-enlace]{cursor:pointer}
.files td a:focus-visible{outline:1px dotted currentColor}
.files svg{width:18px;height:18px;flex:none}
.st{display:inline-block;padding:0 6px;border:1px solid #999;font-size:11px}

/* ---- Tienda (no vende) ---- */
.shop{padding:16px;display:grid;gap:14px;font-family:var(--fb)}
.shop-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.shop-head b{font-family:var(--fd);font-weight:800;font-size:18px}
.soon{background:#000;color:var(--acc);font:bold 11px var(--win);letter-spacing:.12em;padding:4px 8px;text-transform:uppercase}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.prod{border:2px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);background:#fff}
.prod .pi{aspect-ratio:1;display:grid;place-items:center;background:#0d0d10}
.prod .pi svg{width:72%;height:auto}
.prod .pt{padding:10px;font-size:13px}
.prod .pt b{display:block;font-size:14px}
.prod .pt span{color:#666;font-size:12px}
.prod button{margin:0 10px 10px;font:12px var(--win);background:var(--w-face);border:2px solid;border-color:#fff var(--w-dark) var(--w-dark) #fff;padding:4px 10px;color:#777}

/* ============ 11. CONTRATACIONES (formulario del motor) ============
   {{ formulario_contacto() }} escribe <form class="contacto">. Sus textos son del motor.
   Aquí solo se viste, con la interfaz de los 90. */
.contratar{padding:14px;display:grid;gap:12px;font:13px/1.45 var(--win);color:#000}
.contratar-intro b{display:block;font-size:14px;margin-bottom:2px}
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;font:12px var(--win)}
.contacto>*{min-width:0}
.contacto-ok,.contacto-error-general,.contacto-enviar,.contacto-legal,
.contacto-campo:has(textarea),.contacto-campo:has(.contacto-casilla){grid-column:1/-1}
.contacto-campo{display:grid;gap:3px}
.contacto input[type=text],.contacto input[type=email],.contacto input[type=tel],.contacto textarea{font:13px var(--win);background:#fff;border:2px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);padding:4px 6px;width:100%;color:#000;border-radius:0}
.contacto textarea{min-height:90px;resize:vertical}
.contacto input:focus,.contacto textarea:focus{outline:1px dotted #000;outline-offset:1px}
.contacto .contacto-con-error input,.contacto .contacto-con-error textarea{border-color:#b00000;background:#fff6f6}
.contacto-error{color:#b00000;margin:0}
.contacto-casilla{display:flex;align-items:flex-start;gap:6px;line-height:1.4}
.contacto-casilla input{width:auto;margin-top:2px}
.contacto a{color:var(--w-sel)}
.contacto-enviar{justify-self:start;font:bold 13px var(--win);background:var(--w-face);border:2px solid;border-color:#fff var(--w-dark) var(--w-dark) #fff;box-shadow:inset -1px -1px 0 var(--w-shadow),0 0 0 1px #000;padding:6px 18px;color:#000}
.contacto-enviar:active{border-color:var(--w-dark) #fff #fff var(--w-dark)}
.contacto-ok{display:flex;align-items:center;gap:10px;padding:12px;border:2px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);background:#fff;font:bold 13px var(--win)}
.contacto-ok::before{content:"✓";flex:none;width:32px;height:32px;border-radius:50%;background:#2fbf00;color:#fff;display:grid;place-items:center;font-size:18px;border:2px solid #000}
.contacto-error-general{padding:8px 10px;border:1px solid #b00000;background:#fff6f6;color:#b00000}
.contacto-legal{font-size:11px;line-height:1.45;color:#444}
.direct{display:flex;gap:6px 16px;flex-wrap:wrap;border-top:1px solid var(--w-shadow);box-shadow:0 1px 0 #fff inset;padding-top:10px}
.direct a{color:var(--w-sel);overflow-wrap:anywhere}
.contratar-intro p{margin:0}

/* ============ 12. PIEZAS DEL MOTOR ============ */
/* ---- Recuadro de permiso de cada vídeo o reproductor (fuera del ordenador) ---- */
.incrustado{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-card);margin:0}
.incrustado-cargado{background:#000;border-color:#000}
.incrustado-permiso{font:14px/1.5 var(--fb);gap:12px;padding:18px}
.incrustado-texto{color:#c2c2c9}
.incrustado-texto a{color:var(--ink)}
.incrustado-boton{font:700 14px var(--fb);letter-spacing:.02em;background:var(--acc);color:#000;border:0;border-radius:var(--r-pill);padding:11px 20px;transition:box-shadow .3s}
.incrustado-boton:hover{box-shadow:0 0 0 6px var(--acc-soft)}
.incrustado-boton:focus-visible{outline:2px solid #fff;outline-offset:3px}
.incrustado-enlace{color:var(--mut);font-size:13px}
/* Mixcloud (120 px) y Spotify (152 px): mientras es recuadro, alto suficiente para texto, botón y enlace sin barra */
.incrustado-mixcloud:not(.incrustado-cargado),.incrustado-spotify:not(.incrustado-cargado),.incrustado-soundcloud:not(.incrustado-cargado){min-height:200px}
/* Vídeo vertical (Formato = Vertical): 9:16 y esquinas de historia */
.incrustado.vertical{aspect-ratio:9/16;width:min(100%,calc(70vh * 9 / 16));min-height:0;margin-inline:auto;border-radius:var(--r-story)}
.incrustado.horizontal{width:100%}
/* Vídeo horizontal ya cargado: 16:9 exacto. El motor le deja 220 px de alto mínimo y en el móvil salían bandas negras (B12) */
.incrustado-youtube.incrustado-cargado,.incrustado-vimeo.incrustado-cargado{min-height:0}
/* ---- Dentro del ordenador: con la interfaz de los 90 ---- */
.screen .incrustado{background:var(--w-face);color:#000;border:2px solid;border-color:var(--w-shadow) #fff #fff var(--w-shadow);border-radius:0}
.screen .incrustado-cargado{background:#000}
.screen .incrustado-permiso{font:12px/1.45 var(--win)}
.screen .incrustado-texto{color:#000}
.screen .incrustado-texto a,.screen .incrustado-enlace{color:var(--w-sel)}
.screen .incrustado-boton{font:bold 12px var(--win);background:var(--w-face);color:#000;border:2px solid;border-color:#fff var(--w-dark) var(--w-dark) #fff;box-shadow:inset -1px -1px 0 var(--w-shadow),0 0 0 1px #000;border-radius:0;padding:6px 16px}
.screen .incrustado-boton:hover{box-shadow:inset -1px -1px 0 var(--w-shadow),0 0 0 1px #000}
.screen .incrustado-boton:active{border-color:var(--w-dark) #fff #fff var(--w-dark)}
.screen .incrustado.vertical{width:min(100%,calc(58vh * 9 / 16));border-radius:0}

/* ---- Aviso de cookies del motor ----
   Aceptar y Rechazar pesan lo mismo: mismo tamaño y mismo estilo. */
.cookies-aviso{background:#0d0d10;color:var(--ink);border:1px solid #2c2c33;border-radius:8px;box-shadow:0 20px 50px rgba(0,0,0,.6);font:14px/1.5 var(--fb);max-width:680px;z-index:1100}
.cookies-texto{color:#c7c7cd}
.cookies-texto a{color:var(--acc)}
.cookies-boton{font:600 14px var(--fb);background:transparent;color:var(--ink);border:1px solid #55555e;border-radius:var(--r-pill);padding:10px 16px;transition:border-color var(--t-hover),color var(--t-hover)}
.cookies-boton:hover{border-color:var(--acc);color:var(--acc)}
.cookies-boton:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* Con el estudio abierto, el aviso no tapa la barra de tareas */
/* (monitor centrado: alto min(760px,90vh) y 42 px de carcasa por debajo; en móvil, 100svh y 24 px) */
body.lock .cookies-aviso{bottom:calc((100vh - min(760px,90vh)) / 2 + 42px + var(--barra) + var(--s3))}

/* ============ 13. 404, MÓVIL Y MOVIMIENTO REDUCIDO ============ */
.error404{min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;padding:var(--py) var(--px)}
.error404 h1{font-family:var(--fd);font-weight:900;font-size:clamp(64px,16vw,200px);line-height:.9}
.error404 p{color:#c2c2c9;margin:18px 0 28px}

@media (max-width:820px){
  .about-grid{grid-template-columns:1fr}
  .about-photo{aspect-ratio:16/11!important}   /* el motor escribe 4/5 en línea en la <img> */
  .facts{grid-auto-flow:row;grid-template-columns:1fr}
  .fact{padding:16px 0;border-bottom:1px solid var(--line)}
  .social-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav .hide-m{display:none}
  .road{left:26px;width:44px;transform:none}
  .road::before,.road-fill{left:50%}
  .stop,.stop:nth-child(odd of .stop:not(.final)){grid-template-columns:44px 1fr}
  .stop{margin-left:4px}
  .stop .card,.stop:nth-child(odd of .stop:not(.final)) .card{grid-column:2;margin:0 0 0 18px}
  .sign{grid-column:1;min-width:44px;padding:5px 4px}
  .sign small{font-size:6px;letter-spacing:.1em}.sign b{font-size:15px}
  .stop.final{grid-template-columns:1fr;margin-left:0}
  /* Tarjeta: la foto arriba y los textos debajo */
  .card{grid-template-columns:minmax(0,1fr)}
  .historia{margin:10px 10px 0;max-width:280px}
}
@media (max-width:700px){
  .scroll-cue{display:none}
  .sc-top{grid-template-columns:minmax(0,150px) minmax(0,1fr)}
  /* Estudio a pantalla completa */
  .monitor{width:100vw;height:100vh;height:100svh;border-radius:0;padding:6px 6px 24px}
  .mon-brand{left:12px;bottom:5px;font-size:9px}.mon-led{right:14px;bottom:8px}
  .screen{border-radius:4px}
  .icons{left:6px;right:6px;top:12px;grid-template-columns:repeat(3,1fr);justify-items:center}   /* rejilla de 3 columnas */
  .dicon{width:88px;font-size:11px}
  .win{left:0!important;top:0!important;width:100%!important;height:100%!important;border-width:1px}
  .titlebar{cursor:default}
  .tasks,.tray{display:none}
  .taskbar{justify-content:space-between}
  .contacto{grid-template-columns:1fr}
  body.lock .cookies-aviso{bottom:calc(24px + var(--barra) + var(--s2))}
  .frame{width:min(300px,72vw);height:min(62vh,520px)}
}
@container (max-width:520px){
  .deck{grid-template-columns:1fr}
  .fotos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Sin JS: el estudio no se abre, pero Contrataciones se ve con /#contratar o /#contacto (vuelta del formulario) */
@media (scripting:none){
  .studio:has(#contratar:target),.studio:has(#contacto:target){display:block}
  .studio .room{opacity:1;transform:none}
  .studio .doorway{display:none}
  .studio .win{inset:8px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}