/* hero.css · v8.1 · constructor 1 · header#hero: ADENTRO DEL VAGÓN (segunda pasada: puntos 5 y 1).
   La página abre con #llegada (llegada.css; es hijo de #hero) tapando el hero. Al entrar, hero.js pone
   data-estado="adentro": el marco fijo del vagón (capsula-sinpalo-2: techo, lámparas, banca, piso; por la
   ventana, el metrocable), el texto a la izquierda sobre un velo, y Aurora delante de la ventana con el globo
   CENTRADO ENCIMA de su cabeza. Solo selectores que empiezan por #hero. Nada de vh: svh.
   Los componentes (.escena, .personaje, .globo, .boton) viven en base.css: aquí solo se COLOCAN.
   EL GLOBO NUNCA SE CORTA: la figura de Aurora es una rejilla MÁS ANCHA que ella (le cabe el globo entero),
   Aurora y el globo van centrados en la rejilla (max-width 100 % de la figura) y la figura nunca sale de la
   pantalla. La colita queda al 50 %: sobre la coronilla (medida en el póster: la cabeza está al 49,7 %). */

#hero{min-height:100svh;margin:calc(-1 * var(--nav)) 0 0;align-items:center}
/* mientras llega el metro, el hero mide exactamente la pantalla: #llegada lo tapa entero */
#hero[data-estado="llegada"]{height:100svh;min-height:0}

/* la ilustración abre con scale 1.05→1 al entrar (biblia §7). Se anima `scale`, no `transform`: así el
   parallax de main.js (translate3d en línea sobre img.fondo) sigue vivo y no pelea con la animación. */
#hero>img.fondo{transform-origin:50% 46%}
#hero[data-estado="adentro"]>img.fondo{animation:hero-abre .9s var(--orbe) both}
@keyframes hero-abre{from{scale:1.05}to{scale:1}}

/* el velo: texto legible a la izquierda, el vagón abierto a la derecha. El velo vertical genérico de
   .escena>.texto::before no va en el hero: cubriría solo la caja del texto. */
#hero::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(var(--fondo-rgb),.9),rgba(var(--fondo-rgb),.64) 44%,rgba(var(--fondo-rgb),0) 72%)}
#hero>.texto::before{content:none}
#hero>.texto{padding:calc(var(--nav) + 56px) var(--canal) 96px}
#hero>.texto>*{max-width:560px}
#hero .lead{margin:20px 0 28px;max-width:46ch;color:#D9DED7}
#hero .kicker{color:#B9C7CD}
#hero .boton{margin:0}
#hero h1:focus{outline:none}

/* entrada escalonada propia del hero: data-revela (no data-entra: el observador de main.js no la pisa) */
#hero [data-revela]{opacity:0;transform:translateY(12px);transition:opacity .48s var(--orbe),transform .48s var(--orbe)}
#hero [data-revela].vino{opacity:1;transform:none}

/* ── los personajes: colocados por el hero; el globo lo pone base.css encima ── */
#hero .personaje{position:absolute;z-index:var(--z-panel);pointer-events:none;margin:0}

/* Aurora, delante de la ventana. La FIGURA es la rejilla ancha; Aurora (video con alfa o su póster) mide
   --aurora. base.css: .aur video (contain + halo) y .aur-flota>video (flota). */
#hero .personaje-aurora{--aurora:min(22vw,280px);right:5vw;top:calc(var(--nav) + 27svh);
  width:min(36ch,calc(100vw - 2 * var(--canal)));aspect-ratio:auto;display:grid;justify-items:center;
  opacity:0;transition:opacity .6s var(--orbe)}
/* aspect-ratio:auto: .aur (base.css) le pone 1/1 a la figura y la rejilla quedaría cuadrada (342 px de
   alto con Aurora de 280): Aurora se iría al borde de arriba y el globo, medido contra la caja, se le
   montaría. Con auto la figura mide lo que mide Aurora. */
#hero .personaje-aurora.vino{opacity:1}
#hero .personaje-aurora>video,#hero .personaje-aurora>img{width:var(--aurora);height:var(--aurora);object-fit:contain}
/* el globo: centrado (base.css: left 50 %, --gx -50 %, colita al 50 %), tan ancho como la figura como mucho,
   y con el borde inferior 3 % por debajo de la coronilla: la colita cae justo sobre la cabeza */
