/* ==========================================================================
   ALPHA X - IA · v10 — LA MAQUETA
   --------------------------------------------------------------------------
   Sin paneles. La versión anterior ponía cajas opacas encima de la escena, y eso
   es exactamente lo que hacía que se leyera como «un objeto y unos rectángulos
   pegados delante». Aquí:

     · el texto va **a sangre**, contra el margen, sin caja cerrada
     · el titular grande **no está aquí**: está plantado dentro de la sala, y lo
       que queda en el documento es la frase que hay que poder leer y copiar
     · el contraste lo dan un velo que se abre hacia fuera y las sombras del
       propio texto — no un fondo sólido
     · y el hueco alrededor del párrafo **lo abre la escena**: el enjambre se
       aparta de cada bloque porque el bloque está registrado en el mundo 3D

   Esa última es la que de verdad quita la sensación de capas. El resto es
   acompañarla.
   ========================================================================== */

#lienzo{
  position:fixed; inset:0; z-index:1;
  width:100vw; height:100svh; display:block;
  opacity:0; transition:opacity 1.5s var(--e-cine) .25s;
  pointer-events:none;
}
body.escena-lista #lienzo{ opacity:1; }

/* --------------------------------------------------------------------------
   EL PRIMER PLANO
   --------------------------------------------------------------------------
   ⚠ `z-index:20`: **por encima del contenido**, que es todo el propósito. Es lo
   único de la página que pasa por delante de las letras, y es lo que mete al
   lector dentro del cuadro en vez de dejarlo mirando por una ventana.
   `mix-blend-mode:screen` para que sólo pueda aclarar: si pudiera oscurecer,
   una mota grande sobre un párrafo se lo comería.
   -------------------------------------------------------------------------- */
#polvo{
  position:fixed; inset:0; z-index:20; pointer-events:none;
  width:100vw; height:100svh; display:block;
  mix-blend-mode:screen;
  opacity:0; transition:opacity 2s var(--e-cine) .6s;
}
body.escena-lista #polvo{ opacity:1; }

.cortina{
  position:fixed; inset:0; z-index:30; pointer-events:none;
  background:var(--fondo);
  opacity:1; transition:opacity 1.3s var(--e-cine) .4s;
}
body.escena-lista .cortina{ opacity:0; }

.saltar{
  position:fixed; z-index:60; top:10px; left:10px;
  transform:translateY(-170%);
  padding:11px 18px; background:var(--ambar); color:#08090F;
  font-family:var(--f-cota); font-size:var(--t-cota); letter-spacing:.12em;
  text-transform:uppercase; border-radius:3px;
  transition:transform .25s var(--e-cine);
}
.saltar:focus{ transform:none; }

/* --------------------------------------------------------------------------
   LA BARRA
   --------------------------------------------------------------------------
   ⚠ `fixed`, así que no empuja a nadie: sin relleno superior en la portada, el
   primer contenido aparece debajo. Y `scroll-margin-top` en las secciones, o
   cada anclaje aterriza con su título tapado.
   -------------------------------------------------------------------------- */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:clamp(14px,3vw,40px);
  padding:15px var(--margen);
  background:linear-gradient(rgba(4,5,10,.82), rgba(4,5,10,.42) 60%, rgba(4,5,10,0));
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.barra__marca{ display:flex; align-items:baseline; gap:9px; }
.barra__nombre{ font-family:var(--f-display); font-size:19px; letter-spacing:-.012em; }
.barra__cola{ color:var(--ambar); }
.barra__nav{ display:flex; gap:clamp(12px,1.9vw,26px); margin-left:auto; }
.barra__nav a{
  font-family:var(--f-cota); font-size:var(--t-cota);
  letter-spacing:.11em; text-transform:uppercase; color:var(--apagado);
  padding:5px 0; border-bottom:1px solid transparent;
  transition:color .22s var(--e-cine), border-color .22s var(--e-cine);
}
.barra__nav a:hover,
.barra__nav a[aria-current="true"]{ color:var(--texto); border-bottom-color:var(--ambar); }
.barra__cota{ margin:0; white-space:nowrap; }
@media (max-width:1120px){ .barra__cota{ display:none; } }
@media (max-width:820px){ .barra__nav{ display:none; } .barra{ justify-content:space-between; } }

/* --------------------------------------------------------------------------
   LAS ESTACIONES
   -------------------------------------------------------------------------- */
