/* Alejandro Luna — estilos
   Referencia: daddyyankee.com/es, más simple. Letra condensada gigante (Anton) y texto en
   Schibsted Grotesk. Colores del mundo del piano: negro, café, caoba y blanco hueso, sobre
   papel con fibra fina. Entre bloques de color, un borde de papel rasgado. */

/* Letras servidas desde el sitio y no desde Google Fonts: ningún tercero recibe a quien visita y cargan
   antes. Solo los caracteres latinos (los del español). */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url(fuentes/anton.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fuentes/schibsted-grotesk.woff2) format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(fuentes/schibsted-grotesk-italica.woff2) format('woff2'); }

:root {
  --hueso: #EEE7DB;
  --papel: #F8F4EC;
  --tinta: #24180F;
  --cafe: #3E2A1E;
  --negro: #100D0B;
  --caoba: #6E2E17;
  --cafe-medio: #5A4130;
  --cafe-claro: #D9B79B;
  --suave-claro: rgba(36, 24, 15, 0.72);
  --suave-oscuro: rgba(238, 231, 219, 0.74);
  --linea-oscuro: rgba(238, 231, 219, 0.16);

  --titular: 'Anton', 'Arial Narrow', sans-serif;
  --texto: 'Schibsted Grotesk', 'Segoe UI', Arial, sans-serif;

  --margen: clamp(16px, 3.4vw, 48px);
  --cabecera: 64px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --curva-viaje: cubic-bezier(0.76, 0, 0.24, 1);
  --rasgado: clamp(18px, 2.6vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--cabecera); scrollbar-color: var(--cafe-medio) var(--hueso); }
/* Lenis (sitio.js): mientras desliza, la rueda sobre un video o el reproductor sigue moviendo la página */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
::selection { background: var(--caoba); color: var(--hueso); }
input, textarea { caret-color: var(--cafe-claro); }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.envoltura { width: 100%; margin: 0 auto; padding: 0 var(--margen); }

/* Papel: fibra fina fotografiada en gris neutro, fundida con el color de cada sección. Sobre hueso va
   ya fundida en la imagen (papel-hueso.jpg = papel.jpg en «soft-light» sobre #EEE7DB): fundida en el
   navegador, el borde de una sección que empieza entre dos píxeles sale como una línea gris */
.textura {
  background-image: url(assets/papel-hueso.jpg);
  background-size: 320px 320px;
}
/* En los fondos oscuros la misma fibra, más tenue: sobre negro y café se notaría como suciedad */
.textura[data-tono="oscuro"] { background-image: url(assets/papel-oscuro.jpg); background-blend-mode: soft-light; }
/* La portada: la fibra bien visible (mismo tono, sombras cálidas, la fibra fina más marcada que las
   manchas), para que se note el papel que corre detrás de la escena fija durante la pausa */
.portada.textura { background-image: url(assets/papel-portada.jpg); }

.titulo {
  font-family: var(--titular);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.005em;
}

/* Borde de papel rasgado: la sección sube sobre la anterior con su propio color y su papel */
.rasgado { position: relative; }
.rasgado::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--rasgado) * -1 + 1px);
  height: var(--rasgado);
  background: inherit;
  background-blend-mode: inherit;
  -webkit-mask: url(assets/rasgado.svg) 0 0 / 100% 100% no-repeat;
  mask: url(assets/rasgado.svg) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
  z-index: 1;
}
.rasgado:nth-of-type(even)::before, .rasgado:nth-of-type(even)::after { transform: scaleX(-1); }

/* ---------- Botones: píldora plana; se estira, la flecha sale y vuelve, se hunde al apretar ---------- */
.boton {
  --fondo-boton: var(--tinta);
  --letra-boton: var(--hueso);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px 12px 26px;
  border-radius: 999px;
  background: var(--fondo-boton);
  color: var(--letra-boton);
  font-family: var(--texto);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: padding 420ms var(--curva), transform 160ms ease, background-color 300ms ease, color 300ms ease;
  -webkit-tap-highlight-color: transparent;
}
.boton--claro { --fondo-boton: var(--hueso); --letra-boton: var(--tinta); }
.boton--chico { min-height: 40px; padding: 9px 18px 9px 20px; font-size: 14px; }
.flecha { position: relative; display: inline-block; width: 15px; height: 12px; overflow: hidden; flex: none; }
.flecha::before, .flecha::after {
  content: '';
  position: absolute; inset: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cpath d='M0 5.1h11.4L7.6 1.3 8.9 0 15 6l-6.1 6-1.3-1.3 3.8-3.8H0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 12'%3E%3Cpath d='M0 5.1h11.4L7.6 1.3 8.9 0 15 6l-6.1 6-1.3-1.3 3.8-3.8H0z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 420ms var(--curva);
}
.flecha::after { transform: translateX(-140%); }
.boton:active { transform: scale(0.96); }
@media (hover: hover) {
  .boton:hover { padding-right: 32px; padding-left: 30px; background-color: var(--caoba); color: var(--hueso); }
  .boton--claro:hover { background-color: var(--papel); color: var(--tinta); }
  .boton:hover .flecha::before { transform: translateX(140%); }
  .boton:hover .flecha::after { transform: translateX(0); }
}

