/* ROMÉ · página de inicio: la firma (portada), los elegidos, por dentro (despiece), las casas, cómo comprar. */

/* ===================== PORTADA · «La firma» =====================
   El arco del símbolo se abre como ventana; con el scroll la ventana crece a pantalla completa, el reloj de la vitrina
   responde al mouse y la sección siguiente cubre la portada mientras esta sube y se desenfoca (04 y 05). */
.portada { position: relative; height: calc(var(--alto-pin, 100lvh) * 3.12); }
.portada__pin { position: sticky; top: 0; height: var(--alto-pin, 100lvh); overflow: hidden; background: var(--hueso); touch-action: pan-y; }
/* La geometría del reposo, en un solo lugar (portada.js calcula lo mismo): el arco mide el 44 % del alto desde el 30 %
   (en el celular, el 42 % desde el 24 %), salvo en pantallas bajas (un notebook, un iPhone con las barras de Safari),
   donde se achica lo justo para que el título, la bajada y el botón quepan enteros, con 24 px (16 en el celular) de aire
   sobre el borde, más el de la guía «baja» (24 y 22 px: la línea de 20 px con su aire). Texto bajo el arco: título
   (--fs) + 24 + bajada de una línea (26,4) + 24 + botón (48). */
.portada__in { position: absolute; inset: 0;
  --fs: min(94px, 10.4svh, 7.2vw);
  --a-top: 30svh;
  /* vuelta 4: el arco también deja el aire de la guía «baja» (--guia-aire) entre el botón y el borde */
  --guia-aire: 24px; --guia-bajo: 14px;
  --ah: max(18svh, min(44svh, calc(70svh - .7 * var(--fs) - 146.4px - var(--guia-aire))));
  --aw: calc(var(--ah) * .47619); }

/* la ventana nace con el recorte del arco en reposo (las mismas variables de .firma-arco, que son las de portada.js): sin
   la firma, con red lenta, el arco ya está en su lugar desde la primera pintura (antes nacía cerrada y aparecía de golpe
   cuando corría el módulo: H1-01). De fondo, el tono medio de la piedra mientras llega la foto */
.ventana { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #D9CBB5;
  clip-path: inset(var(--a-top) calc(50% - var(--aw) / 2) calc(100% - var(--a-top) - var(--ah)) calc(50% - var(--aw) / 2) round calc(var(--aw) / 2) calc(var(--aw) / 2) 0 0); }
.ventana__cam { position: absolute; inset: 0; transform-origin: var(--cx, 50%) var(--cy, 50%); }
.escena { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.escena > img, .escena > video, .escena > picture, .escena > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.escena > video { opacity: 0; transition: opacity var(--t-reveal) var(--e-out); }
.escena > video.corre { opacity: 1; }

/* el reloj: foto oficial recortada, en su propia capa (476 × 900 a escala 1) */
.pieza { position: absolute; left: 0; top: 0; width: 476px; height: 900px; transform-origin: 0 0; will-change: transform; }
.pieza__in, .pieza__tilt, .pieza__sombra { position: absolute; inset: 0; }
.pieza__tilt { transform-origin: 50.3% 46.8%; will-change: transform; }
.pieza__reloj { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* sombras según luz.json (cae abajo a la derecha, 16,3°): se dibujan desde el mismo recorte (una sola descarga) */
.pieza__sombra canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
/* la luz del video también cae sobre el reloj (C2b): la luz que hay bajo él (blanca al sol, gris en la sombra de la
   persiana; portada.js la saca del video), multiplicada sobre la foto y solo dentro de su silueta (la máscara es el
   mismo recorte). La foto no cambia: es la luz de la escena encima. Aparece con el video */
.pieza__luz { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; opacity: 0;
  mix-blend-mode: multiply;   /* sin filter: el gris se hace en el lienzo (despiece-movil, arreglo 3) */
  -webkit-mask: url(../img/portada/reloj.webp) 0 0 / 100% 100% no-repeat; mask: url(../img/portada/reloj.webp) 0 0 / 100% 100% no-repeat;
  transition: opacity var(--t-reveal) var(--e-soft); }
.pieza__luz.viva { opacity: 1; }
/* las sombras ya vienen difuminadas en su lienzo (portada.js, silueta()): sin filter (despiece-movil, arreglo 2) */
.pieza__sombra--c { opacity: .36; }
.pieza__sombra--s { opacity: .17; }
.pieza__brillo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; overflow: hidden;
  -webkit-mask: radial-gradient(circle 232px at 239.5px 421.5px, #000 97%, transparent 100%);
  mask: radial-gradient(circle 232px at 239.5px 421.5px, #000 97%, transparent 100%); }
/* la franja del brillo mide 3 anchos de la pieza y se mueve con transform (antes background-position, que repintaba) */
.pieza__brillo i { position: absolute; top: 0; bottom: 0; left: -100%; width: 300%; will-change: transform; transform: translate3d(-53.3%, 0, 0);
  background: linear-gradient(104deg, rgba(255, 255, 255, 0) 42%, rgba(255, 246, 230, .82) 50%, rgba(255, 255, 255, 0) 58%); }
.pieza__cristal { position: absolute; border-radius: 50%; overflow: hidden; pointer-events: none; }
.pieza__cristal i { position: absolute; inset: -20% -40%; opacity: 0; will-change: transform;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .38) 30.7%, rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, 0) 46.5%); }

/* la pieza a pantalla llena: nombre y enlace a su ficha (su borde derecho es el de la cabecera, el del contenedor) */
.pieza-cap { position: absolute; right: max(var(--gutr), calc((100% - var(--ancho)) / 2 + var(--gutr))); bottom: clamp(28px, 5svh, 48px); z-index: 5; color: var(--navy); text-align: right; text-decoration: none;
  opacity: 0; transform: translate3d(0, 8px, 0); pointer-events: none; transform-origin: 100% 100%;
  transition: opacity var(--t-ui) var(--e-out), transform var(--t-reveal) var(--e-out), filter var(--t-ui) var(--e-out), scale var(--t-press) var(--e-out); }
.pieza-cap:active { scale: .97; }
/* H1-11 (vuelta 5): un velo difuso de hueso detrás: sobre la sombra de la persiana la leyenda bajaba a 3,8-4,1:1. Es un
   degradado (sin filter: blur, que en la portada viva se repintaba) */
.pieza-cap::before { content: ""; position: absolute; inset: -30px -44px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(236 227 214 / .82), rgb(236 227 214 / .68) 62%, rgb(236 227 214 / 0)); }
.pieza-cap b { display: block; font: italic 400 22px/1.2 var(--serif); font-variation-settings: "opsz" 30; }
.pieza-cap > span { display: block; margin-top: 6px; font: 600 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.pieza-cap u { display: inline-block; margin-top: 14px; text-decoration: none; font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.portada.con-cap .pieza-cap { opacity: 1; transform: none; pointer-events: auto; }

/* texto de la portada: cruza la base del arco; la bajada, en una línea (contrato de dirección: «una línea de 12 palabras») */
.portada__texto { position: absolute; left: 0; right: 0; z-index: 5; padding: 0 var(--gutr) 0 var(--gut); text-align: center;
  top: calc(var(--a-top) + var(--ah) - .3 * var(--fs)); }
.portada__titulo { font: 400 var(--fs)/1 var(--serif); letter-spacing: -.018em; font-variation-settings: "opsz" 72; white-space: nowrap; color: var(--navy); }
.portada__titulo .palabra { white-space: nowrap; }
.portada__titulo .ch { display: inline-block; }
.portada__bajada { margin: 24px auto 0; max-width: none; font-size: 16.5px; line-height: 1.6; color: var(--tinta); text-wrap: balance; }
.portada__bajada .p { display: inline-block; }
.portada__cta { display: flex; width: fit-content; margin: 24px auto 0; }

/* la firma: el símbolo entero, la tilde a la É y el arco que se abre (menos de 2 s, saltable) */
/* el arco y la tilde nacen en su lugar (la misma geometría de .portada__in que usa portada.js; proporción 900/1890) */
.firma-arco { position: absolute; z-index: 4; max-width: none; clip-path: inset(0 0 0 0); pointer-events: none;
  height: var(--ah); width: var(--aw); top: var(--a-top); left: calc(50% - var(--aw) / 2); }
.firma-tilde { position: absolute; z-index: 7; max-width: none; opacity: 0; transform-origin: 0 0; pointer-events: none; will-change: transform;
  left: calc(50% - var(--aw) / 2 + var(--aw) * .3); top: calc(var(--a-top) - var(--aw) * .77); width: calc(var(--aw) * .6522); height: calc(var(--aw) * .64); }
html:not(.firma-corre) .firma-arco, html:not(.firma-corre) .firma-tilde, html:not(.firma-corre) .cab__logo .logo-sin { display: none; }
.saltar { position: absolute; right: max(var(--gutr), calc((100% - var(--ancho)) / 2 + var(--gutr)));   /* en la columna, como la leyenda (H2-06) */ bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 11; display: none; min-height: 44px; padding: 14px 6px 10px;
  border: 0; background: none; cursor: pointer; color: var(--navy); font: 700 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; transition: scale var(--t-press) var(--e-out); }
.saltar:active { scale: .97; }
/* pausa de la luz (el video se mueve más de 5 s: WCAG 2.2.2). Discreta, abajo a la izquierda, frente a la leyenda del
   reloj; aparece cuando el video corre (portada.js) */
.luz-pausa { position: absolute; left: max(var(--gut), calc((100% - var(--ancho)) / 2 + var(--gut))); bottom: clamp(28px, 5svh, 48px); z-index: 6;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--linea); background: color-mix(in srgb, var(--papel) 72%, transparent); color: var(--navy); cursor: pointer;
  opacity: .8; transition: opacity var(--t-micro) var(--e-soft), visibility 0s, scale var(--t-press) var(--e-out);
  animation: pausa-entra var(--t-ui) var(--e-out) backwards; }   /* aparece con un fundido, no de golpe (H2-03) */
.luz-pausa[hidden] { display: none; }
@keyframes pausa-entra { from { opacity: 0; } }
/* apenas la hoja de los elegidos empieza a cubrir la portada, la pausa se va: en el celular subía con la portada y pasaba
   bajo «MENÚ» unos 600 px (H2-01). Al volver arriba, vuelve */
.luz-pausa.lejos { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-micro) var(--e-out), visibility 0s linear var(--t-micro); }
.luz-pausa .icono { width: 15px; height: 15px; }
.luz-pausa:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .luz-pausa:hover { opacity: 1; } }
.saltar span { display: inline-block; padding-bottom: 6px; border-bottom: 1px solid rgba(20, 39, 62, .55); }
/* «Saltar» se apaga cuando empieza a llegar el texto: en un celular bajo, el botón «Ver la colección» llega justo donde está */
html.firma-corre .portada:not(.lista) .saltar { display: block; animation: saltar-sale var(--t-salida) var(--e-out) 1.1s both; }
@keyframes saltar-sale { to { opacity: 0; visibility: hidden; } }

