/* =============================================================================
   EL RECORRIDO — hoja aparte, solo para descubrir.html.

   La tienda es de papel; el recorrido es de noche. Se carga después de
   tienda.css y solo reescribe lo que necesita: fondo, cabecera y color de
   texto. Todo lo demás —tipografías, botones, filetes— sigue siendo el mismo
   sistema, porque son la misma casa a distinta hora.
   ========================================================================== */

.recorrido {
  background: #0d0b09;
  color: var(--papel);
}
/* ---------- el cajón del carrito, de día también de noche -------------------
   El cajón es de papel en toda la casa, pero en el recorrido colgaba de un
   body que escribe en claro: la línea del producto salía blanca sobre blanco
   y el botón de finalizar, papel sobre papel. Dentro del cajón vuelve la
   tinta, pase lo que pase fuera. */
.recorrido .carrito { color: var(--tinta); }
.recorrido .carrito .enlace { color: var(--tinta-suave); }
.recorrido .carrito .enlace:hover { color: var(--tinta); }
.recorrido .carrito .boton {
  background: var(--tinta); color: var(--papel); border-color: var(--tinta);
}
.recorrido .carrito .boton:hover { background: transparent; color: var(--tinta); }

/* ---------- el grano y la viñeta -------------------------------------------
   El grano de la tienda se pinta en «multiply», que sobre papel es lo correcto
   y sobre negro NO HACE NADA: multiplicar por negro da negro, así que aquí no
   había grano — había un #0d0b09 plano. Y un negro plano no es una fotografía,
   es una pantalla apagada.

   En la noche el grano va en «screen»: son motas de LUZ, que es lo que se ve
   en una película empujada. Y se mueve a saltos, cuatro por segundo, como el
   grano de verdad: quieto se lee como una textura pegada al cristal. */
.recorrido::after {
  inset: -120px;
  opacity: 0.42;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
  animation: grano 1.1s steps(1) infinite;
  will-change: transform;
}
@keyframes grano {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-34px, 18px, 0); }
  40%  { transform: translate3d(22px, -30px, 0); }
  60%  { transform: translate3d(-16px, -12px, 0); }
  80%  { transform: translate3d(30px, 24px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* La viñeta. Una cámara no reparte la luz por igual hasta el borde del
   encuadre, y una página que sí lo hace se lee como una diapositiva. Va por
   debajo del grano y por encima del contenido, muy floja: lo justo para que
   la mirada caiga al centro sin darse cuenta de por qué. */
.recorrido::before {
  content: ''; position: fixed; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(ellipse 92% 76% at 50% 44%, transparent 46%, rgba(0, 0, 0, 0.55) 100%);
}

/* El negro de la entrada también es una foto: sin grano son cinco segundos de
   pantalla apagada, y es lo primero que se ve de la casa. */
.entrada__fondo::after {
  content: ''; position: absolute; inset: -120px; pointer-events: none;
  opacity: 0.5; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
  animation: grano 1.1s steps(1) infinite;
}

.recorrido .cabecera--fija {
  background: rgba(13, 11, 9, 0.88);
  color: var(--papel);
  box-shadow: 0 1px 0 rgba(244, 239, 231, 0.12);
}
.recorrido .cabecera .logo__img--tinta { opacity: 0; }
.recorrido .cabecera .logo__img--claro { opacity: 1; }
.recorrido .pie { border-top: 1px solid rgba(244, 239, 231, 0.12); }

.recorrido .contenido--estrecho { max-width: 860px; }
.recorrido .dato,
.recorrido .antetitulo { color: rgba(244, 239, 231, 0.5); }
.recorrido .parrafo { color: rgba(244, 239, 231, 0.68); }
.recorrido .boton { background: var(--papel); color: #0d0b09; border-color: var(--papel); }
.recorrido .boton:hover { background: transparent; color: var(--papel); }
.recorrido .enlace { color: rgba(244, 239, 231, 0.75); }
.recorrido .enlace:hover { color: var(--papel); }

/* ---------- la entrada ------------------------------------------------------
   La firma se escribe en el centro del negro y, al rematar el punto, viaja a su
   sitio en el umbral. El negro se va a la vez, así que aterriza sobre una
   escena ya encendida y no sobre un telón que se levanta después.

   El fondo va en su propia capa —.entrada__fondo— y no en .entrada: durante el
   viaje hay que apagar el negro SIN apagar la firma, que es lo único que sigue
   en pantalla. Fundir el contenedor entero se llevaría las dos cosas. */
.entrada { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; }
.entrada[hidden] { display: none; }
.entrada--fuera { pointer-events: none; }

.entrada__fondo {
  position: absolute; inset: 0;
  background: #0a0807;
  transition: opacity 0.85s var(--curva);
}
/* La luz del plató subiendo: una brasa cálida que crece mientras se escribe.
   Sin ella el negro es plano, y un negro plano es una pantalla apagada. */
.entrada__fondo::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 56% 44% at 50% 50%, rgba(184, 149, 79, 0.26), transparent 68%),
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
  animation: brasa 3.1s var(--curva) both;
}
@keyframes brasa {
  0%   { opacity: 0; transform: scale(0.72); }
  65%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.05); }
}
.entrada--fuera .entrada__fondo { opacity: 0; }

