/* ============================================================================
   MAISON RARE — Sistema visual
   Marfil · Arena · Latón.  Didone editorial + geométrica + monoespaciada.
   Paleta clara: fondo crema cálido, tinta parda, acento latón.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
img,svg,canvas{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}

:root{
  /* nombres heredados del tema oscuro; ahora describen una paleta clara:
     --obsidian = fondo de página (crema), --ivory = tinta */
  --obsidian:#F6F2EA;
  --panel:#EFE9DD;
  --panel-2:#E9E1D2;
  --panel-3:#E1D7C4;
  --ivory:#232019;
  /* contraste medido sobre --obsidian: --muted 5.3:1, --muted-2 4.6:1 (AA) */
  --muted:#6B6356;
  --muted-2:#786D59;
  /* --brass solo para adornos (3.6:1); para texto en latón, --brass-lt (6.3:1) */
  --brass:#9A7A45;
  --brass-lt:#6F5528;
  --line:rgba(35,32,25,.16);
  --line-soft:rgba(35,32,25,.08);

  /* Tipografía de sistema, al modo de Apple o Rolex: una sola familia neutra
     para todo el sitio. Los tres nombres se conservan porque describen papeles
     —titular, texto, rótulo— y siguen usándose en toda la hoja; hoy los tres
     resuelven a la misma pila, así que cambiar de fuente es tocar aquí. */
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1560px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:74px;

  /* respuesta a interacción (<=200ms) vs. coreografía de entrada */
  --t-tap:.18s;
  --t-hover:.2s;

  /* escala de z-index — no usar literales fuera de aquí */
  --z-below:-1;
  --z-media:2;
  --z-content:3;
  --z-overlay:4;
  --z-raised:5;
  --z-drop:10;
  --z-nav:200;
  /* el buscador tapa la cabecera desde la que se abre */
  --z-srch:210;

  /* El sitio es de esquina viva: estos radios son solo del buscador, que es
     una lámina flotante y no una caja del documento. Si algún día se redondea
     algo más, sale de aquí y no de un literal suelto. */
  --r:16px;
  --r-sm:8px;
  --z-grain:9999;
}

/* ---------- base -------------------------------------------------------- */
html{scroll-behavior:smooth}
body{
  background:var(--obsidian);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* grano de papel sutil sobre todo el documento */
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  /* sin mix-blend-mode: mezclar toda la ventana en cada frame costaba fps en móvil */
  opacity:.07;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
::selection{background:var(--brass);color:#FFFDF7}
:focus-visible{outline:2px solid var(--brass-lt);outline-offset:3px;border-radius:2px}

/* Una palabra más ancha que la pantalla ensancha el viewport entero: en el
   móvil ya no encaja `width=device-width` y toda la página se ve reducida.
   Pasaba de verdad con las rutas del aviso de catálogo vacío (360 -> 471 px).
   Se rompen por donde haga falta las cadenas sin espacios: rutas, referencias
   y correos. El texto normal sigue partiendo por palabras. */
p,li,h1,h2,h3,h4,blockquote,dd,dt,figcaption,span,b,a{overflow-wrap:break-word}
code,kbd,samp{overflow-wrap:anywhere;word-break:break-word}

.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right));
}
.rule{height:1px;background:var(--line-soft);border:0}

/* ---------- tipografía -------------------------------------------------- */
.display{
  font-family:var(--serif);font-weight:500;text-wrap:balance;
  font-size:clamp(2.9rem,8.2vw,7.6rem);
  line-height:.94;letter-spacing:-.03em;
}
.display em{font-style:italic;font-weight:400;color:var(--brass-lt)}
.h2{
  font-family:var(--serif);font-weight:500;text-wrap:balance;
  font-size:clamp(2rem,4.4vw,3.9rem);
  line-height:1.02;letter-spacing:-.025em;
}
.h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2vw,1.85rem);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.lede{font-size:clamp(1rem,1.25vw,1.2rem);color:#544E42;font-weight:400;max-width:56ch;text-wrap:pretty}
.small{font-size:.9rem;color:var(--muted)}

.label{
  font-family:var(--mono);font-size:.66rem;font-weight:400;
  letter-spacing:.26em;text-transform:uppercase;color:var(--brass-lt);
}
.label--muted{color:var(--muted-2)}
.idx{font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;color:var(--muted-2)}

/* ---------- botones ----------------------------------------------------- */
.btn{
  --bg:transparent;--fg:var(--ivory);--bd:var(--line);
  position:relative;display:inline-flex;align-items:center;gap:.8em;
  padding:1.05em 2em;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;overflow:hidden;transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--ivory);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-hover) var(--ease);z-index:var(--z-below);
}
.btn>*{position:relative}
.btn:hover{color:var(--obsidian);border-color:var(--ivory)}
.btn:hover::before{transform:scaleX(1)}
.btn--brass{--bd:var(--brass);--fg:var(--brass-lt)}
.btn--brass::before{background:var(--brass)}
.btn--brass:hover{color:#100D07;border-color:var(--brass)}
.btn--solid{--bg:var(--ivory);--fg:#F6F2EA;--bd:var(--ivory)}
.btn--solid::before{background:var(--brass)}
.btn--solid:hover{color:#FFFDF7}
.btn__arrow{display:inline-block;transition:transform var(--t-hover) var(--ease)}
.btn:hover .btn__arrow{transform:translateX(4px)}

.link-u{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory);border-bottom:1px solid var(--line);padding-bottom:.45em;
  transition:border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.link-u:hover{color:var(--brass-lt);border-color:var(--brass)}

/* ---------- navegación -------------------------------------------------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);height:var(--nav-h);
  display:flex;align-items:center;
  /* backdrop-filter fuera de la transición: es de lo más caro de animar */
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(246,242,234,.82);backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:100%}
.brandmark{
  font-family:var(--serif);font-size:1.06rem;letter-spacing:.34em;text-transform:uppercase;
  white-space:nowrap;line-height:1;
}
.brandmark span{color:var(--brass-lt)}
.nav__links{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.6rem)}
.nav__links a{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);position:relative;padding-block:.4em;transition:color var(--t-hover) var(--ease);
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform var(--t-hover) var(--ease);
}
.nav__links a:hover{color:var(--ivory)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav__links a[aria-current]{color:var(--ivory)}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);background:none;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger i{display:block;width:16px;height:1px;background:var(--ivory);transition:transform var(--t-tap) var(--ease),opacity var(--t-tap)}
.nav.is-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav.is-open .burger i:nth-child(2){opacity:0}
.nav.is-open .burger i:nth-child(3){transform:translateY(-3px) rotate(-45deg)}
@media(max-width:999px){
  .burger{display:flex}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:flex-start;
    gap:0;background:rgba(246,242,234,.98);backdrop-filter:blur(18px);
    padding:1rem max(var(--gutter),env(safe-area-inset-right)) 2.4rem
              max(var(--gutter),env(safe-area-inset-left));
    border-bottom:1px solid var(--line-soft);
    /* El panel arranca 74 px por debajo del borde (justo bajo la cabecera), así
       que para esconderlo hay que subirlo su propio alto MÁS esos 74. El -110%
       de antes era un porcentaje de la altura del propio menú: solo tapaba de
       verdad si medía más de 740 px, y con cinco enlaces mide 288 — quedaban
       45 px de panel colgando sobre la cabecera, encima del logo y de la
       hamburguesa, y además les robaban el toque. Con calc() ya no depende de
       cuántos enlaces haya.
       visibility, además, lo saca del recorrido del tabulador mientras está
       cerrado; al ser discreta, mantiene el panel visible durante la salida y
       reaparece al instante al abrir. */
    transform:translateY(calc(-100% - var(--nav-h)));
    visibility:hidden;
    transition:transform .6s var(--ease),visibility .6s var(--ease);
    /* En horizontal, o con el desplegable de marcas abierto, la lista pasa de
       lo que mide la pantalla y los últimos enlaces quedaban inalcanzables.
       svh para que la barra del navegador no lo descuadre; `contain` evita que
       el rebote al final del menú arrastre la página de detrás. */
    max-height:calc(100svh - var(--nav-h));
    overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .nav.is-open .nav__links{transform:translateY(0);visibility:visible}
  .nav__links a{width:100%;padding:1.15rem 0;border-bottom:1px solid var(--line-soft);font-size:.8rem}
}

