/* ═══════════════════════════════════════════════════════════════════════════
   SUPREMOS · LA ANATOMÍA DE UNA TRENZA — lo que solo usa esta subpágina

   Hereda `estilo.css` entero: los cinco grises, Unbounded, el tracking que
   crece al bajar de tamaño, el radio 0, los filetes de 1px, los botones
   fantasma, la cabecera, el pie y el aviso de prueba. Aquí NO se redefine ni
   un color ni una tipografía: solo hay maqueta y movimiento.

   LAS SEIS REGLAS DEL SISTEMA, APLICADAS:
     1. Negro absoluto, interfaz en grises, y el neón de la escena como único
        color → aquí la escena es el tubo del tiempo y las fotos que se
        encienden al pasar por el centro.
     2. Radio 0 en todo. No hay una sola esquina redonda.
     3. Ni sombra, ni brillo, ni desenfoque en la interfaz. El único
        resplandor es el del tubo, que es escena y no interfaz.
     4. Una sola tipografía, con su tracking. Los titulares van en mayúscula
        y en 600, como los de la portada: no se inventa una voz nueva.
     5. Botones fantasma.
     6. Filetes de 1px. Ninguna caja con fondo.

   El color de la luz —`#ff2408` con el núcleo casi blanco `#fff1ec`— está
   copiado de `escena.js`, no elegido: es literalmente el mismo tubo que
   dibuja el retrato de la portada.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── EL TUBO DEL TIEMPO ──────────────────────────────────────────────────
   Su identidad es un neón trazado con una sola línea. Aquí esa línea se pone
   de pie, hace de eje del recorrido y se enciende según bajas. */

.tubo{
  position:fixed;
  left:clamp(14px, 2.6vw, 40px);
  top:clamp(96px, 16vh, 150px);
  bottom:clamp(76px, 14vh, 130px);
  width:1px;
  z-index:30;
  pointer-events:none;
  /* En la portada todavía no ha empezado nada, y una regla con sus horas
     colgando sola se leía como un adorno. Aparece en cuanto se baja. */
  opacity:min(1, calc(var(--via, 0) * 16));
  transition:opacity .4s cubic-bezier(.23,1,.32,1);
}
.tubo__via{ position:absolute; inset:0; background:rgba(255,255,255,.12) }
.tubo__luz{
  position:absolute; left:-1px; right:-1px; top:0;
  height:100%;
  transform-origin:top;
  transform:scaleY(var(--via, 0));
  background:#fff1ec;
  /* El resplandor es de la escena, no de la interfaz: la regla 3 sigue en
     pie. Son los dos colores exactos del tubo de `escena.js` — núcleo casi
     blanco y camisa roja. */
  box-shadow:0 0 5px #ff2408, 0 0 16px rgba(255,36,8,.6);
}

.tubo__horas{ list-style:none; margin:0; padding:0; position:absolute; inset:0 }
.tubo__horas li{
  position:absolute; left:0;
  top:calc(var(--en) * 100%);
  display:flex; align-items:center; gap:10px;
  transform:translateY(-50%);
}
.tubo__horas li::before{ content:''; width:9px; height:1px; background:rgba(255,255,255,.3) }
.tubo__horas b{
  font-weight:500;
  font-size:11px;
  letter-spacing:var(--tr-micro);
  text-transform:uppercase;
  color:var(--ceniza);
  white-space:nowrap;
}

/* ── PORTADA DE LA SUBPÁGINA ─────────────────────────────────────────────
   El sangrado de la izquierda deja sitio al tubo y a sus horas, que van
   fijos por encima de todo. */

.anat-portada{
  min-height:86svh;
  display:grid; align-content:center;
  padding:clamp(124px,19vh,190px) clamp(18px,3.4vw,40px) clamp(64px,9vh,100px)
          clamp(74px,8.6vw,132px);
}
/* ⚠️ `display:grid` y NO `flex` con el hijo centrado. Con `flex`, el
   `margin:0 auto` que `.ancho` trae de la hoja compartida no centra una caja
   de 1180: centra la caja ENCOGIDA al ancho de su texto, y el titular se iba
   a la mitad derecha de la pantalla dejando un vacío a la izquierda. Visto en
   captura. Con `grid` el hijo ocupa la columna entera y el sangrado manda. */
.anat-portada > .ancho{ width:100%; margin-inline:0; align-self:center }

/* Dos columnas: el texto a la izquierda, el objeto a la derecha. Por debajo de
   1100px la pieza estorba más que suma y se retira. */
