/* ═══ Gateway v3 · teléfono primero (creative-studio, 2026-10-17)
   Receta portada de los lugares de Tiféret: UN solo lugar con cámara fija (el umbral sobre las nubes) y seis
   luces de ese mismo lugar, una por sección. Lo que cambia es la luz y lo que hay en el vano; lo que corre
   cuadro por cuadro es la transición entre una luz y la siguiente (Kling, start/end = las dos láminas).
   El texto vive donde la imagen lo deja: el cielo vacío arriba y las nubes en sombra abajo. En el vano sólo
   va lo que es de esa luz (los siete, el sello del estreno). Contenido en GATEWAY, escenario en GUION. */
:root{
 --bg:#07060c;--oro:#C9A86B;--oroB:#E8C87E;--crema:#F3EAD3;--marfil:#DCD5C6;--dim:#B5AE9F;--ash:#958E80;--daat:#C9A2F5;
 --filete:rgba(232,200,126,.22);
 --head:'Cormorant Garamond',Georgia,serif;--body:'EB Garamond',Georgia,serif;--disp:'Cinzel',Georgia,serif;
 --ease:cubic-bezier(.2,.7,.2,1);--nav:58px;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--bg);overflow-x:clip}
body{background:var(--bg);color:var(--marfil);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a,button{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button{background:none;border:0;font:inherit;cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--oroB);outline-offset:4px;border-radius:3px}

/* ── el escenario: un lienzo fijo que pinta la lámina o el cuadro de la transición ── */
.escena{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.escena canvas,.escena video{position:absolute;inset:0;width:100%;height:100%}
.escena video{object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .5s}
/* velos fijos: oscurecen sólo el cielo de arriba y las nubes de abajo, donde vive el texto */
.velo{position:absolute;left:0;right:0;pointer-events:none}
.velo.arr{top:0;height:38%;background:linear-gradient(rgba(7,6,12,.62),rgba(7,6,12,.28) 62%,rgba(7,6,12,0))}
.velo.aba{bottom:0;height:36%;background:linear-gradient(rgba(7,6,12,0),rgba(7,6,12,.5) 38%,rgba(7,6,12,.82))}

/* la corona de los siete: contenido del estreno, va en código sobre la órbita medida */
.corona{position:absolute;inset:0;pointer-events:none;opacity:0}
.astro{position:absolute;width:var(--d);height:var(--d);transform:translate(-50%,-50%) scale(var(--e,0));border-radius:50%}
.astro i{position:absolute;inset:-55%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c) 42%,transparent),transparent 62%);opacity:.9}
.astro img{position:relative;display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent))}
.astro.hoy i{inset:-95%;background:radial-gradient(circle,rgba(243,215,150,.55),color-mix(in srgb,var(--c) 30%,transparent) 38%,transparent 64%);animation:late 4.2s ease-in-out infinite}
@keyframes late{50%{opacity:.55;transform:scale(.92)}}

/* ── barra superior: el logo (portal firmado + logotipo, de lectura-v3) y el menú ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(var(--nav) + env(safe-area-inset-top));padding:env(safe-area-inset-top) 6px 0 14px;
 display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(7,6,12,.88),rgba(7,6,12,.55) 70%,rgba(7,6,12,0))}
.marca{display:flex;align-items:center;gap:10px;min-height:48px;transition:opacity .4s}
.marca img{width:40px;height:40px;display:block;filter:drop-shadow(0 0 11px rgba(169,107,232,.5))}
.wm{display:inline-flex;flex-direction:column;align-items:flex-start;font-family:var(--disp);font-weight:700;font-size:12px;line-height:1.16;text-transform:uppercase;color:#EBCB86;text-shadow:0 0 15px rgba(235,203,134,.28)}
.wm span{display:block;white-space:nowrap}
.wm span:first-child{letter-spacing:.085em}
.wm span:last-child{letter-spacing:.271em}
.abre{display:flex;align-items:center;gap:10px;min-width:48px;min-height:48px;padding:0 10px;font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--oroB)}
.abre svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none}

/* el menú: las secciones a pantalla completa */
.menu{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;padding:calc(env(safe-area-inset-top) + 14px) 24px calc(env(safe-area-inset-bottom) + 20px);
 background:radial-gradient(120% 70% at 50% 0%,rgba(122,63,191,.35),transparent 60%),rgba(7,6,12,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu.abierto{opacity:1;visibility:visible}
.menu .cierra{align-self:flex-end;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--oroB)}
.menu .cierra svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6}
.menu .sello-m{display:flex;flex-direction:column;align-items:center;gap:10px;margin:0 0 3svh}
.menu .sello-m img{width:76px;height:76px;filter:drop-shadow(0 0 18px rgba(169,107,232,.55))}
.menu .sello-m .wm{align-items:center;font-size:15px}
.menu ol{list-style:none;border-top:1px solid var(--filete)}
.menu li a{display:flex;align-items:baseline;gap:16px;min-height:58px;padding:12px 4px;border-bottom:1px solid var(--filete);font-family:var(--head);font-weight:600;font-size:25px;line-height:1.2;color:var(--crema)}
.menu li a small{min-width:30px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.12em;color:var(--oro)}
.menu li a.on{color:var(--oroB)}
.menu .priv{margin-top:auto;align-self:center}