/* ---------- desplegable de marcas en el header ------------------------- */
.nav__links .nav__grp{position:relative;display:flex;align-items:center}
.nav__links .nav__grp>a{cursor:pointer}
/* chevron: indica que el enlace abre un menú */
.nav__caret{
  display:inline-block;width:5px;height:5px;margin-left:.6em;vertical-align:middle;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform var(--t-tap) var(--ease);
}
.nav__links .nav__grp.is-open .nav__caret{transform:translateY(1px) rotate(-135deg)}
.nav__links .nav__drop{
  position:absolute;top:calc(100% + 1rem);left:50%;transform:translateX(-50%);
  margin-top:6px;
  display:grid;min-width:210px;padding:.5rem 0;
  background:rgba(246,242,234,.98);backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--line-soft);z-index:var(--z-drop);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--t-tap) var(--ease),margin-top var(--t-tap) var(--ease),visibility var(--t-tap);
}
.nav__links .nav__grp.is-open .nav__drop{
  opacity:1;visibility:visible;pointer-events:auto;margin-top:0;
}
.nav__links .nav__drop a{
  width:auto;padding:.7rem 1.4rem;border:0;white-space:nowrap;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.nav__links .nav__drop a::after{display:none}
.nav__links .nav__drop a:hover{color:var(--obsidian);background:rgba(35,32,25,.05)}
@media(max-width:999px){
  .nav__links .nav__grp{flex-direction:column;align-items:stretch;width:100%}
  .nav__links .nav__drop{
    position:static;transform:none;margin:0;opacity:1;visibility:visible;pointer-events:auto;
    min-width:0;padding:0;border:0;background:none;backdrop-filter:none;
    display:none;
  }
  .nav__links .nav__grp.is-open .nav__drop{display:grid}
  .nav__links .nav__drop a{padding:.95rem 0 .95rem 1.4rem;font-size:.72rem;border-bottom:1px solid var(--line-soft)}
}

/* El de bolsos llega oculto: `display:flex` de arriba ganaría al [hidden]. */
.nav__links .nav__grp[hidden]{display:none}

/* ---------- selector de idioma ------------------------------------------ */
/* Tres siglas juntas al final de la barra. Va dentro de la lista de enlaces
   para que en el teléfono aparezca al pie del menú, en una sola fila. */
.nav__links .nav__lang{display:flex;align-items:center;gap:.9rem}
.nav__links .nav__lang a{letter-spacing:.14em;font-size:.62rem}
@media(max-width:999px){
  .nav__links .nav__lang{gap:1.6rem;padding-top:1.2rem}
  .nav__links .nav__lang a{width:auto;border:0;padding:.6rem 0;font-size:.72rem}
}

/* ---------- buscador: lupa de la cabecera ------------------------------- */
/* Va en la barra y no dentro de la lista de enlaces: en móvil esa lista es un
   panel cerrado, y un buscador escondido detrás de una hamburguesa no lo usa
   nadie. Solo el icono —el enlace «Búsqueda» de al lado es el servicio de
   encargos, y dos rótulos parecidos seguidos no los distingue nadie. */
.nav__srch{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--muted);transition:color var(--t-hover) var(--ease);
}
.nav__srch:hover{color:var(--ivory)}
.nav__srch svg{width:17px;height:17px}
/* La lupa y la hamburguesa cierran la barra por la derecha; el hueco elástico
   queda entre el logotipo y los enlaces. */
.nav__links{margin-left:auto}
@media(max-width:999px){
  .nav__srch{margin-left:auto}
}

/* ---------- buscador: panel -------------------------------------------- */
.srch{position:fixed;inset:0;z-index:var(--z-srch);display:flex;justify-content:center}
/* `.srch` es flex, y flex gana al display:none que el navegador da a [hidden] */
.srch[hidden]{display:none}
html.has-srch{overflow:hidden}
.srch__scrim{
  position:absolute;inset:0;background:rgba(35,32,25,.34);backdrop-filter:blur(3px);
  opacity:0;transition:opacity var(--t-tap) var(--ease);
}
.srch.is-open .srch__scrim{opacity:1}
.srch__panel{
  /* un relleno para todas las filas: la sangría del panel se toca aquí */
  --srch-pad:clamp(20px,3vw,32px);
  position:relative;z-index:var(--z-raised);align-self:flex-start;
  /* el doble de canal a los lados: antes el panel casi rozaba la pantalla */
  margin-top:clamp(18px,9vh,104px);width:min(680px,100% - var(--gutter) * 2);
  max-height:min(76vh,720px);display:flex;flex-direction:column;
  background:var(--obsidian);border:1px solid var(--line);
  border-radius:var(--r);
  /* recorta las filas contra la curva: sin esto, la primera y la última
     asoman en escuadra por las esquinas del panel */
  overflow:hidden;
  box-shadow:0 26px 70px rgba(35,32,25,.18);
  opacity:0;transform:translateY(-10px);
  transition:opacity var(--t-tap) var(--ease),transform var(--t-tap) var(--ease);
}
.srch.is-open .srch__panel{opacity:1;transform:none}
.srch__bar{display:flex;align-items:center;gap:.9rem;padding:0 var(--srch-pad);
  border-bottom:1px solid var(--line-soft);flex:none}
.srch__ico{width:18px;height:18px;flex:none;color:var(--muted)}
.srch__input{
  flex:1;min-width:0;height:70px;background:none;border:0;outline-offset:-2px;
  font-family:var(--serif);font-size:1.16rem;color:var(--ivory);
}
.srch__input::placeholder{color:var(--muted-2);font-family:var(--sans);font-size:.94rem}
.srch__input::-webkit-search-cancel-button{display:none}
.srch__x{
  flex:none;background:none;border:1px solid var(--line-soft);padding:.45rem .8rem;cursor:pointer;
  border-radius:var(--r-sm);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.srch__x:hover{color:var(--ivory);border-color:var(--line)}
.srch__body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.srch__msg{padding:calc(var(--srch-pad) - 4px) var(--srch-pad);color:var(--muted-2);
  font-size:.92rem;line-height:1.55}
.srch__list{list-style:none;margin:0;padding:0}
.srch__item a{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,20px);
  padding:.85rem var(--srch-pad);border-bottom:1px solid var(--line-soft);
  transition:background-color var(--t-hover) var(--ease);
}
.srch__item:last-child a{border-bottom:0}
.srch__item a:hover,.srch__item[aria-selected="true"] a{background:var(--panel-2)}
.srch__thumb{flex:none;width:58px;aspect-ratio:1/1;background:var(--panel);overflow:hidden;
  border-radius:var(--r-sm);display:grid;place-items:center}
