/* ═══════════════════════════════════════════════════════════════════════
   Luciano Torres Watches — la vitrina de mármol

   La categoría de relojes de lujo manda negro con dorado y serif finita; su
   opuesto previsible es el editorial blanco de filetes. Las dos quedan afuera.

   El fondo de la página es UN SOLO COLOR PLANO, sin textura. El mármol vive
   donde el cliente lo usa: de fondo de la foto de cada reloj, como la losa
   sobre la que se apoya la pieza. Se genera con turbulencia SVG —~1 KB contra
   los 400 de una foto— en dos variantes, blanca y negra.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --fondo:        #0F1A15;   /* el único color de fondo. Plano, sin textura */
  --superficie:   #16241F;   /* tarjetas y controles, apenas levantados */
  --superficie-2: #1D2F27;   /* al pasar el mouse */
  --laton:        #C9A45F;   /* herraje: filetes, eyebrows, acentos */
  --laton-hondo:  #8A6D38;
  --hueso:        #F2F0EA;   /* superficies de lectura */
  --tinta:        #101512;   /* texto sobre hueso */
  --daytona:      #C8102E;   /* el rojo del reloj. Una sola vez en la página */

  --humo:      rgba(242,240,234,.68);
  --humo-bajo: rgba(242,240,234,.52);
  --filete:    rgba(201,164,95,.28);
  --filete-ink:rgba(16,21,18,.16);

  /* **Prata** en los títulos y **Cormorant Garamond** en el texto, elegidas por
     el cliente el 2026-08-07 sobre Geist, Bodoni Moda e Instrument Serif.

     Las dos son libres (SIL Open Font License) y las eligió comparando en vivo
     contra las tres pagas que le gustaban —Origin, Coldiac y Luxury Stylish—,
     que no se pueden usar: son de licencia comercial y lo que circula gratis
     son demos de uso personal con glifos incompletos.

     Prata tiene UN solo peso. No es una limitación: en una didona la jerarquía
     la hace el tamaño, y pedirle negrita al navegador engorda el trazo grueso
     hasta perder el contraste que es su razón de ser. Por eso --display-peso
     es 400 y no 600. */
  --display: 'Prata', Georgia, serif;
  --texto:   'Cormorant Garamond', Georgia, serif;

  /* El peso y el interletrado de los títulos viajan con la familia, porque no
     son gusto: son propiedades de ESTA letra. El -.035em es el apretado que
     pide una sans grande —sin él Geist se ve suelta— y en una serifa de alto
     contraste el mismo número junta las serifas hasta tocarse.

     Estando acá, cambiar la tipografía de la página es cambiar tres líneas
     juntas y no salir a cazar `font-weight:600` por toda la hoja. */
  --display-peso: 400;
  --display-tracking: -.006em;

  --margen: clamp(1.25rem, 5vw, 6rem);
  --ritmo:  clamp(5rem, 12vh, 10rem);

  /* Vetas del mármol, en dos escalas. El Verde Alpi real tiene hilos finos y
     además vetas gruesas que cruzan la losa entera; con una sola frecuencia
     la piedra queda como una mancha verde y no se lee como mármol. */
  --vetas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.028' numOctaves='5' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.90 0 0 0 0 0.94 0 0 0 0 0.88 2.4 -1.1 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)'/%3E%3C/svg%3E");
  --vetas-anchas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='1400'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0016 0.006' numOctaves='3' seed='19'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.93 0 0 0 0 0.96 0 0 0 0 0.91 3.4 -1.6 0 0 -1.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}

*,*::before,*::after{ box-sizing:border-box; }

/* `hidden` tiene que querer decir oculto, siempre.

   La regla que trae el navegador es `[hidden]{display:none}`, y como los
   selectores de atributo tienen la misma especificidad que los de clase, gana
   la que venga después: cualquier `.loquesea{display:flex}` de esta hoja la
   pisa y el elemento se queda a la vista.

   El síntoma es feo de encontrar porque no se ve en el CSS: en el JS uno
   escribe `el.hidden = true`, no pasa nada, y el archivo donde está el
   problema es otro. Ya pasó dos veces —la barra de filtros y el filtro de
   estilo, que se esconde solo cuando ninguna pieza trae ese dato—. */
[hidden]{ display:none !important; }

/* Sin `scroll-behavior:smooth`, y no es un olvido. El viaje de los enlaces
   internos lo maneja ir-a.js, que pide un scroll por cuadro: con la propiedad
   puesta, el navegador intenta animar hacia cada uno de esos destinos y las dos
   animaciones se pelean. Medido, el recorrido quedaba clavado 600 ms y después
   se disparaba de golpe, que es lo contrario de lo buscado.

   Además la propiedad ignora `prefers-reduced-motion`: quien pide no ver
   movimiento igual se comía el viaje. */

body{
  margin:0;
  background:var(--fondo);
  color:var(--hueso);
  font-family:var(--texto);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);

  /* Cormorant tiene la altura de x chica: medida contra Geist, un 74 %. Sin
     corregirlo, cambiar de familia le baja un cuarto del tamaño aparente a
     TODO el texto chico de la página de una sola vez.

     `font-size-adjust` es la propiedad hecha exactamente para esto: fija la
     altura de x como fracción del cuerpo, y el navegador ajusta el tamaño real
     para cumplirla. 0.53 es la de Geist (53 px de altura de x a cuerpo 100), o
     sea que se conserva el tamaño aparente que tenía la página.

     Se hace acá, en una línea que hereda toda la página, y no subiéndole el
     cuerpo a los veinte lugares que tienen un tamaño escrito en rem. Y sirve
     igual el día que se cambie de tipografía otra vez.

     Prata queda en 52, así que la corrección casi no la toca (un 2 %). */
  font-size-adjust: ex-height 0.53;

  /* Cifras de CAJA, no de estilo antiguo.

     Cormorant trae de fábrica las antiguas —el 6 y el 8 suben, el 3, 5, 7 y 9
     bajan— que son preciosas en un libro y están mal acá: en esta página el
     número ES el dato. Un precio de 14.500 con el 4 y el 5 colgando se lee
     como adorno, y la medida de la caja es media razón por la que alguien
     compra o no compra ese reloj.

     Va en el body para que lo herede todo. Ojo con una trampa del CSS: pedir
     `tabular-nums` solo RESETEA el estilo de cifra a normal, así que los
     lugares que ya pedían tabulares tuvieron que pasar a pedir las dos. */
  font-variant-numeric: lining-nums;

  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:var(--display-peso);
         line-height:1.03; letter-spacing:var(--display-tracking); }
p{ margin:0; }
img,video{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--laton); outline-offset:4px; }

/* El recuadro gris que Chrome de Android pinta encima de todo lo que se toca.
   Es del navegador, no del diseño: aparece un cuarto de segundo, con su propio
   color y su propio radio, y en una página cuyo argumento es el cuidado se ve
   como una mancha. Lo que dice que algo se tocó son los estados propios de cada
   control, que ya están.

   El foco NO se toca: la regla de arriba sigue en pie, y es la que necesita
   quien navega con teclado. */
*{ -webkit-tap-highlight-color:transparent; }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:100;
  padding:.85rem 1.25rem; background:var(--hueso); color:var(--tinta);
  font-weight:600; text-decoration:none;
}
.saltar:focus{ left:.5rem; top:.5rem; }


.titulo{ font-size:clamp(2rem,4.6vw,3.5rem); }
.titulo--grande{ font-size:clamp(2.1rem,5.2vw,4.25rem); }
.titulo em{ font-style:italic; color:var(--laton); }

.seccion__cabecera{ margin-bottom:clamp(2.5rem,6vw,4.5rem); }
.seccion__bajada{ margin-top:1.5rem; max-width:46ch; color:var(--humo); }

/* ── Botones ─────────────────────────────────────────────────────────── */

.boton{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.75rem; font-family:var(--texto); font-weight:600;
  font-size:1rem; letter-spacing:-.005em; text-decoration:none;
  border:1px solid transparent; border-radius:2px;
  transition:transform .2s ease, background-color .2s ease, color .2s ease;
}
.boton:hover{ transform:translateY(-2px); }
.boton:active{ transform:translateY(0); }
.boton--grande{ padding:1.15rem 2.25rem; font-size:1.0625rem; }