/* el riel: un sello por sección en vertical, a la orilla derecha y a la altura del portal (no pisa el texto).
   El hilo se llena con el avance; los nombres asoman al llegar y al cambiar de sección */
.riel{position:fixed;right:1px;top:50%;z-index:15;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end}
.riel button{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:46px}
.riel button i{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;border:1px solid rgba(232,200,126,.6);background:rgba(10,8,16,.82);
 box-shadow:0 0 10px rgba(232,200,126,.22);transition:all .35s var(--ease)}
.riel button svg{width:16px;height:16px;fill:none;stroke:var(--oroB);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.riel button.on i{transform:scale(1.18);border-color:#f3d99e;background:radial-gradient(circle,#f5dfa8,#c9a86b);box-shadow:0 0 0 3px rgba(7,6,12,.7),0 0 16px 3px rgba(240,205,130,.75)}
.riel button.on svg{stroke:#1a1206;stroke-width:1.8}
.riel button span{position:absolute;right:46px;top:50%;transform:translate(6px,-50%);white-space:nowrap;padding:5px 10px;font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--oroB);
 background:rgba(7,6,12,.88);border:1px solid var(--filete);opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
.riel.habla button.on span,.riel.todos button span{opacity:1;transform:translate(0,-50%)}
.riel.todos button span{transition-delay:calc(var(--k) * 60ms)}
.riel::before,.riel::after{content:"";position:absolute;right:21.5px;top:23px;width:1px;z-index:-1}
.riel::before{bottom:23px;background:rgba(232,200,126,.22)}
.riel::after{height:calc((100% - 46px) * var(--avance,0));background:linear-gradient(var(--oroB),#f5dfa8);box-shadow:0 0 6px rgba(232,200,126,.8)}

/* ── la cinta: el scroll sólo marca el paso; el contenido son capas fijas ── */
/* «Desliza»: bajo el riel, siempre a la vista hasta la última lámina; las flechas caen en cascada */
.baja{position:absolute;top:100%;right:4px;width:auto;display:flex;flex-direction:column;align-items:center;gap:0;margin-top:6px;pointer-events:none;transition:opacity .4s}
.baja b{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--oroB);writing-mode:horizontal-tb;text-shadow:0 1px 8px rgba(7,6,12,.95)}
.baja svg{width:26px;height:15px;fill:none;stroke:var(--oroB);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(232,200,126,.7));animation:cae 1.6s ease-in-out infinite}
.baja svg:nth-of-type(2){animation-delay:.2s}.baja svg:nth-of-type(3){animation-delay:.4s}
@keyframes cae{0%,100%{opacity:.15;transform:translateY(-3px)}50%{opacity:1;transform:translateY(3px)}}
.baja.fin{opacity:0}
.cinta{position:relative;z-index:1}
.paso{scroll-snap-align:start}
html{scroll-snap-type:y proximity}
.capa{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;visibility:hidden}
.capa.viva{visibility:visible}
.capa.viva.toca{pointer-events:auto}
.arriba,.abajo{position:absolute;left:0;right:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px}
.arriba{top:calc(env(safe-area-inset-top) + var(--nav) + 16px)}
.abajo{bottom:calc(env(safe-area-inset-bottom) + 4.5svh)}
.arriba>*,.abajo>*{max-width:360px}

/* tipografía: cuatro piezas, un oro */
.rotulo{display:inline-flex;align-items:center;gap:14px;font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--oroB)}
.rotulo::before,.rotulo::after{content:"";width:30px;height:1px;background:linear-gradient(to right,transparent,currentColor)}
.rotulo::after{background:linear-gradient(to left,transparent,currentColor)}
.rotulo.daat{color:var(--daat)}
/* titulares: de lectura-v3 (h2 Cormorant 700; .shine marfil→oro; h1 .g con su halo) */
.t{font-family:var(--head);font-weight:700;letter-spacing:.01em;text-wrap:balance;color:var(--crema);
 background:linear-gradient(180deg,#fff8e6 0%,var(--crema) 38%,var(--oroB) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
 filter:drop-shadow(0 2px 14px rgba(7,6,12,.85))}
.t1{font-size:clamp(30px,8.4vw,35px);line-height:1.14}
.t2{font-family:var(--disp);font-weight:700;letter-spacing:.02em;font-size:clamp(30px,8.6vw,38px);line-height:1.12;
 filter:drop-shadow(0 0 22px rgba(232,200,126,.28)) drop-shadow(0 2px 14px rgba(7,6,12,.9))}
.l{font-size:18px;line-height:1.5;color:var(--dim);text-wrap:pretty;text-shadow:0 1px 12px rgba(7,6,12,.9)}
.pregunta{font-family:var(--head);font-style:italic;font-weight:700;font-size:clamp(34px,9.4vw,40px);line-height:1.05;color:var(--oroB);text-shadow:0 0 28px rgba(232,200,126,.28),0 1px 14px rgba(7,6,12,.9)}

.boton{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:60px;padding:0 20px;border-radius:0;border:1px solid #e6cd93;
 font-family:var(--disp);font-weight:700;font-size:15.5px;letter-spacing:.13em;text-transform:uppercase;color:#1a1206;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.42'/%3E%3C/svg%3E"),linear-gradient(168deg,#f5dfa8,#e0c084 44%,#c9a86b);background-blend-mode:multiply,normal}
.boton>span.f{position:absolute;inset:4px;border:1px solid rgba(90,64,22,.38);pointer-events:none}
.boton{position:relative;overflow:hidden;isolation:isolate;
 box-shadow:0 0 0 1px rgba(255,240,200,.55) inset,0 0 22px 2px rgba(240,205,130,.55),0 0 64px 10px rgba(232,190,110,.35);animation:respira 3.2s ease-in-out infinite}
.boton::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:34%;z-index:-1;transform:skewX(-20deg);
 background:linear-gradient(90deg,transparent,rgba(255,250,232,.85),transparent);animation:barrido 3.2s ease-in-out infinite}
@keyframes respira{50%{box-shadow:0 0 0 1px rgba(255,240,200,.7) inset,0 0 30px 6px rgba(245,212,140,.75),0 0 90px 22px rgba(232,190,110,.45)}}
@keyframes barrido{0%,55%{left:-40%}85%,100%{left:120%}}
.boton:active{filter:brightness(.94)}
.boton svg{width:24px;height:24px;flex:0 0 auto}
.micro{font-size:16px;color:var(--ash)}
.enlace{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-family:var(--head);font-weight:500;font-size:22px;color:var(--oroB)}
.enlace::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.enlace.daat{color:var(--daat)}
.priv{display:inline-flex;align-items:center;min-height:44px;font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--ash);text-transform:uppercase}

/* 0 · Portada: el logo arriba, el huevo órfico vivo en el vano, qué hay aquí abajo */
#c0 .t1{font-size:clamp(36px,10vw,42px);line-height:1.08}
#c0 .l{margin-top:12px;font-size:19px;color:var(--marfil)}
#c0 .abajo{bottom:calc(env(safe-area-inset-bottom) + 14px)}
.hay{list-style:none;display:flex;flex-direction:column;align-items:stretch;width:100%;max-width:300px}
.hay button{display:flex;align-items:center;gap:11px;width:100%;min-height:44px;text-align:left;font-family:var(--head);font-weight:600;font-size:17px;line-height:1.2;color:var(--crema);text-shadow:0 1px 10px rgba(7,6,12,.95)}
.hay button+button{border-top:1px solid var(--filete)}
.hay i{display:flex;align-items:center;justify-content:center;flex:0 0 26px;height:26px;border-radius:50%;border:1px solid rgba(232,200,126,.6);background:rgba(10,8,16,.7)}
.hay svg{width:14px;height:14px;fill:none;stroke:var(--oroB);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hay b{flex:1;font-weight:600}
.hay button::after{content:"";width:6px;height:6px;border-top:1.5px solid var(--oroB);border-right:1.5px solid var(--oroB);transform:rotate(45deg)}
.entra{display:flex;align-items:center;justify-content:center;width:44px;height:26px;margin-top:2px;pointer-events:none}
.entra i{width:14px;height:14px;border-right:1.5px solid var(--oroB);border-bottom:1.5px solid var(--oroB);transform:rotate(45deg);animation:baja 1.8s ease-in-out infinite}
@keyframes baja{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(7px) rotate(45deg);opacity:1}}

/* 1 · Tu esfera */
#c1 .pregunta{margin-bottom:18px}
#c1 .micro{margin-top:12px}
/* 2 · Lo nuevo: el estreno es un sello que late dentro del vano */
#c2 .t2{margin-top:12px}
#c2 .vuelta{margin-top:10px}
.rige{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:6px;font-family:var(--head);font-size:19px;color:var(--dim)}
.rige b{font-weight:600;color:var(--crema)}
.rige img{height:24px;width:auto;max-width:36px}
.estreno{position:absolute;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,calc(var(--dd) / -2));width:var(--vw);text-align:center}
.estreno .disco{position:relative;width:var(--dd);height:var(--dd);display:flex;align-items:center;justify-content:center;border-radius:50%;
 background:radial-gradient(circle,rgba(232,71,63,.95) 0%,rgba(180,34,40,.95) 58%,rgba(120,18,28,.95) 100%);
 box-shadow:0 0 0 2px #f0d39a,0 0 0 6px rgba(7,6,12,.6),0 0 0 7px rgba(240,211,154,.6),0 0 34px 8px rgba(232,71,63,.55),0 0 80px 20px rgba(232,190,110,.35);animation:lateDisco 2.6s ease-in-out infinite}
.estreno .disco svg{width:38%;height:38%;fill:#fff8e6;margin-left:8%;filter:drop-shadow(0 1px 3px rgba(0,0,0,.4))}
.estreno .disco::before,.estreno .disco::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid rgba(240,211,154,.8);animation:onda 2.6s ease-out infinite}
.estreno .disco::after{animation-delay:1.3s}
@keyframes onda{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
@keyframes lateDisco{50%{box-shadow:0 0 0 2px #f6dfae,0 0 0 6px rgba(7,6,12,.6),0 0 0 7px rgba(240,211,154,.8),0 0 48px 14px rgba(232,71,63,.75),0 0 110px 30px rgba(232,190,110,.45)}}
.estreno b{margin-top:14px;font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.2em;margin-right:-.2em;text-transform:uppercase;color:var(--oroB);text-shadow:0 0 14px rgba(232,200,126,.6),0 1px 8px rgba(7,6,12,.95)}
.estreno span{margin-top:2px;font-family:var(--head);font-weight:600;font-size:19px;line-height:1.2;color:var(--crema);text-shadow:0 1px 10px rgba(7,6,12,.95)}
/* 3 · Los grimorios: sección general; cada grimorio tiene su héroe en /grimorios/ */
#c3 .t2{margin-top:12px}
#c3 .l{margin-bottom:16px}
/* 4 · La Academia */
#c4 .t2{margin-top:10px}
#c4 .l{margin-top:12px}
#c4 .micro{margin-bottom:12px;color:var(--dim)}
#c4 .boton{padding:0 10px;font-size:13.5px;letter-spacing:.06em}
/* el botón de la Academia: la misma placa, en violeta Daat */
.boton.daat{color:#fff;border-color:#d9bdfa;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='4' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.3'/%3E%3C/svg%3E"),linear-gradient(168deg,#a77ae6,#7a3fbf 50%,#5a2a96);
 box-shadow:0 0 0 1px rgba(240,225,255,.5) inset,0 0 22px 2px rgba(169,107,232,.6),0 0 64px 10px rgba(122,63,191,.4);animation-name:respiraDaat;text-shadow:0 1px 2px rgba(40,10,70,.6)}
.boton.daat>span.f{border-color:rgba(240,225,255,.35)}
@keyframes respiraDaat{50%{box-shadow:0 0 0 1px rgba(240,225,255,.7) inset,0 0 30px 6px rgba(190,140,245,.8),0 0 90px 22px rgba(122,63,191,.5)}}
/* 5 · Redes: protagonistas */
#c5 .t2{margin-top:12px}
#c5 .l{margin-top:10px;font-style:italic;font-size:19px}
.redes{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;list-style:none}
.redes li:first-child{grid-column:1/-1}
.red{position:relative;display:flex;align-items:center;justify-content:center;gap:11px;min-height:52px;padding:0 10px;border:1px solid rgba(232,200,126,.75);background:rgba(16,11,22,.72);
 font-family:var(--disp);font-weight:700;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--crema);
 box-shadow:0 0 0 1px rgba(232,200,126,.25) inset,0 0 18px rgba(232,200,126,.22)}
.red svg{width:22px;height:22px;fill:var(--oroB);flex:0 0 auto;filter:drop-shadow(0 0 6px rgba(232,200,126,.5))}
.red:active{background:rgba(232,200,126,.14)}
.redes li:first-child .boton{min-height:56px}
.redes li:first-child .boton svg{fill:#b3261e}

/* revisión: ?guia=1 rotula lámina/transición; ?eventos=1 marca cada CTA */
.guia{position:fixed;left:8px;bottom:8px;z-index:40;font:700 10px/1.4 ui-monospace,monospace;color:#0b0812;background:#C9A2F5;padding:3px 7px;display:none}
body.con-guia .guia{display:block}
body.ver-eventos [data-evt]{outline:1px dashed rgba(201,162,245,.8);outline-offset:2px}
/* teléfonos bajos (SE, 667): el cielo sobre el portal mide ~238 px; el texto se ajusta a ese hueco */
@media (max-height:740px){
 :root{--nav:52px}
 .arriba{top:calc(env(safe-area-inset-top) + var(--nav) + 6px)}
 .abajo{bottom:calc(env(safe-area-inset-bottom) + 3svh)}
 #c0 .t1{font-size:31px}
 #c0 .l{font-size:17px;margin-top:8px}
 .hay button{font-size:16.5px}
 .entra{display:none}
 .t1{font-size:26px;line-height:1.12}
 .t2{font-size:28px}
 .l{font-size:17px}
 .rige{min-height:44px;margin-top:2px;font-size:17px}
 .pregunta{font-size:31px}
 #c1 .pregunta{margin-bottom:12px}
 .red{min-height:48px}
 .redes{gap:6px}
 .redes li:first-child .boton{min-height:50px}
 #c5 .l{display:none}
 .estreno b{margin-top:10px}
}
/* ═══ escritorio: el portal a la derecha, el texto en una columna a la izquierda, sobre el cielo vacío ═══ */
.enlaces{display:none}
.semana{display:none}
@media (min-width:900px) and (min-aspect-ratio:5/4){
 :root{--nav:84px;--col:min(40vw,600px);--izq:clamp(48px,6.5vw,128px)}
 .nav{padding:0 calc(var(--izq) - 6px) 0 var(--izq);background:linear-gradient(180deg,rgba(7,6,12,.8),rgba(7,6,12,0))}
 .marca{gap:14px}.marca img{width:52px;height:52px}.marca .wm{font-size:14.5px}
 .enlaces{display:flex;gap:clamp(18px,2.4vw,40px);margin-left:auto;margin-right:12px}
 .enlaces a{position:relative;display:flex;align-items:center;min-height:48px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);transition:color .25s}
 .enlaces a::after{content:"";position:absolute;left:0;right:100%;bottom:8px;height:1px;background:var(--oroB);box-shadow:0 0 6px var(--oroB);transition:right .3s}
 .enlaces a:hover,.enlaces a.on{color:var(--oroB)}.enlaces a:hover::after,.enlaces a.on::after{right:0}
 .abre{font-size:0;gap:0}
 .velo.arr{top:0;bottom:0;height:auto;width:62%;background:linear-gradient(90deg,rgba(7,6,12,.78),rgba(7,6,12,.5) 55%,rgba(7,6,12,0))}
 .velo.aba{height:22%;background:linear-gradient(rgba(7,6,12,0),rgba(7,6,12,.55))}
 .capa{display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,3.2vh,40px);padding:calc(var(--nav) + 20px) 0 40px var(--izq);right:auto;width:calc(var(--izq) + var(--col))}
 .arriba,.abajo{position:static;align-items:flex-start;text-align:left;padding:0}
 .arriba>*,.abajo>*{max-width:var(--col)}
 .rotulo::before{display:none}
 .t1{font-size:clamp(44px,3.9vw,70px);line-height:1.08}
 #c0 .t1{font-size:clamp(52px,4.8vw,86px);line-height:1.02}
 .t2{font-size:clamp(42px,3.6vw,64px);line-height:1.06}
 .l{font-size:clamp(19px,1.35vw,23px)}
 #c0 .l{font-size:clamp(20px,1.5vw,25px);margin-top:18px;max-width:34ch}
 .pregunta{font-size:clamp(40px,3.2vw,56px)}
 .boton{width:auto;min-width:380px;min-height:66px;padding:0 44px;font-size:16.5px}
 .micro{font-size:17px}
 .rige{font-size:21px}.rige img{height:28px;max-width:42px}
 #c0 .abajo{bottom:auto}
 .hay{max-width:420px}.hay button{font-size:20px;min-height:52px}.hay i{flex-basis:32px;height:32px}.hay svg{width:17px;height:17px}
 .entra{display:none}
 #c3 .l{margin-bottom:0;max-width:30ch}
 #c4 .boton{font-size:15.5px;letter-spacing:.1em;padding:0 40px}
 #c4 .micro{margin-bottom:0}
 .redes{max-width:540px;gap:12px}.red{min-height:60px;font-size:14.5px}.redes li:first-child .boton{min-height:64px;width:100%}
 .estreno b{font-size:17px}.estreno span{font-size:22px}
 .con-semana .semana{display:flex;gap:clamp(6px,.8vw,14px);margin-top:18px}
 .semana a{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:52px;padding:8px 2px 6px;border-radius:6px;transition:background .25s}
 .semana a:hover{background:rgba(232,200,126,.08)}
 .semana img{height:clamp(38px,3vw,52px);width:auto;max-width:clamp(56px,4.4vw,76px);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 60%,transparent))}
 .semana span{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
 .semana a.hoy{background:radial-gradient(circle at 50% 38%,rgba(243,215,150,.22),transparent 70%)}
 .semana a.hoy img{filter:drop-shadow(0 0 14px rgba(243,215,150,.9)) drop-shadow(0 0 6px var(--c))}
 .semana a.hoy span{color:var(--oroB)}
 .riel{right:clamp(16px,2vw,40px)}
 .riel button{width:52px;height:56px}.riel button i{width:38px;height:38px}.riel button svg{width:20px;height:20px}
 .riel::before,.riel::after{right:25.5px;top:28px}.riel::before{bottom:28px}.riel::after{height:calc((100% - 56px) * var(--avance,0))}
 .riel button span{right:56px;font-size:12.5px}
 .baja b{font-size:13px}
 .guia{left:auto;right:8px}
}
/* los cuatro grimorios: placas de oro con su emblema, latiendo en relevo (gateway c3 y /grimorios) */
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:360px}
.chips .boton{justify-content:flex-start;gap:9px;min-height:58px;padding:0 10px;text-align:left;font-family:var(--head);font-weight:700;font-size:18px;line-height:1.08;letter-spacing:0;text-transform:none}
.chips .boton:nth-child(2),.chips .boton:nth-child(2)::after{animation-delay:.8s}
.chips .boton:nth-child(3),.chips .boton:nth-child(3)::after{animation-delay:1.6s}
.chips .boton:nth-child(4),.chips .boton:nth-child(4)::after{animation-delay:2.4s}
.chips .boton i{display:flex;align-items:center;justify-content:center;flex:0 0 36px;height:36px;border-radius:50%;border:1.5px solid rgba(26,18,6,.55);background:rgba(255,248,230,.3)}
.chips .boton svg{width:22px;height:22px;fill:none;stroke:#1a1206;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chips .boton svg .lleno{fill:#1a1206;stroke:none}
.chips .boton svg .velo{fill:#1a1206;fill-opacity:.25}
.chips .boton svg text{fill:#1a1206;stroke:none;font-weight:700}
@media (max-height:740px){.chips .boton{font-size:16.5px;min-height:50px}.chips{gap:6px} #c3 .l{font-size:16px;line-height:1.4;margin-bottom:10px}}
@media (min-width:900px) and (min-aspect-ratio:5/4){
 .chips{max-width:540px;gap:14px}.chips .boton{width:auto;min-width:0;min-height:68px;font-size:21px;padding:0 16px}
 .chips .boton i{flex-basis:44px;height:44px}.chips .boton svg{width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){.baja svg,.astro.hoy i,.boton,.boton::after,.estreno .disco,.estreno .disco::before,.estreno .disco::after,.entra i{animation:none}}