.entrada__firma {
  position: relative; z-index: 2;
  width: min(62vw, 540px);
  will-change: transform;
}
.entrada__saltar {
  position: absolute; z-index: 2; right: var(--margen); bottom: clamp(1.5rem, 4vw, 3rem);
  color: rgba(246, 243, 238, 0.5);
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  opacity: 0; animation: asomar-tarde 1s var(--curva) 1.5s forwards;
  transition: color 0.4s var(--curva), opacity 0.5s var(--curva);
}
.entrada__saltar:hover { color: #fff; }
.entrada--fuera .entrada__saltar { opacity: 0; animation: none; }
@keyframes asomar-tarde { to { opacity: 1; } }

/* Mientras se escribe no se baja: lo que hay detrás todavía no se ha encendido
   y bajar a ciegas es salir de la casa por la ventana. */
body.entrando { overflow: hidden; }

/* El encendido del umbral. Se dispara cuando la firma emprende el viaje, no
   cuando aterriza: así el negro se va sobre una escena que YA se está
   levantando. Cada pieza entra a su hora — el vial primero, el texto al final. */
body.entrada-abierta .umbral__escenario {
  animation: encender-vial 1.8s var(--curva) both;
}
body.entrada-abierta .umbral__tras,
body.entrada-abierta .umbral__aire { animation: encender 1.6s var(--curva) 0.15s both; }
body.entrada-abierta .umbral__casa { animation: encender-texto 1s var(--curva) 0.62s both; }
body.entrada-abierta .umbral__oficio { animation: encender-texto 1s var(--curva) 0.74s both; }
body.entrada-abierta .umbral__linea { animation: encender-texto 1s var(--curva) 0.86s both; }

/* El vial no se desplaza al encenderse: su transform lo lleva el ratón desde
   JS, y una animación que lo tocara pelearía con él en cada fotograma. Sube
   desde el desenfoque y desde la penumbra, que es como sube una luz de verdad. */
@keyframes encender-vial {
  from { opacity: 0; filter: blur(11px) brightness(0.35); }
  to   { opacity: 1; filter: none; }
}
@keyframes encender { from { opacity: 0; } to { opacity: 1; } }
@keyframes encender-texto {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* La firma del umbral: el mismo trazo enmascarado, al tamaño de su sitio. */
/* ---------- el umbral ------------------------------------------------------ */
/* El umbral no es una pantalla: es un tramo. Se entra a oscuras —solo el
   nombre de la casa, apenas visible— y la pregunta y los cuatro universos van
   saliendo del negro al bajar. Todo va colgado de --u, que es cuánto se lleva
   recorrido del tramo, y lo pone el scroll. */
.umbral { height: 200vh; position: relative; }
.umbral__fijo {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: calc(6rem + 3vw) var(--margen) 3.5rem;
}

/* ---------- los cuatro planos ----------------------------------------------
   De atrás a delante: aire lejano · el nombre · el vial · aire cercano. Cada
   uno con su z-index y su velocidad. Lo que da profundidad no son las sombras:
   es que las cosas estén a distintas distancias y se muevan distinto. */
.umbral__aire { position: absolute; inset: 0; pointer-events: none; }
.umbral__aire .polvo { width: 100%; height: 100%; display: block; }
.umbral__aire--lejos { z-index: 0; }
/* El de delante va desenfocado: es lo que pone AIRE entre el vial y quien mira. */
.umbral__aire--cerca { z-index: 3; filter: blur(3.5px); opacity: 0.85; }

/* El nombre, enorme y detrás del frasco. Ese cruce vende más profundidad que
   cualquier sombra: si algo tapa a algo, hay un delante y un detrás. */
.umbral__tras {
  position: absolute; z-index: 1; left: 0; right: 0; margin: 0;
  top: 42%; transform: translateY(-50%) translateX(calc(var(--u, 0) * -3vw));
  text-align: center; pointer-events: none;
  font-family: var(--sans); font-weight: 200;
  font-size: clamp(4rem, 15vw, 15rem); line-height: 0.9;
  letter-spacing: 0.06em; text-indent: 0.06em;
  color: rgba(244, 239, 231, 0.055);
  white-space: nowrap;
}

/* La lámpara del plató vive AQUÍ y no dentro del lienzo. En el lienzo el
   resplandor ancho se cortaba en el canto del canvas y sobre negro se veía el
   recuadro — un rectángulo más claro en mitad de la nada. Un degradado de CSS
   sobre una capa a pantalla completa no tiene canto que cortar. */
.umbral__escenario {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  pointer-events: none;
  will-change: transform;
  background: radial-gradient(ellipse 44% 50% at 61% 46%,
    rgba(226, 200, 152, 0.13), rgba(180, 156, 116, 0.038) 46%, transparent 72%);
}
.umbral__escenario .composicion {
  height: 94%; aspect-ratio: 4 / 5; background: none;
  transform: translateX(11%) translateY(-2%);
}
/* Un velo que baja la luz por la izquierda: sin él el texto compite con el
   vial. Es la bandera negra de un plató, hecha con un degradado. */
.umbral__velo {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(100deg, #0d0b09 4%, rgba(13,11,9,0.80) 32%, rgba(13,11,9,0.04) 60%, rgba(13,11,9,0.48) 100%),
    radial-gradient(ellipse 118% 92% at 58% 46%, transparent 42%, rgba(5,4,4,0.82) 100%);
}
/* El texto va abajo a la izquierda, no centrado: una pila centrada sobre negro
   es lo que hace una plantilla. Aquí manda la imagen y el texto la acompaña. */
.umbral__centro {
  position: relative; z-index: 5;
  max-width: min(46ch, 52vw); align-self: end;
  display: grid;
}
.umbral__marca, .umbral__pregunta { grid-area: 1 / 1; align-self: end; }
/* La marca, en la primera pantalla. Se aparta al bajar: hace su presentación
   y deja el sitio a la pregunta. Todo cuelga de --u, que lo pone el scroll. */
/* El texto es el plano de delante: se mueve más que ningún otro. */
.umbral__marca {
  display: grid; justify-items: start;
  opacity: calc(1 - var(--u, 0) * 4.5);
  transform: translateY(calc(var(--u, 0) * -6rem));
  pointer-events: none;
}
.umbral__firma {
  width: clamp(120px, 15vw, 190px); display: block;
  margin-bottom: clamp(1.2rem, 2.4vw, 2rem);
  opacity: 0.9;
  /* El alto de la firma antes de que firma.js la dibuje: es el viewBox de
     FIRMA (640 × 437,3). Sin esto la caja nacía a 0 y la marca entera bajaba
     130 px al llegar el SVG. */
  aspect-ratio: 640 / 437.3;
}
.umbral__casa {
  margin: 0; font-family: var(--sans); font-weight: 300;
  font-size: clamp(2rem, 5.2vw, 4.4rem); line-height: 1;
  letter-spacing: 0.2em; text-indent: 0.2em;
  color: var(--papel);
}
.umbral__oficio {
  margin: 1rem 0 0;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.44em; text-transform: uppercase;
  color: var(--oro);
}
.umbral__linea {
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; max-width: 30ch;
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.5;
  color: rgba(244, 239, 231, 0.72);
}
/* El CTA de la primera pantalla: discreto —un filete, no un botón de feria—
   pero PULSABLE sin bajar. La marca entera va con pointer-events:none para
   que el vial reciba el ratón; el CTA se lo devuelve a sí mismo. */
.umbral__cta {
  pointer-events: auto;
  display: inline-block; margin-top: clamp(1.4rem, 2.6vw, 2rem);
  padding: 0.75rem 1.6rem;
  border: 1px solid rgba(226, 200, 152, 0.45);
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--papel);
  transition: border-color 0.5s var(--curva), background 0.5s var(--curva);
}
.umbral__cta:hover { border-color: var(--oro); background: rgba(168, 129, 77, 0.14); }
.umbral__pregunta {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 5vw, 4.6rem);
  line-height: 1.04; letter-spacing: -0.02em;
  margin: 0;
  color: var(--papel);
  opacity: calc((var(--u, 0) - 0.16) * 6);
  transform: translateY(calc((1 - clamp(0, (var(--u, 0) - 0.14) * 5, 1)) * 2.4rem));
}

.umbral__puertas {
  position: relative; z-index: 5;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(244, 239, 231, calc(0.16 * clamp(0, (var(--u, 0) - 0.36) * 9, 1)));
}
/* Cada puerta sale un poco después que la anterior: el retardo no lo marca un
   reloj, lo marca --i, que es su sitio en la fila. Se abren bajando. */
.puerta {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; gap: 0.7rem;
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(0.9rem, 1.8vw, 1.6rem) clamp(2.2rem, 4vw, 3.4rem);
  text-align: left;
  border-bottom: 1px solid rgba(244, 239, 231, 0.16);
  opacity: calc((var(--u, 0) - 0.40 - var(--i, 0) * 0.07) * 9);
  transform: translateY(calc((1 - clamp(0, (var(--u, 0) - 0.40 - var(--i, 0) * 0.07) * 9, 1)) * 1.4rem));
}
.puerta + .puerta { border-left: 1px solid rgba(244, 239, 231, 0.16); }
.puerta::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(244, 239, 231, 0.06);
  opacity: 0; transition: opacity 0.6s var(--curva);
}
.puerta:hover::before, .puerta:focus-visible::before { opacity: 1; }
.puerta__num {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.3em;
  color: rgba(244, 239, 231, 0.42);
}
.puerta__nombre {
  font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 2rem); line-height: 1.05;
  transition: transform 0.6s var(--curva);
}
.puerta:hover .puerta__nombre { transform: translateX(0.35rem); }
.puerta__pie {
  font-family: var(--sans); font-size: 0.68rem; line-height: 1.6;
  color: rgba(244, 239, 231, 0.5);
}