@media (min-width: 1100px){
  .anat-portada{
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    align-items:center; gap:clamp(30px,4vw,70px);
  }
}
.anat-obra{
  margin:0; display:none;
  justify-self:center;
  /* `--p` es lo bajado desde arriba, de 0 a 1. La pieza se va hacia arriba y
     se apaga mientras el texto se queda: es la misma capa doble que llevan los
     tramos, aplicada a la portada. */
  transform:translate3d(0, calc(var(--p, 0) * -14vh), 0)
            scale(calc(1 - var(--p, 0) * .06));
  opacity:calc(1 - var(--p, 0) * 1.15);
}
@media (min-width: 1100px){ .anat-obra{ display:block } }
.anat-obra{ position:relative }
.anat-obra::before{
  content:'';
  position:absolute; inset:-6% -10%;
  background:radial-gradient(56% 44% at 50% 52%,
    rgba(255,238,230,.13) 0%, rgba(255,150,120,.05) 40%, rgba(0,0,0,0) 74%);
  pointer-events:none;
}
.anat-obra img{
  display:block; position:relative;
  max-height:min(64svh, 580px); width:auto; max-width:100%;
  /* Entra en gris, como todas las fotos del sistema, y con su sombra: si no,
     flota pegada sobre el negro. */
  filter:saturate(.12) brightness(.92)
         drop-shadow(0 26px 32px rgba(0,0,0,.72))
         drop-shadow(0 5px 10px rgba(0,0,0,.5));
  -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 7%, #000 72%, rgba(0,0,0,.5) 88%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 7%, #000 72%, rgba(0,0,0,.5) 88%, rgba(0,0,0,0) 100%);
  animation:flota 11s ease-in-out infinite;
}
/* La vuelta a la portada. En caja baja a propósito: encima de un titular,
   una línea corta en mayúscula muy espaciada se lee como rótulo decorativo,
   y esto es navegación. El detector de `impeccable` lo marcaba con razón. */
.anat-vuelta{
  margin:0 0 26px;
  font-size:13px; letter-spacing:var(--tr-lectura); color:var(--ceniza);
}
.anat-vuelta a{
  display:inline-flex; align-items:center; gap:9px;
  color:inherit; padding-bottom:3px; border-bottom:var(--filete);
  transition:color .25s cubic-bezier(.23,1,.32,1),
             border-color .25s cubic-bezier(.23,1,.32,1),
             transform .16s cubic-bezier(.23,1,.32,1);
}
/* Responde al pulsarlo, como los botones fantasma de la hoja compartida. Sin
   esto la web no da ninguna señal de que te ha oído, que es exactamente lo que
   hace que un sitio se sienta «básico» aunque se vea bien. */
.anat-vuelta a:active{ transform:scale(.97) }
@media (hover:hover) and (pointer:fine){
  .anat-vuelta a:hover{ color:var(--blanco); border-bottom-color:var(--blanco) }
}
.anat-titulo{
  margin:0; max-width:15ch;
  font-size:clamp(26px, 4.4vw, 48px); font-weight:700;
  text-transform:uppercase; letter-spacing:var(--tr-display); line-height:1.18;
}
.anat-entrada{ margin-top:26px }
.anat-baja{
  margin:clamp(40px,5vw,60px) 0 0;
  display:flex; align-items:center; gap:14px;
  font-size:11px; letter-spacing:var(--tr-micro); text-transform:uppercase;
  color:var(--ceniza);
}
.anat-baja::after{
  content:''; width:56px; height:1px; background:rgba(255,255,255,.34);
  transform-origin:left; animation:desliza 2.8s cubic-bezier(.23,1,.32,1) infinite;
}
@keyframes desliza{
  0%   { transform:scaleX(0); opacity:0 }
  36%  { transform:scaleX(1); opacity:1 }
  100% { transform:scaleX(1) translateX(56px); opacity:0 }
}

/* ── CADA TRABAJO ────────────────────────────────────────────────────────
   Dos pantallas y media de recorrido con el bloque clavado. Es lo que da
   tiempo a mirar la pieza y lo que permite que se mueva mientras. */

.anat{ position:relative; height:250svh }
.anat__pin{
  position:sticky; top:0;
  height:100svh;
  display:grid; grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(26px,5vw,80px);
  padding:clamp(100px,14vh,150px) clamp(18px,3.4vw,40px) clamp(76px,10vh,120px)
          clamp(74px,8.6vw,132px);
  max-width:1400px; margin:0 auto;
}
/* La alternancia con `order` y no con `direction:rtl`: el texto en árabe
   invertido rompe la puntuación y los signos de euro. */
.anat--vuelta .anat__pieza{ order:2 }

/* LA PIEZA. Todo lo que se mueve sale de `--t`, que es la posición dentro del
   tramo, así que se mueve MIENTRAS bajas y no una sola vez. Se desplaza menos
   que el texto: eso es el paralaje. */