.hoja{ position:relative; z-index:10; }

.acto{
  position:relative;
  min-height:118svh;
  display:grid; align-content:center;
  padding:clamp(90px,13vh,150px) var(--margen);
  scroll-margin-top:74px;
}
.acto--derecha{ justify-items:end; text-align:right; }
.acto--derecha p{ margin-left:auto; }

.bloque{
  position:relative;
  width:min(600px, 100%);
  padding:clamp(22px,2.4vw,34px) clamp(24px,2.6vw,38px);
}
/* El velo, **abierto**. Es un degradado que nace opaco donde está el texto y se
   va a nada hacia fuera, sin borde en ningún lado. Un rectángulo con filo se lee
   como una tarjeta encima de un vídeo; esto se lee como que el aire se ha
   aclarado ahí — que además es literalmente lo que pasa, porque el enjambre se
   aparta de este mismo bloque. */
.bloque::before{
  content:""; position:absolute; inset:-20% -30% -20% -42%;
  z-index:-1; pointer-events:none;
  /* ⚠ **Medido, no elegido.** Con .90/.74 el cuerpo del texto quedaba por
     debajo del contraste legible en las estaciones del medio, donde el corredor
     es más claro. Sobre una escena oscura y quieta un velo suave basta; sobre
     una que cambia y que a ratos se llena de niebla iluminada, no: el bloque
     tiene que ganar siempre, también en el fotograma más brillante. */
  background:radial-gradient(66% 58% at 32% 50%,
    rgba(4,6,14,.965) 0%, rgba(4,6,14,.90) 46%, rgba(4,6,14,0) 100%);
}
.acto--derecha .bloque::before{
  inset:-20% -42% -20% -30%;
  background:radial-gradient(66% 58% at 68% 50%,
    rgba(4,6,14,.965) 0%, rgba(4,6,14,.90) 46%, rgba(4,6,14,0) 100%);
}

.acto__n{ margin:0 0 16px; }
.acto__t{ margin:0 0 14px; font-size:var(--t-2); }
.acto__e{ margin:0; color:var(--apagado); font-size:var(--t-3); line-height:1.55; }

/* --------------------------------------------------------------------------
   LA LUZ DE LA ESCENA, EN EL TEXTO
   --------------------------------------------------------------------------
   `--luz` la escribe `luz.js` midiendo el color medio de lo que hay detrás de
   cada bloque, ocho veces por segundo. Aquí se usa **con cabeza**: el titular
   toma el tono, y los filetes y las cotas lo toman con más fuerza porque son
   elementos finos y ahí el color se nota sin comprometer la lectura.

   ⚠ Lo que **no** se hace es teñir el cuerpo del texto. Un párrafo largo tiene
   que tener el contraste que tiene siempre; si el color se lo pone la escena, en
   los tramos oscuros del corredor el párrafo se apagaría y nadie sabría por qué
   «a veces cuesta leer».
   -------------------------------------------------------------------------- */
[data-luz] .acto__t,
[data-luz].portada__t{
  color:color-mix(in oklab, var(--texto) 62%, var(--luz) 38%);
  text-shadow:0 2px 40px rgba(4,5,12,.95);
}
[data-luz] .acto__n{ color:color-mix(in oklab, var(--tenue) 45%, var(--luz) 55%); }
[data-luz] .puntos li{ border-top-color:color-mix(in oklab, var(--linea) 60%, var(--luz) 40%); }

/* --------------------------------------------------------------------------
   PORTADA
   -------------------------------------------------------------------------- */
.acto--portada{ min-height:100svh; }
.acto--portada .bloque{ width:min(720px, 100%); padding-left:0; }
.acto--portada .bloque::before{ inset:-16% -30% -16% -50vw; }

.portada__t{
  margin:0; font-size:var(--t-1); max-width:24ch;
  color:color-mix(in oklab, var(--texto) 62%, var(--luz) 38%);
  text-shadow:0 2px 44px rgba(4,5,12,.96), 0 0 100px rgba(4,5,12,.85);
}
.portada__t em{ font-style:normal; color:var(--ambar); }
.portada__e{
  margin:clamp(20px,3vh,32px) 0 0; max-width:44ch;
  font-size:var(--t-3); color:var(--apagado); line-height:1.6;
  text-shadow:0 2px 26px rgba(4,5,12,.98);
}
.portada__pie{ display:flex; flex-wrap:wrap; gap:13px; margin-top:clamp(26px,4vh,42px); }
.portada__leyenda{
  position:absolute; left:var(--margen); bottom:clamp(24px,5vh,50px);
  margin:0; color:var(--tenue);
}
@media (max-width:820px){ .portada__leyenda{ display:none; } }