@keyframes asomar { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.umbral__baja {
  position: absolute; z-index: 5; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  opacity: calc(1 - var(--u, 0) * 4);      /* sobra en cuanto se ha entendido */
}
.umbral__baja i {
  display: block; width: 1px; height: 44px; background: rgba(244, 239, 231, 0.5);
  animation: bajar 2.6s var(--curva) infinite; transform-origin: top;
}

/* ---------- elección ------------------------------------------------------- */
.eleccion { padding: clamp(5rem, 12vw, 11rem) 0 clamp(3rem, 7vw, 6rem); }
.eleccion__titulo {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1; letter-spacing: -0.02em;
  margin: 0.6rem 0 1.4rem;
}
.eleccion__entrada {
  max-width: 46ch; margin: 0 0 clamp(2.4rem, 5vw, 4rem);
  font-size: 1.04rem; line-height: 1.7; color: rgba(244, 239, 231, 0.68);
}

.eleccion__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(244, 239, 231, 0.14); }
.eleccion__lista li { animation: asomar 0.8s var(--curva) both; animation-delay: var(--retardo, 0s); }

.opcion {
  width: 100%;
  display: grid; align-items: center;
  grid-template-columns: 10px 3.4rem minmax(0, 1fr) auto;
  gap: clamp(0.8rem, 2vw, 2rem);
  padding: clamp(0.9rem, 1.8vw, 1.5rem) 0;
  border-bottom: 1px solid rgba(244, 239, 231, 0.14);
  text-align: left;
  transition: padding 0.5s var(--curva);
}
.opcion:hover, .opcion:focus-visible { padding-left: 1rem; }
.opcion__num { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.2em; color: rgba(244, 239, 231, 0.45); }
.opcion__nombre { font-family: var(--serif); font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.05; }
.opcion__familia {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.45); text-align: right;
}
.opcion--sin-formula .opcion__nombre { color: rgba(244, 239, 231, 0.55); }
.opcion--sin-formula .gota { opacity: 0.4; }
.opcion.elegida { background: rgba(244, 239, 231, 0.05); padding-left: 1rem; }
.opcion.elegida .opcion__nombre { color: var(--papel); }

/* ---------- las cuatro puertas de Cordes ------------------------------------
   Eran cuatro renglones de texto sobre negro, que es lo que hace una lista de
   precios. Lo que se elige aquí es una CAJA: se enseña la caja. Los tres
   primeros con su foto de producto, FUNDAMENTOS con su dibujo, y debajo las
   cinco gotas de color de lo que lleva dentro — que es la única pista de qué
   se está eligiendo sin tener que abrirlo. */
.eleccion__lista--kits {
  border-top: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.8rem, 1.8vw, 1.8rem);
}
.eleccion__lista--kits .opcion {
  display: grid; grid-template-columns: none; grid-template-rows: auto auto;
  gap: 0; padding: 0; border-bottom: 0;
  align-items: start;
}
.eleccion__lista--kits .opcion:hover,
.eleccion__lista--kits .opcion:focus-visible,
.eleccion__lista--kits .opcion.elegida { padding-left: 0; background: none; }