@keyframes firma-sube { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
@keyframes firma-abre { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes asienta { from { transform: scale(1.1); } }
@keyframes aclara { from { opacity: 0; filter: blur(9px); } }
@keyframes sube-10 { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
html.firma-corre .portada .firma-arco { animation: firma-sube var(--t-ui) var(--e-out) 0s both, firma-abre var(--t-ui) var(--e-io) .9s both; }
html.firma-corre .portada .firma-tilde { animation: firma-sube var(--t-ui) var(--e-out) 0s both; }
html.firma-corre .portada .ventana { animation: aparece var(--t-reveal) steps(1, end) both; }
html.firma-corre .portada .ventana__cam { animation: asienta var(--t-lento) var(--e-out) .9s both; }
html.firma-corre .portada .portada__titulo .ch { animation: aclara var(--t-ui) var(--e-out) both; animation-delay: calc(.9s + var(--i) * 20ms); }
/* en el celular, la letra se aclara con 4 px de subida y 2 px de blur como mucho (ver base.css) */
@keyframes aclara-cel { from { opacity: 0; filter: blur(2px); transform: translate3d(0, 4px, 0); } }
@media (max-width: 759px) { html.firma-corre .portada .portada__titulo .ch { animation-name: aclara-cel; } }
html.firma-corre .portada .portada__bajada .p { animation: sube-10 var(--t-ui) var(--e-out) both; animation-delay: calc(1.1s + var(--i) * 24ms); }
html.firma-corre .portada .portada__cta { animation: sube-10 var(--t-ui) var(--e-out) 1.3s both; }
/* la cabecera aparece desde los 0,7 s, pero el logo (sin la tilde) antes: a los 0,66 s ya está entero, y la tilde que
   viaja (420 a 880 ms) aterriza en un logo que se ve y se entrega sin aclararse de golpe (H1-14, vuelta 5) */
html.firma-corre .cab__lado, html.firma-corre .cab__menu { animation: aparece var(--t-reveal) var(--e-out) .7s both; }
html.firma-corre .cab__logo { animation: aparece var(--t-ui) var(--e-out) .2s both; }
html.firma-corre:not(.tilde-puesta) .cab__logo .logo-con { opacity: 0; }
html.firma-corre:not(.tilde-puesta) .cab__logo .logo-sin { opacity: 1; }
html.firma-corre .wa-flotante { transform: translateY(140%); opacity: 0; pointer-events: none; }
.portada.lista .firma-arco, .portada.lista .firma-tilde { visibility: hidden; }

/* celular: el arco sube y el título baja en dos líneas, debajo del arco. Texto: título en dos líneas (2,08 × --fs)
   + 14 + bajada en dos líneas (49,6) + 18 + botón (48), a 18 px del arco y con 16 px de aire sobre el borde, más los
   22 de la guía «baja» */
@media (max-width: 759px) {
  .portada__in { --fs: clamp(38px, 11.4vw, 46px); --a-top: 24svh; --guia-aire: 22px; --guia-bajo: 8px;
    --ah: max(18svh, min(42svh, calc(76svh - 2.08 * var(--fs) - 163.6px - var(--guia-aire)))); }
  .portada__texto { top: calc(var(--a-top) + var(--ah) + 18px); }
  .portada__titulo { white-space: normal; line-height: 1.04; }
  .portada__bajada { font-size: 15.5px; margin-top: 14px; max-width: 34ch; }
  .portada__cta { width: 100%; margin-top: 18px; }
  .pieza-cap { left: var(--gut); right: var(--gutr); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .pieza-cap b { font-size: 19px; }
  /* en el celular el botón «Ver la colección» ocupa todo el ancho de abajo: la pausa va arriba a la derecha */
  .luz-pausa { left: auto; right: var(--gutr); bottom: auto; top: calc(var(--cab-h) + 12px); }
}

/* ===================== GUÍAS · «el fantasma» (vuelta 4) =====================
   Pedido de Lucas tras probar la v8 en su iPhone (21-10): «algo que guíe, como un fantasma para hacer scroll o para
   deslizar». Discretas, de joyería: una línea fina por la que pasa una perla, haciendo el gesto que se pide, y una palabra
   en versalitas. Tres: al pie de la portada (portada.js), el carrusel de los elegidos que se asoma con «Desliza»
   (elegidos.js) y «Baja para abrirlos» en la primera parada de la pila (despiece-movil.js). Llegan con un fundido, se van
   con la primera interacción (más rápido de lo que llegaron) y no vuelven en la visita. Con menos movimiento: texto
   quieto (el carrusel y la pila no existen con menos movimiento). Solo transform y opacity. */
.guia { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none;
  font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--navy);
  opacity: 0; visibility: hidden; transition: opacity var(--t-salida) var(--e-out), visibility 0s linear var(--t-salida); }
.guia.ver { opacity: .8; visibility: visible; transition: opacity var(--t-reveal) var(--e-out), visibility 0s; }
/* la perla solo corre mientras la guía se ve; al irse, la guía no sale del documento (sacarla repintaba la portada: un
   cuadro de 581 ms en WebKit). Sin will-change fijo: una capa propia dentro de la portada fijada obligaba a componer
   aparte la hoja de los elegidos que pasa por encima (medido: 15 a 20 % menos cuadros en WebKit) */
.guia:not(.ver) .guia__linea::after { animation: none; }
.guia__txt { padding-left: .24em; }   /* compensa el espaciado de la última letra: la palabra queda centrada */
.guia__linea { position: relative; display: block; flex: none; width: 1px; height: 20px; background: rgb(20 39 62 / .2); }
/* la perla: aparece arriba, baja con la curva de cruce de la casa y se apaga abajo; descansa y vuelve (dos veces el lento) */
.guia__linea::after { content: ""; position: absolute; left: -1.5px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--navy);
  opacity: 0; animation: guia-baja calc(var(--t-lento) * 2) var(--e-io) infinite; }
@keyframes guia-baja { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 14%, 52% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate3d(0, 20px, 0); } }
/* «Desliza»: la línea va acostada y la perla corre hacia la izquierda, como el dedo */
.guia__linea--x { width: 28px; height: 1px; }
.guia__linea--x::after { left: auto; right: -2px; top: -1.5px; animation-name: guia-desliza; }
@keyframes guia-desliza { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 14%, 52% { opacity: 1; } 72%, 100% { opacity: 0; transform: translate3d(-28px, 0, 0); } }
/* la portada: la línea sola, centrada al pie del alto visible (svh: con la barra de Safari a la vista), en el aire que el
   arco le deja (--guia-aire). Con menos movimiento, la palabra quieta en su lugar */
.guia--portada { position: absolute; left: 0; right: 0; z-index: 6; top: calc(100svh - var(--guia-bajo) - 20px); height: 20px; justify-content: center; }
.guia--portada .guia__txt { display: none; }
/* computador (1024 px o más; Lucas, 22-10: «falta una invitación a bajar»): la línea sola no se notaba en una portada tan
   grande. Lleva su palabra, a la izquierda y a la altura de la línea, que sigue en el eje del botón: la misma «Baja» de la
   versión con menos movimiento y de la pila del celular. En la tableta y el celular sigue siendo solo la línea */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .guia--portada .guia__txt { display: block; position: absolute; top: 50%; right: calc(50% + 14px); padding-left: 0; white-space: nowrap; translate: 0 -50%; }
}
@media (max-height: 479px) { .guia--portada { display: none; } }   /* donde el texto ya no cabe entero, no hay pie */
/* los elegidos: «Desliza» y su línea, a la derecha, en el aire entre la bajada y el carrusel (no ocupa lugar) */
.guia--desliza { position: relative; z-index: 2; height: 0; display: block; }
.guia--desliza .guia__in { position: absolute; right: 0; top: calc(clamp(28px, 6vw, 48px) / 2 - 5.5px); display: flex; align-items: center; gap: 10px; }
.guia--desliza .guia__txt { padding-left: 0; }
/* la pila: bajo los nombres de los tres, centrada (despiece-movil.js la ubica); llega cuando la escena se asienta */
.guia--pila { position: absolute; left: 0; right: 0; top: 0; z-index: 4; }
.guia--pila.ver { transition-delay: .35s; }
/* en pantallas bajas, a la izquierda del botón de WhatsApp (la frase puede partirse en dos líneas) */
.guia--pila.al-lado { right: auto; left: var(--gut); align-items: flex-start; }
.guia--pila.al-lado .guia__txt { padding-left: 0; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .guia, .guia.ver { transition: none; }   /* quieta del todo: aparece y se va sin fundido */
  .guia__linea { display: none; }
  .guia--portada .guia__txt { display: block; }
  .guia--desliza { display: none; }
}
/* el carrusel solo existe con el dedo o en pantallas bajas; en el modo fijo de los elegidos la guía no va */
@media (min-width: 760px) and (min-height: 560px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .guia--desliza { display: none; }
}