/* ---------- Cabecera ---------- */
.cabecera {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--cabecera);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--margen);
  color: var(--tinta);
  background-color: var(--fondo-cabecera, transparent);
  transition: color 350ms ease, background-color 350ms ease;
}
.cabecera.con-fondo { background-image: url(assets/papel-hueso.jpg); background-size: 320px 320px; }
.cabecera.con-fondo[data-tono="oscuro"] { background-image: url(assets/papel-oscuro.jpg); background-blend-mode: soft-light; }
.cabecera[data-tono="oscuro"] { color: var(--hueso); }
.cabecera[data-tono="oscuro"] .boton { --fondo-boton: var(--hueso); --letra-boton: var(--tinta); }
.cabecera__lado { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
.cabecera__lado--der { justify-content: flex-end; }
.cabecera__lado a:not(.boton) { position: relative; padding: 6px 0; }
.cabecera__lado a:not(.boton)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 420ms var(--curva);
}
@media (hover: hover) {
  .cabecera__lado a:not(.boton):hover::after { transform: scaleX(1); transform-origin: left; }
}
.cabecera__nombre {
  display: inline-flex; align-items: center; min-height: 44px; justify-self: center;
  font-family: var(--titular);
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
.cabecera__abrir { display: none; justify-self: end; font-size: 15px; font-weight: 600; min-height: 44px; padding: 0 2px; }

/* Menú a pantalla completa (teléfono) */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--negro) url(assets/papel-oscuro.jpg) 0 0 / 320px 320px; background-blend-mode: soft-light;
  color: var(--hueso);
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px var(--margen) 40px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 650ms var(--curva-viaje), visibility 0s linear 650ms;
}
.menu.abierto { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 650ms var(--curva-viaje), visibility 0s; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  font-family: var(--titular); text-transform: uppercase;
  font-size: clamp(52px, 15vw, 96px); line-height: 1.02;
  transform: translateY(40%); opacity: 0;
  transition: transform 700ms var(--curva), opacity 500ms ease;
}
.menu.abierto nav a { transform: none; opacity: 1; }
.menu.abierto nav a:nth-child(2) { transition-delay: 60ms; }
.menu.abierto nav a:nth-child(3) { transition-delay: 120ms; }
.menu.abierto nav a:nth-child(4) { transition-delay: 180ms; }
.menu.abierto nav a:nth-child(5) { transition-delay: 240ms; }
.menu__cerrar { position: absolute; top: 10px; right: var(--margen); min-height: 44px; font-weight: 600; font-size: 15px; }

/* ---------- Portada ----------
   La foto entra a pantalla completa; al bajar se achica hasta un marco de papel con borde caoba,
   cambia a su retrato con una mancha de tinta y el nombre gigante se acomoda a los lados.
   sitio.js calcula la composición final y mueve todo con el scroll (--w, --h, --x, --y, --m...). */
/* Alto: la pantalla de la escena + 1,75 pantallas de efecto (sitio.js) + 1,36 de pausa con los capítulos
   a la vista y el papel corriendo detrás + la pantalla en que «Escribe canciones…» sube encima (en el
   teléfono, 1,45 de efecto y 1,09 de pausa). La pausa: desde que entran los capítulos hasta que asoma
   «Escribe canciones…» hay un 30 % menos de scroll que con 2 pantallas (Renato, 29-oct) */