.srch__thumb img{width:100%;height:100%;object-fit:contain}
.srch__txt{flex:1;min-width:0;display:grid;gap:.18rem}
.srch__ref{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2)}
.srch__name{font-family:var(--serif);font-size:1.05rem;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srch__price{flex:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.srch__all{
  display:block;flex:none;padding:1.15rem var(--srch-pad);border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt);
}
.srch__all:hover{background:var(--panel-2)}
/* display:block también gana a [hidden]; sin esto el pie no se esconde */
.srch__all[hidden]{display:none}
@media(max-width:560px){
  .srch__price{display:none}
  .srch__thumb{width:46px}
}
@media(prefers-reduced-motion:reduce){
  .srch__panel,.srch__scrim{transition:none}
}

/* ---------- reveal ------------------------------------------------------ */
/* Cada bloque entra desenfocado y se enfoca al asomar. Tres cautelas:
   · el blur es de 7 px y dura menos que el fundido: difuminar es repintar, y
     cuanto antes termine, antes deja de costar;
   · es de una sola vez — nunca ligado a la posición del scroll, que obligaría a
     redibujar el desenfoque en cada frame;
   · al acabar, `.rv--done` quita el filtro del todo (ver initReveal). Dejar un
     `filter:blur(0)` permanente mantiene la capa y el paso de pintado para
     nada, además de crear un bloque contenedor que no queremos heredar. */
html.js .rv{
  opacity:0;transform:translateY(22px);filter:blur(7px);
  transition:opacity 1s var(--ease),transform 1s var(--ease),filter .75s var(--ease);
}
html.js .rv.in{opacity:1;transform:none;filter:blur(0)}
/* Gana a `.rv.in` por especificidad: si se escribe con menos clases, el
   `blur(0)` de arriba sigue mandando y el filtro no se retira nunca. */
html.js .rv.in.rv--done{filter:none}
.rv[data-d="1"]{transition-delay:.09s}.rv[data-d="2"]{transition-delay:.18s}
.rv[data-d="3"]{transition-delay:.27s}.rv[data-d="4"]{transition-delay:.36s}
.rv[data-d="5"]{transition-delay:.45s}.rv[data-d="6"]{transition-delay:.54s}

/* ---------- cabecera de sección ---------------------------------------- */
.sec{padding-block:clamp(72px,10vw,150px);position:relative}
/* Ritmo vertical. Antes cada página ajustaba su separación con `style=` suelto
   y dos secciones seguidas sumaban sus dos rellenos: 150 abajo + 150 arriba =
   300 px de nada entre bloques que se leen juntos. Estas tres clases son los
   únicos tamaños de separación que usa el sitio. */
.sec--flush-top{padding-top:0}
.sec--flush-bot{padding-bottom:0}
.sec--tight-bot{padding-bottom:clamp(40px,5vw,76px)}
.sec__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;
  padding-bottom:2.4rem;border-bottom:1px solid var(--line-soft);margin-bottom:clamp(2.4rem,5vw,4.5rem)}
.sec__head p.lede{max-width:44ch}

/* =========================================================================
   PORTADA DE VÍDEO
   Un plano a sangre y el nombre de la casa al pie. El vídeo es decoración:
   va mudo, y si no carga queda el póster; si tampoco hay póster, el degradado
   del contenedor. Por eso el bloque trae su propio fondo y no depende nunca
   del archivo.

   El plano es claro (un render sobre beige), así que la portada es placa
   clara: tinta oscura sobre el metraje. Oscurecerlo para escribir en crema
   apagaba el oro rosa y dejaba un marrón sucio.

   La sección es un raíl de varias pantallas con el plano pegado dentro: el
   scroll no pasa de largo, recorre el vídeo. Lo que dura el recorrido se
   cambia aquí, en --vhero-track. Sin JS, sin vídeo, con movimiento reducido o
   en el teléfono (donde el plano se reproduce solo) el raíl se encoge a una
   pantalla (.is-still): nada de lo que se lee depende del recorrido.
   ====================================================================== */
.vhero{
  --vhero-track:300svh;
  position:relative;height:var(--vhero-track);
  background:var(--obsidian);color:var(--ivory);
}
.vhero.is-still,
html:not(.js) .vhero{--vhero-track:100svh}
/* El plano se queda quieto mientras el raíl pasa por debajo. */
.vhero__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:flex-end;
  padding-block:calc(var(--nav-h) + 40px) clamp(64px,9vh,104px);
}
/* Mientras el vídeo no tiene imagen queda transparente, así que lo que se ve
   es este fondo: un fotograma del plano con el mismo encuadre (center/cover).
   No se usa el `poster` del <video>: iOS lo retira en cuanto se pide play() y,
   en la primera visita, con el vídeo aún sin caché, quedaba solo el degradado.
   El degradado sigue debajo por si la imagen tampoco llega.

   Con scroll (tablet y ordenador) es el primer fotograma, que es donde
   empieza el recorrido. En el teléfono es el último —la pieza montada—: es lo
   que queda al acabar el plano y lo que se ve si no llega a reproducirse. La
   consulta es la misma que decide el modo en initHeroFilm (site.js). */
.vhero__media{
  position:absolute;inset:0;
  background:
    url("../video/hero-poster.jpg") center/cover no-repeat,
    radial-gradient(ellipse at 50% 40%,#F3DCCB,#EFE4D6 52%,var(--obsidian) 100%);
}
@media (max-width:560px), (pointer:coarse) and (max-height:560px){
  .vhero__media{
    background-image:
      url("../video/hero-end.jpg"),
      radial-gradient(ellipse at 50% 40%,#F3DCCB,#EFE4D6 52%,var(--obsidian) 100%);
  }
}
.vhero__video{width:100%;height:100%;object-fit:cover}
/* En el teléfono el vídeo no se enseña hasta que de verdad se reproduce
   (.is-live, desde JS): antes, su primer fotograma taparía la pieza montada
   del fondo. Entra fundiéndose para que el relevo no sea un corte seco. */
.vhero.is-phone .vhero__video{opacity:0;transition:opacity .5s var(--ease)}
.vhero.is-phone .vhero__media.is-live .vhero__video{opacity:1}
/* El vídeo que no llega a cargarse se retira desde JS (.is-void) para no
   dejar el recuadro vacío de algunos navegadores sobre el degradado. */
.vhero__media.is-void .vhero__video{display:none}
/* Velo de papel: aclara arriba y abajo —donde caen la barra y el aviso de
   scroll— y pasa un tul por el centro para que el nombre se despegue de la
   caja del reloj sin llegar a lavar el metraje. */
.vhero__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(246,242,234,.7) 0%,rgba(246,242,234,0) 22%,rgba(246,242,234,0) 40%,rgba(246,242,234,.78) 82%,rgba(246,242,234,.94) 100%);
}
/* El fundido final: el mismo fotograma, ya desenfocado y con un velo negro,
   subiendo de opacidad con el scroll (--vhero-fade, que pone el JS de 0 a 1).

   No se desenfoca el vídeo con `filter`: eso obliga al navegador a rehacer el
   desenfoque de una capa a pantalla completa en cada fotograma. Aquí se funde
   a una imagen que YA está desenfocada —el último fotograma pasado por ffmpeg,
   15 kB—, que es solo una opacidad y no cuesta nada. Como esa imagen es el
   último fotograma, se lee igual que si el plano se desenfocara.

   El velo se cierra hacia abajo: el borde inferior es donde empieza el bloque
   de marcas, y llegando casi a negro por los dos lados el cambio de encuadre
   entre una capa y otra no se ve. */
.vhero__blurout{
  position:absolute;inset:0;pointer-events:none;z-index:var(--z-overlay);
  opacity:var(--vhero-fade,0);
  background:
    linear-gradient(180deg,rgba(15,14,12,.6) 0%,rgba(15,14,12,.72) 55%,rgba(15,14,12,.93) 100%),
    url("../video/hero-end-blur.jpg") center/cover no-repeat;
}
/* El nombre se va con el plano: dejarlo encima del negro, cuando lo que entra
   es otra sección, lo convertiría en un rótulo huérfano. */
.vhero__in{
  position:relative;z-index:var(--z-content);width:100%;
  opacity:calc(1 - var(--vhero-fade,0));
}
.vhero__eyebrow{
  font-family:var(--mono);font-size:.66rem;font-weight:400;
  letter-spacing:.34em;text-transform:uppercase;color:var(--brass-lt);
}
.vhero__name{
  font-family:var(--serif);font-weight:400;text-wrap:balance;
  font-size:clamp(2.4rem,8.6vw,7.4rem);line-height:.94;letter-spacing:.07em;
  /* el versalitas deja un hueco de más a la derecha (el espaciado va detrás de
     la última letra): se recentra empujando el bloque media letra */
  text-transform:uppercase;text-indent:.07em;
  margin:clamp(.7rem,1.8vh,1.2rem) 0 clamp(.9rem,2.2vh,1.5rem);
  /* halo de papel, no sombra: si el bucle sube una pieza hasta el pie, el
     nombre se perdería contra el metal */
  text-shadow:0 2px 24px rgba(246,242,234,.85);
}
.vhero__claim{
  position:relative;display:inline-block;padding-top:1.3rem;
  font-family:var(--mono);font-size:.68rem;
  letter-spacing:.3em;text-transform:uppercase;color:#554F43;
}
.vhero__claim::before{
  content:"";position:absolute;left:0;top:0;width:54px;height:1px;
  background:var(--line);
}
/* El aviso de scroll: filete vertical con la luz corriendo hacia abajo. Va al
   pie derecho, enfrente del nombre, para no cruzarse con él. */
