/* /src/styles/comprar.css */
.page-comprar {
--ck-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ck-radio: var(--radius-sm);
--ck-fondo: color-mix(in srgb, var(--bg-card) 34%, var(--bg-primary));
--ck-hondo: color-mix(in srgb, var(--bg-card) 18%, var(--bg-primary));
--ck-tarjeta: color-mix(in srgb, var(--bg-card) 55%, var(--bg-primary));
--ck-campo: color-mix(in srgb, var(--bg-card) 75%, var(--bg-primary));
--ck-filo: color-mix(in srgb, var(--border-color) 70%, var(--bg-card));
--ck-filo-claro: color-mix(in srgb, var(--text-secondary) 45%, var(--bg-card));
--ck-cian: var(--accent-games);
--ck-tinta: #ffffff;
--ck-tinta-2: color-mix(in srgb, var(--text-secondary) 80%, #ffffff);
--ck-tinta-3: var(--text-muted);
display: block;
background: var(--ck-fondo);
color: var(--ck-tinta);
font-family: var(--ck-sans);
overflow-x: clip;
}
.page-comprar [hidden] { display: none !important; }
.page-comprar #comprar-catalogo { scroll-margin-top: calc(var(--navbar-height, 72px) + var(--space-md)); }
.page-comprar p,
.page-comprar h1,
.page-comprar h2,
.page-comprar h3,
.page-comprar li,
.page-comprar button,
.page-comprar select,
.page-comprar input {
font-family: var(--ck-sans);
letter-spacing: normal;
text-shadow: none;
line-height: 1.35;
}
.page-comprar p { font-size: 14px; color: var(--ck-tinta-2); }
.page-comprar a:hover { color: inherit; }
.page-comprar .ico { display: block; flex: none; shape-rendering: crispEdges; }
.comprar-buscador {
position: relative;
display: flex;
align-items: center;
}
.comprar-buscador-lupa {
position: absolute;
left: 12px;
color: var(--ck-tinta);
pointer-events: none;
}
.page-comprar #comprar-buscar {
width: 100%;
height: 32px;
padding: 0 12px 0 40px;
background: var(--ck-campo);
border: 1px solid var(--ck-filo);
border-radius: var(--ck-radio);
color: var(--ck-tinta);
font-size: 14px;
}
.page-comprar #comprar-buscar::placeholder { color: var(--ck-tinta-3); }
.page-comprar #comprar-buscar:focus-visible { border-color: var(--ck-cian); }
.comprar-region { position: relative; }
.comprar-region-btn {
display: inline-flex;
align-items: center;
gap: 8px;
height: 32px;
padding: 0 4px 0 8px;
color: var(--ck-tinta-2);
font-size: 13px;
white-space: nowrap;
}
.comprar-region-btn:hover { color: var(--ck-tinta); }
.comprar-region-btn[aria-expanded="true"] .comprar-region-flecha { transform: rotate(180deg); }
.comprar-bandera {
display: inline-block;
width: 20px;
height: 14px;
background: linear-gradient(#c60b1e 25%, #ffc400 25% 75%, #c60b1e 75%);
box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.comprar-region-info {
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 20;
width: min(300px, 80vw);
padding: 12px 14px;
background: var(--ck-tarjeta);
border: 1px solid var(--ck-cian);
border-radius: var(--ck-radio);
box-shadow: var(--shadow-pixel);
}
.page-comprar .comprar-region-info p { font-size: 13px; color: var(--ck-tinta); }
.comprar-catalogo { padding-top: 26px; padding-bottom: 14px; }
.comprar-catalogo-cabecera {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
}
.page-comprar .comprar-catalogo-titulo {
font-family: var(--font-pixel);
font-size: 19px;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ck-cian);
text-shadow: 0 0 12px color-mix(in srgb, var(--ck-cian) 35%, transparent);
}
.page-comprar .comprar-catalogo-titulo:focus { outline: none; }
.page-comprar .comprar-catalogo-sub { margin-top: 8px; font-size: 15px; }
.comprar-pestanas {
display: flex;
gap: 4px;
padding: 3px;
border: 1px solid var(--ck-filo);
border-radius: var(--ck-radio);
}
.comprar-pestana {
padding: 5px 12px;
border-radius: 2px;
font-size: 13px;
font-weight: 600;
color: var(--ck-tinta-2);
}
.page-comprar .comprar-pestana:hover { color: var(--ck-tinta); background: var(--pc-velo); }
.page-comprar .comprar-pestana[aria-current="page"] { background: var(--ck-cian); color: var(--text-inverse); }
.comprar-filtros {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 22px;
flex-wrap: wrap;
}
.comprar-filtros-grupo { display: flex; gap: 12px; flex-wrap: wrap; }
.comprar-filtro {
position: relative;
display: inline-flex;
align-items: center;
height: 30px;
border: 1px solid var(--ck-filo-claro);
border-radius: var(--ck-radio);
background: var(--ck-fondo);
transition: border-color var(--pc-salto);
}
.comprar-filtro:hover,
.comprar-filtro:focus-within { border-color: var(--ck-tinta-2); }
.comprar-filtro[data-activo] { border-color: var(--ck-cian); box-shadow: inset 0 0 0 1px var(--ck-cian); }
.page-comprar .comprar-filtro select {
appearance: none;
-webkit-appearance: none;
field-sizing: content;
height: 100%;
min-width: 118px;
padding: 0 38px 0 18px;
background: transparent;
border: 0;
color: var(--ck-tinta);
font-size: 13px;
font-weight: 600;
cursor: pointer;
}
.page-comprar .comprar-filtro select option { background: var(--bg-secondary); color: var(--text-primary); }
.page-comprar .comprar-filtro select:focus-visible { outline-offset: 4px !important; }
.comprar-filtro-flecha {
position: absolute;
right: 12px;
color: var(--ck-tinta);
pointer-events: none;
}
.comprar-orden .comprar-filtro-prefijo {
padding-left: 18px;
font-size: 13px;
font-weight: 600;
color: var(--ck-tinta);
white-space: nowrap;
}
.page-comprar .comprar-orden select { padding-left: 5px; min-width: 0; }
.comprar-filtros .comprar-region { display: flex; }
.comprar-filtros .comprar-region-btn {
height: 30px;
padding: 0 38px 0 18px;
border: 1px solid var(--ck-filo-claro);
border-radius: var(--ck-radio);
color: var(--ck-tinta);
font-size: 13px;
font-weight: 600;
}
.comprar-filtros .comprar-region-btn:hover { border-color: var(--ck-tinta-2); }
.comprar-filtros .comprar-region-flecha { position: absolute; right: 12px; }
.comprar-filtros .comprar-region-info { left: 0; right: auto; }
.page-comprar .comprar-aviso-afiliacion {
display: flex;
align-items: center;
gap: 8px;
margin-top: 14px;
font-size: 12.5px;
color: var(--ck-tinta-2);
}
.comprar-aviso-afiliacion .ico { color: var(--accent-series); }
.comprar-estado {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-height: 28px;
margin: 14px 0 12px;
}
.page-comprar .comprar-cuenta { font-size: 13px; color: var(--ck-tinta-3); }
.comprar-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.comprar-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 26px;
padding: 0 8px 0 10px;
border: 1px solid var(--ck-cian);
border-radius: 999px;
color: var(--ck-tinta);
font-size: 12.5px;
font-weight: 600;
}
.comprar-chip:hover { background: color-mix(in srgb, var(--ck-cian) 15%, transparent); }
.comprar-chip-todo { border-color: var(--ck-filo-claro); color: var(--ck-tinta-2); padding-right: 10px; }
.comprar-rejilla {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.comprar-ficha {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
background: var(--ck-tarjeta);
border: 1px solid var(--ck-filo);
border-radius: var(--ck-radio);
overflow: hidden;
transition: border-color var(--pc-salto), transform var(--pc-salto);
}
.comprar-ficha:hover,
.comprar-ficha:focus-within { border-color: color-mix(in srgb, var(--ck-cian) 55%, var(--ck-filo)); }
.comprar-ficha-arte {
position: relative;
aspect-ratio: 460 / 215;
overflow: hidden;
background: var(--ck-hondo);
}
.comprar-ficha-arte-enlace { position: absolute; inset: 0; display: block; }
.comprar-ficha-arte img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--pc-salto-largo);
}
.comprar-ficha:hover .comprar-ficha-arte img { transform: scale(var(--pc-zoom-arte, 1.06)); }
.comprar-ficha-arte.es-poster::before,
.comprar-ficha-arte:has(img.portada-de-repuesto)::before {
content: '';
position: absolute;
inset: -20px;
background-image: var(--arte-fondo, none);
background-size: cover;
background-position: center;
filter: blur(14px) brightness(.55) saturate(1.2);
}
.comprar-ficha-arte.es-poster img,
.comprar-ficha-arte img.portada-de-repuesto {
position: relative;
object-fit: contain;
padding: 10px 0;
}
.comprar-ficha-descuento {
position: absolute;
left: 10px;
bottom: 10px;
pointer-events: none;
}
.page-comprar .comprar-fav {
position: absolute;
top: 4px;
right: 4px;
left: auto;
width: 44px;
height: 44px;
display: grid;
place-items: center;
opacity: 1;
font-size: 0;
color: transparent;
border: 0;
border-radius: 50%;
background: transparent;
backdrop-filter: none;
transform: none;
transition: background var(--pc-salto);
}
.page-comprar .comprar-fav::before {
content: '';
width: 22px;
height: 22px;
background: #fff;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2ZM5 14H3v-2h2v2Zm16 0h-2v-2h2v2ZM3 12H1V6h2v6Zm20 0h-2V6h2v6ZM13 8h-2V6h2v2ZM5 6H3V4h2v2Zm6 0H9V4h2v2Zm4 0h-2V4h2v2Zm6 0h-2V4h2v2ZM9 4H5V2h4v2Zm10 0h-4V2h4v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 22h-2v-2h2v2Zm-2-2H9v-2h2v2Zm4 0h-2v-2h2v2Zm-6-2H7v-2h2v2Zm8 0h-2v-2h2v2ZM7 16H5v-2h2v2Zm12 0h-2v-2h2v2ZM5 14H3v-2h2v2Zm16 0h-2v-2h2v2ZM3 12H1V6h2v6Zm20 0h-2V6h2v6ZM13 8h-2V6h2v2ZM5 6H3V4h2v2Zm6 0H9V4h2v2Zm4 0h-2V4h2v2Zm6 0h-2V4h2v2ZM9 4H5V2h4v2Zm10 0h-4V2h4v2Z'/%3E%3C/svg%3E") center / contain no-repeat;
filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .9)) drop-shadow(0 0 2px rgba(0, 0, 0, .7));
}
.page-comprar .comprar-fav:hover { background: rgba(5, 8, 16, .55); transform: none; border: 0; }
.page-comprar .comprar-fav.active::before { background: var(--accent-movies); }
.page-comprar .comprar-fav.active { background: rgba(5, 8, 16, .6); }
.comprar-ficha-cuerpo {
display: flex;
flex-direction: column;
flex: 1;
padding: 14px 15px 15px;
}
.page-comprar .comprar-ficha-titulo {
font-size: 17px;
font-weight: 700;
line-height: 1.25;
color: var(--ck-tinta);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.page-comprar .comprar-ficha-linea {
margin-top: 4px;
font-size: 13px;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.page-comprar .comprar-ficha-titulo + .comprar-ficha-linea { margin-top: 6px; }
.page-comprar .comprar-ficha-visto {
display: flex;
align-items: center;
gap: 8px;
margin-top: 9px;
font-size: 13px;
color: var(--ck-tinta);
}
.comprar-ficha-visto-ico {
display: grid;
place-items: center;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--ck-cian);
color: var(--text-inverse);
flex: none;
}
.comprar-ficha-visto-ico .ico { width: 14px; height: 14px; }
.comprar-ficha-precio { margin-top: 8px; min-height: 52px; }
.page-comprar .comprar-ficha-cifras {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 2px 10px;
}
.comprar-ficha-ahora { font-size: 30px; font-weight: 800; line-height: 1.05; color: var(--ck-tinta); }
.comprar-ficha-cifras-oferta .comprar-ficha-ahora { color: var(--pc-precio-rebaja); }
.comprar-ficha-antes { font-size: 13px; color: var(--ck-tinta-3); }
.page-comprar .comprar-ficha-sinprecio { font-size: 15px; font-weight: 600; color: var(--ck-tinta-2); padding-top: 8px; }
.page-comprar .comprar-ficha-iva { margin-top: 1px; font-size: 11px; color: var(--ck-tinta-2); }
.comprar-ficha-cta { margin-top: 10px; height: 34px; }
.comprar-vermas {
display: flex;
align-items: center;
gap: 6px;
margin: 18px auto 0;
height: 36px;
padding: 0 22px;
border: 1px solid var(--ck-cian);
border-radius: var(--ck-radio);
color: var(--ck-tinta);
font-size: 14px;
font-weight: 600;
}
.comprar-vermas:hover { background: color-mix(in srgb, var(--ck-cian) 14%, transparent); }
.comprar-vacio {
padding: 40px 16px;
text-align: center;
border: 1px dashed var(--ck-filo-claro);
border-radius: var(--ck-radio);
}
.page-comprar .comprar-vacio p { font-size: 16px; color: var(--ck-tinta); }
.comprar-banners {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 14px;
}
.comprar-banner {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 6px;
min-height: 133px;
padding: 18px 22px;
border: 1px solid var(--ck-filo);
border-radius: var(--ck-radio);
background-color: var(--ck-hondo);
background-size: cover;
background-position: center;
image-rendering: pixelated;
text-align: left;
overflow: hidden;
transition: border-color var(--pc-salto);
}
.comprar-banner:hover { border-color: var(--ck-cian); }
.comprar-banner-noche {
background-image:
linear-gradient(90deg, rgba(5, 8, 16, .82) 0%, rgba(5, 8, 16, .45) 42%, rgba(5, 8, 16, 0) 62%),
url('/images/comprar/banner-noche.webp');
}
.comprar-banner-hoguera {
background-image:
linear-gradient(90deg, rgba(5, 8, 16, .82) 0%, rgba(5, 8, 16, .45) 40%, rgba(5, 8, 16, 0) 60%),
url('/images/comprar/banner-hoguera.webp');
}
.comprar-banner-titulo {
font-family: var(--font-pixel);
font-size: 16px;
line-height: 1.45;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ck-cian);
text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
}
.comprar-banner-sub { font-size: 14px; color: var(--ck-tinta); text-shadow: 0 1px 0 rgba(0, 0, 0, .8); }
.comprar-banner-enlace {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
color: var(--ck-cian);
font-size: 13px;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.comprar-banner:hover .comprar-banner-enlace .ico { transform: translateX(3px); }
.comprar-banner-enlace .ico { transition: transform var(--pc-salto); }
.comprar-dialogo {
width: min(560px, calc(100vw - 32px));
max-height: min(86vh, 760px);
margin: auto;
padding: 0;
background: var(--ck-tarjeta);
color: var(--ck-tinta);
border: 1px solid var(--ck-cian);
border-radius: var(--ck-radio);
box-shadow: var(--shadow-pixel-lg);
font-family: var(--ck-sans);
}
.comprar-dialogo::backdrop { background: rgba(3, 5, 12, .72); }
.comprar-dialogo[open] { display: flex; flex-direction: column; }
.comprar-dialogo-cabecera {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid var(--ck-filo);
}
.page-comprar .comprar-dialogo-titulo { font-size: 18px; font-weight: 800; color: var(--ck-tinta); }
.comprar-dialogo-cerrar { color: var(--ck-tinta-2); padding: 4px; }
.comprar-dialogo-cerrar:hover { color: var(--ck-tinta); }
.comprar-dialogo-cuerpo { padding: 16px 18px 20px; overflow-y: auto; }
.page-comprar .comprar-dialogo-cuerpo p,
.page-comprar .comprar-dialogo-cuerpo li { font-size: 14.5px; line-height: 1.55; color: var(--ck-tinta-2); }
.page-comprar .comprar-dialogo-cuerpo h3 {
margin: 18px 0 8px;
font-family: var(--font-pixel);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--ck-cian);
}
.comprar-dialogo-cuerpo strong { color: var(--ck-tinta); }
.comprar-guia-pasos { list-style: decimal; padding-left: 20px; display: grid; gap: 8px; }
.comprar-guia-tiendas { display: grid; gap: 8px; }
.comprar-cajon {
width: min(420px, 100vw);
height: 100dvh;
max-height: none;
margin: 0 0 0 auto;
border-radius: 0;
border-width: 0 0 0 1px;
}
.comprar-cajon .comprar-dialogo-cuerpo { flex: 1; }
.comprar-cajon-vacio {
display: grid;
justify-items: center;
gap: 8px;
padding: 48px 0 24px;
text-align: center;
color: var(--ck-tinta-3);
}
.page-comprar .comprar-cajon-vacio p:first-of-type { font-size: 17px; font-weight: 700; color: var(--ck-tinta); }
.comprar-lineas { display: grid; gap: 12px; }
.comprar-linea {
display: grid;
grid-template-columns: 92px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
}
.comprar-linea img { width: 92px; height: 43px; object-fit: cover; border-radius: 2px; }
.page-comprar .comprar-linea-titulo { font-size: 14px; font-weight: 700; color: var(--ck-tinta); }
.page-comprar .comprar-linea-precio { font-size: 13px; }
.comprar-linea-cantidad { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.comprar-linea-cantidad button {
width: 26px; height: 26px;
border: 1px solid var(--ck-filo-claro);
border-radius: 3px;
font-size: 16px;
line-height: 1;
}
.comprar-linea-cantidad button:disabled { opacity: .4; cursor: not-allowed; }
.comprar-linea-quitar { color: var(--ck-tinta-3); }
.comprar-linea-quitar:hover { color: var(--accent-movies-texto); }
.comprar-linea.comprar-linea-perdida {
grid-template-columns: minmax(0, 1fr) auto;
padding: 8px 10px;
border: 1px dashed var(--ck-filo-claro);
border-radius: 3px;
}
.comprar-linea-perdida .comprar-linea-quitar { grid-column: 2; grid-row: 1; }
.comprar-cajon-pie {
display: grid;
gap: 8px;
padding: 16px 18px 20px;
border-top: 1px solid var(--ck-filo);
}
.page-comprar .comprar-cajon-total { display: flex; justify-content: space-between; font-size: 15px; color: var(--ck-tinta); }
.comprar-cajon-total strong { font-size: 20px; }
.page-comprar .comprar-cajon-nota,
.page-comprar .comprar-cajon-aviso { font-size: 12.5px; color: var(--ck-tinta-3); }
.comprar-cajon-pagar,
.comprar-cajon-seguir {
height: 40px;
border-radius: 3px;
background: var(--ck-cian);
color: var(--text-inverse);
font-size: 15px;
font-weight: 700;
}
.comprar-cajon-pagar:disabled { background: var(--ck-filo); color: var(--ck-tinta-3); cursor: not-allowed; }
.page-comprar#tienda-comprar {
--ck-r-tarjeta: 14px;
--ck-r-control: 10px;
--ck-borde: rgba(232, 236, 244, .08);
--ck-borde-vivo: rgba(0, 245, 212, .42);
--ck-sombra: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 28px rgba(0, 0, 0, .28);
--ck-sombra-alta: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px rgba(0, 0, 0, .45);
--ck-t: 180ms cubic-bezier(.2, .7, .3, 1);
--ck-t-largo: 420ms cubic-bezier(.2, .7, .3, 1);
background: var(--bg-primary);
}
.page-comprar#tienda-comprar :is(.comprar-boton, .comprar-carrito-btn, .comprar-vermas, .comprar-ficha-cta) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
padding: 0 18px;
border: 1px solid rgba(232, 236, 244, .12);
border-radius: var(--ck-r-control);
background: rgba(232, 236, 244, .06);
box-shadow: none;
color: var(--text-primary);
font-family: var(--font-ui);
font-size: 14.5px;
font-weight: 600;
white-space: nowrap;
filter: none;
transition: background var(--ck-t), border-color var(--ck-t), color var(--ck-t), transform var(--ck-t);
}
.page-comprar#tienda-comprar :is(.comprar-boton, .comprar-carrito-btn, .comprar-vermas, .comprar-ficha-cta):hover {
background: rgba(0, 245, 212, .1);
border-color: var(--ck-borde-vivo);
color: var(--text-primary);
}
.page-comprar#tienda-comprar :is(.comprar-boton, .comprar-vermas, .comprar-ficha-cta) .ico { transition: transform var(--ck-t); }
.page-comprar#tienda-comprar :is(.comprar-boton, .comprar-vermas, .comprar-ficha-cta):hover .ico { transform: translateX(3px); }
.page-comprar#tienda-comprar .comprar-boton-principal {
border-color: transparent;
background: var(--accent-cyan);
color: #04110f;
font-weight: 700;
}
.page-comprar#tienda-comprar .comprar-boton-principal:hover {
border-color: transparent;
background: #5dfbe4;
color: #04110f;
transform: translateY(-1px);
}
.page-comprar#tienda-comprar .comprar-hero {
position: relative;
isolation: isolate;
overflow: hidden;
background: none;
border: 0;
}
.page-comprar#tienda-comprar .comprar-hero-arte {
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
width: min(94%, 1560px);
background: var(--arte) 74% 50% / cover no-repeat;
image-rendering: pixelated;
opacity: .92;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .78) 34%, #000 52%),
linear-gradient(0deg, transparent 0%, #000 34%),
linear-gradient(180deg, transparent 0, #000 40px);
-webkit-mask-composite: source-in, source-in;
mask-image:
linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .3) 14%, rgba(0, 0, 0, .78) 34%, #000 52%),
linear-gradient(0deg, transparent 0%, #000 34%),
linear-gradient(180deg, transparent 0, #000 40px);
mask-composite: intersect;
pointer-events: none;
}
.page-comprar#tienda-comprar .comprar-hero-interior {
display: block;
min-height: 0;
padding-top: 56px;
padding-bottom: 64px;
}
.page-comprar#tienda-comprar .comprar-migas {
position: static;
display: flex;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
}
.page-comprar#tienda-comprar .comprar-migas a { color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-migas a:hover { color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-migas [aria-current] { color: var(--text-secondary); }
.page-comprar#tienda-comprar .comprar-hero-marca {
margin-top: 28px;
font-family: var(--font-pixel);
font-size: 10px;
line-height: 1.4;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-cyan);
}
.page-comprar#tienda-comprar .comprar-hero-titulo {
max-width: 12ch;
margin: 12px 0 0;
font-family: var(--font-ui);
font-size: clamp(34px, 3.6vw, 50px);
font-weight: 800;
line-height: 1.06;
letter-spacing: -.02em;
color: var(--text-primary);
text-shadow: 0 2px 0 rgba(0, 0, 0, .6);
}
.page-comprar#tienda-comprar .comprar-hero-sub {
max-width: 36ch;
margin: 14px 0 0;
font-size: 18px;
line-height: 1.45;
color: var(--text-secondary);
text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
.page-comprar#tienda-comprar .comprar-hero-acciones {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 14px;
margin-top: 28px;
}
.page-comprar#tienda-comprar .comprar-hero-acciones .comprar-carrito-btn:not(:hover) { background: rgba(10, 14, 24, .55); }
.page-comprar#tienda-comprar .comprar-hero-guia {
display: inline-flex;
align-items: center;
gap: 8px;
height: 42px;
padding: 0 6px;
color: var(--text-secondary);
font-size: 14px;
font-weight: 600;
text-decoration: underline;
text-decoration-color: rgba(232, 236, 244, .25);
text-underline-offset: 5px;
transition: color var(--ck-t), text-decoration-color var(--ck-t);
}
.page-comprar#tienda-comprar .comprar-hero-guia:hover { color: var(--text-primary); text-decoration-color: var(--accent-cyan); }
.page-comprar#tienda-comprar .comprar-hero-guia .ico { color: var(--accent-cyan); }
.page-comprar#tienda-comprar .comprar-escaparate {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 20px;
}
.page-comprar#tienda-comprar .comprar-escaparate-solo { grid-template-columns: minmax(0, 560px); }
.page-comprar#tienda-comprar .comprar-colecciones { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; }
.page-comprar#tienda-comprar .comprar-destacado {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
min-height: 280px;
margin: 0;
border: 1px solid var(--ck-borde);
border-radius: var(--ck-r-tarjeta);
background: var(--bg-surface);
box-shadow: var(--ck-sombra);
overflow: hidden;
image-rendering: auto;
transition: border-color var(--ck-t), box-shadow var(--ck-t), transform var(--ck-t);
}
.page-comprar#tienda-comprar .comprar-destacado:is(:hover, :focus-within) {
border-color: var(--ck-borde-vivo);
box-shadow: var(--ck-sombra-alta);
transform: translateY(-3px);
}
.page-comprar#tienda-comprar .comprar-destacado-arte { position: relative; display: block; overflow: hidden; background: var(--bg-sunken); }
.page-comprar#tienda-comprar .comprar-destacado-arte img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
transition: transform var(--ck-t-largo);
}
.page-comprar#tienda-comprar .comprar-destacado:hover .comprar-destacado-arte img { transform: scale(1.05); }
.page-comprar#tienda-comprar .comprar-destacado-datos { display: flex; flex-direction: column; min-width: 0; padding: 24px 22px 22px; }
.page-comprar#tienda-comprar .comprar-destacado-antetitulo {
font-family: var(--font-pixel);
font-size: 9px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent-cyan);
}
.page-comprar#tienda-comprar .comprar-destacado-titulo {
margin-top: 10px;
font-family: var(--font-ui);
font-size: 24px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -.01em;
text-transform: none;
color: var(--text-primary);
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.page-comprar#tienda-comprar .comprar-destacado-linea { margin-top: 6px; font-size: 13.5px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-destacado-cifras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 14px; }
.page-comprar#tienda-comprar .comprar-destacado-precio { font-size: 34px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-destacado-antes { font-size: 14px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-destacado-iva,
.page-comprar#tienda-comprar .comprar-destacado-fecha { margin-top: 4px; font-size: 12px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-destacado-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 42px;
margin-top: 16px;
border: 1px solid rgba(232, 236, 244, .12);
border-radius: var(--ck-r-control);
background: rgba(232, 236, 244, .06);
box-shadow: none;
color: var(--text-primary);
font-size: 14.5px;
font-weight: 600;
transition: background var(--ck-t), border-color var(--ck-t);
}
.page-comprar#tienda-comprar .comprar-destacado-cta .ico { transition: transform var(--ck-t); }
.page-comprar#tienda-comprar .comprar-destacado:hover .comprar-destacado-cta,
.page-comprar#tienda-comprar .comprar-destacado-cta:hover { background: rgba(0, 245, 212, .1); border-color: var(--ck-borde-vivo); color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-destacado-cta:hover .ico { transform: translateX(3px); }
.page-comprar#tienda-comprar :is(.comprar-ficha-descuento, .comprar-destacado-descuento) {
padding: 4px 8px;
border-radius: 6px;
background: #b8213e;
box-shadow: none;
color: #fff;
font-family: var(--font-ui);
font-size: 12.5px;
font-weight: 700;
line-height: 1.2;
}
.page-comprar#tienda-comprar .comprar-banner {
position: relative;
isolation: isolate;
justify-content: flex-end;
min-height: 140px;
padding: 22px 26px;
border: 1px solid var(--ck-borde);
border-radius: var(--ck-r-tarjeta);
background: var(--bg-sunken);
box-shadow: var(--ck-sombra);
transition: border-color var(--ck-t), box-shadow var(--ck-t), transform var(--ck-t);
}
.page-comprar#tienda-comprar .comprar-banner::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-image: var(--banner-velo), var(--banner-arte);
background-size: 100% 100%, var(--banner-tam, cover);
background-position: 0 0, var(--banner-x, 70%) center;
background-repeat: no-repeat;
image-rendering: pixelated;
transition: transform var(--ck-t-largo);
}
.page-comprar#tienda-comprar .comprar-banner:hover {
border-color: var(--ck-borde-vivo);
box-shadow: var(--ck-sombra-alta);
transform: translateY(-3px);
}
.page-comprar#tienda-comprar .comprar-banner:hover::before { transform: scale(1.03); }
.page-comprar#tienda-comprar .comprar-banner-noche {
background-image: none;
--banner-arte: url('/images/comprar/banner-noche.webp');
--banner-velo: linear-gradient(90deg, rgba(7, 10, 18, .88) 0%, rgba(7, 10, 18, .5) 42%, rgba(7, 10, 18, 0) 66%);
}
.page-comprar#tienda-comprar .comprar-banner-hoguera {
background-image: none;
--banner-arte: url('/images/comprar/banner-hoguera.webp');
--banner-velo: linear-gradient(90deg, rgba(7, 10, 18, .88) 0%, rgba(7, 10, 18, .5) 40%, rgba(7, 10, 18, 0) 64%);
}
.page-comprar#tienda-comprar .comprar-banner-rebajas {
background-image: none;
--banner-x: 100%;
--banner-arte: url('/images/comprar/banner-rebajas.webp');
--banner-velo: linear-gradient(90deg, rgba(7, 10, 18, .9) 0%, rgba(7, 10, 18, .55) 34%, rgba(7, 10, 18, 0) 58%);
}
.page-comprar#tienda-comprar .comprar-banner-titulo { font-size: 15px; line-height: 1.5; letter-spacing: .06em; color: var(--accent-cyan); }
.page-comprar#tienda-comprar .comprar-banner-sub { font-size: 15px; color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-banner-enlace {
margin-top: 6px;
color: var(--text-secondary);
font-size: 13.5px;
text-decoration: none;
}
.page-comprar#tienda-comprar .comprar-banner:hover .comprar-banner-enlace { color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-catalogo { padding-top: 64px; padding-bottom: 8px; }
.page-comprar#tienda-comprar .comprar-catalogo-sub { margin-top: 8px; font-size: 15px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-pestanas {
gap: 4px;
padding: 4px;
border: 1px solid var(--ck-borde);
border-radius: 12px;
background: var(--bg-sunken);
}
.page-comprar#tienda-comprar .comprar-pestana {
display: inline-flex;
align-items: center;
height: 36px;
padding: 0 16px;
border-radius: 8px;
box-shadow: none;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
letter-spacing: normal;
text-transform: none;
color: var(--text-muted);
transition: background var(--ck-t), color var(--ck-t);
}
.page-comprar#tienda-comprar .comprar-pestana:hover { background: rgba(232, 236, 244, .06); color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-pestana[aria-current="page"] { background: rgba(0, 245, 212, .12); color: var(--accent-cyan); box-shadow: none; }
.page-comprar#tienda-comprar .comprar-filtros { gap: 12px; margin-top: 26px; flex-wrap: wrap; justify-content: flex-start; }
.page-comprar#tienda-comprar .comprar-buscador { flex: 1 1 260px; max-width: 420px; }
.page-comprar#tienda-comprar .comprar-filtros-grupo { gap: 10px; padding: 0; }
.page-comprar#tienda-comprar .comprar-orden { margin-left: auto; }
.page-comprar#tienda-comprar :is(#comprar-buscar, .comprar-filtro, .comprar-filtros .comprar-region-btn) {
height: 42px;
border: 1px solid rgba(232, 236, 244, .1);
border-radius: var(--ck-r-control);
background: var(--bg-surface);
box-shadow: none;
transition: border-color var(--ck-t), background var(--ck-t);
}
.page-comprar#tienda-comprar #comprar-buscar { padding: 0 14px 0 40px; font-family: var(--font-ui); font-size: 15px; color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-buscador-lupa { color: var(--text-muted); }
.page-comprar#tienda-comprar :is(.comprar-filtro, .comprar-filtros .comprar-region-btn):hover,
.page-comprar#tienda-comprar .comprar-filtro:focus-within,
.page-comprar#tienda-comprar #comprar-buscar:hover { border-color: rgba(232, 236, 244, .22); }
.page-comprar#tienda-comprar #comprar-buscar:focus-visible { border-color: var(--accent-cyan); }
.page-comprar#tienda-comprar .comprar-filtro[data-activo] { border-color: var(--ck-borde-vivo); background: rgba(0, 245, 212, .06); box-shadow: none; }
.page-comprar#tienda-comprar .comprar-filtro select { font-family: var(--font-ui); font-size: 14px; font-weight: 500; }
.page-comprar#tienda-comprar .comprar-filtros .comprar-region-btn { font-family: var(--font-ui); font-size: 14px; font-weight: 500; }
.page-comprar#tienda-comprar .comprar-region-info { border-color: var(--ck-borde-vivo); border-radius: var(--ck-r-control); box-shadow: var(--ck-sombra-alta); }
.page-comprar#tienda-comprar .comprar-chip { height: 30px; padding: 0 10px 0 12px; border-color: var(--ck-borde-vivo); background: rgba(0, 245, 212, .06); }
.page-comprar#tienda-comprar .comprar-estado { margin: 18px 0 16px; }
.page-comprar#tienda-comprar .comprar-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
.page-comprar#tienda-comprar .comprar-ficha {
border: 1px solid var(--ck-borde);
border-radius: var(--ck-r-tarjeta);
background: var(--bg-surface);
box-shadow: var(--ck-sombra);
transition: border-color var(--ck-t), box-shadow var(--ck-t), transform var(--ck-t);
}
.page-comprar#tienda-comprar .comprar-ficha:is(:hover, :focus-within) {
border-color: var(--ck-borde-vivo);
box-shadow: var(--ck-sombra-alta);
transform: translateY(-4px);
}
.page-comprar#tienda-comprar .comprar-ficha-arte img { transition: transform var(--ck-t-largo); }
.page-comprar#tienda-comprar .comprar-ficha:hover .comprar-ficha-arte img { transform: scale(1.06); }
.page-comprar#tienda-comprar .comprar-ficha-arte::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 40%;
background: linear-gradient(0deg, rgba(7, 10, 18, .55), rgba(7, 10, 18, 0));
pointer-events: none;
}
.page-comprar#tienda-comprar .comprar-ficha-descuento { left: 14px; bottom: 12px; z-index: 1; }
.page-comprar#tienda-comprar .comprar-ficha-cuerpo { padding: 18px 20px 20px; }
.page-comprar#tienda-comprar .comprar-ficha-titulo { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.page-comprar#tienda-comprar .comprar-ficha-linea { margin-top: 4px; font-size: 14px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-ficha-titulo + .comprar-ficha-linea { margin-top: 6px; }
.page-comprar#tienda-comprar .comprar-ficha-visto { margin-top: 12px; font-size: 13.5px; color: var(--text-secondary); }
.page-comprar#tienda-comprar .comprar-ficha-visto-ico { width: 20px; height: 20px; background: rgba(0, 245, 212, .12); color: var(--accent-cyan); }
.page-comprar#tienda-comprar .comprar-ficha-precio { margin-top: 14px; min-height: 56px; }
.page-comprar#tienda-comprar .comprar-ficha-ahora { font-size: 30px; font-weight: 800; letter-spacing: -.01em; color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-ficha-antes { font-size: 14px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-ficha-iva { margin-top: 3px; font-size: 12px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-ficha-cta { width: 100%; margin: 16px 0 0; }
.page-comprar#tienda-comprar .comprar-ficha:hover .comprar-ficha-cta { background: rgba(0, 245, 212, .1); border-color: var(--ck-borde-vivo); }
.page-comprar#tienda-comprar .comprar-ficha:hover .comprar-ficha-cta .ico { transform: translateX(3px); }
.page-comprar#tienda-comprar .comprar-rejilla-coleccion { grid-column: 1 / -1; display: grid; }
.page-comprar#tienda-comprar .comprar-rejilla-coleccion .comprar-banner { min-height: 198px; height: 198px; justify-content: center; }
.page-comprar#tienda-comprar .comprar-rejilla-coleccion .comprar-banner-rebajas { --banner-tam: auto 198px; }
.page-comprar#tienda-comprar .comprar-vermas { display: flex; margin: 36px auto 0; padding: 0 26px; }
.page-comprar#tienda-comprar .comprar-vacio { border-radius: var(--ck-r-tarjeta); }
.page-comprar#tienda-comprar .comprar-ayuda { margin-top: 72px; padding-bottom: 88px; }
.page-comprar#tienda-comprar .comprar-ayuda-caja {
display: grid;
grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
align-items: start;
gap: 40px;
min-height: 0;
padding: 32px 36px;
border: 1px solid var(--ck-borde);
border-radius: 16px;
background: var(--bg-surface);
box-shadow: var(--ck-sombra);
}
.page-comprar#tienda-comprar .comprar-ayuda-titulo { font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-ayuda-cabeza p { margin-top: 8px; font-size: 14.5px; color: var(--text-muted); }
.page-comprar#tienda-comprar .comprar-ayuda-btn { margin-top: 18px; }
.page-comprar#tienda-comprar .comprar-ayuda-pasos {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px;
list-style: none;
counter-reset: none;
}
.page-comprar#tienda-comprar .comprar-ayuda-paso { display: flex; flex-direction: column; gap: 14px; }
.page-comprar#tienda-comprar .comprar-ayuda-ico {
position: relative;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 12px;
background: rgba(0, 245, 212, .08);
color: var(--accent-cyan);
}
.page-comprar#tienda-comprar .comprar-ayuda-num {
position: absolute;
top: -6px;
right: -6px;
display: grid;
place-items: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--bg-elevated);
border: 1px solid var(--ck-borde);
font-family: var(--font-pixel);
font-size: 8px;
color: var(--text-primary);
}
.page-comprar#tienda-comprar .comprar-ayuda-paso-texto { display: flex; flex-direction: column; gap: 4px; }
.page-comprar#tienda-comprar .comprar-ayuda-paso-texto strong { font-size: 15.5px; font-weight: 700; color: var(--text-primary); }
.page-comprar#tienda-comprar .comprar-ayuda-paso-texto span { font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.comprar-dialogo { border-radius: var(--ck-r-tarjeta, 14px); border-color: rgba(0, 245, 212, .42); }
.comprar-cajon { border-radius: 0; }
@media (max-width: 1100px) {
.page-comprar#tienda-comprar .comprar-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-comprar#tienda-comprar .comprar-escaparate { grid-template-columns: minmax(0, 1fr); }
.page-comprar#tienda-comprar .comprar-colecciones { grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-comprar#tienda-comprar .comprar-ayuda-caja { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
.page-comprar#tienda-comprar .comprar-colecciones { grid-template-columns: minmax(0, 1fr); }
.page-comprar#tienda-comprar .comprar-orden { margin-left: 0; }
}
@media (max-width: 640px) {
.page-comprar#tienda-comprar .comprar-hero { background: none; }
.page-comprar#tienda-comprar .comprar-hero-arte {
bottom: auto;
height: 180px;
width: 100%;
background-size: 640px 180px;
background-position: 80% 0;
opacity: 1;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 56%, transparent 96%);
mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 56%, transparent 96%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
.page-comprar#tienda-comprar .comprar-hero-interior { padding-top: 150px; padding-bottom: 40px; }
.page-comprar#tienda-comprar .comprar-hero-marca { margin-top: 18px; }
.page-comprar#tienda-comprar .comprar-hero-titulo { max-width: none; font-size: 32px; }
.page-comprar#tienda-comprar .comprar-hero-sub { font-size: 16px; }
.page-comprar#tienda-comprar .comprar-hero-acciones { margin-top: 22px; }
.page-comprar#tienda-comprar .comprar-hero-acciones .comprar-boton-principal { flex: 1 1 100%; }
.page-comprar#tienda-comprar .comprar-hero-acciones .comprar-carrito-btn { flex: 1 1 auto; }
.page-comprar#tienda-comprar .comprar-escaparate { gap: 16px; }
.page-comprar#tienda-comprar .comprar-colecciones { gap: 16px; }
.page-comprar#tienda-comprar .comprar-destacado { grid-template-columns: 38% minmax(0, 1fr); min-height: 0; }
.page-comprar#tienda-comprar .comprar-destacado-datos { padding: 18px 16px 16px; }
.page-comprar#tienda-comprar .comprar-destacado-titulo { font-size: 19px; }
.page-comprar#tienda-comprar .comprar-destacado-precio { font-size: 28px; }
.page-comprar#tienda-comprar .comprar-banner { min-height: 128px; padding: 18px; }
.page-comprar#tienda-comprar .comprar-rejilla-coleccion .comprar-banner { min-height: 132px; height: 132px; }
.page-comprar#tienda-comprar .comprar-rejilla-coleccion .comprar-banner-rebajas { --banner-tam: auto 132px; }
.page-comprar#tienda-comprar .comprar-banner-titulo { font-size: 12px; }
.page-comprar#tienda-comprar .comprar-banner-sub { font-size: 14px; }
.page-comprar#tienda-comprar .comprar-catalogo { padding-top: 48px; }
.page-comprar#tienda-comprar .comprar-buscador { flex-basis: 100%; max-width: none; }
.page-comprar#tienda-comprar .comprar-pestanas { width: 100%; }
.page-comprar#tienda-comprar .comprar-pestana { flex: 1; justify-content: center; padding: 0 8px; }
.page-comprar#tienda-comprar .comprar-rejilla { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-comprar#tienda-comprar .comprar-ficha-cuerpo { padding: 16px 16px 18px; }
.page-comprar#tienda-comprar .comprar-ayuda { margin-top: 56px; padding-bottom: 64px; }
.page-comprar#tienda-comprar .comprar-ayuda-caja { padding: 24px 20px; }
.page-comprar#tienda-comprar .comprar-ayuda-pasos { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.page-comprar#tienda-comprar .comprar-ayuda-paso { flex-direction: row; align-items: flex-start; }
.page-comprar#tienda-comprar .comprar-ayuda-ico { flex: none; width: 46px; height: 46px; }
.page-comprar#tienda-comprar .comprar-ayuda-btn { width: 100%; }
}
@media (max-width: 560px) {
.comprar-filtros { align-items: stretch; }
.comprar-filtros-grupo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
.comprar-filtros-grupo > * { width: 100%; min-width: 0; }
.comprar-filtros-grupo .comprar-region-btn,
.page-comprar .comprar-filtro select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.comprar-filtros-grupo .comprar-region-texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.comprar-filtros .comprar-region-info { width: min(300px, calc(100vw - 32px)); }
.comprar-filtros-grupo > .comprar-region:nth-child(even) .comprar-region-info { left: auto; right: 0; }
.page-comprar#tienda-comprar .comprar-orden { width: 100%; margin: 0; }
.page-comprar .comprar-orden select { flex: 1; }
.page-comprar .comprar-catalogo-titulo { font-size: 22px; }
.comprar-linea { grid-template-columns: 70px minmax(0, 1fr) auto; }
.comprar-linea img { width: 70px; height: 33px; }
.comprar-linea-quitar { grid-column: 3; grid-row: 1; }
.comprar-linea-cantidad { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
.page-comprar *,
.page-comprar *::before { transition: none !important; }
.page-comprar#tienda-comprar :is(.comprar-ficha, .comprar-destacado, .comprar-banner, .comprar-boton-principal):hover,
.page-comprar#tienda-comprar :is(.comprar-ficha, .comprar-destacado):focus-within { transform: none; }
.page-comprar#tienda-comprar :is(.comprar-ficha-arte img, .comprar-destacado-arte img, .comprar-banner::before, .ico) { transform: none !important; }
}
@media (max-width: 640px) {
.page-comprar#tienda-comprar .comprar-banner:is(.comprar-banner-noche, .comprar-banner-hoguera, .comprar-banner-rebajas) {
--banner-velo: linear-gradient(90deg, rgba(7, 10, 18, .9) 0%, rgba(7, 10, 18, .72) 60%, rgba(7, 10, 18, .45) 100%);
}
}