.portada { position: relative; z-index: 0; height: 511svh; background-color: var(--hueso); }
.portada__escena { position: sticky; top: 0; height: 100svh; min-height: 480px; overflow: hidden; }
.portada__nombre {
  position: absolute; left: 0; top: 0; z-index: 1;
  display: flex; align-items: center; gap: var(--separa, 24px);
  font-family: var(--titular); font-weight: 400; text-transform: uppercase;
  font-size: var(--f, 120px); line-height: 0.84; letter-spacing: -0.005em;
  color: var(--caoba);
  white-space: nowrap;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  will-change: transform;
}
.portada__palabra { display: block; padding-top: 0.08em; }
.portada__hueco { flex: none; width: var(--w1, 240px); height: 1px; }
.portada__marco {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: var(--w, 100%); height: var(--h, 100%);
  transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
  background: var(--papel);
  box-shadow: 0 0 0 var(--borde, 0px) var(--caoba);
  overflow: hidden;
}
.portada__foto {
  position: absolute; left: var(--m, 0px); top: var(--m, 0px);
  width: calc(100% - 2 * var(--m, 0px)); height: calc(100% - 2 * var(--m, 0px));
  max-width: none;
  object-fit: cover;
}
.portada__foto--grande { object-position: 50% 14%; transform: scale(1.1); transition: transform 2200ms var(--curva); }
.portada.lista .portada__foto--grande { transform: scale(1); }
/* Fundido oscuro arriba y abajo mientras la foto ocupa la pantalla (para leer la cabecera y el pie) */
.portada__marco::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(16, 13, 11, 0.5), rgba(16, 13, 11, 0) 22%, rgba(16, 13, 11, 0) 62%, rgba(16, 13, 11, 0.62));
  opacity: var(--sobre, 1);
}
.portada__foto--retrato {
  object-position: 50% 16%;
  -webkit-mask-image: url(assets/mancha.svg);
  mask-image: url(assets/mancha.svg);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--ms, 0px) var(--ms, 0px); mask-size: var(--ms, 0px) var(--ms, 0px);
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%); mask-position: var(--mx, 50%) var(--my, 50%);
}
.portada__foto--retrato.entera { -webkit-mask-image: none; mask-image: none; }
.portada__sobre {
  position: absolute; left: var(--margen); right: var(--margen); bottom: 26px; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  color: var(--hueso);
  opacity: var(--sobre, 1);
  pointer-events: var(--sobre-puntero, auto);
}
.portada__sobre p { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.35; max-width: 26ch; font-weight: 500; }
.portada__bajar { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 600; }
.portada__bajar svg { width: 16px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; animation: bajar 2.4s var(--curva) infinite; }
@keyframes bajar { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
.js .portada__sobre > * { translate: 0 18px; opacity: 0; transition: translate 1000ms var(--curva) 500ms, opacity 900ms ease 500ms; }
.portada.lista .portada__sobre > * { translate: 0 0; opacity: 1; }
.portada.lista .portada__sobre > :last-child { transition-delay: 650ms; }

/* Capítulos bajo la foto, como en la referencia: entran al terminar el efecto */
.portada__capitulos {
  position: absolute; left: 0; top: 0; z-index: 2;
  transform: translate3d(var(--cx, 0px), var(--cy, 0px), 0);
  display: grid; gap: 2px;
}
.portada__capitulos li { overflow: hidden; }
.portada__capitulos a { display: inline-flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.portada__cap {
  font-family: var(--titular); text-transform: uppercase;
  font-size: clamp(26px, 2.5vw, 40px); line-height: 1.02; color: var(--tinta);
  transition: color 300ms ease;
}
.portada__capitulos em { font-size: 14px; color: var(--suave-claro); white-space: nowrap; }
.js .portada__capitulos a { transform: translateY(110%); transition: transform 900ms var(--curva); }
.portada__capitulos.visibles a { transform: none; }
.portada__capitulos.visibles li:nth-child(2) a { transition-delay: 90ms; }
.portada__capitulos.visibles li:nth-child(3) a { transition-delay: 180ms; }
@media (hover: hover) { .portada__capitulos a:hover .portada__cap { color: var(--caoba); } }

/* Sin JS: composición quieta y completa */
html:not(.js) .portada { height: auto; }
html:not(.js) .portada__escena { position: relative; height: auto; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 110px var(--margen) 60px; }
html:not(.js) .portada__marco { position: relative; width: 260px; height: 325px; transform: none; box-shadow: 0 0 0 2px var(--caoba); }
html:not(.js) .portada__foto { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
html:not(.js) .portada__foto--grande, html:not(.js) .portada__sobre, html:not(.js) .portada__hueco { display: none; }
html:not(.js) .portada__foto--retrato { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .portada__nombre { position: static; order: -1; font-size: clamp(56px, 12vw, 120px); flex-wrap: wrap; justify-content: center; }
html:not(.js) .portada__capitulos { position: static; transform: none; }

/* Líneas de polvo (intro e historia): líneas casi rectas de granos finos y cálidos, como una línea de
   tiza, que se cortan antes del contenido. El cursor (o el dedo) aparta el polvo y el polvo vuelve.
   sitio.js las pinta en el canvas; sin JS no hay nada. */
.polvo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- Un poco de él: dos líneas de polvo horizontales que llegan desde los lados ----------
   Transición desde la portada: la sección sube sobre la portada quieta mientras la portada se hunde un
   poco (sitio.js). Sin división: arriba, el mismo papel se funde con la portada, sin borde ni línea. */
.intro { position: relative; background-color: var(--hueso); padding: clamp(56px, 8vw, 120px) 0 clamp(64px, 9vw, 140px); }
.js .intro { margin-top: -100svh; }
.js .intro::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px;
  background: inherit;
  background-position: 0 72px; /* la fibra sigue la de la sección, sin costura */
  -webkit-mask-image: linear-gradient(transparent, #000);
  mask-image: linear-gradient(transparent, #000);
  pointer-events: none;
}
.intro__cuerpo { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; gap: 24px; }
.intro__titulo {
  font-family: var(--titular); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 3.8vw, 60px); line-height: 1.08; max-width: 18ch;
}
.intro__cuerpo p { font-size: 18px; max-width: 58ch; }

/* ---------- Historia: número fijo a la izquierda que rueda, texto que pasa a la derecha ---------- */
.historia { position: relative; background-color: var(--hueso); padding-bottom: clamp(80px, 12vw, 180px); }
.historia > .envoltura { position: relative; z-index: 1; max-width: 1180px; }
/* Fondo: dos líneas de polvo que quedan en la pantalla mientras se lee la historia */
.historia__fondo { position: absolute; inset: 0; pointer-events: none; }
.historia__fondo-escena { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.historia__titulo {
  font-family: var(--titular); font-weight: 400; text-transform: uppercase;
  font-size: clamp(34px, 3.4vw, 52px); line-height: 1; text-align: center;
  padding-bottom: clamp(16px, 3vw, 40px);
}
.historia__grilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); gap: clamp(32px, 5vw, 72px); }
.historia__fijo {
  position: sticky;
  /* centrado en la pantalla sin moverlo de su lugar al llegar */
  top: calc(var(--cabecera) / 2 + 50svh - min(17vw, 38svh, 300px) / 2 - 36px);
  align-self: start;
  height: max-content;
  display: grid;
  justify-items: start;
  gap: 6px;
  color: var(--caoba);
}
.historia__capitulo { font-style: italic; font-size: 17px; color: var(--tinta); transition: opacity 300ms ease; }
.historia__unidad { font-size: 18px; font-weight: 600; color: var(--tinta); min-height: 1.5em; transition: opacity 300ms ease; }
.historia__capitulo.cambia, .historia__unidad.cambia { opacity: 0; }

.contador {
  display: flex;
  font-family: var(--titular);
  font-size: min(17vw, 38svh, 300px);
  line-height: 1;
  height: 1em;
  overflow: hidden;
}
.cifra { display: block; height: 1em; overflow: hidden; width: var(--ancho, 0.55em); transition: width 900ms var(--curva-viaje), opacity 500ms ease; }
.cifra.vacia { width: 0; opacity: 0; }
.cifra__tira { display: block; transform: translateY(calc(var(--d, 0) * -1em)); transition: transform 1000ms var(--curva-viaje); transition-delay: var(--retraso, 0ms); }
.cifra__tira span { display: block; height: 1em; text-align: center; }

.pasos { display: grid; }
/* Cada paso empieza con su título; debajo del párrafo baja el hilo, que lleva a la foto y sigue
   hasta el año siguiente (como la línea de tiempo de la referencia, pero con la foto pegada al texto) */
.paso {
  position: relative;
  min-height: 46svh;
  display: flex; flex-direction: column;
  padding-bottom: 18px;
}
.paso h3 {
  font-family: var(--titular); font-weight: 400; text-transform: uppercase;
  font-size: clamp(30px, 2.8vw, 44px); line-height: 1.04;
  margin-bottom: 14px;
}
.js .paso > h3, .js .paso > p { opacity: 0.22; transform: translateY(18px); transition: opacity 700ms ease, transform 900ms var(--curva); }
.js .paso.activo > h3, .js .paso.activo > p { opacity: 1; transform: none; }
.js .paso.activo > p { transition-delay: 80ms; }
.hilo { display: block; flex: none; width: 1px; height: 30px; margin-top: 16px; background: var(--caoba); transform-origin: 50% 0; }
.copia + .hilo { margin-top: 0; }
.hilo--resto { flex: 1 0 44px; }
/* Con JS el hilo se dibuja siguiendo la lectura (sitio.js) */
.js .hilo { transform: scaleY(0); }

/* Copia: la foto impresa, recta, como las de la referencia: borde caoba de 3 px, margen de papel claro
   y la foto. El borde es el mismo hilo de la historia: llega arriba, sobre el canto de la foto, se abre
   en dos, la rodea y sigue abajo (sitio.js lo traza a la medida de cada foto). En fondos oscuros, borde
   hueso y margen negro. Dentro, la foto va un poco más lenta que la página. */
.copia {
  --marco: var(--caoba);
  --grosor: 3px;
  --aire: 10px;
  position: relative; margin: 0;
  padding: calc(var(--grosor) + var(--aire));
  box-shadow: inset 0 0 0 var(--grosor) var(--marco);
}
.copia::before {
  content: ''; position: absolute; inset: var(--grosor);
  background: var(--papel) url(assets/papel.jpg) 0 0 / 320px 320px;
  background-blend-mode: soft-light;
}
.musica .copia::before, .pantalla__copia::before { background-color: var(--negro); background-image: url(assets/papel-oscuro.jpg); }
.js .copia { box-shadow: none; }
.copia__ventana { position: relative; overflow: hidden; background: var(--cafe); }
.copia__ventana img { display: block; width: 100%; height: auto; }
.copia__ventana img[data-paralaje] { transform: translate3d(0, var(--py, 0%), 0) scale(1.06); will-change: transform; }
.copia__marco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.copia__marco path { fill: none; stroke: var(--marco); stroke-width: var(--grosor); }
/* Entrada: el borde rodea la foto mientras el papel y la foto se descubren. En la historia no: las
   fotos están desde el principio, quietas (Renato) */
.js .copia__marco path { stroke-dasharray: var(--largo) var(--largo); stroke-dashoffset: var(--largo); transition: stroke-dashoffset 1100ms var(--curva-viaje); }
.js .copia.dentro .copia__marco path, .js .paso .copia__marco path { stroke-dashoffset: 0; }
.js .copia::before, .js .copia__ventana { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--curva-viaje) 120ms; }
.js .copia.dentro::before, .js .copia.dentro .copia__ventana { clip-path: inset(0); }
.js .copia.dentro .copia__ventana { transition-delay: 220ms; }
.js .paso .copia::before, .js .paso .copia__ventana { clip-path: none; }
.js .paso .copia__marco path, .js .paso .copia::before, .js .paso .copia__ventana { transition: none; }
/* En la historia, la foto es chica (como en la referencia): cuelga del hilo con su canto izquierdo
   en la línea del texto, y el marco sobresale un poco hacia la izquierda */
.paso .copia { align-self: flex-start; width: min(300px, 100%); margin-left: calc(-1 * (var(--grosor) + var(--aire))); }

/* ---------- Frase grande ---------- */
.frase { background-color: var(--negro); color: var(--hueso); padding: clamp(90px, 13vw, 200px) 0; overflow-x: clip; }
.frase__texto {
  position: relative; z-index: 1;
  display: grid;
  font-family: var(--titular); text-transform: uppercase;
  font-size: clamp(56px, min(10.5vw, 16svh), 170px); line-height: 0.9; text-align: center;
}
.frase__linea { display: block; overflow: hidden; padding: 0.13em 0.05em 0.02em; margin-top: -0.12em; }
.frase__linea > span { display: block; white-space: nowrap; }
/* 140 %: con menos, el acento de «MÚSICA» (sobre la caja de la línea) se asomaba antes de subir */
.js .frase__linea > span { transform: translateY(140%); transition: transform 1100ms var(--curva); }
.js .frase.dentro .frase__linea > span { transform: none; }
.js .frase.dentro .frase__linea:nth-child(2) > span { transition-delay: 90ms; }
.js .frase.dentro .frase__linea:nth-child(3) > span { transition-delay: 180ms; }
.js .frase.dentro .frase__linea:nth-child(4) > span { transition-delay: 270ms; }
.js .frase.dentro .frase__linea:nth-child(5) > span { transition-delay: 360ms; }
/* Al pasar, cada línea se corre un poco, en sentidos alternados. La mueve el navegador atada al scroll:
   movida cuadro a cuadro desde sitio.js, trababa la rueda justo antes de La Dolce Vita. Se mueve la
   línea y no su texto, que ya tiene la entrada: con las dos en el mismo elemento, no la mueve la tarjeta
   de video y vuelve a trabar */
@supports (animation-timeline: view()) {
  .frase__linea { animation: deriva linear both; animation-timeline: view(); }
  .frase__linea[data-deriva-x="1"] { --lado: 1; }
  .frase__linea[data-deriva-x="-1"] { --lado: -1; }
}
@keyframes deriva {
  from { translate: calc(var(--lado, 0) * min(80px, 6vw) * 0.55) 0; }
  to { translate: calc(var(--lado, 0) * min(80px, 6vw) * -0.55) 0; }
}

/* ---------- Foto a pantalla completa: se abre al llegar y se aleja apenas mientras pasa ---------- */
/* Monta 1 px sobre la frase: con dpr 1,5 el borde cae entre dos píxeles y se veía una línea clara */
.pantalla { position: relative; height: 100svh; min-height: 420px; margin-top: -1px; background-color: var(--negro); }
.pantalla__foto {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: inset(calc((1 - var(--abre, 1)) * 9%) calc((1 - var(--abre, 1)) * 7%));
}
.pantalla__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; transform: scale(var(--escala, 1.08)); will-change: transform; }
.pantalla__foto::after { content: ''; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(rgba(16, 13, 11, 0), rgba(16, 13, 11, 0.7)); }
.pantalla__pie { position: absolute; left: var(--margen); bottom: calc(var(--rasgado) + 22px); z-index: 2; max-width: 34ch; color: var(--hueso); font-size: 15px; font-weight: 500; line-height: 1.4; }
.pantalla__copia { --marco: var(--hueso); position: absolute; right: calc(var(--margen) + 3vw); bottom: calc(-1 * clamp(80px, 11vw, 170px)); z-index: 3; width: clamp(180px, 21vw, 320px); }

/* ---------- Música ---------- */
.musica { background-color: var(--cafe); color: var(--hueso); padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 11vw, 160px); overflow-x: clip; }
.musica__generos {
  display: flex; gap: 0.35em;
  font-family: var(--titular); text-transform: uppercase;
  font-size: clamp(56px, 8vw, 140px); line-height: 1;
  white-space: nowrap;
  color: var(--cafe-medio);
  padding-bottom: 24px;
  transform: translateX(var(--x, 0px));
  will-change: transform;
}
.musica__cabeza { display: flex; align-items: end; justify-content: space-between; gap: 20px 24px; flex-wrap: wrap; padding-bottom: clamp(28px, 4vw, 48px); }
.musica__cabeza .titulo { color: var(--hueso); }
.musica .copia { --marco: var(--hueso); }
.musica__grilla { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: start; }
.musica__texto { display: grid; gap: 24px; align-content: start; }
.musica__texto p { max-width: 46ch; font-size: 18px; color: var(--suave-oscuro); }
.reproductor { background: var(--negro); min-height: 352px; }
.reproductor iframe { width: 100%; height: 352px; border: 0; }
/* La tapa: el reproductor de Spotify se carga al tocarla (sitio.js), en papel negro y con el mismo
   botón de los videos. Sin JS es un enlace a su perfil. */
