/* ═══════════════════════════════════════════════════════════════════════ 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); /* El radio de los OBJETOS de la portada: la losa de mármol de los destacados, el rollo del astronauta y la ficha del carrusel. Los tres estaban ya en 14 px cada uno por su lado; acá se juntan en un token. **Y es sólo de la portada.** El catálogo se queda con su canto vivo de 2 px, decisión del cliente el 2026-08-10, y una vez dicha se lee sola: la portada muestra objetos apoyados sobre una superficie y el catálogo es un instrumento —una grilla de datos que se compara de a veinte—. Se probó redondeando también la ficha del stock y quedó blanda para lo que es. Los controles —botones, campos, el cajón de filtros— van en 2 px en las dos páginas. El latón de este diseño es herraje, no color de marca, y una pieza de herraje tiene canto vivo. */ --radio-objeto: 14px; /* 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; } /* Para lo que tiene que existir en el documento y no en la pantalla: hoy, el `h1` de la página a pedido, donde el carrusel es lo primero que se ve. No es `display:none` ni `visibility:hidden`, que lo sacarían también del lector de pantalla, que es justamente a quien está dirigido. Es la receta de siempre: un píxel recortado a nada, fuera del flujo. */ .a-la-vista-no{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } .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); transition:opacity .4s ease, visibility .4s, transform .4s ease; } /* Mientras el film está en pantalla, la cabecera no está. Lo decide cabecera.js y el porqué está escrito allá: el hero ya abre con la marca en el centro y un cartel «Consultar stock», y la cabecera repetía las dos cosas más chicas y a un costado. `visibility` además de `opacity` no es de más: la saca del recorrido de tabulación. Apagada sólo con opacidad, el Tab sigue parando en tres enlaces invisibles antes de llegar a los carteles que sí se ven. */ .marca[data-tapada]{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-.6rem); } .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: los enlaces se pliegan ─────────────── 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. Hasta el 2026-08-21 lo que cedía era la CANTIDAD — se escondía uno y quedaban dos, y cuál se escondía dependía de la página. Andaba, y tenía un costo que no se ve desde el escritorio: **desde el teléfono no había manera de llegar a una de las cuatro páginas** sin pasar por otra. Ahora ceden todos y se pliegan atrás de un botón, así que las tres salidas están siempre. Es más toques —uno— y a cambio el sitio deja de tener rutas que sólo existen en pantalla grande. El botón se ve sólo si `cabecera.js` marcó la cabecera. Sin JavaScript nada de esto pasa y los enlaces se quedan donde estaban, apretados pero a la vista: un menú plegado que no despliega deja a un visitante encerrado, y eso es peor que un renglón feo. */ @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[data-menu-listo] .marca__abrir{ display:grid; } /* ── La barra se cierra cuando el menú se abre ─────────────────────── La cabecera fija no termina en un filete sino en un velo que se desvanece, así que un panel colgado de ahí no cuelga de nada: aparece flotando en el medio de la página. Mientras el menú está abierto la cabecera pasa a ser una barra de verdad —fondo lleno y un filete abajo— y el panel sale de ese filete, pegado, sin aire en el medio. Se cierra sola al cerrarse el menú: la barra existe mientras hay algo colgando de ella y no un segundo más. */ .marca[data-menu-listo][data-menu]{ background:var(--fondo); border-bottom:1px solid var(--filete); backdrop-filter:none; -webkit-backdrop-filter:none; } /* ── El panel es una chapa que sale de atrás de la barra ───────────── Y no una tarjeta que aparece: el `clip-path` no la mueve ni la desvanece, abre la ventana por la que se la ve. La chapa está entera y quieta desde el principio, atrás de la cabecera, y baja a la vista. Los `-2.5rem` de los tres lados no son un margen: son el aire que el recorte le deja a la sombra. `clip-path` recorta TODO lo que pinta el elemento, sombra incluida, así que con `inset(0)` la sombra desaparecía. Arriba se recorta a ras, y ahí está bien: una sombra subiendo por encima de la cabecera delataría que la chapa está adelante y no atrás. `visibility` además del recorte: sin ella el panel cerrado sigue en el recorrido de tabulación y el Tab para en tres enlaces invisibles. */ .marca[data-menu-listo] .marca__nav{ /* Alineada al margen de la página y no al borde de la pantalla: es la misma vertical con la que termina todo lo demás, y el filo de la punta cae ahí. */ position:absolute; top:100%; right:1.15rem; flex-direction:column; align-items:stretch; gap:0; min-width:min(13rem, 62vw); background:var(--superficie); /* Sin borde arriba y sin esquinas arriba: de ese lado no hay borde, hay continuación — el filete de la barra ya cierra la chapa por ahí. */ border:1px solid var(--filete); border-top:0; border-radius:0 0 2px 2px; box-shadow:0 1.25rem 2.5rem rgba(0,0,0,.5); visibility:hidden; clip-path:inset(0 -2.5rem 100% -2.5rem); transition:clip-path .38s cubic-bezier(.22,1,.36,1), visibility .38s; } .marca[data-menu-listo][data-menu] .marca__nav{ visibility:visible; clip-path:inset(0 -2.5rem -2.5rem -2.5rem); } /* ── Adentro son renglones, no una pila de enlaces ─────────────────── Es la lista del cajón de filtros dicha de nuevo: un renglón que se enciende se lee como una lista de la que se elige. Y arregla algo que no era estético — el enlace suelto medía 18 px de alto y el dedo pide 44. El filete entre renglones va con `+`, así el primero no lo lleva: una línea pegada al borde de arriba de la chapa se ve como un borde doble. */ .marca[data-menu-listo] .marca__nav a{ margin-left:0; padding:.85rem 1.1rem; min-height:2.75rem; align-content:center; transition:background-color .2s ease, color .2s ease; /* ── Plegado deja de ser una barra y pasa a ser una lista ────────── Y eso cambia cómo se escribe cada renglón, que es lo que se corrigió el 2026-08-25. Los enlaces de la cabecera van en versalitas, espaciados y alineados a la derecha porque ahí son ROTULOS: tres palabras sueltas apoyadas en una barra, donde el espaciado es lo que las separa del resto y la derecha es donde termina todo lo demás. Adentro del panel son otra cosa: **una lista de la que se elige**, y una lista se lee por el borde izquierdo. Las versalitas con `.1em` de espaciado obligan a leer letra por letra justo donde el dedo quiere barrer de arriba abajo, y la alineación a la derecha deja el arranque de cada renglón en una vertical distinta según cuánto mida la palabra. Así que acá se deshace todo eso: caja normal, sin espaciado extra, alineado a la izquierda y un punto más grande. Es el mismo enlace con la ropa que le toca al lugar donde está. */ text-align:left; text-transform:none; letter-spacing:.01em; font-size:.9375rem; color:var(--hueso); } .marca[data-menu-listo] .marca__nav a + a{ border-top:1px solid var(--filete); } /* `--superficie-2` es literalmente el token del sistema para esto, y el dedo lo necesita más que el mouse: en el teléfono el toque es la única confirmación de que el renglón registró. */ .marca[data-menu-listo] .marca__nav a:active, .marca[data-menu-listo] .marca__nav a:focus-visible{ background:var(--superficie-2); color:var(--laton); outline:none; } /* Plegados hay lugar, así que vuelven todos. Las reglas de abajo son las que escondían alguno por página. «Reseñas», sumado el 2026-10-05, va siempre al menú plegado: sin él, la fila de enlaces sueltos ya no entraba. */ .marca[data-menu-listo] .marca__nav a[href$="index.html"]{ display:grid; } .marca[data-menu-listo] .marca__nav a[href$="resenas.html"]{ display:grid; } .pagina-inicio .marca[data-menu-listo] .marca__nav a[href$="a-pedido.html"]{ display:grid; } .marca:not([data-menu-listo]) .marca__nav a[href$="index.html"]{ display:none; } .marca:not([data-menu-listo]) .marca__nav a[href$="resenas.html"]{ display:none; } .pagina-inicio .marca:not([data-menu-listo]) .marca__nav a[href$="a-pedido.html"]{ display:none; } } /* El botón, en cualquier ancho: no se ve, y el CSS del teléfono lo prende. */ .marca__abrir{ display:none; place-items:center; width:2.75rem; height:2.75rem; margin-right:-.85rem; padding:0; border:0; background:none; cursor:pointer; color:var(--humo); } /* ── La punta se da vuelta al abrir ─────────────────────────────────────── Mira hacia abajo cerrada —hay algo plegado ahí— y sube al abrirse. Media vuelta y no un cambio de dibujo: **en este diseño la luz la pone el material y lo que responde es el movimiento**, que está escrito en DESIGN.md a propósito de las tarjetas que se inclinan y vale igual para un control de 44 px. Gira sobre su centro con la misma curva que el panel, así que las dos cosas son un solo gesto. */ .marca__punta{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .38s cubic-bezier(.22,1,.36,1); } .marca__abrir[aria-expanded="true"]{ color:var(--laton); } .marca__abrir[aria-expanded="true"] .marca__punta{ transform:rotate(180deg); } .marca__abrir:focus-visible{ outline:2px solid var(--laton); outline-offset:2px; } @media (prefers-reduced-motion:reduce){ .marca__punta, .marca[data-menu-listo] .marca__nav{ transition:none; } } /* ── El film ─────────────────────────────────────────────────────────── 520vh y no 440: los 80 de más son el tramo que se lleva la OBERTURA para irse, y se suman en vez de descontarse del film. Descontándolos, el mismo video pasaría en menos scroll y el recorrido se volvería más nervioso —el largo del film no es un número decorativo, es cuántos milímetros de dedo cuesta cada segundo de imagen—. `--salida` es el reparto entre las dos cosas y la escribe scrub.js: 0 con la obertura puesta, 1 cuando terminó de irse. Arranca en 0 acá para que sin JavaScript la obertura se vea entera, que es el estado que hay que degradar bien: la marca y los dos carteles son lo único de esta sección que no depende del video. */ .film{ height:520vh; position:relative; background:#000; --salida:0; } .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%); } /* ── La obertura ────────────────────────────────────────────────────── Lo primero que se ve: la marca en el centro, la línea que dice qué es esto, y las dos cosas que alguien puede venir a hacer acá. Ocupa la pantalla entera y se va con el primer gesto de scroll; el film arranca recién después, y hasta entonces está quieto en su primer cuadro. Va CENTRADA, que es lo contrario de todo el resto del hero —las escenas se apoyan abajo a la izquierda—. No es descuido: son dos momentos distintos. La obertura es una portada, y una portada se lee de una; las escenas son subtítulos de una película que ya está corriendo, y por eso se corren a un costado para no taparla. La opacidad no apaga los clics: sin `data-obertura-ida` los dos carteles siguen ahí, invisibles, robándose el puntero por el resto del recorrido. */ .obertura{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:clamp(5rem,13vh,9rem) var(--margen) clamp(3rem,8vh,5rem); text-align:center; opacity:calc(1 - var(--salida)); transform:translate3d(0, calc(var(--salida) * -2.75rem), 0); will-change:opacity, transform; } .film[data-obertura-ida] .obertura{ visibility:hidden; } /* El resguardo de legibilidad, anclado al ENCUADRE y no al texto — la regla de DESIGN.md, y acá hace falta de verdad: el primer cuadro del film es un Daytona pulido a contraluz, o sea plata casi blanca justo en el medio, que es donde cae la marca. Va como BANDA horizontal y no como óvalo en el centro, y esto costó una vuelta. El primer intento fue un radial fuerte en el medio: medía precioso —13:1— y dejaba la pantalla negra. Lo que el visitante veía primero no era un reloj de lujo, era una tarjeta de título sobre nada, y el film del hero existe justamente para que lo primero sea el reloj. La banda oscurece la franja donde se apoya el texto y deja respirar arriba y abajo, que es por donde asoman el cristal y el brazalete. Es la misma gramática que la tercera capa de `.film__velo`, y por el mismo motivo: una caída de luz se lee como iluminación, una mancha en el medio se lee como suciedad. Los cortes están medidos contra el cuadro real — no se eligieron a ojo, y si algún día cambia el film hay que volver a medirlos. */ .obertura::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(to bottom, rgba(8,10,9,.12) 0%, rgba(8,10,9,.34) 18%, rgba(8,10,9,.48) 34%, rgba(8,10,9,.48) 62%, rgba(8,10,9,.28) 80%, rgba(8,10,9,.10) 100%); } /* El ancho en `ch` es lo que decide dónde corta el nombre en el teléfono: «Luciano Torres» son 14 caracteres, así que con el tope en 16 entra entero y «Watches» baja solo al renglón siguiente. Partido en cualquier otro lado —«Luciano / Torres Watches»— la marca deja de leerse como una firma. Pasado los 56rem entra en una línea y el tope se saca. */ .obertura__marca{ font-size:clamp(2.25rem,7vw,4.5rem); line-height:1.06; max-width:16ch; } .obertura__marca span{ color:var(--laton); } @media (min-width:56rem){ .obertura__marca{ max-width:none; } } /* Sobre la foto sube a hueso: en `--humo` el renglón medía 2,8:1 contra el cuadro más claro del póster, que es la mitad de lo que pide AA para un cuerpo de 13 px. Es el único lugar de la página donde este rótulo va a plena opacidad, y la razón es que es el único que se apoya sobre una imagen. */ .obertura__lugar{ margin-top:clamp(1rem,2.4vh,1.5rem); font-size:clamp(.6875rem,1.1vw,.8125rem); font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--hueso); } /* El punto separa las dos mitades en una línea y desaparece cuando se apilan. Sin esto, en el teléfono el renglón cortaba después del punto —«…ALTA GAMA ·» colgando al final— que es de las pocas cosas que se leen como error de maquetado y no como decisión. */ .obertura__lugar span::before{ content:'·'; margin:0 .55em; } @media (max-width:34rem){ .obertura__lugar span{ display:block; margin-top:.45em; } .obertura__lugar span::before{ content:none; } } .obertura__carteles{ margin-top:clamp(2rem,5.5vh,3.25rem); display:flex; flex-wrap:wrap; justify-content:center; gap:.85rem; } /* El fantasma, sobre una foto, necesita un trazo que se vea. `--filete` está pensado para apoyarse sobre el fondo plano de la página; acá abajo hay un video y con esa opacidad el botón desaparece — quedaba una palabra flotando al lado de un rectángulo de latón. Es la salvedad de un solo lugar, no un cambio del token. */ .obertura .boton--fantasma{ border-color:rgba(201,164,95,.68); background:rgba(8,10,9,.30); } .obertura .boton--fantasma:hover{ border-color:var(--laton); background:rgba(8,10,9,.5); } /* En el teléfono los dos carteles van apilados y del mismo ancho. Uno al lado del otro entran, pero quedan del ancho de su texto: «Consultar stock» mide más que «Pedir reloj» y la diferencia se lee como que uno importa más que el otro. Acá importan lo mismo — son las dos puertas del negocio— y lo que los distingue es el relleno de latón, no el tamaño. */ @media (max-width:30rem){ .obertura__carteles{ flex-direction:column; align-items:stretch; width:min(100%,19rem); } } /* ── La pantalla baja: el teléfono acostado ─────────────────────────── Con 390 px de alto la portada entera no entra, y como vive en un `inset:0` con el contenido centrado, lo que sobra se corta por ARRIBA y por abajo: se perdía media marca y la pista completa. Se corta por prioridad y no achicando todo por igual. Lo que se va es la pista —el que está acostado ya está scrolleando, no hay que invitarlo— y lo que se achica es la marca, que es lo único que puede ceder tamaño sin dejar de ser lo que es. Los dos carteles no se tocan: son el motivo de la portada. Se dispara por ALTO y no por ancho: un teléfono acostado y una ventana baja en escritorio son el mismo problema. */ @media (max-height:32rem){ .obertura{ padding-top:clamp(3.75rem,15vh,5rem); padding-bottom:1.25rem; } .obertura__marca{ font-size:clamp(1.6rem,5vw,2.5rem); max-width:none; } .obertura__lugar{ margin-top:.7rem; } .obertura__carteles{ margin-top:1.35rem; } .obertura .pista{ display:none; } } .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 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; } /* La pista vive dentro de la obertura desde que existe, y por eso el trazo se paró: apoyada abajo a la izquierda era una raya horizontal que empujaba hacia el costado, y ahí no hay nada. Ahora cuelga bajo los carteles y el trazo baja, que es para donde hay que ir. `column-reverse` pone el texto arriba con el primero en el DOM, que es el orden que corresponde. El `padding-left` compensa el interletrado: la última letra arrastra su .28em de aire y sin eso el rótulo queda medio carácter corrido a la izquierda de los carteles que tiene encima. */ .pista{ margin-top:clamp(2.5rem,7vh,4.5rem); display:flex; flex-direction:column-reverse; align-items:center; gap:.9rem; padding-left:.28em; font-size:.625rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--humo-bajo); } .pista span{ display:block; width:1px; height:2.75rem; background:currentColor; transform-origin:top; animation:tirar 2.4s cubic-bezier(.4,0,.2,1) infinite; } @keyframes tirar{ 0%,100%{transform:scaleY(.35);opacity:.5} 50%{transform:scaleY(1);opacity:1} } /* ── Firma: la escala taquimétrica ───────────────────────────────────── */ /* Aparece cuando hay algo que medir, o sea al revés que la obertura: mientras la portada está puesta el film no corre, y un instrumento marcando 400 sobre una imagen quieta no mide nada — es un adorno con números. */ .taquimetro{ position:absolute; top:50%; right:var(--margen); transform:translateY(-50%); display:flex; align-items:center; gap:1rem; height:17rem; pointer-events:none; opacity:var(--salida,1); } .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; } /* ── El hero sin movimiento ─────────────────────────────────────────── Con `prefers-reduced-motion` scrub.js no monta el clip ni engancha nada, así que las 5,2 pantallas de recorrido no recorren nada: son cinco pantallas de póster quieto que hay que scrollear para llegar al contenido. El hero se achica a una y queda la obertura, que es la marca y las dos salidas — la misma primera impresión sin el viaje. Las escenas se pierden, y ya se perdían antes: nacen escondidas y quien las encendía era el scrub. Lo que dicen vive igual más abajo —los servicios, los pasos, el cierre—, y lo único que no estaba en ningún otro lado, «Ver el stock», ahora lo dice la obertura desde el primer cuadro. */ @media (prefers-reduced-motion:reduce){ .film{ height:100vh; height:100svh; } .taquimetro,.pista{ display:none; } } /* ── 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 ───────────────────────────────────────────────────────────── */ /* ⚠ `.paso` ES DE ACÁ: son los cuatro pasos de «cómo se compra», y las cuatro reglas de abajo caen sobre cualquier elemento que lleve esa clase. El 2026-08-21 la escena del contacto se llamó `.paso` también, y las dos secciones se rompieron en direcciones opuestas sin que ninguna diera error: acá cada `
  • ` pasó a medir 300vh —la sección quedó con un agujero de tres pantallas— y allá los formularios heredaron el filete de arriba y el `max-width:34ch` de estos párrafos. Esa escena se llamó `.relevo` después, y desde el 2026-10-06 ya no existe. Antes de estrenar un nombre de bloque, buscalo en este archivo. Una clase repetida no falla: pinta de más, en los dos sentidos. */ .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; } /* ── Testimonios ───────────────────────────────────────────────────────── Reemplazó a la tabla de posiciones el 2026-08-20. Aquélla era una lista de nombres con montos y nunca tuvo datos: tres marcadores desde el día que se escribió, y para llenarla había que publicar cuánto gastó cada cliente, que es justo lo que un comprador de un reloj así no quiere que se publique. Esta se llena sola con las reseñas aprobadas. La escribe `testimonios.js`; el marcado del HTML es sólo la cabecera, la lista vacía y la invitación. ── La foto manda, y por eso la tarjeta es una columna ────────────────── Foto arriba y texto debajo, no uno al lado del otro: lo que convence es ver el reloj en la muñeca de alguien, y el texto es la leyenda de esa foto. Es la misma decisión que la revista toma en `reloj--columna`. Las reseñas sin foto entran igual —la foto es opcional en el formulario— y ahí la tarjeta es sólo el texto. Por eso el alto no está fijado: una fila con y sin foto se empareja sola por la grilla. */ .testimonios{ padding:var(--ritmo) var(--margen); } /* Una columna en el celular, y desde tablet, mampostería ──────────────── En la portada era un carrusel horizontal: ahí era una sección de prueba social entre otras, y tres tarjetas apiladas eran tres pantallas de scroll. Desde el 2026-10-05 tienen página propia, y en una página que existe para leer reseñas bajar ES el recorrido: un carrusel escondía todas menos una. `columns` apila cada tarjeta debajo de la anterior sin alinear filas, que es lo que hace que un muro de fotos se lea como un muro y no como una tabla. Una grilla, en cambio, estira la fila entera hasta la tarjeta más alta y deja aire muerto abajo de las otras — y con fotos de proporción libre, que las manda el cliente desde el teléfono, eso se ve como una plantilla rota. El costo de `columns` hay que conocerlo: **el orden pasa a ser vertical**, se lee hacia abajo por columna. Para testimonios da igual —ninguno depende del anterior—; para una lista de pasos sería un error. */ .testimonios__lista{ list-style:none; margin:0 auto; padding:0; max-width:30rem; column-gap:clamp(1rem,2.5vw,1.5rem); } .testimonio{ break-inside:avoid; /* que una tarjeta no se parta entre columnas */ margin:0 0 clamp(1rem,2.5vw,1.5rem); background:var(--superficie); border:1px solid var(--filete); border-radius:3px; overflow:hidden; } /* Nunca más columnas que reseñas. Con tres y un muro de cuatro, la cuarta quedaba vacía y el muro se recostaba a la izquierda como si faltara algo. `--cuantas` lo pone `testimonios.js`; el ancho tope crece con las columnas, así que con pocas el muro se angosta y queda centrado. */ @media (min-width:40rem){ .testimonios__lista{ columns:min(2, var(--cuantas, 2)); max-width:calc(min(2, var(--cuantas, 2)) * 20rem); } } @media (min-width:64rem){ .testimonios__lista{ columns:min(3, var(--cuantas, 3)); max-width:calc(min(3, var(--cuantas, 3)) * 20rem); } } /* Cuatro columnas recién acá, y no antes, porque el techo de nitidez de estas fotos son los ~380 px del recorte original: mostradas más grandes se ven blandas. Más columnas = tarjeta más chica = foto más nítida. */ @media (min-width:80rem){ .testimonios__lista{ columns:min(4, var(--cuantas, 4)); max-width:calc(min(4, var(--cuantas, 4)) * 20rem); } } /* La foto manda y la ficha se le acomoda: sin `aspect-ratio` y sin recorte, la imagen entra con la proporción que tenga. Es lo que le da al muro las alturas distintas; forzarlas a todas a 4:3 devolvía la grilla de antes con otro nombre. */ /* Sin `line-height:0` acá: el hueco que dejan las imágenes en línea ya lo mata el `display:block` de abajo, y puesto en la figura cascadea al nombre y a la pieza —que viven adentro— y los deja con altura cero. Se veía el aro de la inicial y nada al lado. */ .testimonio__foto{ position:relative; margin:0; background:var(--fondo); } .testimonio__foto img{ width:100%; height:auto; display:block; } /* El degradado existe para que el nombre se lea, no de adorno: encima de una foto cualquiera —una esfera blanca, un cielo— el texto claro desaparece. Va sólo arriba, que es donde está el texto, y no cubre la foto entera. */ .testimonio__velo{ position:absolute; inset:0 0 auto; height:45%; background:linear-gradient(to bottom, rgba(6,12,9,.78), rgba(6,12,9,0)); pointer-events:none; } .testimonio__identidad{ position:absolute; top:0; left:0; right:0; display:flex; align-items:flex-start; gap:.65rem; padding:.85rem .95rem; } /* La inicial en un aro de latón hace de retrato. No hay fotos de perfil —nadie sube una para dejar una reseña— y poner una genérica sería inventar una cara que no existe. */ .testimonio__inicial{ flex:none; width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; border:1px solid var(--laton); color:var(--laton); background:rgba(6,12,9,.45); font-family:var(--display); font-size:.9rem; line-height:1; } .testimonio__quien{ display:flex; flex-direction:column; gap:.1rem; min-width:0; } .testimonio__texto{ display:flex; flex-direction:column; gap:.7rem; padding:1rem 1.05rem 1.15rem; } /* El puntaje, en estrellas, las mismas del formulario: desde el 2026-10-06 el que deja una reseña elige estrellas, y tiene que ver publicadas las mismas que eligió. Antes eran muescas cuadradas. El `role="img"` con su etiqueta lo dice en palabras a quien no las ve. */ .testimonio__puntaje{ display:flex; gap:.15rem; margin:0; } .puntaje-marca{ width:1rem; height:1rem; fill:transparent; stroke:var(--laton); stroke-width:1.4; stroke-linejoin:round; } .puntaje-marca--llena{ fill:var(--laton); } .testimonio__cita{ margin:0; font-size:1rem; line-height:1.55; color:var(--hueso); } .testimonio__nombre{ font-family:var(--display); font-weight:var(--display-peso); font-size:1rem; color:var(--hueso); text-shadow:0 1px 3px rgba(0,0,0,.55); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* La pieza envuelve en vez de cortarse: es el dato que dice qué compró esa persona, y «Omega Speedmaster Professi…» no lo dice. El nombre sí se corta — es una etiqueta, no información— y así uno largo no empuja la tarjeta. */ .testimonio__pieza{ font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.35; color:var(--laton); text-shadow:0 1px 3px rgba(0,0,0,.55); } /* La tarjeta sin foto no tiene dónde apoyar el nombre, así que lo baja al cuerpo. Sin esto el nombre queda flotando sobre el fondo de la tarjeta con una sombra que no corresponde. */ .testimonio--sin-foto .testimonio__identidad{ position:static; padding:0; } .testimonio--sin-foto .testimonio__nombre, .testimonio--sin-foto .testimonio__pieza{ text-shadow:none; } .testimonio--sin-foto .testimonio__texto{ padding-top:0; } .testimonios__invitacion{ margin:clamp(2rem,4vw,3rem) 0 0; text-align:center; } .testimonios__vacio{ max-width:36ch; margin:0 auto; text-align:center; color:var(--humo); } /* Los dos bloques de la página —fotos con clientes y reseñas— con un rótulo chico cada uno. El título grande ya es «Testimonios.»: otro igual de grande abajo competiría con él. */ .testimonios__subtitulo{ margin:clamp(2.5rem,6vw,4rem) 0 clamp(1.25rem,3vw,2rem); text-align:center; font-family:inherit; font-weight:400; font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; color:var(--laton); } .testimonios__cabecera + .testimonios__subtitulo{ margin-top:0; } /* Las fotos con clientes. La foto es la tarjeta entera y la leyenda va encima, sobre un velo que oscurece sólo la mitad de abajo: la referencia que pasó el cliente el 2026-10-05. Todas son verticales de teléfono, así que una grilla pareja sirve, y con pocas fotos se angosta y queda centrada. */ .clientes{ list-style:none; margin:0 auto; padding:0; display:grid; gap:clamp(1rem,2.5vw,1.5rem); grid-template-columns:repeat(auto-fit, minmax(min(100%, 16rem), 22rem)); justify-content:center; } .cliente{ margin:0; } .cliente__figura{ position:relative; margin:0; aspect-ratio:3 / 4; overflow:hidden; border:1px solid var(--filete); border-radius:6px; background:var(--superficie); } .cliente__figura img{ display:block; width:100%; height:100%; object-fit:cover; } /* El velo va en la leyenda y no en la foto: así crece con el texto y una leyenda de tres renglones nunca queda sobre la parte clara de la foto. */ .cliente__leyenda{ position:absolute; inset:auto 0 0 0; padding:clamp(4rem,10vw,6rem) clamp(1.1rem,3vw,1.5rem) clamp(1.1rem,3vw,1.5rem); background:linear-gradient(to top, rgb(8 11 9 / .92) 0%, rgb(8 11 9 / .75) 45%, transparent 100%); color:var(--hueso); } .cliente__leyenda::before{ content:''; display:block; width:2rem; height:1px; margin-bottom:.9rem; background:var(--laton); } .cliente__texto{ margin:0; font-size:clamp(1.1rem,1.6vw,1.25rem); line-height:1.35; text-wrap:balance; } .cliente__quien{ margin:.6rem 0 0; font-size:.95rem; color:rgb(242 240 234 / .75); } .cliente__quien span, .cliente__quien a{ color:var(--laton); white-space:nowrap; } /* «Atlético / Mineiro» partido no se lee como un nombre */ .cliente__quien a{ text-decoration:none; } .cliente__quien a:hover{ text-decoration:underline; text-underline-offset:.2em; } .cliente__quien a:focus-visible{ outline:2px solid var(--laton); outline-offset:2px; border-radius:2px; } /* ── 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); } /* Una frase de 49 caracteres contra un ancho de lectura de 48: partía justo antes de la última palabra y dejaba «inmediato.» solo en el segundo renglón. Se le suelta el tope y entra entera. En el teléfono parte igual, y ahí está bien que parta — lo que no se quiere es el renglón huérfano en una pantalla que tiene lugar de sobra. */ .cierre__bajada--renglon{ max-width:none; } /* El plazo, un escalón por debajo de la bajada. Es un dato de operación, no parte del ofrecimiento: se dice una vez, en letra más chica, y no compite con el pedido de arriba ni con el botón de abajo. Va en `--humo-bajo` por el mismo motivo — el mismo gris que usan los pies de foto de la revista. */ .cierre__plazo{ margin:.6rem auto 0; color:var(--humo-bajo); font-size:clamp(.8125rem,1.1vw,.9rem); } .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; } /* El catálogo respira más ancho que el resto de la página. `--margen` llega a 6rem por lado, que es lo correcto para una columna de texto y demasiado para una grilla de tres fichas horizontales: con ese margen la tercera columna queda angosta y los datos de cada ficha empiezan a partirse en dos renglones. Acá la pieza es el contenido, así que el margen se achica y la grilla ocupa casi todo el ancho. */ @media (min-width:78rem){ .stock{ padding-inline:clamp(1.5rem, 3vw, 3.25rem); } } /* Centrada, porque el título de esta página es una frase entera y no un rótulo. Una frase larga alineada a la izquierda arrastra la mirada al margen y deja el resto de la pantalla vacío; centrada se lee como lo que es, que es la promesa con la que se entra al catálogo. */ .stock__cabecera, .testimonios__cabecera{ max-width:52rem; margin-inline:auto; text-align:center; margin-bottom:clamp(2rem,4vw,3rem); } /* La explicación del título, un escalón abajo. El título dice la promesa y esto dice cómo se cumple: separados, cada uno puede tener el tamaño que le toca. Juntos en un solo `h1` había que achicar la promesa para que entrara la explicación. */ .stock__bajada, .testimonios__bajada{ margin:1.25rem auto 0; max-width:46ch; color:var(--humo); font-size:clamp(1rem,1.5vw,1.15rem); } /* La de testimonios es una sola frase y se lee mejor en un renglón: sin el tope de 46ch entra entera en cualquier pantalla de compu. En el teléfono no entra, y ahí `balance` la parte en dos mitades parejas en vez de dejar una palabra sola abajo. */ .testimonios__bajada{ max-width:none; text-wrap:balance; } /* ── Los campos de filtro ───────────────────────────────────────────── Viven en el cajón de la página de stock. Sin marcos alrededor: lo que tiene que leerse de un filtro es su VALOR, y un control enmarcado se lee igual en una tienda de zapatillas que acá. El cajón les saca además los filetes que los separaban cuando eran una barra horizontal. */ /* Uno debajo del otro, sin marcos ni filetes que los separen: lo que tiene que leerse de un filtro es su contenido. El `flex:0 0 auto` no es de más. Estos campos vivieron en una barra horizontal donde los tres se repartían el ancho con `flex-grow`, y en una columna ese mismo crecer se aplica a lo ALTO: cada campo se estiraba hasta llenar el panel y quedaban doscientos píxeles de aire entre uno y otro. */ .campo{ flex:0 0 auto; min-width:0; border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; } /* El título de cada filtro se prolonga en un filete hasta el borde, como el renglón grabado de una placa. El `width:100%` no es de más: un se encoge al ancho de su texto, y sin eso el filete no tiene contra qué estirarse. */ /* .75rem y no .625: a 10 px, en versalitas y con .22em de espaciado, «MARCAS» dejaba de ser una palabra y pasaba a ser una textura. El espaciado que la hace parecer un rótulo es justamente el que la vuelve ilegible cuando el cuerpo es chico, así que si se quiere el espaciado hay que pagar el cuerpo. */ .campo__etiqueta{ display:flex; align-items:center; gap:.7rem; width:100%; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--laton); } .campo__etiqueta::after{ content:''; flex:1 1 auto; height:1px; background:var(--filete); } /* ── 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 mismo vacío, ocupando una página entera ─────────────────────────── El 404. Es el vacío del catálogo con dos cambios y ninguno es de estilo: · **Centra el texto.** Adentro del catálogo el vacío hereda la alineación de la sección y el `margin-inline:auto` del párrafo alcanza. Solo en la página no hereda nada, y un título a la izquierda con los botones centrados abajo se lee como dos bloques distintos. · **Se planta en el medio de la pantalla.** `100dvh` y no `100vh`: en el teléfono la barra del navegador se come la diferencia y el bloque queda empujado abajo del pliegue, que en la única pantalla que tiene esta página es todo lo que hay. Y `100dvh` entero, sin restarle la cabecera: `.marca` es `position:absolute`, así que no ocupa lugar en el flujo y restarle su alto dejaba el bloque 70 px arriba del centro con una franja muerta abajo. Lo que sí hace falta es el `padding-top` de 6rem, que es lo que evita que en una pantalla baja —un teléfono acostado— el título se meta debajo del nombre de la marca. Ese `dvh` es la misma corrección que ya está en el hero. Va acá otra vez porque son dos cajas distintas, no por copiar. */ .vacio--pagina{ min-height:100dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:6rem var(--margen) var(--ritmo); } .vacio--pagina .titulo{ margin:0 0 1.25rem; } .vacio--pagina p{ max-width:46ch; } /* El número va de rótulo, no de titular: si «404» se dice grande, la pantalla informa un código de protocolo a alguien que sólo quería ver un reloj. El dato que importa es la frase de abajo. Mismo tratamiento que las etiquetas de los filtros — versalitas, latón y un filete al costado — porque es lo mismo que son: la etiqueta de lo que estás mirando. */ /* Va calificado con `.vacio--pagina` a propósito y no por prolijidad: `.vacio p` pinta de humo TODO párrafo del bloque, y con una sola clase le ganaba a este por especificidad — el número salía gris y la regla de abajo no hacía nada. */ .vacio--pagina .vacio__codigo{ margin:0 0 1.1rem; font-size:.75rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--laton); } /* ═══════════════════════════════════════════════════════════════════════ 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 . PROVISORIO: el selector de abajo es para elegir. Cuando esté decidido, se fija la clase ganadora en el , 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){ /* Sin margen lateral: el carrusel sangra hasta el borde de la pantalla y el margen se lo pone él por dentro, así la ficha que asoma por la derecha se ve cortada por el borde del teléfono y no por una franja de fondo. Es la diferencia entre «hay más» y «se terminó». */ .vitrina{ padding:var(--ritmo) 0; } } /* 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:var(--radio-objeto); } @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: un carrusel, no un recorrido ──────────────────────── Hasta el 2026-08-10 acá pasaba la misma escena clavada del escritorio pero acostada: la foto y el texto viajaban en contramano con el scroll de la página. Se reemplazó por un carrusel que se desliza con el dedo, y el motivo no es de gusto: **el recorrido le sacaba al visitante el control del ritmo.** Para ver el tercer reloj había que scrollear una cantidad exacta, y volver al primero era scrollear para atrás. Deslizando, cada ficha se mira el tiempo que uno quiera y se pasa a la siguiente con el gesto que ya trae aprendido de cualquier galería. Las fichas van QUIETAS —no se mueven solas, no se escalan, no se desvanecen—: lo único que se mueve es la pista, y la mueve el dedo. Es el mismo principio que el catálogo del stock: acá el scroll es del visitante. Y la sección deja de medir cinco pantallas para medir una: el carrusel muestra las cinco piezas sin estirar la página. El escritorio no cambia. Ahí las dos columnas en contramano siguen siendo lo correcto: hay lugar para la foto y el texto lado a lado, y el puntero no desliza. */ @media (max-width:55.9375rem){ .vitrina__cabecera{ position:static; margin-bottom:clamp(2rem,7vw,3rem); padding-inline:var(--margen); } .vitrina__cabecera .titulo{ font-size:clamp(1.75rem,7vw,2.25rem); } /* Uno u otro, nunca los dos: las fotos son lo más pesado de la sección y dibujarlas por duplicado las haría viajar dos veces. vitrina.js dibuja sólo el que corresponde; esto es lo que lo respalda si el JS todavía no corrió. */ .vitrina__cuerpo{ display:none; } } @media (min-width:56rem){ .vitrina__deslizable{ display:none; } } /* El nombre de cada destacado lleva a la página del reloj (desde el 2026-10-06). Se ve como el título que era: el subrayado aparece al pasar. */ .vitrina__modelo a, .destacada__modelo a{ color:inherit; text-decoration:none; } .vitrina__modelo a:hover, .destacada__modelo a:hover{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; } /* Los dos botones de cada pieza en escritorio: la consulta y, al lado, el stock completo. Se parten en dos renglones si no entran. */ .vitrina__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; } /* ── La pista del carrusel ──────────────────────────────────────────── El `scroll-snap` deja cada ficha apoyada contra el margen izquierdo, no centrada: con la ficha centrada asoman dos mitades, una de cada lado, y eso se lee como estar en el medio de algo. Apoyada a la izquierda asoma una sola, la que sigue, que es lo que hay que decir. El margen de la derecha va como `margin` de la ÚLTIMA ficha y no como `padding` de la pista. Es el error clásico de un scroller horizontal: varios motores descartan el padding del lado por el que se desborda, y la última ficha termina pegada al borde justo cuando el gesto llega al final. Quién se ve y quién no lo dicen las dos consultas de arriba, las dos por ancho. No hay un `display:none` suelto acá abajo, y no es estilo: puesto después de la consulta del teléfono la pisaba —misma especificidad, gana el último— y el carrusel quedaba armado en el DOM pero sin dibujar. */ .vitrina__carrusel{ list-style:none; margin:0; padding:0 0 0 var(--margen); display:flex; gap:clamp(.75rem,3vw,1.1rem); overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-padding-left:var(--margen); scrollbar-width:none; } .vitrina__carrusel::-webkit-scrollbar{ display:none; } .vitrina__carrusel > li{ flex:0 0 auto; width:min(76vw,19rem); display:flex; scroll-snap-align:start; } .vitrina__carrusel > li:last-child{ margin-right:var(--margen); } /* El índice: un filete por pieza, como los del bisel. Dice cuántas hay y por cuál se va, que es lo que un carrusel esconde y hay que devolver. No se toca —es una lectura, no un control—: para eso está el dedo. */ .vitrina__indice{ list-style:none; margin:clamp(1.25rem,4vw,1.75rem) 0 0; padding:0 var(--margen); display:flex; justify-content:center; gap:.4rem; } .vitrina__indice li{ width:1.5rem; height:1px; background:var(--humo-bajo); transition:background-color .3s ease, opacity .3s ease; opacity:.45; } .vitrina__indice li[data-activa]{ background:var(--laton); opacity:1; } /* ── La ficha del carrusel ──────────────────────────────────────────── Es la del catálogo con la foto arriba en vez de al costado: la misma losa de mármol, el mismo filete, las mismas pastillas separadas por líneas. Que sean la misma cosa importa — quien toca «Ver el stock» tiene que llegar a algo que reconozca. Lo único que agrega es la chapa de precio, que en el catálogo no va: ahí el precio aparece al abrir la pieza, y acá no hay dónde abrirla. */ .destacada{ position:relative; display:flex; flex-direction:column; width:100%; background:linear-gradient(177deg, var(--superficie-2) 0%, var(--superficie) 62%); border:1px solid var(--filete); border-radius:var(--radio-objeto); box-shadow:0 18px 34px -26px rgba(0,0,0,.85); overflow:hidden; transition:border-color .3s ease; } @media (hover:hover){ .destacada:hover{ border-color:var(--laton); } } .destacada__losa{ position:relative; aspect-ratio:4/5; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--filete); } .destacada__losa img{ width:100%; height:100%; object-fit:cover; } .destacada__sinfoto{ font-size:.6875rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(0,0,0,.42); } .marmol--negro .destacada__sinfoto{ color:rgba(255,255,255,.42); } /* Latón sobre la foto, que es el único lugar de la página donde el latón se usa lleno y no como filete. Es la chapa de precio de una vitrina. */ .destacada__precio{ position:absolute; top:.7rem; left:.7rem; padding:.28rem .7rem; background:var(--laton); color:#1A1408; font-size:.75rem; font-weight:600; letter-spacing:.03em; font-variant-numeric:lining-nums tabular-nums; border-radius:999px; } .destacada__datos{ flex:1; display:flex; flex-direction:column; gap:.55rem; padding:1.05rem 1.1rem 1.15rem; } .destacada__modelo{ font-size:1.2rem; line-height:1.18; color:var(--hueso); } /* Tres renglones y corta. Las descripciones las escribe el cliente en su planilla y miden lo que miden; sin tope, una de diez renglones estiraría su ficha y dejaría a las otras cuatro cortas al lado. */ .destacada__desc{ font-size:.875rem; line-height:1.6; color:var(--humo); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* El año y la medida, separados por un filete, como en la ficha del catálogo. `margin-top:auto` los empuja al pie: con las cinco fichas midiendo lo mismo, ese renglón queda a la misma altura en todas y se compara deslizando. */ .destacada__pastillas{ margin-top:auto; padding-top:.9rem; display:flex; border-top:1px solid var(--filete); } .destacada__pastillas > span{ padding:0 .8rem; border-left:1px solid var(--filete); font-size:.8125rem; letter-spacing:.05em; color:var(--hueso); font-variant-numeric:lining-nums tabular-nums; } .destacada__pastillas > span:first-child{ padding-left:0; border-left:0; } /* El botón reemplazó a una flecha de latón en la esquina, que era toda la señal que tenía la tarjeta y además llevaba al stock. Va a lo ancho porque es la única acción de la ficha y porque en un teléfono el blanco se toca con el pulgar; el canto sigue vivo aunque la ficha esté redondeada, que es la regla de `--radio-objeto`. */ .destacada__cta{ margin-top:.9rem; gap:.5rem; padding:.7rem 1rem; font-size:.875rem; } /* Debajo de la consulta, el stock completo (desde el 2026-10-06): más pegado que el primero, porque es el mismo par de salidas y no un bloque nuevo. */ .destacada__cta + .destacada__cta{ margin-top:.55rem; } /* 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. 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. Va acotado al escritorio, que es el único ancho donde queda algo que desactivar. Abajo de 56rem esta sección ya es un carrusel: lo que se mueve lo mueve el dedo, y eso no es una animación que haya que apagar. */ @media (prefers-reduced-motion:reduce) and (min-width:56rem){ .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: la grilla, el cajón de filtros y la ficha expandida Reescrita el 2026-08-08. Antes era una barra de filtros que ocupaba el ancho entero arriba, un índice de medidas al costado y una caja de alto fijo que scrolleaba por dentro. Se fueron las tres: los filtros a un cajón que sale de la izquierda, el índice de medidas convertido en un filtro más —era además un mapa del scroll, y con la página scrolleando normal ese trabajo dejó de existir— y la caja interna reemplazada por la página. ═══════════════════════════════════════════════════════════════════════ */ /* ── La barra de arriba ─────────────────────────────────────────────── El botón que abre el cajón, y enfrente la cuenta de piezas. Es todo lo que queda a la vista de los filtros: antes la barra entera vivía acá y se comía la primera pantalla del catálogo. */ .tope{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(1rem,2vw,1.5rem); } .tope__filtros{ display:inline-flex; align-items:center; gap:.55rem; padding:.6rem 1rem; background:var(--superficie); color:var(--hueso); border:1px solid var(--filete); border-radius:2px; font-family:var(--texto); font-size:.95rem; letter-spacing:.02em; cursor:pointer; transition:border-color .25s ease, background-color .25s ease; } @media (hover:hover){ .tope__filtros:hover{ border-color:var(--laton); background:var(--superficie-2); } } .tope__filtros:focus-visible{ outline:2px solid var(--laton); outline-offset:2px; } .tope__filtros svg{ color:var(--laton); } /* La chapita con cuántos filtros hay puestos. Con el cajón cerrado es lo único que dice que la lista está recortada. */ .tope__cuenta{ display:inline-grid; place-items:center; min-width:1.25rem; height:1.25rem; padding:0 .3rem; background:var(--laton); color:var(--tinta); border-radius:1rem; font-size:.7rem; font-weight:600; } .tope__conteo{ color:var(--humo); font-size:.9rem; margin:0; } /* ── La grilla ──────────────────────────────────────────────────────── **Dos por fila desde el 2026-08-09, no tres.** Se pidió que cada ficha midiera lo que dos de las de antes, y de las dos formas de dar el doble de superficie ésta es la única que sostiene el dibujo de la ficha: dejándola de a tres, lo único que se puede estirar es el alto, y la foto —que ocupa un tercio del ancho— queda en una tira alta y angosta que le corta el reloj a lo largo. De a dos, la ficha crece a lo ancho y a lo alto en la misma proporción, y la foto vuelve a ser casi cuadrada, que es como está en el boceto. Abajo de 46rem va una sola por fila: la ficha es horizontal y por debajo de ese ancho la columna de datos se queda sin lugar para respirar. */ .fichas{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(.75rem,1.2vw,1.1rem); grid-template-columns:1fr; } @media (min-width:46rem){ .fichas{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* ── La ficha ───────────────────────────────────────────────────────── Foto a la izquierda ocupando un tercio exacto, datos en los dos tercios que quedan. El `1fr 2fr` es literalmente eso y por eso no lleva un ancho fijo: la proporción se sostiene sola en las tres anchuras de grilla. El alto acompaña al ancho nuevo de la grilla: con dos por fila la ficha mide el doble de superficie que la de antes, que es lo que se pidió, y la foto queda casi cuadrada. Es además el alto que hacía falta, porque la ficha pasó a llevar la lista de materiales en un cuadro y las dos pastillas debajo. Subido de 16rem a 19,5rem el 2026-08-10: el ancho estaba bien y lo que faltaba era aire a lo alto. La foto pasa de casi cuadrada a algo vertical, que es la proporción en la que se fotografía un reloj. */ .ficha{ position:relative; display:grid; grid-template-columns:1fr 2fr; min-height:19.5rem; /* Un degradado vertical mínimo, dos pasos de la propia paleta: la superficie se lee levantada del fondo sin subirle el brillo. Y la sombra lleva desplazamiento y desenfoque — un halo sin offset no es profundidad. */ background:linear-gradient(177deg, var(--superficie-2) 0%, var(--superficie) 62%); border:1px solid var(--filete); border-radius:2px; box-shadow:0 18px 34px -26px rgba(0,0,0,.85); overflow:hidden; transition:border-color .3s ease, transform .3s ease; } @media (hover:hover){ .ficha:hover{ border-color:var(--laton); transform:translateY(-2px); } } /* El filete de la derecha es la junta entre la piedra y la superficie. En un objeto caro esa junta se ve, y es la misma gramática del taquímetro: latón como herraje, no como color. */ .ficha__losa{ position:relative; overflow:hidden; border-right:1px solid var(--filete); } .ficha__foto{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .ficha__sinfoto{ position:absolute; inset:0; display:grid; place-items:center; padding:.5rem; text-align:center; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--humo-bajo); } /* ── El cartel de señado, desde el 2026-09-11 ───────────────────────── Una franja de lado a lado, en el tercio de abajo: se lee desde la grilla sin abrir la ficha, que es lo que hace falta para que nadie más la señe. Estuvo a media altura y se bajó el mismo día: ahí tapaba la esfera, que en todas las fotos está centrada y es lo único que no se tapa. Abajo cruza el brazalete. Latón sobre casi negro, el mismo par de la chapa de precio pero invertido, así no compite con ella en la portada. La foto se apaga un poco y no se tapa: la pieza sigue siendo la misma y si la seña se cae vuelve a estar a la venta. Sirve igual en las cuatro losas —la del stock, la de la ficha abierta y las dos de la portada—. */ .losa--senada{ position:relative; } .losa--senada img{ filter:saturate(.55) brightness(.62); } .cartel-senado{ position:absolute; left:0; right:0; bottom:14%; z-index:1; padding:.6rem .5rem; background:rgba(8,10,9,.78); border-block:1px solid var(--laton); color:var(--laton); text-align:center; font-size:.75rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; pointer-events:none; } /* Sin `position` a propósito: así el botón que se estira toma como referencia la ficha entera y no sólo esta columna. */ .ficha__datos{ display:flex; flex-direction:column; gap:.85rem; padding:clamp(1.15rem,1.8vw,1.6rem); min-width:0; } /* El nombre lleva la marca adelante —«Rolex Datejust Wimbledon»— y no en un renglón aparte ni en una pastilla. Se probaron las dos cosas: el nombre entero es como se nombra a la pieza en voz alta, y partido en dos lugares hay que armarlo con la vista cada vez. */ .ficha__modelo{ font-family:var(--display); font-weight:var(--display-peso); letter-spacing:var(--display-tracking); font-size:clamp(1.2rem,1.7vw,1.6rem); line-height:1.15; margin:0; color:var(--hueso); } /* La grilla vive en la LISTA y cada par usa `display:contents`, así que el dt y el dd son items de esta grilla y no de una suya. Es lo que hace que la columna de etiquetas se mida sola contra la más larga —«MATERIALES»— y que todas las filas queden alineadas entre sí. Con un ancho fijo, que fue el primer intento, pasaba una de dos: o la palabra desbordaba y se montaba encima del valor, o había que dejarla justa al límite y cualquier cambio de tipografía la volvía a romper. Con `max-content` el ancho lo pone el texto y deja de haber un número que mantener. */ .ficha__spec{ display:contents; } .ficha__spec dt{ font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--humo-bajo); } .ficha__spec dd{ margin:0; font-size:.85rem; color:var(--humo); min-width:0; } /* Los materiales, uno por renglón. Llegan como una lista separada por comas y apilados se leen de un vistazo; en una línea corrida se vuelven un párrafo. */ .ficha__spec--materiales dd{ display:flex; flex-direction:column; gap:.1rem; } /* ── Los materiales, en su cuadro ───────────────────────────────────── Van enmarcados y no sueltos, como en el boceto. El marco hace un trabajo concreto además de decorar: es lo único de la miniatura que puede tener uno o cinco renglones, así que sin él la ficha se lee distinta según la pieza y la grilla queda temblorosa. Si la pieza no trae materiales el cuadro no se dibuja. Un marco vacío se lee como que falta cargar algo, y hoy —con la columna recién creada— faltarían los veinte. */ /* Sin recuadro: cada renglón lleva su marca de índice, un filete corto de latón, que es el mismo trazo con el que el bisel marca sus valores. Ordena la lista sin encerrarla, y evita el marco adentro del marco. */ .ficha__materiales{ margin:0; padding:0; border:0; background:none; } .ficha__materiales li{ position:relative; padding-left:1.05rem; } .ficha__materiales li::before{ content:''; position:absolute; left:0; top:.62em; width:.5rem; height:1px; background:var(--laton); opacity:.7; } .ficha__materiales ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.15rem; font-size:.85rem; color:var(--humo); line-height:1.35; } /* Las dos pastillas del pie: el año y la medida. Son los dos datos que se comparan de una ficha a otra —«¿de qué año es?», «¿me entra?»— y por eso van sueltas y no en la lista de arriba: se buscan de un vistazo, saltando de tarjeta en tarjeta. */ /* El año y la medida, separados por filetes como los sectores de una esfera. Lo que los separa es la línea, no una caja cada uno. Van pegados al pie: con todas las fichas midiendo lo mismo, ese renglón queda a la misma altura en todas y se compara saltando de una a otra. */ .ficha__pastillas{ margin:auto 0 0; padding-top:.9rem; display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--filete); } .ficha__pastilla{ padding:0 .95rem; border:0; border-left:1px solid var(--filete); border-radius:0; font-size:.85rem; letter-spacing:.06em; color:var(--hueso); font-variant-numeric:lining-nums tabular-nums; } .ficha__pastilla:first-child{ padding-left:0; border-left:0; } /* ── El precio y la descripción son SÓLO de escritorio ───────────────── Volvieron a la miniatura el 2026-08-12 y el mismo día se acotaron al ancho grande, mirándolo en el teléfono: **ahí no entran.** La ficha es `1fr 2fr` en las dos anchuras, así que en un teléfono la columna de datos mide dos tercios de la pantalla —unos 240 px— y ahí adentro tienen que caber el nombre, los materiales y el pie. El pie es el que se rompe primero: «2026 · 41 mm · USD 17.000» no entra en un renglón y el precio se cae a una segunda línea, que descoloca la fila que existe justamente para estar a la misma altura en todas las tarjetas. Y la descripción son dos renglones más en la pantalla donde menos sobra. Se resuelve por defecto y no por excepción: **el móvil es la tarjeta de antes** —nombre, materiales, año y medida— y lo demás se enciende a partir de 46rem, que es el mismo punto donde la grilla pasa a dos columnas. Un segundo umbral propio sería otro número que mantener. Nada se pierde en el teléfono: el precio y la descripción completa están en la ficha expandida, a un toque. */ .ficha__resumen, .ficha__pastilla--precio{ display:none; } @media (min-width:46rem){ /* El precio, al final del renglón del pie y no en un lugar propio: es el que queda a la misma altura en todas las fichas, así que es el único donde un número se puede comparar saltando de una a otra. `margin-left:auto` lo empuja a la derecha y le saca el filete: alineado al borde cae en la misma columna en todas las tarjetas, en vez de bailar según cuántos dígitos tenga el año de al lado. */ .ficha__pastilla--precio{ display:inline-block; margin-left:auto; border-left:0; padding-right:0; color:var(--hueso); font-weight:600; } /* La descripción, recortada a dos renglones. El recorte no es estético: `.ficha__pastillas` se apoya en `margin:auto 0 0` para quedar pegada al pie, y un texto más largo la empujaría fuera. Ahí las pastillas dejan de estar a la misma altura en todas las fichas y la grilla deja de leerse como grilla — que es lo único que esa fila vino a hacer. Con `line-clamp` el corte lo hace el navegador sobre el texto ya maquetado, así que no hay un largo máximo que mantener del lado de la planilla: él escribe lo que quiera y la tarjeta muestra dos renglones. El aire de abajo lo pidió Facundo el 2026-08-12 mirándolo con datos reales, y va acá y no en el `gap` del contenedor porque el contenedor los reparte a todos por igual: subirlo ahí también separaría el nombre de la descripción, que son dos cosas que se leen de corrido. Lo que hay que abrir es la junta entre el texto y la lista de materiales, que son dos bloques distintos. */ .ficha__resumen{ display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0 0 clamp(.5rem,1.1vw,1rem); color:var(--humo); font-size:.88rem; line-height:1.5; } } /* El blanco del tamaño de la ficha entera: un enlace a la página del reloj (hasta el 2026-10-06 era un botón que abría la ficha expandida). Va estirado y no envolviendo el contenido: el lector de pantalla leería todo el bloque como el nombre del enlace. Así el nombre se lo da `aria-labelledby`, que apunta al modelo. */ .ficha__abrir{ position:absolute; inset:0; width:100%; height:100%; background:none; border:0; padding:0; cursor:pointer; } .ficha__abrir:focus-visible{ outline:2px solid var(--laton); outline-offset:-3px; } /* ── El cajón de filtros ────────────────────────────────────────────── Sale de la izquierda. Cerrado queda con `pointer-events:none` para que el velo invisible no se coma los clics de la página. */ .cajon{ position:fixed; inset:0; z-index:60; pointer-events:none; } .cajon[data-abierto]{ pointer-events:auto; } .cajon__velo{ position:absolute; inset:0; background:rgba(10,17,14,.55); opacity:0; transition:opacity .3s ease; } .cajon[data-abierto] .cajon__velo{ opacity:1; } /* En pantalla ancha el velo se apaga: el panel es una columna angosta al costado y el sentido es filtrar MIRANDO la grilla cambiar. Sigue estando para que el clic afuera cierre, pero no oscurece lo que hay que ver. */ @media (min-width:64rem){ .cajon[data-abierto] .cajon__velo{ opacity:0; } } .cajon__panel{ position:absolute; inset-block:0; left:0; width:min(23rem, 90vw); display:flex; flex-direction:column; background:var(--superficie); border-right:1px solid var(--filete); box-shadow:0 0 3rem rgba(0,0,0,.45); transform:translateX(-100%); transition:transform .34s cubic-bezier(.22,1,.36,1); } .cajon[data-abierto] .cajon__panel{ transform:none; } .cajon__cabecera{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 1.25rem; border-bottom:1px solid var(--filete); } .cajon__titulo{ margin:0; font-family:var(--display); font-weight:var(--display-peso); font-size:1.15rem; color:var(--hueso); } .cajon__cerrar{ display:grid; place-items:center; width:2.25rem; height:2.25rem; flex:0 0 auto; background:none; border:1px solid var(--filete); border-radius:2px; color:var(--humo); cursor:pointer; transition:color .25s ease, border-color .25s ease; } @media (hover:hover){ .cajon__cerrar:hover{ color:var(--laton); border-color:var(--laton); } } .cajon__cerrar:focus-visible{ outline:2px solid var(--laton); outline-offset:2px; } .cajon__cuerpo{ flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1.35rem; } .cajon__pie{ display:flex; align-items:center; gap:.75rem; padding:1rem 1.25rem; border-top:1px solid var(--filete); } /* El `gap` acá arregla el «Ver20 piezas» que se veía pegado: el botón es un contenedor flex, y en flex el espacio que hay en el marcado entre el texto y el del número no se dibuja — cada uno es un ítem y el blanco entre ítems se descarta. El separador tiene que ser el gap. */ .cajon__pie .boton{ flex:1; justify-content:center; gap:.35rem; } /* ── El buscador ────────────────────────────────────────────────────── El atajo del cajón: quien sabe qué busca escribe y no toca ningún control. */ .buscador{ display:flex; align-items:center; gap:.55rem; padding:.6rem .7rem; background:var(--fondo); border:1px solid var(--filete); border-radius:2px; transition:border-color .25s ease; } .buscador:focus-within{ border-color:var(--laton); } .buscador > svg{ flex:0 0 auto; color:var(--humo-bajo); } .buscador__campo{ flex:1; min-width:0; background:none; border:0; padding:0; color:var(--hueso); font-family:var(--texto); font-size:1rem; } .buscador__campo::placeholder{ color:var(--humo-bajo); } .buscador__campo:focus{ outline:none; } /* La cruz que trae el navegador se saca: ya hay una propia, y dos cruces en el mismo campo se leen como un error. */ .buscador__campo::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; } .buscador__borrar{ display:grid; place-items:center; flex:0 0 auto; width:1.5rem; height:1.5rem; background:none; border:0; padding:0; color:var(--humo-bajo); cursor:pointer; } @media (hover:hover){ .buscador__borrar:hover{ color:var(--hueso); } } .buscador__borrar:focus-visible{ outline:2px solid var(--laton); outline-offset:1px; } /* ── Los filtros de lista: marca y medida ───────────────────────────── Los dos en columna y todas las opciones a la vista, sin desplegables. Se pidió así y el motivo se sostiene solo: son las dos preguntas con las que se entra al catálogo —de quién es y qué tamaño tiene— y un menú que hay que abrir para saber qué contiene contesta las dos con un paso de más. **La opción ES el texto**, no un texto adentro de un botón. El marco de una chapita promete que hay algo que apretar, y acá lo que hay es una lista de la que se elige: el renglón se enciende en latón y esa es toda la señal que necesita. Sigue siendo un