.scrollcue{
  position:absolute;right:var(--gutter);bottom:clamp(26px,5vh,48px);
  z-index:var(--z-overlay);
  display:flex;flex-direction:column;align-items:center;gap:.7rem;
}
.scrollcue i{display:block;width:1px;height:46px;background:var(--line);
  position:relative;overflow:hidden}
.scrollcue i::after{
  content:"";position:absolute;inset:0;background:var(--brass);
  transform:translateY(-100%);animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
/* En cuanto el raíl arranca, el aviso sobra: ya está deslizando. */
.vhero.is-running .scrollcue{opacity:0;transition:opacity .4s var(--ease)}
@media(max-width:1099px) and (max-height:560px){
  .vhero__stage{padding-block:calc(var(--nav-h) + 16px) 60px}
}
@media(max-width:640px){
  .vhero .scrollcue{display:none}
}

/* =========================================================================
   MARCAS — bloque oscuro con el menú horizontal de casas
   Al fondo, el último fotograma de la portada desenfocado: la pieza que se
   acaba de montar se deshace en el color del bloque siguiente, y el salto
   entre las dos pantallas deja de ser un corte. Es una imagen quieta, no la
   foto de cada casa: el fondo no cambia al recorrer el menú.

   Dentro se redefine la paleta, así que las clases compartidas (.label, .h2,
   .btn, .rail) se invierten solas sin escribir una variante de cada una.
   ====================================================================== */
.brands{
  --obsidian:#0F0E0C;
  --panel:rgba(246,242,234,.05);
  --panel-2:rgba(246,242,234,.09);
  --panel-3:rgba(246,242,234,.13);
  --ivory:#F6F2EA;
  --muted:#A9A193;
  --muted-2:#BCB4A5;
  --brass:#C9A567;
  --brass-lt:#DFC28C;
  --line:rgba(246,242,234,.24);
  --line-soft:rgba(246,242,234,.11);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--obsidian);color:var(--ivory);
  padding-block:clamp(72px,10vw,150px);
}
/* Rótulo del carril («Relojes», «Bolsos») */
.brands__title{margin:0 0 clamp(14px,2.2vh,26px)}
/* El de bolsos, detrás: negro liso, sin el fotograma de la portada, y con
   menos aire arriba porque sigue al anterior sin cambio de color. */
.brands--plain{padding-top:clamp(24px,4vw,56px)}
/* `display:flex` en escritorio ganaría al [hidden] del bloque vacío. */
.brands[hidden]{display:none}
.brands__bg{position:absolute;inset:0;z-index:var(--z-below);pointer-events:none}
/* La misma imagen que usa el fundido de la portada: el último fotograma ya
   desenfocado con ffmpeg, a 1600 px. Se desenfoca en el archivo y no con
   `filter` para no tener una capa filtrada a pantalla completa repintándose;
   desenfocada comprime tan bien que pesa 15 kB. Sirve a resolución completa a
   propósito: una miniatura ampliada por el navegador no es un desenfoque, son
   pixelones, y se veían. */
.brands__bg i{
  position:absolute;inset:0;display:block;
  background:url("../video/hero-end-blur.jpg") center/cover no-repeat;
}
/* El velo. Arranca casi opaco arriba, que es justo donde termina el fundido de
   la portada: las dos capas encuadran la misma foto cada una en su caja, y sin
   oscurecer ese borde se veía el salto entre un encuadre y el siguiente. A
   partir de ahí se abre para dejar pasar el color por la banda de las
   tarjetas. */
.brands__bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(15,14,12,.93) 0%,rgba(15,14,12,.58) 26%,rgba(15,14,12,.62) 70%,rgba(15,14,12,.9) 100%);
}


/* El carril, con las medidas tomadas de rolex.com a 1440 px: tarjetas de
   395×659 (3:5), 8 px de separación, tres a la vista y un asomo de la cuarta,
   y el carril sangrando por la derecha hasta el borde de la pantalla —empieza
   en el margen y no termina, que es lo que invita a arrastrarlo—. */