.reproductor__tapa {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 352px; padding: 32px 24px 56px;
  background: var(--negro) url(assets/papel-oscuro.jpg) 0 0 / 320px 320px; background-blend-mode: soft-light;
  color: var(--hueso); text-align: center;
}
.reproductor__texto { font-family: var(--titular); text-transform: uppercase; font-size: 30px; line-height: 1; }
.reproductor__nota { position: absolute; left: 24px; right: 24px; bottom: 20px; font-size: 14px; line-height: 1.4; color: var(--suave-oscuro); }
@media (hover: hover) { .reproductor__tapa:hover .reproductor__play { transform: scale(1.1); } }

/* ---------- Videos ---------- */
.videos { background-color: var(--hueso); padding: clamp(70px, 9vw, 140px) 0 clamp(80px, 11vw, 160px); }
.videos__cabeza { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: clamp(28px, 4vw, 56px); }
.videos__grilla { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.2vw, 32px); align-items: start; }
.video figcaption { padding-top: 12px; font-weight: 600; line-height: 1.35; }
.video figcaption span { display: block; padding-top: 2px; font-weight: 400; color: var(--suave-claro); }
.video__marco { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--negro); }
.video__marco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.16); transition: transform 900ms var(--curva); }
/* Miniaturas que traen franjas negras propias: se acercan hasta taparlas */
.video__marco[data-yt="5DeQYcnn534"] img { transform: scale(1.34); }
.video__marco[data-yt="VGD3l3yrRl4"] img { transform: scale(1.27); transform-origin: 0 50%; }
.video__marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play, .reproductor__play {
  width: 64px; height: 64px;
  border-radius: 50%; background: var(--hueso);
  transition: transform 450ms var(--curva);
}
.video__play { position: absolute; left: 50%; top: 50%; margin: -32px 0 0 -32px; }
.reproductor__play { position: relative; flex: none; }
.video__play::after, .reproductor__play::after {
  content: ''; position: absolute; left: 25px; top: 21px; width: 18px; height: 22px;
  background: var(--tinta); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
@media (hover: hover) {
  .video__marco:hover img { transform: scale(1.2); }
  .video__marco[data-yt="5DeQYcnn534"]:hover img { transform: scale(1.38); }
  .video__marco[data-yt="VGD3l3yrRl4"]:hover img { transform: scale(1.31); }
  .video__marco:hover .video__play { transform: scale(1.1); }
}

/* ---------- Clases ---------- */
.clases { background-color: var(--negro); color: var(--hueso); padding: clamp(70px, 9vw, 140px) 0 clamp(80px, 11vw, 160px); }
.clases__cabeza { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(32px, 6vw, 96px); align-items: end; padding-bottom: clamp(32px, 5vw, 72px); }
.clases__cabeza p { max-width: 46ch; color: var(--suave-oscuro); }
.clases__cabeza strong { color: var(--hueso); font-weight: 600; }
.clases__lista li {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px clamp(32px, 6vw, 96px); align-items: center;
  padding: 16px 0;
}
/* La línea entre ramos se dibuja de izquierda a derecha al entrar */
.clases__lista li::before, .clases__pie::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--linea-oscuro); transform-origin: left;
}
.js .clases__lista li::before { transform: scaleX(0); transition: transform 1300ms var(--curva-viaje); }
.js .clases__lista li.dentro::before { transform: scaleX(1); }
.clases__lista h3 {
  font-family: var(--titular); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 4vw, 60px); line-height: 1.02;
  transition: transform 500ms var(--curva), color 300ms ease;
}
.clases__lista p { color: var(--suave-oscuro); max-width: 40ch; }
@media (hover: hover) {
  .clases__lista li:hover h3 { transform: translateX(14px); color: var(--cafe-claro); }
}
.clases__pie { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: clamp(28px, 4vw, 48px); }
.clases__pie p { font-weight: 600; }