.puerta-kit__caja {
  display: block; position: relative;
  aspect-ratio: 4 / 5; overflow: hidden;
  border: 1px solid rgba(244, 239, 231, 0.10);
  background: radial-gradient(ellipse 62% 58% at 50% 44%,
    rgba(226, 200, 152, 0.10), transparent 72%);
  transition: border-color 0.6s var(--curva);
}
.puerta-kit__caja img {
  width: 100%; height: 100%; object-fit: contain;
  transform: scale(1.02);
  transition: transform 0.9s var(--curva), filter 0.9s var(--curva);
  filter: brightness(0.86);
}
.opcion--kit:hover .puerta-kit__caja img,
.opcion--kit:focus-visible .puerta-kit__caja img,
.opcion--kit.elegida .puerta-kit__caja img { transform: scale(1.08); filter: brightness(1.06); }
/* Las fotos traen mucho negro alrededor —el plató— y con «contain» la caja
   salía pequeña en su propia puerta. Se acercan: el negro que se pierde por
   los cantos es exactamente el mismo negro que la página. El dibujo de
   FUNDAMENTOS no se toca, que ya llena su encuadre. */
.puerta-kit__caja img[src$=".jpg"] { transform: scale(1.3); }
.opcion--kit:hover .puerta-kit__caja img[src$=".jpg"],
.opcion--kit:focus-visible .puerta-kit__caja img[src$=".jpg"],
.opcion--kit.elegida .puerta-kit__caja img[src$=".jpg"] { transform: scale(1.38); }
.opcion--kit:hover .puerta-kit__caja,
.opcion--kit:focus-visible .puerta-kit__caja,
.opcion--kit.elegida .puerta-kit__caja { border-color: rgba(226, 200, 152, 0.34); }

.puerta-kit__pie {
  display: grid; gap: 0.5rem; justify-items: start;
  padding: clamp(0.9rem, 1.6vw, 1.3rem) 0 0;
}
.puerta-kit__gotas { display: flex; gap: 0.42rem; }
.puerta-kit__gota {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fila-jugo, var(--oro));
  box-shadow: 0 0 0 1px rgba(244, 239, 231, 0.14);
}
.eleccion__lista--kits .opcion__familia { text-align: left; }

/* El vial delante del nombre, en la lista de la colección. Un renglón con la
   pieza al lado se lee como una ficha; sin ella, como un índice. */
.opcion--con-vial { grid-template-columns: 64px 10px 3.4rem minmax(0, 1fr) auto; }
.opcion__vial { display: block; width: 64px; aspect-ratio: 3 / 5; }
.opcion__vial img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0.95);
  transition: filter 0.6s var(--curva), transform 0.6s var(--curva);
}
.opcion--con-vial:hover .opcion__vial img,
.opcion--con-vial:focus-visible .opcion__vial img,
.opcion--con-vial.elegida .opcion__vial img { filter: brightness(1.08); transform: scale(1.06); }

/* ---------- la escena pegada ----------------------------------------------- */
/* Tres pantallas de alto: eso es el recorrido. El contenido se queda quieto y
   lo que cambia es lo que pasa dentro, conducido por el scroll. */
.escena { height: 340vh; position: relative; }
.escena__fijo {
  position: sticky; top: 0; height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
}
/* La misma lámpara, para la escena de composición. */
.escena__fijo { background: radial-gradient(ellipse 40% 46% at 50% 44%,
    rgba(226, 200, 152, 0.10), rgba(180, 156, 116, 0.03) 48%, transparent 74%); }
.escena__lienzo { height: 74%; aspect-ratio: 4 / 5; }
.escena__lienzo .composicion { height: 100%; aspect-ratio: 4 / 5; background: none; }
/* El vial quieto, para las piezas que todavía no tienen fórmula que caiga. */
.escena__quieto { height: 100%; width: auto; display: block; margin: 0 auto;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.6)); }

.escena__hud {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  padding: calc(6rem + 2vw) var(--margen) 4rem;
  display: grid; align-content: space-between;
}
.escena__tiempo {
  margin: 0;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.5);
}
.escena__nombre {
  margin: 0.8rem 0 0; font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1;
}
/* ---------- el relato ------------------------------------------------------
   Lo que se lee mientras cae la esencia. Un compás cada vez, grande, en serif:
   se lee de un vistazo y sin pararse. Los compases se apilan en el mismo sitio
   —de ahí el grid de una sola celda— y solo uno está encendido. */
.relato {
  display: grid; align-self: end;
  max-width: min(52ch, 46%);
  min-height: 11rem;
}
.relato__compas {
  grid-area: 1 / 1; margin: 0; align-self: end;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.relato__compas.dentro { opacity: 1; transform: none; }
.relato__compas.ido { opacity: 0; transform: translateY(-14px); }
.relato__cuenta {
  display: block; margin-bottom: 0.9rem;
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.26em;
  color: rgba(244, 239, 231, 0.38);
}
.relato__texto {
  display: block;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.35rem, 2.5vw, 2.15rem); line-height: 1.28;
  color: var(--papel);
  text-wrap: balance;
}

/* ---------- la reseña ------------------------------------------------------
   El juicio, al final, cuando el vial ya está girando al lado. Un reseñador
   vende porque es específico y porque moja: por eso el veredicto va aparte y
   en cursiva, separado del cuerpo. */
.resena {
  margin: 1.2rem 0 0; max-width: 58ch;
  font-size: 1.02rem; line-height: 1.8;
  color: rgba(244, 239, 231, 0.72);
}
.resena__veredicto {
  margin: 1.4rem 0 0; max-width: 52ch;
  padding-left: 1.1rem; border-left: 2px solid var(--oro);
  font-family: var(--serif); font-style: italic;
  font-size: 1.18rem; line-height: 1.5;
  color: var(--papel);
}
.rendimiento {
  margin: 1.8rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0 clamp(2rem, 5vw, 4rem);
}
.rendimiento div { margin: 0; }
.rendimiento dt {
  font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.38);
}
.rendimiento dd {
  margin: 0.4rem 0 0;
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.06em;
  color: rgba(244, 239, 231, 0.72);
}