/* ===================== LOS ELEGIDOS: uno por uno ===================== */
/* Pedido de Lucas (21-10): con la lista que se encendía no se entendía qué texto era de qué foto. Ahora va uno por uno
   (elegidos.js). Computador y tableta: la sección queda fija, el arco con la foto a la izquierda y un solo bloque de texto
   a la derecha; cada ~55svh de scroll pasa al siguiente. Celular: carrusel horizontal nativo. Menos movimiento: lista. */
.elegidos { position: relative; z-index: 3; margin-top: calc(var(--alto-pin, 100lvh) * -1); background: var(--hueso);
  padding-block: clamp(96px, 14svh, 150px) clamp(72px, 10vw, 140px); --eleg-paso: 55svh; }
/* la sombra que la hoja echa sobre la portada: un degradado quieto (se pinta una vez) en vez de un box-shadow de 60 px,
   que se repintaba mientras la hoja subía (despiece-movil, arreglo 6). Mismo alcance y tono que la sombra de antes */
.elegidos::before { content: ""; position: absolute; left: 0; right: 0; top: -58px; height: 58px; pointer-events: none;
  background: linear-gradient(to top, rgb(var(--sombra) / .15), rgb(var(--sombra) / .06) 45%, rgb(var(--sombra) / 0)); }
.elegidos__cabeza { max-width: 760px; }
.elegidos__cabeza .bajada { margin-top: 20px; }
.eleg__escenario { display: none; }

/* el bloque de cada reloj: foto (en el celular y en la lista quieta), nombre, frase, marca · referencia, precio y enlace */
.eleg__item { min-width: 0; }
.eleg__foto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--hueso-2); transition: scale var(--t-press) var(--e-out); }
.eleg__foto:active { scale: .985; }
.eleg__foto img, .eleg__arco img { width: 100%; height: 100%; object-fit: cover; }
/* foto chica (archivo < 600 px): entera y sin pasar de ×1,25 en píxeles de pantalla, sobre el crema propio de la foto */
.eleg__foto picture.chica, .eleg__arco picture.chica, .casa__foto picture.chica { background: var(--fondo-foto); }
.eleg__foto picture.chica img, .eleg__arco picture.chica img, .casa__foto picture.chica img { position: absolute; inset: 0; margin: auto; object-fit: contain;
  max-width: var(--tope, 100%); max-height: calc(var(--tope, 80%) * 1.25); }
.eleg__foto picture { position: absolute; inset: 0; }
.eleg__texto { display: grid; gap: 10px; align-content: start; }
.eleg__nombre { font: 400 26px/1.12 var(--serif); letter-spacing: -.008em; color: var(--navy); }
.eleg__frase { font: italic 400 18px/1.35 var(--serif); color: var(--tinta); }
.eleg__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; color: var(--tenue); }
.eleg__meta .rotulo-chico { color: var(--tenue); }
.eleg__precio { font: 600 15px/1 var(--sans); color: var(--navy); }
.eleg__ver { justify-self: start; margin-top: 4px; }

/* contador «03 / 10» y puntos para saltar a cualquiera */
.eleg__nav { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; margin-top: 18px; }   /* en 320 px los puntos bajan juntos */
.eleg__nav[hidden] { display: none; }
.eleg__contador { min-width: 5ch; font: 600 13px/1 var(--sans); letter-spacing: .14em; color: var(--tenue); }
.eleg__contador b { color: var(--navy); font-weight: 600; }
.eleg__puntos { display: flex; flex-wrap: wrap; }
.eleg__punto { position: relative; width: 24px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.eleg__punto::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: rgb(20 39 62 / .28); transition: width var(--t-ui) var(--e-out), margin var(--t-ui) var(--e-out), background-color var(--t-ui) var(--e-out); }
.eleg__punto[aria-current="true"]::after { width: 16px; margin-left: -8px; border-radius: 3px; background: var(--navy); }
.eleg__punto:active::after { scale: .9; }
@media (hover: hover) and (pointer: fine) { .eleg__punto:hover::after { background: rgb(20 39 62 / .6); } .eleg__punto[aria-current="true"]:hover::after { background: var(--navy); } }
.eleg__pie { margin-top: clamp(24px, 4vw, 40px); transition: opacity var(--t-salida) var(--e-out), visibility 0s linear 0s; }
/* en la última tarjeta el pie se aparta: su botón ya lleva a la colección */
.elegidos.en-mas .eleg__pie { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--t-salida) var(--e-out), visibility 0s linear var(--t-salida); }
/* la última tarjeta: «Y 59 más» (excepción del 22-10, elegidos.js). Cuatro relojes de la colección en abanico dentro del
   arco de la casa; se abre cuando la tarjeta se enciende (05, el marco que se abre): de juntos a repartidos, con la curva
   de salida y el tiempo de revelado de la casa, de a uno cada 80 ms. Con menos movimiento, abierto y quieto */
.eleg__mas .eleg__foto { background: var(--hueso-2); }
.eleg__todos { justify-self: start; margin-top: 8px; }
.abanico { position: absolute; inset: 0; pointer-events: none; }
.abanico__foto { position: absolute; left: 50%; top: 56%; z-index: var(--z, 0); width: 36%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--fondo-foto);
  box-shadow: 0 0 0 1px rgb(20 39 62 / .09), 0 14px 26px -18px rgb(var(--sombra) / .45);
  transform: translate(-50%, -50%); transform-origin: 50% 130%;
  transition: transform var(--t-reveal) var(--e-out) calc(var(--z, 0) * 80ms); }
.abanico__foto picture, .abanico__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.eleg__mas.activo .abanico__foto, .abanico--arco.activa .abanico__foto {
  transform: translate(calc(-50% + var(--k, 0) * 40%), -50%) rotate(calc(var(--k, 0) * 8deg)); }

/* con el dedo (celular y tableta) o en pantallas bajas: carrusel horizontal nativo, un reloj por pantalla. Medido en el
   iPhone 14 de WebKit y con tacto real en Chromium (21-10): con el dedo avanza siempre de a un reloj y no se salta
   ninguno; la sección fija con un deslizamiento normal se saltaba 2 de 10 */
.eleg__lista { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; margin: clamp(28px, 6vw, 48px) calc(var(--gutr) * -1) 0 calc(var(--gut) * -1); }
.eleg__lista::-webkit-scrollbar { display: none; }
.eleg__lista > .eleg__item { display: grid; gap: 18px; align-content: start; padding: 2px var(--gutr) 4px var(--gut); scroll-snap-align: center; scroll-snap-stop: always; }
/* la foto, tan grande como deja la pantalla con el texto debajo: foto y texto se ven juntos mientras se desliza */
.eleg__lista > .eleg__item .eleg__foto { width: min(100%, 380px, max(220px, calc((100svh - var(--cab-h) - 250px) * .8))); }
/* el alto del carrusel queda reservado antes de los datos (I3); medido con los 10 de hoy */
.js .eleg__lista:empty { min-height: calc(min(100vw - 40px, 380px, max(220px, (100svh - var(--cab-h) - 250px) * .8)) * 1.25 + 227px); }
@media (min-width: 400px) { .js .eleg__lista:empty { min-height: calc(min(100vw - 40px, 380px, max(220px, (100svh - var(--cab-h) - 250px) * .8)) * 1.25 + 198px); } }   /* el texto parte menos */
/* celular acostado o tableta chica: foto y texto lado a lado, y la foto cabe en la pantalla */
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  .eleg__lista > .eleg__item { grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
  .eleg__lista > .eleg__item .eleg__foto { width: min(38vw, 420px, calc((100svh - var(--cab-h) - 48px) * .8)); }
  .js .eleg__lista:empty { min-height: calc(min(38vw, 420px, (100svh - var(--cab-h) - 48px) * .8) * 1.25 + 6px); }
}