/* ---------- Testimonios ---------- */
.testimonios { background-color: var(--hueso); padding: clamp(70px, 9vw, 140px) 0 clamp(80px, 11vw, 160px); }
.testimonios .envoltura { display: grid; grid-template-columns: 0.8fr 2fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
.testimonios .titulo { position: sticky; top: calc(var(--cabecera) + 32px); max-width: 9ch; }
.testimonios__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px); }
.cita { display: grid; gap: 14px; align-content: start; }
.cita blockquote { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; }
.cita figcaption { font-family: var(--titular); text-transform: uppercase; font-size: 22px; color: var(--caoba); }

/* ---------- Contacto ---------- */
.contacto { background-color: var(--cafe); color: var(--hueso); padding: clamp(70px, 9vw, 140px) 0 clamp(80px, 10vw, 150px); }
.contacto__grilla { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 7vw, 120px); align-items: start; }
.contacto__titulo {
  font-family: var(--titular); font-weight: 400; text-transform: uppercase;
  font-size: clamp(60px, 9vw, 150px); line-height: 0.92;
}
.contacto__intro { padding: 18px 0 30px; max-width: 40ch; color: var(--suave-oscuro); }
.redes { display: grid; }
.redes a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 2px solid rgba(238, 231, 219, 0.14); }
.redes span { font-family: var(--titular); text-transform: uppercase; font-size: 28px; line-height: 1; transition: transform 450ms var(--curva); }
.redes small { font-size: 15px; color: var(--suave-oscuro); text-align: right; overflow-wrap: anywhere; }
@media (hover: hover) { .redes a:hover span { transform: translateX(10px); } }
.formulario { display: grid; gap: 18px; padding-top: 8px; }
.formulario label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.formulario input, .formulario textarea {
  font: inherit; font-weight: 400; font-size: 17px; color: var(--hueso);
  background: transparent; border: 0; border-bottom: 2px solid rgba(238, 231, 219, 0.42); /* 3:1 sobre café */
  padding: 8px 0 10px; border-radius: 0; transition: border-color 300ms ease;
}
.formulario textarea { resize: vertical; min-height: 84px; }
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--hueso); }
.formulario .boton { justify-self: start; margin-top: 8px; }
.formulario__nota { font-size: 14px; line-height: 1.45; color: var(--suave-oscuro); max-width: 46ch; }
.formulario__nota a { color: var(--hueso); text-decoration: underline; text-underline-offset: 3px; }
.formulario__aviso { font-size: 15px; color: var(--suave-oscuro); min-height: 1.4em; }

