`, hijo directo de ``—, y sus renglones los estiliza esta misma hoja. Con los tokens ahi dentro, cada `var(--t-*)` del carrito resolvia a vacio. Y una variable vacia no es "el valor por defecto": invalida **toda la declaracion**, asi que `border: 1.5px solid var(--t-borde-control)` dejaba los botones `+`/`−` sin borde, sin fondo y sin radio — dos glifos sueltos en vez de dos controles. Medido en produccion el 2026-09-02: los seis tokens vacios dentro de `#cartSidebar` y con valor dentro de `.store-container`. --------------------------------------------------------------------------- */ :root { --t-fondo: #eef2f7; --t-superficie: #ffffff; --t-panel: #f2f6fa; --t-borde: #dae2ec; /* 3.08:1 sobre blanco. El anterior, #e9ecef, daba 1.19:1. */ --t-borde-control: #8494ab; --t-tinta: #17233a; /* 5.50:1 sobre blanco */ --t-tinta-suave: #5a6a80; --t-marca: var(--primary-color); --t-marca-oscura: #204378; --t-marino: var(--secondary-color); /* El rojo de la etiqueta de la lata. 5.78:1 sobre blanco. */ --t-acento: #c1272d; --t-ml: #ffe600; --t-radio: 14px; --t-radio-chico: 8px; } .store-container { background: var(--t-fondo); /* El navbar es `position: fixed` y no empuja el contenido; cada página se despeja sola. 80 px es su alto real (15+15 de padding + 50 del logo). */ padding: calc(80px + 2.5rem) 1rem 4rem; color: var(--t-tinta); } /* --------------------------------------------------------------------------- Cabecera --------------------------------------------------------------------------- */ .store-header { max-width: 46rem; margin: 0 auto 2.5rem; text-align: center; } .store-header__eyebrow { margin: 0 0 0.75rem; font-size: var(--texto-xs); font-weight: var(--peso-semi); letter-spacing: 0.12em; text-transform: uppercase; color: var(--t-tinta-suave); } .store-header__title { margin: 0 0 0.75rem; font-size: var(--titulo-2); font-weight: var(--peso-fuerte); line-height: var(--interlineado-titulo); color: var(--t-marino); } .store-header__subtitle { margin: 0; font-size: var(--texto-md); font-weight: var(--peso-normal); line-height: var(--interlineado-base); color: var(--t-tinta-suave); } /* --------------------------------------------------------------------------- Filtros por categoría --------------------------------------------------------------------------- **No van pegajosos.** Lo estuvieron —`position: sticky; top: 80px`— y hacia dos destrozos a la vez, los dos medidos en produccion el 2026-09-02: 1. Con fondo opaco, la barra **guillotinaba la escalera de presentaciones** de la tarjeta que pasaba por debajo: 17 px de recorte a 1440 y 35 de 45 a 820 px, donde la barra se parte en dos renglones y mide 120 px de alto. Se veian los "latas" sin sus numeros. 2. El `top: 80px` reservaba sitio para el navbar, pero `modern-enhancements.js` **esconde el navbar al desplazar hacia abajo** (`translateY(-100%)` pasados 200 px). Al esconderse quedaba una banda de 80 px por la que el contenido pasaba desnudo POR ENCIMA de la barra. Coordinar una barra pegajosa con un navbar que se auto-esconde es fragil, y la reja son once tarjetas, no doscientas. Se queda arriba, quieta. --------------------------------------------------------------------------- */ .filtros-categoria { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 1200px; margin: 0 auto 2rem; padding: 0.25rem; } .filtro-categoria { display: inline-flex; align-items: center; gap: 0.4rem; /* 44 px de alto tocable. Antes eran 34, y es el control que más se pulsa en móvil después de los botones de cantidad. */ min-height: 44px; padding: 0.5rem 1rem; border: 1.5px solid var(--t-borde-control); border-radius: 999px; background: var(--t-superficie); color: var(--t-tinta); font-family: var(--fuente-base); font-size: var(--texto-sm); font-weight: var(--peso-medio); line-height: 1; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .filtro-categoria:hover { border-color: var(--t-marca); color: var(--t-marca-oscura); } .filtro-categoria.is-activa { background: var(--t-marino); border-color: var(--t-marino); color: #fff; font-weight: var(--peso-semi); } .filtro-categoria__conteo { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 999px; background: var(--t-panel); color: var(--t-tinta-suave); font-size: var(--texto-xs); font-weight: var(--peso-semi); } .filtro-categoria.is-activa .filtro-categoria__conteo { background: rgba(255, 255, 255, 0.22); color: #fff; } /* --------------------------------------------------------------------------- La reja --------------------------------------------------------------------------- */ .store-products { max-width: 1200px; margin: 0 auto; } .products-grid { display: grid; /* `min(100%, 17.5rem)` y no `17.5rem` a secas: en un contenedor más estrecho que la pista mínima, `minmax(17.5rem, 1fr)` desborda. */ grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: 1.25rem; /* responsive-modern.css:474 declara `margin-bottom: 40px` sobre esta misma clase para la reja de la portada. Se anula aquí. */ margin-bottom: 0; } .store-vacio { margin: 3rem 0 0; text-align: center; color: var(--t-tinta-suave); font-size: var(--texto-md); } /* --------------------------------------------------------------------------- La tarjeta --------------------------------------------------------------------------- */ .product-card { display: flex; flex-direction: column; background: var(--t-superficie); border: 1px solid var(--t-borde); border-radius: var(--t-radio); /* `visible` a propósito, y no es un descuido: responsive-modern.css:466 declara `overflow: hidden` sobre `.product-card`, y eso **recortaba el anillo de foco** de los controles pegados al borde de la tarjeta. El redondeo que hacía falta lo pone ahora el propio panel de la foto. */ overflow: visible; /* responsive-modern.css:469 pone `text-align: center` para la reja de la portada. Aquí el contenido es una ficha, no un pie de foto. */ text-align: left; box-shadow: 0 1px 2px rgba(23, 35, 58, 0.06), 0 6px 16px rgba(23, 35, 58, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* El filtro por categoría oculta tarjetas con el atributo `hidden`, y la regla `[hidden] { display: none }` es del navegador: cualquier `display` declarado aquí por el autor le gana. Antes funcionaba de casualidad, porque `.product-card` no declaraba ninguno; en cuánto se le puso `display: flex`, el filtro dejo de ocultar nada. Misma trampa que el botón de Mercado Libre. */ .product-card[hidden] { display: none; } .product-card:hover { transform: translateY(-4px); border-color: #c3d0e0; box-shadow: 0 2px 4px rgba(23, 35, 58, 0.07), 0 14px 32px rgba(23, 35, 58, 0.13); } /* --------------------------------------------------------------------------- La foto --------------------------------------------------------------------------- El panel resuelve las dos cosas que estropeaban las imágenes: * `contain` sobre un panel de proporción fija. Las latas son verticales y `cover` en 180 px de alto las decapitaba. La proporción la fija el CSS, así que tampoco hace falta `width`/`height` en el `` para evitar el salto de maquetación. * `mix-blend-mode: multiply`. Las 50 fotos son recortes de estudio sobre **blanco puro**, y un rectangulo blanco sobre una tarjeta blanca no se lee como producto: se lee como un hueco. Multiplicar por el panel convierte ese blanco en el color del panel —blanco x color = color— y deja la lata recortada, sin tener que editar 50 archivos. De paso, la sombra del `::before` se ve **a traves** del fondo de la foto por la misma razón, y es lo que asienta la lata en vez de dejarla flotando. --------------------------------------------------------------------------- */ .product-card__foto { position: relative; aspect-ratio: 1 / 1; border-radius: var(--t-radio) var(--t-radio) 0 0; overflow: hidden; background: linear-gradient(180deg, #f7fafd 0%, var(--t-panel) 100%); } .product-card__foto::before { content: ''; position: absolute; left: 50%; bottom: 11%; width: 55%; height: 14px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(23, 35, 58, 0.26), rgba(23, 35, 58, 0)); } /* Dos trampas, las dos costaron una vuelta: * * 1. Con el panel en `display: grid` y la imagen centrada, `max-height: 100%` * se resolvía contra la altura del **area de la reja**, que a su vez la fija * el contenido: porcentaje contra `auto`, o sea contra nada. La lata se * pintaba a tamaño natural y el panel la recortaba igual que antes. * * 2. Con la imagen en absoluto e `inset` por los cuatro lados **pero `width` y * `height` en `auto`**, tampoco. En un elemento reemplazado —y un `` lo * es— `auto` se resuelve al tamaño intrinseco, no al hueco: la especificación * manda ignorar `right` y `bottom` cuando el sistema queda sobredeterminado. * Salía una lata de 500 px anclada arriba a la izquierda, más recortada aún. * * Con `width`/`height` explicitos los porcentajes se resuelven contra la caja * del panel, que si tiene altura definida por `aspect-ratio`, y `contain` centra * la foto dentro sin deformarla. */ .product-card__lata { position: absolute; top: 1.25rem; left: 1.25rem; width: calc(100% - 2.5rem); height: calc(100% - 3rem); object-fit: contain; mix-blend-mode: multiply; transition: transform 0.35s ease; } .product-card:hover .product-card__lata { transform: scale(1.04); } /* Hueco cuando un producto no tiene foto, para que la tarjeta no se descuadre */ .product-card__sin-foto { width: 100%; height: 100%; border-radius: var(--t-radio-chico); background: repeating-linear-gradient(45deg, #e7edf5 0 10px, #eef3f8 10px 20px); } /* Arriba a la derecha y no abajo a la izquierda: la lata esta centrada y ocupa el tercio central, así que la esquina inferior izquierda la tapaba. */ .product-card__peso { position: absolute; right: 0.75rem; top: 0.75rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--t-borde); color: var(--t-tinta-suave); font-size: var(--texto-xs); font-weight: var(--peso-semi); } /* --------------------------------------------------------------------------- Cuerpo de la tarjeta --------------------------------------------------------------------------- */ .product-card__content { display: flex; flex-direction: column; gap: 0.875rem; /* Crece para llenar la tarjeta, que en una reja se estira a la altura de la más alta de su fila. Sin esto el `margin-top: auto` de las acciones no tenía contra que empujar y los botones quedaban a media tarjeta, desalineados de los de al lado. */ flex: 1; padding: 1.125rem 1.125rem 1.25rem; } .product-card__categoria { margin: 0; font-size: var(--texto-xs); font-weight: var(--peso-semi); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-tinta-suave); } .product-card__title { margin: -0.5rem 0 0; font-size: var(--texto-lg); font-weight: var(--peso-semi); line-height: var(--interlineado-medio); color: var(--t-tinta); } /* --------------------------------------------------------------------------- La escalera de presentaciones --------------------------------------------------------------------------- Sustituye al `