/* ========================================================================== Vidriera pública -------------------------------------------------------------------------- Papel, tinta y una línea. Nada más. Portado del boceto de paginaDescartable/. Lo que el boceto no tenía — checkout, OTP, relacionados, overlays de pago — está al final del archivo, resuelto con el mismo vocabulario: sin cajas, una línea por debajo y mayúsculas chicas para las etiquetas. ========================================================================== */ :root { --paper: #f4f3f0; --paper-deep: #eceae5; --ink: #171614; --ink-soft: #605e58; --ink-faint: #a6a29a; --line: #d5d2ca; --glass: rgba(244, 243, 240, 0.72); --glass-blur: saturate(1.25) blur(16px); /* Acentos de las etiquetas de la grilla: celeste para la oferta, rojo apagado para el stock que se termina. */ --flag-oferta-bg: #9fcbe8; --flag-oferta-ink: #10303f; --flag-ultimas-bg: #d99483; --flag-ultimas-ink: #3d1a12; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --pad: clamp(18px, 3.2vw, 52px); --header-h: 58px; /* Lo que el encabezado ocupa de verdad en pantalla: su alto más la barra de estado del teléfono, que con viewport-fit=cover queda por debajo. Todo lo que se pega abajo del encabezado tiene que usar esta y no --header-h, o en iPhone se mete detrás. En pantallas sin muesca las dos valen lo mismo. */ --header-total: calc(var(--header-h) + env(safe-area-inset-top, 0px)); --ease: cubic-bezier(0.16, 0.84, 0.24, 1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* La página es una columna: el alto sobrante lo toma la portada, así el pie nunca empuja el contenido fuera de la ventana. Va con la clase puesta porque tokens.css y base.css, que se cargan antes, pintan el tema oscuro del panel sobre el mismo selector. */ body.vidriera { margin: 0; min-height: 100svh; display: flex; flex-direction: column; /* Transparente a propósito: el color lo pinta para que la ilustración del fondo (body::before, más abajo) no quede tapada. */ background: transparent; color: var(--ink); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Grano de papel */ body.vidriera::after { content: ""; position: fixed; inset: 0; /* base.css usa este mismo pseudo-elemento como manchón de color: un círculo de 62vw. Sin resetear la caja, el grano queda recortado en círculo y se ve un arco enorme cruzando la página. */ width: auto; height: auto; border-radius: 0; z-index: 100; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } button, input { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } main { flex: 1 0 auto; display: flex; flex-direction: column; } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } /* Una sola familia de etiquetas chicas para toda la página */ .half-index, .half-label, .half-brands, .card-brand, .sheet-brand, .sizes-head, .site-footer, .filter, .ph-text { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } /* -------------------------------------------------------------------------- Encabezado -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 30; /* Con viewport-fit=cover la página llega hasta el borde del teléfono, así que el encabezado se agranda por debajo de la barra de estado en vez de quedar tapado por ella. En pantallas sin muesca el env() vale 0 y no cambia nada. */ height: var(--header-total); padding-top: env(safe-area-inset-top, 0px); display: flex; align-items: center; gap: 40px; padding-left: var(--pad); padding-right: var(--pad); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); /* Capa propia: en iOS el desenfoque de un elemento pegajoso se repinta con un cuadro de retraso mientras se scrollea, y se ve la franja parpadeando. */ transform: translateZ(0); } /* Forro que sube por detrás del encabezado. En iPhone, cuando la barra de la URL se contrae o el scroll rebota contra el tope, arriba del encabezado asoma una franja de contenido sin desenfocar; esto la tapa con el mismo vidrio. En el tope de la página queda fuera de la ventana, invisible. */ .site-header::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 140px; pointer-events: none; background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } @supports not (backdrop-filter: blur(1px)) { .site-header, .site-header::before { background: var(--paper); } } .brand { margin-right: auto; font-size: 12px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; text-decoration: none; color: inherit; } .header-nav { display: flex; gap: 26px; } .nav-link, .bag-btn { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; letter-spacing: 0.06em; color: var(--ink-soft); transition: color 0.25s ease; } .nav-link { position: relative; padding-bottom: 2px; } /* Subrayado que crece desde la izquierda, pegado al texto y no a la caja de click */ .nav-link::after { content: ""; position: absolute; left: 0; bottom: 10px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .nav-link:hover, .bag-btn:hover, .nav-link.is-active { color: var(--ink); } .nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); } .bag-btn { gap: 6px; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- Portada 50 / 50 -------------------------------------------------------------------------- */ .split { flex: 1 0 auto; display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; } .half { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--pad); overflow: hidden; } /* Toda la mitad entra a la categoría (ver portada.js), así que toda la mitad tiene que parecer clickeable. */ .half:not(.is-empty) { cursor: pointer; } .half + .half::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); } /* Cuerpo centrado de cada mitad. Va por encima de la cortina. */ .half-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(100%, 460px); } .half-title { margin: 0; font-size: clamp(34px, 4.6vw, 68px); font-weight: 500; line-height: 0.94; letter-spacing: -0.035em; } .half-text { margin: 18px 0 0; max-width: 30ch; color: var(--ink-soft); } .half-data { display: flex; justify-content: center; gap: clamp(32px, 4vw, 56px); margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line); width: min(100%, 340px); } .half-data dt { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .half-data dd { margin: 4px 0 0; font-size: 16px; font-variant-numeric: tabular-nums; } .half-brands { margin: 14px 0 0; max-width: 44ch; line-height: 1.9; color: var(--ink-faint); } /* Botones de acción: una barra de ancho fijo con la línea abajo. Mismas dimensiones en la portada y en la ficha. */ .half-cta, .add-btn { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(100%, 260px); min-height: 44px; padding: 0 0 2px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; } .half-cta { margin-top: 30px; } .half-cta::before, .half-cta::after, .add-btn::before, .add-btn::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; } .half-cta::before, .add-btn::before { background: var(--line); } .half-cta::after, .add-btn::after { background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); } .half-cta:hover::after, .add-btn:hover::after { transform: scaleX(1); } /* La flecha se corre unos píxeles al pasar */ .btn-arrow { font-size: 14px; letter-spacing: 0; color: var(--ink-soft); transition: transform 0.4s var(--ease), color 0.3s ease; } .half-cta:hover .btn-arrow, .add-btn:hover .btn-arrow { transform: translateX(4px); color: var(--ink); } /* -------------------------------------------------------------------------- Catálogo -------------------------------------------------------------------------- */ .catalog { padding-bottom: clamp(64px, 12vh, 140px); } .catalog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: clamp(28px, 5vh, 56px) var(--pad) 20px; } .catalog-title { margin: 0; font-size: clamp(28px, 3.4vw, 48px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; } .catalog-count { margin: 0 0 8px; color: var(--ink-faint); font-variant-numeric: tabular-nums; } .back-link { display: inline-flex; align-items: center; min-height: 34px; color: var(--ink-soft); font-size: 13px; letter-spacing: 0.06em; transition: color 0.25s ease; } .back-link:hover { color: var(--ink); } .catalog-bar { position: sticky; top: var(--header-total); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 14px var(--pad); background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: clamp(26px, 4vh, 44px); } @supports not (backdrop-filter: blur(1px)) { .catalog-bar { background: var(--paper); } } /* Filtros: texto, sin cajas */ .filters { display: flex; flex-wrap: wrap; gap: 22px; } .filter { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding-bottom: 1px; color: var(--ink-faint); transition: color 0.25s ease; } .filter::after { content: ""; position: absolute; left: 0; bottom: 7px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .filter:hover { color: var(--ink-soft); } .filter.is-active { color: var(--ink); } .filter:hover::after, .filter.is-active::after { transform: scaleX(1); } .tools { display: flex; align-items: center; gap: 28px; } .search input { width: 200px; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: 13px; transition: border-color 0.3s ease; } .search input::placeholder { color: var(--ink-faint); } .search input:focus { outline: none; border-bottom-color: var(--ink); } .grid-toggle { flex: none; display: inline-flex; align-items: center; min-height: 34px; white-space: nowrap; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); transition: color 0.25s ease; } .grid-toggle:hover { color: var(--ink); } /* -------------------------------------------------------------------------- Grilla -------------------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(34px, 4.5vh, 56px) var(--pad); padding: 0 var(--pad); } .grid.is-wide { grid-template-columns: repeat(3, 1fr); } .card { display: block; width: 100%; text-align: left; /* Perspectiva más corta que la del boceto: con la misma inclinación, cuanto más cerca está el punto de fuga más se nota el volumen. */ perspective: 800px; /* Las escribe el JS con la posición del puntero */ --rx: 0deg; --ry: 0deg; } /* Vidriera de sólo exhibición: la tarjeta se sigue viendo (y se sigue inclinando con el puntero) pero no se ofrece como algo en lo que entrar. */ .card.is-solo-vista { cursor: default; } .card-photo { position: relative; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; background: var(--paper-deep); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.7s var(--ease), background-color 0.5s ease; } .card.is-tilting .card-photo { transition: background-color 0.5s ease; } .card:hover .card-photo { background: #e5e2dc; } /* Marco interior: el único indicio de que la tarjeta es un plano en el espacio */ .card-photo::before { content: ""; position: absolute; inset: 18px; z-index: 1; border: 1px solid rgba(23, 22, 20, 0.13); transform: translateZ(34px); transition: inset 0.7s var(--ease), border-color 0.5s ease; } .card:hover .card-photo::before { inset: 12px; border-color: rgba(23, 22, 20, 0.22); } .ph-text { color: var(--ink-faint); transform: translateZ(48px); } .card-brand { margin: 20px 0 0; color: var(--ink-faint); } .card-name { margin: 7px 0 0; font-size: 16px; font-weight: 400; } .card-price { margin: 5px 0 0; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .card-price s { margin-left: 10px; color: var(--ink-faint); } .empty { padding: 0 var(--pad); color: var(--ink-faint); } /* -------------------------------------------------------------------------- Ficha: repite el 50 / 50 de la portada -------------------------------------------------------------------------- */ .overlay { position: fixed; inset: 0; z-index: 40; display: flex; align-items: stretch; background: rgba(23, 22, 20, 0.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade 0.3s ease both; /* El gesto de scroll muere acá: no se lo pasa al catálogo de atrás cuando la ficha llega a su tope. */ overscroll-behavior: contain; } .sheet { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1400px; margin: auto; max-height: 100svh; overflow: auto; background: var(--paper); animation: sheet-in 0.55s var(--ease) both; } @keyframes fade { from { opacity: 0; } } @keyframes sheet-in { from { opacity: 0; transform: translateY(18px); } } .sheet-close { position: absolute; top: 14px; right: var(--pad); z-index: 2; display: inline-flex; align-items: center; min-height: 40px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .sheet-close:hover { color: var(--ink); } .sheet-photo { position: relative; display: flex; align-items: center; justify-content: center; min-height: 54svh; overflow: hidden; background: var(--paper-deep); perspective: 1200px; --mx: 50%; --my: 50%; --tx: 0px; --ty: 0px; } /* Luz suave que sigue al puntero: es el único brillo de la página */ .sheet-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient( 460px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 68% ); } .sheet-photo .ph-text { position: relative; z-index: 1; transform: translate3d(var(--tx), var(--ty), 30px); transition: transform 0.6s var(--ease); } .sheet-photo.is-tracking .ph-text { transition: none; } .sheet-info { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(40px, 6vh, 76px) var(--pad); } .sheet-brand { margin: 0; color: var(--ink-faint); } .sheet-title { margin: 14px 0 0; font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; } .sheet-price { display: flex; align-items: baseline; gap: 14px; margin: 16px 0 0; font-size: 18px; font-variant-numeric: tabular-nums; } .sheet-price s, .sale-tag { font-size: 13px; color: var(--ink-faint); } .sheet-text { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line); max-width: 46ch; color: var(--ink-soft); } .sheet-code { margin: 14px 0 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .sizes { width: min(100%, 560px); margin-top: 30px; } .sizes-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 14px; color: var(--ink-faint); } .sizes-note { letter-spacing: 0.1em; } /* Talles: números en una fila, sin cajas */ .sizes-grid { display: flex; flex-wrap: wrap; gap: 2px 18px; } .size { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 36px; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-soft); transition: color 0.25s ease; } .size::after { content: ""; position: absolute; left: 0; bottom: 7px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 0.3s var(--ease); } .size:hover, .size.is-active { color: var(--ink); } .size:hover::after, .size.is-active::after { transform: scaleX(1); } .size:disabled { color: var(--ink-faint); cursor: default; text-decoration: line-through; } .size:disabled::after { display: none; } .add-btn { margin-top: 34px; } /* -------------------------------------------------------------------------- Pie y aviso -------------------------------------------------------------------------- */ .site-footer { display: flex; flex-wrap: wrap; gap: 8px 32px; padding: 22px var(--pad); border-top: 1px solid var(--line); color: var(--ink-faint); } .site-footer p { margin: 0; } .toast { position: fixed; left: var(--pad); bottom: 26px; z-index: 60; padding: 13px 0; border-top: 1px solid var(--ink); min-width: 260px; background: var(--paper); font-size: 13px; animation: toast-in 0.4s var(--ease) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* -------------------------------------------------------------------------- Movimiento: un solo gesto, la persiana -------------------------------------------------------------------------- */ .reveal { clip-path: inset(0 0 102% 0); transform: translateY(14px); } .reveal.is-in { clip-path: inset(0 0 -20% 0); transform: none; transition: clip-path 0.9s var(--ease) var(--reveal-delay, 0s), transform 0.9s var(--ease) var(--reveal-delay, 0s); } /* -------------------------------------------------------------------------- Pantallas chicas -------------------------------------------------------------------------- */ @media (max-width: 1200px) { .grid { grid-template-columns: repeat(3, 1fr); } .grid.is-wide { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { :root { --header-h: 56px; } /* En el teléfono la ilustración entra recortada por los lados y las tarjetas le tapan casi todo el hueco: sube para que al menos se lea como textura. */ body.vidriera:not(.en-portada) { --bg-ilustracion: 0.14; } .site-header { gap: 10px; } /* En 390px entran cuatro cosas en el encabezado (marca, dos categorías y Staff): hay que apretar tipografía y tracking o "Staff" queda cortado contra el borde. */ .brand { font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; } .header-nav { gap: 12px; } .nav-link { font-size: 11px; } .staff-link { font-size: 9px; } .split { grid-template-columns: 1fr; } /* Apiladas y a mitad de pantalla cada una: la portada sigue entrando entera sin scroll, que es su razón de ser. */ .vidriera.en-portada .split { grid-template-rows: 1fr 1fr; } .half { min-height: 0; } .half-title { font-size: clamp(30px, 9vw, 46px); } .half + .half::before { left: var(--pad); right: var(--pad); top: 0; bottom: auto; width: auto; height: 1px; } .catalog-head { flex-direction: column; align-items: flex-start; gap: 12px; } .catalog-bar { flex-direction: column; align-items: stretch; gap: 14px; } .tools { justify-content: space-between; } .search { flex: 1; } .search input { width: 100%; } /* En una columna la ficha mide más que la pantalla (foto + talles + el formulario de envío). El que scrollea es el overlay, no la ficha: así el alto de la ficha es libre y no hay nada que quede fuera de alcance. Antes la ficha crecía dentro de un overlay fijo de 100svh sin scroll y todo lo que pasaba del primer pantallazo era inaccesible. */ .overlay { align-items: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Sin el desenfoque: la ficha tapa la pantalla entera, así que no se ve, y mientras esté puesto el navegador toma al overlay como marco de referencia de los hijos fijos y el botón de cerrar se va con el scroll. */ -webkit-backdrop-filter: none; backdrop-filter: none; } .sheet { grid-template-columns: 1fr; max-height: none; min-height: 100%; margin: 0; overflow: visible; /* Sólo el fundido, sin el desplazamiento de entrada: al terminar, una animación con transform deja el elemento con una matriz identidad puesta, y eso alcanza para que el navegador lo tome como marco de referencia del botón de cerrar, que entonces scrollea con la ficha en vez de quedarse fijo. El desplazamiento de 18px no se extraña en un teléfono. */ animation: fade 0.35s ease both; } /* Queda flotando sobre la foto: al scrollear la ficha, la salida sigue ahí. Funciona porque ni el overlay ni la ficha tienen ya filtro ni transform puestos: cualquiera de los dos lo volvería el marco de referencia del botón y entonces se iría con el contenido en vez de quedarse fijo. */ .sheet-close { position: fixed; top: 10px; right: var(--pad); z-index: 5; min-height: 44px; padding: 0 14px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); } .grid, .grid.is-wide { grid-template-columns: repeat(2, 1fr); } /* Proporción de foto en vez de un alto arbitrario: con min-height la caja quedaba casi cuadrada y una foto vertical dejaba dos franjas de papel a los costados. Con 4/5 la foto llena el ancho de la pantalla. */ .sheet-photo { min-height: 0; aspect-ratio: 4 / 5; } .toast { left: var(--pad); right: var(--pad); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { clip-path: none; transform: none; } .overlay, .sheet, .toast { animation: none; } * { transition-duration: 0.01ms !important; } } /* ========================================================================== Puente con el sistema real -------------------------------------------------------------------------- El boceto era una maqueta suelta. Acá se le enchufan los nombres de clase que ya usan los módulos de vidriera/ y las piezas que la maqueta no tenía. ========================================================================== */ /* base.css pinta dos manchones de color fijos con body::before/::after para el panel oscuro. Acá no van: el ::before se reusa para la ilustración del local y el ::after para el grano. */ body.vidriera::before { content: none; } /* -------------------------------------------------------------------------- Fondo: la ilustración del local -------------------------------------------------------------------------- El dibujo a tinta de la vidriera, en negativo y muy bajo, detrás del catálogo y del acceso staff. En la portada NO va: ahí las dos mitades son todo el diseño y cualquier cosa por detrás las ensucia. Va en un pseudo-elemento fijo y no en background-attachment: fixed, que en iOS se mueve a los saltos. Para que el z-index negativo no lo deje detrás del fondo de la página, el color base lo pinta y no . -------------------------------------------------------------------------- */ html { background: var(--paper); } body.vidriera:not(.en-portada)::before { content: ""; position: fixed; inset: 0; /* base.css usa este mismo pseudo-elemento como manchón de color: un círculo de 62vw anclado arriba a la izquierda. Sin resetear la caja, inset: 0 no alcanza —width y height siguen mandando— y el dibujo queda encerrado en un cuadrado en un rincón. Es el mismo reset que hace el grano del ::after. */ width: auto; height: auto; border-radius: 0; background-color: transparent; z-index: -1; pointer-events: none; background: url("/background-tienda.jpg?v=20260803") center / cover no-repeat; /* El dibujo es tinta negra sobre papel claro: invertido queda trazo claro sobre el fondo oscuro, que es el mismo dibujo leído al revés. */ filter: invert(1) grayscale(1); /* El encuadre es el mismo en todas las pantallas: el dibujo entero, centrado. Lo que cambia es cuánto se ve — en el catálogo va más bajo que en el acceso porque compite con el título de la categoría y con las tarjetas. */ opacity: var(--bg-ilustracion, 0.09); } /* El contenido cuelga de #login-screen, así que es él —y no — quien tiene que estirarse: si no, el pie queda flotando a media pantalla. */ .vidriera #login-screen { flex: 1 0 auto; display: flex; flex-direction: column; min-height: 100svh; } /* Los módulos ocultan cosas con .hidden, no con el atributo [hidden]. */ .vidriera .hidden { display: none !important; } /* Con la ficha abierta el catálogo de atrás no se mueve. El overflow tiene que ir también en : el elemento que scrollea la página es él, así que ponerlo sólo en dejaba el fondo corriéndose por debajo de la ficha mientras la ficha misma no se movía (se veía en el celular sobre todo). */ html:has(> body.body-no-scroll), body.body-no-scroll { overflow: hidden; overscroll-behavior: none; } /* --------------------------------------------------------------- Arranque */ .vidriera .loading-overlay { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--paper); color: var(--ink-faint); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .vidriera .loader, .vidriera .spinner-loader { width: 26px; height: 26px; border: 1px solid var(--line); border-top-color: var(--ink); border-radius: 50%; animation: vidriera-spin 0.9s linear infinite; } @keyframes vidriera-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------- Encabezado y pie */ .staff-link { display: inline-flex; align-items: center; min-height: 40px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: var(--ink-faint); transition: color 0.25s ease; } .staff-link:hover { color: var(--ink); } .site-footer { display: block; padding-bottom: 26px; } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; } .footer-title { color: var(--ink); margin-bottom: 8px !important; } .site-footer a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease; } .site-footer a:hover { color: var(--ink); border-bottom-color: var(--line); } .footer-bottom { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); } /* --------------------------------------------------------------- Portada */ /* Una categoría sin nada cargado no se puede abrir. */ .half.is-empty { opacity: 0.55; } .half.is-empty .half-cta { cursor: default; } .half.is-empty .half-cta::after { display: none; } /* ---------------------------------------------------------------- Filtros */ .filter-rows { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; } .filter-row { display: flex; align-items: baseline; gap: 18px; min-width: 0; } .filter-label { flex: none; width: 74px; white-space: nowrap; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } /* Los chips que dibuja filtros.js toman el aspecto de .filter del boceto. */ .store-talle-filter-btn, .store-filter-chip { position: relative; display: inline-flex; align-items: center; min-height: 30px; padding-bottom: 1px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); background: none; border: 0; cursor: pointer; transition: color 0.25s ease; } .store-talle-filter-btn { font-variant-numeric: tabular-nums; } .store-talle-filter-btn::after, .store-filter-chip::after { content: ""; position: absolute; left: 0; bottom: 5px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); } .store-talle-filter-btn:hover, .store-filter-chip:hover { color: var(--ink-soft); } .store-talle-filter-btn.active, .store-filter-chip.active { color: var(--ink); } .store-talle-filter-btn:hover::after, .store-filter-chip:hover::after, .store-talle-filter-btn.active::after, .store-filter-chip.active::after { transform: scaleX(1); } .tools { flex: none; } /* ----------------------------------------------------------------- Grilla */ .card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; } .card-img.loaded { opacity: 1; } .card-sizes { margin: 6px 0 0; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-faint); } .card-flags { position: absolute; top: 0; left: 0; z-index: 3; /* Levantadas en el eje Z para que floten junto con el marco cuando la tarjeta se inclina, en vez de quedar pegadas al fondo. */ transform: translateZ(40px); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; } /* Las dos únicas manchas de color de toda la vidriera: son las que tienen que frenar el ojo mientras se recorre la grilla, y por eso se salen del papel y la tinta. */ .card-flag { padding: 3px 8px; background: var(--flag-ultimas-bg); color: var(--flag-ultimas-ink); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; } .card-flag-offer { background: var(--flag-oferta-bg); color: var(--flag-oferta-ink); } .card-price.is-offer s { margin: 0 8px 0 0; color: var(--ink-faint); } .load-more { padding: clamp(30px, 5vh, 52px) var(--pad) 0; text-align: center; } /* ------------------------------------------------------------------ Ficha */ /* El formulario de compra es largo: la ficha se lee de arriba hacia abajo y no centrada como en el boceto, que sólo tenía cuatro renglones. */ .sheet-info { justify-content: flex-start; } .sheet-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translate3d(var(--tx), var(--ty), 0); transition: opacity 0.6s ease, transform 0.6s var(--ease); } .sheet-photo img.loaded { opacity: 1; } /* Con foto cargada sobra el cartel de "Sin foto". */ .sheet-photo img.loaded ~ .ph-text { display: none; } @media (min-width: 821px) { /* La foto acompaña el scroll del formulario en vez de irse para arriba. */ .sheet-photo { position: sticky; top: 0; align-self: start; height: 100svh; } } .sheet-countdown { margin-top: 10px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } /* Talles de la ficha: mismo trazo que .size del boceto. */ .store-lightbox-talle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 30px; min-height: 36px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--ink-soft); transition: color 0.25s ease; } /* El subrayado cuelga del talle y no del botón entero: con el aviso de "quedan pocas" al lado, una línea a todo el ancho se leía como si fuera parte del aviso. */ .store-lightbox-talle-btn > span:first-child { position: relative; padding-bottom: 2px; } .store-lightbox-talle-btn > span:first-child::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transition: transform 0.3s var(--ease); } .store-lightbox-talle-btn:hover, .store-lightbox-talle-btn.active { color: var(--ink); } .store-lightbox-talle-btn:hover > span:first-child::after, .store-lightbox-talle-btn.active > span:first-child::after { transform: scaleX(1); } .talle-low-stock-badge { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .add-btn.disabled, .add-btn:disabled { color: var(--ink-faint); cursor: default; } .add-btn.disabled::after, .add-btn:disabled::after { display: none; } /* ------------------------------------------------- Formulario de compra */ .sheet-form, .sheet-otp { width: min(100%, 560px); margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form-group { margin-bottom: 16px; } .sheet-form label, .sheet-otp label { display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); } .sheet-form input, .sheet-otp input[type="text"], .sheet-otp input[type="tel"] { width: 100%; padding: 9px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line); font-size: 14px; transition: border-color 0.3s ease; } .sheet-form input::placeholder { color: var(--ink-faint); } .sheet-form input:focus, .sheet-otp input:focus { outline: none; border-bottom-color: var(--ink); } .delivery-options { display: flex; gap: 22px; flex-wrap: wrap; } .delivery-options.is-stacked { flex-direction: column; gap: 10px; } /* Las opciones de radio también son