/* ---------- la ficha técnica ----------------------------------------------
   Nada de esto desaparece: se aparta. La casa sigue publicando lo que lleva
   dentro y sigue habiendo un juicio escrito — pero quien baja por el recorrido
   viene a que le cuenten algo, no a leer una etiqueta. Un clic de distancia. */
.ficha { margin: 1.8rem 0 0; border-top: 1px solid rgba(244, 239, 231, 0.14); padding-top: 1.2rem; }
.ficha__dentro { padding-top: 0.4rem; }
.ficha__titulo {
  margin: 2rem 0 0;
  font-family: var(--sans); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.38);
}
.ficha__abrir, .formula__abrir {
  cursor: pointer; list-style: none; display: inline-block;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.5);
  border-bottom: 1px solid rgba(244, 239, 231, 0.28);
  padding-bottom: 0.3rem;
  transition: color 0.4s var(--curva), border-color 0.4s var(--curva);
}
.ficha__abrir::-webkit-details-marker, .formula__abrir::-webkit-details-marker { display: none; }
.ficha__abrir:hover, .formula__abrir:hover { color: var(--papel); border-color: var(--papel); }
.ficha[open] .ficha__abrir { color: var(--papel); }
.formula__lista {
  list-style: none; margin: 0.8rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.34rem;
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.5);
}

.escena__notas {
  margin: 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; max-width: 46%;
  align-self: end;
  /* Sobre negro las materias se leen en hueso; el color de cada gota se ve en
     su viñeta, que es donde sí se distingue. */
  --tinta-nota: rgba(244, 239, 231, 0.82);
}
.escena__notas li {
  display: grid; grid-template-columns: 9px 1fr; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}
.escena__notas li::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gota, var(--papel));
  box-shadow: 0 0 12px var(--gota, transparent);
}
.escena__notas li.dentro { opacity: 1; transform: none; }
.escena__familia {
  position: absolute; right: var(--margen); bottom: 4rem; margin: 0;
  font-family: var(--serif); font-size: clamp(1.2rem, 2.4vw, 2rem);
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.8s var(--curva), transform 0.8s var(--curva);
}
.escena__familia.dentro { opacity: 1; transform: none; }

.escena__pista {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  margin: 0; z-index: 3;
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.4);
  transition: opacity 0.6s var(--curva);
}

/* ---------- el kit montándose ---------------------------------------------- */
/* La serie va detrás, enorme y apagada: es el fondo sobre el que se montan los
   viales, no un titular. Los cinco y el estuche ocupan el mismo sitio: al final
   los viales se apagan y en su lugar queda la caja, que es el kit ya montado. */
.kit {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0 var(--margen);
}
.kit__serie {
  position: absolute; top: 8%; left: 0; right: 0; margin: 0; text-align: center;
  font-family: var(--sans); font-size: clamp(2.4rem, 9vw, 7rem);
  letter-spacing: 0.28em; text-indent: 0.28em;
  color: rgba(244, 239, 231, 0.09);
}
.kit__viales {
  grid-area: 1 / 1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(0.5rem, 2.2vw, 2.4rem);
  transition: opacity 0.9s var(--curva), transform 0.9s var(--curva);
}
.kit__vial {
  margin: 0; width: clamp(88px, 13vw, 196px);
  opacity: 0; transform: translateY(52px) scale(0.94);
  transition: opacity 0.8s var(--curva), transform 0.9s var(--curva);
}
.kit__vial.dentro { opacity: 1; transform: none; }
.kit__vial img { width: 100%; height: auto; max-height: 46vh; object-fit: contain; }
.kit__vial figcaption {
  margin-top: 0.8rem; text-align: center;
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.55);
}
/* El estuche cerrado, que aparece cuando ya han entrado los cinco. */
.kit__caja {
  grid-area: 1 / 1; width: min(62vw, 620px);
  opacity: 0; transform: scale(0.9);
  transition: opacity 1s var(--curva), transform 1.1s var(--curva);
  pointer-events: none;
}
.kit__caja img { width: 100%; display: block; max-height: 74vh; object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.65)); }
.kit__caja.dentro { opacity: 1; transform: none; }
/* Al montarse el estuche, los cinco sueltos se retiran. */
.kit__viales.cedida { opacity: 0.14; transform: scale(0.88); }

/* ---------- una colección dentro del universo Colección --------------------
   Colección → colecciones → perfumes. Con una sola colección no se hace pinchar
   dos veces: se enseña con sus perfumes debajo. */
#via-coleccion > .eleccion { padding-bottom: 0; }
#via-bespoke > .eleccion { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.coleccion { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
.coleccion__cabecera { max-width: 46rem; margin-bottom: clamp(1.6rem, 4vw, 3rem); }
.coleccion__nombre {
  margin: 0.5rem 0 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1;
}
.coleccion__intro {
  margin: 1.1rem 0 0; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem); color: rgba(244, 239, 231, 0.78);
}
.coleccion__entrada {
  margin: 0.9rem 0 0; font-size: 0.98rem; line-height: 1.75;
  color: rgba(244, 239, 231, 0.6); max-width: 54ch;
}
.opcion__alias {
  font-family: var(--sans); font-style: normal; font-size: 0.52em;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.42); margin-left: 0.7em; vertical-align: middle;
}

/* ---------- el proceso del bespoke ----------------------------------------- */
.dato--suelto { margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.etapas { list-style: none; margin: 0 0 clamp(3rem, 7vw, 6rem); padding: 0; display: grid; }
.etapa {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3vw, 2.4rem) 0;
  border-top: 1px solid rgba(244, 239, 231, 0.14);
}
.etapa:last-child { border-bottom: 1px solid rgba(244, 239, 231, 0.14); }
.etapa__num {
  font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.26em;
  color: var(--oro);
}
.etapa__titulo { margin: 0 0 0.6rem; font-family: var(--serif); font-size: clamp(1.25rem, 2.3vw, 1.8rem); }
.etapa__texto { margin: 0; font-size: 0.98rem; line-height: 1.75; color: rgba(244, 239, 231, 0.66); max-width: 56ch; }