/* --------------------------------------------------------------------------
   BOTONES
   -------------------------------------------------------------------------- */
.boton{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px;
  font-family:var(--f-cota); font-size:var(--t-cota);
  letter-spacing:.14em; text-transform:uppercase;
  color:#08090F; background:var(--ambar);
  border:1px solid var(--ambar); border-radius:3px;
  transition:transform .2s var(--e-salida), box-shadow .25s var(--e-cine);
}
.boton:hover{ transform:translateY(-2px); box-shadow:0 12px 36px -12px rgba(255,158,84,.65); }
.boton--liso{
  background:rgba(9,12,22,.5); color:var(--texto); border-color:var(--linea);
  backdrop-filter:blur(6px);
}
.boton--liso:hover{ border-color:var(--hielo); box-shadow:0 12px 32px -16px rgba(0,0,0,.9); }

/* --------------------------------------------------------------------------
   LISTAS
   -------------------------------------------------------------------------- */
.puntos{ list-style:none; margin:26px 0 0; padding:0; display:grid; }
.puntos li{
  display:grid; grid-template-columns:auto 1fr; gap:16px;
  padding:15px 0; border-top:1px solid var(--linea);
}
.acto--derecha .puntos li{ grid-template-columns:1fr auto; }
.acto--derecha .puntos i{ order:2; }
.puntos li:last-child{ border-bottom:1px solid var(--linea); }
.puntos b{ font-weight:500; color:var(--texto); display:block; margin-bottom:2px; }
.puntos span{ color:var(--apagado); font-size:14.5px; line-height:1.55; }
.puntos i{
  font-style:normal; color:var(--ambar); font-family:var(--f-cota);
  font-size:var(--t-cota); letter-spacing:.1em; padding-top:4px;
}

.datos{ margin:26px 0 0; padding:0; display:grid; }
.datos__par{
  display:grid; grid-template-columns:10ch 1fr; gap:16px; align-items:baseline;
  padding:13px 0; border-top:1px solid var(--linea);
}
.acto--derecha .datos__par{ grid-template-columns:1fr 10ch; }
.acto--derecha .datos dt{ order:2; }
.datos__par:last-child{ border-bottom:1px solid var(--linea); }
.datos dt, .datos dd{ margin:0; }
.datos dd{ font-size:var(--t-3); }

@media (max-width:820px){
  .acto--derecha{ justify-items:stretch; text-align:left; }
  .acto--derecha p{ margin-left:0; }
  .acto--derecha .puntos li{ grid-template-columns:auto 1fr; }
  .acto--derecha .puntos i{ order:0; }
  .acto--derecha .datos__par{ grid-template-columns:10ch 1fr; }
  .acto--derecha .datos dt{ order:0; }
  .bloque, .acto--derecha .bloque{ padding-left:0; padding-right:0; }
  .bloque::before, .acto--derecha .bloque::before{
    inset:-12% -30vw; background:linear-gradient(180deg,
      rgba(4,6,14,0) 0%, rgba(4,6,14,.86) 16%, rgba(4,6,14,.86) 84%, rgba(4,6,14,0) 100%);
  }
}

/* --------------------------------------------------------------------------
   PIE
   -------------------------------------------------------------------------- */
.pie{
  position:relative; z-index:10;
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding:24px var(--margen) 40px;
  border-top:1px solid var(--linea);
  background:linear-gradient(rgba(4,5,10,0), rgba(4,5,10,.85) 60%);
}
.pie p{ margin:0; }

/* --------------------------------------------------------------------------
   REVELADO
   -------------------------------------------------------------------------- */
[data-revelar]{
  opacity:0; transform:translateY(10px);
  transition:opacity .65s var(--e-salida) var(--retardo,0ms),
             transform .8s var(--e-salida) var(--retardo,0ms);
}
[data-revelar].visto{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-revelar]{ opacity:1; transform:none; transition:none; }
  .boton{ transition:none; }
  #polvo{ display:none; }
  .cortina{ transition:opacity .3s linear; }
}