/* ---------- Pie: el nombre vuelve a todo el ancho ---------- */
.pie { background-color: var(--negro); color: var(--hueso); padding: clamp(40px, 6vw, 80px) 0 28px; overflow: hidden; }
.pie__nombre {
  font-family: var(--titular); text-transform: uppercase;
  font-size: 15.2vw; line-height: 0.86; text-align: center; white-space: nowrap;
  overflow: hidden; padding-top: 0.1em;
}
.pie__nombre span { display: block; }
.js .pie__nombre span { transform: translateY(100%); transition: transform 1200ms var(--curva); }
.js .pie__nombre.dentro span { transform: none; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; padding-top: clamp(24px, 3vw, 40px); font-size: 15px; color: var(--suave-oscuro); }
.pie__fila nav { display: flex; gap: 24px; }
.pie__fila a { color: var(--hueso); min-height: 44px; display: inline-flex; align-items: center; }
/* Abajo: las páginas legales a la izquierda y el crédito a la derecha */
.pie__abajo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0 32px; padding-top: 4px; }
.pie__legal { display: flex; flex-wrap: wrap; column-gap: 24px; font-size: 13px; }
.pie__legal a { color: var(--hueso); min-height: 44px; display: inline-flex; align-items: center; }
.pie__credito { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.5em; font-size: 13px; color: var(--suave-oscuro); }
.pie__credito a { color: var(--hueso); min-height: 44px; display: inline-flex; align-items: center; }
/* En el teléfono, el correo en su propia línea (sin el punto colgando al final de la anterior) */
@media (max-width: 860px) { .pie__abajo { display: block; } .pie__punto { display: none; } .pie__credito { display: block; padding-top: 6px; } .pie__credito a { display: flex; width: max-content; } }
@media (hover: hover) { .pie__credito a:hover, .pie__legal a:hover { text-decoration: underline; text-underline-offset: 3px; } }
/* En las páginas aparte, el pie sin el nombre gigante */
.pie--simple { padding-top: clamp(28px, 4vw, 44px); }
.pie--simple .pie__fila { padding-top: 0; }