/* computador (mouse o trackpad, con alto para hacerlo): la sección fija y un reloj por paso */
@media (min-width: 760px) and (min-height: 560px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .elegidos { padding-block: 0; }
  .js .eleg__alto { height: calc(var(--eleg-n, 10) * var(--eleg-paso) + 100svh); }
  .js .eleg__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding-top: var(--cab-h); }
  .js .eleg { width: 100%; margin-top: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 112px); align-items: center; }
  .js .eleg__escenario { display: flex; justify-content: center; align-items: center; height: calc(100svh - var(--cab-h) - 9svh); min-height: 0; }
  /* el arco siempre 4:5: tan alto como deja la pantalla, sin pasar el ancho de su columna */
  .js .eleg__arco { position: relative; width: min(100%, calc((100svh - var(--cab-h) - 9svh) * .8)); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 0 0; background: var(--hueso-2); }
  /* la foto que entra sube desde abajo (barrido) sobre la que sale, que queda entera debajo; las demás, ocultas sin transición */
  .js .eleg__arco > picture { position: absolute; inset: 0; opacity: 0; clip-path: inset(100% 0 0 0); transition: none; }
  .js .eleg__arco > picture.activa { opacity: 1; clip-path: inset(0); z-index: 1; transition: clip-path var(--t-ui) var(--e-io); }
  /* la foto que sale queda entera debajo hasta que la nueva la cubre: el arco nunca se ve vacío a mitad del cambio */
  .js .eleg__arco > picture.sale { opacity: 1; clip-path: inset(0); transition: none; }
  /* el abanico de la última tarjeta entra al arco como una foto más */
  .js .eleg__arco .abanico--arco { opacity: 0; clip-path: inset(100% 0 0 0); background: var(--hueso-2); }
  .js .eleg__arco .abanico--arco.activa { opacity: 1; clip-path: inset(0); z-index: 1; transition: clip-path var(--t-ui) var(--e-io); }
  .js .eleg__arco .abanico--arco.sale { opacity: 1; clip-path: inset(0); }
  .js .eleg__arco > picture img { transform: scale(1.04); transition: transform var(--t-lento) var(--e-out); transform-origin: 50% 46%; }
  .js .eleg__arco > picture.activa img { transform: scale(1); }
  .js .eleg__arco { transition: scale var(--t-press) var(--e-out); }
  .js .eleg__arco:active { scale: .985; }   /* responde al presionar, como las tarjetas (H1-13) */
  @media (hover: hover) and (pointer: fine) {
    .js .eleg__arco { cursor: pointer; }   /* abre la ficha del reloj encendido */
    .js .eleg__arco:hover > picture.activa img { transform: scale(var(--zoom-arco, 1)); transition: transform var(--t-lento) var(--e-soft); }
  }
  .js .eleg__lado { display: grid; gap: clamp(18px, 3.4svh, 36px); align-content: center; min-width: 0; }
  .js .eleg__lista { display: grid; grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin: 0; scroll-snap-type: none; }
  /* un solo bloque de texto: todos en la misma celda; el que entra sube y se aclara, el que sale sube y se apaga */
  .js .eleg__lista > .eleg__item { grid-area: 1 / 1; display: block; padding: 0; visibility: hidden; opacity: 0; transform: translate3d(0, 14px, 0); filter: blur(6px);
    transition: opacity var(--t-salida) var(--e-out), transform var(--t-salida) var(--e-out), filter var(--t-salida) var(--e-out), visibility 0s linear var(--t-salida); }
  .js .eleg__lista > .eleg__item.sale { transform: translate3d(0, -14px, 0); }
  .js .eleg__lista > .eleg__item.activo { visibility: visible; opacity: 1; transform: none; filter: none;
    transition: opacity var(--t-reveal) var(--e-out) var(--t-press), transform var(--t-reveal) var(--e-out) var(--t-press), filter var(--t-reveal) var(--e-out) var(--t-press), visibility 0s; }
  .js .eleg__lista > .eleg__item .eleg__foto { display: none; }
  .js .eleg__nombre { font-size: clamp(32px, 3.3vw, 50px); }
  .js .eleg__frase { font-size: clamp(19px, 1.5vw, 22px); }
  .js .eleg__texto { gap: 12px; }
  .js .eleg__nav, .js .eleg__pie { margin-top: 0; }
  .js .eleg__lista:empty { min-height: 0; }
  .js .eleg__lista > .eleg__error { padding-inline: 0; }
  @media (max-height: 699px) { .js .elegidos__cabeza .bajada { display: none; } }   /* en pantallas bajas no cabía */
}

/* si los relojes no cargan: el aviso y «Escríbenos» (inicio.js). Sin JS, el <noscript> */
.eleg__lista > .eleg__error { display: grid; gap: 14px; justify-items: start; align-content: start; padding-inline: var(--gut) var(--gutr); }

/* ===================== POR DENTRO (despiece 3D) ===================== */
.dentro { position: relative; z-index: 2; background: var(--hueso); }
.dentro__intro { padding-block: clamp(96px, 12vw, 168px) clamp(24px, 3vw, 40px); text-align: center; }
.dentro__intro .bajada { margin: 22px auto 0; max-width: 46ch; }
.dentro__acciones { margin-top: 26px; display: flex; justify-content: center; }
/* «Ver la secuencia» guarda su lugar desde el principio (visibility, no hidden) y aparece cuando el 3D está listo,
   sin correr la página. Sin JS o sin 3D no existe */
.dentro__acciones .espera { visibility: hidden; }
html:not(.js) .dentro__acciones, .sin-3d .dentro__acciones { display: none; }
.dentro__escena-alta { position: relative; height: 580svh; }
.dentro__escena { position: sticky; top: 0; height: 100svh; overflow: clip;
  background: radial-gradient(120% 90% at 50% 40%, var(--papel) 0%, var(--hueso) 58%, #E4D9CA 100%); }
.dentro__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dentro__parada { position: absolute; left: max(var(--gut), calc((100% - var(--ancho)) / 2 + var(--gut))); top: calc(var(--cab-h) + 20px); z-index: 3; pointer-events: none;
  font: 400 clamp(24px, 2vw, 32px)/1.1 var(--serif); transition: opacity var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out); }
.dentro__parada.cambia { opacity: 0; transform: translate3d(0, 8px, 0); }
.rotulos { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
/* el rótulo que sale se va en --t-salida y el que entra espera esa salida: al cambiar de parada no se ven los dos uno
   encima del otro (H1-04; como en la pila del celular) */
.rotulo { position: absolute; left: 0; top: 0; width: 0; opacity: 0; transition: opacity var(--t-salida) var(--e-out); will-change: transform, opacity; }
.rotulo.visible { opacity: 1; transition: opacity var(--t-ui) var(--e-out) var(--t-salida); }
.rotulo__linea { position: absolute; left: 0; top: 0; width: 1px; background: rgba(20, 39, 62, .34); }
.rotulo__punto { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px rgba(236, 227, 214, .8); }
.rotulo__texto { position: absolute; left: 0; width: max-content; max-width: min(24vw, 290px); transform: translateX(-50%); text-align: center; }
/* un velo de hueso, difuso, detrás de cada rótulo: sobre el fondo no se nota y sobre una correa o un brazalete
   (el dorado del C&O) mantiene el texto legible */
.rotulo__texto::before { content: ""; position: absolute; inset: -8px -14px; z-index: -1; background: rgb(236 227 214 / .93); filter: blur(8px); }   /* .86 → .93 (H1-13) */
.rotulo__marca { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--piedra-oscura); }
.rotulo__titulo { display: block; margin-top: 6px; font: 400 18px/1.25 var(--serif); color: var(--navy); text-wrap: balance; }
.tras-dos-puntos { display: inline-block; }   /* despiece.js: el título se corta en los dos puntos (cada mitad, entera) */
.rotulo__dato { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--espresso); text-wrap: pretty; }
.rotulo__dato + .rotulo__dato { margin-top: 4px; }
.rotulo--pieza .rotulo__texto { writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font: 600 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); }
.rotulo--nombre .rotulo__titulo { font-size: 22px; }
/* paneles de vidrio con las cifras (03): solo datos respaldados. Van en la columna de la página, como los relojes (el 3D
   los encuadra en 1.440 px como máximo: despiece.js), así que cada panel queda bajo su reloj también en pantallas anchas */
.paneles { position: absolute; left: 0; right: 0; bottom: clamp(56px, 8svh, 84px); z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px);
  padding-inline: var(--gut) var(--gutr); max-width: var(--ancho); margin-inline: auto; pointer-events: none; visibility: hidden; transition: visibility 0s linear var(--t-ui); }
.paneles.visible { visibility: visible; transition-delay: 0s; }
/* el vidrio, más blanco que antes: la correa del C&O pasa por detrás y su rótulo bajaba a un contraste de 2 a 2,5;
   el enlace va siempre al pie del panel, a la misma altura en los tres */