/* ---------- el cierre del bespoke ------------------------------------------ */
.cierre {
  border: 1px solid rgba(244, 239, 231, 0.18);
  padding: clamp(2rem, 5vw, 3.6rem);
  text-align: center;
}
.cierre__precio {
  margin: 0; font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 3rem);
  line-height: 1;
}
/* Plazo y cupo, en la voz técnica: son condiciones, no promesa. */
.cierre__condiciones {
  margin: 1.1rem auto 0; max-width: 52ch;
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.08em;
  line-height: 1.8; text-transform: uppercase;
  color: rgba(244, 239, 231, 0.45);
}
.cierre__texto {
  margin: 1.2rem auto 2rem; max-width: 46ch;
  font-size: 0.98rem; line-height: 1.75; color: rgba(244, 239, 231, 0.66);
}

/* ---------- lo que la experiencia incluye -----------------------------------
   La lista de la página publicada de la casa. Cada renglón lleva su gota de
   oro delante: es una entrega, no un párrafo. */
.incluye {
  list-style: none; margin: 0 0 clamp(3rem, 7vw, 6rem); padding: 0;
  display: grid;
}
.incluye li {
  position: relative;
  padding: clamp(0.9rem, 1.8vw, 1.3rem) 0 clamp(0.9rem, 1.8vw, 1.3rem) 1.8rem;
  border-top: 1px solid rgba(244, 239, 231, 0.14);
  font-family: var(--serif); font-size: clamp(1.05rem, 1.8vw, 1.3rem); line-height: 1.5;
}
.incluye li:last-child { border-bottom: 1px solid rgba(244, 239, 231, 0.14); }
.incluye li::before {
  content: ''; position: absolute; left: 0.2rem; top: 50%;
  width: 7px; height: 7px; margin-top: -3.5px;
  border-radius: 50%; background: var(--oro);
  box-shadow: 0 0 8px rgba(184, 149, 79, 0.5);
}
.cierre__acciones { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }

/* ---------- «verlo componerse», en la vitrina ------------------------------ */
.pieza { cursor: pointer; }
.pieza__abrir {
  margin-top: 1rem;
  font-family: var(--sans); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--oro);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}
.pieza:hover .pieza__abrir, .pieza:focus-visible .pieza__abrir { opacity: 1; transform: none; }

/* ---------- el remate ------------------------------------------------------ */
.remate { padding: clamp(4rem, 9vw, 9rem) 0 clamp(5rem, 11vw, 11rem); }
.remate__caja { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.remate__vial { width: 100%; }
.remate__vial img { width: 100%; height: auto; }

/* El giro final. Dos caras del mismo dibujo montadas en un eje: al dar la
   vuelta se ve el frente, el canto y el reverso. Gira despacio —dieciocho
   segundos— porque un giro rápido se lee como un banner y este tiene que
   poder mirarse un rato. */
.giro {
  position: relative;
  display: grid; place-items: center;
  perspective: 1500px;
  padding: 12% 0;
}
.giro__eje {
  position: relative; width: 100%;
  transform-style: preserve-3d;
  animation: giro-vial 18s linear infinite, giro-flote 7s ease-in-out infinite;
  will-change: transform;
}
.giro__cara {
  display: block; width: 100%;
  backface-visibility: hidden;
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.6));
}
.giro__cara--dorso { position: absolute; inset: 0; transform: rotateY(180deg); }

/* El halo del jugo, latiendo por detrás: el vidrio oscuro necesita algo que lo
   despegue del fondo negro. */
.giro__halo {
  position: absolute; inset: -6% -18%;
  background: radial-gradient(circle at 50% 52%, var(--jugo-giro, #a8814d) 0%, transparent 62%);
  opacity: 0.28; filter: blur(46px);
  animation: giro-latido 7s ease-in-out infinite;
  pointer-events: none;
}
/* Un reflejo que cruza el cristal cada vuelta. */
.giro__brillo {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 50%, #000 42%, transparent 72%);
}
.giro__brillo::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; width: 22%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: giro-reflejo 9s var(--curva) infinite;
}

@keyframes giro-vial   { to { transform: rotateY(360deg); } }
@keyframes giro-flote  { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.4%; } }
@keyframes giro-latido { 0%, 100% { opacity: 0.22; } 50% { opacity: 0.4; } }
@keyframes giro-reflejo { 0% { left: -30%; } 55%, 100% { left: 120%; } }

/* Con foto no hay eje que girar: hay un acercamiento lento. Una fotografía no
   tiene reverso, y hacerla girar enseña el canto del papel. */
.giro--foto { padding: 6% 0; }
.giro__foto {
  display: block; width: 100%;
  animation: giro-acercar 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes giro-acercar {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.07) translateY(-1.2%); }
}

