/* =========================================================
product-card.css — card densa tipo e-commerce
Info: badge, thumb, brand/stock, nombre, rating, precio+descuento,
cuotas, envío, CTA.
Dos variantes: default (dark, para grilla sobre azul) y --reboot
(white bg para grilla dentro de módulo magenta).
========================================================= */
.p-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border: 1px solid var(--line);
border-radius: var(--rad-sm);
color: var(--fg);
text-decoration: none;
overflow: hidden;
/* Elevación sutil en reposo → las cards "flotan" apenas sobre el fondo
(Apple/B&H). Sin esto se ven pegadas y planas. */
box-shadow: var(--shadow-card);
transition: transform var(--t-base) var(--ease-out),
border-color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out);
}
.p-card:hover {
transform: translateY(-4px);
border-color: var(--accent-text);
box-shadow: var(--shadow-lg);
}
.p-card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Drag de shelf: suspender hover natural en TODAS las cards
(evita el "hover hopping" cuando el cursor pasa por encima de
otras cards mientras arrastrás). La card que originó el drag
conserva su zoom hasta que se suelte el click. */
/* Drag CONFIRMADO (movedDistance > threshold): pointer-events: none
en las cards no-source. Browser literalmente no detecta hover →
ningún :hover triggerea. Solo se activa después del threshold para
no romper clicks cortos (que sí deben navegar al producto). */
body.is-card-dragging-confirmed .p-card { pointer-events: none; }
body.is-card-dragging-confirmed .p-card.is-drag-source { pointer-events: auto; }
/* Source mantiene su zoom siempre durante drag — independiente de si
el cursor está físicamente sobre ella. */
body.is-card-dragging .p-card.is-drag-source {
transform: translateY(-3px);
border-color: var(--accent-text);
box-shadow: var(--shadow-md);
}
body.is-card-dragging .p-card.is-drag-source .p-card__thumb img { transform: translateZ(0) scale(1.04); }
body.is-card-dragging .p-card.is-drag-source .p-card__illu { transform: scale(1.05); }
/* Badge — sticker rotado top-left */
.p-card__badge {
position: absolute;
top: var(--sp-3);
left: var(--sp-3);
padding: 4px 10px;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.22em;
text-transform: uppercase;
z-index: 2;
}
.p-card__badge--hot { background: var(--c-mag-500); color: var(--c-white); }
.p-card__badge--oferta { background: var(--c-cyan-400); color: var(--c-blue-900); }
.p-card__badge--llegada { background: var(--c-white); color: var(--c-blue-900); }
.p-card__badge--rank { background: var(--c-blue-900); color: var(--c-cyan-400); border: 1px solid var(--c-cyan-400); }
.p-card__badge--trend { background: var(--c-cyan-400); color: var(--c-blue-900); }
/* Outlet (línea propia, separada de Reboot): ámbar — señal universal de
"liquidación/atención", bien lejos del navy Reboot y del cyan oferta. */
.p-card__badge--outlet { background: var(--warning); color: var(--c-blue-950); }
/* Descuento % reubicado al footer (junto al precio). Ya no va sobre el
thumbnail → la foto respira como packshot, una sola señal por zona. */
/* Favorito aprobado: comparte la esquina con el descuento. En equipos con
hover hace un crossfade quieto; un favorito guardado permanece visible. */
.p-card__wish {
position: absolute;
top: 0;
right: 0;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
color: var(--c-blue-600);
cursor: pointer;
z-index: 3;
opacity: 0;
pointer-events: none;
transform: scale(0.78);
transform-origin: center;
transition:
opacity 180ms var(--ease-out),
transform 240ms var(--ease-out),
color var(--t-fast) var(--ease-out);
}
.p-card__wish svg {
width: 22px;
height: 22px;
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.78));
}
.p-card:hover .p-card__wish,
.p-card__wish:focus-visible,
.p-card__wish.is-active {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.p-card__wish:hover { color: var(--c-mag-500); }
.p-card__wish:focus-visible {
outline: 2px solid var(--c-cyan-400);
outline-offset: 2px;
}
.p-card__wish.is-active {
color: var(--c-mag-500);
}
.p-card__wish.is-active:hover { color: var(--c-mag-600); }
/* Heart burst al activar — sensación táctil de "lo agregué" */
.p-card__wish.just-activated {
animation: heart-burst 420ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
@keyframes heart-burst {
0% { transform: scale(1); }
35% { transform: scale(1.3); }
60% { transform: scale(0.92); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.p-card__wish,
.p-card__discount { transition: none; }
.p-card__wish.just-activated { animation: none; }
}
/* ════════════════════════════════════════════════════════════
CHIP FAMILY — base compartida para .p-card__sold y .p-card__tag
════════════════════════════════════════════════════════════
UNA fuente de verdad para la tipografía de etiquetas inline en
cards. Tocá acá y se actualizan tanto las social-proof (Recién
llegado, Armado por técnico, X visitas) como las operativas
(Solo X unidades, Envío gratis, Garantía). Las variantes solo
override color/weight/símbolo, no tipografía base.
Roles:
.p-card__sold → línea destacada ARRIBA del precio
.p-card__tag → chip en el row de tags ABAJO del delivery */
.p-card__sold,
.p-card__tag {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
/* Tabular nums → precios y contadores numéricos alineados en columnas,
emulando el beneficio del mono sin necesitar la fuente. */
font-variant-numeric: tabular-nums;
color: var(--fg-mute);
}
.p-card__sold b { color: var(--accent-text); font-weight: 800; }
/* Variantes de social proof — solo overridean color */
.p-card__sold--craft { color: var(--c-mag-500); }
.p-card__sold--fresh { color: var(--accent-text); }
/* Review quote — aparece solo en cards bestseller con review */
.p-card__quote {
padding: var(--sp-2) var(--sp-3);
background: color-mix(in srgb, var(--c-cyan-400) 10%, transparent);
border-left: 2px solid var(--c-cyan-400);
font-size: 0.76rem;
font-style: italic;
line-height: 1.35;
color: var(--fg);
}
.p-card__quote span {
display: block;
margin-top: 2px;
font-size: 0.62rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fg-dim);
}
/* Spec chips — fallback cuando la card no tiene señal social ni review.
Specs clave en chips de borde recto (brutalist, sin radius) que llenan
la zona media con info útil para decidir. Estilo deliberadamente
distinto a los tags de servicio (no uppercase, borde en vez de texto
suelto) para que se lean como "ficha técnica", no como promesa. */
.p-card__specs {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.p-card__spec {
font-size: 0.64rem;
font-weight: 600;
line-height: 1.3;
padding: 3px 8px;
background: rgba(10, 27, 110, 0.035);
border: 1px solid var(--line);
color: var(--fg-mute);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Chip de detalle (OUTLET) — dice qué tiene el producto de lote
("Outlet · 2 líneas leves en pantalla"). Solo la línea Outlet lo usa;
Reboot y nuevos llevan la zona media normal. Va primero, en ámbar
(la familia del badge Outlet), lejos del magenta que es de Reboot.
white-space normal: los detalles largos wrappean, no desbordan. */
.p-card__spec--estado {
background: var(--warning-soft);
border-color: color-mix(in srgb, var(--warning) 45%, transparent);
color: var(--warning-text);
font-weight: 700;
white-space: normal;
}
/* Delivery estimate — línea pequeña después de precio */
.p-card__delivery {
font-size: 0.78rem;
font-weight: 500;
color: var(--fg-mute);
line-height: 1.3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: color-mix(in srgb, var(--c-cyan-400) 8%, transparent);
border-left: 2px solid var(--c-cyan-400);
border-radius: 0 var(--rad-sm) var(--rad-sm) 0;
align-self: flex-start;
}
.p-card__delivery b { color: var(--fg); font-weight: 700; }
.p-card__delivery-icon {
color: var(--accent-text);
flex-shrink: 0;
}
.p-card__delivery-free {
color: var(--accent-text);
font-weight: 700;
}
/* ==== Thumbnail — fondo BLANCO estilo catálogo profesional ==== */
.p-card__thumb {
position: relative;
aspect-ratio: 1 / 1;
/* BLANCO PURO, no degradé. Es lo que vuelve cuadrada cualquier foto:
las fotos del proveedor vienen recortadas sobre blanco, así que si el
cuadro también es blanco, el relleno de una foto horizontal se funde con
el fondo de la propia foto y no se ve dónde termina una y empieza el otro.
Con el degradé "spotlight" que había antes el corte quedaba a la vista —
una banda gris arriba y abajo de las impresoras y los teclados.
Es exactamente "rellenar con blanco hasta que sea cuadrada", pero sin
tocar ni un archivo: lo hace el navegador al dibujar. */
background: var(--c-white);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* La línea va por dentro (box-shadow), NO como borde.
Con `border-bottom` y box-sizing:border-box el cuadro medía 289×289 por
fuera pero 289×288 por dentro: la foto quedaba centrada en una caja que no
era cuadrada y caía a MEDIO PIXEL. Al agrandarse en hover y volver, ese
medio pixel redondeaba distinto — el "ajuste de un pixel" que se veía al
sacar el mouse. El box-shadow se dibuja igual pero no ocupa lugar, así el
interior queda exactamente cuadrado y la foto en pixeles enteros. */
box-shadow: inset 0 -1px 0 var(--line-soft);
transition: background var(--t-base) var(--ease-out);
}
/* El hover NO toca el fondo: cualquier tinte delataría de nuevo el borde de
las fotos horizontales. El "se enciende" lo dan el borde y la sombra de la
card, que ya lo hacen. */
/* SIN sombra de piso. Había una elipse fija abajo del cuadro que simulaba un
packshot de estudio, y funcionaba mientras la foto fuera cuadrada. Con fotos
horizontales (impresoras, teclados, monitores) `object-fit: contain` centra
la imagen y deja aire abajo: la elipse quedaba flotando sola en ese vacío,
despegada del producto.
Puede volver cuando todas las fotos estén normalizadas a cuadrado — ahí la
posición vuelve a ser predecible. Hasta entonces, mejor sin sombra que con
una sombra suelta. */
/* Variante MINI — estanterías de la ficha ("Del mismo rubro", "También
vieron"). Es la misma card, sin botón de Agregar: son para seguir mirando,
no para comprar desde ahí. Sin el botón, el pie no necesita separarse. */
.p-card--mini .p-card__footer {
border-top: 0;
padding-top: 0;
margin-top: auto;
}
/* Cambio de moneda: el precio nuevo "asienta" en vez de aparecer de golpe.
Corto y sólo opacity+transform (GPU) — al cambiar de moneda se reescriben
todos los precios de la pantalla a la vez y tiene que salir barato.
Lo dispara acusarCambio() en product-card.js, sólo sobre lo visible. */
@keyframes precio-asienta {
from { opacity: 0.15; transform: translateY(3px); }
to { opacity: 1; transform: translateY(0); }
}
.is-precio-cambiando {
animation: precio-asienta 260ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
.is-precio-cambiando { animation: none; }
}
.p-card__thumb img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--sp-4);
transition: transform var(--t-slow) var(--ease-out), opacity var(--t-base) var(--ease-out);
/* Capa propia SIEMPRE, no sólo mientras dura la animación.
Con `transform: none` en reposo, el navegador crea la capa al empezar el
hover y la destruye al terminar; en ese ida y vuelta re-dibuja la foto y
puede caer medio pixel corrida — el saltito al sacar el mouse. Dejando un
transform neutro puesto, la capa ya existe y no hay nada que rehacer.
(Va junto con el interior cuadrado del thumb: eran las dos mitades del
mismo problema.) */
transform: translateZ(0);
backface-visibility: hidden;
}
/* Hover preview: segunda imagen aparece on hover (B&H pattern) */
.p-card__thumb-alt {
position: absolute !important;
inset: 0;
z-index: 2;
opacity: 0;
}
.p-card:hover .p-card__thumb-alt { opacity: 1; }
@media (hover: none) {
.p-card__thumb-alt { display: none; }
}
.p-card:hover .p-card__thumb img { transform: translateZ(0) scale(1.04); }
/* =========================================================
GALERÍA ROTATIVA EN HOVER — cualquier card con ≥2 fotos.
Reposo: la foto base. Hover: las fotos rotan con fundido
(misma mecánica que el ciclo de los combos). Fotos extra
lazy → sin costo de carga inicial; solo anima la card que
está bajo el mouse (opacity = GPU). z-index 1 → queda bajo
badge y descuento (z-index 2).
Anti-flash SIN dejarla de fondo: la foto base aguanta visible los
primeros instantes del hover —mientras el ciclo sube de opacidad— y
recién ahí se apaga. Así no aparece el fondo blanco en la transición,
que era el motivo de dejarla prendida, pero tampoco se la ve asomar
por detrás cuando la foto de arriba es más chica y no cubre todo el
cuadro (las fotos del proveedor vienen en proporciones distintas).
Al salir del hover vuelve sin demora, así tampoco queda hueco.
========================================================= */
.p-card__thumb-base {
transition: transform var(--t-slow) var(--ease-out),
opacity var(--t-base) var(--ease-out);
}
/* 300ms: el ciclo tarda ~240ms en llegar a opacidad plena (ver los
keyframes de abajo), así que para cuando la base se va, arriba ya hay
una foto entera. */
.p-card:hover .p-card__thumb-base {
opacity: 0;
transition-delay: 300ms;
}
/* En pantalla táctil no hay hover y el ciclo está oculto: la base es lo
único que se ve y no se apaga nunca. */
@media (hover: none) {
.p-card:hover .p-card__thumb-base { opacity: 1; transition-delay: 0s; }
}
.p-card__gal {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base) var(--ease-out);
}
.p-card__gal img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--sp-4);
opacity: 0;
}
.p-card:hover .p-card__gal { opacity: 1; }
@keyframes pcardGal2 { 0% { opacity: 0; } 6% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pcardGal3 { 0% { opacity: 0; } 5% { opacity: 1; } 33.3% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pcardGal4 { 0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; } 100% { opacity: 0; } }
.p-card:hover .p-card__gal--n2 img { animation: pcardGal2 3s infinite; }
.p-card:hover .p-card__gal--n2 img:nth-child(2) { animation-delay: 1.5s; }
.p-card:hover .p-card__gal--n3 img { animation: pcardGal3 4.5s infinite; }
.p-card:hover .p-card__gal--n3 img:nth-child(2) { animation-delay: 1.5s; }
.p-card:hover .p-card__gal--n3 img:nth-child(3) { animation-delay: 3s; }
.p-card:hover .p-card__gal--n4 img { animation: pcardGal4 6s infinite; }
.p-card:hover .p-card__gal--n4 img:nth-child(2) { animation-delay: 1.5s; }
.p-card:hover .p-card__gal--n4 img:nth-child(3) { animation-delay: 3s; }
.p-card:hover .p-card__gal--n4 img:nth-child(4) { animation-delay: 4.5s; }
@media (prefers-reduced-motion: reduce) {
.p-card:hover .p-card__gal img { animation: none; }
.p-card:hover .p-card__gal img:first-child { opacity: 1; }
}
@media (hover: none) { .p-card__gal { display: none; } }
/* SVG illustration (cuando no hay imagen real) — fondo blanco */
.p-card__illu {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--t-slow) var(--ease-out);
}
.p-card__illu svg {
width: 100%;
height: 100%;
max-width: 200px;
max-height: 160px;
}
.p-card:hover .p-card__illu { transform: scale(1.05); }
/* ==== Body ==== */
/* En la grilla el envoltorio de información es TRANSPARENTE: sus hijos se
apilan exactamente como antes, nada cambia. Existe para que la vista lista
pueda tratar "lo que informa" y "lo que cobra" como dos bloques. */
.p-card__info { display: contents; }
.p-card__body {
padding: var(--sp-3) var(--sp-4);
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.p-card__meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-2);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-dim);
}
.p-card__brand { color: var(--accent); }
.p-card__sku {
font-size: 0.56rem;
letter-spacing: 0.1em;
color: var(--fg-dim);
font-weight: 600;
}
.p-card__name {
font-family: var(--font-display);
font-weight: 800;
font-size: var(--fs-base);
line-height: 1.2;
letter-spacing: -0.005em;
min-height: 2.4em; /* dos líneas alineadas */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.p-card__short {
font-size: 0.76rem;
color: var(--fg-mute);
line-height: 1.35;
min-height: 2.6em;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ==== Rating ==== */
.p-card__rating {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--fg-mute);
font-variant-numeric: tabular-nums;
}
/* Estrellas amarillas: convención universal en e-commerce.
Cualquier color distinto al amarillo se lee como "decoración",
no como rating. Camila + Renata convergen en este punto. */
.p-card__stars {
color: var(--warning);
letter-spacing: 1px;
font-size: 0.82rem;
}
.p-card__rating-count { color: var(--fg-dim); }
/* ==== Footer de compra — bloque de precio vertical ====
Ancla abajo (margin-top:auto). Jerarquía premium: old-price tachado
ARRIBA (chico, mudo), precio hero, y "Ahorrás X" abajo (verde). El
botón full-width pegado cierra el bloque de compra. */
.p-card__footer {
margin-top: auto;
padding-top: var(--sp-2);
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.p-card__price-block {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1;
}
/* Old-price: gris mudo, tachado fino. Recede para que el hero mande. */
.p-card__old-price {
font-family: var(--font-display);
font-size: 0.76rem;
font-weight: 600;
color: var(--fg-dim);
text-decoration: line-through;
text-decoration-thickness: 1.5px;
text-decoration-color: rgba(10, 27, 110, 0.28);
font-variant-numeric: tabular-nums;
margin-bottom: 2px;
}
/* Precio hero — grande, magenta, tracking ajustado. */
.p-card__price {
display: inline-flex;
align-items: baseline;
gap: 4px;
color: var(--c-mag-500);
font-family: var(--font-display);
font-weight: 900;
font-size: var(--fs-3xl);
letter-spacing: -0.035em;
font-variant-numeric: tabular-nums;
line-height: 0.92;
transition: color var(--t-fast) var(--ease-out);
}
.p-card:hover .p-card__price { color: var(--c-mag-400); }
.p-card__price-num { font-weight: 900; font-size: 1em; }
/* USD chico, fino y mudo — a la baseline, separado del número. */
.p-card__price-ccy {
font-weight: 700;
font-size: 0.38em;
letter-spacing: 0.09em;
opacity: 0.5;
}
.p-card__price-secondary {
margin-top: 5px;
color: var(--c-blue-800);
font-family: var(--font-display);
font-size: var(--fs-sm);
font-weight: 800;
letter-spacing: 0.02em;
line-height: 1.1;
}
/* ==== Beneficios debajo del precio ====
Pill principal (la señal más relevante, con texto) + puntitos de color
para los OTROS beneficios que incluye. Hover/foco de un punto revela su
nombre. Así se ve de un vistazo todo lo que trae sin saturar. */
.p-card__benefits {
margin-top: 8px;
display: flex;
align-items: center;
gap: 7px;
flex-wrap: wrap;
}
.p-card__pill {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
/* Sin radius — rectángulo afilado, mismo lenguaje que el chip de
descuento y los badges. Integra con el brutalismo de la tienda. */
border-radius: 0;
white-space: nowrap;
}
.p-card__pill b { font-weight: 800; }
.p-card__pill::before {
content: '';
width: 11px;
height: 11px;
display: inline-block;
background: currentColor;
-webkit-mask: var(--pill-icon) center / contain no-repeat;
mask: var(--pill-icon) center / contain no-repeat;
flex-shrink: 0;
}
/* Variantes — color (bg tinte + texto) + ícono via --pill-icon */
.p-card__pill--save {
background: color-mix(in srgb, var(--success-text) 13%, transparent);
color: var(--success-text);
--pill-icon: url("data:image/svg+xml;utf8,");
}
.p-card__pill--ship {
background: color-mix(in srgb, var(--c-cyan-600) 14%, transparent);
color: var(--c-cyan-600);
--pill-icon: url("data:image/svg+xml;utf8,");
}
.p-card__pill--stock {
background: var(--warning-soft);
color: var(--warning-text);
--pill-icon: url("data:image/svg+xml;utf8,");
}
.p-card__pill--warranty {
background: color-mix(in srgb, var(--accent) 11%, transparent);
color: var(--accent-text);
--pill-icon: url("data:image/svg+xml;utf8,");
}
.p-card__pill--out {
background: color-mix(in srgb, var(--fg-dim) 14%, transparent);
color: var(--fg-dim);
--pill-icon: url("data:image/svg+xml;utf8,");
}
.p-card__pill--avail {
background: color-mix(in srgb, var(--success-text) 11%, transparent);
color: var(--success-text);
--pill-icon: url("data:image/svg+xml;utf8,");
}
/* Puntitos de color — los OTROS beneficios. Cada color = un beneficio.
Hover/foco revela el nombre en un tooltip arriba. */
.p-card__dots {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* Cuadraditos (no círculos) → blocky, on-brand brutalista. */
.p-card__dot {
position: relative;
width: 9px;
height: 9px;
border-radius: 0;
/* Sin cursor:help (el "?" se siente viejo): hereda la manito del link de
la card. El tooltip aparece igual al pasar el mouse. */
transition: transform var(--t-fast) var(--ease-out);
}
.p-card__dot:hover { transform: scale(1.3); }
.p-card__dot--save { background: var(--success); }
.p-card__dot--ship { background: var(--c-cyan-500); }
.p-card__dot--stock { background: var(--warning); }
.p-card__dot--warranty { background: var(--c-blue-600); }
.p-card__dot--avail { background: var(--success); }
/* Tooltip: NO usa ::after (se corta con overflow:hidden del card).
Lo maneja JS con un div flotante position:fixed igual que ccy-tip. */
.dot-tip {
position: fixed;
z-index: var(--z-toast);
background: var(--c-blue-950);
color: var(--c-white);
font-family: var(--font-display);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
padding: 5px 10px;
/* Afilado + borde cyan a la izquierda → brutalista, no pill suave. */
border-radius: 0;
border-left: 2px solid var(--c-cyan-400);
box-shadow: 4px 4px 0 rgba(6, 15, 71, 0.18);
pointer-events: none;
opacity: 0;
/* translateY(-100%) sube el tooltip por su propia altura → el borde
inferior queda en el top que fija JS, no el borde superior. */
transform: translateX(-50%) translateY(calc(-100% + 4px));
transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.dot-tip.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(-100%);
}
/* Tooltip informativo (frase) — hermano del dot-tip pero con texto normal
y más ancho. Ej.: aclaración de que el % es vs. el precio de lanzamiento
en las cards Reboot. */
/* ═══ TOOLTIP DE INFO (garantía, retiro, envío…) ═══════════════
Era una caja oscura suelta: flotaba cerca del texto sin decir de cuál
salía, y si el elemento estaba arriba de todo se cortaba contra el
borde de la ventana.
Ahora tiene PUNTA —se ve qué está explicando— y se da vuelta solo
para abajo cuando no hay lugar arriba (lo decide floating-tip.js con
la clase .is-below). Sigue con esquinas rectas, como toda la tienda. */
.info-tip {
position: fixed;
z-index: var(--z-toast);
max-width: 250px;
background: var(--c-blue-950);
color: var(--c-white);
font-family: var(--font-display);
font-size: 0.74rem;
font-weight: 600;
line-height: 1.42;
letter-spacing: 0.005em;
text-align: left;
white-space: normal;
padding: 9px 12px;
border-radius: 0;
border-left: 2px solid var(--c-cyan-400);
box-shadow: 0 10px 26px rgba(6, 15, 71, 0.30),
0 2px 6px rgba(6, 15, 71, 0.22);
pointer-events: none;
opacity: 0;
transform: translateX(-50%) translateY(calc(-100% + 4px));
transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out);
}
/* La punta: cuadrado rotado del mismo color, cosido al borde inferior. */
.info-tip::after {
content: '';
position: absolute;
left: 50%;
bottom: -4px;
width: 8px;
height: 8px;
background: inherit;
transform: translateX(-50%) rotate(45deg);
}
.info-tip.is-visible {
opacity: 1;
transform: translateX(-50%) translateY(-100%);
}
/* Sin lugar arriba: se muestra debajo y la punta se muda al techo. */
.info-tip.is-below {
transform: translateX(-50%) translateY(-4px);
}
.info-tip.is-below.is-visible {
transform: translateX(-50%) translateY(0);
}
.info-tip.is-below::after {
bottom: auto;
top: -4px;
}
@media (prefers-reduced-motion: reduce) {
.info-tip { transition-duration: 1ms; }
}
/* Mobile: en cards 2-up (más angostas) un pill largo como
"GARANTÍA OFICIAL · 3 AÑOS" desbordaba (nowrap). Lo dejamos achicar y
wrappear para que entre siempre. */
@media (max-width: 480px) {
.p-card__pill {
font-size: 0.54rem;
letter-spacing: 0.03em;
padding: 3px 7px 3px 6px;
white-space: normal;
line-height: 1.2;
}
.p-card__pill::before { width: 9px; height: 9px; }
}
/* ==== Compat: chip de descuento sobre thumbnail ====
Usado por el corner discount de home/listing y por product.js
(relacionados). El .p-card__price-block lo define el footer de arriba
(columna) y vale para todos los renderers. */
.p-card__discount {
position: absolute;
top: 0;
right: 0;
background: var(--c-mag-500);
color: var(--c-white);
padding: 6px 10px;
font-family: var(--font-display);
font-weight: 900;
font-size: 0.82rem;
letter-spacing: -0.01em;
z-index: 2;
transition: opacity 180ms var(--ease-out);
}
.p-card:hover .p-card__discount,
.p-card:focus-within .p-card__discount {
opacity: 0;
pointer-events: none;
}
/* En táctil no hay hover persistente: se conservan visibles favorito y
descuento, desplazando el descuento para que no se tapen. */
@media (hover: none), (pointer: coarse) {
.p-card__wish {
opacity: 1;
pointer-events: auto;
transform: scale(1);
transition: none;
}
.p-card__discount,
.p-card:hover .p-card__discount,
.p-card:focus-within .p-card__discount {
right: 44px;
opacity: 1;
pointer-events: auto;
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.p-card__discount { transition: none; }
}
/* ==== Shipping + stock row ==== */
.p-card__tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* .p-card__tag base ahora vive en "Chip family" arriba — sin duplicación. */
.p-card__tag--shipping { color: var(--success-text); }
.p-card__tag--shipping::before {
content: '';
width: 14px;
height: 14px;
display: inline-block;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
vertical-align: -2px;
}
.p-card__tag--stock { color: var(--success-text); }
.p-card__tag--stock::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
}
.p-card__tag--stock-low { color: var(--warning-text); }
.p-card__tag--stock-low::before {
background: var(--warning);
/* Pulse sutil para alertar urgencia (Mateo motion idea) */
animation: stock-pulse 1.8s ease-in-out infinite;
}
@keyframes stock-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.55; }
}
@media (prefers-reduced-motion: reduce) {
.p-card__tag--stock-low::before { animation: none; }
}
/* --urgent: SIN color override → hereda el gris del chip base. El
triángulo con '!' (::before) hace todo el trabajo de atención. */
.p-card__tag--out { color: var(--fg-dim); }
.p-card__tag--urgent::before {
content: '';
width: 14px; height: 14px;
display: inline-block;
margin-right: 4px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
vertical-align: -2px;
}
.p-card__tag--warranty::before {
content: '';
width: 14px; height: 14px;
display: inline-block;
background: var(--accent-text);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
vertical-align: -2px;
}
/* ==== CTA Add to cart ==== */
.p-card__cta {
/* Dentro del footer (flex column gap sp-3); el footer ancla abajo. */
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px var(--sp-3);
min-height: 44px;
background: var(--c-cyan-400);
color: var(--c-blue-900);
border-radius: var(--rad-sm);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
transition: background var(--t-fast) var(--ease-out);
}
.p-card__cta:hover { background: var(--c-cyan-300); }
.p-card__cta:active { transform: scale(0.96); }
.p-card__cta:disabled { background: var(--bg-subtle); color: var(--fg-dim); cursor: not-allowed; transform: none; }
.p-card__cta:disabled:hover { background: var(--bg-subtle); }
/* Success state — feedback brevísimo después de "Agregar" */
.p-card__cta.is-added {
background: var(--success);
color: var(--c-white);
pointer-events: none;
animation: cta-success-pop 360ms cubic-bezier(0.3, 0.9, 0.3, 1);
}
.p-card__cta.is-added svg { color: currentColor; }
@keyframes cta-success-pop {
0% { transform: scale(1); }
40% { transform: scale(0.96); }
100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.p-card__cta.is-added { animation: none; }
.p-card__cta:active { transform: none; }
}
.p-card__cta::before {
content: '+';
font-family: var(--font-display);
font-weight: 900;
font-size: 1.1rem;
letter-spacing: 0;
}
/* Nota: la vieja "VARIANTE REBOOT" (card blanca invertida + CTA navy, que
vivía dentro del módulo magenta) se retiró. El módulo ahora enmarca la
grilla con layout (banner magenta + solape, ver home.css) y usa la MISMA
card que el resto de la tienda: .p-card--used (tinte + badge + CTA cyan). */
/* Badge Reboot (en lugar de los de nuevo/oferta) */
.p-card__badge--reboot {
background: var(--c-blue-900);
color: var(--c-white);
display: inline-flex;
align-items: center; /* centra ícono y texto, cada uno por su lado */
gap: 4px;
line-height: 1;
}
.p-card__badge--reboot::before {
content: '';
width: 20px; height: 12px;
background-color: var(--c-mag-500);
-webkit-mask: url(../../assets/reboot-icon.svg) center / contain no-repeat;
mask: url(../../assets/reboot-icon.svg) center / contain no-repeat;
}
/* El ícono ya lo centra align-items. El texto en MAYÚSCULAS se apoya arriba
de su caja (la parte de abajo, para colas de g/y/p, queda vacía), así que
se ve ~1px alto. Lo bajamos lo justo SOLO a él para centrarlo de verdad. */
.p-card__badge--reboot .p-card__badge-txt { position: relative; top: 1px; }
/* =========================================================
.p-card--used — LA card de un producto Reboot (usado), ÚNICA en toda
la tienda: listados, ofertas, búsqueda y el módulo Reboot de la home.
Se distingue por badge "Reboot" + tinte MUY sutil de superficie (V3);
el CTA queda cyan como cualquier card. El tinte se calcula sobre
--bg-elevated (dark es legacy). En el módulo de la home la grilla
solapa el banner magenta (layout D2 en home.css) — la card no cambia.
========================================================= */
.p-card--used {
background: color-mix(in srgb, var(--c-mag-500) 5%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--c-mag-500) 22%, transparent);
}
/* El hover lleva el borde al azul de acento como cualquier card
(misma specificity → hace falta reafirmarlo acá). */
.p-card--used:hover {
border-color: var(--accent-text);
}
/* =========================================================
.p-card--outlet — la card de un producto OUTLET (lote de
importador, línea SEPARADA de Reboot). Mismo patrón que
.p-card--used pero en ámbar: tinte sutil de superficie +
badge "Outlet" + chip de detalle avisado si lo hay.
========================================================= */
.p-card--outlet {
background: color-mix(in srgb, var(--warning) 6%, var(--bg-elevated));
border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}
.p-card--outlet:hover {
border-color: var(--accent-text);
}
/* En grillas normales el CTA de Reboot NO se toca → queda cyan como
cualquier card (el navy vive solo en el módulo; ver comentario arriba).
El diferenciador acá es el tinte + el badge, no el botón. */
/* =========================================================
COMPACT CARD — para best sellers en módulos pequeños
========================================================= */
.p-card--compact .p-card__body { padding: var(--sp-2) var(--sp-3); }
.p-card--compact .p-card__short,
.p-card--compact .p-card__tags { display: none; }
.p-card--compact .p-card__name {
font-size: var(--fs-sm);
min-height: auto;
-webkit-line-clamp: 1;
line-clamp: 1;
}
.p-card--compact .p-card__price { font-size: var(--fs-xl); }
.p-card--compact .p-card__footer { gap: var(--sp-2); padding-top: var(--sp-2); }
.p-card--compact .p-card__cta { padding: 8px; font-size: 0.66rem; }
/* =========================================================
FLAGS DE CONTENIDO DE CARD — decisión del dueño (antes vivían
en el CSS inyectado por el dev-panel font-tester, hoy retirado).
La factory renderea estos nodos pero el diseño aprobado los
oculta. Para reactivar uno: borrar su línea de acá.
========================================================= */
.p-card__quote { display: none; }
.p-card__sku { display: none; }
.p-card__rating { display: none; }
.p-card__sold { display: none; }
.p-card__delivery { display: none; }
.p-card__installments { display: none; }
.p-card__tag--stock,
.p-card__tag--urgent,
.p-card__tag--out { display: none; }
/* =========================================================
COMBOS (.p-card--combo) — thumb collage + ciclo en hover.
El combo es un producto más (isCombo) con pieces[]: el thumb
muestra las fotos ENTERAS solapadas como prints (marco blanco
+ sombra); en hover cede a la foto completa de cada pieza
rotando cada 1,5s. Flotación sutil solo-GPU (transform).
========================================================= */
.p-card__badge--combo { background: var(--c-blue-600); color: var(--c-white); }
.p-card__cmb-collage {
position: absolute;
inset: 0;
z-index: 1;
/* El collage NUNCA cambia su opacity: queda siempre visible y QUIETO. Es el
cycle (con su fondo blanco) el que lo tapa/destapa por encima en hover. Al
no animar la opacity de ESTE elemento —el que tiene las fotos en % frac-
cionarios— no se re-rasteriza nunca → se elimina el "ajuste al pixel". */
backface-visibility: hidden;
}
.p-card__cmb-item {
position: absolute;
background: #fff;
border: 3px solid #fff;
box-shadow: 0 5px 14px rgba(10, 27, 110, 0.16);
overflow: hidden;
/* Rasterización consistente en su propia capa → sin snap sub-pixel. */
backface-visibility: hidden;
}
/* Capas superiores proyectan mas: vende la pila */
.p-card__cmb-item:nth-child(2) { box-shadow: 0 7px 18px rgba(10, 27, 110, 0.20); }
.p-card__cmb-item:nth-child(3) { box-shadow: 0 9px 22px rgba(10, 27, 110, 0.24); }
.p-card__cmb-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: #fff;
}
/* n2: principal + acompanante — solape franco, con aire a los bordes */
.p-card__cmb-collage--n2 .p-card__cmb-item:nth-child(1) { left: 4%; top: 6%; width: 62%; height: 80%; z-index: 1; }
.p-card__cmb-collage--n2 .p-card__cmb-item:nth-child(2) { right: 4%; bottom: 7%; width: 44%; height: 52%; z-index: 2; }
/* n3: principal grande; las dos chicas de la derecha se SOLAPAN entre si
(pila) y montan sobre la principal — margenes respirando en los bordes */
.p-card__cmb-collage--n3 .p-card__cmb-item:nth-child(1) { left: 3%; top: 7%; width: 55%; height: 80%; z-index: 1; }
.p-card__cmb-collage--n3 .p-card__cmb-item:nth-child(2) { right: 6%; top: 7%; width: 40%; height: 46%; z-index: 2; }
.p-card__cmb-collage--n3 .p-card__cmb-item:nth-child(3) { right: 3%; top: 49%; width: 40%; height: 46%; z-index: 3; }
.p-card__cmb-qty {
position: absolute;
right: 4px;
bottom: 4px;
background: var(--c-blue-900);
color: var(--c-white);
font-family: var(--font-display);
font-weight: 800;
font-size: 0.58rem;
line-height: 1;
padding: 2px 5px;
font-variant-numeric: tabular-nums;
}
/* Flotación: cada print deriva ±1.6% en Y, lenta y desincronizada.
Solo transform (GPU). En touch, más lenta; con reduced-motion, quieta. */
@keyframes pcardCmbFloat {
/* translate3d (no translateY) → fuerza capa GPU permanente en cada foto,
evitando el re-render al pixel cuando cambia la opacity del collage. */
from { transform: translate3d(0, -1.6%, 0); }
to { transform: translate3d(0, 1.6%, 0); }
}
.p-card--combo .p-card__cmb-item { animation: pcardCmbFloat 7s ease-in-out infinite alternate; }
/* Fuera de pantalla el drift se pausa (lo marca un IntersectionObserver en
main.js) → cero costo cuando la sección no se ve. */
.p-card--combo.is-offscreen .p-card__cmb-item { animation-play-state: paused; }
.p-card--combo .p-card__cmb-item:nth-child(2) { animation-duration: 9s; animation-delay: -3s; animation-direction: alternate-reverse; }
.p-card--combo .p-card__cmb-item:nth-child(3) { animation-duration: 8s; animation-delay: -5s; }
/* Hover: el collage cede al ciclo pieza-por-pieza (1,5s por foto). */
.p-card__cmb-cycle {
position: absolute;
inset: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-base) var(--ease-out);
background: radial-gradient(118% 100% at 50% 32%, var(--c-white) 0%, var(--c-white) 42%, #eef1f8 100%);
}
.p-card__cmb-cycle img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--sp-4);
opacity: 0;
}
/* En hover el cycle sube por encima y tapa el collage con su fondo blanco;
el collage NO se toca (queda quieto debajo). Al salir, el cycle se va y
destapa el collage intacto — sin fade ni re-encaje del collage. */
.p-card--combo:hover .p-card__cmb-cycle { opacity: 1; }
/* Las fotos de combos NO hacen el zoom-hover del packshot normal (scale 1.04):
si escalaran, al destaparse el collage se vería el "asentamiento" del scale
volviendo a 1. El collage debe quedar 100% inmóvil. */
.p-card--combo:hover .p-card__cmb-item img,
.p-card--combo:hover .p-card__cmb-cycle img { transform: none; }
@keyframes pcardCmbFade3 { 0% { opacity: 0; } 5% { opacity: 1; } 33.3% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; } }
@keyframes pcardCmbFade2 { 0% { opacity: 0; } 6% { opacity: 1; } 50% { opacity: 1; } 58% { opacity: 0; } 100% { opacity: 0; } }
.p-card--combo:hover .p-card__cmb-cycle--n3 img { animation: pcardCmbFade3 4.5s infinite; }
.p-card--combo:hover .p-card__cmb-cycle--n3 img:nth-child(2) { animation-delay: 1.5s; }
.p-card--combo:hover .p-card__cmb-cycle--n3 img:nth-child(3) { animation-delay: 3s; }
.p-card--combo:hover .p-card__cmb-cycle--n2 img { animation: pcardCmbFade2 3s infinite; }
.p-card--combo:hover .p-card__cmb-cycle--n2 img:nth-child(2) { animation-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) {
.p-card--combo .p-card__cmb-item { animation: none; }
.p-card--combo:hover .p-card__cmb-cycle img { animation: none; }
.p-card--combo:hover .p-card__cmb-cycle img:first-child { opacity: 1; }
}
@media (hover: none) {
.p-card__cmb-cycle { display: none; }
.p-card--combo .p-card__cmb-item { animation-duration: 11s; }
}
/* Combos: el tachado lleva etiqueta "por separado" en la misma línea
(el número solo no dice qué es). Gris mudo, no compite con el precio. */
.p-card__old-line { display: inline-flex; align-items: baseline; gap: 0.35em; }
.p-card__old-label {
font-size: 0.6rem;
font-weight: 600;
color: var(--fg-dim);
letter-spacing: 0.02em;
white-space: nowrap;
}