/* ============================================= FUENTES — agregar en del proyecto: ============================================= */ /* ============================================= VARIABLES ============================================= */ :root { --rojo: #e63a3a; --azul: #1a3a8f; --azul-claro: #2255cc; --negro: #0d0d0d; --blanco: #ffffff; --gris-fondo: #f4f4f4; --gris-card: #e8e8e8; --texto: #111111; --shadow: 0 4px 18px rgba(0, 0, 0, 0.10); } /* ============================================= SECCIÓN WRAPPER ============================================= */ .nov-section { padding: 32px 0 24px; background: var(--gris-fondo); } .nov-container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ============================================= EYEBROW "NOVEDADES" ============================================= */ .nov-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .nov-eyebrow-line { flex: 1; height: 1.5px; background: var(--rojo); border-radius: 2px; } .nov-eyebrow-label { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 13px; letter-spacing: 3px; color: var(--rojo); white-space: nowrap; text-transform: uppercase; } /* ============================================= HEADER CATEGORÍA ============================================= */ .nov-cat-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .nov-cat-name { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 32px; letter-spacing: 2px; color: var(--texto); white-space: nowrap; line-height: 1; } .nov-cat-img { height: 30px; width: auto; object-fit: contain; filter: brightness(0) saturate(100%); } .nov-cat-line { flex: 1; height: 1.5px; background: #d0d0d0; border-radius: 2px; } /* ============================================= WRAPPER + BOTONES SLIDER ============================================= */ .nov-wrapper { display: flex; align-items: center; gap: 10px; } .nov-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ccc; background: var(--blanco); color: #666; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: background 0.18s, border-color 0.18s, color 0.18s; } .nov-btn:hover { background: var(--azul); border-color: var(--azul); color: var(--blanco); box-shadow: 0 4px 14px rgba(26, 58, 143, 0.3); } .nov-btn svg { width: 18px; height: 18px; } /* ============================================= SLIDER TRACK ============================================= */ .nov-slider { display: flex; align-items: stretch; gap: 14px; flex: 1; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .nov-slider::-webkit-scrollbar { display: none; } /* ============================================= CARD HERO (producto grande) ============================================= */ .card-hero { flex-shrink: 0; width: 196px; border-radius: 14px; overflow: hidden; cursor: pointer; border: 1px solid #ddd; background: var(--blanco); position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease; box-shadow: var(--shadow); display: flex; flex-direction: column; } .card-hero:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14); border-color: var(--azul-claro); } .card-hero-badge { position: absolute; top: 10px; left: 10px; background: var(--rojo); color: var(--blanco); font-family: 'DM Sans', sans-serif; font-size: 9px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; z-index: 2; } .card-hero-img { width: 100%; height: 164px; object-fit: contain; padding: 28px 12px 10px; display: block; background: linear-gradient(160deg, #eef2fb 0%, #f8f8f8 100%); } .card-hero-footer { padding: 10px 12px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #eee; background: var(--blanco); } .card-hero-name { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 600; color: #666; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.3; flex: 1; } .card-hero-price { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 20px; letter-spacing: 0.5px; color: var(--texto); white-space: nowrap; } /* ============================================= CARD PROMO (oscura, información + CTA) ============================================= */ .card-promo { flex-shrink: 0; width: 300px; border-radius: 14px; overflow: hidden; cursor: pointer; background: #0d1b3e; position: relative; display: flex; flex-direction: column; transition: transform 0.2s ease; box-shadow: 0 6px 24px rgba(13, 27, 62, 0.35); } .card-promo:hover { transform: translateY(-4px); } /* Patrón de fondo tipo "gaming" */ .card-promo::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -55deg, transparent, transparent 20px, rgba(255, 255, 255, 0.015) 20px, rgba(255, 255, 255, 0.015) 21px ); pointer-events: none; z-index: 0; } .card-promo-top { padding: 18px 18px 14px; position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; gap: 12px; } .card-promo-headline { font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 26px; letter-spacing: 1px; color: var(--blanco); line-height: 1.1; } .card-promo-headline span { color: #f0c846; } .card-promo-desc { font-family: 'DM Sans', sans-serif; font-size: 10.5px; color: rgba(255, 255, 255, 0.5); line-height: 1.55; text-transform: uppercase; letter-spacing: 0.3px; } /* Pill de urgencia con punto rojo */ .card-promo-urgency { display: inline-flex; align-items: center; gap: 6px; background: rgba(230, 58, 58, 0.18); border: 1px solid rgba(230, 58, 58, 0.35); border-radius: 6px; padding: 5px 10px; font-family: 'DM Sans', sans-serif; font-size: 10px; font-weight: 600; color: #ff8888; text-transform: uppercase; letter-spacing: 0.6px; width: fit-content; } .card-promo-urgency::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #ff8888; flex-shrink: 0; } /* Pie de card: botón WA + tag lateral */ .card-promo-bottom { position: relative; z-index: 1; padding: 12px 18px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.03); } /* Botón WhatsApp */ .card-promo-wa { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #25d366; color: var(--blanco); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 9px 14px; border-radius: 8px; text-decoration: none; transition: background 0.15s ease; cursor: pointer; border: none; } .card-promo-wa:hover { background: #1eb858; } .card-promo-wa svg { width: 16px; height: 16px; flex-shrink: 0; } /* Tag vertical "MEJORES PRECIOS" */ .card-promo-tag { writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 11px; letter-spacing: 2px; color: rgba(255, 255, 255, 0.25); white-space: nowrap; text-transform: uppercase; } /* ============================================= CARDS PEQUEÑAS CIRCULARES ============================================= */ .card-small { flex-shrink: 0; width: 116px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: transform 0.2s ease; } .card-small:hover { transform: translateY(-4px); } .card-small-img-wrap { position: relative; width: 116px; height: 116px; } .card-small-circle { width: 116px; height: 116px; border-radius: 50%; overflow: hidden; border: 2px solid #d4d4d4; background: var(--gris-card); display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .card-small:hover .card-small-circle { border-color: var(--azul-claro); box-shadow: 0 4px 16px rgba(34, 85, 204, 0.22); } .card-small-circle img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Badge precio */ .card-small-price { position: absolute; top: 0; left: -4px; background: var(--negro); color: var(--blanco); font-family: 'Bebas Neue', 'Oswald', sans-serif; font-size: 13px; font-weight: 700; padding: 2px 7px; border-radius: 5px; z-index: 2; letter-spacing: 0.3px; white-space: nowrap; } /* Nombre del producto */ .card-small-name { font-family: 'DM Sans', sans-serif; font-size: 10.5px; font-weight: 600; color: #555; text-align: center; text-transform: uppercase; letter-spacing: 0.4px; line-height: 1.3; background: var(--gris-card); border-radius: 6px; padding: 5px 6px; width: 100%; min-height: 30px; display: flex; align-items: center; justify-content: center; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 900px) { .card-promo { width: 260px; } .card-hero { width: 166px; } .card-hero-img { height: 140px; } .card-small { width: 100px; } .card-small-circle, .card-small-img-wrap { width: 96px; height: 96px; } .card-promo-headline { font-size: 22px; } } @media (max-width: 640px) { .nov-btn { display: none; } .card-promo { width: 240px; } .card-promo-headline { font-size: 20px; } .card-hero { width: 150px; } .card-hero-img { height: 124px; } }