/* Y el mismo hueco cuando exista la película. */
.giro--pelicula { padding: 0; display: block; }
.giro__video { width: 100%; display: block; background: #0d0b09; }
.giro__sonido {
  position: absolute; right: 1rem; bottom: 1rem;
  background: rgba(13, 11, 9, 0.62); color: var(--papel);
  border: 1px solid rgba(244, 239, 231, 0.35);
  padding: 0.5rem 0.9rem; cursor: pointer;
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase;
}
.giro__sonido:hover, .giro__sonido.activo { background: var(--papel); color: #0d0b09; }
.remate__nombre { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 4.2rem); line-height: 1; margin: 0.6rem 0 0; }
.remate__firma { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: rgba(244, 239, 231, 0.7); margin: 1rem 0 0; max-width: 34ch; }
.remate__caja .pendiente { margin: 1.6rem 0 0; }
.remate__pvp { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(244, 239, 231, 0.55); margin: 1.6rem 0 2rem; }
.remate__acciones { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; }

/* ---------- la vitrina ------------------------------------------------------ */
.vitrina { padding: clamp(3rem, 6vw, 6rem) 0 clamp(4rem, 8vw, 7rem); border-top: 1px solid rgba(244, 239, 231, 0.12); }
.vitrina__banda {
  display: flex; gap: clamp(1.4rem, 3vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.6rem) var(--margen) 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.pieza {
  flex: none; width: clamp(220px, 24vw, 320px);
  scroll-snap-align: center;
  display: grid; justify-items: center; text-align: center;
}
/* Caja de proporción fija: la foto de un vial es mucho más alta que su dibujo,
   y sin esto la tarjeta se estiraba hasta sacar la vitrina de la pantalla. */
.pieza__vial {
  position: relative; width: 100%; aspect-ratio: 3 / 5;
  transition: transform 0.5s var(--curva);
  transform-style: preserve-3d;
}
.pieza__vial img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; object-position: center;
}
/* La foto ya trae su plató dentro, así que no lleva la sombra del recorte. Y
   los cantos se desvanecen: por muy igualado que esté el negro, un rectángulo
   de foto sobre una página negra se acaba viendo. */
.giro__foto[src$=".jpg"], .kit__vial img[src$=".jpg"], .pieza__vial img[src$=".jpg"],
.kit__caja img[src$=".jpg"], .remate__vial img[src$=".jpg"] {
  filter: none;
  -webkit-mask-image: radial-gradient(ellipse 78% 78% at 50% 48%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 78% 78% at 50% 48%, #000 62%, transparent 100%);
}
.pieza__reverso { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--curva); }
.pieza:hover .pieza__reverso, .pieza:focus-visible .pieza__reverso { opacity: 1; }
.pieza__num { margin: 1.2rem 0 0; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.26em; color: rgba(244, 239, 231, 0.4); }
.pieza__nombre { margin: 0.4rem 0 0; font-family: var(--serif); font-size: 1.5rem; }
.pieza__familia { margin: 0.3rem 0 0; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jugo-pieza); }
.pieza__firma {
  margin: 1rem auto 0; max-width: 26ch;
  font-family: var(--serif); font-style: italic;
  font-size: 1rem; line-height: 1.45;
  color: rgba(244, 239, 231, 0.72);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.5s var(--curva), transform 0.5s var(--curva);
}
.pieza:hover .pieza__firma, .pieza:focus-visible .pieza__firma { opacity: 1; transform: none; }

/* ---------- la solicitud de Bespoke -----------------------------------------
   Nombre, correo y vuestra historia, como en la página publicada de la casa.
   Campos subrayados, no cajas: una caja con borde es un impreso, y esto es
   una carta. */
.solicitud {
  position: relative;
  margin: 2rem auto 0; max-width: 30rem;
  display: grid; gap: 1.5rem; text-align: left;
}
/* El display de arriba le gana al atributo hidden: sin esta regla, el
   formulario «oculto» tras enviarse seguía en pantalla con el botón en
   «Enviando…» para siempre. */
.solicitud[hidden] { display: none; }
.solicitud__campo { display: grid; gap: 0.45rem; }
.solicitud__campo span {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: rgba(244, 239, 231, 0.5);
}
.solicitud__campo input,
.solicitud__campo textarea {
  width: 100%; background: none; border: 0;
  border-bottom: 1px solid rgba(244, 239, 231, 0.3);
  padding: 0.55rem 0; color: var(--papel);
  font-family: var(--serif); font-size: 1.05rem; line-height: 1.5;
  border-radius: 0; resize: vertical;
  transition: border-color 0.4s var(--curva);
}
.solicitud__campo input:focus-visible,
.solicitud__campo textarea:focus-visible {
  border-bottom-color: var(--oro);
}
.solicitud__campo ::placeholder { color: rgba(244, 239, 231, 0.35); }
.solicitud .boton { justify-self: center; margin-top: 0.6rem; }
.solicitud__resultado {
  margin: 1.8rem auto 0; max-width: 40ch;
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; line-height: 1.6;
  color: rgba(244, 239, 231, 0.8);
}

/* ---------- lo que falta ---------------------------------------------------- */
.pendiente {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px dashed rgba(244, 239, 231, 0.28);
  font-family: var(--sans); font-size: 0.78rem; line-height: 1.7;
  color: rgba(244, 239, 231, 0.62);
}
.pendiente b { color: var(--papel); font-weight: 400; }
.pendiente code { font-size: 0.9em; opacity: 0.8; }

.entender { list-style: none; margin: clamp(2rem, 5vw, 4rem) 0 0; padding: 0; display: grid; }
.entender li {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.6rem, 3vw, 2.6rem) 0;
  border-top: 1px solid rgba(244, 239, 231, 0.14);
}
.entender li:last-child { border-bottom: 1px solid rgba(244, 239, 231, 0.14); }
.entender__num { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.26em; color: rgba(244, 239, 231, 0.42); }
.entender h3 { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.9rem); margin: 0 0 0.7rem; }
.entender p { margin: 0; font-size: 0.98rem; line-height: 1.7; color: rgba(244, 239, 231, 0.66); max-width: 52ch; }

.volver { text-align: center; padding: 0 0 clamp(4rem, 8vw, 7rem); margin: 0; }