.panel { pointer-events: auto; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 20px 20px; border: 1px solid rgba(255, 255, 255, .55);
  background: linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .62)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), 0 24px 40px -28px rgb(var(--sombra) / .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity var(--t-ui) var(--e-out), transform var(--t-reveal) var(--e-out); }
.paneles.visible .panel { opacity: 1; transform: none; }
.paneles.visible .panel:nth-child(2) { transition-delay: 80ms; } .paneles.visible .panel:nth-child(3) { transition-delay: 160ms; }
.panel__marca { font: 600 12px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--piedra-oscura); }
.panel__cifras { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.panel__cifra b { display: block; font: 400 30px/1 var(--serif); letter-spacing: -.01em; }
.panel__cifra span { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.35; color: var(--espresso); }
.panel__ver { display: inline-flex; margin-top: auto; padding-top: 12px; min-height: 56px; align-items: center; font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: scale var(--t-press) var(--e-out); }
/* «Ver este reloj» se subraya y responde al mouse como los enlaces de acción (.enlace): el subrayado se recoge */
.panel__ver span, .pieza-cap u { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--t-ui) var(--e-soft); }
@media (hover: hover) and (pointer: fine) { .panel__ver:hover span, .pieza-cap:hover u { background-size: 38% 1px; } }
.panel__ver:active { scale: .97; }
@media (prefers-reduced-transparency: reduce) { .panel { background: var(--papel); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.dentro__cargando { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); text-align: center; color: var(--piedra-oscura);
  font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; transition: opacity var(--t-ui) var(--e-out); }
.dentro__cargando i { display: block; width: 120px; height: 1px; margin: 12px auto 0; background: rgba(20, 39, 62, .15); overflow: hidden; }
.dentro__cargando i b { display: block; height: 100%; width: 100%; background: var(--navy); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--t-salida) linear; }
.dentro__cargando.listo { opacity: 0; pointer-events: none; }
.nota-tamano { display: none; }   /* la nota de la pila (la escribe el HTML; solo en el celular con el 3D) */
/* celular: «pila» (despiece-movil.js, la variante C que eligió Lucas el 21-10). Cinco paradas en 480svh (antes 760svh:
   un 37 % menos de dedo); la escena mide 100lvh (llena la pantalla también con la barra de Safari escondida) y el 3D se
   compone dentro del alto visible. La tira de antes ya no se usa */
.tira { display: none; }
.lado-cel { display: none; }
@media (max-width: 759px) {
  .dentro__escena-alta { height: 480svh; }
  .dentro__escena { height: 100lvh; }
  .dentro__parada { top: calc(var(--cab-h) + 14px); z-index: 4; }
  .paneles { display: none; }
  /* la bajada: en la pila los tres van uno bajo otro (con la imagen fija siguen lado a lado) */
  html:not(.sin-3d) .lado-pc { display: none; }
  html:not(.sin-3d) .lado-cel { display: inline; }
  /* los rótulos de la comparación: a la derecha de cada reloj, a lo ancho (frases enteras) */
  .comparar { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .cmp { position: absolute; z-index: 3; left: 0; top: 0; opacity: 0; transform: translate3d(0, 0, 0);
    transition: opacity var(--t-salida) var(--e-out); will-change: transform, opacity; }
  .cmp.visible { opacity: 1; transition: opacity var(--t-ui) var(--e-out); }
  .cmp__in { display: block; transform: translate3d(0, 6px, 0); transition: transform var(--t-salida) var(--e-out); }
  .cmp.visible .cmp__in { transform: none; transition: transform var(--t-ui) var(--e-out); }
  .cmp__marca { display: block; font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--piedra-oscura); }
  .cmp__titulo { display: block; margin-top: 5px; font: 400 16px/1.22 var(--serif); color: var(--navy); text-wrap: pretty; }
  .cmp__dato { display: block; margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 1.38; color: var(--espresso); text-wrap: pretty; }
  .cmp__sin { display: block; margin-top: 5px; font: italic 400 15px/1.25 var(--serif); color: var(--piedra-oscura); }
  /* los nombres de los relojes (al principio y al final) y «Ver este reloj» al final */
  .nombre { position: absolute; left: 0; top: 0; width: 112px; text-align: center; opacity: 0; transition: opacity var(--t-salida) var(--e-out); }
  .nombre.visible { opacity: 1; transition: opacity var(--t-ui) var(--e-out); }
  .nombre__marca { display: block; font: 600 12px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--piedra-oscura); }
  .nombre__ref { display: block; font: 500 12px/1.35 var(--sans); letter-spacing: .02em; color: var(--piedra-oscura); font-variant-numeric: tabular-nums; }
  .nombre__gama { display: block; margin-top: 4px; min-height: 2.4em; font: 400 15px/1.2 var(--serif); color: var(--navy); text-wrap: balance; }   /* dos líneas siempre: los tres «Ver este reloj» en la misma línea */
  /* si no cabe en el ancho del nombre (320 px), se parte en dos líneas centradas, cada una con su subrayado (D2) */
  .nombre__ver { display: inline-block; margin-top: 8px; min-height: 44px; padding-top: 2px; font: 700 11px/1.55 var(--sans); letter-spacing: .06em; text-align: center;
    text-transform: uppercase; color: var(--navy); text-decoration: none; pointer-events: auto; }
  .nombre__ver span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .nombre__ver:active { scale: .97; }
  /* los tres se muestran del mismo tamaño: se dice al principio y al final */
  html:not(.sin-3d) .nota-tamano { display: block; position: absolute; left: var(--gut); right: var(--gutr); z-index: 4; top: calc(var(--cab-h) + 50px); margin: 0; font-size: 13px; line-height: 1.4; color: var(--tinta);
    opacity: 0; transition: opacity var(--t-salida) var(--e-out); pointer-events: none; }
  /* con la misma especificidad que la regla de arriba (vuelta 4: desde la vuelta 3 la nota quedaba en opacidad 0) */
  html:not(.sin-3d) .nota-tamano.visible { opacity: 1; transition: opacity var(--t-ui) var(--e-out); }
  /* el snap nativo de la pila (pantallas táctiles, despiece-movil.js): un blanco invisible por parada en el centro de su
     meseta, más la entrada (arriba de la sección) y la salida (arriba de «Las casas»). El blanco queda arriba del área de
     snap, que es la cabecera + 16 px (el scroll-padding-top de html): por eso la parada suma ese aire. scroll-snap-type
     va en html solo dentro de la sección («mandatory») y en la franja de sus bordes («proximity») */
  html.pila-snap { scroll-snap-type: y mandatory; }
  html.pila-snap-borde { scroll-snap-type: y proximity; }
  /* el corte de la inercia que entra desde afuera (vuelta 6, despiece-movil.js): la raíz no se desplaza por un momento */
  html.pila-corte { overflow: hidden; }
  .pila-blanco { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .pila-blanco--parada { top: calc(var(--p) * (480svh - 100lvh) + var(--cab-h) + 16px); }
  .pila-blanco--entrada { top: 0; }
  .pila-blanco--salida { top: 100%; }
  /* durante un gesto que entra desde arriba, valen solo la entrada y la primera parada (y desde abajo, la última y la
     salida): si Chromium decide la inercia con la página ya pasada, vuelve a esa parada (vuelta 6, despiece-movil.js) */
  html.pila-entra-baja .pila-blanco--parada:not(.pila-blanco--primera), html.pila-entra-baja .pila-blanco--salida,
  html.pila-entra-sube .pila-blanco--parada:not(.pila-blanco--ultima), html.pila-entra-sube .pila-blanco--entrada { scroll-snap-align: none; }
  /* la parada del cierre en el celular (cierre.js): el mismo mecanismo de la pila, un blanco en la composición completa y otro al final de la página */
  html.cierre-snap { scroll-snap-type: y mandatory; }
  html.cierre-snap-borde { scroll-snap-type: y proximity; }
  .cierre-blanco { position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }
  .cierre-blanco--pie { top: auto; bottom: 0; scroll-snap-align: end; scroll-snap-stop: normal; }
  .pie--con-parada { position: relative; }
  html.cierre-corte { overflow: hidden; }   /* corte de la inercia fuera de iOS (cierre.js) */
  /* la tabla de la comparación queda para el lector de pantalla también con el 3D (oculta a la vista, no con display:
     none); la foto de la imagen fija no se pide */
  html:not(.sin-3d) .dentro__fijo { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
    clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }
  html:not(.sin-3d) .dentro__fijo figure { display: none; }
}
/* imagen fija: menos movimiento, sin WebGL o si falla el 3D */
.dentro__fijo { display: none; }
.solo-fijo { display: none; }
.sin-3d .solo-fijo { display: inline; }
.sin-3d .solo-3d { display: none; }
.sin-3d .dentro__escena-alta { height: auto; }
.sin-3d .dentro__escena { position: relative; height: auto; background: none; padding-bottom: clamp(48px, 6vw, 96px); }
.sin-3d .dentro__lienzo, .sin-3d .rotulos, .sin-3d .dentro__parada, .sin-3d .dentro__cargando, .sin-3d .paneles, .sin-3d .tira { display: none; }
.sin-3d .dentro__fijo { display: block; }
.dentro__fijo figure { max-width: 1200px; margin: 0 auto; padding-inline: var(--gut) var(--gutr); }
.dentro__fijo img { width: 100%; height: auto; }
.dentro__fijo figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--piedra-oscura); }
.comparacion { width: calc(100% - var(--gut) - var(--gutr)); max-width: 1200px; margin: 28px auto 0; border-collapse: collapse; font-size: 14.5px; }
.comparacion th, .comparacion td { text-align: left; vertical-align: top; padding: 14px 12px; }
.comparacion thead th { font: 600 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--piedra-oscura); border-bottom: 1px solid var(--linea); }
.comparacion tbody th { font: 400 18px/1.2 var(--serif); }
.comparacion tbody tr + tr > * { border-top: 1px solid var(--linea-suave); }
.comparacion td b { display: block; font: 400 16px/1.3 var(--serif); }
.comparacion td span { display: block; margin-top: 4px; color: var(--espresso); font-size: 13.5px; }
.comparacion .sin-dato { color: var(--piedra-oscura); font-style: italic; }
@media (max-width: 759px) {
  .comparacion, .comparacion tbody, .comparacion tr, .comparacion th, .comparacion td { display: block; }
  .comparacion thead { display: none; }
  .comparacion tbody tr { padding-block: 18px; }
  .comparacion tbody tr + tr > * { border-top: 0; }
  .comparacion tbody tr + tr { border-top: 1px solid var(--linea-suave); }
  .comparacion th, .comparacion td { padding: 6px 0; }
  .comparacion tbody th { font-size: 20px; }
  .comparacion td::before { content: attr(data-marca); display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--piedra-oscura); }
  .comparacion td:empty { display: none; }
}
.dentro__fuentes { position: absolute; left: 50%; bottom: 10px; z-index: 3; width: min(92vw, 980px); transform: translateX(-50%); text-align: center;
  font-size: 12.5px; line-height: 1.5; color: var(--tinta); opacity: 0; transition: opacity var(--t-ui) var(--e-out); pointer-events: none; }   /* tinta: 6,7:1 (H1-13) */