.rail{position:relative;--rail-gap:8px}
/* la sangría a la derecha: el margen del contenedor se anula por ese lado */
.rail__frame{position:relative;padding-right:0}
.rail__viewport{
  display:flex;gap:var(--rail-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;cursor:grab;
  -webkit-overflow-scrolling:touch;
}
.rail__viewport::-webkit-scrollbar{display:none}
.rail__viewport.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.rail__viewport.is-drag *{pointer-events:none}

/* La tarjeta es la foto entera. El nombre y el botón van dentro, abajo y
   centrados, sobre un degradado que los despega de la imagen; no debajo, en el
   papel, como estaban. Sin esquinas redondeadas: en Rolex son rectas. */
.bcard{
  /* 3,27 tarjetas a la vista: las tres enteras y el asomo de la cuarta */
  flex:0 0 calc((100% - 2.27 * var(--rail-gap)) / 3.27);
  scroll-snap-align:start;position:relative;overflow:hidden;
  aspect-ratio:3/5;
  background:linear-gradient(180deg,rgba(246,242,234,.09),rgba(246,242,234,.02));
}
.bcard__media{position:absolute;inset:0}
.bcard__media img{
  width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .8s var(--ease);
}
.bcard:hover .bcard__media img,.bcard:focus-within .bcard__media img{transform:scale(1.04)}
/* El velo del pie: sin él, un nombre en blanco sobre una esfera clara no se
   lee. Sube hasta la mitad y muy suave, para no ensuciar la pieza. */
.bcard__media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,11,10,0) 38%,rgba(12,11,10,.32) 62%,rgba(12,11,10,.82) 100%);
}
.bcard__body{
  position:absolute;left:20px;right:20px;bottom:clamp(24px,3.4%,42px);
  z-index:var(--z-content);
  display:flex;flex-direction:column;align-items:center;gap:1.15rem;text-align:center;
}
.bcard__name{
  font-family:var(--serif);font-weight:500;letter-spacing:-.015em;text-wrap:balance;
  /* en Rolex el título mide un 8,9 % del ancho de la tarjeta */
  font-size:clamp(1.35rem,2.2vw,2.15rem);line-height:1.04;
  color:#FFFDF7;text-shadow:0 2px 18px rgba(12,11,10,.55);
}
.bcard .btn{color:#FFFDF7;--bd:rgba(255,253,247,.5)}
.bcard .btn:hover{color:var(--obsidian);border-color:#FFFDF7}
.bcard .btn::before{background:#FFFDF7}
.btn--sm{padding:.85em 1.6em;font-size:.64rem;letter-spacing:.18em}

/* Las flechas: redondas, una en cada extremo, a media altura de la tarjeta y
   por encima de ella.

   En rolex.com no hay flechas —el carril se arrastra y nada más—, pero sin
   ellas, con ratón, no hay nada que pulsar: se quedan por petición expresa.
   Son lo único que se aparta de la referencia. */
.rail__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:var(--z-raised);
  width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(255,253,247,.34);background:rgba(12,11,10,.4);
  backdrop-filter:blur(6px);
  color:#FFFDF7;cursor:pointer;display:grid;place-items:center;
  transition:background var(--t-hover) var(--ease),color var(--t-hover) var(--ease),
             border-color var(--t-hover) var(--ease),opacity var(--t-hover) var(--ease);
}
.rail__arrow svg{width:22px;height:22px}
.rail__arrow--prev{left:20px}
.rail__arrow--next{right:20px}
.rail__arrow:hover{background:#FFFDF7;color:var(--obsidian);border-color:#FFFDF7}
/* Sin sitio a donde ir, la flecha se aparta del todo: dejarla en gris sobre la
   foto solo añade un botón muerto encima de la pieza. */
.rail__arrow:disabled{opacity:0;pointer-events:none}

@media(max-width:820px){
  /* 2 tarjetas y pico en tableta estrecha */
  .bcard{flex-basis:calc((100% - 1.3 * var(--rail-gap)) / 2.3)}
}
@media(max-width:560px){
  /* una tarjeta y el asomo de la siguiente */
  .bcard{flex-basis:78vw}
  /* con el dedo se pasa arrastrando: las flechas sobran y tapan la pieza */
  .rail__arrow{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bcard__media img{transition:none}
}
/* En escritorio el bloque entero cabe en una pantalla, contando la barra. Para
   eso deja de mandar el ancho: la tarjeta toma la altura que sobra —pantalla
   menos barra y márgenes— y de ahí saca su ancho por la proporción 3:5. Antes
   la altura salía del ancho de la columna y el bloque se iba a 1199 px, casi
   pantalla y media. El tope de 720 px evita que en una pantalla muy alta la
   tarjeta crezca hasta perder el aire de arriba y abajo. */
@media(min-width:900px){
  .brands{
    min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding-block:calc(var(--nav-h) + clamp(14px,2.4vh,32px)) clamp(24px,4.2vh,54px);
  }
  /* 190 px de barra y márgenes, más lo que ocupa el rótulo del carril */
  .rail{--bcard-h:clamp(300px,calc(100svh - 240px),720px)}
  .brands--plain{padding-top:clamp(24px,4.2vh,54px)}
  .bcard{
    flex:0 0 auto;
    height:var(--bcard-h);
    width:calc(var(--bcard-h) * 3 / 5);
    aspect-ratio:auto;
  }
}

/* =========================================================================
   REJILLA DE PIEZAS
   ====================================================================== */
.grid{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft)}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
/* Cuatro columnas fijas, no auto-fill: la fila de relacionados siempre trae
   cuatro piezas y debe verse como una fila, no como tres y una descolgada. */
.grid--4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid--4{grid-template-columns:1fr}}

/* La selección de la portada va en una sola fila: cuatro fichas a la vista y
   las demás a un desplazamiento lateral. No es un carril con flechas, es la
   misma retícula estirada; la barra fina del borde inferior es lo único que
   avisa de que la fila sigue. */
.frow{
  display:flex;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.frow>*{flex:0 0 calc((100% - 3px) / 4);scroll-snap-align:start}
.frow::-webkit-scrollbar{height:3px}
.frow::-webkit-scrollbar-track{background:transparent}
.frow::-webkit-scrollbar-thumb{background:var(--line)}
/* Con menos ancho la ficha se estrecha hasta ser ilegible: se enseñan menos y
   se deja asomar la siguiente, que es lo que invita a arrastrar. */
@media(max-width:1100px){.frow>*{flex-basis:calc((100% - 2px) / 2.3)}}
@media(max-width:560px){.frow>*{flex-basis:calc((100% - 1px) / 1.15)}}
.card{
  position:relative;background:var(--obsidian);padding:clamp(20px,2vw,30px);
  display:flex;flex-direction:column;gap:1.1rem;transition:background var(--t-hover) var(--ease);
}
.card:hover{background:var(--panel-2)}
.card__media{
  position:relative;aspect-ratio:4/5;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 40%,rgba(35,32,25,.05),transparent 62%);
}
.card__tag{
  position:absolute;top:0;left:0;font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2);border:1px solid var(--line-soft);padding:.4em .7em;
}
.card__tag--hot{color:var(--brass-lt);border-color:rgba(185,151,91,.4)}
.card__ref{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--muted-2)}
.card h3{font-family:var(--serif);font-size:1.32rem;font-weight:500;line-height:1.15;margin-top:.15rem;text-wrap:balance}
.card__spec{font-size:.86rem;color:var(--muted);line-height:1.5;text-wrap:pretty;
  /* Algunas esferas se describen en cinco líneas; en la tarjeta bastan tres y
     el resto está en la ficha. Sin esto, en el móvil cada tarjeta era una pantalla. */
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.card__spec--st{display:block}
.card__foot{margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line-soft);
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.card__price{font-family:var(--serif);font-size:1.25rem;font-variant-numeric:tabular-nums}
.card__price small{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--muted-2);
  display:block;text-transform:uppercase;margin-bottom:.25rem}
.card__go{font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-lt)}
.card__link{position:absolute;inset:0;z-index:var(--z-overlay)}

/* ---------- filtros ----------------------------------------------------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.filters--bar{padding-bottom:2rem;border-bottom:1px solid var(--line-soft);margin-bottom:clamp(2rem,3vw,2.6rem)}
.filters button{
  display:inline-flex;align-items:center;min-height:44px;
  background:none;border:1px solid var(--line-soft);padding:0 1.25rem;cursor:pointer;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.filters button:hover{color:var(--ivory);border-color:var(--line)}
.filters button[aria-pressed="true"]{background:var(--ivory);color:var(--obsidian);border-color:var(--ivory)}
/* El campo se alinea con los botones de familia: mismo alto de toque, mismo
   trazo. Filtra lo que ya se está mirando; el panel de la lupa busca en todo. */
.filters__q{
  display:inline-flex;align-items:center;gap:.6rem;min-height:44px;margin-left:auto;
  padding:0 1rem;border:1px solid var(--line-soft);color:var(--muted);
  transition:border-color var(--t-hover) var(--ease),color var(--t-hover) var(--ease);
}
.filters__q:hover,.filters__q:focus-within{border-color:var(--line);color:var(--ivory)}
.filters__q svg{width:15px;height:15px;flex:none}
.filters__q input{
  width:min(230px,42vw);background:none;border:0;outline-offset:2px;
  font-family:var(--sans);font-size:.88rem;color:var(--ivory);
}
.filters__q input::placeholder{color:var(--muted-2)}
.filters__q input::-webkit-search-cancel-button{display:none}
/* Con el campo ocupando el hueco elástico, el recuento va detrás de él */
.filters__q+.count{margin-left:0}
.count{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;color:var(--muted-2);margin-left:auto;
  font-variant-numeric:tabular-nums}
@media(max-width:700px){
  .filters__q{width:100%;margin-left:0;order:1}
  .filters__q input{width:100%}
  .filters__q+.count{margin-left:auto;order:2}
}
.card.is-hidden{display:none}

/* =========================================================================
   PÁGINA: cabecera interior
   ====================================================================== */

.pagehead{padding-top:calc(var(--nav-h) + clamp(48px,7vw,96px));padding-bottom:clamp(36px,5vw,68px);
  position:relative;overflow:hidden}
.pagehead::before{
  content:"";position:absolute;left:-10%;top:-40%;width:70%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(185,151,91,.13),transparent 65%);pointer-events:none;
}
/* El tamaño del nombre de marca vivía en un style= dentro de marca.html, donde
   ninguna media query podía tocarlo. Aquí sí. */
[data-brand-page] [data-brand-title]{font-size:clamp(2.6rem,7vw,6rem);margin-top:1rem}
/* Cabecera corta: la ficha de producto y las páginas legales solo llevan migas
   de pan ahí arriba, y el hueco lo pone el bloque que viene debajo. Va después
   de `.pagehead` a propósito: con la misma especificidad manda la última. */
.pagehead--slim{padding-bottom:clamp(20px,3vw,36px)}
/* El titular de catálogo y de marca no es la portada: ahí el nombre de la
   casa manda con el tamaño, y aquí basta con el peso. Sale del cuerpo de
   página, en negrita y a una altura que cabe junto a las migas. */
.pagehead .display{
  font-size:clamp(1.7rem,2.8vw,2.6rem);
  font-weight:700;line-height:1.1;letter-spacing:-.02em;
}
/* …y el hueco que rodeaba a ese titular sobra con él. La cabecera de marca y
   la de catálogo seguían reservando el aire de un nombre del doble de alto:
   entre el título y la primera pieza quedaba un cuarto de pantalla vacío. Se
   recorta arriba y, sobre todo, abajo, que es donde se veía. La cabecera
   corta —fichas y páginas legales— no entra aquí: ya es corta. */
.pagehead:not(.pagehead--slim){
  padding-top:calc(var(--nav-h) + clamp(22px,3vw,44px));
  padding-bottom:clamp(8px,1.2vw,16px);
}
.crumbs{display:flex;gap:.7rem;align-items:center;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);margin-bottom:2rem}
.crumbs a:hover{color:var(--ivory)}