/* ---------- móvil ----------------------------------------------------------- */
@media (max-width: 900px) {
  .umbral__puertas { grid-template-columns: 1fr 1fr; }
  .eleccion__lista--kits { grid-template-columns: 1fr 1fr; }
  .umbral__centro { max-width: 100%; }
  .umbral__escenario .composicion { height: 76%; transform: translateX(6%) translateY(-12%); }
  .umbral__tras { font-size: 22vw; top: 34%; }
  .umbral__aire--cerca { filter: blur(2.5px); }
  .umbral__velo { background:
    linear-gradient(180deg, rgba(13,11,9,0.35) 0%, rgba(13,11,9,0.10) 30%, rgba(13,11,9,0.92) 68%, #0d0b09 100%); }
  .puerta:nth-child(odd) { border-left: 0; }
  .remate__caja { grid-template-columns: 1fr; }
  .remate__vial { max-width: 62%; }
  .escena__notas, .relato { max-width: 100%; }
  .escena__familia { position: static; margin-top: 1.2rem; text-align: right; }
}

/* ---------- el umbral, en el móvil ------------------------------------------
   En pantalla grande el umbral es un tramo: se aterriza a oscuras y la
   pregunta y las puertas salen del negro al bajar, colgadas de --u. En un
   móvil ese truco cuesta lo que no vale: las puertas RESERVAN su hueco aunque
   vayan invisibles, y como en vertical ocupan mucho, la primera pantalla era
   el vial arriba y media pantalla muerta debajo. Una portada con la mitad
   apagada no invita a bajar: parece que la página se quedó a medias.

   Aquí el umbral es una página: primera pantalla para la marca y el vial,
   y la pregunta y las puertas debajo, a la vista, bajando de forma normal. */
@media (max-width: 700px) {
  /* En grande el overflow:hidden del fijo recortaba lo que asoma del encuadre.
     Al hacerlo estático ese recorte se fue con él, y el nombre gigante del
     fondo y el vial ensanchaban el documento: la página entera se podía
     arrastrar de lado. Se recorta el umbral en horizontal — solo en
     horizontal, que en vertical ahora fluye. */
  .umbral { height: auto; overflow-x: clip; }
  .umbral__fijo {
    position: relative; height: auto; min-height: 100svh; overflow: visible;
    grid-template-rows: minmax(calc(100svh - 6rem - 3vw), auto) auto;
    padding-bottom: 3rem;
  }
  /* El escenario —vial, nombre gigante, polvo y velo— se queda en la primera
     pantalla: son las luces del plató, no el fondo de toda la página. */
  .umbral__aire, .umbral__velo, .umbral__escenario { inset: auto 0 auto 0; top: 0; height: 100svh; }
  .umbral__tras { top: 30svh; }
  /* Todo a la vista desde el principio: nada colgado de --u. */
  .umbral__marca { opacity: 1; transform: none; }
  .umbral__pregunta { opacity: 1; transform: none; }
  /* La marca y la pregunta dejan de compartir casilla —en grande la segunda
     sustituye a la primera al bajar— y pasan a ir una tras otra. */
  .umbral__marca, .umbral__pregunta { grid-area: auto; }
  .umbral__pregunta { margin-top: clamp(2.2rem, 8vw, 3.5rem); }
  .puerta {
    opacity: 1; transform: none;
    padding-top: 1.3rem; padding-bottom: 1.6rem;
  }
  .umbral__puertas { border-top-color: rgba(244, 239, 231, 0.16); }
  .umbral__baja { display: none; }

  /* Los cinco del kit, al ancho real. Con el mínimo de 88 px por vial, cinco
     viales más los huecos son 470 px: en un móvil los de los extremos
     desaparecían por los lados. Se reparten lo que hay. */
  .kit__vial { width: calc((100vw - 2 * var(--margen) - 4 * 0.5rem) / 5); }
  .kit__viales { gap: 0.5rem; }
  .kit__vial figcaption { font-size: 0.5rem; letter-spacing: 0.08em; }

  /* La caja final, a lo ancho. Al 62vw de pantalla grande, con el plató que
     la foto trae alrededor, quedaba una cajita en mitad del negro. */
  .kit__caja { width: 96vw; }
  .kit__caja img[src$=".jpg"] { transform: scale(1.26); }
}

@media (max-width: 560px) {
  .umbral__puertas { grid-template-columns: 1fr; }
  .puerta { border-left: 0 !important; }
  .opcion { grid-template-columns: 10px 2.6rem 1fr; row-gap: 0.3rem; }
  .opcion--con-vial { grid-template-columns: 40px 10px 2.6rem 1fr; }
  .opcion__vial { width: 40px; }
  .eleccion__lista--kits .opcion { grid-template-columns: none; }
  .opcion__familia { grid-column: 2 / -1; text-align: left; }
  .escena { height: 300vh; }
  /* En pantalla grande el texto va a los lados del vial. En un móvil no hay
     lados: el vial se sube y se centra —el lienzo lo dibuja al 62 % de su
     ancho, de ahí el corrimiento— y todos los rótulos bajan debajo. */
  .escena__lienzo { height: 46%; align-self: start; margin-top: 4.6rem; transform: translateX(-11%); }
  .escena__hud { padding: 1.4rem var(--margen) 3.6rem; align-content: end; gap: 0.9rem; }
  .relato { max-width: 100%; min-height: 9.5rem; }
  .escena__nombre { margin-top: 0; }
  .escena__familia { text-align: left; margin-top: 0; }
  .kit__viales { gap: 0.35rem; }
  .entender li, .etapa { grid-template-columns: 1fr; gap: 0.6rem; }
  .opcion__alias { display: block; margin: 0.2rem 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Sin movimiento no hay entrada: la firma está escrita desde el principio y
     el umbral no tiene que encenderse porque nunca estuvo apagado. */
  .entrada { display: none; }
  /* El grano se queda, pero quieto: la textura no molesta, el parpadeo sí. */
  .recorrido::after, .entrada__fondo::after { animation: none; }
  .umbral__escenario, .umbral__tras, .umbral__aire,
  .umbral__casa, .umbral__oficio, .umbral__linea { animation: none !important; }
  .umbral { height: auto; }
  .umbral__fijo { position: static; min-height: 100svh; overflow: visible; }
  .puerta, .eleccion__lista li, .umbral__pregunta { animation: none; opacity: 1; transform: none; }
  .umbral__marca { opacity: 1; transform: none; }
  .escena { height: auto; }
  .escena__fijo { position: static; height: auto; padding: 4rem 0; }
  .kit__vial, .kit__caja, .escena__notas li, .escena__familia { opacity: 1; transform: none; }
  /* Sin movimiento no hay compases que pasar: el relato se lee entero, de una
     vez, apilado. Es el texto completo — no se pierde nada por no animarlo. */
  .relato { display: grid; gap: 1.6rem; min-height: 0; max-width: 60ch; }
  .relato__compas { grid-area: auto; opacity: 1; transform: none; }
  .relato__compas.ido { opacity: 1; transform: none; }
  .umbral__escenario { transform: none !important; }
  .giro__eje, .giro__halo, .giro__brillo::after, .giro__foto { animation: none; }
  .giro__brillo { display: none; }
}


/* El enlace de salto sobre el negro del recorrido. */
.recorrido .salto { background: var(--oro, #c9a24a); color: #0d0b09; }