.dentro__fuentes.visible { opacity: 1; }
/* en pantallas altas, la línea de las fuentes no pasa de unos 115 caracteres (a 1920 corría en líneas de 169): tres
   líneas que siguen bajo los paneles, que ahí suben a 8svh (en pantallas bajas no caben tres: queda como estaba) */
@media (min-width: 760px) and (min-height: 860px) { .dentro__fuentes { width: min(92vw, 760px); } }
.sin-3d .dentro__fuentes { position: static; transform: none; width: auto; max-width: 70ch; margin: 18px auto 0; padding-inline: var(--gut) var(--gutr); font-size: 13.5px; opacity: 1; }
@media (max-width: 759px) { .dentro__fuentes { left: var(--gut); right: var(--gutr); bottom: auto; top: calc(var(--cab-h) + 62px); width: auto; transform: none; text-align: left; font-size: 12px; } }
/* ===================== LA PARTE MEDIA: las casas, cómo comprar y preguntas (vuelta 4) =====================
   Lucas, tras probar la v8 en su iPhone: «siento que la parte media, sobre todo, se ve un poco plana». El movimiento sale
   de las referencias ya decididas (web/decisiones/ANIMACIONES-DECIDIDAS.md), no de efectos nuevos: cada casa con su reloj
   y sus cifras en paneles de vidrio (03) y el acercamiento lento al detalle con el mouse (09/10); las tres secciones se
   cubren como hojas en el computador (13; en el celular quedan seguidas, como dice RECETAS); las frases clave suben de a
   palabra 10 px, una vez (08); cómo comprar es una secuencia con su línea. Solo transform y opacity (y clip-path, solo
   desde 900 px); todo una vez; con menos movimiento, quieto. La lógica, en js/medio.js */
.medio { position: relative; z-index: 3; }
.ancla { display: block; height: 0; }   /* destino de #las-casas, #como-comprar y #preguntas, fuera de las hojas fijas */
.medio > section { position: relative; }
/* cada hoja echa una sombra quieta sobre la anterior: un degradado que se pinta una vez (como la de los elegidos) */
.medio > section::before { content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 44px; pointer-events: none;
  background: linear-gradient(to top, rgb(var(--sombra) / .11), rgb(var(--sombra) / .04) 45%, rgb(var(--sombra) / 0)); }
/* computador: el despiece queda quieto detrás mientras las casas lo cubren (13), y después cada hoja queda fija cuando su
   borde de abajo llega al de la pantalla (--pega, medio.js) y la siguiente sube encima; la de atrás se corre un 18 % */
@media (min-width: 1100px) and (prefers-reduced-motion: no-preference) {
  .js .medio { margin-top: -100svh; }
  .sin-anim .medio, .sin-3d .medio { margin-top: 0; }
  .js .medio > .casas, .js .medio > .compra { position: sticky; top: var(--pega, 0px); }
  .js .medio > .casas { z-index: 1; }
  .js .medio > .compra { z-index: 2; min-height: 100svh; display: flex; align-items: center; }
  .js .medio > .compra > .envoltura { width: 100%; }
  .js .medio > .preguntas { z-index: 3; }
}

/* ===================== LAS CASAS QUE ELEGIMOS (03 y 09/10) ===================== */
.casas { background: var(--papel); padding-block: clamp(88px, 11vw, 160px); }
.casas__cabeza { max-width: 780px; }
.casas__cabeza .bajada { margin-top: 20px; }
.casas__lista { margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--linea); }
/* cada casa: a la izquierda su nombre, para quién es, lo que trae y desde cuánto; a la derecha su reloj del despiece en
   el arco de la marca, con tres paneles de vidrio que montan su borde (maquinaria, cristal y garantía de ese reloj) */
.casa { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 5vw, 96px); align-items: center;
  padding-block: clamp(44px, 6vw, 96px); border-bottom: 1px solid var(--linea-suave); }
.casa__nombre { font: 400 clamp(56px, 7vw, 112px)/.92 var(--serif); letter-spacing: -.025em; font-variation-settings: "opsz" 96; }
.casa__para { margin-top: 14px; font: italic 400 clamp(22px, 1.9vw, 28px)/1.2 var(--serif); }
.casa__desc { margin-top: 18px; max-width: 46ch; font-size: 15.5px; line-height: 1.6; color: var(--tinta); }
.casa__desde { margin-top: 22px; font-size: 15px; line-height: 1.4; color: var(--tenue); }
.casa__desde b { margin-left: 4px; font-size: 17px; font-weight: 600; color: var(--navy); }
/* la colección filtrada por la casa (excepción del 22-10): «Ver los 9 C&O» */
.casa__todos { margin-top: 10px; }
.casa__reloj { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 240px); align-items: center; }
.casa__foto { position: relative; z-index: 0; display: block; width: 100%; max-width: 380px; justify-self: end; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--fondo-foto); }
.casa__foto picture { position: absolute; inset: 0; }
/* el arco de la marca, con una línea fina: sobre el papel, el crema de la foto casi no se distingue */
.casa__foto::after { content: ""; position: absolute; inset: 0; z-index: 1; border: 1px solid rgb(20 39 62 / .09); border-radius: inherit; pointer-events: none; }
.casa__foto img { width: 100%; height: 100%; object-fit: cover;
  transition: scale var(--t-lento) var(--e-out), transform var(--t-reveal) var(--e-out), transform-origin var(--t-reveal) var(--e-soft); }
/* el vidrio de los paneles del despiece (03), más chico */
.casa__paneles { position: relative; z-index: 1; margin: 0 0 0 -48px; display: grid; gap: 12px; }
.casa__panel { padding: 16px 18px 17px; border: 1px solid rgba(255, 255, 255, .6);
  background: linear-gradient(160deg, rgba(255, 255, 255, .84), rgba(255, 255, 255, .66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 40px -28px rgb(var(--sombra) / .5); }
.casa__panel[hidden] { display: none; }
.casa__panel dt { font: 600 11px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--piedra-oscura); }
.casa__panel dd { margin: 6px 0 0; }
.casa__panel b { display: block; font: 400 28px/1.05 var(--serif); letter-spacing: -.01em; color: var(--navy); }
.casa__panel dd span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.38; color: var(--espresso); }
.casa__cap { grid-column: 1; justify-self: end; width: 100%; max-width: 380px; margin-top: 16px; text-align: center; }
.casa__cap a { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; min-height: 44px; color: var(--navy); text-decoration: none;
  transition: scale var(--t-press) var(--e-out); }
