/* ============================================================ MOVIMIENTO — este proyecto NO respeta `prefers-reduced-motion`. Es deliberado, no un olvido: se decidió el 2026-08-28 después de comprobar que en una máquina con "reducir movimiento" activado el sitio se veía sin una sola animación fuera del Hero y parecía roto —esta card, en particular, no hacía zoom al pasar el mouse—. La contrapartida está asumida: alguien que activó esa preferencia porque el movimiento en pantalla lo marea, acá va a ver las animaciones igual. NO repongas el bloque `@media (prefers-reduced-motion: reduce)` que estaba acá abajo. Si hay que revertirlo, está en el historial de git: el commit anterior a "forzar animaciones". Ojo con lo que SÍ hay que dejar: los `@media (hover: hover)` de este archivo son otra cosa —evitan que la card quede pegada en estado hover después de un toque en pantalla táctil— y sacarlos rompe el sitio en celulares. ============================================================ */ /* ============================================================ PRODUCT CARD — componente compartido Usado por: index.html (Últimos lanzamientos) y catalogo.html (Ofertas destacadas + grilla del catálogo). ÚNICA implementación del hover del producto. El comportamiento es el que ya tenía la grilla del catálogo —escala 1.03, elevación profunda y neutra, 0.4s— y ahora es el mismo en ambas páginas. Requiere las variables de :root de cada página (--surface, --accent, --border, --radius…), que son idénticas en landing y catálogo. IMPORTANTE — orden de carga: este archivo debe enlazarse DESPUÉS de aos.css. AOS genera reglas con selectores de especificidad alta ([data-aos][data-aos][data-aos-duration='600'] → 0,3,0) que pisarían la transición de la card. Por eso las reglas de aquí repiten la clase. ============================================================ */ .product-card { position: relative; background: linear-gradient(170deg, rgba(23,14,38,0.92) 0%, rgba(12,6,22,0.96) 100%); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: 0 4px 18px -10px rgba(0,0,0,0.7); } /* Especificidad (0,3,0): supera la duración que inyecta AOS ([data-aos][data-aos][data-aos-duration='600']) por orden de origen, pero NO su regla de delay ([…][data-aos-delay='300'].aos-animate → 0,4,0), que debe seguir escalonando la entrada. Ese delay se retira por JS al terminar la entrada (ver initProductCards) para que el hover responda al instante. */ .product-card.product-card.product-card { will-change: transform; transition: transform .4s cubic-bezier(.4,0,.2,1), box-shadow .4s cubic-bezier(.4,0,.2,1), border-color .4s cubic-bezier(.4,0,.2,1), opacity .4s ease; } /* --- HOVER ----------------------------------------------------------- Se expande la card entera y nada más. Antes se movían tres cosas a la vez —la card escalaba, la foto subía y escalaba por su cuenta, y el foco de luz crecía—, y los tres gestos superpuestos se leían como ruido en lugar de como una respuesta. Queda: la escala de la card, su borde, su sombra, y que el foco de luz se encienda (sin crecer). La foto ya no se mueve ni escala por su cuenta: acompaña a la card, que es lo que se está agrandando. Se acota a punteros finos para que en táctil la card no quede "pegada" en estado hover tras el tap. */ /* Cuánto escala la card lo define cada GRILLA con --card-hover-scale, no el componente: el valor correcto depende del ancho de la card, y ese ancho lo fijan las columnas, el gap y el max-width de la grilla. El criterio en todas es crecer hasta dejar ~4px de aire, o sea `gap − 4` de crecimiento, y la escala sale de `1 + (gap−4)/anchoCard`. El valor por defecto va acá dentro del var() y NO como declaración sobre .product-card. Puesto sobre la card gana sobre el que hereda de la grilla —una custom property declarada en el propio elemento pisa a la heredada— y todas las grillas terminarían escalando igual. Pasó: con el default en .product-card las cuatro grillas crecían un 4.5% sin importar lo que dijera su tramo. 1.045 aguanta la card más ancha del proyecto sin tocar a su vecina. */ @media (hover: hover) { .product-card.product-card.product-card:hover { z-index: 2; transform: scale(var(--card-hover-scale, 1.045)); border-color: rgba(255,255,255,0.12); box-shadow: 0 20px 60px rgba(0,0,0,0.4); } .product-card:hover .product-img::before { opacity: 1; } } /* Táctil: respuesta al tap en lugar de hover persistente */ @media (hover: none) { .product-card.product-card.product-card:active { transform: scale(0.99); } } /* --- Imagen --------------------------------------------------------- El producto es el protagonista: cuadrado, con aire alrededor y luz ambiental detrás. */ .product-img { width: 100%; aspect-ratio: 1; padding: 28px; background: linear-gradient(160deg, var(--surface) 0%, var(--surface-2) 100%); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-direction: column; gap: 8px; /* Estilo del placeholder de wireframe cuando aún no hay foto. ESTE 0.22 QUEDÓ AFUERA DEL BARRIDO A BLANCO DEL PROMPT 10, A PROPÓSITO: es el color de la palabra "[Imagen]" de las cards que todavía no tienen foto —hoy 7 de las 9 del catálogo— y está apagado porque es un marcador de AUSENCIA: tiene que retroceder. En blanco pleno, "IMAGEN" pasaría a ser lo más brillante de esas cards y el catálogo entero gritaría que le faltan fotos. No la "completes": el día que existan las 7 fotos, esta regla deja de verse sola. */ color: rgba(255,255,255,0.22); font-size: 10.5px; font-weight: 500; letter-spacing: 2.4px; text-transform: uppercase; } /* --- Badge de descuento --------------------------------------------- Sólo aparece cuando el producto tiene `precio_anterior` mayor que `precio`. Lo inyecta product-card.js desde los dos números; el porcentaje no se escribe a mano en ningún lado. EL FONDO ES BLANCO DESDE EL PROMPT 09, POR PEDIDO. Era var(--champagne), y el razonamiento con el que se eligió sigue abajo entero: no se borra porque sigue siendo válido si hay que volver, y volver es una palabra (`background: var(--champagne)`; la variable sigue en el :root de base.css justamente por esto). Lo que el cambio conserva y lo que no: · Conserva el argumento de la forma llena — el precio ahora también es blanco, igual que antes los dos eran champagne. El badge es superficie y el precio es texto, así que no compiten aunque compartan color. · No conserva la temperatura. El champagne era un acento cálido que leía a etiqueta de producto caro; el blanco puro sobre foto oscura pega más fuerte y puede pasar de acento a grito. Está medido en la bitácora del 09 con primeros planos de las 3 cards con descuento a 1440 y 390. Las razones del diseño ORIGINAL, para que no se cambien sin querer: · Champagne y no morado — el morado está reservado para lo interactivo (hover, botones, links, ver la nota de .product-info) y este cartel no se clickea. Vale igual para el blanco. · Champagne y no rojo — --red es el color de error del sistema, y un rojo saturado sobre esta paleta oscura lee a supermercado. El champagne lee a etiqueta de producto caro. · Forma llena y no texto — el precio también es champagne. Como el badge es una superficie llena y el precio es texto, no compiten aunque compartan color. · Izquierda y no derecha — el ojo entra por la izquierda, y la esquina derecha queda libre para un favorito más adelante. · Sombra neutra y no de color — hay un hallazgo `dark-glow` abierto justamente por sombras de color sobre fondo oscuro (ver bitácora). No se suma otra. No lleva `position: relative` en .product-img: ese elemento ya lo tiene (línea de arriba), y repetirlo sería una segunda declaración del mismo hecho. */ .product-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: #fff; color: var(--bg); font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 4px 10px; border-radius: 100px; /* Dos capas y no una. Con `.floating` la card pierde el padding de 28px y la foto llega hasta el borde, así que el badge dejó de apoyarse sobre el margen de la card y pasó a apoyarse sobre la foto misma. Medido contra el píxel de foto que queda debajo del centro de la pastilla, a 1440 y 390 px, con la pastilla BLANCA (los valores entre paréntesis son los de la champagne en el MISMO píxel, para que la comparación sea honesta): 9PM (foto oscura) 19.45:1 @1440 · 13.03:1 @390 (12.56 · 8.41) Eros (foto oscura) 16.09:1 @1440 · 15.23:1 @390 (10.39 · 9.83) Khamra (foto CLARA) 1.89:1 @1440 · 1.17:1 @390 ( 1.22 · 1.33) O sea: el blanco pega bastante MÁS fuerte sobre las fotos oscuras, y sobre la clara sigue sin tener silueta propia —a 390 incluso un poco peor que la champagne—. El texto adentro pasó de 12.98:1 a 20.10:1 y nunca fue el problema; lo que se pierde es la SILUETA de la pastilla, y por eso esta sombra sigue haciendo falta igual que antes. La primera capa es una sombra de contacto pegada al borde: define el contorno sobre cualquier fondo. La segunda es la difusa de antes. Se arregla con la sombra y no subiendo el color, que rompería el criterio de por qué el badge es champagne. Neutras las dos: hay un hallazgo `dark-glow` abierto por sombras de color. */ box-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 3px 10px rgba(0,0,0,0.4); /* .product-img define tipografía de placeholder (uppercase, tracking 2.4px, 10.5px) para el "[Imagen]". El badge es su hijo y la heredaría. */ text-transform: none; line-height: 1; } /* Foco de luz detrás del producto: da aire y profundidad sin tocar sus colores */ .product-img::before { content: ''; position: absolute; top: 44%; left: 50%; width: 82%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(1); border-radius: 50%; opacity: .75; background: radial-gradient(closest-side, rgba(168,104,240,0.16) 0%, rgba(110,44,190,0.07) 46%, transparent 74%); transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1); } /* Sombra de apoyo + degradado inferior */ .product-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 42% 7% at 50% 82%, rgba(0,0,0,0.5) 0%, transparent 70%), linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.22) 100%); } /* Foto del producto — z-index 1 para quedar sobre el foco radial (::before) y bajo la sombra de apoyo (::after). Sin filtros: los colores reales del frasco no se tocan. */ .product-img img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; object-position: center 46%; filter: drop-shadow(0 18px 22px rgba(0,0,0,0.55)); transition: transform .4s cubic-bezier(.4,0,.2,1); } /* --- Información ---------------------------------------------------- Jerarquía: nombre (protagonista) → precio (blanco, 17px/600) → marca (etiqueta silenciosa). El púrpura queda reservado para lo interactivo —hover, botón, foco—, no para etiquetar información: cuando todo es acento, nada destaca. */ .product-info { padding: 20px; position: relative; z-index: 1; } .product-brand { font-size: 10.5px; font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 8px; } /* --- Género -------------------------------------------------------- Comparte fila con la marca porque es del mismo orden de información —metadato de ficha, no descripción— y así no le suma altura a la card. */ .product-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .product-head .product-brand { margin-bottom: 0; } /* Blanco pleno por pedido (prompt 09, 2E). El color NO sale de --text-muted sino de un rgba() escrito a mano, así que el pase a blanco de 2D no la alcanzaba: hay que cambiarla acá. Consecuencia medida y aceptada: a 10px, esta etiqueta queda MÁS brillante que el nombre del perfume, que está en --text (#f0eaf8, 17.07:1 contra 20.10:1 del blanco). Lo que la mantiene en segundo plano es el tamaño y el tracking, no el color. Volver es `rgba(255,255,255,0.34)`. */ .product-gender { font-size: 10px; font-weight: 500; color: #fff; text-transform: uppercase; letter-spacing: 1.6px; white-space: nowrap; } /* --- Alineación del bloque inferior --------------------------------- Este andamiaje existía scopeado con :has(.product-accords) y se borró al sacar los acordes, con el argumento de que sin ellos todas las cards de una fila tenían contenido de alto fijo. Era falso: el NOMBRE también es de alto variable. A 390px "J'adore Parfum d'Eau" envuelve a dos líneas y "Libre Intense" a una, y sus botones quedaban 22px desfasados. A 1440 y 700 no se veía porque ahí los cinco nombres entran en una línea. Vuelve sin el :has(): ahora aplica a todas las cards, que es lo que corresponde — el problema nunca dependió de los acordes. Con flex y no con un min-height en el nombre: el min-height es una apuesta sobre cuántas líneas ocupa, y falla en cuanto el mismo nombre pasa a tres en una card más angosta. El margin-top: auto no necesita saber cuántas líneas hay. */ .product-card { display: flex; flex-direction: column; } .product-card .product-img { flex-shrink: 0; } .product-info { flex: 1; display: flex; flex-direction: column; } .product-info .product-bottom { margin-top: auto; } /* Peso 500, no 400: en Inter el nombre a peso normal se confundiría con el texto corriente de la card; la serif se distinguía por la familia. */ .product-name { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 500; color: var(--text); margin-bottom: 14px; line-height: 1.3; } /* El nombre del producto es un de verdad, no un div con onclick: así se alcanza con Tab, se abre en pestaña nueva con ctrl+clic, y si el JS falla la persona igual llega a producto.html. En la landing el modal le hace preventDefault; en el catálogo navega de verdad. Vivía en el