/* =========================================================================
   SOURCING / pasos
   ====================================================================== */
.steps{display:grid;gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.step{background:var(--obsidian);padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;gap:1rem;
  transition:background var(--t-hover) var(--ease)}
.step:hover{background:var(--panel-2)}
.step h3{font-family:var(--serif);font-size:1.5rem;font-weight:400;text-wrap:balance}
.step p{color:var(--muted);font-size:.94rem;text-wrap:pretty}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:2rem;
  padding-block:clamp(38px,5vw,64px)}
.stat b{display:block;font-family:var(--serif);font-size:clamp(2.4rem,5vw,4.1rem);font-weight:400;
  line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:.7rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-2)}

/* La cita cierra el cuerpo de la portada. Debajo entra la franja CTA, que trae
   su propio relleno y una línea divisoria: de ahí que aquí el hueco inferior
   sea menor que el superior, en vez de sumar dos rellenos iguales. */
/* =========================================================================
   PÁGINAS LEGALES
   Una sola columna de lectura. Ancho de medida (unos 78 caracteres), no ancho
   de pantalla: un aviso legal a 1560 px no lo lee nadie.
   ====================================================================== */
.legal{max-width:78ch}
.legal h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,1.9rem);
  line-height:1.2;margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.6rem;
  border-top:1px solid var(--line-soft);text-wrap:balance}
.legal h2:first-child{margin-top:0;padding-top:0;border-top:0}
.legal p,.legal li{color:var(--muted);font-size:.98rem;line-height:1.7;text-wrap:pretty}
.legal p+p,.legal ul{margin-top:1rem}
.legal b{color:var(--ivory);font-weight:500}
.legal ul{display:flex;flex-direction:column;gap:.6rem}
/* Viñeta dibujada: `list-style` se pierde con el reset de `ul` del principio. */
.legal li{padding-left:1.2rem;position:relative}
.legal li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:1px;background:var(--brass)}
.legal a{color:var(--brass-lt);text-decoration:underline;text-underline-offset:.2em}
.legal a:hover{color:var(--ivory)}
.legal__updated{margin-top:clamp(2.4rem,4vw,3.4rem);padding-top:1.6rem;
  border-top:1px solid var(--line-soft);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
/* Aviso destacado: en la de cookies resume el hecho principal; en las otras dos
   marca los datos del titular que faltan por rellenar. */
.legal__note,.legal__pending{background:var(--panel);padding:clamp(20px,2.6vw,32px);
  margin-bottom:clamp(2rem,3.4vw,3rem)}
.legal__pending{border-left:3px solid var(--brass)}
.legal__note{border-left:3px solid var(--ivory)}
.pend{background:rgba(154,122,69,.22);color:var(--ivory);font-family:var(--mono);
  font-size:.76em;letter-spacing:.06em;padding:.15em .5em;font-weight:400}

/* =========================================================================
   FRANJA CTA + FOOTER
   ====================================================================== */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line-soft);
  padding-block:clamp(64px,9vw,128px);text-align:center}
.cta::before{content:"";position:absolute;left:50%;top:120%;width:min(1000px,110vw);aspect-ratio:1;
  transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(185,151,91,.2),transparent 62%)}
.cta__in{position:relative}
.cta .h2{max-width:16ch;margin-inline:auto}
.cta__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.9rem;margin-top:2.6rem}

.foot{border-top:1px solid var(--line-soft);padding-block:clamp(48px,6vw,80px) 30px;background:var(--panel)}
.foot__top{display:grid;gap:2.6rem;grid-template-columns:1fr;
  padding-bottom:3rem;border-bottom:1px solid var(--line-soft)}
/* La marca —con los tres husos debajo— ocupa el doble que las otras columnas:
   los relojes necesitan sitio para leerse. */
@media(min-width:760px){.foot__top{grid-template-columns:1.7fr 1fr 1.25fr}}
.foot__top h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);font-weight:400;margin-bottom:1.2rem}
.foot__top li+li{margin-top:.7rem}
.foot__top a,.foot__top p{color:var(--muted);font-size:.92rem}
/* El correo mide 33 caracteres y no cabe de una pieza en la columna del pie:
   lleva un <wbr> tras la arroba para que parta por ahí, y break-word solo se
   usa si ni siquiera el trozo del dominio entra. */
.foot__top a{overflow-wrap:break-word}
.foot__top a:hover{color:var(--brass-lt)}
/* El logotipo se centra sobre el trío de relojes que lleva debajo: el grupo
   de husos se centra en la columna, así que la marca hace lo mismo. */
.foot__brand .brandmark{font-size:1.35rem;margin-bottom:1.1rem;text-align:center}
/* Tres husos bajo la marca, en la primera columna del pie: hacen de reclamo y
   de descripción a la vez, así que el pie no engorda. Las fotos llevan las
   agujas en SVG encima, con el mismo sistema de coordenadas de la imagen
   (ver assets/js/watch-live.js). */
.foot__clocks{
  display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(12px,2.2vw,28px);margin-top:1.6rem;
}
.fclock__defs{position:absolute;width:0;height:0;overflow:hidden}
.fclock{margin:0;flex:1 1 0;min-width:0;max-width:190px;
  display:flex;flex-direction:column;align-items:center;gap:.7rem}
.fclock__watch{position:relative;width:100%}
.fclock__dial{display:block;width:100%;height:auto;-webkit-user-drag:none;user-select:none}
.fclock__hands{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fclock figcaption{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;
}
/* En el teléfono ocupan todo el ancho útil, centrados. */
@media(max-width:759px){
  .foot__clocks{margin-top:1.8rem}
  .fclock{max-width:none}
}

.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot__legal a:hover{color:var(--brass-lt)}
.foot__bot{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;padding-top:1.8rem;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}

/* Con el dedo, las listas del pie y las migas eran dianas de 22 px pegadas
   unas a otras. Se agranda el área pulsable sin tocar la tipografía ni el
   ritmo vertical: el enlace pasa a bloque con relleno propio y la separación
   entre elementos baja lo mismo que crece el relleno. Solo en punteros
   gruesos, para no aflojar el pie compacto del escritorio. */
@media(pointer:coarse){
  .foot__top li+li{margin-top:0}
  .foot__top a,.foot__top p{display:block;padding-block:.62rem}
  .crumbs{gap:.4rem}
  .crumbs a{display:inline-block;padding:.72rem .3rem;margin:-.72rem 0}
  .link-u{display:inline-block;padding-top:1.1rem}
  /* El logotipo era una diana de 17 px de alto en una cabecera de 74; se lleva
     el área pulsable a toda la altura de la barra sin mover el texto. */
  a.brandmark{display:inline-flex;align-items:center;min-height:44px}
}

/* =========================================================================
   FICHA DE PRODUCTO
   ====================================================================== */
.pdp{display:grid;grid-template-columns:1fr;gap:clamp(32px,4vw,64px);align-items:start;
  padding-bottom:clamp(60px,8vw,110px)}
@media(min-width:1080px){
  .pdp{grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr);gap:clamp(40px,4vw,80px)}
  .pdp__viewer{position:sticky;top:calc(var(--nav-h) + 24px)}
}

