/** * CLP PREMIUM OVERRIDE — NYXIVO * Capa de estilos premium sobre categoria-landing.css * Inspiración: Apple · Samsung · Vercel · Linear * No modificar categoria-landing.css — este archivo sobreescribe de forma aditiva. */ /* ============================================================ 1. TOKENS PREMIUM — Variables adicionales ============================================================ */ :root { --prem-blanco: #ffffff; --prem-negro: #0a0a0a; --prem-gris-100: #f5f5f7; /* Apple-style bg muy suave */ --prem-gris-200: #ebebeb; --prem-gris-400: #6e6e73; /* Texto secundario Apple */ --prem-gris-600: #1d1d1f; /* Títulos Apple */ --prem-radio-card: 18px; --prem-sombra-card: 0 2px 8px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.04); --prem-sombra-hover: 0 20px 60px -10px rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.04); --prem-transicion: 0.38s cubic-bezier(0.22, 1, 0.36, 1); } /* Las variables --clp-* viven en categoria-landing.css :root. El BOM que las rompía fue eliminado del archivo base. */ /* ============================================================ 2. CUERPO — Fondo blanco puro (Apple-style) ============================================================ IMPORTANTE: el sistema de tema tech ponía `overflow-y: auto` en , lo que ROMPE `position: sticky` para todos los elementos internos. Lo restauramos a `visible` aquí para que el scroll viva en y los sticky funcionen. */ html { scroll-behavior: smooth; } /* Forzar el scroll en , no en ni en otros descendants — esto permite que `position: sticky` funcione en sortbar y sidebar */ html:has(body.clp-theme), html.clp-html-fix, body.clp-theme { overflow-x: clip !important; overflow-y: visible !important; } body.clp-theme { background: var(--prem-blanco); } /* ============================================================ 3. TRANSICIÓN HERO → CUERPO (wave suave) ============================================================ */ .clp-hero-wave { height: 28px; background: linear-gradient( to bottom, rgba(15, 23, 42, 0.98) 0%, rgba(15, 23, 42, 0.6) 35%, rgba(255, 255, 255, 0) 100% ); margin-top: -28px; position: relative; z-index: 1; pointer-events: none; } /* ============================================================ 4. HERO — Refinamiento tipográfico y espaciado ============================================================ */ .clp-hero { padding: 3.5rem 0 3rem; /* Mantiene el padding original para preservar el fondo */ } .clp-hero-title { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -0.035em; font-weight: 800; line-height: 1.0; } .clp-hero-sub { font-size: 1.05rem; color: rgba(255, 255, 255, 0.68); max-width: 560px; line-height: 1.6; } .clp-hero-eyebrow { font-size: 0.7rem; letter-spacing: 0.15em; opacity: 0.8; } /* Stats: más minimalistas */ .clp-stat-card { border-radius: 14px; padding: 0.9rem 1.3rem; min-width: 88px; } .clp-stat-card strong { font-size: 1.8rem; letter-spacing: -0.03em; } /* ============================================================ 5. STICKY STACK — Navbar + Sortbar + Subcat layout coordinado ============================================================ Estructura sticky en cascada: - Navbar: fixed top: 0 h: 65px (independiente de scroll) - Sortbar: sticky top: 65 z: 40 (debajo del navbar) - SubcatStrip: sticky top: ~ z: 39 (debajo del sortbar) - Sidebar: sticky top: 81 (navbar + 16px breathing) */ :root { --navbar-height: 64px; --sticky-offset: 64px; } /* Sortbar — sin sticky, fluye con el scroll */ body.clp-theme .clp-sortbar { position: static !important; top: unset !important; z-index: auto; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(200%) blur(24px); -webkit-backdrop-filter: saturate(200%) blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-top: 0.95rem; } /* SubcatStrip — sin sticky, fluye con el scroll */ body.clp-theme .clp-subcat-strip { position: static !important; top: unset !important; z-index: auto; } /* Sidebar — sticky bajo el navbar con respiro, scroll interno cuando excede */ body.clp-theme .clp-sidebar { position: sticky; top: calc(var(--sticky-offset) + 16px) !important; max-height: calc(100vh - var(--sticky-offset) - 32px) !important; overflow-y: auto; overscroll-behavior: contain; } /* En mobile las cosas se desactivan o adaptan */ @media (max-width: 1024px) { body.clp-theme .clp-sidebar { position: static !important; max-height: none !important; } body.clp-theme .clp-subcat-strip { top: var(--sticky-offset); } } /* Original sortbar styles (preservados pero con override de top abajo) */ .clp-sortbar { background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(200%) blur(24px); -webkit-backdrop-filter: saturate(200%) blur(24px); border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding-top: 0.95rem; } .clp-sortbar.is-stuck { background: rgba(255, 255, 255, 0.98); box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 20px -8px rgba(0,0,0,0.08); border-bottom-color: transparent; } /* Botón Filtros: borde sutil */ .clp-filter-toggle { border-color: rgba(0, 0, 0, 0.18); border-radius: 10px; background: #ffffff; box-shadow: none; color: var(--prem-negro); font-size: 0.875rem; padding: 0.6rem 1.1rem; font-weight: 600; } .clp-filter-toggle:hover { border-color: var(--cat-clr, #3b82f6); background: #ffffff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, transparent); transform: none; } /* Select ordenar: limpio */ .clp-select { border-color: rgba(0, 0, 0, 0.18); background: #ffffff; box-shadow: none; font-size: 0.875rem; font-weight: 600; color: var(--prem-negro); border-radius: 10px; padding: 0.6rem 2.4rem 0.6rem 0.95rem; min-width: 170px; } .clp-select:hover, .clp-select:focus { border-color: var(--cat-clr, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-clr, #3b82f6) 12%, transparent); } /* Presets: pill minimalistas */ .clp-preset { background: var(--prem-blanco); border: 1px solid rgba(0,0,0,0.12); color: #1d1d1f; border-radius: 100px; font-size: 0.82rem; font-weight: 600; padding: 0.42rem 1rem; transition: all 0.2s ease; } .clp-preset:hover { border-color: var(--cat-clr, #3b82f6); color: var(--cat-clr, #3b82f6); background: color-mix(in srgb, var(--cat-clr, #3b82f6) 5%, #fff); } .clp-preset[aria-pressed="true"] { background: var(--prem-negro); border-color: var(--prem-negro); color: #fff; } /* ============================================================ SEARCH BAR — ENHANCED (Apple/Stripe style) Más contraste, mejor accesibilidad, atajo de teclado visible ============================================================ */ /* Container del search */ body.clp-theme .clp-search, body.clp-theme .clp-search--enhanced { position: relative; display: flex; align-items: center; flex: 1 1 320px; min-width: 240px; max-width: 480px; } /* Ícono — más grande y con color acento */ body.clp-theme .clp-search-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--prem-gris-400); font-size: 0.95rem; pointer-events: none; transition: color 0.2s ease; z-index: 2; } body.clp-theme .clp-search-input:focus ~ .clp-search-ic, body.clp-theme .clp-search--enhanced:focus-within .clp-search-ic { color: var(--cat-clr, #3b82f6); } /* Input — más contraste, border visible, padding amplio */ body.clp-theme .clp-search-input, body.clp-theme .clp-search--enhanced .clp-search-input { width: 100%; height: 42px; padding: 0 70px 0 42px; background: var(--prem-blanco); border: 1.5px solid rgba(0, 0, 0, 0.14); border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); font-size: 0.9rem; font-weight: 500; color: var(--prem-negro); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; outline: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; } body.clp-theme .clp-search-input::placeholder { color: var(--prem-gris-400); font-weight: 500; opacity: 1; } body.clp-theme .clp-search-input:hover { border-color: rgba(0, 0, 0, 0.24); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06); } body.clp-theme .clp-search-input:focus { background: #fff; border-color: var(--cat-clr, #3b82f6); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent), 0 2px 8px rgba(0, 0, 0, 0.06); } /* Quitar la X nativa del input search */ body.clp-theme .clp-search-input::-webkit-search-cancel-button, body.clp-theme .clp-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } /* Atajo de teclado visible "/" */ body.clp-theme .clp-search-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; background: var(--prem-gris-100); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; font-family: 'Space Grotesk', system-ui, monospace; font-size: 0.72rem; font-weight: 700; color: var(--prem-gris-400); pointer-events: none; transition: opacity 0.18s ease; user-select: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } body.clp-theme .clp-search--enhanced:focus-within .clp-search-kbd, body.clp-theme .clp-search-input:not(:placeholder-shown) ~ .clp-search-kbd { opacity: 0; pointer-events: none; } /* Botón clear (X) — mejor visible y accesible */ body.clp-theme .clp-search-clear[hidden] { display: none !important; } body.clp-theme .clp-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 28px; height: 28px; background: rgba(0, 0, 0, 0.06); border: none; border-radius: 50%; color: var(--prem-gris-600); font-size: 0.7rem; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2; } body.clp-theme .clp-search-clear:hover { background: var(--prem-negro); color: var(--prem-blanco); transform: translateY(-50%) scale(1.1); } body.clp-theme .clp-search-clear:focus-visible { outline: 2px solid var(--cat-clr, #3b82f6); outline-offset: 2px; } /* Helper visualmente oculto (a11y) */ body.clp-theme .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Mobile — más amplio y prominente */ @media (max-width: 768px) { body.clp-theme .clp-search, body.clp-theme .clp-search--enhanced { flex: 1 1 100%; max-width: none; } body.clp-theme .clp-search-input { height: 44px; font-size: 1rem; padding-right: 52px; } body.clp-theme .clp-search-kbd { display: none; /* Ocultar atajo en mobile */ } } /* ============================================================ 6. SUBCATEGORY STRIP — Píldoras más elegantes ============================================================ */ .clp-subcat-strip { background: var(--prem-blanco); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 0.75rem 0; } .clp-subcat-pill { background: var(--prem-blanco); border: 1px solid rgba(0,0,0,0.12); color: var(--prem-gris-600); border-radius: 100px; font-size: 0.82rem; font-weight: 600; padding: 0.45rem 1rem; transition: all 0.2s ease; } .clp-subcat-pill:hover { background: var(--prem-gris-100); border-color: transparent; color: var(--prem-negro); box-shadow: none; transform: none; } .clp-subcat-pill.active { background: var(--prem-negro); border-color: var(--prem-negro); color: var(--prem-blanco); box-shadow: none; } .clp-subcat-count { background: rgba(0,0,0,0.07); color: inherit; font-size: 0.68rem; padding: 0.1rem 0.45rem; } .clp-subcat-pill.active .clp-subcat-count { background: rgba(255,255,255,0.18); } /* ============================================================ 7. LAYOUT GENERAL — Más espacio, más lujo ============================================================ */ .clp-layout { padding: 2.5rem 0 6rem; background: var(--prem-blanco); } .clp-layout-inner { grid-template-columns: 264px 1fr; gap: 2.5rem; } @media (max-width: 1024px) { .clp-layout-inner { grid-template-columns: 1fr; } } /* ============================================================ 9. GRID DE PRODUCTOS — Más espacio, cards más grandes ============================================================ */ .clp-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1.75rem 1.5rem; } .clp-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1.75rem 1.5rem; } /* ============================================================ 10. PRODUCT CARDS — Rediseño premium Apple-style ============================================================ */ body.clp-theme .clp-card { background: var(--prem-blanco); border: none; border-radius: var(--prem-radio-card); box-shadow: var(--prem-sombra-card); transition: transform var(--prem-transicion), box-shadow var(--prem-transicion); overflow: hidden; position: relative; will-change: transform; } body.clp-theme .clp-card:hover { transform: translateY(-8px) !important; box-shadow: var(--prem-sombra-hover); border-color: transparent; } /* Imagen wrapper: fondo blanco puro, imagen con más presencia */ .clp-card .product-image-wrapper { background: var(--prem-gris-100); border-bottom: none; padding-top: 88%; overflow: hidden; } /* Imagen: con transición suave premium */ body.clp-theme .clp-card .product-image-wrapper img { width: 70%; height: 70%; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } body.clp-theme .clp-card:hover .product-image-wrapper img { transform: translate(-50%, -50%) scale(1.08) !important; } /* Info: padding generoso */ .clp-card .product-info { padding: 1.25rem 1.35rem 1.4rem; } /* Marca: texto puro sin fondo de badge */ .clp-card .product-brand { display: inline-block; font-size: 0.65rem; font-weight: 700; color: var(--cat-clr, #3b82f6); text-transform: uppercase; letter-spacing: 0.12em; background: none; padding: 0; margin-bottom: 0.35rem; } /* Nombre: tipografía premium con tracking negativo */ .clp-card .product-name { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--prem-negro); margin: 0 0 0.55rem; min-height: unset; -webkit-line-clamp: 2; } .clp-card .product-name a { color: var(--prem-negro); text-decoration: none; } .clp-card .product-name a:hover { color: var(--cat-clr, #3b82f6); } /* Rating: más sutil y pequeño */ .clp-card .product-rating { margin-bottom: 0.65rem; gap: 0.3rem; } .clp-card .product-rating-stars { font-size: 0.7rem; } .clp-card .product-rating-stars i { color: #f59e0b; } .clp-card .product-rating-stars i.empty { color: rgba(0,0,0,0.12); } .clp-card .product-rating-count { font-size: 0.72rem; color: var(--prem-gris-400); } .clp-card .product-rating--empty { font-size: 0.72rem; color: rgba(0,0,0,0.2); font-style: normal; } /* Precios: jerarquía clara y dominante */ .clp-card .product-prices { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.1rem; } /* Especificidad aumentada para sobreescribir critical-bundle */ body.clp-theme .clp-card .product-price-current, body.clp-theme .clp-content .product-price-current { font-family: 'Space Grotesk', 'DM Sans', system-ui, sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.025em; color: var(--prem-negro) !important; } .clp-card .product-price-old { font-size: 0.82rem; color: rgba(0,0,0,0.32); text-decoration: line-through; } /* CTA — Botón premium: negro sólido, hover con color acento */ .clp-card .btn-add-cart { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.78rem 1rem; background: var(--prem-negro); color: var(--prem-blanco); border: none; border-radius: 12px; font-family: 'DM Sans', system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; box-shadow: none; transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; } .clp-card .btn-add-cart i { font-size: 0.8rem; opacity: 0.75; } .clp-card .btn-add-cart:hover { background: var(--cat-clr, #3b82f6); transform: translateY(-1px); filter: none; box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--cat-clr, #3b82f6) 60%, transparent); } .clp-card .btn-add-cart:active { transform: translateY(0); box-shadow: none; } .clp-card .btn-add-cart:disabled { background: rgba(0,0,0,0.06); color: rgba(0,0,0,0.3); border: none; box-shadow: none; cursor: not-allowed; } /* Overlay: gradiente dramático Apple-style, full coverage */ body.clp-theme .clp-card .product-overlay { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.55) 100% ); opacity: 0; visibility: hidden; display: flex; align-items: flex-end; justify-content: center; gap: 0.75rem; padding: 0 0 1.25rem; transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s cubic-bezier(0.22, 1, 0.36, 1); } body.clp-theme .clp-card:hover .product-overlay { opacity: 1; visibility: visible; } /* Botones de overlay: aparecen desde abajo con stagger */ body.clp-theme .clp-card .overlay-btn { background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 0, 0, 0.06); color: var(--prem-negro); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transform: translateY(16px); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, color 0.2s ease; } body.clp-theme .clp-card:hover .overlay-btn { transform: translateY(0); opacity: 1; } body.clp-theme .clp-card:hover .overlay-btn:nth-child(1) { transition-delay: 0.06s; } body.clp-theme .clp-card:hover .overlay-btn:nth-child(2) { transition-delay: 0.12s; } body.clp-theme .clp-card .overlay-btn:hover { background: var(--prem-negro); color: var(--prem-blanco); border-color: var(--prem-negro); transform: translateY(-2px) scale(1.06); } /* Favorito: subtle por defecto, prominente en hover */ body.clp-theme .clp-card .product-favorite { position: absolute; top: 0.75rem; right: 0.75rem; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); width: 38px; height: 38px; min-width: 38px; min-height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: rgba(0, 0, 0, 0.45); opacity: 0; transform: scale(0.85); transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, background 0.2s ease; z-index: 5; } body.clp-theme .clp-card:hover .product-favorite, body.clp-theme .clp-card .product-favorite.active { opacity: 1; transform: scale(1); } body.clp-theme .clp-card .product-favorite:hover { color: #ef4444; background: #fff; transform: scale(1.12); } body.clp-theme .clp-card .product-favorite.active { color: #ef4444; } /* ============================================================ BADGES — Premium v2 Colores: paleta navy+blue armonizada Efecto: glass highlight diagonal + glow de iconos + shimmer en descuento ============================================================ */ /* ── Contenedor: columna compacta con stagger ── */ .clp-badges { display: flex; flex-direction: column; gap: 0.35rem; } /* ── Base de badge ── */ .clp-badge { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.34rem 0.8rem; border-radius: 100px; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase; line-height: 1; white-space: nowrap; border: 1px solid transparent; cursor: default; transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease, filter 0.22s ease; /* Entrada escalonada desde arriba */ animation: badgeReveal 0.45s cubic-bezier(0.34,1.56,0.64,1) both; } /* Stagger entre badges del mismo producto */ .clp-badges .clp-badge:nth-child(1) { animation-delay: 0.04s; } .clp-badges .clp-badge:nth-child(2) { animation-delay: 0.11s; } .clp-badges .clp-badge:nth-child(3) { animation-delay: 0.18s; } .clp-badges .clp-badge:nth-child(4) { animation-delay: 0.25s; } @keyframes badgeReveal { from { opacity: 0; transform: scale(0.65) translateY(-6px); filter: blur(3px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } /* Glass highlight diagonal — aplicado a TODAS las badges */ .clp-badge::before { content: ''; position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.07) 40%, transparent 100% ); border-radius: inherit; pointer-events: none; z-index: 1; } /* Iconos con glow suave del color del propio badge */ .clp-badge i { position: relative; z-index: 2; font-size: 0.6rem; filter: drop-shadow(0 0 4px currentColor); opacity: 0.95; } /* Texto sobre el highlight */ .clp-badge > * { position: relative; z-index: 2; } /* Hover — leve lift */ .clp-badge:hover { transform: scale(1.06) translateY(-1px); filter: brightness(1.08); } /* ── Descuento: color de categoría + shimmer animado ── */ .clp-badge--discount { background: var(--cat-clr, #3b82f6); color: #fff; border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, rgba(255,255,255,0.4)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--cat-clr, #3b82f6) 40%, transparent), 0 4px 14px -3px color-mix(in srgb, var(--cat-clr, #3b82f6) 65%, transparent), inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 0 rgba(0,0,0,0.12); } /* Rayo de luz barriendo — solo en descuento para llamar la atención */ .clp-badge--discount::after { content: ''; position: absolute; top: -40%; left: -80%; width: 45%; height: 180%; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,0.38) 50%, transparent 100% ); transform: skewX(-18deg); animation: badgeShimmer 3.5s ease-in-out infinite; animation-delay: 1.2s; pointer-events: none; z-index: 3; } @keyframes badgeShimmer { 0%, 45% { left: -80%; opacity: 1; } 55%, 100% { left: 130%; opacity: 0; } } /* ── Nuevo: navy profundo — color base del sistema ── */ .clp-badge--new { background: #0f172a; color: #c7d6f0; border-color: rgba(199,214,240,0.18); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px -3px rgba(15,23,42,0.55), inset 0 1px 0 rgba(255,255,255,0.11), inset 0 -1px 0 rgba(0,0,0,0.25); letter-spacing: 0.1em; } /* ── Top vendidos: ámbar oscuro sobre navy carbón ── */ .clp-badge--topseller { background: #18120a; color: #fbbf24; border-color: rgba(251,191,36,0.28); box-shadow: 0 0 0 1px rgba(251,191,36,0.12), 0 4px 14px -3px rgba(251,191,36,0.28), inset 0 1px 0 rgba(251,191,36,0.18), inset 0 -1px 0 rgba(0,0,0,0.3); } /* ── Envío gratis: teal-navy — gama fría ── */ .clp-badge--ship { background: #081e1e; color: #5eead4; border-color: rgba(94,234,212,0.22); box-shadow: 0 0 0 1px rgba(94,234,212,0.1), 0 4px 14px -3px rgba(94,234,212,0.2), inset 0 1px 0 rgba(94,234,212,0.16), inset 0 -1px 0 rgba(0,0,0,0.25); } /* ── Pocas unidades: alerta cálida contenida ── */ .clp-badge--lowstock { background: #200a00; color: #fb923c; border-color: rgba(251,146,60,0.25); box-shadow: 0 0 0 1px rgba(251,146,60,0.1), 0 4px 14px -3px rgba(251,146,60,0.25), inset 0 1px 0 rgba(251,146,60,0.15), inset 0 -1px 0 rgba(0,0,0,0.3); } /* Sin animación para quienes lo prefieren */ @media (prefers-reduced-motion: reduce) { .clp-badge, .clp-badge--discount::after { animation: none; } } /* Stock out */ .clp-card .product-stock--out { font-size: 0.75rem; font-weight: 600; color: rgba(239, 68, 68, 0.85); margin-bottom: 0.75rem; } /* ============================================================ 11. COMPARE TOGGLE — Reposicionado al top-left del wrapper ============================================================ */ body.clp-theme .clp-card .clp-compare-toggle { position: absolute !important; top: 0.75rem !important; left: auto !important; right: 3.5rem !important; /* Espacio para el corazón a la derecha */ bottom: auto !important; z-index: 6; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 100px; padding: 0.32rem 0.7rem 0.32rem 0.4rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(-4px); transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1), transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); gap: 0.4rem; height: 30px; align-items: center; } body.clp-theme .clp-card:hover .clp-compare-toggle, body.clp-theme .clp-card .clp-compare-toggle:has(input:checked) { opacity: 1; transform: translateY(0); } body.clp-theme .clp-card .clp-compare-box { width: 16px !important; height: 16px !important; border-width: 1.5px !important; } body.clp-theme .clp-card .clp-compare-label { font-size: 0.65rem !important; color: var(--prem-gris-600) !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; } /* ============================================================ 12. TOP STRIP — Compacto horizontal estilo Apple/Best Buy ============================================================ */ /* Ocultar el viejo .clp-topcat completamente (legacy) */ body.clp-theme .clp-topcat { display: none !important; } body.clp-theme .clp-topstrip { margin-bottom: 2.5rem; padding: 0; } body.clp-theme .clp-topstrip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding: 0 0.25rem; } body.clp-theme .clp-topstrip-title { font-family: 'Urbanist', sans-serif; font-size: clamp(1.05rem, 2vw, 1.4rem); font-weight: 800; letter-spacing: -0.02em; color: var(--prem-negro); margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; } body.clp-theme .clp-topstrip-title i { color: #f97316; font-size: 0.95em; } body.clp-theme .clp-topstrip-hint { font-size: 0.75rem; font-weight: 600; color: var(--prem-gris-400); letter-spacing: 0.02em; } /* Grid horizontal — 3 cards lado a lado en desktop */ body.clp-theme .clp-topstrip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } @media (max-width: 1024px) { body.clp-theme .clp-topstrip-grid { grid-template-columns: 1fr; } } /* Card horizontal compacta */ body.clp-theme .clp-topstrip-card { position: relative; display: grid; grid-template-columns: auto 88px 1fr auto; align-items: center; gap: 0.85rem; background: var(--prem-blanco); border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 14px; padding: 0.75rem 0.85rem 0.75rem 0.6rem; box-shadow: var(--prem-sombra-card); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease; } body.clp-theme .clp-topstrip-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.16); border-color: rgba(0, 0, 0, 0.1); } /* Rank — número grande con color por posición */ body.clp-theme .clp-topstrip-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--prem-negro); color: #fff; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.8rem; font-weight: 800; letter-spacing: -0.02em; flex-shrink: 0; } body.clp-theme .clp-topstrip-card[data-rank="1"] .clp-topstrip-rank { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.35); } body.clp-theme .clp-topstrip-card[data-rank="2"] .clp-topstrip-rank { background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%); } body.clp-theme .clp-topstrip-card[data-rank="3"] .clp-topstrip-rank { background: linear-gradient(135deg, #b45309 0%, #92400e 100%); } /* Imagen 80×80 cuadrada */ body.clp-theme .clp-topstrip-img { display: block; width: 80px; height: 80px; border-radius: 10px; background: var(--prem-gris-100); overflow: hidden; flex-shrink: 0; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } body.clp-theme .clp-topstrip-img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; } body.clp-theme .clp-topstrip-card:hover .clp-topstrip-img { transform: scale(1.04); } /* Body de info — flex column */ body.clp-theme .clp-topstrip-body { display: flex; flex-direction: column; gap: 0.18rem; min-width: 0; } body.clp-theme .clp-topstrip-brand { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--cat-clr, #3b82f6); line-height: 1; } body.clp-theme .clp-topstrip-name { font-size: 0.85rem; font-weight: 600; line-height: 1.25; margin: 0; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } body.clp-theme .clp-topstrip-name a { color: var(--prem-negro); text-decoration: none; } body.clp-theme .clp-topstrip-name a:hover { color: var(--cat-clr, #3b82f6); } body.clp-theme .clp-topstrip-meta { display: flex; align-items: baseline; gap: 0.65rem; margin-top: 0.15rem; } body.clp-theme .clp-topstrip-rating { font-size: 0.72rem; font-weight: 600; color: var(--prem-gris-400); display: inline-flex; align-items: center; gap: 0.22rem; } body.clp-theme .clp-topstrip-rating i { color: #f59e0b; font-size: 0.7rem; } body.clp-theme .clp-topstrip-price { font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.95rem; font-weight: 800; color: var(--prem-negro); letter-spacing: -0.02em; } /* CTA — solo botón circular con bag icon */ body.clp-theme .clp-topstrip-cta { width: 38px; height: 38px; border-radius: 50%; background: var(--prem-negro); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: background 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease; font-size: 0.85rem; } body.clp-theme .clp-topstrip-cta:hover { background: var(--cat-clr, #3b82f6); transform: scale(1.08); box-shadow: 0 8px 18px -4px color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, transparent); } @media (max-width: 480px) { body.clp-theme .clp-topstrip-card { grid-template-columns: auto 64px 1fr auto; gap: 0.6rem; padding: 0.6rem; } body.clp-theme .clp-topstrip-img { width: 64px; height: 64px; } body.clp-theme .clp-topstrip-name { font-size: 0.8rem; } } /* Legacy .clp-topcat-* — kept for compatibility (the wrapper .clp-topcat is hidden via display:none above) */ .clp-topcat-head { text-align: center; margin-bottom: 1.75rem; } .clp-topcat-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--prem-gris-400); display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: 0.5rem; } .clp-topcat-title { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 800; letter-spacing: -0.03em; color: var(--prem-negro); margin: 0 0 0.35rem; font-family: 'Urbanist', sans-serif; } .clp-topcat-sub { font-size: 0.9rem; color: var(--prem-gris-400); margin: 0; } .clp-topcat-card { background: var(--prem-blanco); border: 1px solid rgba(0,0,0,0.06); border-radius: 18px; box-shadow: var(--prem-sombra-card); padding: 1.5rem; transition: transform var(--prem-transicion), box-shadow var(--prem-transicion); } .clp-topcat-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px -10px rgba(0,0,0,0.14); } .clp-topcat-medal { background: none; } .clp-topcat-brand { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat-clr, #3b82f6); } .clp-topcat-name a { font-size: 0.9rem; font-weight: 600; color: var(--prem-negro); letter-spacing: -0.01em; } .clp-topcat-price { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--prem-negro); font-family: 'Space Grotesk', system-ui, sans-serif; margin-bottom: 0.85rem; } .clp-topcat-cta { background: var(--prem-negro); color: var(--prem-blanco); border-radius: 10px; padding: 0.6rem 1rem; font-size: 0.8rem; font-weight: 600; border: none; cursor: pointer; width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.45rem; transition: background 0.2s ease; } .clp-topcat-cta:hover { background: var(--cat-clr, #3b82f6); } /* ============================================================ 13. SUBCATEGORY VISUAL CARDS — Estilo premium ============================================================ */ .clp-subcat-cards { margin-bottom: 2.5rem; } .clp-subcat-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; } .clp-sc-card { background: var(--prem-gris-100); border: 1px solid rgba(0,0,0,0.06); border-radius: 16px; padding: 1.25rem 1rem; gap: 0.75rem; transition: background 0.22s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease; text-align: center; flex-direction: column; align-items: center; cursor: pointer; display: flex; position: relative; overflow: hidden; } .clp-sc-card:hover { background: var(--prem-blanco); box-shadow: 0 8px 30px -8px rgba(0,0,0,0.12); transform: translateY(-3px); border-color: rgba(0,0,0,0.08); } .clp-sc-card__img { width: 100%; height: 100px; border-radius: 10px; background-size: cover; background-position: center; transition: transform 0.38s cubic-bezier(0.22,1,0.36,1); } .clp-sc-card:hover .clp-sc-card__img { transform: scale(1.04); } .clp-sc-card__img--empty { background: rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; color: var(--prem-gris-400); font-size: 1.5rem; } .clp-sc-card__info { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; } .clp-sc-card__name { font-size: 0.875rem; font-weight: 700; color: var(--prem-negro); letter-spacing: -0.01em; } .clp-sc-card__count { font-size: 0.72rem; color: var(--prem-gris-400); } .clp-sc-card__arrow { display: none; } /* ============================================================ 14. FAMILIAS DE PRODUCTOS — Cards uniformes con grid de productos ============================================================ */ .clp-families { margin-bottom: 3rem; } /* Grid igual que el de productos: misma cadencia visual */ body.clp-theme .clp-families-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 1.75rem 1.5rem; } @media (min-width: 1280px) { body.clp-theme .clp-families-rows { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 2rem 1.75rem; } } @media (max-width: 768px) { body.clp-theme .clp-families-rows { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.75rem; } } /* Family card — hereda de .clp-card el lift + sombra */ body.clp-theme .fam-card { position: relative; display: flex; flex-direction: column; } /* Badge de variantes — esquina superior izquierda, premium con tooltip */ body.clp-theme .fam-card__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.32rem 0.65rem; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: #fff; border-radius: 100px; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: help; transform: scale(0.92); opacity: 0; animation: famBadgeReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s forwards; transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes famBadgeReveal { 0% { opacity: 0; transform: scale(0.5) translateY(-8px); } 60% { opacity: 1; transform: scale(1.08) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* Pulse continuo sutil cada ~6s para atraer la mirada */ body.clp-theme .fam-card__badge::after { content: ''; position: absolute; inset: -2px; border-radius: 100px; border: 2px solid rgba(15, 23, 42, 0.3); opacity: 0; pointer-events: none; animation: famBadgePulse 6s ease-out infinite; animation-delay: 2s; } @keyframes famBadgePulse { 0%, 100% { opacity: 0; transform: scale(1); } 8% { opacity: 0.8; transform: scale(1); } 18% { opacity: 0; transform: scale(1.5); } } body.clp-theme .fam-card__badge i { font-size: 0.62rem; opacity: 0.9; } body.clp-theme .fam-card:hover .fam-card__badge { transform: scale(1.08); } /* Tooltip rico al hover del badge */ body.clp-theme .fam-card__badge[data-fam-tooltip]::before { content: attr(data-fam-tooltip); position: absolute; top: calc(100% + 8px); left: 0; background: var(--prem-negro); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.5rem 0.75rem; border-radius: 8px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); opacity: 0; transform: translateY(-4px); transition: opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1), transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; z-index: 10; text-transform: none; font-family: 'DM Sans', system-ui, sans-serif; } body.clp-theme .fam-card__badge[data-fam-tooltip]:hover::before { opacity: 1; transform: translateY(0); } /* Flecha del tooltip */ body.clp-theme .fam-card__badge[data-fam-tooltip]::after { /* Override del pulse cuando hay tooltip — el tooltip es prioridad */ } /* === COLOR SWATCHES estilo Apple Store === */ body.clp-theme .fam-card__swatches { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.85rem; flex-wrap: wrap; } body.clp-theme .fam-card__swatch { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--swatch, #cccccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08); cursor: help; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease; position: relative; } body.clp-theme .fam-card__swatch:hover { transform: scale(1.25); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.18), 0 0 0 2px #fff; z-index: 2; } body.clp-theme .fam-card__swatch-more { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 0.4rem; background: var(--prem-gris-100); color: var(--prem-gris-400); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; border-radius: 100px; border: 1px dashed rgba(0, 0, 0, 0.14); } /* Image link wrapper */ body.clp-theme .fam-card__img-link { display: block; text-decoration: none; } /* Info: padding consistente con product-info */ body.clp-theme .fam-card__info { flex: 1; display: flex; flex-direction: column; } /* Nombre del modelo: tipografía premium */ body.clp-theme .fam-card__name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; margin: 0 0 0.5rem; } body.clp-theme .fam-card__name a { color: var(--prem-negro); text-decoration: none; } body.clp-theme .fam-card__name a:hover { color: var(--cat-clr, #3b82f6); } /* Descripción corta */ body.clp-theme .fam-card__desc { font-size: 0.78rem; line-height: 1.5; color: var(--prem-gris-400); margin: 0 0 0.85rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Bloque de precio */ body.clp-theme .fam-card__price-block { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin-bottom: 0.85rem; } body.clp-theme .fam-card__price-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--prem-gris-400); } body.clp-theme .fam-card .product-price-current { font-size: 1.2rem; } body.clp-theme .fam-card__price-range { font-size: 0.78rem; color: var(--prem-gris-400); font-weight: 600; } /* Mini chips de almacenamiento */ body.clp-theme .fam-card__chips { display: flex; flex-wrap: wrap; gap: 0.32rem; margin-bottom: 1rem; } body.clp-theme .fam-card__chip { display: inline-flex; align-items: center; padding: 0.22rem 0.55rem; background: var(--prem-gris-100); border: 1px solid rgba(0, 0, 0, 0.06); color: var(--prem-gris-600); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; border-radius: 6px; line-height: 1.4; transition: background 0.2s ease, border-color 0.2s ease; } body.clp-theme .fam-card:hover .fam-card__chip { background: #fff; border-color: rgba(0, 0, 0, 0.1); } body.clp-theme .fam-card__chip--more { background: transparent; border-style: dashed; color: var(--prem-gris-400); } /* CTA — igual estructura que .btn-add-cart pero con flecha */ body.clp-theme .fam-card__cta { margin-top: auto; text-decoration: none; position: relative; overflow: hidden; } body.clp-theme .fam-card__cta i { font-size: 0.78rem; opacity: 0.85; } body.clp-theme .fam-card__cta-arrow { margin-left: auto; font-size: 0.7rem !important; transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1); } body.clp-theme .fam-card:hover .fam-card__cta-arrow { transform: translateX(4px); } /* Single-variant: visualmente más simple */ body.clp-theme .fam-card--single .fam-card__price-label { display: none; } /* Header "Catálogo por modelo" — sobreescribir blanco invisible */ body.clp-theme .clp-families .clp-families-title, body.clp-theme .clp-families-head .clp-families-title { color: var(--prem-negro) !important; font-family: 'Urbanist', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 0.35rem; } body.clp-theme .clp-families .clp-families-sub { color: var(--prem-gris-400) !important; } /* ============================================================ 22b. FILTRO ALMACENAMIENTO — chips estilo Apple Configurator ============================================================ */ body.clp-theme .clp-storage-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } body.clp-theme .clp-storage-chip { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.42rem 0.75rem; background: var(--prem-blanco); border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 10px; cursor: pointer; transition: all 0.22s ease; font-family: 'Space Grotesk', system-ui, sans-serif; } body.clp-theme .clp-storage-chip input { position: absolute; opacity: 0; pointer-events: none; } body.clp-theme .clp-storage-chip:hover { border-color: var(--prem-negro); transform: translateY(-1px); } body.clp-theme .clp-storage-chip:has(input:checked), body.clp-theme .clp-storage-chip.is-active { background: var(--prem-negro); border-color: var(--prem-negro); color: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } body.clp-theme .clp-storage-chip__label { font-size: 0.78rem; font-weight: 700; letter-spacing: -0.01em; color: var(--prem-negro); } body.clp-theme .clp-storage-chip:has(input:checked) .clp-storage-chip__label { color: #fff; } body.clp-theme .clp-storage-chip__count { font-size: 0.62rem; font-weight: 700; color: var(--prem-gris-400); background: var(--prem-gris-100); padding: 0.05rem 0.4rem; border-radius: 100px; line-height: 1.4; transition: all 0.2s ease; } body.clp-theme .clp-storage-chip:has(input:checked) .clp-storage-chip__count { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85); } /* ============================================================ 23. FILTRO COLOR — swatches en sidebar (Apple Store style) ============================================================ */ body.clp-theme .clp-color-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 0.5rem 0.4rem; } body.clp-theme .clp-color-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.28rem; padding: 0.45rem 0.3rem 0.35rem; border-radius: 10px; cursor: pointer; transition: background 0.18s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } body.clp-theme .clp-color-swatch:hover { background: rgba(0, 0, 0, 0.04); } body.clp-theme .clp-color-swatch input { position: absolute; opacity: 0; pointer-events: none; } body.clp-theme .clp-color-swatch__circle { width: 28px; height: 28px; border-radius: 50%; background: var(--swatch, #cccccc); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08); display: grid; place-items: center; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease; } body.clp-theme .clp-color-swatch__circle i { color: #fff; font-size: 0.65rem; opacity: 0; transform: scale(0.4); transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } body.clp-theme .clp-color-swatch input:checked + .clp-color-swatch__circle { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 0 0 2px var(--prem-blanco), 0 0 0 4px var(--prem-negro), 0 4px 12px rgba(0, 0, 0, 0.18); } body.clp-theme .clp-color-swatch input:checked + .clp-color-swatch__circle i { opacity: 1; transform: scale(1); } body.clp-theme .clp-color-swatch__name { font-size: 0.66rem; font-weight: 600; color: var(--prem-gris-600); letter-spacing: -0.005em; text-align: center; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } body.clp-theme .clp-color-swatch__count { font-size: 0.6rem; font-weight: 700; color: var(--prem-gris-400); background: var(--prem-gris-100); padding: 0 0.4rem; border-radius: 100px; line-height: 1.6; } body.clp-theme .clp-color-swatch.is-active .clp-color-swatch__name, body.clp-theme .clp-color-swatch input:checked ~ .clp-color-swatch__name { color: var(--prem-negro); font-weight: 700; } /* ============================================================ 24. CHECK FEATURED — "Solo disponibles" más prominente ============================================================ */ body.clp-theme .clp-check--featured { background: linear-gradient(135deg, color-mix(in srgb, #10b981 8%, var(--prem-blanco)) 0%, var(--prem-blanco) 60%); border: 1px solid color-mix(in srgb, #10b981 20%, transparent); border-radius: 10px; padding: 0.55rem 0.65rem !important; margin-bottom: 0.4rem; } body.clp-theme .clp-check--featured:hover { background: linear-gradient(135deg, color-mix(in srgb, #10b981 14%, var(--prem-blanco)) 0%, var(--prem-blanco) 60%) !important; border-color: color-mix(in srgb, #10b981 35%, transparent); } body.clp-theme .clp-check--featured input:checked + .clp-check-box { background: #10b981 !important; border-color: #10b981 !important; } body.clp-theme .clp-check-icon { color: #10b981; font-size: 0.75rem; margin-right: 0.18rem; } /* ============================================================ 24b. LOADING STATES — sidebar + count durante filtrado ============================================================ */ body.clp-theme .clp-sidebar.is-filtering { pointer-events: none; position: relative; } body.clp-theme .clp-sidebar.is-filtering::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); border-radius: inherit; z-index: 5; animation: clpFilteringPulse 1.2s ease-in-out infinite; pointer-events: none; } @keyframes clpFilteringPulse { 0%, 100% { background: rgba(255, 255, 255, 0.45); } 50% { background: rgba(255, 255, 255, 0.65); } } body.clp-theme .clp-sidebar.is-filtering::before { content: '\f3f4'; /* fa-circle-notch */ font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6; color: var(--cat-clr, #3b82f6); font-size: 1.5rem; animation: clpSpinIcon 0.8s linear infinite; } @keyframes clpSpinIcon { to { transform: translate(-50%, -50%) rotate(360deg); } } /* Count "13 resultados" — animación sutil al actualizarse */ body.clp-theme #clpTotalCount { display: inline-block; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease; } body.clp-theme #clpTotalCount.is-updating { opacity: 0.45; transform: scale(0.85); } body.clp-theme #clpTotalCount.just-updated { color: var(--cat-clr, #3b82f6); transform: scale(1.18); animation: clpCountFlash 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes clpCountFlash { 0% { color: var(--cat-clr, #3b82f6); transform: scale(1.18); } 60% { color: var(--cat-clr, #3b82f6); transform: scale(1.05); } 100% { color: var(--prem-negro); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { body.clp-theme .clp-sidebar.is-filtering::before, body.clp-theme .clp-sidebar.is-filtering::after { animation: none; } body.clp-theme #clpTotalCount.just-updated { animation: none; } } /* ============================================================ 24c. RECENT SEARCH DROPDOWN — historial bajo el search input ============================================================ */ body.clp-theme .clp-search { position: relative; } body.clp-theme .clp-recent-search-dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: var(--prem-blanco); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.18); z-index: 100; overflow: hidden; animation: clpRecentReveal 0.22s cubic-bezier(0.22, 1, 0.36, 1); max-width: 360px; min-width: 280px; } @keyframes clpRecentReveal { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } body.clp-theme .clp-recent-search-head { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0.85rem 0.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } body.clp-theme .clp-recent-search-title { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--prem-gris-400); } body.clp-theme .clp-recent-clear-all { background: none; border: none; cursor: pointer; font-size: 0.72rem; font-weight: 700; color: #ef4444; padding: 0.2rem 0.4rem; border-radius: 6px; transition: background 0.18s ease; } body.clp-theme .clp-recent-clear-all:hover { background: rgba(239, 68, 68, 0.08); } body.clp-theme .clp-recent-list { list-style: none; margin: 0; padding: 0.35rem 0; max-height: 320px; overflow-y: auto; } body.clp-theme .clp-recent-item { width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.65rem; background: none; border: none; padding: 0.55rem 0.85rem; cursor: pointer; text-align: left; transition: background 0.15s ease; font-family: inherit; } body.clp-theme .clp-recent-item:hover { background: var(--prem-gris-100); } body.clp-theme .clp-recent-item__icon { color: var(--prem-gris-400); font-size: 0.78rem; } body.clp-theme .clp-recent-item__label { font-size: 0.88rem; color: var(--prem-negro); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } body.clp-theme .clp-recent-item__remove { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--prem-gris-400); font-size: 0.7rem; opacity: 0; transition: opacity 0.18s ease, background 0.18s ease, color 0.18s ease; } body.clp-theme .clp-recent-item:hover .clp-recent-item__remove { opacity: 1; } body.clp-theme .clp-recent-item__remove:hover { background: rgba(239, 68, 68, 0.12); color: #ef4444; } @media (prefers-reduced-motion: reduce) { body.clp-theme .clp-recent-search-dropdown { animation: none; } } /* ============================================================ 24d. PAGINATION URL-BASED — números clickeables (SEO + a11y) ============================================================ */ body.clp-theme .clp-pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.4rem; margin: 2rem 0 1rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.06); } body.clp-theme .clp-page-link { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 0.6rem; background: var(--prem-blanco); border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 10px; font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--prem-negro); text-decoration: none; cursor: pointer; transition: all 0.2s ease; } body.clp-theme .clp-page-link:hover { background: var(--prem-gris-100); border-color: var(--prem-negro); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } body.clp-theme .clp-page-link--current { background: var(--prem-negro); border-color: var(--prem-negro); color: #fff; cursor: default; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); } body.clp-theme .clp-page-prev, body.clp-theme .clp-page-next { background: var(--prem-blanco); } body.clp-theme .clp-page-link:focus-visible { outline: 2px solid var(--cat-clr, #3b82f6); outline-offset: 2px; } body.clp-theme .clp-page-ellipsis { color: var(--prem-gris-400); padding: 0 0.4rem; font-weight: 700; user-select: none; } /* ============================================================ 25. ACTIVE CHIPS BAR — Más visible con borde acento ============================================================ */ body.clp-theme .clp-activechips-row { background: linear-gradient(180deg, color-mix(in srgb, var(--cat-clr, #3b82f6) 5%, transparent), transparent); border-top: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 18%, transparent); padding: 0.7rem 0 0.85rem !important; margin-top: 0.5rem; } body.clp-theme .clp-activechips-title { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--prem-gris-600); } body.clp-theme .clp-activechip { background: var(--prem-blanco); border: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 35%, var(--prem-gris-200)); color: var(--prem-negro); border-radius: 100px; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); } body.clp-theme .clp-activechip:hover { background: var(--prem-negro); color: var(--prem-blanco); border-color: var(--prem-negro); } body.clp-theme .clp-activechip:hover i { background: var(--prem-blanco); color: var(--prem-negro); } body.clp-theme .clp-activechip-clear { color: #ef4444; font-weight: 700; } body.clp-theme .clp-activechip-clear:hover { background: rgba(239, 68, 68, 0.08); border-radius: 100px; } /* Botón Compartir filtros */ body.clp-theme .clp-share-filters { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--prem-blanco); border: 1.5px solid rgba(0, 0, 0, 0.12); color: var(--prem-negro); border-radius: 100px; padding: 0.32rem 0.85rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; margin-left: 0.4rem; transition: all 0.22s ease; } body.clp-theme .clp-share-filters i { font-size: 0.72rem; color: var(--cat-clr, #3b82f6); } body.clp-theme .clp-share-filters:hover { background: var(--prem-negro); color: var(--prem-blanco); border-color: var(--prem-negro); transform: translateY(-1px); } body.clp-theme .clp-share-filters:hover i { color: var(--prem-blanco); } body.clp-theme .clp-share-filters.is-feedback { background: #16a34a; color: #fff; border-color: #16a34a; transform: scale(1.02); } body.clp-theme .clp-share-filters.is-feedback i { color: #fff; } body.clp-theme .clp-share-filters.is-error { background: #ef4444; border-color: #ef4444; } .clp-families-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--prem-gris-400); display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; } .clp-families-title { font-size: clamp(1.3rem, 3vw, 1.75rem); font-weight: 800; letter-spacing: -0.03em; color: var(--prem-negro); margin: 0 0 0.35rem; font-family: 'Urbanist', sans-serif; } .clp-families-sub { font-size: 0.9rem; color: var(--prem-gris-400); margin: 0 0 1.75rem; } /* ============================================================ 15. GRID SEPARATOR — Más elegante ============================================================ */ .clp-grid-sep { color: rgba(0,0,0,0.3); font-size: 0.68rem; letter-spacing: 0.14em; margin: 2rem 0 1.75rem; } .clp-grid-sep::before, .clp-grid-sep::after { background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent); } /* ============================================================ 16. EMPTY STATE — Premium ============================================================ */ .clp-empty { background: var(--prem-gris-100); border: none; border-radius: 20px; } .clp-empty-icon { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.2); border-radius: 50%; } /* ============================================================ 17. LOAD MORE — Botón tipo Apple ============================================================ */ .clp-loadmore-wrap { margin-top: 3rem; text-align: center; } .clp-btn-loadmore { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.9rem 2.75rem; background: var(--prem-blanco); border: 1.5px solid var(--prem-negro); color: var(--prem-negro); border-radius: 100px; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; transition: background 0.22s ease, color 0.22s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1), box-shadow 0.28s ease; font-family: inherit; } .clp-btn-loadmore:hover { background: var(--prem-negro); color: var(--prem-blanco); transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.22); border-color: var(--prem-negro); } .clp-btn-loadmore:active { transform: translateY(0); } .clp-loadmore-hint { margin-top: 0.75rem; font-size: 0.82rem; color: var(--prem-gris-400); } /* ============================================================ 18. SECCIÓN "OTRAS CATEGORÍAS" — Fondo premium con gradiente sutil ============================================================ */ .clp-others { padding: 4.5rem 0 5rem; margin-top: 3rem; background: radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--cat-clr, #3b82f6) 8%, transparent) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, color-mix(in srgb, var(--cat-clr, #3b82f6) 5%, transparent) 0%, transparent 50%), linear-gradient(180deg, #fafafa 0%, #f5f5f7 100%); border-top: 1px solid rgba(0, 0, 0, 0.04); } body.clp-theme .clp-others-head h2, body .clp-others .clp-others-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.03em; color: var(--prem-negro) !important; margin: 0; font-family: 'Urbanist', sans-serif; } .clp-others-all { font-size: 0.875rem; font-weight: 600; color: var(--cat-clr, #3b82f6); text-decoration: none; display: flex; align-items: center; gap: 0.3rem; transition: gap 0.2s ease; } .clp-others-all:hover { gap: 0.55rem; } .clp-others-card { background: var(--prem-blanco); border-radius: 18px; border: 1px solid rgba(0,0,0,0.06); padding: 1.5rem; transition: transform var(--prem-transicion), box-shadow var(--prem-transicion), border-color 0.2s ease; box-shadow: none; } .clp-others-card:hover { transform: translateY(-5px); box-shadow: 0 16px 48px -12px rgba(0,0,0,0.14); border-color: color-mix(in srgb, var(--cat-clr, #3b82f6) 30%, transparent); } .clp-others-name { font-weight: 700; font-size: 0.9rem; color: var(--prem-negro); letter-spacing: -0.01em; } .clp-others-count { font-size: 0.75rem; color: var(--prem-gris-400); } /* ============================================================ 19. RECENTLY VIEWED — Sección más limpia ============================================================ */ .clp-recent { background: var(--prem-blanco); border-top: 1px solid rgba(0,0,0,0.06); padding: 3rem 0; } .clp-recent-head h2 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--prem-negro); } /* ============================================================ 20. ANIMACIONES DE ENTRADA — Cards reveal suave ============================================================ */ @keyframes clpCardReveal { from { opacity: 0; transform: translateY(18px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .clp-grid .clp-card { animation: clpCardReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; } /* Stagger: delay por posición */ .clp-grid .clp-card:nth-child(1) { animation-delay: 0.00s; } .clp-grid .clp-card:nth-child(2) { animation-delay: 0.04s; } .clp-grid .clp-card:nth-child(3) { animation-delay: 0.08s; } .clp-grid .clp-card:nth-child(4) { animation-delay: 0.12s; } .clp-grid .clp-card:nth-child(5) { animation-delay: 0.05s; } .clp-grid .clp-card:nth-child(6) { animation-delay: 0.09s; } .clp-grid .clp-card:nth-child(7) { animation-delay: 0.13s; } .clp-grid .clp-card:nth-child(8) { animation-delay: 0.17s; } .clp-grid .clp-card:nth-child(n+9) { animation-delay: 0.10s; } /* Respetar preferencias de movimiento reducido */ @media (prefers-reduced-motion: reduce) { .clp-grid .clp-card, .clp-card, .clp-topcat-card, .clp-others-card, .clp-sc-card { animation: none; transition: none; } } /* ============================================================ 21. SCROLL PROGRESS BAR — Color acento ============================================================ */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient( 90deg, var(--cat-clr, #3b82f6) 0%, color-mix(in srgb, var(--cat-clr, #3b82f6) 70%, #000) 100% ); z-index: 9999; width: 0%; transition: width 0.1s linear; } /* ============================================================ 22. RESPONSIVE — Ajustes mobile-first premium ============================================================ */ @media (max-width: 768px) { .clp-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.75rem; } .clp-card .product-info { padding: 1rem 1rem 1.1rem; } .clp-card .product-price-current { font-size: 1.1rem; } .clp-card .btn-add-cart { padding: 0.7rem 0.75rem; font-size: 0.82rem; } .clp-topcat { padding: 1.5rem 1.25rem 1.75rem; } .clp-layout { padding: 1.5rem 0 4rem; } .clp-others { padding: 3rem 0 3.5rem; margin-top: 2rem; } .clp-subcat-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } @media (max-width: 480px) { .clp-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 0.6rem; } .clp-card .product-image-wrapper { padding-top: 90%; } .clp-card .product-image-wrapper img { width: 75%; height: 75%; } } @media (min-width: 1280px) { .clp-grid { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 2rem 1.75rem; } } /* ============================================================ 23. MOBILE PREMIUM POLISH — clean, accessible, touch-first ============================================================ */ @media (max-width: 768px) { /* ---------- HERO ---------- */ body.clp-theme .clp-hero { padding: 1.4rem 0 1.25rem; } body.clp-theme .clp-topbar { margin-bottom: 1rem; gap: .6rem; flex-wrap: nowrap; } body.clp-theme .clp-btn-back { padding: .5rem .8rem; font-size: .82rem; flex: 0 0 auto; min-height: 40px; border-radius: 11px; } body.clp-theme .clp-breadcrumb { font-size: .76rem; gap: .35rem; min-width: 0; flex: 1 1 auto; overflow: hidden; white-space: nowrap; } body.clp-theme .clp-breadcrumb a, body.clp-theme .clp-breadcrumb-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14ch; } body.clp-theme .clp-hero-eyebrow { font-size: .7rem; letter-spacing: .12em; } body.clp-theme .clp-hero-title { font-size: clamp(1.65rem, 7vw, 2.1rem); line-height: 1.12; letter-spacing: -.02em; } body.clp-theme .clp-hero-sub { font-size: .9rem; line-height: 1.45; max-width: 100%; } body.clp-theme .clp-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1rem; } body.clp-theme .clp-stat-card { min-width: 0; padding: .55rem .45rem; border-radius: 14px; } body.clp-theme .clp-stat-card strong { font-size: 1.2rem; } body.clp-theme .clp-stat-card span { font-size: .62rem; gap: .25rem; margin-top: .28rem; letter-spacing: .04em; } body.clp-theme .clp-stat-card span i { font-size: .58rem; } /* ---------- SORTBAR (rediseñado en 2 filas limpias) ---------- */ body.clp-theme .clp-sortbar { padding: .55rem 0 .35rem; } body.clp-theme .clp-sortbar-inner { flex-direction: column; align-items: stretch; gap: .5rem; } body.clp-theme .clp-sortbar-left { display: flex; align-items: center; gap: .55rem; width: 100%; } body.clp-theme .clp-sortbar-right { display: flex; align-items: center; gap: .6rem; width: 100%; justify-content: space-between; } body.clp-theme .clp-filter-toggle { flex: 0 0 auto; padding: .6rem .85rem; min-height: 42px; font-size: .85rem; border-radius: 12px; } body.clp-theme .clp-search { flex: 1 1 auto; min-width: 0; } body.clp-theme .clp-search-input { min-height: 42px; font-size: .9rem; padding-right: 2.4rem; } body.clp-theme .clp-search-kbd { display: none; } body.clp-theme .clp-results-count { font-size: .82rem; flex: 1 1 auto; white-space: nowrap; } body.clp-theme .clp-sort-label { display: none; } body.clp-theme .clp-select-wrap { flex: 0 0 auto; } body.clp-theme .clp-select { min-height: 40px; padding: .5rem 2rem .5rem .85rem; font-size: .85rem; max-width: 60vw; } /* ---------- PRESETS — scroll horizontal ---------- */ body.clp-theme .clp-presets-row { padding-top: .35rem; padding-bottom: .15rem; } body.clp-theme .clp-presets { gap: .4rem; padding: .15rem .15rem .35rem; } body.clp-theme .clp-preset { padding: .42rem .8rem; font-size: .78rem; min-height: 36px; border-radius: 99px; } /* ---------- ACTIVE CHIPS — única fila scrollable ---------- */ body.clp-theme .clp-activechips-row { padding-top: .4rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; gap: .4rem; } body.clp-theme .clp-activechips-row::-webkit-scrollbar { display: none; } body.clp-theme .clp-activechips-title { display: none; } body.clp-theme .clp-activechips { flex-wrap: nowrap; gap: .35rem; } body.clp-theme .clp-activechip { flex: 0 0 auto; padding: .3rem .55rem .3rem .7rem; font-size: .76rem; } body.clp-theme .clp-activechip-clear, body.clp-theme .clp-share-filters { flex: 0 0 auto; padding: .35rem .65rem; font-size: .76rem; } body.clp-theme .clp-share-filters__text { display: none; } /* ---------- SUBCAT STRIP ---------- */ body.clp-theme .clp-subcat-strip { padding: .5rem 0; } body.clp-theme .clp-subcat-pill { padding: .42rem .9rem; font-size: .8rem; gap: .35rem; border-radius: 99px; min-height: 36px; } body.clp-theme .clp-subcat-count { font-size: .68rem; padding: 1px 6px; } /* ---------- TOPSTRIP & FAMILIES ---------- */ body.clp-theme .clp-topstrip-grid { grid-template-columns: 1fr; gap: .65rem; } body.clp-theme .clp-topstrip-card { padding: .55rem; gap: .65rem; } body.clp-theme .clp-topstrip-img, body.clp-theme .clp-topstrip-img img { width: 64px; height: 64px; } body.clp-theme .clp-topstrip-name { font-size: .85rem; } body.clp-theme .clp-topstrip-title { font-size: .95rem; } body.clp-theme .clp-topstrip-hint { font-size: .72rem; } body.clp-theme .clp-families-title { font-size: 1.25rem; } body.clp-theme .clp-families-sub { font-size: .85rem; } /* ---------- GRID + PRODUCT CARDS ---------- */ body.clp-theme .clp-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem .65rem; } body.clp-theme .clp-card { border-radius: 16px; } body.clp-theme .clp-card .product-info { padding: .8rem .8rem .9rem; } body.clp-theme .clp-card .product-brand { font-size: .68rem; } body.clp-theme .clp-card .product-name { font-size: .88rem; line-height: 1.3; } body.clp-theme .clp-card .product-price-current { font-size: 1rem; } body.clp-theme .clp-card .product-price-old { font-size: .75rem; } body.clp-theme .clp-card .btn-add-cart { padding: .65rem .65rem; font-size: .78rem; min-height: 40px; border-radius: 11px; } /* ---------- DIVIDERS ---------- */ body.clp-theme .clp-grid-sep { margin: 1.25rem 0 .85rem; font-size: .9rem; } /* ---------- OTHERS GRID ---------- */ body.clp-theme .clp-others-grid { grid-template-columns: repeat(2, 1fr); gap: .65rem; } body.clp-theme .clp-others-card { padding: 1rem .85rem; border-radius: 14px; min-height: 130px; } body.clp-theme .clp-others-name { font-size: .9rem; } body.clp-theme .clp-others-count { font-size: .7rem; } /* ---------- PAGINATION ---------- */ body.clp-theme .clp-pagination { gap: .25rem; flex-wrap: wrap; padding: 1.5rem 0 .5rem; } body.clp-theme .clp-page-link { min-width: 38px; height: 38px; font-size: .85rem; padding: 0 .55rem; } /* ---------- BOTTOM SHEET (filtros) ---------- */ body.clp-theme .clp-sidebar { border-top-left-radius: 22px; border-top-right-radius: 22px; padding-bottom: max(1rem, env(safe-area-inset-bottom)); } body.clp-theme .clp-sheet-handle { width: 44px; height: 4px; background: #d1d5db; border-radius: 99px; margin: .55rem auto .35rem; } body.clp-theme .clp-sheet-head { padding: .25rem 1rem .75rem; } body.clp-theme .clp-sheet-actions { padding: .85rem 1rem max(.85rem, env(safe-area-inset-bottom)); gap: .65rem; } body.clp-theme .clp-sheet-actions .clp-btn-primary { flex: 1 1 auto; min-height: 48px; font-size: .95rem; } body.clp-theme .clp-sheet-actions .clp-btn-ghost { flex: 0 0 auto; min-height: 48px; padding: .75rem 1rem; } /* ---------- LOAD MORE ---------- */ body.clp-theme .clp-loadmore-wrap { padding-bottom: max(1rem, env(safe-area-inset-bottom)); } body.clp-theme .clp-btn-loadmore { min-height: 48px; } } @media (max-width: 420px) { body.clp-theme .clp-container { padding-left: .9rem; padding-right: .9rem; } body.clp-theme .clp-hero-stats { gap: .4rem; } body.clp-theme .clp-stat-card { padding: .5rem .35rem; } body.clp-theme .clp-stat-card strong { font-size: 1.1rem; } body.clp-theme .clp-stat-card span { font-size: .58rem; } body.clp-theme .clp-grid { gap: .75rem .55rem; } body.clp-theme .clp-card .product-info { padding: .7rem .7rem .8rem; } body.clp-theme .clp-card .product-name { font-size: .82rem; } body.clp-theme .clp-card .product-price-current { font-size: .95rem; } body.clp-theme .clp-others-grid { grid-template-columns: 1fr; } body.clp-theme .clp-select { max-width: 50vw; } body.clp-theme .clp-btn-back { padding: .5rem .7rem; font-size: .78rem; } } /* ============================================================ FIX: scroll-reveal-card sin observer queda invisible. Forzar visibilidad dentro del grid de productos. ============================================================ */ body.clp-theme .clp-grid .scroll-reveal-card, body.clp-theme .clp-families-rows .scroll-reveal-card, body.clp-theme .clp-topstrip-grid .scroll-reveal-card { opacity: 1 !important; transform: none !important; } /* ============================================================ 24. MOBILE VISUAL DEPTH — gradients, accents, premium feel ============================================================ */ @media (max-width: 768px) { /* Fondo del cuerpo (debajo del hero) — sutil tint de la categoría */ body.clp-theme .clp-layout { background: radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--cat-clr) 7%, transparent) 0%, transparent 70%), linear-gradient(180deg, #fafbfc 0%, #f4f6f9 100%); } /* Sortbar con línea de acento de la categoría */ body.clp-theme .clp-sortbar { background: rgba(255,255,255,.96); box-shadow: 0 1px 0 color-mix(in srgb, var(--cat-clr) 18%, rgba(0,0,0,.06)); } /* Subcat strip — fondo translúcido con tint */ body.clp-theme .clp-subcat-strip { background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--cat-clr) 4%, #ffffff) 100%); border-bottom-color: color-mix(in srgb, var(--cat-clr) 12%, var(--clp-border)); } /* Cards más premium en móvil — sombra elevada y ring sutil */ body.clp-theme .clp-card { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 16px -6px rgba(15, 23, 42, .12); border: 1px solid rgba(15, 23, 42, .04); } body.clp-theme .clp-card:active { transform: scale(.985) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 22px -8px color-mix(in srgb, var(--cat-clr) 35%, rgba(15, 23, 42, .18)) !important; border-color: color-mix(in srgb, var(--cat-clr) 25%, rgba(15, 23, 42, .04)); } /* Imagen de producto con gradiente sutil de fondo */ body.clp-theme .clp-card .product-image-wrapper { background: radial-gradient(80% 80% at 50% 50%, #ffffff 0%, var(--prem-gris-100) 100%); } /* Botón "Agregar al carrito" — color de categoría en mobile, más vibrante */ body.clp-theme .clp-card .btn-add-cart { background: linear-gradient(135deg, var(--prem-negro) 0%, color-mix(in srgb, var(--cat-clr) 20%, var(--prem-negro)) 100%); box-shadow: 0 2px 6px rgba(15, 23, 42, .15), inset 0 1px 0 rgba(255, 255, 255, .08); } body.clp-theme .clp-card .btn-add-cart:active { transform: scale(.97); box-shadow: 0 4px 12px color-mix(in srgb, var(--cat-clr) 35%, rgba(15, 23, 42, .25)), inset 0 1px 0 rgba(255, 255, 255, .08); } /* Stat cards en hero — más vibrantes, mayor contraste */ body.clp-theme .clp-stat-card { background: linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.04) 100%); border: 1px solid color-mix(in srgb, var(--cat-clr) 35%, rgba(255,255,255,.18)); box-shadow: 0 4px 12px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255,255,255,.06); } body.clp-theme .clp-stat-card strong { background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, var(--cat-clr) 30%, #ffffff) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Hero — sombras y profundidad extra en mobile */ body.clp-theme .clp-hero { box-shadow: 0 -1px 0 inset rgba(255,255,255,.06); } body.clp-theme .clp-hero-icon { box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--cat-clr) 50%, transparent), inset 0 1px 0 rgba(255,255,255,.18); background: linear-gradient(135deg, color-mix(in srgb, var(--cat-clr) 35%, rgba(255,255,255,.06)) 0%, color-mix(in srgb, var(--cat-clr) 18%, rgba(255,255,255,.04)) 100%); border: 1px solid color-mix(in srgb, var(--cat-clr) 45%, rgba(255,255,255,.18)); } /* Preset chips — más distinguibles cuando están activos */ body.clp-theme .clp-preset[aria-pressed="true"] { background: linear-gradient(135deg, var(--prem-negro) 0%, color-mix(in srgb, var(--cat-clr) 30%, var(--prem-negro)) 100%); box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--cat-clr) 35%, rgba(15, 23, 42, .25)); } /* Subcat pills activas — color de categoría */ body.clp-theme .clp-subcat-pill.active { background: linear-gradient(135deg, var(--prem-negro) 0%, color-mix(in srgb, var(--cat-clr) 25%, var(--prem-negro)) 100%); box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cat-clr) 30%, rgba(15, 23, 42, .25)); } /* Otras categorías — diferenciación visual */ body.clp-theme .clp-others-card { box-shadow: 0 1px 3px rgba(15, 23, 42, .05), 0 8px 24px -10px color-mix(in srgb, var(--cat-clr) 22%, rgba(15, 23, 42, .15)); } /* Botón "Cargar más" — más prominente en móvil */ body.clp-theme .clp-btn-loadmore { box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 6px 16px -6px color-mix(in srgb, var(--cat-clr) 22%, rgba(15, 23, 42, .15)); } /* Empty state — mejor visual */ body.clp-theme .clp-empty { background: radial-gradient(60% 60% at 50% 0%, color-mix(in srgb, var(--cat-clr) 6%, transparent) 0%, transparent 70%), var(--prem-gris-100); padding: 2rem 1.25rem; } /* Filter FAB — botón flotante de filtros (fácil acceso con pulgar) */ body.clp-theme .clp-mobile-fab { position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: .55rem; padding: .85rem 1.15rem; background: linear-gradient(135deg, var(--prem-negro) 0%, color-mix(in srgb, var(--cat-clr) 35%, var(--prem-negro)) 100%); color: #fff; border: 0; border-radius: 999px; font-size: .88rem; font-weight: 700; box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--cat-clr) 50%, rgba(15, 23, 42, .35)), 0 2px 6px rgba(15, 23, 42, .15); cursor: pointer; opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .22s ease, transform .28s cubic-bezier(.34, 1.56, .64, 1); pointer-events: none; } body.clp-theme .clp-mobile-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } body.clp-theme .clp-mobile-fab:active { transform: translateY(0) scale(.96); } body.clp-theme .clp-mobile-fab i { font-size: .9rem; } body.clp-theme .clp-mobile-fab__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; background: rgba(255, 255, 255, .22); border-radius: 999px; font-size: .68rem; font-weight: 800; } /* Cuando el sheet de filtros está abierto, ocultar FAB */ body.clp-theme.clp-sheet-open .clp-mobile-fab { opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none; } } @media (min-width: 769px) { body.clp-theme .clp-mobile-fab { display: none !important; } } /* ============================================================ DESIGN POLISH v2 — 7 mejoras de calidad visual ============================================================ */ /* ---------------------------------------------------------- 1. WAVE HERO → CUERPO: transición más suave y profunda ---------------------------------------------------------- */ .clp-hero-wave { height: 64px; background: linear-gradient( to bottom, rgba(11, 18, 33, 1) 0%, rgba(11, 18, 33, 0.72) 28%, rgba(11, 18, 33, 0.28) 58%, rgba(255, 255, 255, 0) 100% ); margin-top: -64px; position: relative; z-index: 1; pointer-events: none; } /* ---------------------------------------------------------- 2. SORTBAR: más espacio visual y chips con más aire ---------------------------------------------------------- */ /* Fila de sortbar principal — separación inferior */ body.clp-theme .clp-sortbar-inner { padding-bottom: 0.75rem; } /* Fila de presets: padding superior, separador visual sutil */ body.clp-theme .clp-presets-row { padding-top: 0.5rem; padding-bottom: 0.65rem; border-top: 1px solid rgba(0, 0, 0, 0.05); } /* Chips de preset: más respiro y altura */ body.clp-theme .clp-preset { padding: 0.52rem 1.1rem; font-size: 0.835rem; gap: 0.4rem; display: inline-flex; align-items: center; line-height: 1; height: 36px; transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1); } body.clp-theme .clp-preset i { font-size: 0.78rem; opacity: 0.7; transition: opacity 0.18s ease; } body.clp-theme .clp-preset:hover i { opacity: 1; } body.clp-theme .clp-preset[aria-pressed="true"] i { opacity: 1; } /* ---------------------------------------------------------- 3. SIDEBAR: solo sombra, sin borde duro — fondo sutil ---------------------------------------------------------- */ body.clp-theme .clp-sidebar { border: none !important; background: #fafbfc !important; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.055), 0 4px 12px rgba(15, 23, 42, 0.06), 0 16px 48px -12px rgba(15, 23, 42, 0.10) !important; } /* Grupos de filtro: separador más suave */ body.clp-theme .clp-filter-group { border-bottom-color: rgba(0, 0, 0, 0.06) !important; } /* ---------------------------------------------------------- 4. BREADCRUMB: tamaño legible y separadores más visibles ---------------------------------------------------------- */ body.clp-theme .clp-breadcrumb { font-size: 0.875rem; } body.clp-theme .clp-breadcrumb a { opacity: 0.8; transition: opacity 0.18s ease, color 0.18s ease; } body.clp-theme .clp-breadcrumb a:hover { opacity: 1; color: #fff; } body.clp-theme .clp-breadcrumb-sep { color: rgba(255, 255, 255, 0.45); font-size: 0.78rem; } body.clp-theme .clp-breadcrumb-current { font-size: 0.875rem; } /* Botón Volver: menos agresivo */ body.clp-theme .clp-btn-back { font-weight: 500; padding: 0.5rem 1.05rem; font-size: 0.875rem; letter-spacing: -0.005em; } /* Animación de la flecha al hover */ body.clp-theme .clp-btn-back i { transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } body.clp-theme .clp-btn-back:hover i { transform: translateX(-3px); } /* ---------------------------------------------------------- 5. SUBCAT PILLS: fade scroll derecho + altura uniforme ---------------------------------------------------------- */ .clp-subcat-pills { position: relative; } /* Wrapper relativo para contener el fade */ .clp-subcat-strip .clp-container { position: relative; } .clp-subcat-strip .clp-container::after { content: ''; position: absolute; top: 0; right: 0; width: 64px; height: 100%; background: linear-gradient(to right, transparent 0%, #ffffff 85%); pointer-events: none; z-index: 2; } /* Altura uniforme para todas las pills */ body.clp-theme .clp-subcat-pill { height: 36px; display: inline-flex; align-items: center; } /* ---------------------------------------------------------- 6. STAT CARDS: iconos más visibles, número con glow sutil ---------------------------------------------------------- */ body.clp-theme .clp-stat-card span i { font-size: 0.82rem; opacity: 0.95; color: color-mix(in srgb, var(--cat-clr) 85%, #fff); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cat-clr) 70%, transparent)); } body.clp-theme .clp-stat-card strong { font-size: 1.85rem; text-shadow: 0 0 24px color-mix(in srgb, var(--cat-clr) 40%, transparent); } /* ---------------------------------------------------------- 7. CHIPS ACTIVOS: background con floor de saturación → funciona aunque --cat-clr sea muy oscuro ---------------------------------------------------------- */ body.clp-theme .clp-activechips-row { background: linear-gradient( 180deg, rgba(59, 130, 246, 0.06) 0%, transparent 100% ); background: linear-gradient( 180deg, color-mix(in srgb, var(--cat-clr, #3b82f6) 8%, rgba(59, 130, 246, 0.04)) 0%, transparent 100% ); border-top: 1px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 22%, rgba(59, 130, 246, 0.12)); } /* Chip activo: siempre visible independiente del color de acento */ body.clp-theme .clp-activechip { background: #ffffff; border: 1.5px solid color-mix(in srgb, var(--cat-clr, #3b82f6) 55%, #c7d2e6); color: var(--prem-negro); font-size: 0.82rem; padding: 0.32rem 0.65rem 0.32rem 0.8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } body.clp-theme .clp-activechip span { color: color-mix(in srgb, var(--cat-clr, #3b82f6) 80%, #0f172a); font-weight: 700; } body.clp-theme .clp-activechip:hover span { color: #fff; } /* ---------------------------------------------------------- Mobile — ajustes responsive para los cambios anteriores ---------------------------------------------------------- */ @media (max-width: 768px) { .clp-hero-wave { height: 44px; margin-top: -44px; } body.clp-theme .clp-presets-row { padding-bottom: 0.5rem; } /* En mobile el fade del strip puede ser más angosto */ .clp-subcat-strip .clp-container::after { width: 44px; } }