#hero .personaje-aurora>.globo{max-width:100%;bottom:97%}

/* el oso asoma por el filo derecho, ENTERO. Medido en el PNG: la «pared» del recorte está en la columna
   135 de 512 (26,37 %); se corre justo eso fuera de la pantalla. El espejo va en la imagen, no en la figura,
   para que el globo no se espeje con él. */
#hero .personaje-oso{--ancho-oso:min(20vw,280px);width:var(--ancho-oso);aspect-ratio:1/1;bottom:0;
  right:calc(var(--ancho-oso) * -0.2637);transform:translateX(30%);opacity:0;
  transition:transform .52s var(--peluche),opacity .3s linear}
#hero .personaje-oso.vino{transform:none;opacity:1}
#hero .personaje-oso>.oso{width:100%;height:auto;transform:scaleX(-1) rotate(var(--giro,0deg));transform-origin:50% 100%;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.45));transition:transform .18s var(--cromo)}
/* su globo, encima de la cabeza: la cabeza (espejada) queda al 51 % del ancho de la figura; el borde derecho
   del globo se ancla ahí y la colita (globo-der: right 22px) apunta a la coronilla. Nunca se corta: crece
   hacia la izquierda. */
#hero .personaje-oso>.globo{right:50%;bottom:96%;max-width:34ch;transform-origin:bottom right}

/* ── teléfono: texto arriba; abajo Aurora centrada (su globo centrado cabe entero) y el oso a la derecha,
      con el globo del oso más abajo que Aurora para que no se pisen. El hero crece lo que haga falta. ── */
@media(max-width:760px){
  #hero{align-items:start}
  #hero::before{background:linear-gradient(180deg,rgba(var(--fondo-rgb),.92),rgba(var(--fondo-rgb),.76) 44%,rgba(var(--fondo-rgb),.22) 64%,rgba(var(--fondo-rgb),0) 82%)}
  /* abajo del texto caben: el globo de Aurora, Aurora (32vw), el globo del oso y el oso (44vw) */
  #hero>.texto{padding:calc(var(--nav) + 36px) var(--canal) calc(74vw + 160px)}
  #hero .personaje-aurora{--aurora:32vw;top:auto;right:auto;left:50%;bottom:calc(42vw + 96px);translate:-50% 0}
  #hero .personaje-oso{--ancho-oso:44vw}
  #hero .personaje-oso>.globo{max-width:22ch}
}

/* ── red de seguridad: si hero.js no llega (404, red caída) el hero se muestra igual a los 3,2 s; sin JS,
      de una. Con hero.js vivo (data-js) no corre: la revelación la maneja el módulo al entrar. ── */
@keyframes hero-salva{to{opacity:1;transform:none}}
#hero:not([data-js]) [data-revela]{animation:hero-salva .48s var(--orbe) 3.2s both}
#hero:not([data-js]) .personaje-aurora{animation:hero-salva .6s var(--orbe) 3.4s both}
#hero:not([data-js]) .personaje-oso{animation:hero-salva .52s var(--peluche) 3.6s both}
#hero:not([data-js]) .personaje>.globo{animation:hero-salva .32s var(--cromo) 4s both}
@media(scripting:none){
  #hero [data-revela],#hero .personaje-aurora,#hero .personaje-oso,#hero .personaje>.globo{opacity:1;transform:none;animation:none}
  #hero[data-estado="llegada"]{height:auto;min-height:100svh}
  /* sin scripting el navegador le pone controles nativos al video sin fuente: va el póster en su lugar */
  #hero .personaje-aurora>video{display:none}
  #hero .personaje-aurora::after{content:'';display:block;width:var(--aurora);aspect-ratio:1/1;
    background:url(/assets/universo/poster-idle-v2.webp) center/contain no-repeat;filter:drop-shadow(0 0 28px rgba(127,227,220,.35))}
}

@media(prefers-reduced-motion:reduce){
  #hero>img.fondo,#hero[data-estado="adentro"]>img.fondo{animation:none}
  #hero .personaje-aurora,#hero .personaje-oso{opacity:1;transform:none}
}