/* --- visor 3D (equivalente a .css-ith3jp-WatchDrag-Drag de rolex.com) --- */
.watch-drag{
  position:relative;width:100%;aspect-ratio:1/1.06;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse at 50% 42%,rgba(35,32,25,.04),transparent 58%),
    linear-gradient(180deg,var(--panel-2),var(--obsidian) 70%);
  overflow:hidden;touch-action:pan-y;user-select:none;
}
.watch-drag canvas{width:100%;height:100%;cursor:grab;display:block}
.watch-drag.is-drag canvas{cursor:grabbing}
.watch-drag canvas:focus-visible{outline:2px solid var(--brass-lt);outline-offset:-6px}
.wd__hint{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;align-items:center;gap:.85rem;padding:.7em 1.15em;
  border:1px solid var(--line);background:rgba(246,242,234,.72);backdrop-filter:blur(8px);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  pointer-events:none;transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.watch-drag.is-touched .wd__hint{opacity:0;transform:translate(-50%,10px)}
.wd__hint svg{width:34px;height:12px;overflow:visible}
.wd__hint .a1{animation:hnd 2.4s var(--ease) infinite}
@keyframes hnd{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
.wd__meta{position:absolute;top:18px;left:20px;right:20px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:1rem;pointer-events:none}
.wd__deg{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
.wd__tools{position:absolute;right:18px;bottom:22px;display:flex;flex-direction:column;gap:.5rem}
.wd__tools button{
  width:44px;height:44px;border:1px solid var(--line);background:rgba(246,242,234,.6);color:var(--muted);
  cursor:pointer;display:grid;place-items:center;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;
  backdrop-filter:blur(6px);
  transition:color var(--t-hover) var(--ease),background-color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.wd__tools button:hover{background:var(--ivory);color:var(--obsidian);border-color:var(--ivory)}
.wd__track{position:absolute;left:20px;right:20px;bottom:0;height:1px;background:var(--line-soft)}
.wd__track i{position:absolute;top:0;left:0;height:1px;width:26%;background:var(--brass)}
.wd__views{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.wd__views button{
  flex:1;min-width:84px;min-height:44px;padding:.6rem;border:1px solid var(--line-soft);background:none;cursor:pointer;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.wd__views button:hover{color:var(--ivory);border-color:var(--line)}
.wd__views button[aria-pressed="true"]{color:var(--brass-lt);border-color:rgba(185,151,91,.45)}

/* --- panel de compra --- */
.pdp__info>*+*{margin-top:1.35rem}
.pdp__title{font-family:var(--serif);font-size:clamp(2.1rem,4vw,3.35rem);font-weight:400;line-height:1.06;
  letter-spacing:-.02em;text-wrap:balance}
.pdp__sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.pdp__price{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding-block:1.35rem;
  border-block:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.pdp__price b{font-family:var(--serif);font-size:2.15rem;font-weight:400;letter-spacing:-.01em}
.pdp__price s{color:var(--muted-2);font-size:1rem}
.pill{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--line);padding:.45em .8em;color:var(--muted)}
.pdp__list{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.pdp__list div{display:flex;justify-content:space-between;gap:1.5rem;padding:.85rem 0;
  border-bottom:1px solid var(--line-soft);font-size:.92rem}
.pdp__list dt,.pdp__list span:first-child{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted-2)}
.pdp__list span:last-child{text-align:right;color:#3A362E}
.pdp__actions{display:grid;gap:.7rem}
.pdp__actions .btn{justify-content:center}
.assur{display:grid;gap:.9rem;padding-top:.4rem}
.assur div{display:flex;gap:.9rem;align-items:flex-start;font-size:.88rem;color:var(--muted)}
.assur svg{flex:0 0 16px;margin-top:.25rem;color:var(--brass)}

/* --- pestañas --- */
.tabs{border-top:1px solid var(--line-soft)}
.tabs__list{display:flex;gap:0;flex-wrap:wrap;border-bottom:1px solid var(--line-soft)}
.tabs__list button{
  background:none;border:0;border-bottom:1px solid transparent;margin-bottom:-1px;cursor:pointer;
  padding:1.5rem 1.6rem 1.5rem 0;margin-right:2rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.tabs__list button:hover{color:var(--ivory)}
.tabs__list button[aria-selected="true"]{color:var(--ivory);border-bottom-color:var(--brass)}
.tabs__panel{padding-top:clamp(28px,4vw,52px);display:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,3vw,56px)}
.tabs__panel.is-active{display:grid}
.tabs__panel p{color:var(--muted);max-width:62ch;text-wrap:pretty}
.tabs__panel p+p{margin-top:1.1rem}
.spectable{border-top:1px solid var(--line-soft)}
.spectable div{display:flex;justify-content:space-between;gap:2rem;padding:.9rem 0;
  border-bottom:1px solid var(--line-soft)}
.spectable dt{font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);flex:0 0 auto}
.spectable dd{text-align:right;font-size:.92rem;color:#3A362E;font-variant-numeric:tabular-nums}

/* =========================================================================
   VISOR 360° POR SECUENCIA DE IMÁGENES  (reemplaza al render procedural)
   ====================================================================== */
.v360{position:relative}
.v360__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
.v360--grab{cursor:grab;touch-action:pan-y}
.v360--grab.is-drag{cursor:grabbing}
.v360--empty::after{
  content:"Sin visor 360°";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);
}
.watch-drag[data-viewer]{cursor:grab}
.watch-drag[data-viewer].is-drag{cursor:grabbing}
.watch-drag .v360__img{padding:7%}

/* =========================================================================
   GALERÍA PAGINADA DE LA FICHA
   El visor 360° y cada fotografía comparten un único recuadro y se turnan en
   él; debajo, la tira de miniaturas, el pie de la toma y el contador. La caja
   exterior lleva el marco y el fondo para que el cambio de toma no parpadee.
   ====================================================================== */
/* Sin esto la columna de la rejilla se ensancha hasta caber la tira entera de
   miniaturas y, en móvil, se lleva por delante el ancho de la página. */
.pdp__viewer,.gal,.gal__row{min-width:0}
.gal__stage{
  position:relative;width:100%;aspect-ratio:1/1.06;overflow:hidden;
  border:1px solid var(--line-soft);
  background:
    radial-gradient(ellipse at 50% 42%,rgba(35,32,25,.04),transparent 58%),
    linear-gradient(180deg,var(--panel-2),var(--obsidian) 70%);
}
.gal__stage .watch-drag,.gal__slide{
  position:absolute;inset:0;width:auto;margin:0;border:0;background:none;
  opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),visibility .45s var(--ease);
}
.gal__stage .is-on{opacity:1;visibility:visible}
.gal__slide img,.gal__slide video{width:100%;height:100%;object-fit:contain;display:block;padding:7%}
.gal__slide video{padding:0}

.gal__bar{margin-top:1rem}
.gal__row{display:flex;align-items:center;gap:.7rem}
.gal__nav{
  flex:0 0 auto;width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line-soft);background:none;color:var(--muted);cursor:pointer;
  transition:color var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.gal__nav:hover{color:var(--ivory);border-color:var(--line)}
.gal__nav svg{width:12px;height:12px}
/* La tira ocupa lo que ocupen sus tomas: así la flecha de «siguiente» queda
   pegada a la última miniatura y no al otro extremo de la columna. */
.gal__thumbs{
  flex:0 1 auto;min-width:0;display:flex;gap:.5rem;overflow-x:auto;
  scrollbar-width:none;scroll-snap-type:x proximity;
}
.gal__thumbs::-webkit-scrollbar{display:none}
.gal__thumb{
  position:relative;flex:0 0 auto;width:clamp(56px,16vw,86px);aspect-ratio:1/1;padding:0;cursor:pointer;
  border:1px solid var(--line-soft);background:var(--panel);overflow:hidden;scroll-snap-align:start;opacity:.62;
  transition:opacity var(--t-hover) var(--ease),border-color var(--t-hover) var(--ease);
}
.gal__thumb img{width:100%;height:100%;object-fit:contain}
.gal__thumb:hover{opacity:1}
.gal__thumb[aria-selected="true"]{opacity:1;border-color:var(--brass)}
.gal__thumb--360 i{
  position:absolute;left:0;bottom:0;padding:.25em .5em;font-style:normal;
  font-family:var(--mono);font-size:.5rem;letter-spacing:.14em;
  background:rgba(246,242,234,.85);color:var(--ivory);
}
.gal__ph{
  display:grid;place-items:center;height:100%;
  font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);
}
.gal__foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
}
.gal__cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal__count{flex:0 0 auto;font-variant-numeric:tabular-nums;color:var(--muted)}
@media(prefers-reduced-motion:reduce){
  .gal__stage .watch-drag,.gal__slide{transition:none}
}

/* imágenes de producto en las tarjetas — enteras, sin recortar. Las fotos son
   verticales pero no todas 4:5 (van de 0,58 a 0,81) y con `cover` se perdían la
   punta del brazalete o la corona. Llevan fondo transparente, así que el aire
   que deja `contain` no se ve. */
.card__media img{
  width:100%;height:100%;object-fit:contain;object-position:center;
  transition:transform var(--t-hover) var(--ease);
}
.card:hover .card__media img{transform:scale(1.04)}

/* ---------- bucles infinitos: pausados fuera de pantalla (ver initLoopPause) --- */
.is-paused,.is-paused::before,.is-paused::after,
.is-paused *,.is-paused *::before,.is-paused *::after{animation-play-state:paused!important}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.js .rv{opacity:1;transform:none;filter:none}
}


/* ======================================================================== */
/* PÁGINA DE MARCA — las categorías (Submariner, Daytona…) a pantalla        */
/* completa, con el reloj girando mientras se baja.                          */
/*                                                                           */
/* Cómo está armado: cada categoría es una sección alta (`.mdl`) que aporta  */
/* el recorrido de scroll, y dentro un `.mdl__pin` pegajoso que sostiene el  */
/* reloj en pantalla mientras esa sección pasa. El movimiento lo lleva una   */
/* línea de tiempo de scroll NATIVA (`view-timeline`), no un bucle en JS:    */
/* así el giro corre en el compositor y no compite con el hilo principal.    */
/* Donde no haya soporte se degrada a una entrada con transición normal —    */
/* se pierde el giro continuo, no el contenido.                             */
/* ======================================================================== */
/* svh como el pin de dentro: mezclando vh (que en el móvil vale la ventana
   grande) con el pin en svh, el recorrido de scroll y la altura fijada no
   guardaban la misma proporción y el reloj daba un tirón al aparecer o
   esconderse la barra del navegador. */
.mdl{position:relative;height:210svh;--mdl-travel:7vh}
/* svh y no vh: en el móvil la barra del navegador aparece y desaparece, y con
   vh la sección cambia de alto a mitad de scroll. El padding-top reserva la
   cabecera fija, que si no se come el reloj. */
.mdl__pin{
  position:sticky;top:0;height:100vh;height:100svh;
  padding-top:var(--nav-h);display:grid;place-items:center;overflow:hidden;
}
.mdl__in{
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(1.5rem,5vw,6rem);width:min(1320px,92vw);
}
/* La primera categoría comparte pantalla con la cabecera de la marca: su pin
   mide 100svh, pero de esa pantalla solo quedan libres los píxeles que hay
   bajo el titular. Centrando en el pin entero, la pieza cae medio muro por
   debajo del nombre y la página abre con un hueco. Este relleno baja el
   centro hasta el del hueco que de verdad se ve.
   El tope de 150px no es estético: pasado ese punto, cuando la sección se
   pega, el reloj empieza a meterse debajo de la cabecera fija. En el móvil no
   hace falta —allí la cabecera ya se recorta— y además el bloque va apilado y
   no sobra tanto sitio, así que se anula en su media query. */
@media(min-width:861px){
  .mdl:first-of-type .mdl__pin{padding-bottom:clamp(48px,16vh,150px)}
}
/* Alternando lado: la categoría impar lleva el reloj a la izquierda. */
.mdl:nth-child(even) .mdl__media{order:2}
.mdl:nth-child(even) .mdl__text{order:1}

.mdl__media{display:grid;place-items:center;position:relative}
/* El halo. En claro no es un resplandor de color como en las webs oscuras,
   sino una sombra difusa que despega la pieza del fondo. */
.mdl__media::before{
  content:"";position:absolute;width:76%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(120,105,80,.16),rgba(120,105,80,0) 68%);
}
.mdl__watch{
  position:relative;max-height:66vh;max-width:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 26px 46px rgba(60,50,35,.26));
}
.mdl__text{max-width:44ch}
.mdl__no{display:block;margin-bottom:1rem}
.mdl__name{font-size:clamp(2rem,4.4vw,3.6rem);line-height:1.05;margin:0 0 1.1rem}
.mdl__claim{margin-bottom:1.6rem}
.mdl__meta{display:flex;gap:1.6rem;align-items:baseline;margin-bottom:2rem;flex-wrap:wrap}
.mdl__stock{font-weight:500}