.casa__cap a:active { scale: .97; }
.casa__ref { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tenue); }
.casa__cap u { padding-bottom: 6px; text-decoration: none; font: 700 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size var(--t-ui) var(--e-soft); }
/* al final, la garantía y de dónde salen los datos (H1-01 de la pasada 5: sus reglas se habían perdido en la vuelta 4) */
.casas__garantia { margin-top: clamp(32px, 4vw, 48px); max-width: 60ch; font-size: 15.5px; line-height: 1.6; color: var(--tinta); }
.casas__garantia a { color: var(--navy); }
.casas__nota { margin-top: 28px; max-width: 60ch; font-size: 13.5px; line-height: 1.6; color: var(--tenue); }
.casas__garantia + .casas__nota { margin-top: 12px; }
@media (min-width: 900px) {
  .casa__panel { -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
}
@media (prefers-reduced-transparency: reduce) { .casa__panel { background: var(--papel); -webkit-backdrop-filter: none; backdrop-filter: none; } }
/* 09/10: con el mouse, la foto se acerca lento al detalle que está bajo el puntero (medio.js pone el origen). El acercamiento
   es el mismo en las tres casas, ×1,12, también en la foto chica del Tempus (478 px): Lucas, 22-10, vio que solo esa no se movía */
@media (hover: hover) and (pointer: fine) {
  .casa__cap a:hover u { background-size: 38% 1px; }
  .casa__foto:hover img { transform: scale(var(--zoom-casa, 1.12));
    transition: scale var(--t-lento) var(--e-out), transform var(--t-lento) var(--e-soft), transform-origin var(--t-reveal) var(--e-soft); }
}
/* celular: nombre arriba; el reloj y sus paneles al lado, montados sobre su borde derecho; abajo, lo que trae */
@media (max-width: 899px) {
  .casa { grid-template-columns: 1fr; }
  .casa__reloj { grid-template-columns: minmax(0, 1fr) minmax(140px, 44%); }
  .casa__foto { justify-self: start; max-width: none; }
  .casa__paneles { margin-left: -30px; gap: 7px; }
  /* opaco y liso: el blanco del vidrio ya mezclado sobre el papel (el degradado translúcido sobre la foto bajaba WebKit
     a 39-42 fps en la pasada 5, C2e) */
  .casa__panel { padding: 10px 12px 11px; background: #FCFAF8; }
  .casa__panel dt { font-size: 11px; letter-spacing: .12em; }   /* F1-B de la pasada 5: 10 y 11,5 px quedaban bajo el piso */
  .casa__panel dd { margin-top: 4px; }
  .casa__panel b { font-size: 20px; }
  .casa__panel dd span { margin-top: 3px; font-size: 12px; line-height: 1.32; }
  .casa__cap { justify-self: start; max-width: none; }
}
/* el reloj entra al llegar al 85 % de la pantalla, una vez (medio.js pone .vista): en el celular sube y aparece, y la
   foto se asienta (de 1,06 a 1); desde 900 px entra barriendo desde la derecha, como la escena de la 03, y los paneles
   detrás, también barriendo, de a uno (120 ms) */
@media (prefers-reduced-motion: no-preference) {
  .js .casa__foto { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out); }
  .js .casa__foto img { scale: 1.06; }
  .js .casa__panel { opacity: 0; transform: translate3d(0, var(--sube), 0);
    transition: opacity var(--t-ui) var(--e-out), transform var(--t-reveal) var(--e-out); transition-delay: calc(240ms + var(--i, 0) * 80ms); }
  .js .casa__cap { opacity: 0; transition: opacity var(--t-reveal) var(--e-out) 480ms; }
  .js .casa__reloj.vista .casa__foto { opacity: 1; transform: none; }
  .js .casa__reloj.vista .casa__foto img { scale: 1; }
  .js .casa__reloj.vista .casa__panel { opacity: 1; transform: none; }
  .js .casa__reloj.vista .casa__cap { opacity: 1; }
  @media (min-width: 900px) {
    .js .casa__foto { opacity: 1; transform: none; clip-path: inset(0 0 0 100%); transition: clip-path var(--t-reveal) var(--e-io); }
    .js .casa__reloj.vista .casa__foto { clip-path: inset(0); }
    .js .casa__panel { transform: none; clip-path: inset(0 0 0 100%);
      transition: opacity var(--t-ui) var(--e-out), clip-path var(--t-ui) var(--e-io); transition-delay: calc(420ms + var(--i, 0) * 120ms); }
    .js .casa__reloj.vista .casa__panel { clip-path: inset(0); }
  }
}

/* ===================== CÓMO COMPRAR: una secuencia (pedido, pago, entrega, la caja) =====================
   Una línea a la izquierda que se dibuja con el scroll (la línea de lectura, al 62 % de la pantalla) y cada paso se
   enciende cuando la línea lo alcanza: punto lleno y nombre en azul; el actual, con su punto más grande (medio.js). Sin
   JS o con menos movimiento: la línea entera y todos encendidos */
.compra { background: var(--hueso); padding-block: clamp(88px, 11vw, 160px); }
.compra__grilla { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.compra__frase { font: 400 clamp(34px, 3.6vw, 56px)/1.14 var(--serif); letter-spacing: -.012em; }
.compra__frase em { font-style: italic; }
.compra__frase + .boton { margin-top: 32px; }
.compra__secuencia { position: relative; }
.compra__riel { position: absolute; left: 4px; top: 31px; bottom: 31px; width: 1px; background: var(--linea); overflow: hidden; }
.compra__riel i { position: absolute; inset: 0; background: var(--navy); transform-origin: 50% 0; }
.compra__pasos { list-style: none; margin: 0; padding: 0; }
.compra__paso { position: relative; display: grid; grid-template-columns: minmax(120px, 2fr) minmax(0, 5fr); gap: 8px 28px; padding: 22px 0 22px 36px; }
.compra__paso::before { content: ""; position: absolute; left: 0; top: 30.6px; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid var(--navy); background: var(--navy); transition: background-color var(--t-ui) var(--e-out), scale var(--t-ui) var(--e-out); }
.compra__nombre { font: 400 21px/1.25 var(--serif); color: var(--navy); transition: color var(--t-ui) var(--e-out); }
.compra__paso p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tinta); }
.compra__paso p a { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .js .compra__riel i { transform: scaleY(0); }
  .js .compra__paso::before { background: var(--hueso); scale: .78; }
  .js .compra__nombre { color: var(--tenue); }
  .js .compra__paso.encendido::before { background: var(--navy); scale: 1; }
  .js .compra__paso.actual::before { scale: 1.3; }
  .js .compra__paso.encendido .compra__nombre { color: var(--navy); }
}
@media (max-width: 899px) { .compra__grilla { grid-template-columns: 1fr; } }
@media (max-width: 559px) { .compra__paso { grid-template-columns: 1fr; } }

/* ===================== PREGUNTAS (sin acordeón: respuestas a la vista) =====================
   Aparecen escalonadas y sutiles: la línea de arriba se dibuja de izquierda a derecha, la pregunta sube 10 px y la
   respuesta la sigue 80 ms después; la segunda columna, 80 ms detrás de la primera */
.preguntas { background: var(--hueso-2); padding-block: clamp(80px, 10vw, 140px); }
.preguntas__lista { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(32px, 6vw, 96px); }
.pregunta { position: relative; padding-top: 22px; }
.pregunta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea); transform-origin: 0 50%; }
.pregunta dt { font: 400 22px/1.25 var(--serif); }
.pregunta dd { margin-top: 10px; font-size: 16px; line-height: 1.65; color: var(--tinta); max-width: 52ch; }
.pregunta dd a { color: var(--navy); }
@media (max-width: 759px) { .preguntas__lista { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .js .pregunta[data-aparece], .js .pregunta[data-aparece].es-visto { opacity: 1; transform: none; transition: none; }
  .js .pregunta::before { transform: scaleX(0); transition: transform var(--t-lento) var(--e-out) calc(var(--i, 0) * 80ms); }
  .js .pregunta dt, .js .pregunta dd { opacity: 0; transform: translate3d(0, var(--sube), 0); transition: opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out); }
  .js .pregunta dt { transition-delay: calc(120ms + var(--i, 0) * 80ms); }
  .js .pregunta dd { transition-delay: calc(200ms + var(--i, 0) * 80ms); }
  .js .pregunta.es-visto::before { transform: none; }
  .js .pregunta.es-visto dt, .js .pregunta.es-visto dd, .js .pregunta:focus-within dt, .js .pregunta:focus-within dd { opacity: 1; transform: none; }
}

/* 08 · las frases clave, de a palabra: suben 10 px y aparecen, una vez, 40 ms una tras otra (movimiento.js las parte) */
@media (prefers-reduced-motion: no-preference) {
  .js [data-palabras] .pal { display: inline-block; opacity: 0; transform: translate3d(0, 10px, 0); }
  .js [data-palabras].es-visto .pal { opacity: 1; transform: none;
    transition: opacity var(--t-reveal) var(--e-out), transform var(--t-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * 40ms); }
}
/* si el JS no llegó a tiempo (la clase la pone el <head> a los 3,5 s), todo a la vista */
.sin-anim .casa__foto, .sin-anim .casa__panel, .sin-anim .casa__cap, .sin-anim [data-palabras] .pal, .sin-anim .pregunta dt, .sin-anim .pregunta dd {
  opacity: 1 !important; transform: none !important; clip-path: none !important; }
.sin-anim .pregunta::before, .sin-anim .compra__riel i { transform: none !important; }
.sin-anim .casa__foto img { scale: 1 !important; }