/* ---------- WhatsApp a mano en el teléfono (sitio.js) ----------
   La píldora caoba abajo a la derecha, al alcance del pulgar. Sin número en DATOS no aparece. */
.flotante {
  --fondo-boton: var(--caoba); --letra-boton: var(--hueso);
  position: fixed; right: 16px; bottom: 16px; z-index: 30;
  gap: 8px; padding: 12px 22px 12px 18px;
  opacity: 0; translate: 0 calc(100% + 24px); pointer-events: none;
  transition: opacity 300ms ease, translate 550ms var(--curva), transform 160ms ease;
}
.flotante.ver { opacity: 1; translate: 0 0; pointer-events: auto; }
.flotante__wa { width: 19px; height: 19px; flex: none; }
@media (min-width: 861px) { .flotante { display: none; } }

/* ---------- Entradas al llegar (una vez) ---------- */
.js [data-entra] { opacity: 0; transform: translateY(26px); transition: opacity 800ms ease, transform 1000ms var(--curva); transition-delay: var(--retraso, 0ms); }
.js [data-entra].dentro { opacity: 1; transform: none; }
.js .pie__nombre[data-entra] { opacity: 1; transform: none; }
/* Títulos: suben desde detrás de una línea invisible */
.js [data-revela] { clip-path: inset(0 -0.1em 100% -0.1em); transform: translateY(0.35em); transition: clip-path 1100ms var(--curva), transform 1100ms var(--curva); }
.js [data-revela].dentro { clip-path: inset(-0.3em -0.1em -0.3em -0.1em); transform: none; }

/* ---------- Teléfono ---------- */
@media (max-width: 860px) {
  :root { --cabecera: 56px; }
  body { font-size: 16.5px; }
  .cabecera { grid-template-columns: 1fr auto; }
  .cabecera__lado { display: none; }
  .cabecera__nombre { font-size: 22px; justify-self: start; }
  .cabecera__abrir { display: block; }

  .portada { height: 454svh; }
  .portada__nombre { flex-direction: column; gap: var(--separa, 10px); }
  .portada__hueco { width: 1px; height: var(--h1, 300px); }
  .portada__foto--grande { object-position: 56% 18%; }
  .portada__sobre { flex-direction: column; align-items: flex-start; gap: 14px; bottom: 22px; }
  .portada__capitulos { justify-items: center; }
  .portada__cap { font-size: 26px; }
  .portada__capitulos em { font-size: 13px; }

  .historia__grilla { grid-template-columns: 1fr; gap: 0; }
  .historia__fijo {
    top: var(--cabecera);
    z-index: 5;
    margin: 0 calc(var(--margen) * -1);
    padding: 6px var(--margen) 10px;
    background: var(--hueso) url(assets/papel-hueso.jpg) 0 0 / 320px 320px;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'cifras capitulo' 'cifras unidad';
    align-items: end;
    column-gap: 14px;
    row-gap: 0;
  }
  .contador { grid-area: cifras; font-size: 92px; }
  .historia__capitulo { grid-area: capitulo; font-size: 15px; align-self: end; }
  .historia__unidad { grid-area: unidad; font-size: 15px; align-self: start; padding-bottom: 6px; }
  .paso { min-height: 36svh; padding-bottom: 14px; }
  .paso h3 { margin-bottom: 10px; }
  .copia { --aire: 8px; }
  /* En el teléfono el marco no sobresale (tocaría el borde de la pantalla): el hilo llega a la esquina */
  .paso .copia { width: 80%; margin-left: 0; }

  .frase__texto { font-size: 12.6vw; }
  /* La foto queda como una franja apaisada; el pie va debajo, en negro, al lado de la copia */
  .pantalla { height: auto; min-height: 0; padding-bottom: calc(var(--rasgado) + 34px); }
  .pantalla__foto { position: relative; height: 74vw; }
  .pantalla__foto img { object-position: 50% 80%; }
  .pantalla__foto::after { display: none; }
  .pantalla__copia { width: 42vw; bottom: -16vw; right: var(--margen); }
  .pantalla__pie { position: static; margin: 16px var(--margen) 0; max-width: calc(100% - 42vw - 3 * var(--margen)); font-size: 15px; }
  .portada__capitulos a { padding: 6px 0; }

  .musica__grilla, .clases__cabeza, .contacto__grilla, .testimonios__grilla { grid-template-columns: 1fr; }
  .musica { padding-top: clamp(90px, 26vw, 140px); }
  .videos__grilla { grid-template-columns: 1fr; }
  .clases__lista li { grid-template-columns: 1fr; }
  .testimonios .envoltura { grid-template-columns: 1fr; }
  .testimonios .titulo { position: static; }
  .redes span { font-size: 24px; }
  .pie__fila { flex-direction: column; align-items: flex-start; }
}

