/* v13 · portada — capa de la ronda v13 (29 oct 2026). Va al final de la cascada: aquí manda lo nuevo de esta área. */

/* ---------- 1. Tramo fijado de la rueda (solo con 3D) ----------
   La portada mide una pantalla + --recorrido y su .wrap (accesos, etiqueta «3D en vivo» y #stage-hero) queda fija arriba
   mientras la cámara avanza hacia la rueda, que está de frente (js/app.js, initHero: el avance va de 0 a 1 en el 88 % del
   recorrido y el resto sostiene la pose final antes de la cinta y de #sillas-hero). Sin 3D (fotos) o con «reducir
   movimiento» no hay recorrido: la portada mide una pantalla, como siempre.
   · La .wrap ocupa todo el ancho (el contenido sigue a 1440 px como máximo con el relleno): el lienzo de la rueda llega a las
     orillas también en pantallas anchas.
   · z 6, como .pin-escena: sticky crea un contexto de apilamiento y el lienzo #gl es z 5, así los accesos (z 7 dentro) siguen
     encima del lienzo. #stage-hero es transparente y no recibe el puntero (.stage).
   · 100svh: en celular la vista no cambia de alto al esconderse la barra del navegador (la rueda no salta). */
html.con3d .hero{--recorrido:0px;display:block;min-height:0;height:calc(100svh + var(--recorrido))}
@media(prefers-reduced-motion:no-preference){html.con3d .hero{--recorrido:110svh}}
@media(max-width:900px) and (prefers-reduced-motion:no-preference){html.con3d .hero{--recorrido:90svh}}
html.con3d .hero .wrap{position:sticky;top:0;z-index:6;height:100svh;max-width:none;margin:0;
  padding-left:max(var(--gutter),calc((100% - 1440px) / 2));padding-right:max(var(--gutter),calc((100% - 1440px) / 2))}
html.con3d #stage-hero{inset:0}
/* celular: con la .wrap de alto fijo las filas no se estiran; los accesos siguen pegados arriba, bajo la barra */
@media(max-width:900px){html.con3d .hero .wrap{align-content:start}}
/* computadora: el marco de la foto de respaldo (invisible con 3D, solo se desvanece al llegar) no fija el alto de la fila:
   en ventanas bajas los accesos quedan centrados en la vista y nada se sale de la .wrap */
@media(min-width:901px){html.con3d .hero-stage-wrap{min-height:0;height:0;align-self:center}}
/* el fondo de la portada (bajo el lienzo) se estira con el tramo: solo tonos del morado noche */
html.con3d .hero .foto{background:linear-gradient(180deg,#18113A 0%,#151034 45%,#120C2B 100%)}
/* velo de abajo: al avanzar, la base y las patas que salen de la pantalla se funden con la noche (sin línea dura). Sobre el
   lienzo y bajo los accesos y la etiqueta (z 7); en reposo no se ve (la rueda está completa). Sigue a --rueda (app.js). */
html.con3d .hero .wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(110px,20vh,200px);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,12,43,0),rgba(18,12,43,.55) 55%,rgba(18,12,43,.92));opacity:clamp(0,var(--rueda,0) * 4,1)}

/* ---------- 2. Accesos al avanzar (computadora) ----------
   La rueda viaja al centro y crece: los accesos se desvanecen y suben 24 px en el primer quinto del avance (--rueda, 0..1, lo escribe
   app.js en #inicio; también el --hp de scroll.js al salir de la portada). Sin puntero mientras no se ven; con el teclado
   vuelven a verse en cuanto uno toma el foco. En celular NO se desvanecen: la rueda crece hacia abajo y nunca sube a ellos. */
@media(min-width:901px){
  html.con3d .hero-copy{--fade:clamp(0,(var(--rueda,0) - .02) * 3,1);opacity:calc(1 - max(var(--hp,0),var(--fade)));transform:translateY(calc(max(var(--hp,0),var(--fade)) * -24px))}
  html.con3d .hero--avanza .hero-copy{pointer-events:none}
  html.con3d .hero--avanza .hero-copy:focus-within{opacity:1;transform:none;pointer-events:auto}
}
@media(prefers-reduced-motion:reduce){html.con3d .hero-copy{opacity:1;transform:none}}

/* compu angosta: la rueda alcanza pronto la columna de stickers; se van un poco antes para que nunca se vea a través de ellos */
@media(min-width:901px) and (max-width:1300px){html.con3d .hero-copy{--fade:clamp(0,(var(--rueda,0) - .02) * 6,1)}}
/* celular acostado: stickers en una columna angosta a la izquierda; la rueda ocupa el resto (js/app.js planear) */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  html.con3d .hero .wrap{padding-top:calc(var(--nav) + 8px)}
  html.con3d .hero-copy{max-width:min(46vw,400px)}
  html .hero .accesos > .acceso,html .hero .acceso-h1 .acceso{min-height:48px;padding:5px 8px 5px 6px}
  html .hero .acceso-ico{width:26px;height:26px}
  html .hero .acceso-nombre{font-size:13px}
  .acceso-dato{font-size:9px;letter-spacing:.06em}
  .hero-pie{display:none}
}