.boton--hueso{ background:var(--hueso); color:var(--tinta); }
.boton--hueso:hover{ background:#fff; }
.boton--laton{ background:var(--laton); color:#1A1408; }
.boton--laton:hover{ background:#D9B978; }
.boton--fantasma{ background:transparent; color:var(--hueso); border-color:var(--filete); }
.boton--fantasma:hover{ border-color:var(--laton); color:var(--laton); }

/* ── Cabecera ────────────────────────────────────────────────────────── */

.marca{
  position:absolute; top:0; left:0; right:0; z-index:15;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:clamp(1rem,3vh,1.85rem) var(--margen);
}
.marca__nombre{
  font-family:var(--display); font-weight:var(--display-peso); font-size:clamp(1rem,1.5vw,1.2rem);
  color:var(--hueso); text-decoration:none; letter-spacing:.01em;
  white-space:nowrap;
}
.marca__nombre span{ color:var(--laton); }
.marca__nav{ display:flex; gap:clamp(1rem,2.5vw,2rem); }
.marca__nav a{
  font-size:.8125rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--humo); text-decoration:none;
  transition:color .2s ease;
}
.marca__nav a:hover{ color:var(--laton); }

/* ── La cabecera en el teléfono ───────────────────────────────────────
   Medido: la marca ocupa 174 px y los tres links 189, así que en 360 px se iba
   a 466 y empujaba scroll horizontal en toda la página. Achicar la tipografía
   no alcanzaba —seguía sin entrar y los links quedaban ilegibles—, así que lo
   que cede es la cantidad de links.

   **Una sola salida, y distinta en cada página.** En la portada queda «Stock»,
   que es a lo que se viene. En el stock no queda ninguna: el nombre de la marca
   ya lleva a la portada, y volver al inicio tocando el logo es el gesto que
   cualquiera trae aprendido de todos los demás sitios. Un link «Inicio» al lado
   del logo son dos cosas que hacen lo mismo ocupando el doble.

   Lo que sale no se pierde: «Servicios» es una sección de la portada y se llega
   scrolleando, y el contacto lo hace el botón fijo de WhatsApp, que está
   siempre en pantalla. Antes esto cedía en dos escalones —30rem y 21,5rem— y
   el segundo dejó de tener sentido cuando la regla pasó a ser «una sola
   salida»: a 21,5rem ya no queda nada que sacar. */
@media (max-width:30rem){
  .marca{ gap:1rem; padding-left:1.15rem; padding-right:1.15rem; }
  .marca__nombre{ font-size:.9375rem; }
  .marca__nav{ gap:1rem; }
  .marca__nav a{ font-size:.6875rem; letter-spacing:.08em; }
  .marca__nav a[href$="#servicios"],
  .marca__nav a[href$="#contacto"]{ display:none; }
  .pagina-stock .marca__nav a{ display:none; }
}

/* ── El film ─────────────────────────────────────────────────────────── */

.film{ height:440vh; position:relative; background:#000; }
.film__pin{
  position:sticky; top:0; height:100vh; height:100svh;
  overflow:hidden; background:#000;
}
.film__video{ width:100%; height:100%; object-fit:cover; }

/* Velo: el texto de las escenas cae sobre planos que a veces son claros —las
   tomas 3 y 4 son metraje de estudio sobre fondo blanco y la 6 termina en la
   esfera Panda—. Sin esto, esos planos se comen el titular.

   Dos capas. La de abajo es la de siempre: cae de izquierda a derecha y deja
   respirar el centro, que es donde está el reloj. La de arriba cierra el borde
   derecho, que es donde vive el taquímetro; ahí la primera llega sin cuerpo a
   propósito y sobre fondo blanco los números quedaban gris sobre gris. Se
   apoya en el borde y no en el elemento para que se lea como caída de luz y no
   como una mancha detrás de la escala. Sobre los planos negros no se nota. */
/* El velo es lo único que sostiene el texto hueso sobre el film. Está armado
   en tres capas, todas ancladas al encuadre y no a los elementos: un resguardo
   pegado al texto se lee como una mancha que lo sigue, y anclado al cuadro se
   lee como caída de luz.

   La capa de abajo es la que hace el trabajo pesado, y existe porque el edit
   del cliente tiene la mitad de las tomas sobre fondo blanco de estudio. Con
   el velo anterior —pensado para un film casi todo negro— el texto medía
   1,4:1 sobre esas tomas: invisible. Va como banda horizontal pareja y no en
   diagonal porque una diagonal sobre fondo blanco deja al bloque de texto con
   una punta oscura y la otra clara, y eso se lee como suciedad. */
.film__velo{
  position:absolute; inset:0; pointer-events:none;
  background:
    /* El borde derecho, donde vive el taquímetro. */
    linear-gradient(to left,
      rgba(8,10,9,.80) 0%, rgba(8,10,9,.62) 8%,
      rgba(8,10,9,.18) 22%, rgba(8,10,9,0) 34%),
    /* La caída de luz desde el pie: cubre la banda donde se apoyan las
       escenas, de punta a punta del ancho. */
    linear-gradient(to top,
      rgba(8,10,9,.74) 0%, rgba(8,10,9,.70) 20%,
      rgba(8,10,9,.58) 38%, rgba(8,10,9,.22) 54%,
      rgba(8,10,9,0) 68%),
    /* La graduación general, que oscurece el lado del texto. Más liviana que
       antes: con la banda del pie ya no tiene que sostener nada sola. */
    linear-gradient(100deg,
      rgba(8,10,9,.58) 0%, rgba(8,10,9,.42) 34%,
      rgba(8,10,9,.10) 62%, rgba(8,10,9,.30) 100%);
}

.escenas{ position:absolute; inset:0; pointer-events:none; }

.escena{
  position:absolute;
  left:var(--margen);
  bottom:clamp(5rem,16vh,9rem);
  max-width:min(46rem,70vw);
  opacity:0; visibility:hidden;
  transform:translateY(26px);
  transition:opacity .5s ease, transform .5s ease, visibility .5s;
  will-change:opacity,transform;
}
.escena[data-activa]{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }

/* Los títulos del hero van un pelo más apretados que el resto: a 72 px, el
   mismo interletrado que funciona a 40 se ve suelto. Se escribe como una RESTA
   sobre el token y no como un número fijo para que la relación se mantenga si
   cambia la tipografía — una serifa de alto contraste pide otro punto de
   partida, pero el hero le sigue quedando más apretado que lo demás. */
.escena h1,.escena h2{
  font-size:clamp(2.15rem,6vw,4.5rem);
  letter-spacing:calc(var(--display-tracking) - .005em);
}
.escena__bajada{
  margin-top:1.15rem; max-width:34ch;
  color:var(--humo); font-size:clamp(.95rem,1.5vw,1.15rem);
}
.escena__bajada strong{ color:var(--hueso); font-weight:600; }
.escena .boton{ margin-top:1.85rem; }

.pista{
  position:absolute; left:var(--margen); bottom:clamp(1.5rem,5vh,2.5rem);
  display:flex; align-items:center; gap:.7rem;
  font-size:.625rem; font-weight:500; letter-spacing:.28em;
  text-transform:uppercase; color:var(--humo-bajo);
}
.pista span{
  display:block; width:2.5rem; height:1px; background:currentColor;
  transform-origin:left; animation:tirar 2.4s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes tirar{ 0%,100%{transform:scaleX(.35);opacity:.5} 50%{transform:scaleX(1);opacity:1} }

/* ── Firma: la escala taquimétrica ───────────────────────────────────── */

.taquimetro{
  position:absolute; top:50%; right:var(--margen); transform:translateY(-50%);
  display:flex; align-items:center; gap:1rem; height:17rem; pointer-events:none;
}
.taquimetro__unidad{
  font-size:.5625rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--humo-bajo); writing-mode:vertical-rl;
}
.taquimetro__escala{
  position:relative; list-style:none; margin:0; padding:0;
  height:100%; width:3.5rem; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);
}
.taquimetro__escala > li{
  position:absolute; right:0; top:50%;
  display:flex; align-items:center; justify-content:flex-end; gap:.5rem;
  width:100%; font-size:.8125rem; font-variant-numeric:lining-nums tabular-nums;
  color:rgba(242,240,234,.72); transition:color .25s ease; will-change:transform;
}
.taquimetro__escala > li::before{
  content:''; width:.5rem; height:1px; background:currentColor; opacity:.7;
}
.taquimetro__escala > li[data-activa]{ color:var(--laton); font-weight:600; }
.taquimetro__escala > li[data-activa]::before{ width:1.35rem; opacity:1; }

/* ── Marcas ──────────────────────────────────────────────────────────── */


/* ── Servicios ───────────────────────────────────────────────────────── */

.servicios{ padding:var(--ritmo) var(--margen); }

/* ── La vitrina de mármol ────────────────────────────────────────────── */

.vitrina{ position:relative; padding:var(--ritmo) var(--margen); isolation:isolate; }


.vitrina__contenido{
  display:grid; gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr; align-items:center;
  max-width:78rem; margin-inline:auto;
}
@media (min-width:62rem){
  .vitrina__contenido{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
}

.vitrina__descripcion{ margin-top:1.75rem; max-width:44ch; color:var(--humo); }

.specs{ margin:clamp(2rem,4vh,2.75rem) 0 0; }
.spec{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1.5rem; padding:.8rem 0; border-top:1px solid var(--filete);
}
.spec:last-child{ border-bottom:1px solid var(--filete); }
.spec > dt{
  font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--humo-bajo); white-space:nowrap;
}
.spec > dd{ margin:0; text-align:right; font-size:.9375rem; font-variant-numeric:lining-nums tabular-nums; }
.spec--ref{ border-top:1px solid var(--laton); }
.spec--ref > dd{ color:var(--daytona); font-size:1.15rem; font-weight:600; letter-spacing:.01em; }

.vitrina__salvedad{
  margin-top:1.5rem; max-width:42ch;
  font-size:.8125rem; line-height:1.8; color:var(--humo-bajo);
}
.vitrina__acciones{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:2.25rem; }

.vitrina__figura{ margin:0; }
/* El póster es el reloj sobre negro y hay que fundirlo en la piedra sin que se
   lea como un rectángulo pegado encima.

   Se probó con `mix-blend-mode: screen`: funde el negro perfecto, pero le pasa
   el verde de la piedra a la esfera, y un Panda con esfera verde es un reloj
   que no existe. En una página cuyo argumento es la autenticidad, eso es
   inaceptable.

   La máscara radial hace el mismo trabajo sin tocar un solo color: los bordes
   se desvanecen en el mármol y el centro conserva la pieza tal cual es. */
.vitrina__figura{ position:relative; }
.vitrina__figura::before{
  content:''; position:absolute; inset:6% 2% 14%;
  background:radial-gradient(56% 44% at 50% 50%, rgba(150,190,168,.16), transparent 72%);
  pointer-events:none;
}
.vitrina__figura img{
  position:relative; width:100%; height:auto;
  -webkit-mask-image:radial-gradient(66% 62% at 50% 50%, #000 46%, transparent 82%);
          mask-image:radial-gradient(66% 62% at 50% 50%, #000 46%, transparent 82%);
}
.vitrina__figura figcaption{
  margin-top:.9rem; font-size:.75rem; line-height:1.7; color:var(--humo-bajo);
}

/* ── Pasos ───────────────────────────────────────────────────────────── */

.pasos{ padding:var(--ritmo) var(--margen); }
.pasos__lista{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(2rem,4vw,3.5rem); grid-template-columns:1fr;
}
@media (min-width:52rem){ .pasos__lista{ grid-template-columns:repeat(3,1fr); } }

.paso{ border-top:1px solid var(--filete); padding-top:1.5rem; }
.paso__n{
  display:block; font-family:var(--display); font-weight:var(--display-peso); font-size:1.35rem;
  color:var(--laton); margin-bottom:1rem; font-variant-numeric:lining-nums tabular-nums;
}
.paso h3{ font-size:clamp(1.2rem,2vw,1.5rem); margin-bottom:.85rem; }
.paso p{ color:var(--humo); font-size:.9375rem; max-width:34ch; }


/* ── Tabla de posiciones ─────────────────────────────────────────────── */

.tabla{ padding:var(--ritmo) var(--margen); }
.tabla__lista{
  list-style:none; margin:0; padding:0; max-width:52rem;
  border-top:1px solid var(--filete);
}
.tabla__lista li{
  display:grid; grid-template-columns:2.5rem 1fr auto;
  align-items:baseline; gap:1rem;
  padding:1.05rem 0; border-bottom:1px solid var(--filete);
}
.tabla__pos{
  font-family:var(--display); font-weight:var(--display-peso); font-size:1.1rem; color:var(--laton);
  font-variant-numeric:lining-nums tabular-nums;
}
.tabla__nombre{ font-size:1rem; }
.tabla__dato{ font-size:.9375rem; color:var(--humo-bajo); font-variant-numeric:lining-nums tabular-nums; }
.tabla__nota{ margin-top:1.25rem; font-size:.75rem; color:var(--humo-bajo); }

/* ── Cierre ──────────────────────────────────────────────────────────── */

.cierre{ position:relative; padding:calc(var(--ritmo) * 1.15) var(--margen); isolation:isolate; }
.cierre__contenido{ max-width:56rem; margin-inline:auto; text-align:center; }
.cierre__bajada{
  margin:1.75rem auto 0; max-width:48ch; color:var(--humo);
  font-size:clamp(1rem,1.5vw,1.15rem);
}
.cierre .boton{ margin-top:2.5rem; }

/* ── WhatsApp fijo ───────────────────────────────────────────────────── */

/* La etiqueta se despliega con grid-template-columns 0fr->1fr en vez de
   max-width: anima sin tocar el layout, que es lo que provoca los tirones. */

.stock{ position:relative; padding:var(--ritmo) var(--margen) calc(var(--ritmo) * .7); isolation:isolate; }

.stock__cabecera{ max-width:52rem; margin-bottom:clamp(2rem,4vw,3rem); }

.aviso{
  max-width:52rem; margin-bottom:clamp(2rem,4vw,2.75rem);
  padding:1rem 1.15rem; border:1px solid var(--filete);
  border-radius:2px; background:rgba(14,24,20,.5);
  font-size:.8125rem; line-height:1.7; color:var(--humo);
}
.aviso strong{ color:var(--laton); font-weight:600; }

/* ── La barra de filtros ─────────────────────────────────────────────── */

/* ── La barra de filtros ──────────────────────────────────────────────
   No es una caja con un formulario adentro. Es el anillo de registros de una
   esfera: una banda acotada arriba y abajo por un filete, con los campos
   separados por líneas finas como los sectores de un cronógrafo.

   La caja anterior —borde entero, fondo propio, tres controles con su marco—
   es el contenedor perezoso: se lee igual en una tienda de zapatillas que acá.
   Sacando los marcos, lo que queda a la vista es el VALOR, que es lo único que
   el visitante necesita leer para saber cómo está filtrando.

   El filete de arriba va en latón y el de abajo apagado: es la misma jerarquía
   que un anillo grabado, donde el borde que mira a la luz brilla y el otro no. */
.barra{
  display:grid; gap:0;
  grid-template-columns:1fr;
  padding:0; background:none; border:0; border-radius:0;
  border-top:1px solid var(--laton);
  border-bottom:1px solid var(--filete);
}
/* En ancho, flex y no una grilla de columnas escritas a mano.

   Los filtros van y vienen según lo que traiga el stock: el de estilo se
   esconde solo cuando ninguna pieza tiene ese dato —hoy, ninguna—, y el de
   precio también si no hay precios. Con `grid-template-columns` de tres
   valores, el que se esconde deja su columna vacía y la barra queda con medio
   ancho muerto a la derecha. Repartiendo con `flex`, los que quedan se
   ensanchan solos y la barra siempre llega al borde. */
@media (min-width:48rem){
  .barra{ display:flex; }
}

.campo{
  display:flex; flex-direction:column; gap:.3rem; min-width:0;
  padding:.95rem 0;
  border-top:1px solid var(--filete);
}
.campo:first-child{ border-top:0; }
@media (min-width:48rem){
  /* `flex:1 1 0` y no `1 1 auto`: la base tiene que ser cero para que el
     reparto salga de la proporción y no del contenido de cada campo. Con
     `auto`, el desplegable de marca —que mide lo que mida el nombre más largo—
     se lleva más ancho que el de al lado por accidente.

     `:first-child` y `:last-child` siguen apuntando a la marca y al rango
     aunque el del medio esté escondido: son posiciones en el marcado, no en
     lo que se ve, y el que se esconde está en el medio. */
  .campo{
    flex:1 1 0;
    padding:1rem 1.35rem; border-top:0; border-left:1px solid var(--filete);
  }
  .campo:first-child{ border-left:0; padding-left:0; }
  .campo:last-child{ padding-right:0; }
  /* El rango pide más aire: tiene dos tiradores y tres números debajo. */
  .campo--rango{ flex:1.4 1 0; }
}

.campo__etiqueta{
  font-size:.625rem; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--laton);
}
/* El valor es lo que se lee de un vistazo, así que pesa más que su etiqueta.
   Al revés —etiqueta grande, valor chico— hay que leer dos veces para saber
   cómo quedó filtrado. */
.campo__control{
  width:100%; padding:.15rem 1.6rem .15rem 0;
  font-family:var(--texto); font-size:1.0625rem; font-weight:500;
  color:var(--hueso);
  background:none; border:0; border-radius:0;
  appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--laton) 50%),
                   linear-gradient(135deg,var(--laton) 50%,transparent 50%);
  background-position:calc(100% - .55rem) 60%, calc(100% - .2rem) 60%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
/* Sin marco no hay borde que resaltar, así que el foco se dibuja con un
   contorno propio. Sin esto, quien tabula pierde de vista dónde está — que es
   el costo típico de sacarle el marco a un control, y hay que pagarlo acá. */
.campo__control:focus-visible{
  outline:2px solid var(--laton); outline-offset:4px; border-radius:2px;
}
.campo__control option{ background:var(--fondo); color:var(--hueso); }

/* ── El desplegable propio ────────────────────────────────────────────
   Lo monta desplegables.js encima del <select>, que sigue existiendo y sigue
   mandando. Ver ese archivo para el porqué.

   El nativo se esconde sin `display:none`: sacarlo del flujo lo sacaría también
   del formulario para algunas tecnologías de asistencia. Queda de 1 px,
   invisible y fuera del recorrido del Tab. */
.campo--desplegable .campo__nativo{
  position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;
}
.campo--desplegable{ position:relative; }

.desplegable{ position:relative; }
.desplegable__valor{
  width:100%; padding:.15rem 1.6rem .15rem 0;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  font-family:var(--texto); font-size:1.0625rem; font-weight:500;
  color:var(--hueso); text-align:left;
  background:none; border:0; cursor:pointer;
}
/* La flecha se dibuja con un pseudo-elemento y gira al abrir: es la misma
   pieza en los dos estados, así que el giro se lee como que se dio vuelta y no
   como que apareció otra cosa. */
.desplegable__valor::after{
  content:''; flex:none;
  width:.42rem; height:.42rem; margin-right:.1rem;
  border-right:1.5px solid var(--laton); border-bottom:1.5px solid var(--laton);
  transform:translateY(-2px) rotate(45deg);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.desplegable--abierto .desplegable__valor::after{
  transform:translateY(1px) rotate(-135deg);
}

/* ── La lista ─────────────────────────────────────────────────────────
   Se despliega hacia abajo: la altura va de 0 a lo que ocupe, con el contenido
   apenas subido y difuminado. No hay `max-height` con un número inventado —
   `grid-template-rows: 0fr → 1fr` anima hasta el alto real, cualquiera sea.

   El desenfoque de salida es lo que la hace sentir un panel de vidrio y no una
   caja que aparece: sin él, con la misma curva y la misma duración, se lee como
   un salto. */
.desplegable__panel{
  --radio:10px;
  position:absolute; left:0; right:0; top:calc(100% + .65rem); z-index:30;
  display:grid; grid-template-rows:0fr;
  background:var(--superficie);
  border:1px solid var(--filete); border-radius:var(--radio);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.55);
  opacity:0; visibility:hidden;
  transform:translateY(-6px);
  filter:blur(3px);
  transition:grid-template-rows .34s cubic-bezier(.16,1,.3,1),
             opacity .22s ease, transform .34s cubic-bezier(.16,1,.3,1),
             filter .28s ease, visibility .34s;
}
.desplegable--abierto .desplegable__panel{
  grid-template-rows:1fr;
  opacity:1; visibility:visible; transform:none; filter:blur(0);
}
/* `min-height:0` es lo que hace que una fila de grilla pueda medir menos que su
   contenido, y `overflow:hidden` lo que recorta mientras crece. Sin los dos, la
   lista aparece entera desde el primer cuadro y la animación no se ve.

   El radio va acá y no sólo en el panel: el que recorta es ESTE elemento, así
   que sin radio propio el fondo cuadrado de la opción resaltada asomaba por las
   cuatro esquinas del panel redondeado. Se le resta el borde del panel para que
   no quede un pelo de fondo entre el resaltado y el filete. */
.desplegable__lista{
  min-height:0; overflow:hidden;
  border-radius:calc(var(--radio) - 1px);
  list-style:none; margin:0; padding:0;
}

.desplegable__opcion{
  padding:.6rem .95rem;
  font-size:.9375rem; color:var(--humo);
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease;
}
.desplegable__opcion:first-child{ padding-top:.75rem; }
.desplegable__opcion:last-child{ padding-bottom:.75rem; }
/* Detrás de `hover:hover` porque en táctil el `:hover` se queda pegado en la
   última opción tocada: el menú se vuelve a abrir con una opción resaltada que
   no es la elegida, y se lee como que el filtro dice otra cosa. */
@media (hover:hover){
  .desplegable__opcion:hover{ background:var(--superficie-2); color:var(--hueso); }
}
.desplegable__opcion[aria-selected="true"]{ color:var(--laton); }
.desplegable__opcion:focus-visible{ outline:2px solid var(--laton); outline-offset:-2px; }

/* En el teléfono la opción se toca con el dedo, así que el renglón crece hasta
   los 44 px que pide un objetivo táctil. En el escritorio se apunta con el
   puntero y ese mismo alto dejaría una lista enorme para siete marcas. */
@media (max-width:47.9375rem){
  .desplegable__opcion{ padding:.8rem .95rem; font-size:1rem; }
}

@media (prefers-reduced-motion:reduce){
  .desplegable__lista,.desplegable__valor::after,.desplegable__opcion{ transition:none; }
  .desplegable__lista{ filter:none; }
}

/* El conteo cuelga de la barra en vez de tener su propio filete debajo: dos
   líneas horizontales seguidas partían el bloque en dos cosas que en realidad
   son una sola —cómo filtré y cuánto quedó—. */
/* El margen horizontal va en `auto` y no en 0. La página de stock centra sus
   bloques con `margin-inline:auto`, y un `margin:.9rem 0` lo pisaba: el conteo
   quedaba pegado al margen de la página mientras el título arrancaba 136 px más
   adentro. Se leía como un renglón suelto de otra maqueta. */
.conteo{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; flex-wrap:wrap;
  margin:.9rem auto 1.75rem; padding-bottom:0;
  border-bottom:0;
  font-size:.9375rem; color:var(--humo);
}
.conteo__limpiar{
  padding:0; border:0; background:none; cursor:pointer;
  font-family:var(--texto); font-size:.875rem; color:var(--laton);
  text-decoration:underline; text-underline-offset:3px;
}

/* ── La grilla ───────────────────────────────────────────────────────── */

.grilla{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:1fr;
}
@media (min-width:38rem){ .grilla{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:66rem){ .grilla{ grid-template-columns:repeat(3,1fr); } }


.vacio h2{ font-size:clamp(1.3rem,2.5vw,1.75rem); margin-bottom:.85rem; }
.vacio p{ max-width:44ch; margin-inline:auto; color:var(--humo); }
.vacio__acciones{
  display:flex; flex-wrap:wrap; gap:.85rem; justify-content:center; margin-top:2rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   El mármol

   Acá y sólo acá. Es la losa de fondo de la foto del reloj, que es donde el
   cliente lo usa en su página. Dos variantes, como en su material: blanca de
   vetas grises, y negra de vetas claras.
   ═══════════════════════════════════════════════════════════════════════ */

.marmol{ position:relative; overflow:hidden; }

.marmol--blanco{
  background:
    var(--vetas-anchas),
    var(--vetas),
    linear-gradient(150deg,#FBFAF8 0%,#EFEDE8 44%,#E2DFD8 100%);
  background-size:1400px 1400px, 700px 700px, auto;
  background-blend-mode:soft-light, overlay, normal;
}
.marmol--negro{
  background:
    var(--vetas-anchas),
    var(--vetas),
    linear-gradient(150deg,#1C1C1C 0%,#0B0B0B 50%,#161616 100%);
  background-size:1400px 1400px, 700px 700px, auto;
  background-blend-mode:soft-light, overlay, normal;
}

/* ═══════════════════════════════════════════════════════════════════════
   Tarjeta de pieza — la usan los destacados y el stock
   ═══════════════════════════════════════════════════════════════════════ */

.piezas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(.85rem,1.5vw,1.25rem); grid-template-columns:1fr;
}
@media (min-width:34rem){ .piezas{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:56rem){ .piezas{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:78rem){ .piezas{ grid-template-columns:repeat(4,1fr); } }

.pieza{
  display:flex; flex-direction:column;
  background:var(--superficie);
  border:1px solid var(--filete);
  border-radius:14px; overflow:hidden;
  transition:border-color .25s ease, transform .25s ease;
}
.pieza:hover{ border-color:var(--laton); transform:translateY(-3px); }

.pieza__losa{
  position:relative; aspect-ratio:4/5;
  display:grid; place-items:center;
}
.pieza__foto{ width:100%; height:100%; object-fit:cover; }

/* La losa de mármol sola dice que la pieza existe y que la foto todavía no
   llegó, que es la verdad. Un hueco gris al lado de tarjetas con foto se lee
   como que la página se rompió. (Patrón tomado de la tarjeta de Muvo.) */
.pieza__sinfoto{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(0,0,0,.42);
}
.marmol--negro .pieza__sinfoto{ color:rgba(255,255,255,.42); }

.pieza__precio{
  position:absolute; left:.7rem; top:.7rem;
  padding:.32rem .7rem; border-radius:999px;
  background:var(--laton); color:#1A1408;
  font-size:.75rem; font-weight:700; letter-spacing:.02em;
  font-variant-numeric:lining-nums tabular-nums;
}

.pieza__cuerpo{ display:flex; flex-direction:column; flex:1; padding:1rem; }
.pieza__modelo{ font-size:1.05rem; margin-bottom:.5rem; line-height:1.15; }

/* El año sale de la planilla y es opcional: en alta gama mueve el precio, pero
   una ficha que dice "Año —" informa menos que una que no lo menciona. Por eso
   la línea no existe cuando el dato no está, en vez de existir vacía. */
.pieza__anio{ font-size:.75rem; color:var(--humo); margin:0 0 .5rem; }
.pieza__desc{
  font-size:.8125rem; line-height:1.6; color:var(--humo);
  /* Tres renglones y corta: en una grilla de cuatro, una descripción larga
     estira su tarjeta y desalinea la fila entera. */
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}

.pieza__estado{
  display:flex; align-items:center; gap:.5rem;
  margin:.85rem 0 .95rem;
  font-size:.6875rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--laton);
}
.pieza__estado span{
  width:.45rem; height:.45rem; border-radius:50%;
  background:var(--laton); flex:none;
}

.pieza__cta{ margin-top:auto; width:100%; gap:.5rem; padding:.7rem 1rem; font-size:.875rem; }


/* Destacados dentro del stock: una vidriera arriba, el catálogo abajo. */
.destacados{ margin-bottom:clamp(3rem,6vw,4.5rem); }
.destacados__titulo{
  font-size:clamp(1.15rem,2vw,1.5rem); margin-bottom:1.5rem;
  padding-bottom:.85rem; border-bottom:1px solid var(--filete);
}
.stock__separador{ margin-bottom:1.5rem; }
.stock__subtitulo{ font-size:clamp(1.15rem,2vw,1.5rem); }

/* ── Servicios: lista, no tarjetas ─────────────────────────────────────
   Cuatro tarjetas iguales de título y párrafo son el contenedor perezoso.
   Una lista con filetes se lee como lo que es: un menú de servicios. */
.servicios__lista{ margin:0; border-top:1px solid var(--filete); }
.servicio{
  display:grid; gap:.5rem 3rem; grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.25rem) 0;
  border-bottom:1px solid var(--filete);
}
@media (min-width:48rem){
  .servicio{ grid-template-columns:minmax(0,14rem) minmax(0,1fr); align-items:baseline; }
}
.servicio > dt{
  font-family:var(--display); font-weight:var(--display-peso); font-size:clamp(1.3rem,2.4vw,1.75rem);
  color:var(--hueso);
}
.servicio > dd{ margin:0; color:var(--humo); max-width:56ch; }

/* ═══════════════════════════════════════════════════════════════════════
   El pie
   ═══════════════════════════════════════════════════════════════════════ */

.pie{ border-top:1px solid var(--filete); }

/* ── La cinta de marcas ──────────────────────────────────────────────────
   Con los logos, no con los nombres. Vive en el pie: es la prueba del
   catálogo, no el argumento de venta. */
.pie__marcas{ padding:clamp(2rem,4vh,3rem) 0; border-bottom:1px solid var(--filete); overflow:hidden; }
.cinta{ display:flex; width:max-content; animation:desfilar 62s linear infinite; }
.cinta__lista{
  display:flex; align-items:center; gap:clamp(3.5rem,8vw,7rem);
  list-style:none; margin:0; padding:0 clamp(1.5rem,3.5vw,3rem);
}
.cinta__lista img{
  height:clamp(3.5rem,7vw,5.25rem); width:auto; object-fit:contain;
  opacity:.92; filter:grayscale(1) brightness(2.1) contrast(1.2);
  transition:opacity .25s ease;
}
.cinta__lista img:hover{ opacity:1; }
@keyframes desfilar{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

.pie__cierre{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem 2rem; padding:clamp(2rem,4vh,2.75rem) var(--margen);
}
.pie__lugar{ font-size:.9375rem; line-height:1.8; }
.pie__copy{
  display:block; margin-bottom:.35rem;
  font-size:.75rem; color:var(--humo-bajo);
}
.pie__lugar span{ color:var(--humo); }

/* ── Redes ───────────────────────────────────────────────────────────── */

.redes{ display:flex; align-items:center; gap:.75rem; }
.red, .redes__hueco{
  width:2.85rem; height:2.85rem; border-radius:999px; flex:none;
}
.red{
  display:grid; place-items:center;
  color:var(--hueso); border:1px solid var(--filete);
  transition:border-color .2s ease, color .2s ease;
}
.red:hover{ border-color:var(--laton); color:var(--laton); }
/* El hueco le guarda el lugar al botón de WhatsApp cuando aterriza. */
.redes__hueco{ display:block; }

/* ═══════════════════════════════════════════════════════════════════════
   El botón flotante de WhatsApp

   Abajo a la derecha. Aterriza en el pie, al lado de Instagram, con un
   translate — nunca cambia de position, porque el salto entre sistemas de
   coordenadas no se puede animar sin un frame de parpadeo.
   ═══════════════════════════════════════════════════════════════════════ */

.wa-fijo{
  position:fixed; right:var(--margen); bottom:clamp(1.25rem,4vh,2.25rem); z-index:20;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.35rem .85rem 1rem;
  background:var(--hueso); color:var(--tinta); text-decoration:none;
  border:1px solid transparent; border-radius:999px;
  box-shadow:0 10px 34px rgba(0,0,0,.5);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s,
             transform .55s cubic-bezier(.22,1,.36,1),
             padding .35s ease, background-color .3s ease,
             color .3s ease, border-color .3s ease, box-shadow .4s ease;
}
.wa-fijo[data-visible]{ opacity:1; visibility:visible; }

.wa-fijo__texto{
  display:grid; grid-template-columns:1fr; overflow:hidden;
  font-size:.9375rem; font-weight:600; white-space:nowrap;
  transition:grid-template-columns .35s cubic-bezier(.22,1,.36,1);
}
.wa-fijo__texto > span{ overflow:hidden; min-width:0; }

/* Aterrizado: se apaga la etiqueta, se achica a rueda y toma el aspecto de
   los otros íconos de red para que la fila se lea pareja. */
.wa-fijo[data-aterrizado]{
  padding:0; gap:0;
  width:2.85rem; height:2.85rem;
  justify-content:center;
  background:transparent; color:var(--hueso);
  border-color:var(--filete); box-shadow:none;
}
.wa-fijo[data-aterrizado] .wa-fijo__texto{ grid-template-columns:0fr; }
.wa-fijo[data-aterrizado]:hover{ border-color:var(--laton); color:var(--laton); }

/* ── En el teléfono va chico siempre ──────────────────────────────────
   Sin etiqueta y en rueda, del mismo tamaño que el del pie. Desplegado ocupaba
   un tercio del ancho de la pantalla y se comía el «Ver en el stock» de la
   ficha que estuviera abajo.

   Lo único que NO se copia del pie es el relleno: flotando, el botón pasa por
   encima de las fotos de mármol blanco, y ahí un ícono hueso sobre fondo
   transparente desaparece. Mantiene el fondo hasta que aterriza, y recién en el
   pie —donde el fondo es la página y no una foto— toma el aspecto de los otros
   íconos de red. */
@media (max-width:48rem){
  .wa-fijo{
    padding:0; gap:0;
    width:2.85rem; height:2.85rem;
    justify-content:center;
  }
  .wa-fijo .wa-fijo__texto{ grid-template-columns:0fr; }
}

@media (prefers-reduced-motion:reduce){
  .wa-fijo{ transition:opacity .01ms, visibility .01ms; }
}

/* ═══════════════════════════════════════════════════════════════════════
   El material del fondo

   Tres tratamientos, los tres en CSS puro y en una capa fija detrás del
   contenido — el material no scrollea, como no scrollea la mesa sobre la que
   se apoya un reloj. Se cambian con la clase en <html>.

   PROVISORIO: el selector de abajo es para elegir. Cuando esté decidido, se
   fija la clase ganadora en el <html>, se borran las otras dos y se saca
   fondos.js del HTML.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── El guillochado ───────────────────────────────────────────────────
   El grabado de las esferas de alta relojería: ondas finas hechas a torno.
   El patrón se enmascara con un charco de luz, así aparece sólo donde ésta
   cae — como una esfera lacada bajo una lámpara. */
.material{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:var(--fondo);
  /* La lámpara viaja con el scroll. fondo.js escribe estas dos. */
  --lx:68%; --ly:18%;
}
.material::after{ content:''; position:absolute; inset:0; }

/* ── 1 · Guillochado ──────────────────────────────────────────────────
   El grabado de las esferas de alta relojería, y ahora es un grabado concreto:
   **tapisserie**, la cuadrícula de pirámides diminutas de la esfera del Royal
   Oak — que es el reloj que se ve en el film de la portada.

   Antes eran anillos concéntricos, y tenían un problema que no era de gusto:
   `repeating-radial-gradient(circle at …)` dibuja un centro, y ese ojo de buey
   flotando sobre la página no corresponde a nada. Una esfera guillochada
   entera tiene centro; un fondo que es sólo un pedazo de superficie, no.

   Sacarlo además abarata el scroll. --lx/--ly movían el patrón Y la máscara,
   así que cada cuadro repintaba el degradado entero; ahora el patrón es fijo y
   lo único que viaja es el charco de luz.

   Las pirámides se arman con dos pares de líneas: una clara arriba y a la
   izquierda de cada celda, una oscura abajo y a la derecha. Es el mínimo que
   hace que una cuadrícula plana se lea como relieve. */
.material::after{
  --celda:15px;
  background:
    /* la cara iluminada de cada pirámide */
    repeating-linear-gradient(90deg,
      rgba(255,255,255,.055) 0 1px, transparent 1px var(--celda)),
    repeating-linear-gradient(0deg,
      rgba(255,255,255,.045) 0 1px, transparent 1px var(--celda)),
    /* la cara en sombra, contra el borde opuesto de la misma celda */
    repeating-linear-gradient(90deg,
      transparent 0 calc(var(--celda) - 1px), rgba(0,0,0,.34) calc(var(--celda) - 1px) var(--celda)),
    repeating-linear-gradient(0deg,
      transparent 0 calc(var(--celda) - 1px), rgba(0,0,0,.30) calc(var(--celda) - 1px) var(--celda)),
    /* el pulido en diagonal, muy por debajo del resto: es lo que evita que la
       cuadrícula se lea como una hoja cuadriculada y no como metal */
    repeating-linear-gradient(38deg,
      rgba(255,255,255,.018) 0 1px, transparent 1px 9px);
  -webkit-mask-image:radial-gradient(78% 62% at var(--lx) var(--ly), #000 4%, transparent 78%);
          mask-image:radial-gradient(78% 62% at var(--lx) var(--ly), #000 4%, transparent 78%);
}


/* ── Los dos caminos del paso 2 ───────────────────────────────────────
   Se integran dentro del paso en vez de abrir una sección: son una
   bifurcación de un trámite, no un tema aparte. La letra en un círculo de
   latón alcanza para marcar la elección sin robarle jerarquía al paso. */
.caminos{ margin:1.15rem 0 0; display:grid; gap:.85rem; }

.camino{
  padding-top:.85rem;
  border-top:1px solid var(--filete);
}
.camino > dt{
  display:flex; align-items:center; gap:.55rem;
  font-size:.9375rem; font-weight:600; color:var(--hueso);
}
.camino__letra{
  display:grid; place-items:center; flex:none;
  width:1.35rem; height:1.35rem; border-radius:999px;
  background:var(--laton); color:#1A1408;
  font-size:.6875rem; font-weight:700;
}
.camino > dd{ margin:.35rem 0 0; font-size:.875rem; color:var(--humo); }
.camino__medios{
  display:block; margin-top:.4rem;
  font-size:.75rem; letter-spacing:.02em; color:var(--humo-bajo);
}

/* ═══════════════════════════════════════════════════════════════════════
   La vitrina de destacados

   La foto queda fija y el texto pasa al lado; al entrar cada pieza en el
   centro de la pantalla, su foto hace fundido. Patrón del componente Scroll01,
   portado a vanilla: el original es React + Framer Motion, y montar ese stack
   para una landing estática costaba cientos de KB y el motor de scroll que ya
   andaba. Acá son dos reglas de opacidad y un IntersectionObserver.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── La escena clavada ────────────────────────────────────────────────
   La sección mide varias pantallas; la escena de adentro se pega arriba y
   ocupa una. Mientras se recorre esa altura la página no baja: lo que se mueve
   son las dos columnas. Al terminar, la escena se despega y la sección
   siguiente sube encima — que es el efecto de "scrollear en el lugar", y sale
   de `sticky`, sin interceptar el scroll de nadie.

   Cuántas pantallas dura: una por pieza más media de respiro. Con menos, los
   relojes pasan volando; con más, el recorrido se vuelve una tarea. */
.vitrina{ padding:0; }

@media (min-width:56rem){
  .vitrina{ height:calc(var(--piezas, 5) * 70vh); }
  .vitrina__escena{
    position:sticky; top:0;
    height:100vh; height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:13rem var(--margen) 2.5rem;
    overflow:hidden;
  }
}
@media (max-width:55.9375rem){
  .vitrina{ padding:var(--ritmo) var(--margen); }
}

/* El título se va con el avance —lo escribe vitrina.js— y deja de ocupar
   espacio del flujo para que las columnas queden centradas en la pantalla.

   El padding de arriba de la escena es el que le da aire: es lo que separa la
   foto del título mientras los dos conviven, que son los primeros segundos de
   la sección y por lo tanto la primera impresión. */
@media (min-width:56rem){
  .vitrina__cabecera{
    position:absolute; top:3.5rem; left:var(--margen); right:var(--margen);
    margin-bottom:0;
    will-change:opacity, transform;
  }
}

.vitrina__cuerpo{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media (min-width:56rem){
  .vitrina__cuerpo{
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    gap:clamp(2.5rem,5vw,4.5rem);
    align-items:center;
  }
}

/* ── Los carriles ─────────────────────────────────────────────────────
   Cada uno es una ventana de alto fijo por la que pasa su tira. El de fotos se
   difumina por ABAJO y el de texto por ARRIBA: cada uno contra el borde por el
   que su contenido se está yendo.

   Los dos desvanecidos se encienden con --cierre sobre el final del recorrido.
   Antes de eso valen 0 y los carriles no recortan nada. */
@media (min-width:56rem){
  .vitrina__carril{
    position:relative; overflow:hidden;
    /* El desvanecido de los bordes va SIEMPRE, no sólo al final: sin él, a
       mitad de camino asoma media foto cortada contra una línea dura arriba y
       abajo, y eso se lee como un recorte y no como algo que está pasando.
       Con el difuminado, las piezas se deshacen al entrar y al salir. */
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image:linear-gradient(to bottom,
      transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .vitrina__carril--fotos{ height:min(62vh, 34rem); }
  .vitrina__carril--texto{ height:min(58vh, 30rem); }

  .vitrina__tira{ will-change:transform, opacity; }
}

/* ── Las fotos ────────────────────────────────────────────────────────
   Ya no se apilan una encima de otra con fundido: van en tira, como el texto,
   y lo que las cambia es el viaje. */
.vitrina__losa{
  aspect-ratio:4/5;
  display:grid; place-items:center; overflow:hidden;
  border:1px solid var(--filete); border-radius:14px;
}
@media (min-width:56rem){
  .vitrina__carril--fotos .vitrina__tira{
    display:grid; gap:6vh; justify-items:center;
  }
  .vitrina__losa{ width:min(100%, 22rem); }
}
.vitrina__losa img{ width:100%; height:100%; object-fit:cover; }
.vitrina__sinfoto{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(0,0,0,.42);
}
.marmol--negro .vitrina__sinfoto{ color:rgba(255,255,255,.42); }

/* ── El texto ─────────────────────────────────────────────────────────
   Cada ficha ocupa el alto del carril, así los nombres pasan de a uno en vez
   de quedar todos a la vista, que es lo que hacía que se leyera como una lista
   y no como un pase. */
@media (min-width:56rem){
  .vitrina__carril--texto .vitrina__tira{ display:grid; }
  .vitrina__losa{ width:min(100%, 24rem); }
  .vitrina__ficha{
    min-height:min(58vh, 30rem);
    display:flex; flex-direction:column; justify-content:center;
  }
}
/* ── El teléfono: la misma escena, acostada ───────────────────────────
   Una foto arriba y su texto abajo, y el contramano pasa a ser horizontal: la
   foto se va a la izquierda y el texto a la derecha.

   Antes acá no había fotos —la columna se escondía— y en una página cuyo
   producto es el reloj eso dejaba a la mayoría del tráfico mirando cinco
   nombres sin ninguna imagen.

   `row-reverse` en las dos tiras es lo que da el sentido de cada una, y es el
   único cambio: la cuenta que las mueve lee posiciones reales, así que no se
   entera de que están dibujadas al revés. */
@media (max-width:55.9375rem){
  .vitrina{ height:calc(var(--piezas, 5) * 62vh); padding:0; }
  .vitrina__escena{
    position:sticky; top:0;
    height:100vh; height:100svh;
    display:flex; flex-direction:column; justify-content:center;
    padding:7.5rem var(--margen) 2.5rem;
    overflow:hidden;
  }
  .vitrina__cabecera{
    position:absolute; top:4.5rem; left:var(--margen); right:var(--margen);
    margin-bottom:0; will-change:opacity, transform;
  }
  .vitrina__cabecera .titulo{ font-size:clamp(1.75rem,7vw,2.25rem); }
  .vitrina__cabecera .seccion__bajada{ display:none; }

  .vitrina__cuerpo{ grid-template-columns:1fr; gap:1.5rem; align-content:center; }

  .vitrina__carril{
    position:relative; overflow:hidden;
    /* Acostada, el difuminado va en los costados: es por ahí por donde entra y
       sale el contenido. */
    -webkit-mask-image:linear-gradient(to right,
      transparent 0, #000 9%, #000 91%, transparent 100%);
            mask-image:linear-gradient(to right,
      transparent 0, #000 9%, #000 91%, transparent 100%);
  }
  .vitrina__carril--fotos{ height:min(46vh, 22rem); }
  .vitrina__carril--texto{ height:auto; }

  .vitrina__tira{
    display:flex; flex-direction:row-reverse;
    align-items:flex-start; gap:12vw;
    width:max-content;
    will-change:transform, opacity;
  }
  .vitrina__carril--fotos .vitrina__tira{ align-items:center; height:100%; }

  .vitrina__losa{ width:min(64vw, 15rem); flex:none; }
  .vitrina__ficha{ width:min(78vw, 24rem); flex:none; }
}

/* Sin movimiento: no hay escena clavada ni contramano. Las fichas quedan una
   debajo de la otra, que es la misma información sin el viaje.

   La columna de fotos se esconde, igual que en pantalla chica. No es pereza:
   la tira está armada AL REVÉS —es lo que hace posible el contramano— así que
   sin el viaje quedarían cinco fotos en orden inverso al lado de cinco textos
   en orden normal. Una foto que no corresponde al texto de al lado es peor que
   ninguna foto, sobre todo en una página cuyo argumento es la autenticidad. */
@media (prefers-reduced-motion:reduce){
  .vitrina{ height:auto; padding:var(--ritmo) var(--margen); }
  .vitrina__escena{ position:static; height:auto; padding:0; overflow:visible; display:block; }
  .vitrina__cabecera{ position:static; margin-bottom:clamp(2.5rem,6vw,4.5rem); }
  .vitrina__carril{ height:auto; overflow:visible; -webkit-mask-image:none; mask-image:none; }
  .vitrina__carril--fotos{ display:none; }
  .vitrina__cuerpo{ grid-template-columns:1fr; }
  .vitrina__tira{ transform:none !important; opacity:1 !important; }
  .vitrina__ficha{ min-height:0; }
  .vitrina__cabecera{ opacity:1 !important; transform:none !important; }
}

.vitrina__marca{
  font-size:.6875rem; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--laton); margin-bottom:.6rem;
}
.vitrina__modelo{ font-size:clamp(1.5rem,3vw,2.25rem); margin-bottom:.9rem; }
.vitrina__desc{ font-size:.9375rem; line-height:1.75; color:var(--humo); max-width:44ch; }
.vitrina__meta{
  margin:1rem 0 1.35rem; font-size:.8125rem; color:var(--humo-bajo);
  font-variant-numeric:lining-nums tabular-nums;
}

/* El botón se estiraba a todo el ancho de la columna: la ficha es un flex
   column y sus hijos se estiran por defecto. `align-self:start` lo devuelve al
   ancho de su texto, que es lo que corresponde a una acción secundaria. */
.vitrina__ficha .boton{
  align-self:start;
  padding:.55rem 1.1rem;
  font-size:.8125rem;
  gap:.4rem;
}

@media (prefers-reduced-motion:reduce){
  .vitrina__losa,.vitrina__ficha{ transition:none; }
  .vitrina__ficha{ opacity:1; }
}

/* ═══════════════════════════════════════════════════════════════════════
   La página de stock: filtros, índice de medidas y la rueda
   ═══════════════════════════════════════════════════════════════════════ */

.stock__cuerpo{ display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:64rem){
  .stock__cuerpo{ grid-template-columns:5.5rem minmax(0,1fr); gap:2.5rem; }
}

/* ── El rango de precio ───────────────────────────────────────────────
   Dos <input type=range> superpuestos sobre un riel dibujado. Los input van
   transparentes y sólo se les estila la manija: así el arrastre, el teclado y
   el lector de pantalla los sigue manejando el sistema. */
/* ── El filtro de precio ──────────────────────────────────────────────
   Era un riel liso con dos manijas: el control de rango de cualquier tienda.
   Ahora es una PAUTA, como el minutero grabado de una esfera — y las marcas no
   están repartidas parejo: hay una por pieza, puesta en su precio.

   Eso lo vuelve informativo además de bonito. Antes, mover una manija era
   mover un número a ciegas; ahora se ve dónde se junta el stock y cuántos
   relojes quedan de cada lado antes de soltar. El dato ya lo teníamos.

   Las marcas de adentro del tramo son de latón y altas; las de afuera quedan
   bajas y apagadas. La transición es corta —140 ms— porque esto se mueve
   arrastrando: una animación lenta acá se sentiría como que el control pesa. */
.campo--rango{ min-width:0; }
.rango__valor{
  margin-left:.5rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--laton); font-variant-numeric:lining-nums tabular-nums;
}

.rango{ position:relative; height:2.75rem; display:flex; align-items:center; }

/* Tres graduaciones y nada más: piso, mitad y techo. Antes había una marca por
   pieza —mostraba dónde se juntaba el stock— pero quedaba asimétrica y
   desprolija: las marcas caen donde caen los precios, no donde el ojo las
   espera. Con tres, la escala se lee como el minutero de un cronógrafo, que es
   regular por definición.

   La del medio es el punto medio del rango, no la mediana de los precios: es
   una REGLA, y una regla tiene que ser pareja para poder medir contra ella. */
.rango__pauta{ position:absolute; inset-inline:0; height:100%; pointer-events:none; }

.rango__grada{
  position:absolute; left:var(--p); top:0; bottom:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
/* Los extremos se apoyan por dentro del riel: centrados, la mitad de la marca y
   medio número quedarían fuera de la caja. */
.rango__grada[data-borde="izq"]{ align-items:flex-start; }
.rango__grada[data-borde="der"]{ align-items:flex-end; transform:translateX(-100%); }

.rango__grada i{
  width:1px; height:.4rem; margin-bottom:auto;
  background:var(--filete);
}
.rango__grada b{
  position:absolute; top:calc(50% + .55rem);
  font-size:.625rem; font-weight:500; letter-spacing:.04em;
  color:var(--humo-bajo); font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
  transition:color .18s ease;
}
.rango__grada[data-borde="izq"] b{ left:0; }
.rango__grada[data-borde="der"] b{ right:0; }
/* Se enciende la graduación que el tramo elegido ya cubrió: da referencia de
   dónde quedaron las manijas sin tener que leer el número de arriba. */
.rango__grada[data-dentro] b{ color:var(--laton); }
.rango__grada[data-dentro] i{ background:var(--laton); }

.rango__riel{
  position:absolute; inset-inline:0; height:1px;
  background:var(--filete);
}
.rango__tramo{ position:absolute; inset-block:0; background:var(--laton); }

.rango input[type=range]{
  position:absolute; inset-inline:0; width:100%;
  margin:0; background:none; pointer-events:none;
  -webkit-appearance:none; appearance:none;
}
/* La manija se achica al agarrarla. Es la respuesta que confirma que el control
   escuchó, y va corta —120 ms— porque es realimentación de una acción directa:
   cualquier cosa más lenta se siente como retardo, no como respuesta. */
.rango input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; pointer-events:auto;
  width:.95rem; height:.95rem; border-radius:999px;
  background:var(--hueso); border:1.5px solid var(--laton);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  cursor:grab;
  transition:transform .12s cubic-bezier(.23,1,.32,1), box-shadow .12s ease;
}
.rango input[type=range]:active::-webkit-slider-thumb{
  transform:scale(.92); cursor:grabbing;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.rango input[type=range]::-moz-range-thumb{
  pointer-events:auto;
  width:.95rem; height:.95rem; border-radius:999px;
  background:var(--hueso); border:1.5px solid var(--laton);
  box-shadow:0 2px 6px rgba(0,0,0,.45);
  cursor:grab;
  transition:transform .12s cubic-bezier(.23,1,.32,1);
}
.rango input[type=range]:active::-moz-range-thumb{ transform:scale(.92); cursor:grabbing; }

.rango input[type=range]:focus-visible::-webkit-slider-thumb{
  outline:2px solid var(--laton); outline-offset:2px;
}
.rango input[type=range]:focus-visible::-moz-range-thumb{
  outline:2px solid var(--laton); outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .rango__marca,
  .rango input[type=range]::-webkit-slider-thumb,
  .rango input[type=range]::-moz-range-thumb{ transition:none; }
}

/* ── El índice de medidas ─────────────────────────────────────────────
   De mayor a menor, con la pieza que encabeza la fila resaltada. Funciona de
   mapa: dice dónde estás parado dentro del catálogo. */
.medidas{ align-self:start; }
@media (min-width:64rem){ .medidas{ position:sticky; top:7rem; } }

.medidas__titulo{
  font-size:.625rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--humo-bajo); margin-bottom:.85rem;
}
/* Debajo de 64rem el índice es UNA sola línea que se desliza con el dedo. Van
   de mayor a menor de izquierda a derecha: arrastrar hacia la izquierda
   descubre las cajas chicas, y soltar hacia la derecha vuelve a la más grande,
   que es la que encabeza el catálogo.

   Entran tres y media, y la media es el punto. La mitad cortada del cuarto
   número es lo único que dice «hay más» sin escribirlo; con cuatro enteras la
   línea se lee como completa y nadie la desliza. Antes se partía en dos filas,
   que ocupaban el doble y no sugerían nada.

   `flex-basis` fijo y no ancho de contenido: con el contenido mandando, cuántas
   entran depende de si las medidas son de dos o de tres dígitos, y la media
   medida cortada —que es la señal— aparecería o no según el stock del día. */
.medidas__lista{
  list-style:none; margin:0; padding:0;
  --desvanecido-izq:0px;
  --desvanecido-der:0px;
  display:flex; flex-wrap:nowrap; gap:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(to right,
    transparent 0, #000 var(--desvanecido-izq),
    #000 calc(100% - var(--desvanecido-der)), transparent 100%);
          mask-image:linear-gradient(to right,
    transparent 0, #000 var(--desvanecido-izq),
    #000 calc(100% - var(--desvanecido-der)), transparent 100%);
  transition:--desvanecido-izq .2s cubic-bezier(.23,1,.32,1),
             --desvanecido-der .2s cubic-bezier(.23,1,.32,1);
}
.medidas__lista > li{ flex:0 0 calc(100% / 3.5); scroll-snap-align:start; }
.medidas__lista[data-izq]{ --desvanecido-izq:2.2rem; }
.medidas__lista[data-der]{ --desvanecido-der:2.6rem; }

/* En columna, el índice se recorre igual que el catálogo: caja de alto acotado,
   scroll propio, sin barra a la vista y con los bordes desvanecidos del mismo
   lado donde hay más. Con siete medidas no hace falta; con veinte, sí — y es la
   misma pieza, así que se comporta igual en vez de crecer sin fin. */
@media (min-width:64rem){
  .medidas__lista{
    flex-direction:column; gap:.4rem; flex-wrap:nowrap;
    --desvanecido-arriba:0px; --desvanecido-abajo:0px;
    max-height:min(52vh, 22rem);
    overflow-x:hidden; scroll-snap-type:none;
    overflow-y:auto; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to bottom,
      transparent 0, #000 var(--desvanecido-arriba),
      #000 calc(100% - var(--desvanecido-abajo)), transparent 100%);
            mask-image:linear-gradient(to bottom,
      transparent 0, #000 var(--desvanecido-arriba),
      #000 calc(100% - var(--desvanecido-abajo)), transparent 100%);
    transition:--desvanecido-arriba .2s cubic-bezier(.23,1,.32,1),
               --desvanecido-abajo  .2s cubic-bezier(.23,1,.32,1);
  }
  .medidas__lista[data-arriba]{ --desvanecido-arriba:1.6rem; }
  .medidas__lista[data-abajo] { --desvanecido-abajo:1.6rem; }
  /* En columna cada medida vuelve a medir lo suyo: el `flex-basis` de la línea
     las estiraría a un tercio del alto de la caja. */
  .medidas__lista > li{ flex:none; }
}
.medidas__lista::-webkit-scrollbar{ width:0; height:0; }

@media (prefers-reduced-motion:reduce){
  .medidas__lista{ transition:none; }
}
/* ── Las medidas son botones ──────────────────────────────────────────
   El índice hace dos cosas a la vez y hay que poder distinguirlas de un
   vistazo, o no se entiende qué está pasando:

   · `data-activa` en el <li> = por acá vas scrolleando. Es una consecuencia,
     no una orden: sólo tiñe el número.
   · `aria-pressed` en el botón = esta medida está ELEGIDA. Es una decisión del
     visitante, así que pesa más: lleva su propia marca al costado.

   La marca crece desde el medio hacia arriba y hacia abajo, que es lo que hace
   que el renglón se lea como que se enciende y no como que apareció otra cosa.
   Es el mismo recurso que el índice de zonas de Muvo. */
.medidas__lista li{ position:relative; }

.medidas__boton{
  position:relative;
  display:block; width:100%; padding:.1rem 0 .1rem .6rem;
  border:0; background:none; cursor:pointer; text-align:left;
  font-family:var(--texto); font-size:.75rem; color:var(--humo-bajo);
  font-variant-numeric:lining-nums tabular-nums;
  transition:color .25s ease, transform .25s ease;
}
.medidas__boton span{ font-size:.9375rem; font-weight:600; }
.medidas__boton::before{
  content:''; position:absolute; left:0; top:.15rem; bottom:.15rem;
  width:2px; border-radius:2px; background:var(--laton);
  transform:scaleY(0); transform-origin:center;
  transition:transform .25s cubic-bezier(.23,1,.32,1);
}

@media (hover:hover){
  .medidas__boton:hover{ color:var(--hueso); }
}
.medidas__boton:focus-visible{ outline:2px solid var(--laton); outline-offset:3px; }

.medidas__lista li[data-activa] .medidas__boton{ color:var(--laton); }
.medidas__boton[aria-pressed="true"]{ color:var(--laton); }
.medidas__boton[aria-pressed="true"]::before{ transform:scaleY(1); }

@media (min-width:64rem){
  .medidas__lista li[data-activa] .medidas__boton{ transform:translateX(.2rem); }
}

@media (prefers-reduced-motion:reduce){
  .medidas__boton,.medidas__boton::before{ transition:none; }
}

/* ── La ventana ───────────────────────────────────────────────────────
   Una caja de alto fijo que scrollea por dentro. El patrón viene del buscador
   de Muvo; el porqué de que scrollee de verdad y no con JavaScript está en el
   comentario de stock.html.

   Se registran las dos longitudes del desvanecido para poder animarlas: una
   variable sin registrar es texto para el navegador y salta de un valor al
   otro sin pasar por el medio. Donde no estén soportadas, el desvanecido
   aparece de golpe — peor, pero no roto. */
@property --desvanecido-arriba{ syntax:"<length>"; inherits:false; initial-value:0px; }
@property --desvanecido-abajo { syntax:"<length>"; inherits:false; initial-value:0px; }
/* Las dos horizontales son del índice de medidas cuando es una línea que se
   desliza, debajo de 64rem. Misma razón para registrarlas. */
@property --desvanecido-izq{ syntax:"<length>"; inherits:false; initial-value:0px; }
@property --desvanecido-der{ syntax:"<length>"; inherits:false; initial-value:0px; }

.ventana{
  --desvanecido-arriba:0px;
  --desvanecido-abajo:0px;
  position:relative;
  max-height:min(78vh, 46rem);
  overflow-y:auto;

  /* Sin barra de scroll a la vista. Pintada en latón se leía como un elemento
     de la página —una raya dorada al costado de las tarjetas— y no como un
     control. Lo que dice que hay más es el desvanecido de los bordes, que ya
     está y no compite con nada. */
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0, #000 var(--desvanecido-arriba),
    #000 calc(100% - var(--desvanecido-abajo)), transparent 100%);
          mask-image:linear-gradient(to bottom,
    transparent 0, #000 var(--desvanecido-arriba),
    #000 calc(100% - var(--desvanecido-abajo)), transparent 100%);
  transition:--desvanecido-arriba .2s cubic-bezier(.23,1,.32,1),
             --desvanecido-abajo  .2s cubic-bezier(.23,1,.32,1);
}

/* Cada desvanecido aparece sólo cuando de ese lado hay algo más: es lo que
   dice "seguí, que hay más" y a la vez lo que evita que la primera fila
   arranque cortada cuando está entera adentro. */
.ventana[data-arriba]{ --desvanecido-arriba:4.5rem; }
.ventana[data-abajo] { --desvanecido-abajo:4.5rem; }

.ventana::-webkit-scrollbar{ width:0; height:0; }

/* ── El encadenado del scroll queda como lo hace el navegador ──────────
   Sin `overscroll-behavior:contain` y sin interceptar la rueda, que es lo que
   hubo acá y se sacó: con el puntero sobre las tarjetas el catálogo se recorre
   primero, y **cuando llega a una de sus puntas el mismo gesto sigue moviendo
   la página**. Eso ya lo hace el navegador solo y es exactamente lo que se
   quiere; `contain` lo único que agregaba era quedar trabado en las puntas.

   Se probó además clavar la página con un handler de `wheel` y se revirtió:
   secuestrar el scroll rompe la página de formas que aparecen recién al usarla
   —el gesto deja de corresponderse con lo que se mueve—. La regla que queda:
   **acá el scroll es del visitante, no de la página.**

   ── Y hay que volver a sacarlo, porque Lenis lo vuelve a poner ─────────
   Sacarlo de acá no alcanzaba. Lenis inyecta su propia hoja con
   `.lenis [data-lenis-prevent]{ overscroll-behavior: contain }`, y el catálogo
   y el índice llevan ese atributo justamente para que Lenis no les robe la
   rueda. O sea que la decisión de arriba estaba escrita pero no estaba pasando:
   medido con el puntero encima del catálogo y el catálogo en su tope, la rueda
   dejaba la página clavada en 0, y había que correr el mouse al costado para
   seguir bajando. En el teléfono es lo mismo con el dedo.

   El selector va con el atributo además de la clase porque el de Lenis pesa
   `.lenis [data-lenis-prevent]` y su hoja se inyecta en tiempo de ejecución:
   empatar en especificidad dejaría el resultado atado a cuál de las dos hojas
   entró última.

   Y se devuelve UN eje y no los dos: el índice de medidas es una línea que se
   desliza en horizontal, y ahí `contain` sí se quiere —sin él, seguir
   arrastrando cuando la línea llegó a su punta dispara el gesto de «atrás» del
   navegador—. Lo que tiene que encadenar es el vertical, que es el de la
   página. */
.lenis .ventana[data-ventana],
.lenis .medidas__lista[data-medidas]{ overscroll-behavior-y:auto; }

/* Se corre con el teclado, así que el foco tiene que verse. El offset negativo
   lo mete para adentro: por fuera se lo come el desvanecido. */
.ventana:focus-visible{ outline:2px solid var(--laton); outline-offset:-2px; border-radius:14px; }

/* El relleno no es aire decorativo: la tarjeta se levanta 3 px al pasar el
   mouse y la ventana recorta, así que sin él la fila de arriba perdía esos
   píxeles justo cuando el puntero estaba encima. Abajo hace lo propio: con el
   catálogo scrolleado hasta el final, la última fila termina contra el borde
   en vez de quedar cortada al ras. */
/* Dos columnas desde el teléfono. Con una sola, cada tarjeta se comía la
   pantalla entera y ver veinte piezas eran veinte pantallas de scroll: el
   catálogo se recorría como una fila india en vez de leerse como una vitrina.
   De a dos, la misma pieza entra en la mitad del alto y se ven cuatro de un
   vistazo. */
.ventana__cinta{
  display:grid; gap:clamp(.6rem,1.6vw,1.4rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:.35rem 0 1.1rem;
}
@media (min-width:64rem){ .ventana__cinta{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

@media (prefers-reduced-motion:reduce){
  .ventana{ transition:none; }
}

/* La tarjeta con su caja. Se probó sacarle el borde y el fondo —la foto como
   único objeto, el texto apoyado en la página— y se descartó: sin marco, la
   grilla pierde la lectura de "una pieza por ficha" y el texto queda flotando.
   El filete se queda. */
/* El giro bajo el puntero lo escribe inclinar.js en --giro-x/--giro-y, y el
   alza del hover vive en --alza. Van juntos en UNA sola `transform`: son la
   misma propiedad, así que si se declararan por separado la última pisaría a la
   otra y la tarjeta o se inclinaría o se levantaría, nunca las dos.

   La perspectiva es larga —1100px— a propósito. Con una corta el giro se
   exagera hacia los bordes y la tarjeta se deforma como un naipe; con una larga
   el mismo ángulo se lee como un objeto grande visto de lejos, que es lo que
   una pieza en una vitrina es. */
.giro{
  display:flex; flex-direction:column;
  background:var(--superficie);
  border:1px solid var(--filete); border-radius:14px; overflow:hidden;
  text-decoration:none; color:inherit;
  transform:
    perspective(1100px)
    rotateX(var(--giro-x,0deg))
    rotateY(var(--giro-y,0deg))
    translateY(var(--alza,0px));
  transition:border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.giro:hover{ border-color:var(--laton); --alza:-3px; }

/* Mientras el puntero está encima, la transición se acorta: con los 350 ms del
   reposo la tarjeta llegaría tarde a cada movimiento de la mano y se sentiría
   pegajosa. Al salir vuelve el valor largo, que es el que hace que se acomode
   sola con calma en vez de saltar a su lugar. */
.giro[data-inclinada]{ transition:border-color .3s ease, transform .1s ease-out; }
.giro:focus-visible{ outline:2px solid var(--laton); outline-offset:3px; border-color:var(--laton); }

/* La losa es cuadrada y no 4:5: con 4:5 la tarjeta medía 653 px y entraban dos
   filas por ventana en vez de tres. Los relojes están centrados en la foto, así
   que el recorte no toca la pieza.

   Sin radio ni sombra propios: la que recorta y redondea es la tarjeta. */
.giro__losa{
  position:relative; aspect-ratio:1/1;
  display:grid; place-items:center; overflow:hidden;
}

.giro__losa img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
/* El zoom va en la imagen y no en la tarjeta para que el texto no se mueva:
   mover el texto bajo el puntero es lo que hace que una grilla se sienta
   inestable. Un solo momento, y arranca de un estado ya visible. */
.giro:hover img{ transform:scale(1.05); }

@media (prefers-reduced-motion:reduce){
  .giro,.giro__losa img{ transition:none; }
  .giro:hover{ transform:none; }
  .giro:hover img{ transform:none; }
}
.giro__sinfoto{
  font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(0,0,0,.42);
}
.marmol--negro .giro__sinfoto{ color:rgba(255,255,255,.42); }
.giro__precio{
  position:absolute; left:.75rem; top:.75rem;
  padding:.35rem .75rem; border-radius:999px;
  background:var(--laton); color:#1A1408;
  font-size:.75rem; font-weight:700; font-variant-numeric:lining-nums tabular-nums;
}

.giro__cuerpo{ padding:1.1rem 1.15rem 1.3rem; }
.giro__marca{
  font-size:.6875rem; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--laton); margin-bottom:.5rem;
}
.giro__modelo{ font-size:1.15rem; margin-bottom:.5rem; }
.giro__desc{
  font-size:.8125rem; line-height:1.6; color:var(--humo);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ── Que la ventana entre en la primera pantalla ──────────────────────
   Con el título grande, el aviso en caja y la barra, lo de arriba comía 800 px
   y las tarjetas arrancaban en el borde inferior: la página parecía vacía. Todo
   el encabezado se comprime para que la primera fila se vea sin scrollear. */
.pagina-stock .stock{ padding-top:clamp(4.5rem,9vh,5.5rem); padding-bottom:0; }

/* La columna se acota a 64rem y se centra. Es lo que deja la tarjeta en ~285 px
   con tres por fila: a lo ancho de 1440 las tres se estiraban a 374 y volvían
   al tamaño grande, que era justo lo que había que achicar.

   Se acota TODO el bloque y no sólo la grilla: con el título y la barra a
   sangre y las tarjetas en una columna angosta, la página se lee como dos
   maquetas distintas pegadas uña con otra. */
.pagina-stock .stock > *{ max-width:64rem; margin-inline:auto; }
.pagina-stock .stock__cabecera{ margin-bottom:1.5rem; }
.pagina-stock .stock__cabecera .titulo{ font-size:clamp(1.85rem,3.4vw,2.6rem); }
.pagina-stock .seccion__bajada{ margin-top:.85rem; font-size:.9375rem; max-width:52ch; }

/* El aviso deja de ser una caja y pasa a ser un renglón: es una salvedad, no
   una sección. */
.pagina-stock .aviso{
  margin-bottom:1.25rem; padding:0 0 0 .85rem;
  border:0; border-left:1px solid var(--laton); background:none;
  font-size:.75rem; line-height:1.6;
}
.pagina-stock .conteo{ margin:1rem auto 1.25rem; padding-bottom:.75rem; }
.pagina-stock .barra{ padding:1rem 1.15rem; }

/* El índice de medidas queda centrado contra la ventana y no pegado arriba:
   así el bloque de la izquierda y la grilla se leen como una sola pieza, en vez
   de como una lista con las tarjetas colgando al costado. Es el mismo criterio
   que el índice de zonas de Muvo. */
@media (min-width:64rem){
  .medidas{ position:static; align-self:center; }
}
.medidas__titulo{ margin-bottom:.6rem; }

.pagina-stock .giro__cuerpo{ padding:.9rem 1rem 1.1rem; }
.pagina-stock .giro__modelo{ font-size:1rem; line-height:1.25; margin-bottom:.35rem; }
.pagina-stock .giro__marca{ font-size:.6875rem; letter-spacing:.14em; }
.pagina-stock .giro__desc{ font-size:.78125rem; line-height:1.55; }

/* La chapa de precio se apoya en el borde de abajo de la losa, que es donde
   termina la imagen y empieza el dato. Arriba a la izquierda competía con el
   reloj por el mismo rincón. */
.pagina-stock .giro__precio{ top:auto; bottom:.7rem; left:.7rem; }

/* Con dos por fila la tarjeta pasa de ocupar la pantalla a medir ~165 px, así
   que lo de adentro tiene que entrar en ese ancho. Sin bajar estos cuerpos, el
   modelo de dos palabras parte en tres renglones y la chapa de precio toca los
   dos bordes de la losa.

   La descripción sigue en dos renglones: es el corte que ya tenía la tarjeta, y
   acá pasa a ser lo que mantiene parejas a las dos de la fila. */
@media (max-width:47.9375rem){
  .pagina-stock .giro__cuerpo{ padding:.65rem .7rem .8rem; }
  .pagina-stock .giro__marca{ font-size:.5625rem; letter-spacing:.1em; margin-bottom:.3rem; }
  .pagina-stock .giro__modelo{ font-size:.9375rem; line-height:1.2; margin-bottom:.3rem; }
  .pagina-stock .giro__desc{ font-size:.6875rem; line-height:1.5; }
  .pagina-stock .giro__precio{
    bottom:.5rem; left:.5rem; padding:.28rem .55rem; font-size:.6875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Envíos — el plano del astronauta

   El video se desenrolla de una tira vertical hasta 3/5 de la pantalla, se
   recorre con el scroll y al terminar habla el texto de al lado. La cuenta
   está en envios.js; acá sólo vive el aspecto.
   ═══════════════════════════════════════════════════════════════════════ */

.envios{ --abre:0; --habla:0; padding:0; }

@media (min-width:56rem){
  .envios{ height:250vh; }
  .envios__escena{
    position:sticky; top:0;
    height:100vh; height:100svh;
    display:flex; align-items:center; gap:clamp(2rem,4vw,4rem);
    padding:0 var(--margen);
    overflow:hidden;
  }
}

/* ── El rollo ─────────────────────────────────────────────────────────
   Lo que crece es la VENTANA, no el video: el clip mide siempre lo mismo y se
   lo va dejando ver. Escalándolo se deformaría y se leería como un zoom;
   recortándolo se lee como una persiana que se abre.

   El ancho abierto son 3/5 de la pantalla, que es lo que pide el sketch. El
   mínimo no es cero: una tira de 10 px es lo que hace que se lea como algo
   enrollado esperando, y no como que todavía no cargó. */
.envios__rollo{
  --ancho-abierto:min(60vw, 62rem);
  position:relative; flex:none; overflow:hidden;
  border-radius:14px;
  width:calc(10px + (var(--ancho-abierto) - 10px) * var(--abre));
  box-shadow:0 24px 60px -28px rgba(0,0,0,.9);
}
.envios__video{
  display:block;
  width:var(--ancho-abierto); height:auto;
  max-width:none;
}

/* ── El texto ─────────────────────────────────────────────────────────
   Entra recién cuando el clip terminó. Sube un poco al entrar: apareciendo en
   su lugar se lee como que estuvo siempre y no se lo vio. */
.envios__dicho{
  flex:1 1 0; min-width:0;
  opacity:var(--habla);
  transform:translateY(calc((1 - var(--habla)) * 18px));
  will-change:opacity, transform;
}
.envios__dicho .titulo{ font-size:clamp(1.9rem,3.6vw,3rem); }
.envios__bajada{
  margin-top:1rem; max-width:34ch;
  font-size:.9375rem; color:var(--humo);
}

/* ── Los tres pasos se van por arriba ─────────────────────────────────
   Lo maneja envios.js con el mismo avance que abre el rollo: son un solo
   movimiento, y si cada sección manejara su parte el relevo dependería de que
   dos cuentas coincidan. */
.pasos{ --se-va:0; }
@media (min-width:56rem){
  .pasos{
    opacity:calc(1 - var(--se-va));
    transform:translateY(calc(var(--se-va) * -60px));
    will-change:opacity, transform;
  }
}

/* ── En el teléfono ───────────────────────────────────────────────────
   No hay 3/5 de pantalla que valgan: el video va a lo ancho y el texto abajo.
   Pero la escena se clava y la sección lleva su recorrido igual que en
   escritorio, porque **sin recorrido el clip no se recorre**: la sección medía
   556 px contra una ventana de 664, y `avance()` de envios.js devuelve 0 en
   cuanto `offsetHeight - innerHeight` no es positivo. El astronauta se quedaba
   clavado en el cuadro 0 y de los 8 segundos no se veía ninguno. Medido en un
   iPhone 13 antes de tocarlo: currentTime 0 de punta a punta del scroll.

   250vh es el mismo número que arriba de 56rem, y es lo que da pantalla y media
   de recorrido para los 8 s de clip. */
@media (max-width:55.9375rem){
  .envios{ padding:0; height:250vh; }
  .envios__escena{
    position:sticky; top:0;
    height:100vh; height:100svh;
    display:grid; align-content:center; gap:1.75rem;
    padding:0 var(--margen);
    overflow:hidden;
  }
  /* Una LONGITUD y no 100%. Lo que se abre es la ventana y el video mide
     siempre lo mismo detrás: con un porcentaje el video se estira junto con su
     caja y el desenrollado se lee como un zoom, que es justo lo que el
     comentario del rollo dice que no tiene que pasar. */
  .envios__rollo{ --ancho-abierto:calc(100vw - var(--margen) * 2); }
}

@media (prefers-reduced-motion:reduce){
  .envios{ height:auto; padding:var(--ritmo) var(--margen); }
  .envios__escena{ position:static; height:auto; padding:0; display:grid; gap:2rem; overflow:visible; }
  .envios__rollo{ width:var(--ancho-abierto); }
  .envios__dicho{ opacity:1; transform:none; }
  .pasos{ opacity:1; transform:none; }
}

/* ── Entradas y salidas ───────────────────────────────────────────────
   Los bloques sin coreografía propia entran subiendo y se van hacia arriba.
   Las dos variables las escribe entradas.js con la posición real del bloque;
   acá sólo se aplican.

   Sólo `opacity` y `transform`: las dos las resuelve el compositor sin tocar
   layout, y esto corre mientras se scrollea.

   El valor por defecto es VISIBLE, no escondido. Si el script no carga, el
   contenido está: un bloque que empieza en opacidad 0 y depende de JavaScript
   para aparecer es contenido que puede no aparecer nunca. */
[data-entra]{
  opacity:var(--visible, 1);
  transform:translate3d(0, var(--viaje, 0px), 0);
  will-change:opacity, transform;
}

@media (prefers-reduced-motion:reduce){
  [data-entra]{ opacity:1; transform:none; }
}

/* ── La cabecera fija, pasado el hero ─────────────────────────────────
   Sobre el film va apoyada y se va con él. Después se fija y da vuelta su
   reparto: el nombre a la derecha, en la franja de margen donde no hay nada, y
   los enlaces a la izquierda. Lo maneja cabecera.js.

   El reparto NO se invierte: el nombre queda a la izquierda y los enlaces a la
   derecha, igual que sobre el hero. Lo único que cambia al fijarse es que el
   nombre baja de opacidad y pasa a funcionar de botón para volver arriba. */
.marca[data-fija]{
  position:fixed;
  padding-top:clamp(.85rem,2.2vh,1.35rem);
  padding-bottom:clamp(.85rem,2.2vh,1.35rem);
  /* Un velo apenas, para que los enlaces no se pierdan sobre una foto clara
     de las que pasan por debajo. */
  background:linear-gradient(to bottom, rgba(15,26,21,.82), rgba(15,26,21,0));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

/* El nombre deja de ser un rótulo y pasa a ser un botón de volver arriba: baja
   de opacidad para no competir con el contenido, y sube al pasarle el mouse.
   El foco lo devuelve entero: quien tabula tiene que ver dónde está. */
.marca[data-fija] .marca__nombre{
  opacity:.42;
  transition:opacity .3s ease;
}
.marca[data-fija] .marca__nombre:hover,
.marca[data-fija] .marca__nombre:focus-visible{ opacity:1; }

/* Un enlace que lleva a donde ya estás no es navegación, es ruido: se pliega.

   Y se pliega de verdad, no sólo se apaga. Apagado en su lugar dejaba un vacío
   de 130 px entre los dos que seguían, y un hueco se lee como que falta algo.
   La columna de la grilla va de 1fr a 0fr —el mismo recurso que la etiqueta
   del botón flotante— que anima hasta el ancho real sin tocar `max-width`.

   El hueco entre enlaces es `margin` y no `gap` justamente por esto: un `gap`
   sobrevive al ítem plegado y deja la mitad del vacío igual. El margen se va
   con él. */
.marca__nav{ gap:0; }
.marca__nav a{
  display:grid; grid-template-columns:1fr;
  margin-left:clamp(1rem,2.5vw,2rem);
  transition:grid-template-columns .35s cubic-bezier(.22,1,.36,1),
             margin-left .35s cubic-bezier(.22,1,.36,1),
             opacity .28s ease, color .2s ease;
}
.marca__nav a:first-child{ margin-left:0; }
.marca__nav a > span{ overflow:hidden; min-width:0; white-space:nowrap; }

.marca__nav a[data-oculto]{
  grid-template-columns:0fr; margin-left:0;
  opacity:0; pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .marca[data-fija] .marca__nombre,
  .marca__nav a{ transition:none; }
}