/* ---------- Páginas aparte: biografía, legales y 404 ---------- */
.bio, .legal, .nf { background: var(--hueso) url(assets/papel-hueso.jpg) 0 0 / 320px 320px; }
.bio .cabecera, .legal .cabecera, .nf .cabecera { grid-template-columns: 1fr auto; --fondo-cabecera: var(--hueso); background-image: url(assets/papel-hueso.jpg); background-size: 320px 320px; }
.bio .cabecera__nombre, .legal .cabecera__nombre, .nf .cabecera__nombre { justify-self: start; }
.bio__cuerpo { max-width: 760px; margin: 0 auto; padding: calc(var(--cabecera) + clamp(40px, 6vw, 90px)) var(--margen) 120px; display: grid; gap: 20px; justify-items: start; }
.bio__nombre { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; }
.bio__oficio { font-style: italic; color: var(--suave-claro); padding-bottom: 20px; }
.bio__cuerpo h2 { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.02; padding-top: 32px; }
.bio__cuerpo h3 { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: 24px; line-height: 1.05; padding-bottom: 6px; }
.bio__datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; padding: 28px 0; width: 100%; }
.bio__datos li { display: grid; gap: 4px; }
.bio__datos strong { font-family: var(--titular); font-weight: 400; font-size: 72px; line-height: 1; color: var(--caoba); }
.bio__metodo { display: grid; gap: 28px; padding: 8px 0; }
.bio__cita { font-family: var(--titular); text-transform: uppercase; font-size: clamp(34px, 4.4vw, 58px); line-height: 0.98; padding: 40px 0 24px; color: var(--caoba); }

/* Legales: una columna de lectura, como la biografía, con los subtítulos más chicos */
.legal__cuerpo { max-width: 760px; margin: 0 auto; padding: calc(var(--cabecera) + clamp(40px, 6vw, 90px)) var(--margen) clamp(72px, 9vw, 120px); }
.legal__titulo { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 7vw, 96px); line-height: 0.95; }
.legal__fecha { padding-top: 12px; font-size: 15px; color: var(--suave-claro); }
.legal__texto { padding-top: clamp(28px, 4vw, 48px); line-height: 1.7; }
.legal__texto h2 { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; margin: clamp(36px, 5vw, 52px) 0 12px; }
.legal__texto h2:first-child { margin-top: 0; }
.legal__texto h3 { font-size: 1em; font-weight: 600; margin: 22px 0 4px; }
.legal__texto p + p, .legal__texto p + ul, .legal__texto ul + p, .legal__texto dl + p, .legal__texto p + dl { margin-top: 0.85em; }
.legal__texto ul { display: grid; gap: 0.45em; }
.legal__texto li { position: relative; padding-left: 1.3em; }
.legal__texto li::before { content: ''; position: absolute; left: 0.1em; top: 0.68em; width: 6px; height: 6px; border-radius: 50%; background: var(--caoba); }
.legal__texto a { color: var(--caoba); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
.legal__texto strong { font-weight: 600; }
.legal__texto dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 24px; margin: 0; }
.legal__texto dl > div { display: contents; }
.legal__texto dd a { display: inline-block; padding-block: 10px; margin-block: -10px; } /* más fácil de tocar */
.legal__texto dt { color: var(--suave-claro); }
.legal__texto dd { margin: 0; }
@media (max-width: 520px) {
  .legal__texto dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal__texto dd { margin-bottom: 10px; }
}

/* 404: el número grande de la historia, en caoba */
.nf__cuerpo { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 16px; text-align: center; padding: calc(var(--cabecera) + 32px) var(--margen) 72px; }
.nf__numero { font-family: var(--titular); font-size: min(34vw, 40svh, 340px); line-height: 0.9; color: var(--caoba); }
.nf__titulo { font-family: var(--titular); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 4vw, 56px); line-height: 1.02; }
.nf__cuerpo p { max-width: 40ch; }
.nf__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px; padding-top: 12px; }

/* ---------- Reducir movimiento: todo queda quieto y completo ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .portada { height: auto; }
  .js .intro { margin-top: 0; }
  .js .intro::before { display: none; }
  .portada__escena { position: relative; }
  .portada__bajar svg { animation: none; }
  .js .portada__sobre > *, .js .portada__capitulos a, .js .copia__ventana, .js .copia::before, .js .hilo,
  .js [data-entra], .js [data-revela], .js .paso > h3, .js .paso > p, .js .frase__linea > span, .js .pie__nombre span {
    clip-path: none !important; translate: none !important; transform: none !important; opacity: 1 !important; transition: none !important;
  }
  .js .clases__lista li::before { transform: none !important; transition: none !important; }
  .portada__foto--grande, .pantalla__foto img, .musica__generos { transform: none !important; transition: none !important; }
  .copia__ventana img[data-paralaje] { transform: none !important; }
  .js .copia__marco path { stroke-dashoffset: 0 !important; transition: none !important; }
  .pantalla__foto { clip-path: none !important; }
  .cifra, .cifra__tira { transition: none !important; }
  .flotante { translate: 0 0; transition: opacity 200ms ease; }
}