/* ===================== NOVEDADES (agregado B): la lista por WhatsApp, antes del cierre =====================
   Un bloque quieto y centrado: la pregunta (de a palabra, 08), la frase y el botón que abre WhatsApp con «Hola, quiero
   recibir las novedades de ROMÉ» (data-wa="novedades", whatsapp.js); al lado, el Instagram */
.novedades { position: relative; background: var(--hueso); padding-block: clamp(72px, 9vw, 128px); border-top: 1px solid var(--linea-suave); }
.novedades__in { display: grid; justify-items: center; text-align: center; }
.novedades__titulo { max-width: 22ch; font: 400 clamp(30px, 3.4vw, 50px)/1.12 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.novedades__bajada { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--tinta); }
.novedades__acciones { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; }
.novedades__ig .icono { width: 18px; height: 18px; }

/* ===================== CIERRE · «La firma al revés» =====================
   Por defecto (sin JS o con menos movimiento) es la quietud: el símbolo entero, arco y tilde, con la frase debajo.
   Con movimiento, la ventana se cierra sobre el reloj con el scroll y el arco y la tilde vuelven con la física de la
   entrada: el arco se cierra en cruce, baja la tilde y las letras se aclaran (--t-ui); al volver a subir, todo sale más rápido. */
.cierre { position: relative; background: var(--hueso); color: var(--navy); text-align: center; }
.cierre__pin { position: relative; height: max(100svh, 600px); overflow: hidden; }
.cierre__ventana { display: none; }
.cierre__arco { position: absolute; z-index: 2; max-width: none; --ah: 44svh; --aw: calc(var(--ah) * .47619); height: var(--ah); width: var(--aw); top: 30svh; left: calc(50% - var(--aw) / 2); }
.cierre__tilde { position: absolute; z-index: 3; max-width: none; --aw: calc(44svh * .47619); left: calc(50% - var(--aw) / 2 + var(--aw) * .3); top: calc(30svh - var(--aw) * .77); width: calc(var(--aw) * .6522); height: calc(var(--aw) * .64); }
.cierre__texto { position: absolute; left: 0; right: 0; z-index: 4; top: calc(74svh + 26px); padding: 0 var(--gutr) 0 var(--gut); }
.cierre__frase { font: italic 400 min(94px, 10.4svh, 7.2vw)/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "opsz" 72; padding-bottom: .08em; white-space: nowrap; }
.cierre__texto .boton { margin-top: 22px; }
@media (max-width: 759px) {
  .cierre__arco { --ah: 42svh; top: 24svh; }
  .cierre__tilde { --aw: calc(42svh * .47619); top: calc(24svh - var(--aw) * .77); }
  .cierre__texto { top: calc(66svh + 18px); }
  .cierre__frase { font-size: clamp(38px, 11.4vw, 46px); }
}
@media (prefers-reduced-motion: no-preference) {
  .js .cierre--vivo .cierre__alto { height: 182svh; }
  .js .cierre--vivo .cierre__pin { position: sticky; top: 0; height: 100svh; }
  .js .cierre--vivo .cierre__ventana { display: block; position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #C9B39A; clip-path: inset(0); visibility: visible; transition: visibility 0s; }
  .js .cierre--vivo.cerrada .cierre__ventana { visibility: hidden; transition: visibility 0s linear var(--t-ui); }
  .cierre__escena { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
  .cierre__escena img { display: block; width: 100%; height: 100%; }
  /* el reloj con sus dos sombras ya difuminadas en lienzos (cierre.js, con silueta() de la portada). Antes eran dos
     drop-shadow en CSS sobre una foto que cambia de escala en cada cuadro (despiece-movil, arreglo 7) */
  .cierre__reloj { position: absolute; left: 0; top: 0; width: 476px; height: 900px; max-width: none; transform-origin: 0 0; will-change: transform; }
  .cierre__reloj canvas { position: absolute; max-width: none; }
  .cierre__reloj-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
  .js .cierre--vivo .cierre__arco { clip-path: inset(0 0 100% 0); transition: clip-path var(--t-salida) var(--e-io); }
  .js .cierre--vivo.cerrada .cierre__arco { clip-path: inset(0); transition: clip-path var(--t-ui) var(--e-io); }
  .js .cierre--vivo .cierre__tilde { opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out); }
  .js .cierre--vivo.cerrada .cierre__tilde { opacity: 1; transform: none; transition: opacity var(--t-ui) var(--e-out) var(--t-ui), transform var(--t-ui) var(--e-out) var(--t-ui); }
  .js .cierre--vivo:not(.cerrada) .cierre__frase .ch { opacity: 0; filter: blur(9px); transition: opacity var(--t-salida) var(--e-out), filter var(--t-salida) var(--e-out); transition-delay: 0s; }
  .js .cierre--vivo.cerrada .cierre__frase .ch { opacity: 1; filter: none; transition: opacity var(--t-ui) var(--e-out), filter var(--t-ui) var(--e-out); transition-delay: calc(.5s + var(--i, 0) * 20ms); }
  /* en el celular, con 4 px de subida y 2 px de blur como mucho (ver base.css) */
  @media (max-width: 759px) {
    .js .cierre--vivo:not(.cerrada) .cierre__frase .ch { filter: blur(2px); transform: translate3d(0, 4px, 0); transition: opacity var(--t-salida) var(--e-out), filter var(--t-salida) var(--e-out), transform var(--t-salida) var(--e-out); }
    .js .cierre--vivo.cerrada .cierre__frase .ch { transform: none; transition: opacity var(--t-ui) var(--e-out), filter var(--t-ui) var(--e-out), transform var(--t-ui) var(--e-out); transition-delay: calc(.5s + var(--i, 0) * 20ms); }
  }
  .js .cierre--vivo:not(.cerrada) .cierre__texto .boton { opacity: 0; transform: translate3d(0, 12px, 0); pointer-events: none; transition: opacity var(--t-salida) var(--e-out), transform var(--t-salida) var(--e-out), scale var(--t-press) var(--e-out); }
  .js .cierre--vivo.cerrada .cierre__texto .boton { opacity: 1; transform: none; transition: opacity var(--t-ui) var(--e-out) 1s, transform var(--t-ui) var(--e-out) 1s, scale var(--t-press) var(--e-out); }
  /* con el teclado se puede llegar al botón antes de que el cierre se cierre: con el foco se ve siempre (D5) */
  .js .cierre--vivo:not(.cerrada) .cierre__texto .boton:focus-visible { opacity: 1; transform: none; pointer-events: auto; transition: none; }
  /* llegada de golpe (cierre.js pone .cierre--rapido al armarlo con el scroll ya quieto): la misma secuencia, sin las esperas, completa
     en ~0,85 s (la normal, en 1,46 s) */
  .js .cierre--vivo.cierre--rapido.cerrada .cierre__ventana { transition: visibility 0s linear 280ms; }
  .js .cierre--vivo.cierre--rapido.cerrada .cierre__arco { transition: clip-path 280ms var(--e-io); }
  .js .cierre--vivo.cierre--rapido.cerrada .cierre__tilde { transition: opacity 280ms var(--e-out) 200ms, transform 280ms var(--e-out) 200ms; }
  .js .cierre--vivo.cierre--rapido.cerrada .cierre__frase .ch { transition: opacity 300ms var(--e-out), filter 300ms var(--e-out); transition-delay: calc(.12s + var(--i, 0) * 14ms); }
  @media (max-width: 759px) {
    .js .cierre--vivo.cierre--rapido.cerrada .cierre__frase .ch { transition: opacity 300ms var(--e-out), filter 300ms var(--e-out), transform 300ms var(--e-out); transition-delay: calc(.12s + var(--i, 0) * 14ms); }
  }
  .js .cierre--vivo.cierre--rapido.cerrada .cierre__texto .boton { transition: opacity 300ms var(--e-out) 450ms, transform 300ms var(--e-out) 450ms, scale var(--t-press) var(--e-out); }
}

/* ===================== menos movimiento ===================== */
@media (prefers-reduced-motion: reduce) {
  .portada { height: auto; }
  .portada__pin { position: relative; height: max(100svh, 640px); }
  .elegidos { margin-top: 0; box-shadow: none; }
  .elegidos::before { display: none; }
  .eleg__arco picture { transition: none; }
  .pieza-cap:active, .saltar:active, .panel__ver:active, .eleg__foto:active, .eleg__arco:active { scale: none; }
  /* los elegidos, como una lista quieta: cada reloj con su foto y su texto juntos */
  .eleg__lista { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 44px 28px;
    overflow: visible; scroll-snap-type: none; margin-inline: 0; }
  .eleg__lista > .eleg__item, .eleg__lista > .eleg__error { padding: 0; }
  .eleg__lista > .eleg__item .eleg__foto { width: 100%; }
  .eleg__nav { display: none; }
  .abanico__foto { transform: translate(calc(-50% + var(--k, 0) * 40%), -50%) rotate(calc(var(--k, 0) * 8deg)); transition: none; }
  .elegidos.con-mas .eleg__pie { display: none; }   /* la lista quieta termina en la tarjeta, que ya lleva el botón */
}