.anat__pieza{
  margin:0;
  display:grid; place-items:center;
  height:100%;
  transform:
    translate3d(0, calc((0.5 - var(--t, 0)) * 10vh), 0)
    rotate(calc((var(--t, 0) - 0.5) * 2deg))
    scale(calc(0.955 + var(--t, 0) * 0.07));
  will-change:transform;
}
/* Una segunda capa solo para el balanceo lento, que se compone con el scrub
   sin pelearse con él: dos transformaciones, dos elementos. */
.anat__flota{
  display:block;
  animation:flota 9s ease-in-out infinite;
}
@keyframes flota{
  0%,100% { transform:translate3d(0,-5px,0) }
  50%     { transform:translate3d(0, 5px,0) }
}
/* ⚠️ EL CHARCO DE LUZ. Sin esto los recortes se ven «como pegotes», que fue
   exactamente la palabra de Natxo, y tenía razón por dos motivos distintos.

   El primero era el recorte: el alfa salía BINARIO —borde de tijera, ni una
   brizna de pelo suave— porque la receta usaba `post_process_mask=True`, que
   endurece la máscara. Eso se arregló rehaciendo los diez con alpha matting.

   El segundo es éste: un objeto recortado y puesto sobre negro absoluto no
   está en ningún sitio. Le falta el espacio. Aquí hay un charco de luz detrás
   —tenue, y que crece cuando la pieza pasa por el centro— y la pieza proyecta
   su sombra dentro de él. Deja de estar pegada encima del negro y pasa a
   estar DELANTE de algo.

   No rompe la regla 3 del sistema: el resplandor no está en la interfaz, está
   en la escena, igual que el neón. */
.anat__pieza::before{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(
    64% 40% at 50% 62%,
    rgba(255,240,232, calc(.13 + var(--vivo, 0) * .10)) 0%,
    rgba(255,146,112, calc(.06 + var(--vivo, 0) * .06)) 42%,
    rgba(0,0,0,0) 76%);
  pointer-events:none;
}
.anat__pieza{ position:relative }

.anat__pieza img{
  display:block;
  position:relative;
  max-height:min(60svh, 540px);
  max-width:100%;
  width:auto;
  /* El color como acontecimiento: gris en los extremos del tramo, vivo en el
     centro. Es la licencia que su sistema ya se tomaba con las fotos.
     La sombra va en el mismo `filter` porque `drop-shadow` sigue el contorno
     del alfa y no la caja: es lo único que da una sombra con la forma del
     pelo en vez de un rectángulo. */
  filter:saturate(var(--vivo, 0)) brightness(calc(.74 + var(--vivo, 0) * .26))
         drop-shadow(0 22px 26px rgba(0,0,0,.72))
         drop-shadow(0 4px 9px rgba(0,0,0,.5));
  opacity:calc(.55 + var(--vivo, 0) * .45);
  /* ⚠️ Y LO QUE MÁS SE NOTABA: la foto se acababa en un CORTE RECTO. Por bien
     recortado que esté el pelo, si abajo aparece un trozo de cuello plano con
     el borde de la fotografía, el ojo lee «recorte pegado» en medio segundo.
     Con esto la pieza se disuelve en la oscuridad por abajo, que además es la
     idea de la página entera: el trabajo sale del negro y vuelve al negro. */
  -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 7%, #000 70%, rgba(0,0,0,.5) 87%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 7%, #000 70%, rgba(0,0,0,.5) 87%, rgba(0,0,0,0) 100%);
}

/* EL TEXTO. Se desplaza al revés que la pieza y un poco más: el cruce es lo
   que hace que la pantalla parezca tener profundidad. */
.anat__lee{
  max-width:32rem;
  transform:translate3d(0, calc((var(--t, 0) - 0.5) * 5vh), 0);
  will-change:transform;
}
.anat__ep{
  margin:0 0 18px; padding-left:14px;
  border-left:1px solid rgba(255,36,8,.65);
  font-size:11px; letter-spacing:var(--tr-micro); text-transform:uppercase;
  color:var(--ceniza);
}
.anat__h{
  margin:0;
  font-size:clamp(24px, 3.4vw, 40px); font-weight:600;
  text-transform:uppercase; letter-spacing:var(--tr-titulo); line-height:1.16;
}
.anat__d{ margin-top:22px }

/* ── LA ENTRADA ESCALONADA ───────────────────────────────────────────────
   El párrafo y el titular ya llegan palabra a palabra con `revelar.js`. Lo que
   faltaba era todo lo demás: el rótulo, las dos casillas de la ficha y la nota
   estaban simplemente puestas. Ahora llegan detrás del titular, una tras otra.

   Los retardos van en el estado `.es-dentro` y no en el de partida: así la
   entrada se escalona y, si el bloque vuelve a salir, no hay nada que deshacer.
   Entre 60 y 80 ms, que es la banda en la que se nota sin hacerse lento. */