/* --- el movimiento ------------------------------------------------------ */
/* Solo transform: es propiedad de compositor, así que el giro no repinta. */
@keyframes mdl-watch{
  from{transform:translateY(var(--mdl-travel)) rotate(-13deg) scale(.9)}
  to  {transform:translateY(calc(var(--mdl-travel) * -1)) rotate(9deg) scale(1.03)}
}
@keyframes mdl-text{
  from{opacity:0;transform:translateY(48px)}
  25% {opacity:1;transform:none}
  75% {opacity:1;transform:none}
  to  {opacity:0;transform:translateY(-32px)}
}
html.js .mdl__watch,html.js .mdl__text{opacity:0}

@supports (animation-timeline:view()){
  .mdl{view-timeline-name:--mdl;view-timeline-axis:block}
  html.js .mdl__watch,html.js .mdl__text{opacity:1}
  .mdl__watch{animation:mdl-watch linear both;animation-timeline:--mdl;animation-range:entry 0% exit 100%}
  .mdl__text {animation:mdl-text  linear both;animation-timeline:--mdl;animation-range:entry 0% exit 100%}
}

/* Sin líneas de tiempo de scroll: entrada de una vez, sin giro continuo. */
@supports not (animation-timeline:view()){
  html.js .mdl__watch,html.js .mdl__text{
    transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);
  }
  html.js .mdl.is-in .mdl__watch,html.js .mdl.is-in .mdl__text{opacity:1;transform:none}
  html.js .mdl.is-in .mdl__text{transition-delay:.12s}
}

/* --- categorías secundarias -------------------------------------------- */
.mdl-rest{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft)}
.mdl-rest a{background:var(--bg);padding:1.6rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;
  transition:background .35s var(--ease)}
.mdl-rest a:hover{background:var(--bg-soft,#fff)}
.mdl-rest b{font-size:1.05rem;font-weight:400}

@media(max-width:860px){
  /* Apilado, el reloj y el texto tienen que caber juntos en una pantalla: se
     recorta el reloj y se acorta el recorrido para que no se salga del pin. */
  /* El alto de la sección es lo que se scrollea entre una categoría y la
     siguiente; el pin mide 100svh, así que los 170svh de antes dejaban 70svh
     de scroll con el reloj quieto y en el móvil eso se lee como un hueco
     enorme entre categorías. 128svh deja el recorrido justo para la animación
     de entrada y salida, sin la pausa muerta en medio. */
  .mdl{height:128svh;--mdl-travel:3vh}
  /* Sin descripción debajo del nombre de la marca, el aire de la cabecera
     sobra. Y sobra el doble: la primera categoría se centra dentro de un pin de
     100svh que arranca justo debajo de esta cabecera, así que cada píxel de
     cabecera baja el reloj y el botón otro píxel. De ~210 px a ~140. */
  [data-brand-page] .pagehead{padding-top:calc(var(--nav-h) + 6px);padding-bottom:0}
  [data-brand-page] .crumbs{margin-bottom:.8rem}
  [data-brand-page] [data-brand-title]{font-size:2.2rem;margin-top:.35rem}
  [data-brand-page] [data-brand-label]{font-size:.6rem}
  .mdl__in{grid-template-columns:1fr;gap:.4rem;text-align:center;align-content:center}
  .mdl:nth-child(even) .mdl__media,.mdl:nth-child(even) .mdl__text{order:0}
  .mdl__text{max-width:none;margin-inline:auto}
  .mdl__meta{justify-content:center;margin-bottom:1.1rem}
  .mdl__name{margin-bottom:.7rem}
  .mdl__claim{margin-bottom:1rem;font-size:.95rem}
  .mdl__watch{max-height:30svh}
  .mdl__media::before{width:64%}
}
@media(max-width:860px) and (max-height:680px){
  .mdl__watch{max-height:26svh}
  .mdl__claim{display:none}
}

@media(prefers-reduced-motion:reduce){
  html.js .mdl__watch,html.js .mdl__text{opacity:1;transform:none;animation:none}
  .mdl{height:auto}
  .mdl__pin{position:static;height:auto;padding-block:clamp(48px,8vw,96px)}
  .mdl__watch{max-height:52vh}
}