/** * PREMIUM ENHANCEMENTS - Refinamientos exclusivos * Capa final de polish para experiencia 10/10 */ /* ============================================ 1. TIPOGRAFIA PREMIUM - Display font ============================================ */ /* Google Fonts loaded from HTML — removed duplicate @import for performance See: index-tech.php, producto-detalle.php, etc. load fonts via tag */ :root { --tech-font-display: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif; --tech-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --tech-font-accent: 'Space Grotesk', 'DM Sans', sans-serif; --tech-font-mono: 'JetBrains Mono', 'Fira Code', monospace; } .hero-title, .categories-title-premium, .brands-title-premium, .tech-section-title { font-family: var(--tech-font-display); } /* ============================================ 2. NAVBAR GLASSMORPHISM PREMIUM ============================================ */ .navbar-tech.scrolled { background-color: rgba(15, 23, 42, 0.85); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border-bottom-color: rgba(255, 255, 255, 0.05); } /* Hover refinado en links */ .navbar-tech-link { position: relative; } .navbar-tech-link::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, var(--tech-accent), var(--tech-accent-light)); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(-50%); border-radius: 1px; } .navbar-tech-link:hover::after, .navbar-tech-link.active::after { width: 60%; } /* Dropdown premium con glassmorphism */ .navbar-tech-dropdown { background-color: rgba(30, 41, 59, 0.95); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-color: rgba(255, 255, 255, 0.08); border-radius: var(--tech-radius-xl); padding: var(--tech-spacing-sm); } .navbar-tech-dropdown-item { border-radius: var(--tech-radius-md); transition: all 0.2s ease; } .navbar-tech-dropdown-item:hover { background-color: rgba(59, 130, 246, 0.15); transform: translateX(4px); } /* ============================================ 3. PRODUCT CARDS - BORDE GLOW + CRISTAL ============================================ */ .product-card-tech { border: 1px solid transparent; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .product-card-tech:hover { border-color: rgba(59, 130, 246, 0.15); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.08); } /* Reflejo cristal en imagen */ .product-image-wrapper::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.08), transparent ); z-index: 2; pointer-events: none; transition: left 0.6s ease; } .product-card-tech:hover .product-image-wrapper::after { left: 150%; } /* Precio con acento premium — azul eléctrico + sky (sin morado) */ .product-price-current { background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #1d4ed8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================ 4. SEPARADORES DE SECCION ELEGANTES ============================================ */ .tech-section + .tech-section, .categories-section-premium + .tech-section, .tech-section + .brands-section-premium { position: relative; } .section-divider { display: block; width: 100%; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.30) 20%, rgba(14, 165, 233, 0.25) 50%, rgba(59, 130, 246, 0.30) 80%, transparent 100%); margin: 0; border: none; } /* ============================================ 5. FONDOS — DARK NAVY UNIFICADO Todas las secciones en el mismo sistema dark del hero/navbar ============================================ */ /* categories y bestsellers ya están manejados en sus archivos propios, pero este override asegura consistencia ante posibles conflictos de cascada */ .categories-section-premium { background: linear-gradient(160deg, #080d1a 0%, #0b1221 55%, #080d1a 100%); } .bestsellers-section { background: #ffffff; } /* Tech sections — fondo blanco editorial */ .tech-section { position: relative; background: #f8fafc; } /* Sin grid oscuro sobre fondo claro */ .tech-section:nth-child(even)::after { display: none; } .tech-section > * { position: relative; z-index: 1; } /* ============================================ 6. MOBILE BOTTOM NAV - Premium ============================================ */ @media (max-width: 768px) { .mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; display: flex; align-items: center; justify-content: space-around; height: 64px; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); border-top: 1px solid rgba(255, 255, 255, 0.06); padding-bottom: env(safe-area-inset-bottom, 0); } .mobile-bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 1rem; text-decoration: none; color: var(--tech-silver-dark); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.03em; transition: all 0.2s ease; position: relative; } .mobile-bottom-nav-item i { font-size: 1.15rem; transition: transform 0.2s ease; } .mobile-bottom-nav-item.active, .mobile-bottom-nav-item:active { color: var(--tech-accent); } .mobile-bottom-nav-item.active i { transform: scale(1.1); } .mobile-bottom-nav-item .nav-badge { position: absolute; top: 0; right: 0.4rem; width: 18px; height: 18px; background: var(--tech-danger); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; font-weight: 700; color: white; } /* Espacio inferior para que el contenido no quede tapado */ body.tech-theme { padding-bottom: 70px; } .footer-tech { padding-bottom: calc(70px + var(--tech-spacing-lg)); } /* WhatsApp float en mobile - alineado con asistente */ .whatsapp-float { bottom: 140px; right: 16px; left: auto; } } @media (min-width: 769px) { .mobile-bottom-nav { display: none; } } /* ============================================ 7. ANIMACIONES STAGGER MEJORADAS ============================================ */ /* Cards con stagger escalado */ .scroll-reveal-card { transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .scroll-reveal-card:nth-child(1) { transition-delay: 0.05s; } .scroll-reveal-card:nth-child(2) { transition-delay: 0.1s; } .scroll-reveal-card:nth-child(3) { transition-delay: 0.15s; } .scroll-reveal-card:nth-child(4) { transition-delay: 0.2s; } .scroll-reveal-card:nth-child(5) { transition-delay: 0.25s; } .scroll-reveal-card:nth-child(6) { transition-delay: 0.3s; } .scroll-reveal-card:nth-child(7) { transition-delay: 0.35s; } .scroll-reveal-card:nth-child(8) { transition-delay: 0.4s; } /* Category cards con stagger */ .category-card-premium { transition-delay: calc(var(--card-index, 0) * 0.06s); } .category-card-premium:nth-child(1) { --card-index: 0; } .category-card-premium:nth-child(2) { --card-index: 1; } .category-card-premium:nth-child(3) { --card-index: 2; } .category-card-premium:nth-child(4) { --card-index: 3; } .category-card-premium:nth-child(5) { --card-index: 4; } .category-card-premium:nth-child(6) { --card-index: 5; } /* Brands con stagger */ .brand-card-premium { transition-delay: calc(var(--brand-index, 0) * 0.08s); } .brand-card-premium:nth-child(1) { --brand-index: 0; } .brand-card-premium:nth-child(2) { --brand-index: 1; } .brand-card-premium:nth-child(3) { --brand-index: 2; } .brand-card-premium:nth-child(4) { --brand-index: 3; } .brand-card-premium:nth-child(5) { --brand-index: 4; } /* ============================================ 8. SECCION SOCIAL PROOF / TRUST ============================================ */ .social-proof-section { padding: 3rem 0; background: radial-gradient(ellipse 90% 200% at 50% 50%, rgba(59, 130, 246, 0.09) 0%, transparent 65%), radial-gradient(ellipse 60% 200% at 15% 50%, rgba(59, 130, 246, 0.11) 0%, transparent 60%), radial-gradient(ellipse 60% 200% at 85% 50%, rgba(14, 165, 233, 0.09) 0%, transparent 60%), linear-gradient(160deg, #080d1a 0%, #0b1221 50%, #080d1a 100%); position: relative; overflow: hidden; } .social-proof-grid { display: flex; align-items: center; justify-content: center; gap: 4rem; max-width: 1000px; margin: 0 auto; padding: 0 2rem; position: relative; z-index: 1; } .social-proof-stat { text-align: center; } .social-proof-number { font-family: var(--tech-font-display); font-size: 2.5rem; font-weight: 800; /* Degradé azul eléctrico + sky — sin morado */ background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 55%, #60a5fa 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 0.25rem; } .social-proof-label { font-size: 0.875rem; color: var(--tech-silver-dark); font-weight: 500; } .social-proof-divider { width: 1px; height: 50px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.08), transparent); } @media (max-width: 768px) { .social-proof-grid { gap: 2rem; flex-wrap: wrap; } .social-proof-number { font-size: 1.75rem; } .social-proof-label { font-size: 0.75rem; } .social-proof-divider { display: none; } } /* ============================================ 9. PAGE ENTER ANIMATION ============================================ */ @keyframes page-enter { from { opacity: 0; } to { opacity: 1; } } body.tech-theme { animation: page-enter 0.4s ease forwards; } /* ============================================ 10. SCROLLBAR PREMIUM ============================================ */ .tech-theme::-webkit-scrollbar { width: 8px; } .tech-theme::-webkit-scrollbar-track { background: var(--tech-primary); } .tech-theme::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--tech-accent) 0%, var(--tech-tertiary) 100%); border-radius: 4px; } .tech-theme::-webkit-scrollbar-thumb:hover { background: var(--tech-accent); } /* ============================================ 11. HERO PREMIUM REFINEMENTS ============================================ */ .hero-tech { min-height: 520px; } /* Efecto parallax sutil en imagen del hero */ .hero-image img { will-change: transform; } /* Tag del hero con glow */ .hero-tag { box-shadow: 0 0 20px rgba(59, 130, 246, 0.25); } /* ============================================ 12. CATEGORY CARDS HOVER PREMIUM ============================================ */ .category-card-premium { border: 1px solid rgba(59, 130, 246, 0.06); } .category-card-premium:hover { border-color: rgba(59, 130, 246, 0.15); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(59, 130, 246, 0.05); } /* ============================================ 13. BRAND CARDS HOVER ============================================ */ .brand-card-premium { border: 1px solid rgba(59, 130, 246, 0.05); } .brand-card-premium:hover { border-color: rgba(59, 130, 246, 0.12); } /* ============================================ 14. OFERTAS COUNTDOWN STYLING ============================================ */ .ofertas-countdown { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.75rem; font-variant-numeric: tabular-nums; } .countdown-block { display: flex; flex-direction: column; align-items: center; min-width: 2.5rem; } .countdown-number { font-size: 1.1rem; font-weight: 800; color: var(--tech-danger); background: rgba(239, 68, 68, 0.08); padding: 0.2rem 0.5rem; border-radius: var(--tech-radius-sm); line-height: 1; } .countdown-label { font-size: 0.55rem; text-transform: uppercase; color: var(--tech-text-secondary); margin-top: 0.15rem; font-weight: 600; letter-spacing: 0.05em; } .countdown-sep { font-weight: 700; color: var(--tech-danger); opacity: 0.5; font-size: 1rem; align-self: flex-start; margin-top: 0.15rem; } /* ============================================ 15. SMOOTH FOCUS STATES (Accessibility) ============================================ */ *:focus-visible { outline: 2px solid var(--tech-accent); outline-offset: 2px; border-radius: var(--tech-radius-sm); } button:focus-visible, a:focus-visible { outline: 2px solid var(--tech-accent); outline-offset: 2px; } /* ============================================ 16. PREMIUM SECTION HEADERS ============================================ */ .tech-section-title i { background: linear-gradient(135deg, var(--tech-accent), var(--tech-accent-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Section badge refinement */ .section-badge { backdrop-filter: blur(10px); } /* Quick View modal styles moved to quickview-tech.css (loaded synchronously) */ /* ============================================ 18. IMAGE LAZY LOADING BLUR-UP ============================================ */ .product-image-wrapper img { transition: transform var(--tech-transition-normal), filter 0.4s ease, opacity 0.4s ease; } .product-image-wrapper img.lazy-loading { filter: blur(10px); opacity: 0.6; } .product-image-wrapper img.lazy-loaded { filter: blur(0); opacity: 1; } /* ============================================ 19. ENHANCED BUTTON RIPPLE EFFECT ============================================ */ .btn-add-cart .ripple, .qv-btn-cart .ripple, .hero-btn-primary .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transform: scale(0); animation: ripple-anim 0.6s linear; pointer-events: none; } @keyframes ripple-anim { to { transform: scale(4); opacity: 0; } } /* ============================================ 20. SECTION TRANSITIONS (base styles in theme-tech.css, enhancements only here) ============================================ */ /* ============================================ 21. PRODUCT CARD TILT EFFECT (subtle 3D) ============================================ */ @media (hover: hover) { .product-card-tech { transform-style: preserve-3d; perspective: 1000px; } } /* ============================================ 22. SEARCH BAR PREMIUM ============================================ */ .tech-search-wrapper { position: relative; } .tech-search-wrapper .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--tech-text-muted); font-size: 0.875rem; pointer-events: none; transition: color 0.2s ease; } .tech-search-wrapper .tech-input { padding-left: 2.75rem; background: var(--tech-bg-card); border: 1.5px solid var(--tech-border-light); border-radius: var(--tech-radius-xl); transition: all 0.3s ease; font-size: 0.9375rem; height: 48px; width: 100%; color: var(--tech-text-primary); } .tech-search-wrapper .tech-input:focus { outline: none; border-color: var(--tech-accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .tech-search-wrapper .tech-input:focus + .search-icon, .tech-search-wrapper .tech-input:focus ~ .search-icon { color: var(--tech-accent); } .tech-search-wrapper .tech-input::placeholder { color: var(--tech-text-muted); } /* ============================================ 23. FILTER BUTTONS PREMIUM ============================================ */ .btn-tech.btn-tech-ghost { padding: 0.5rem 1.25rem; border-radius: var(--tech-radius-full); font-size: 0.8125rem; font-weight: 600; border: 1.5px solid var(--tech-border-light); background: transparent; color: var(--tech-text-secondary); cursor: pointer; transition: all 0.25s ease; } .btn-tech.btn-tech-ghost:hover { border-color: var(--tech-accent); color: var(--tech-accent); background: rgba(59, 130, 246, 0.05); } .btn-tech.btn-tech-ghost.active { background: linear-gradient(135deg, var(--tech-accent) 0%, var(--tech-accent-hover) 100%); color: white; border-color: transparent; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* ============================================ 24. PRODUCTS TOOLBAR LAYOUT ============================================ */ .products-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--tech-spacing-lg); flex-wrap: wrap; } .products-toolbar .tech-search-wrapper { flex: 1; max-width: 400px; } .filter-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; } @media (max-width: 768px) { .products-toolbar { flex-direction: column; align-items: stretch; } .products-toolbar .tech-search-wrapper { max-width: 100%; } .filter-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.25rem; -webkit-overflow-scrolling: touch; } .filter-chips::-webkit-scrollbar { display: none; } .filter-chips .btn-tech { flex-shrink: 0; white-space: nowrap; } } /* ============================================ 25. WHY CHOOSE US SECTION ============================================ */ .why-choose-section { padding: 4rem 0; background: transparent; position: relative; overflow: hidden; } .why-choose-container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .why-choose-header { text-align: center; margin-bottom: 3rem; } .why-choose-title { font-family: var(--tech-font-display); font-size: 2rem; font-weight: 800; color: var(--tech-text-primary); margin-bottom: 0.5rem; } .why-choose-title span { background: linear-gradient(135deg, var(--tech-accent), #3b82f6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .why-choose-subtitle { font-size: 1rem; color: var(--tech-text-secondary); } .why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .why-choose-card { background: var(--tech-bg-card); border-radius: var(--tech-radius-xl); padding: 2rem 1.5rem; text-align: center; border: 1px solid rgba(59, 130, 246, 0.06); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .why-choose-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--tech-accent), #3b82f6); opacity: 0; transition: opacity 0.3s ease; } .why-choose-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1); border-color: rgba(59, 130, 246, 0.12); } .why-choose-card:hover::before { opacity: 1; } .why-choose-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; border-radius: var(--tech-radius-xl); font-size: 1.5rem; } .why-choose-icon.blue { background: rgba(59, 130, 246, 0.1); color: var(--tech-accent); } .why-choose-icon.purple { background: rgba(59, 130, 246, 0.1); color: #3b82f6; } .why-choose-icon.green { background: rgba(16, 185, 129, 0.1); color: var(--tech-success); } .why-choose-icon.amber { background: rgba(245, 158, 11, 0.1); color: var(--tech-warning); } .why-choose-card h3 { font-size: 1.0625rem; font-weight: 700; color: var(--tech-text-primary); margin-bottom: 0.5rem; } .why-choose-card p { font-size: 0.875rem; color: var(--tech-text-secondary); line-height: 1.6; margin: 0; } @media (max-width: 992px) { .why-choose-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .why-choose-grid { grid-template-columns: 1fr; gap: 1rem; } .why-choose-card { padding: 1.5rem 1.25rem; } .why-choose-title { font-size: 1.5rem; } }