.anat__ep,
.anat__ficha > div,
.anat__nota{
  opacity:0;
  transform:translateY(9px);
  transition:opacity .42s cubic-bezier(.23,1,.32,1),
             transform .42s cubic-bezier(.23,1,.32,1);
}
.anat.es-dentro .anat__ep,
.anat.es-dentro .anat__ficha > div,
.anat.es-dentro .anat__nota{ opacity:1; transform:none }
.anat.es-dentro .anat__ep{ transition-delay:40ms }
.anat.es-dentro .anat__ficha > div:first-child{ transition-delay:340ms }
.anat.es-dentro .anat__ficha > div + div{ transition-delay:410ms }
.anat.es-dentro .anat__nota{ transition-delay:480ms }

/* La ficha: filetes de 1px, ninguna caja con fondo. Regla 6. */
.anat__ficha{
  display:flex; margin:30px 0 0;
  border-top:var(--borde); border-bottom:var(--borde);
  width:fit-content;
}
.anat__ficha > div{ padding:15px 30px 16px }
.anat__ficha > div + div{ border-left:var(--filete) }
.anat__ficha dt{
  margin:0; font-size:11px; letter-spacing:var(--tr-micro);
  text-transform:uppercase; color:var(--ceniza);
}
.anat__ficha dd{
  margin:10px 0 0; font-size:22px; font-weight:500;
  letter-spacing:var(--tr-titulo); font-variant-numeric:tabular-nums;
}
/* El de 160 € es la cumbre del recorrido y lo único que se pinta del color
   del tubo. Un solo acento en toda la página. */
.anat--cumbre .anat__ficha dd{ color:#ff5a3c }

.anat__nota{
  margin:24px 0 0; max-width:36ch;
  font-size:13px; line-height:1.8; letter-spacing:var(--tr-lectura);
  color:var(--ceniza);
}

/* ── CIERRE ────────────────────────────────────────────────────────────── */

.anat-cierre{ padding-left:clamp(74px,8.6vw,132px) }

@media (prefers-reduced-motion: reduce){
  .anat-baja::after,
  .anat__flota,
  .anat-obra img{ animation:none }
  .anat__pieza,
  .anat__lee,
  .anat-obra{ transform:none }
  /* Movimiento reducido no es «sin animación»: se quita el desplazamiento y se
     deja la opacidad, que es lo que explica que algo acaba de llegar. */
  .anat__ep,
  .anat__ficha > div,
  .anat__nota{ opacity:1; transform:none; transition:opacity .3s ease }
}

/* ── MÓVIL ─────────────────────────────────────────────────────────────── */

@media (max-width: 860px){
  /* Las etiquetas de las horas se quitan: en 390px de ancho se comían el
     sangrado entero. El tubo se queda, que es lo que se ve. */
  .tubo{ left:12px }
  .tubo__horas b{ display:none }

  /* ⚠️ EN EL MÓVIL NO SE CLAVA NADA, y es una decisión, no un recorte.
     Con el bloque clavado a 100svh no cabían la foto, seis líneas de texto y
     la ficha: el párrafo se cortaba por arriba y la ficha se metía debajo de
     la barra de aviso, que en 390px de ancho ocupa tres líneas. Medido en
     captura a 391×844.

     El movimiento NO se pierde: `--t` se calcula del rectángulo de la sección,
     así que el paralaje y el encendido de la foto siguen funcionando igual
     mientras el tramo cruza la pantalla. Lo único que desaparece es el pin. */
  .anat{ height:auto }
  .anat__pin{
    position:static; height:auto;
    grid-template-columns:1fr;
    gap:26px;
    padding:clamp(70px,10vh,110px) 20px clamp(70px,10vh,110px) 40px;
  }
  .anat--vuelta .anat__pieza{ order:0 }
  .anat__lee{ max-width:100% }
  .anat__pieza{
    height:auto;
    transform:translate3d(0, calc((0.5 - var(--t, 0)) * 5vh), 0)
              scale(calc(0.97 + var(--t, 0) * 0.05));
  }
  .anat__pieza img{ max-height:42svh }
  .anat__lee{ transform:translate3d(0, calc((var(--t, 0) - 0.5) * 2.5vh), 0) }
  .anat__ficha{ width:100% }
  .anat__ficha > div{ flex:1; padding:13px 18px 14px }
  .anat__ficha dd{ font-size:19px }

  .anat-portada{ padding-left:40px; padding-right:20px }
  .anat-cierre{ padding-left:40px }
}