/**
 * Bootstrap Essential — Minimal extract for NYXIVO
 * Only includes classes actually used: modal, btn-close, utilities
 * Reduces 233KB → ~3KB for 95% faster style calculation
 */

/* === REBOOT ESSENTIALS === */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
hr{margin:1rem 0;color:inherit;border:0;border-top:1px solid;opacity:.25}
h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}
.h4{font-size:calc(1.275rem + .3vw)}
.h5{font-size:1.25rem}
p{margin-top:0;margin-bottom:1rem}
a{color:var(--bs-link-color,#0d6efd);text-decoration:underline}
a:hover{color:var(--bs-link-hover-color,#0a58ca)}
img,svg{vertical-align:middle}
button{border-radius:0}
button:focus:not(:focus-visible){outline:0}
button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}

/* === TRANSITIONS === */
.fade{transition:opacity .15s linear}
.fade:not(.show){opacity:0}

/* === MODAL === */
.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:.5rem;--bs-modal-bg:#fff;--bs-modal-border-radius:.5rem;--bs-modal-box-shadow:0 .5rem 1rem rgba(0,0,0,.15);position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}
.modal-dialog{position:relative;width:auto;margin:var(--bs-modal-margin);pointer-events:none}
.modal.fade .modal-dialog{transition:transform .3s ease-out;transform:translate(0,-50px)}
.modal.show .modal-dialog{transform:none}
.modal-dialog-centered{display:flex;align-items:center;min-height:calc(100% - var(--bs-modal-margin)*2)}
.modal-content{position:relative;display:flex;flex-direction:column;width:100%;pointer-events:auto;background-color:var(--bs-modal-bg);background-clip:padding-box;border:0;border-radius:var(--bs-modal-border-radius);outline:0;box-shadow:var(--bs-modal-box-shadow)}
.modal-header{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:var(--bs-modal-padding);border-bottom:1px solid #dee2e6;border-top-left-radius:var(--bs-modal-border-radius);border-top-right-radius:var(--bs-modal-border-radius)}
.modal-title{margin-bottom:0;line-height:1.5}
.modal-body{position:relative;flex:1 1 auto;padding:var(--bs-modal-padding)}
.modal-footer{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;padding:calc(var(--bs-modal-padding) - .5rem);border-top:1px solid #dee2e6;border-bottom-right-radius:var(--bs-modal-border-radius);border-bottom-left-radius:var(--bs-modal-border-radius)}
.modal-footer>*{margin:.5rem}
.modal-backdrop{--bs-backdrop-zindex:1050;--bs-backdrop-opacity:.5;position:fixed;top:0;left:0;z-index:var(--bs-backdrop-zindex);width:100vw;height:100vh;background-color:#000}
.modal-backdrop.fade{opacity:0}
.modal-backdrop.show{opacity:var(--bs-backdrop-opacity)}

@media(min-width:576px){
.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}
}

/* === CLOSE BUTTON === */
.btn-close{--bs-btn-close-color:#000;--bs-btn-close-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");--bs-btn-close-opacity:.5;--bs-btn-close-hover-opacity:.75;box-sizing:content-box;width:1em;height:1em;padding:.25em;color:var(--bs-btn-close-color);background:transparent var(--bs-btn-close-bg) center/1em auto no-repeat;border:0;border-radius:.375rem;opacity:var(--bs-btn-close-opacity)}
.btn-close:hover{opacity:var(--bs-btn-close-hover-opacity)}
.btn-close:focus{outline:0;box-shadow:0 0 0 .25rem rgba(13,110,253,.25);opacity:1}
.btn-close:disabled,.btn-close.disabled{pointer-events:none;-webkit-user-select:none;user-select:none;opacity:.25}
.btn-close-white{filter:invert(1) grayscale(100%) brightness(200%)}

/* === UTILITIES === */
.d-none{display:none!important}
.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within){position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.active{}
/**
 * TEMA TECH - Tienda de Tecnologia Morfeo
 * Paleta: Azul Noche + Plateado
 * Estilo: Minimalista, elegante y moderno
 */

/* ============================================
   VARIABLES CSS - SISTEMA DE DISENO
============================================ */
:root {
    /* Colores principales - Azul Noche */
    --tech-primary: #0f172a;
    --tech-secondary: #1e293b;
    --tech-tertiary: #334155;

    /* Acentos - Plateado */
    --tech-silver: #e2e8f0;
    --tech-silver-dark: #94a3b8;
    --tech-chrome: #cbd5e1;

    /* Acentos de accion */
    --tech-accent: #3b82f6;
    --tech-accent-hover: #2563eb;
    --tech-accent-light: #60a5fa;
    --tech-success: #10b981;
    --tech-warning: #f59e0b;
    --tech-danger: #ef4444;

    /* Fondos */
    --tech-bg-primary: #f8fafc;
    --tech-bg-secondary: #f1f5f9;
    --tech-bg-card: #ffffff;
    --tech-bg-dark: #0f172a;

    /* Texto */
    --tech-text-primary: #0f172a;
    --tech-text-secondary: #475569;
    --tech-text-muted: #4b5563;
    --tech-text-light: #f8fafc;

    /* Bordes */
    --tech-border-light: #e2e8f0;
    --tech-border-dark: #334155;

    /* Sombras */
    --tech-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --tech-shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07);
    --tech-shadow-lg: 0 10px 25px rgba(15, 23, 42, 0.1);
    --tech-shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.15);
    --tech-shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);

    /* Tipografia */
    --tech-font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --tech-font-display: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    --tech-font-accent: 'Space Grotesk', 'DM Sans', sans-serif;
    --tech-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Espaciado */
    --tech-spacing-xs: 0.25rem;
    --tech-spacing-sm: 0.5rem;
    --tech-spacing-md: 1rem;
    --tech-spacing-lg: 1.5rem;
    --tech-spacing-xl: 2rem;
    --tech-spacing-2xl: 3rem;
    --tech-spacing-3xl: 4rem;

    /* Bordes redondeados */
    --tech-radius-sm: 0.375rem;
    --tech-radius-md: 0.5rem;
    --tech-radius-lg: 0.75rem;
    --tech-radius-xl: 1rem;
    --tech-radius-2xl: 1.5rem;
    --tech-radius-full: 9999px;

    /* Transiciones */
    --tech-transition-fast: 150ms ease;
    --tech-transition-normal: 250ms ease;
    --tech-transition-slow: 350ms ease;
    --tech-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Z-index */
    --tech-z-dropdown: 100;
    --tech-z-sticky: 500;
    --tech-z-modal: 1000;
    --tech-z-tooltip: 1500;
}

/* ============================================
   RESET Y ESTILOS BASE
============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

body.tech-theme {
    font-family: var(--tech-font-primary);
    background-color: var(--tech-bg-primary);
    color: var(--tech-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TIPOGRAFIA
============================================ */
.tech-heading-1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tech-text-primary);
    letter-spacing: -0.02em;
}

.tech-heading-2 {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--tech-text-primary);
    letter-spacing: -0.01em;
}

.tech-heading-3 {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tech-text-primary);
}

.tech-text-lg {
    font-size: 1.125rem;
    line-height: 1.7;
}

.tech-text-sm {
    font-size: 0.875rem;
    line-height: 1.5;
}

.tech-text-xs {
    font-size: 0.75rem;
    line-height: 1.4;
}

.tech-text-muted {
    color: var(--tech-text-secondary);
}

/* ============================================
   CONTENEDORES
============================================ */
.tech-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--tech-spacing-lg);
}

.tech-section {
    padding: var(--tech-spacing-3xl) 0;
}

.tech-section-dark {
    background-color: var(--tech-bg-dark);
    color: var(--tech-text-light);
}

/* ============================================
   BOTONES
============================================ */
.btn-tech {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tech-spacing-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--tech-font-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--tech-radius-lg);
    cursor: pointer;
    transition: all var(--tech-transition-normal);
}

.btn-tech-primary {
    background: linear-gradient(135deg, var(--tech-accent) 0%, var(--tech-accent-hover) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-tech-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

.btn-tech-secondary {
    background-color: var(--tech-secondary);
    color: var(--tech-text-light);
}

.btn-tech-secondary:hover {
    background-color: var(--tech-tertiary);
}

.btn-tech-outline {
    background: transparent;
    color: var(--tech-accent);
    border: 2px solid var(--tech-accent);
}

.btn-tech-outline:hover {
    background-color: var(--tech-accent);
    color: white;
}

.btn-tech-ghost {
    background: transparent;
    color: var(--tech-text-primary);
}

.btn-tech-ghost:hover {
    background-color: var(--tech-bg-secondary);
}

.btn-tech-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--tech-radius-full);
}

.btn-tech-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-tech-sm {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
}

/* ============================================
   TITULOS DE SECCION
============================================ */
.tech-section-header {
    text-align: center;
    margin-bottom: var(--tech-spacing-2xl);
}

.tech-section-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--tech-text-primary);
    margin-bottom: var(--tech-spacing-sm);
    position: relative;
    display: inline-block;
}

.tech-section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--tech-accent) 0%, var(--tech-accent-light) 100%);
    border-radius: var(--tech-radius-full);
}

.tech-section-subtitle {
    font-size: 1rem;
    color: var(--tech-text-secondary);
    max-width: 600px;
    margin: var(--tech-spacing-md) auto 0;
}

/* ============================================
   BADGES Y ETIQUETAS
============================================ */
.tech-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--tech-radius-full);
}

.tech-badge-new {
    background: linear-gradient(135deg, var(--tech-accent) 0%, #3b82f6 100%);
    color: white;
}

.tech-badge-sale {
    background: linear-gradient(135deg, var(--tech-danger) 0%, #f97316 100%);
    color: white;
}

.tech-badge-hot {
    background: linear-gradient(135deg, var(--tech-warning) 0%, #f59e0b 100%);
    color: var(--tech-primary);
}

.tech-badge-stock {
    background-color: var(--tech-success);
    color: white;
}

.tech-badge-out {
    background-color: var(--tech-text-muted);
    color: white;
}

/* ============================================
   INPUTS Y FORMULARIOS
============================================ */
.tech-input {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--tech-font-primary);
    font-size: 0.9375rem;
    color: var(--tech-text-primary);
    background-color: var(--tech-bg-card);
    border: 1px solid var(--tech-border-light);
    border-radius: var(--tech-radius-lg);
    transition: all var(--tech-transition-fast);
}

.tech-input:focus {
    outline: none;
    border-color: var(--tech-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.tech-input::placeholder {
    color: var(--tech-text-muted);
}

.tech-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.tech-search-wrapper .tech-input {
    padding-left: 2.75rem;
    padding-right: 1rem;
}

.tech-search-wrapper .search-icon {
    position: absolute;
    left: 1rem;
    color: var(--tech-text-muted);
    pointer-events: none;
}

/* ============================================
   ANIMACIONES
============================================ */
@keyframes tech-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tech-slide-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tech-scale-in {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes tech-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes tech-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
    }
}

.tech-animate-fade {
    animation: tech-fade-in 0.5s ease forwards;
}

.tech-animate-slide {
    animation: tech-slide-up 0.6s ease forwards;
}

.tech-animate-scale {
    animation: tech-scale-in 0.4s ease forwards;
}

/* ============================================
   SCROLL REVEAL
============================================ */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    /* Defer rendering of offscreen sections — reduces initial styleLayout from ~550ms to ~200ms */
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered cards dentro de grids */
.scroll-reveal-card {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal,
    .scroll-reveal-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   UTILIDADES
============================================ */
.tech-text-center { text-align: center; }
.tech-text-left { text-align: left; }
.tech-text-right { text-align: right; }

.tech-flex { display: flex; }
.tech-flex-center { display: flex; align-items: center; justify-content: center; }
.tech-flex-between { display: flex; align-items: center; justify-content: space-between; }
.tech-flex-col { flex-direction: column; }
.tech-flex-wrap { flex-wrap: wrap; }
.tech-gap-sm { gap: var(--tech-spacing-sm); }
.tech-gap-md { gap: var(--tech-spacing-md); }
.tech-gap-lg { gap: var(--tech-spacing-lg); }

.tech-grid { display: grid; }
.tech-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tech-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tech-grid-4 { grid-template-columns: repeat(4, 1fr); }

.tech-hidden { display: none; }
.tech-visible { display: block; }

.tech-mt-sm { margin-top: var(--tech-spacing-sm); }
.tech-mt-md { margin-top: var(--tech-spacing-md); }
.tech-mt-lg { margin-top: var(--tech-spacing-lg); }
.tech-mb-sm { margin-bottom: var(--tech-spacing-sm); }
.tech-mb-md { margin-bottom: var(--tech-spacing-md); }
.tech-mb-lg { margin-bottom: var(--tech-spacing-lg); }

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .tech-grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 992px) {
    .tech-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .tech-grid-3 { grid-template-columns: repeat(2, 1fr); }

    .tech-heading-1 { font-size: 2rem; }
    .tech-heading-2 { font-size: 1.75rem; }

    .tech-section { padding: var(--tech-spacing-2xl) 0; }
}

@media (max-width: 768px) {
    .tech-container { padding: 0 var(--tech-spacing-md); }

    .tech-grid-4,
    .tech-grid-3,
    .tech-grid-2 { grid-template-columns: repeat(2, 1fr); }

    .tech-heading-1 { font-size: 1.75rem; }
    .tech-heading-2 { font-size: 1.5rem; }
    .tech-heading-3 { font-size: 1.25rem; }

    .tech-section-title { font-size: 1.5rem; }
}

@media (max-width: 480px) {
    .tech-grid-4,
    .tech-grid-3 { grid-template-columns: 1fr; }

    .btn-tech { width: 100%; }
    .btn-tech-lg { padding: 0.875rem 1.5rem; }
}

/* ============================================
   MOBILE: SECCION PRODUCTOS - HEADER COMPACTO
============================================ */
@media (max-width: 768px) {
    /* Reducir padding superior de la seccion productos */
    #productos.tech-section {
        padding-top: var(--tech-spacing-lg);
        padding-bottom: var(--tech-spacing-xl);
    }

    /* Reducir espaciado del header de seccion */
    #productos .tech-section-header {
        margin-bottom: var(--tech-spacing-md);
    }

    #productos .tech-section-title {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    #productos .tech-section-title::after {
        bottom: -4px;
        width: 40px;
        height: 2px;
    }

    #productos .tech-section-subtitle {
        font-size: 0.85rem;
        margin-top: var(--tech-spacing-sm);
    }

    /* Busqueda y filtros compactos en mobile */
    #productos .tech-flex.tech-flex-between.tech-mb-lg {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: var(--tech-spacing-md);
    }

    #productos .tech-search-wrapper {
        max-width: 100%;
        width: 100%;
    }

    #productos .tech-search-wrapper .tech-input {
        padding: 0.6rem 1rem 0.6rem 2.5rem;
        font-size: 0.875rem;
    }

    /* Filtros como pills horizontales scrolleables */
    #productos .tech-flex.tech-gap-sm {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0.5rem;
        padding-bottom: 2px;
    }

    #productos .tech-flex.tech-gap-sm::-webkit-scrollbar {
        display: none;
    }

    #productos .tech-flex.tech-gap-sm .btn-tech {
        width: auto;
        flex-shrink: 0;
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
        border-radius: var(--tech-radius-full);
    }
}

/* Estado activo para filtros */
.btn-tech-ghost.active {
    background-color: var(--tech-accent);
    color: white;
}

.btn-tech-ghost.active:hover {
    background-color: var(--tech-accent-hover);
    color: white;
}

/* ============================================
   SECCION OFERTAS - URGENCIA
============================================ */
.ofertas-section {
    background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 50%, #fefce8 100%);
    position: relative;
    overflow: hidden;
    contain: layout style;
}

.ofertas-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 0% 0%, rgba(239, 68, 68, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(249, 115, 22, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.ofertas-urgencia {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--tech-radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--tech-danger);
    margin-bottom: 0.75rem;
    animation: tech-pulse 2s infinite;
}

.ofertas-urgencia i {
    animation: tech-pulse 1.5s infinite;
}

/* ============================================
   SECCION MAS VENDIDOS - PREMIUM
============================================ */
.bestsellers-section {
    background: linear-gradient(180deg, var(--tech-bg-primary) 0%, #eef2ff 100%);
    position: relative;
    contain: layout style;
}

.bestsellers-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 60%);
    pointer-events: none;
}

/* Medallas para top sellers */
.bestseller-medal {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tech-radius-full);
    font-size: 0.85rem;
    font-weight: 800;
    z-index: 5;
    animation: medal-pulse 2s ease-in-out infinite;
}

@keyframes medal-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
    50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }
}

.bestseller-medal::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--tech-radius-full);
    opacity: 0.4;
    z-index: -1;
}

.bestseller-medal.gold {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #78350f;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.5);
}

.bestseller-medal.gold::before {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.bestseller-medal.silver {
    background: linear-gradient(135deg, #e2e8f0 0%, #94a3b8 100%);
    color: #334155;
    box-shadow: 0 4px 15px rgba(148, 163, 184, 0.5);
}

.bestseller-medal.silver::before {
    background: linear-gradient(135deg, #e2e8f0, #94a3b8);
}

.bestseller-medal.bronze {
    background: linear-gradient(135deg, #fdba74 0%, #ea580c 100%);
    color: #7c2d12;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.4);
}

.bestseller-medal.bronze::before {
    background: linear-gradient(135deg, #fdba74, #ea580c);
}

/* ============================================
   SCROLLBAR PERSONALIZADO
============================================ */
.tech-theme::-webkit-scrollbar {
    width: 10px;
}

.tech-theme::-webkit-scrollbar-track {
    background: var(--tech-bg-secondary);
}

.tech-theme::-webkit-scrollbar-thumb {
    background: var(--tech-tertiary);
    border-radius: var(--tech-radius-full);
}

.tech-theme::-webkit-scrollbar-thumb:hover {
    background: var(--tech-secondary);
}

/* ============================================
   SELECCION DE TEXTO
============================================ */
.tech-theme ::selection {
    background-color: var(--tech-accent);
    color: white;
}

/* ============================================
   CLASES AUXILIARES DE TIENDA
============================================ */

/* Titulo de ofertas especiales con color de peligro */
.tech-section-title--ofertas {
    color: var(--tech-danger);
}

/* Estado vacio de productos */
.productos-vacio {
    grid-column: 1 / -1;
    padding: 3rem;
}

.productos-vacio__icono {
    font-size: 3rem;
    color: var(--tech-text-muted);
    margin-bottom: 1rem;
}

.productos-vacio__mensaje {
    color: var(--tech-text-secondary);
}
/**
 * navbar-tech — Premium Dark Tech Navbar
 * Enhanced: glassmorphism, gradient accents, premium user dropdown
 */

/* ============================================
   NAVBAR LAYOUT — Estructura base
============================================ */
.navbar-tech {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(8, 13, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.navbar-tech::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.4) 30%, rgba(59, 130, 246, 0.3) 70%, transparent 100%);
    pointer-events: none;
}

.navbar-tech.scrolled {
    background: rgba(6, 10, 20, 0.97);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

.navbar-tech-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 72px;
}

/* ── Logo ── */
.navbar-tech-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    flex-shrink: 0;
    padding: 4px 6px 4px 0;
}

.navbar-tech-logo-img-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.navbar-tech-logo-img-wrap::before {
    content: '';
    position: absolute;
    inset: -8px;
    background: radial-gradient(circle, rgba(59,130,246,0.5) 0%, rgba(99,102,241,0.2) 45%, transparent 70%);
    filter: blur(12px);
    z-index: 0;
    opacity: 0.6;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.navbar-tech-logo:hover .navbar-tech-logo-img-wrap::before { opacity: 1; }

.navbar-tech-logo-img {
    position: relative;
    z-index: 1;
    max-height: 56px;
    width: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(59, 130, 246, 0.5));
    transition: transform 0.3s cubic-bezier(.34,1.56,.64,1), filter 0.3s ease;
}
.navbar-tech-logo:hover .navbar-tech-logo-img {
    transform: scale(1.06);
    filter: drop-shadow(0 4px 14px rgba(96, 165, 250, 0.7));
}

.navbar-tech-logo-icon {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    box-shadow: 0 2px 12px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.navbar-tech-logo:hover .navbar-tech-logo-icon {
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5), inset 0 1px 0 rgba(255,255,255,0.2);
    transform: scale(1.06);
}

.navbar-tech-logo-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    gap: 2px;
}

.navbar-tech-logo-text {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 60%, #93c5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: filter 0.3s ease;
}

.navbar-tech-logo:hover .navbar-tech-logo-text {
    background: linear-gradient(135deg, #fff 0%, #93c5fd 60%, #bfdbfe 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.4));
}

.navbar-tech-logo-tagline {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: #60a5fa;
    text-transform: uppercase;
    opacity: 0.85;
    transition: opacity 0.3s ease, color 0.3s ease;
}

.navbar-tech-logo:hover .navbar-tech-logo-tagline {
    opacity: 1;
    color: #93c5fd;
}

/* ── Menu Desktop ── */
.navbar-tech-menu {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-tech-menu > li {
    position: relative;
}

.navbar-tech-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
    position: relative;
    letter-spacing: 0.01em;
}

.navbar-tech-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    right: 50%;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 2px;
    transition: left 0.25s ease, right 0.25s ease, opacity 0.2s ease;
    opacity: 0;
}

.navbar-tech-link:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
}

.navbar-tech-link:hover::after,
.navbar-tech-link.active::after {
    left: 12px;
    right: 12px;
    opacity: 1;
}

.navbar-tech-link.active {
    color: #f1f5f9;
    background: rgba(59, 130, 246, 0.07);
}

.navbar-tech-link .fa-chevron-down {
    font-size: 0.55rem;
    opacity: 0.45;
    transition: transform 0.25s ease, opacity 0.2s ease;
}

.navbar-tech-menu > li:hover .fa-chevron-down {
    transform: rotate(180deg);
    opacity: 0.8;
}

/* ── Dropdowns ── */
.navbar-tech-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 210px;
    background: rgba(10, 16, 32, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-top: 2px solid #3b82f6;
    border-radius: 0 0 14px 14px;
    padding: 0.5rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(59, 130, 246, 0.06);
    z-index: 100;
    animation: navbar-dropdown-in 0.18s ease;
}

@keyframes navbar-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.navbar-tech-menu > li:hover > .navbar-tech-dropdown {
    display: block;
}

.navbar-tech-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.8rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.18s ease;
}

.navbar-tech-dropdown-item:hover {
    color: #f1f5f9;
    background: rgba(59, 130, 246, 0.09);
    transform: translateX(3px);
}

.navbar-tech-dropdown-item i {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 7px;
    font-size: 0.78rem;
    color: #60a5fa;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease;
}

.navbar-tech-dropdown-item:hover i {
    background: rgba(59, 130, 246, 0.18);
    color: #93c5fd;
}

/* ── Actions (derecha) ── */
.navbar-tech-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ── Search ── */
.navbar-tech-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.navbar-tech-search:focus-within {
    background: rgba(59, 130, 246, 0.04);
    border-color: rgba(59, 130, 246, 0.35);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.09);
}

.navbar-tech-search-input {
    background: transparent;
    border: none;
    outline: none;
    padding: 0.45rem 0.75rem;
    color: #e2e8f0;
    font-size: 0.85rem;
    width: 180px;
}

.navbar-tech-search-input::placeholder {
    color: #334155;
}

.navbar-tech-search-btn {
    background: transparent;
    border: none;
    color: #475569;
    padding: 0.45rem 0.65rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.navbar-tech-search-btn:hover {
    color: #60a5fa;
}

/* ── Icon action buttons ── */
.navbar-tech-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #64748b;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.navbar-tech-action:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ── Cart badge ── */
.navbar-tech-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.5);
    border: 1.5px solid rgba(8, 13, 26, 0.9);
}

/* ── User button ── */
.navbar-tech-user-container {
    position: relative;
}

.navbar-tech-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem 0.3rem 0.3rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.25s ease;
    color: #fff;
}

.navbar-tech-user:hover,
.navbar-tech-user-container.active .navbar-tech-user {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.22);
}

.navbar-tech-user-avatar {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.78rem;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
    transition: box-shadow 0.2s ease;
}

.navbar-tech-user:hover .navbar-tech-user-avatar {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.45);
}

.navbar-tech-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #cbd5e1;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.navbar-tech-user-chevron {
    font-size: 0.55rem;
    color: #475569;
    transition: transform 0.25s ease;
}

.navbar-tech-user-container.active .navbar-tech-user-chevron {
    transform: rotate(180deg);
}

/* ── User dropdown panel ── */
.navbar-tech-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: #0c1524;
    border: 1px solid rgba(59, 130, 246, 0.12);
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.03);
    z-index: 200;
    overflow: hidden;
    animation: navbar-dropdown-in 0.18s ease;
}

.navbar-tech-user-dropdown.active {
    display: block;
}

.navbar-tech-user-dropdown-header {
    padding: 1rem 1.25rem 0.9rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.08));
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.navbar-tech-user-dropdown-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #2563eb, #3b82f6);
}

.navbar-tech-user-dropdown-name {
    font-weight: 700;
    color: #f1f5f9;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.navbar-tech-user-dropdown-role {
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.2);
    padding: 0.12rem 0.5rem;
    border-radius: 20px;
    display: inline-block;
    margin-top: 0.3rem;
    text-transform: capitalize;
    letter-spacing: 0.02em;
}

.navbar-tech-user-dropdown-menu {
    padding: 0.5rem;
}

.navbar-tech-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    color: #64748b;
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 500;
    border-radius: 9px;
    transition: all 0.18s ease;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    font-family: inherit;
    text-align: left;
}

.navbar-tech-user-dropdown-item:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.navbar-tech-user-dropdown-item i {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    font-size: 0.78rem;
    color: #475569;
    flex-shrink: 0;
    transition: all 0.18s ease;
}

.navbar-tech-user-dropdown-item:hover i {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
}

.navbar-tech-user-dropdown-item.logout {
    color: #64748b;
}

.navbar-tech-user-dropdown-item.logout:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.07);
}

.navbar-tech-user-dropdown-item.logout:hover i {
    background: rgba(239, 68, 68, 0.1);
    color: #f87171;
}

.navbar-tech-user-dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0.3rem 0.5rem;
}

/* ── Ofertas badge ── */
.navbar-tech-ofertas-badge {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    margin-left: auto;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.35);
}

/* ── Mobile toggle (hamburger → X) ── */
.navbar-tech-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.18);
    color: #93c5fd;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.navbar-tech-toggle:hover,
.navbar-tech-toggle:focus-visible {
    background: rgba(59, 130, 246, 0.14);
    border-color: rgba(59, 130, 246, 0.35);
    color: #fff;
}

.navbar-tech-toggle-bars {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 14px;
}
.navbar-tech-toggle-bars span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                top 0.22s cubic-bezier(0.4, 0, 0.2, 1) 0.08s,
                opacity 0.18s ease;
}
.navbar-tech-toggle-bars span:nth-child(1) { top: 0; }
.navbar-tech-toggle-bars span:nth-child(2) { top: 6px; }
.navbar-tech-toggle-bars span:nth-child(3) { top: 12px; }
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span {
    transition: top 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.18s,
                opacity 0.18s ease;
}
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span:nth-child(2) { opacity: 0; }
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.navbar-hide-mobile {
    display: flex;
}

/* ── Mobile menu drawer ── */
.navbar-tech-mobile {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(1100px 500px at 100% -10%, rgba(59,130,246,0.12), transparent 60%),
        radial-gradient(900px 600px at -10% 100%, rgba(59, 130, 246,0.08), transparent 60%),
        linear-gradient(180deg, #0a1224 0%, #060a16 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0 2rem;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    border-top: 1px solid rgba(59, 130, 246, 0.12);
    -webkit-overflow-scrolling: touch;
}

.navbar-tech-mobile.active {
    display: block;
    transform: translateX(0);
}

/* Sticky search inside mobile menu */
.navbar-tech-mobile-search {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 0.85rem 1rem;
    background: rgba(8, 13, 26, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(59, 130, 246, 0.08);
}
.navbar-tech-mobile-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.navbar-tech-mobile-search-icon {
    position: absolute;
    left: 14px;
    color: #60a5fa;
    font-size: 0.95rem;
    pointer-events: none;
}
.navbar-tech-mobile-search-input {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
    padding: 0 1rem 0 2.6rem;
    font-size: 0.95rem;
    outline: none;
    font-family: inherit;
    transition: border-color .18s ease, background .18s ease;
}
.navbar-tech-mobile-search-input::placeholder { color: #64748b; }
.navbar-tech-mobile-search-input:focus {
    border-color: rgba(59,130,246,0.45);
    background: rgba(59,130,246,0.06);
}

/* User / guest card */
.navbar-tech-mobile-card {
    margin: 1rem;
    padding: 0.95rem;
    background: linear-gradient(135deg, rgba(59,130,246,0.14), rgba(99,102,241,0.08));
    border: 1px solid rgba(59,130,246,0.22);
    border-radius: 16px;
    box-shadow: 0 6px 24px -12px rgba(59,130,246,0.45);
}
.navbar-tech-mobile-card-user {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.navbar-tech-mobile-card-avatar {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(59,130,246,0.5);
}
.navbar-tech-mobile-card-info { flex: 1; min-width: 0; }
.navbar-tech-mobile-card-name {
    font-size: 0.98rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.navbar-tech-mobile-card-role {
    font-size: 0.7rem;
    color: #93c5fd;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: 2px;
}
.navbar-tech-mobile-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}
.navbar-tech-mobile-card-subtitle {
    font-size: 0.82rem;
    color: #cbd5e1;
    margin-bottom: 0.85rem;
    line-height: 1.4;
}
.navbar-tech-mobile-card-actions {
    display: flex;
    gap: 0.55rem;
}
.navbar-tech-mobile-card-btn {
    flex: 1;
    height: 44px;
    border-radius: 11px;
    border: none;
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    font-family: inherit;
    text-decoration: none;
}
.navbar-tech-mobile-card-btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    box-shadow: 0 4px 14px -2px rgba(59,130,246,0.5);
}
.navbar-tech-mobile-card-btn-primary:active { transform: scale(0.97); }
.navbar-tech-mobile-card-btn-secondary {
    background: rgba(255,255,255,0.06);
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Section headers */
.navbar-tech-mobile-section {
    padding: 1.1rem 1.5rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #93c5fd;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navbar-tech-mobile-section::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(147,197,253,0.25), transparent);
}

/* Menu list */
.navbar-tech-mobile-menu {
    list-style: none;
    padding: 0.2rem 0.7rem;
    margin: 0;
}

/* Links */
.navbar-tech-mobile-link {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.75rem;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.18s ease, color 0.18s ease;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
    min-height: 54px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}

.navbar-tech-mobile-link:hover,
.navbar-tech-mobile-link:active,
.navbar-tech-mobile-link:focus-visible {
    background: rgba(59, 130, 246, 0.10);
    color: #fff;
    outline: none;
}

.navbar-tech-mobile-link.active {
    background: linear-gradient(90deg, rgba(59,130,246,0.18), rgba(99,102,241,0.06));
    color: #fff;
}
.navbar-tech-mobile-link.active::before {
    content: '';
    position: absolute;
    left: -0.7rem;
    top: 14px;
    bottom: 14px;
    width: 3px;
    background: linear-gradient(180deg, #3b82f6, #2563eb);
    border-radius: 0 3px 3px 0;
}

.navbar-tech-mobile-link i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.10);
    border-radius: 11px;
    font-size: 1.05rem;
    flex-shrink: 0;
    color: #60a5fa;
    transition: transform 0.18s ease, background 0.18s ease;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.14);
}

.navbar-tech-mobile-link:hover i,
.navbar-tech-mobile-link:active i {
    transform: scale(1.06);
    background: rgba(59, 130, 246, 0.18);
}

.navbar-tech-mobile-link.active i {
    background: rgba(59, 130, 246, 0.22);
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4),
                0 4px 12px -4px rgba(59, 130, 246, 0.5);
}

/* Trailing chevron for items with submenu */
.navbar-tech-mobile-link-arrow {
    margin-left: auto;
    color: #475569;
    font-size: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    box-shadow: none !important;
    transition: transform 0.22s ease, color 0.18s ease;
}
.navbar-tech-mobile-cat.is-open > .navbar-tech-mobile-link .navbar-tech-mobile-link-arrow {
    transform: rotate(180deg);
    color: #93c5fd;
}

/* Submenu (collapsed by default, animated reveal) */
.navbar-tech-mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0.15rem 0 0.35rem 1.7rem;
    border-left: 1px dashed rgba(59, 130, 246, 0.22);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.navbar-tech-mobile-cat.is-open > .navbar-tech-mobile-submenu {
    max-height: 1200px;
}
.navbar-tech-mobile-link-sub {
    padding: 0.55rem 0.7rem;
    min-height: 44px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #cbd5e1;
}
.navbar-tech-mobile-link-sub i {
    width: 32px;
    height: 32px;
    font-size: 0.82rem;
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    color: #94a3b8;
    box-shadow: none;
}

/* Trailing badge support (Ofertas, etc.) */
.navbar-tech-mobile-link-trailing {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: #fff;
    box-shadow: 0 2px 8px -2px rgba(245, 158, 11, 0.5);
}

/* Backdrop overlay */
.navbar-tech-mobile-backdrop {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.navbar-tech-mobile-backdrop.active {
    display: block;
    opacity: 1;
}

/* ── PWA badge ── */
.navbar-pwa-badge-new {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: auto;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Body offset ── */
body.tech-theme {
    padding-top: 72px;
}

/* ============================================
   RESPONSIVE — Mobile
============================================ */
@media (max-width: 991px) {
    .navbar-tech-menu   { display: none; }
    .navbar-tech-search { display: none; }
    .navbar-hide-mobile { display: none; }
    .navbar-tech-toggle { display: flex; }

    .navbar-tech-container {
        height: 56px;
        padding: 0 1rem;
    }

    body.tech-theme { padding-top: 56px; }

    .navbar-tech-mobile { top: 56px; }

    .navbar-tech-logo-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 0.95rem;
    }

    .navbar-tech-logo-img-wrap { width: 38px; height: 38px; }
    .navbar-tech-logo-img { max-height: 38px; }
    .navbar-tech-logo-text { font-size: 1.25rem; }
    .navbar-tech-logo-tagline { font-size: 0.5rem; letter-spacing: 0.18em; }
}

@media (max-width: 767px) {
    .navbar-tech-user-name    { display: none; }
    .navbar-tech-user-chevron { display: none; }
    .navbar-tech-logo-tagline { display: none; }
    .navbar-tech-logo { gap: 0.55rem; }
}

@media (max-width: 380px) {
    .navbar-tech-logo-text { font-size: 1.1rem; }
    .navbar-tech-logo-img-wrap { width: 34px; height: 34px; }
    .navbar-tech-logo-img { max-height: 34px; }
}

/* ============================================
   CLASES AUXILIARES
============================================ */
.navbar-tech-link-ofertas        { color: var(--tech-warning, #f59e0b); }
.navbar-tech-mobile-link-ofertas { color: var(--tech-warning, #f59e0b); }
.navbar-icono-descarga           { color: #10b981; }
.navbar-tech-separador-movil     { border-color: rgba(255,255,255,0.06); margin: 0.75rem 0; }
.navbar-icono-regalo             { color: #10b981; }
.navbar-icono-campana            { color: #2563eb; }
.navbar-tech-mobile-link-cerrar  { color: var(--tech-danger, #ef4444); }

/* ==================== MODAL LOGIN PREMIUM ==================== */
.login-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 99999;
    animation: fadeIn 0.3s ease;
    overflow-y: auto;
    padding: 20px 0;
}

.login-modal-overlay.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.login-modal-container {
    position: relative;
    width: 90%;
    max-width: 460px;
    background: linear-gradient(160deg, #06090f 0%, #0f172a 55%, #131d35 100%);
    border-radius: 16px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85),
                0 0 60px rgba(59, 130, 246, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
    padding: 0;
    margin: auto;
    animation: modalSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
}

.login-modal-header {
    background: #070b14;
    border-top: 2px solid #3b82f6;
    border-bottom: 1px solid rgba(59, 130, 246, 0.1);
    padding: 24px 30px 22px;
    text-align: center;
    position: relative;
}

.login-modal-logo-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255,255,255,0.15);
    margin: 0 auto 12px;
}

.login-modal-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 10px;
}

.login-modal-logo-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(59,130,246,0.55) 0%, rgba(99,102,241,0.22) 45%, transparent 72%);
    filter: blur(14px);
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
}

.login-modal-logo-img {
    position: relative;
    z-index: 1;
    max-height: 64px;
    width: auto;
    display: block;
    filter: drop-shadow(0 3px 10px rgba(59, 130, 246, 0.55));
}

.login-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.4);
    font-size: 18px;
    font-weight: 400;
    font-family: inherit;
    line-height: 1;
    z-index: 10;
}

.login-modal-close:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.4);
    color: #60a5fa;
    transform: none;
    box-shadow: none;
}

.login-modal-title {
    font-family: 'Urbanist', 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #f1f5f9;
    margin: 0;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.login-modal-subtitle {
    color: rgba(148, 163, 184, 0.55);
    margin-top: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.login-modal-body {
    padding: 32px 30px 36px;
    background: #0f172a;
}

.login-form-group {
    margin-bottom: 20px;
    position: relative;
}

.login-form-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.login-form-input {
    width: 100%;
    padding: 13px 18px 13px 46px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 15px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

input[type="password"].login-form-input,
input[type="text"].login-form-input[id*="password"] {
    padding-right: 46px;
}

.login-form-input:hover {
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(255, 255, 255, 0.05);
}

.login-form-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.04);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.login-form-input::placeholder {
    color: rgba(148, 163, 184, 0.3);
    font-style: normal;
}

.login-form-icon {
    position: absolute;
    left: 16px;
    top: 41px;
    color: #475569;
    font-size: 16px;
    pointer-events: none;
    transition: color 0.2s ease;
}

.login-form-group:focus-within .login-form-icon {
    color: #60a5fa;
}

.toggle-password-icon {
    position: absolute;
    right: 16px;
    top: 41px;
    color: #475569;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 10;
}

.toggle-password-icon:hover {
    color: #94a3b8;
    transform: none;
    text-shadow: none;
}

.login-forgot-row {
    text-align: right;
    margin-top: -10px;
    margin-bottom: 20px;
}

.login-forgot-link {
    color: #475569;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-forgot-link:hover {
    color: #60a5fa;
}

.login-form-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
    margin-top: 8px;
    text-shadow: none;
}

.login-form-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #4f8ff7 0%, #7678f0 100%);
    box-shadow: 0 6px 28px rgba(59, 130, 246, 0.45);
    filter: none;
}

.login-form-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.login-footer-text {
    text-align: center;
    margin-top: 22px;
    color: rgba(100, 116, 139, 0.8);
    font-size: 13px;
}

.login-footer-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
    text-shadow: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    display: inline;
}

.login-footer-link:hover {
    color: #93c5fd;
    text-decoration: underline;
    text-shadow: none;
}

.login-alert {
    display: none;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
    align-items: center;
    gap: 10px;
}

.login-alert.active {
    display: flex;
}

.login-alert.login-alert-error {
    background: rgba(255, 71, 87, 0.25);
    border: 2px solid rgba(255, 71, 87, 0.7);
    color: #ff6b7a;
}

.login-alert.login-alert-success {
    background: rgba(46, 213, 115, 0.25);
    border: 2px solid rgba(46, 213, 115, 0.7);
    color: #5aff9e;
}

.login-loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 46, 0.9);
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.login-loading.active {
    display: flex;
}

.login-loading::after {
    content: '';
    width: 40px;
    height: 40px;
    border: 2px solid rgba(59, 130, 246, 0.15);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   CLASES AUXILIARES NAVBAR
============================================ */

/* Enlace de ofertas resaltado */
.navbar-tech-link-ofertas {
    color: var(--tech-warning);
}

/* Enlace móvil de ofertas resaltado */
.navbar-tech-mobile-link-ofertas {
    color: var(--tech-warning);
}

/* Icono de descarga color éxito */
.navbar-icono-descarga {
    color: #10b981;
}

/* Separador del menú móvil */
.navbar-tech-separador-movil {
    border-color: var(--tech-border-dark);
    margin: 1rem 0;
}

/* Icono de regalo color éxito */
.navbar-icono-regalo {
    color: #10b981;
}

/* Icono de campana color acento */
.navbar-icono-campana {
    color: #2563eb;
}

/* Enlace móvil de cerrar sesión */
.navbar-tech-mobile-link-cerrar {
    color: var(--tech-danger);
}
/**
 * HERO TECH - Slider de productos destacados
 * Tienda de Tecnologia Morfeo
 */

/* ============================================
   HERO SECTION PRINCIPAL
============================================ */
.hero-tech {
    position: relative;
    width: 100%;
    min-height: 500px;
    background: linear-gradient(135deg, var(--tech-primary) 0%, var(--tech-secondary) 100%);
    overflow: hidden;
}

/* Patron de fondo */
.hero-tech::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Grid decorativo */
.hero-tech::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

/* ============================================
   SLIDER CONTAINER
============================================ */
.hero-slider {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s ease;
}

.hero-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

/* Barra de progreso del slider */
.hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 15;
}

.hero-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--tech-accent) 0%, var(--tech-accent-light) 100%);
    width: 0%;
    transition: width 0.1s linear;
}

.hero-progress-bar.animating {
    width: 100%;
    transition: width 5s linear;
}

.hero-progress-bar.reset {
    width: 0%;
    transition: none;
}

/* Slide counter */
.hero-counter {
    position: absolute;
    top: var(--tech-spacing-xl);
    right: var(--tech-spacing-xl);
    z-index: 10;
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    font-family: var(--tech-font-primary);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
}

.hero-counter-current {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.hero-counter-separator {
    margin: 0 0.15rem;
    opacity: 0.5;
}

.hero-slide-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tech-spacing-2xl);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--tech-spacing-3xl) var(--tech-spacing-lg);
    width: 100%;
}

/* ============================================
   CONTENIDO DEL HERO
============================================ */
.hero-content {
    flex: 1;
    max-width: 550px;
    animation: tech-slide-up 0.8s ease forwards;
}

.hero-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--tech-spacing-sm);
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, var(--tech-accent) 0%, #3b82f6 100%);
    border-radius: var(--tech-radius-full);
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--tech-spacing-lg);
}

.hero-tag i {
    font-size: 0.75rem;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--tech-text-light);
    line-height: 1.1;
    margin-bottom: var(--tech-spacing-md);
    letter-spacing: -0.02em;
}

.hero-title span {
    background: linear-gradient(135deg, var(--tech-accent) 0%, var(--tech-accent-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.125rem;
    color: var(--tech-silver-dark);
    line-height: 1.7;
    margin-bottom: var(--tech-spacing-lg);
}

/* Precios */
.hero-prices {
    display: flex;
    align-items: baseline;
    gap: var(--tech-spacing-md);
    margin-bottom: var(--tech-spacing-xl);
}

.hero-price-current {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--tech-text-light);
}

.hero-price-old {
    font-size: 1.25rem;
    color: var(--tech-text-muted);
    text-decoration: line-through;
}

.hero-discount {
    padding: 0.25rem 0.75rem;
    background-color: var(--tech-success);
    border-radius: var(--tech-radius-full);
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

/* Botones */
.hero-buttons {
    display: flex;
    gap: var(--tech-spacing-md);
}

.hero-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tech-spacing-sm);
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--tech-accent) 0%, var(--tech-accent-hover) 100%);
    color: white;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--tech-radius-lg);
    cursor: pointer;
    transition: all var(--tech-transition-normal);
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.4);
}

.hero-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.5);
}

.hero-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--tech-spacing-sm);
    padding: 1rem 2rem;
    background: transparent;
    color: var(--tech-text-light);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--tech-silver-dark);
    border-radius: var(--tech-radius-lg);
    cursor: pointer;
    transition: all var(--tech-transition-normal);
}

.hero-btn-secondary:hover {
    border-color: var(--tech-accent);
    color: var(--tech-accent);
}

/* ============================================
   IMAGEN DEL PRODUCTO
============================================ */
.hero-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: tech-fade-in 1s ease forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

/* LCP fix: first active slide renders instantly without animation delay */
.hero-slide.active .hero-image {
    animation: none;
    opacity: 1;
}

.hero-slide.active .hero-content {
    animation: none;
    opacity: 1;
}

.hero-image img {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
    transition: transform var(--tech-transition-slow);
}

.hero-slide:hover .hero-image img {
    transform: scale(1.05) rotate(-2deg);
}

/* Circulo decorativo detras del producto */
.hero-image::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    z-index: -1;
}

/* Grafico de fallback cuando no hay productos destacados */
.hero-fallback-graphic {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.15) 100%);
    border-radius: 50%;
    position: relative;
}

.hero-fallback-graphic i {
    font-size: 6rem;
    color: rgba(255, 255, 255, 0.6);
    animation: float-gentle 3s ease-in-out infinite;
}

@keyframes float-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.hero-fallback-graphic::before {
    content: '';
    position: absolute;
    inset: -20px;
    border: 2px solid rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(1.2); opacity: 0; }
}

/* ============================================
   NAVEGACION DEL SLIDER
============================================ */
.hero-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--tech-spacing-lg);
    z-index: 10;
    pointer-events: none;
}

.hero-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--tech-radius-full);
    color: var(--tech-text-light);
    font-size: 1.125rem;
    cursor: pointer;
    transition: all var(--tech-transition-fast);
    pointer-events: auto;
    backdrop-filter: blur(10px);
}

.hero-nav-btn:hover {
    background-color: var(--tech-accent);
    border-color: var(--tech-accent);
    transform: scale(1.1);
}

/* Dots de navegacion */
.hero-dots {
    position: absolute;
    bottom: var(--tech-spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0;
    z-index: 10;
}

.hero-dot {
    width: 12px;
    height: 12px;
    padding: 18px 12px;  /* Expands touch target to 48x48 without changing visual dot */
    background-color: rgba(255, 255, 255, 0.3);
    background-clip: content-box;
    border: none;
    border-radius: var(--tech-radius-full);
    cursor: pointer;
    transition: all var(--tech-transition-fast);
    box-sizing: content-box;
}

.hero-dot:hover {
    background-color: rgba(255, 255, 255, 0.5);
    background-clip: content-box;
}

.hero-dot.active {
    width: 36px;
    background: linear-gradient(90deg, var(--tech-accent) 0%, var(--tech-accent-light) 100%);
    background-clip: content-box;
}

/* ============================================
   FEATURES BAR (Debajo del Hero) - PREMIUM
============================================ */
/* ============================================
   FEATURES BAR — Dark Glass Premium
   Continuidad visual con el hero/navbar dark navy
============================================ */
.features-tech {
    /* Dark navy — flujo continuo sin divisores */
    background: linear-gradient(180deg, #0b1221 0%, #080d1a 100%);
    border-top: none;
    border-image: none;
    border-bottom: none;
    padding: 1.5rem 0;
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: auto 100px;
}

/* Glow azul centrado — mismo ambiente luminoso del hero */
.features-tech::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 140px;
    background: radial-gradient(ellipse, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

.features-tech::after {
    display: none;
}

.features-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.feature-tech-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    position: relative;
}

/* Divisor vertical glass */
.feature-tech-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(59, 130, 246, 0.25) 50%,
        transparent 100%);
}

.feature-tech-item:hover {
    transform: translateY(-2px);
}

/* Icono — glass con borde azul y glow */
.feature-tech-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    /* Glass oscuro */
    background: rgba(59, 130, 246, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(59, 130, 246, 0.22);
    border-radius: 14px;
    /* Reflejo superior */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 16px rgba(59, 130, 246, 0.10);
    color: #60a5fa;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.feature-tech-item:hover .feature-tech-icon {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.40);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 6px 20px rgba(59, 130, 246, 0.25);
    transform: scale(1.08);
    color: #93c5fd;
}

/* Título del feature — blanco */
.feature-tech-text h4,
.feature-tech-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 0.2rem 0;
    letter-spacing: -0.01em;
}

/* Subtítulo — plata */
.feature-tech-text p {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.80);
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .hero-title {
        font-size: 3rem;
    }

    .hero-image img {
        max-height: 400px;
    }
}

@media (max-width: 992px) {
    .hero-tech {
        min-height: auto;
    }

    .hero-slide-inner {
        flex-direction: column-reverse;
        text-align: center;
        padding: var(--tech-spacing-2xl) var(--tech-spacing-lg);
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-prices {
        justify-content: center;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-image img {
        max-height: 300px;
    }

    .hero-nav {
        display: none;
    }

    .features-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-tech-item:nth-child(2)::after {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-price-current {
        font-size: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }

    .hero-image img {
        max-height: 220px;
    }

    /* Espacio inferior para que los dots no se superpongan con los botones */
    .hero-slide-inner {
        padding-bottom: calc(var(--tech-spacing-2xl) + 30px);
    }

    .hero-dots {
        bottom: var(--tech-spacing-md);
    }
}

@media (max-width: 576px) {
    .features-tech-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .feature-tech-item {
        padding: var(--tech-spacing-md) var(--tech-spacing-lg);
    }

    .feature-tech-item:not(:last-child)::after {
        display: none;
    }

    .hero-slide-inner {
        padding: var(--tech-spacing-lg);
        padding-bottom: calc(var(--tech-spacing-xl) + 30px);
    }

    .hero-tag {
        font-size: 0.75rem;
        margin-bottom: var(--tech-spacing-sm);
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .hero-description {
        font-size: 0.875rem;
        margin-bottom: var(--tech-spacing-md);
    }

    .hero-prices {
        margin-bottom: var(--tech-spacing-md);
    }

    .hero-price-current {
        font-size: 1.75rem;
    }

    .hero-image img {
        max-height: 180px;
    }

    .hero-btn-primary,
    .hero-btn-secondary {
        padding: 0.65rem 1.25rem;
        font-size: 0.85rem;
    }

    .hero-dots {
        bottom: var(--tech-spacing-sm);
    }

    .hero-dot {
        width: 8px;
        height: 8px;
        padding: 20px 10px;  /* Touch target 48x48 on mobile */
    }

    .hero-dot.active {
        width: 28px;
    }
}
/**
 * CARDS TECH - Tarjetas de productos con hover overlay
 * Tienda de Tecnologia Morfeo
 */

/* ============================================
   GRID DE PRODUCTOS
============================================ */
.products-tech-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--tech-spacing-lg);
    contain: layout style;
}

/* ============================================
   CARD DE PRODUCTO
============================================ */
.product-card-tech {
    position: relative;
    background-color: var(--tech-bg-card);
    border-radius: var(--tech-radius-xl);
    overflow: hidden;
    box-shadow: var(--tech-shadow-sm);
    transition: transform var(--tech-transition-normal), box-shadow var(--tech-transition-normal);
    contain: layout style paint;
}

.product-card-tech:hover {
    transform: translateY(-8px);
    box-shadow: var(--tech-shadow-xl);
}

/* ============================================
   IMAGEN Y OVERLAY
============================================ */
.product-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Aspect ratio 1:1 */
    background-color: #ffffff;
    overflow: hidden;
}

.product-image-wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    object-fit: contain;
    transition: transform var(--tech-transition-normal);
}

.product-card-tech:hover .product-image-wrapper img {
    transform: translate(-50%, -50%) scale(1.08);
}

/* Overlay con acciones */
.product-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tech-spacing-sm);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.8) 100%);
    opacity: 0;
    visibility: hidden;
    transition: all var(--tech-transition-normal);
}

.product-card-tech:hover .product-overlay {
    opacity: 1;
    visibility: visible;
}

.overlay-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background-color: var(--tech-bg-card);
    border: none;
    border-radius: var(--tech-radius-full);
    color: var(--tech-text-primary);
    font-size: 1rem;
    cursor: pointer;
    transform: translateY(20px);
    opacity: 0;
    transition: all var(--tech-transition-normal);
    box-shadow: var(--tech-shadow-md);
}

.product-card-tech:hover .overlay-btn {
    transform: translateY(0);
    opacity: 1;
}

.product-card-tech:hover .overlay-btn:nth-child(1) { transition-delay: 0.05s; }
.product-card-tech:hover .overlay-btn:nth-child(2) { transition-delay: 0.1s; }
.product-card-tech:hover .overlay-btn:nth-child(3) { transition-delay: 0.15s; }

.overlay-btn:hover {
    background: linear-gradient(135deg, var(--tech-accent) 0%, var(--tech-accent-hover) 100%);
    color: white;
    transform: scale(1.1);
}

.overlay-btn.active {
    background: linear-gradient(135deg, var(--tech-danger) 0%, #f97316 100%);
    color: white;
}

.overlay-btn.active i {
    font-weight: 900;
}

/* ============================================
   BADGES
============================================ */
.product-badges {
    position: absolute;
    top: var(--tech-spacing-sm);
    left: var(--tech-spacing-sm);
    display: flex;
    flex-direction: column;
    gap: var(--tech-spacing-xs);
    z-index: 5;
}

.product-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--tech-radius-md);
}

.product-badge.new {
    background: linear-gradient(135deg, var(--tech-accent) 0%, #3b82f6 100%);
    color: white;
}

.product-badge.sale {
    background: linear-gradient(135deg, var(--tech-danger) 0%, #f97316 100%);
    color: white;
}

.product-badge.hot {
    background: linear-gradient(135deg, var(--tech-warning) 0%, #fbbf24 100%);
    color: var(--tech-primary);
}

.product-badge.out-of-stock {
    background-color: var(--tech-text-muted);
    color: white;
}

/* Favorito */
.product-favorite {
    position: absolute;
    top: var(--tech-spacing-sm);
    right: var(--tech-spacing-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 48px;
    min-height: 48px;
    background-color: var(--tech-bg-card);
    border: none;
    border-radius: var(--tech-radius-full);
    color: var(--tech-text-muted);
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--tech-transition-fast);
    box-shadow: var(--tech-shadow-sm);
    z-index: 5;
}

.product-card-tech:hover .product-favorite {
    opacity: 1;
    transform: scale(1);
}

.product-favorite:hover {
    color: var(--tech-danger);
    transform: scale(1.15);
}

.product-favorite.active {
    opacity: 1;
    color: var(--tech-danger);
}

.product-favorite.active i {
    font-weight: 900;
}

/* ============================================
   INFORMACION DEL PRODUCTO
============================================ */
.product-info {
    padding: var(--tech-spacing-md);
}

.product-brand {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #1d4ed8;  /* Blue 5.7:1 contrast ratio on #e9effd bg */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--tech-spacing-xs);
    padding: 0.2rem 0.6rem;
    background: rgba(37, 99, 235, 0.1);
    border-radius: var(--tech-radius-sm);
}

.product-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--tech-text-primary);
    margin: 0 0 var(--tech-spacing-sm) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}

.product-name a {
    color: inherit;
    text-decoration: none;
    transition: color var(--tech-transition-fast);
}

.product-name a:hover {
    color: var(--tech-accent);
}

/* Rating */
.product-rating {
    display: flex;
    align-items: center;
    gap: var(--tech-spacing-xs);
    margin-bottom: var(--tech-spacing-sm);
}

.product-rating-stars {
    display: flex;
    gap: 2px;
    color: var(--tech-warning);
    font-size: 0.75rem;
}

.product-rating-stars i.empty {
    color: var(--tech-border-light);
}

.product-rating-count {
    font-size: 0.75rem;
    color: var(--tech-text-muted);
}

/* Especificaciones rapidas */
.product-specs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tech-spacing-xs);
    margin-bottom: var(--tech-spacing-sm);
}

.product-spec {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.5rem;
    background-color: var(--tech-bg-secondary);
    border-radius: var(--tech-radius-sm);
    font-size: 0.6875rem;
    color: var(--tech-text-secondary);
}

.product-spec i {
    color: var(--tech-accent);
    font-size: 0.625rem;
}

/* Precios */
.product-prices {
    display: flex;
    align-items: baseline;
    gap: var(--tech-spacing-sm);
    margin-bottom: var(--tech-spacing-md);
}

.product-price-current {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tech-text-primary);
}

.product-price-old {
    font-size: 0.875rem;
    color: var(--tech-text-muted);
    text-decoration: line-through;
}

.product-discount-tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tech-success);
}

/* Stock */
.product-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    margin-bottom: var(--tech-spacing-sm);
    padding: 0.25rem 0.6rem;
    border-radius: var(--tech-radius-full);
}

.product-stock.in-stock {
    color: #065f46;  /* 6.9:1 on white — was #047857 (4.52:1 borderline) */
    background: rgba(6, 95, 70, 0.08);
}

.product-stock.low-stock {
    color: #b45309;  /* Darker amber 4.8:1 contrast on light bg — was #f59e0b (2.1:1) */
    background: rgba(180, 83, 9, 0.08);
}

.product-stock.out-of-stock {
    color: var(--tech-danger);
    background: rgba(239, 68, 68, 0.08);
}

/* Boton agregar al carrito */
.btn-add-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tech-spacing-sm);
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--tech-primary);
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: var(--tech-radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-add-cart::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transition: left 0.5s ease;
}

.btn-add-cart:hover {
    background: linear-gradient(135deg, var(--tech-accent) 0%, var(--tech-accent-hover) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

.btn-add-cart:hover::before {
    left: 100%;
}

.btn-add-cart:active {
    transform: translateY(0) scale(0.98);
}

.btn-add-cart:disabled {
    background: var(--tech-border-light);
    color: var(--tech-text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-add-cart:disabled::before {
    display: none;
}

.btn-add-cart i {
    font-size: 0.9375rem;
}

/* Vendidos count */
.product-sold-count {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: #ea580c;
    margin-bottom: var(--tech-spacing-sm);
    padding: 0.25rem 0.6rem;
    border-radius: var(--tech-radius-full);
    background: rgba(234, 88, 12, 0.08);
}

.product-sold-count i {
    color: #ea580c;
}

/* ============================================
   VARIANTE: CARD HORIZONTAL
============================================ */
.product-card-tech.horizontal {
    display: flex;
    flex-direction: row;
}

.product-card-tech.horizontal .product-image-wrapper {
    width: 200px;
    padding-top: 0;
    height: 200px;
    flex-shrink: 0;
}

.product-card-tech.horizontal .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ============================================
   VARIANTE: CARD COMPACTA
============================================ */
.product-card-tech.compact .product-image-wrapper {
    padding-top: 80%;
}

.product-card-tech.compact .product-info {
    padding: var(--tech-spacing-sm);
}

.product-card-tech.compact .product-name {
    font-size: 0.875rem;
    min-height: auto;
    -webkit-line-clamp: 1;
}

.product-card-tech.compact .product-prices {
    margin-bottom: var(--tech-spacing-sm);
}

.product-card-tech.compact .btn-add-cart {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
}

/* ============================================
   SKELETON LOADING
============================================ */
.product-card-skeleton {
    background-color: var(--tech-bg-card);
    border-radius: var(--tech-radius-xl);
    overflow: hidden;
}

.skeleton-image {
    width: 100%;
    padding-top: 100%;
    background: linear-gradient(90deg, var(--tech-bg-secondary) 25%, var(--tech-border-light) 50%, var(--tech-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

.skeleton-text {
    height: 16px;
    background: linear-gradient(90deg, var(--tech-bg-secondary) 25%, var(--tech-border-light) 50%, var(--tech-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
    border-radius: var(--tech-radius-sm);
    margin: var(--tech-spacing-sm);
}

.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .products-tech-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .products-tech-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--tech-spacing-md);
    }

    .product-card-tech.horizontal {
        flex-direction: column;
    }

    .product-card-tech.horizontal .product-image-wrapper {
        width: 100%;
        height: auto;
        padding-top: 100%;
    }
}

@media (max-width: 768px) {
    .products-tech-grid {
        gap: var(--tech-spacing-sm);
    }

    .product-info {
        padding: var(--tech-spacing-sm);
    }

    .product-name {
        font-size: 0.875rem;
    }

    .product-price-current {
        font-size: 1.125rem;
    }

    .overlay-btn {
        width: 40px;
        height: 40px;
    }

    /* Mostrar overlay en mobile siempre */
    .product-overlay {
        opacity: 1;
        visibility: visible;
        background: linear-gradient(180deg, rgba(15, 23, 42, 0) 60%, rgba(15, 23, 42, 0.6) 100%);
        justify-content: flex-end;
        align-items: flex-end;
        padding: var(--tech-spacing-sm);
    }

    .overlay-btn {
        transform: translateY(0);
        opacity: 1;
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .product-favorite {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 480px) {
    .products-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-brand {
        font-size: 0.6875rem;
    }

    .product-name {
        font-size: 0.8125rem;
        min-height: auto;
        -webkit-line-clamp: 2;
    }

    .product-prices {
        flex-direction: column;
        gap: 0;
    }

    .btn-add-cart {
        padding: 0.625rem;
        font-size: 0.8125rem;
    }

    .btn-add-cart span {
        display: none;
    }
}
/**
 * CATEGORIES PREMIUM - Seccion de categorias estilo premium
 * Tienda de Tecnologia Morfeo
 */

/* ============================================
   SECCION DE CATEGORIAS PREMIUM
============================================ */
.categories-section-premium {
    padding: 5rem 0;
    background: linear-gradient(160deg, #080d1a 0%, #0b1221 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
    contain: layout style;
}

/* Glows radiales azul + sky (sin morado) */
.categories-section-premium::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 15% 20%,  rgba(59, 130, 246, 0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 85% 80%,  rgba(14, 165, 233, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(37,  99, 235, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* Grid decorativo eco hero::after */
.categories-section-premium::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

.categories-container-premium {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.categories-header-premium {
    text-align: center;
    margin-bottom: 3.5rem;
}

.categories-header-premium .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem;
    /* Glass oscuro eco hero-tag--glass */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.categories-title-premium {
    font-size: 2.5rem;
    font-weight: 800;
    /* Blanco sobre dark navy */
    color: #f8fafc;
    margin-bottom: 0.75rem;
}

.categories-title-premium span {
    /* Degradé azul eléctrico + sky — SIN violeta */
    background: linear-gradient(135deg, #38bdf8 0%, #3b82f6 55%, #60a5fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.categories-subtitle-premium {
    font-size: 1.125rem;
    /* Silver sobre dark */
    color: rgba(248, 250, 252, 0.58);
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================
   GRID DE CATEGORIAS PREMIUM
============================================ */
.categories-grid-premium {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
}

/* ============================================
   CARD DE CATEGORIA PREMIUM
============================================ */
.category-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
    background: #ffffff;
    border: 1px solid var(--tech-border-light, #e2e8f0);
    border-radius: 20px;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    contain: layout style paint;
}

.category-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.category-card-premium:hover {
    transform: translateY(-8px);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow:
        0 20px 40px -15px rgba(0, 0, 0, 0.12),
        0 0 20px rgba(59, 130, 246, 0.08);
}

.category-card-premium:hover::before {
    opacity: 1;
}

/* ============================================
   ICONO DE CATEGORIA PREMIUM
============================================ */
.category-icon-premium {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Iconos con colores por categoria */
.category-card-premium[data-category="celulares"] .category-icon-premium {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.category-card-premium[data-category="tablets"] .category-icon-premium {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(37, 99, 235, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.category-card-premium[data-category="audio"] .category-icon-premium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
}

.category-card-premium[data-category="accesorios"] .category-icon-premium,
.category-card-premium[data-category="cargadores"] .category-icon-premium {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
}

.category-card-premium[data-category="smartwatch"] .category-icon-premium,
.category-card-premium[data-category="wearables"] .category-icon-premium {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12) 0%, rgba(219, 39, 119, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.1);
}

.category-card-premium[data-category="fundas"] .category-icon-premium {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(79, 70, 229, 0.06) 100%);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
}

/* SVG Icon */
.category-icon-premium svg {
    width: 40px;
    height: 40px;
    transition: all 0.4s ease;
}

/* Colores de iconos SVG (saturados para fondo claro) */
.category-card-premium[data-category="celulares"] .category-icon-premium svg {
    fill: #3b82f6;
}

.category-card-premium[data-category="tablets"] .category-icon-premium svg {
    fill: #3b82f6;
}

.category-card-premium[data-category="audio"] .category-icon-premium svg {
    fill: #f59e0b;
}

.category-card-premium[data-category="accesorios"] .category-icon-premium svg,
.category-card-premium[data-category="cargadores"] .category-icon-premium svg {
    fill: #10b981;
}

.category-card-premium[data-category="smartwatch"] .category-icon-premium svg,
.category-card-premium[data-category="wearables"] .category-icon-premium svg {
    fill: #ec4899;
}

.category-card-premium[data-category="fundas"] .category-icon-premium svg {
    fill: #2563eb;
}

/* Hover effects */
.category-card-premium:hover .category-icon-premium {
    transform: scale(1.1) rotate(5deg);
}

.category-card-premium:hover .category-icon-premium svg {
    filter: drop-shadow(0 0 20px currentColor);
}

/* ============================================
   TEXTO DE CATEGORIA
============================================ */
.category-name-premium {
    font-size: 1rem;
    font-weight: 700;
    color: var(--tech-text-primary, #1e293b);
    text-align: center;
    margin-bottom: 0.375rem;
    transition: color 0.3s ease;
}

.category-card-premium:hover .category-name-premium {
    color: var(--tech-accent, #3b82f6);
}

.category-count-premium {
    font-size: 0.8125rem;
    color: var(--tech-text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ============================================
   INDICADOR DE HOVER
============================================ */
.category-arrow {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.category-arrow i {
    color: var(--tech-accent, #3b82f6);
    font-size: 0.75rem;
}

.category-card-premium:hover .category-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .categories-grid-premium {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .categories-grid-premium {
        grid-template-columns: repeat(3, 1fr);
    }

    .categories-title-premium {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .categories-section-premium {
        padding: 3rem 0;
    }

    .categories-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .category-card-premium {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .category-icon-premium {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .category-icon-premium svg {
        width: 30px;
        height: 30px;
    }

    .categories-title-premium {
        font-size: 1.75rem;
    }

    .categories-subtitle-premium {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .categories-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .category-card-premium {
        padding: 1.25rem 0.75rem;
    }

    .category-icon-premium {
        width: 50px;
        height: 50px;
        border-radius: 14px;
    }

    .category-icon-premium svg {
        width: 26px;
        height: 26px;
    }

    .category-name-premium {
        font-size: 0.875rem;
    }

    .category-count-premium {
        font-size: 0.75rem;
    }

    .category-arrow {
        display: none;
    }
}
/**
 * BRANDS PREMIUM - Seccion de marcas estilo premium
 * Tienda de Tecnologia Morfeo
 */

/* ============================================
   SECCION DE MARCAS PREMIUM
============================================ */
.brands-section-premium {
    padding: 5rem 0;
    background: linear-gradient(160deg, #0f172a 0%, #0b1221 55%, #080d1a 100%);
    position: relative;
    overflow: hidden;
    contain: layout style;
}

.brands-section-premium::before {
    content: '';
    position: absolute;
    top: -20%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.10) 0%, transparent 70%);
    pointer-events: none;
}

/* Glow sky — reemplaza morado */
.brands-section-premium::after {
    content: '';
    position: absolute;
    bottom: -20%; left: -8%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.brands-container-premium {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 1;
}

.brands-header-premium {
    text-align: center;
    margin-bottom: 3.5rem;
}

.brands-header-premium .section-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1.25rem;
    /* Glass oscuro — sin morado */
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.28);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.brands-header-premium .section-badge i {
    font-size: 0.875rem;
}

.brands-title-premium {
    font-size: 2.5rem;
    font-weight: 800;
    /* Blanco plateado con toque sky */
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 40%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
}

.brands-subtitle-premium {
    font-size: 1.125rem;
    color: rgba(248, 250, 252, 0.58);
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================
   GRID DE MARCAS PREMIUM
============================================ */
.brands-grid-premium {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

/* ============================================
   CARD DE MARCA PREMIUM (Glassmorphism)
============================================ */
.brand-card-premium {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    text-decoration: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    contain: layout style paint;
}

.brand-card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.brand-card-premium::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #3b82f6 0%, #3b82f6 50%, #ec4899 100%);
    border-radius: 26px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.brand-card-premium:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.1);
}

.brand-card-premium:hover::before {
    opacity: 1;
}

.brand-card-premium:hover::after {
    opacity: 0.15;
}

/* Logo de marca */
.brand-logo-wrapper {
    width: 100px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
}

.brand-logo-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    fill: #334155;
    transition: all 0.4s ease;
}

.brand-card-premium:hover .brand-logo-wrapper svg {
    fill: #0f172a;
    transform: scale(1.1);
}

/* Para marcas con colores especificos */
.brand-card-premium[data-brand="apple"]:hover .brand-logo-wrapper svg {
    fill: #000000;
}

.brand-card-premium[data-brand="samsung"]:hover .brand-logo-wrapper svg {
    fill: #1428a0;
}

.brand-card-premium[data-brand="xiaomi"]:hover .brand-logo-wrapper svg {
    fill: #ff6900;
}

.brand-card-premium[data-brand="huawei"]:hover .brand-logo-wrapper svg {
    fill: #cf0a2c;
}

.brand-card-premium[data-brand="motorola"]:hover .brand-logo-wrapper svg {
    fill: #5c92fa;
}

/* Nombre de marca */
.brand-name-premium {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
}

.brand-card-premium:hover .brand-name-premium {
    color: #0f172a;
}

/* Contador de productos */
.brand-products-count {
    font-size: 0.8125rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.brand-products-count i {
    font-size: 0.75rem;
}

/* Indicador de verificado */
.brand-verified {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s ease;
}

.brand-verified i {
    color: white;
    font-size: 0.625rem;
}

.brand-card-premium:hover .brand-verified {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   RESPONSIVE
============================================ */
@media (max-width: 1200px) {
    .brands-grid-premium {
        grid-template-columns: repeat(5, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 992px) {
    .brands-grid-premium {
        grid-template-columns: repeat(3, 1fr);
    }

    .brands-title-premium {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .brands-section-premium {
        padding: 3rem 0;
    }

    .brands-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .brand-card-premium {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }

    .brand-logo-wrapper {
        width: 80px;
        height: 50px;
    }

    .brands-title-premium {
        font-size: 1.75rem;
    }

    .brands-subtitle-premium {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .brands-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .brand-card-premium {
        padding: 1.25rem 0.75rem;
    }

    .brand-logo-wrapper {
        width: 60px;
        height: 40px;
        margin-bottom: 0.5rem;
    }

    .brand-name-premium {
        font-size: 0.875rem;
    }

    .brand-products-count {
        font-size: 0.75rem;
    }
}

/* ============================================
   HERO SECTION v2 — ENHANCEMENTS (append overrides)
   (glow ambiental, trust-line, chips, badge, glass buttons, scroll indicator)
============================================ */

/* Override: glow ambiental pulsante reemplaza círculo estático */
.hero-image img {
    position: relative;
    z-index: 1;
}
.hero-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 440px;
    height: 440px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.28) 0%, rgba(59, 130, 246, 0.12) 45%, transparent 72%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: hero-glow-breath 4s ease-in-out infinite;
    filter: blur(6px);
}
.hero-image::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 560px;
    height: 560px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    animation: hero-glow-breath 6s ease-in-out infinite reverse;
}
@keyframes hero-glow-breath {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
}

/* Override: quitar hover transform jittery sobre la imagen */
.hero-slide:hover .hero-image img {
    transform: none;
}

/* Hero-tag variante glass + punto pulsante verde */
.hero-tag--glass {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.45rem 0.95rem 0.45rem 0.7rem;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.8125rem;
}
.hero-tag-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: hero-tag-pulse 2s ease-out infinite;
    flex-shrink: 0;
    display: inline-block;
}
@keyframes hero-tag-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* Override: botón secundario glass-morphism */
.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: var(--tech-text-light) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.11) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: var(--tech-text-light) !important;
    transform: translateY(-2px);
}
.hero-btn-secondary:focus-visible {
    outline: 2px solid var(--tech-accent);
    outline-offset: 2px;
}

/* Badge de descuento flotante */
.hero-discount-badge {
    position: absolute;
    top: 6%;
    right: 6%;
    z-index: 3;
    display: inline-flex;
    align-items: baseline;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 9999px;
    color: white;
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.02em;
    line-height: 1;
    box-shadow: 0 10px 30px rgba(239, 68, 68, 0.45), 0 0 0 4px rgba(239, 68, 68, 0.15);
    transform: rotate(-8deg);
    animation: hero-badge-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hero-discount-minus { font-size: 1rem; margin-right: 0.1rem; opacity: 0.9; }
.hero-discount-pct { font-size: 0.95rem; margin-left: 0.1rem; font-weight: 700; opacity: 0.9; }
@keyframes hero-badge-pop {
    0%   { opacity: 0; transform: rotate(-8deg) scale(0.4); }
    100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* Specs chips flotantes */
.hero-spec-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 9999px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.78rem;
    font-weight: 600;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    animation: hero-chip-float 5s ease-in-out infinite;
}
.hero-spec-chip i { font-size: 0.78rem; color: #60a5fa; }
.hero-spec-chip--brand { top: 18%; left: -4%; animation-delay: 0s; }
.hero-spec-chip--new { bottom: 28%; left: -2%; animation-delay: 1.2s; }
.hero-spec-chip--new i { color: #fbbf24; }
.hero-spec-chip--ship { bottom: 12%; right: 2%; animation-delay: 0.6s; }
.hero-spec-chip--ship i { color: #10b981; }
@keyframes hero-chip-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Trust line */
.hero-trust {
    margin-top: 1.5rem;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 1rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.hero-trust-item i { font-size: 0.8125rem; }
.hero-trust-item:nth-child(1) i { color: #fbbf24; }
.hero-trust-item:nth-child(3) i { color: #10b981; }
.hero-trust-item:nth-child(5) i { color: #60a5fa; }
.hero-trust-dim { margin-left: 0.15rem; opacity: 0.55; font-weight: 500; }
.hero-trust-sep {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

/* Scroll indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: calc(1rem + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color 0.3s;
}
.hero-scroll-indicator:hover,
.hero-scroll-indicator:focus-visible {
    color: rgba(255, 255, 255, 0.95);
    outline: none;
}
.hero-scroll-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    animation: hero-scroll-bob 2s ease-in-out infinite;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hero-scroll-chevron i { font-size: 0.7rem; }
@keyframes hero-scroll-bob {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50%      { transform: translateY(4px); opacity: 1; }
}
.hero-tech:has(.hero-dots) .hero-scroll-indicator { display: none; }

/* Respeto a reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .hero-image::before,
    .hero-image::after,
    .hero-tag-dot,
    .hero-discount-badge,
    .hero-spec-chip,
    .hero-scroll-chevron { animation: none; }
}

/* Responsive: tablet y móvil */
@media (max-width: 992px) {
    .hero-trust { display: inline-flex; margin-left: auto; margin-right: auto; }
    .hero-image::before { width: 340px; height: 340px; }
    .hero-image::after { width: 440px; height: 440px; }
    .hero-spec-chip { display: none; }
    .hero-discount-badge {
        top: 4%;
        right: 8%;
        font-size: 1.15rem;
        padding: 0.6rem 0.85rem;
    }
}
@media (max-width: 768px) {
    .hero-trust { font-size: 0.75rem; gap: 0.6rem; padding: 0.5rem 0.85rem; }
    .hero-discount-badge { top: 3%; right: 5%; font-size: 1rem; padding: 0.5rem 0.75rem; }
    .hero-scroll-indicator { display: none; }
}

/* ============================================
   PRODUCT CARD v2 — ENHANCEMENTS (append overrides)
============================================ */

/* Favorite siempre visible, sutil por defecto */
.product-card-tech .product-favorite {
    opacity: 0.85;
    transform: scale(0.92);
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.product-card-tech:hover .product-favorite,
.product-card-tech:focus-within .product-favorite {
    opacity: 1;
    transform: scale(1);
}
.product-favorite.active {
    opacity: 1;
    transform: scale(1);
    background-color: #fff1f1;
}

/* Quick-view: en móvil ocultamos overlay hover-based (confunde); buttons quickview via tap en card */
@media (hover: none) and (pointer: coarse) {
    .product-card-tech .product-favorite {
        opacity: 1;
        transform: scale(1);
    }
}

/* Badge descuento estilo hero (rojo rotado con pop) */
.product-badges .product-badge.sale {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: #fff;
    box-shadow: 0 6px 18px rgba(239, 68, 68, 0.35), 0 0 0 2px rgba(239, 68, 68, 0.12);
    letter-spacing: 0.02em;
    font-weight: 800;
    padding: 0.4rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    animation: product-badge-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes product-badge-pop {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

/* Savings pill (Ahorras S/ XX) */
.product-savings {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    background: rgba(16, 185, 129, 0.12);
    color: #065f46;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}
.product-savings i { font-size: 0.65rem; }
.product-prices { flex-wrap: wrap; align-items: center; }

/* Stock urgency (ámbar con pulso) */
.product-stock--urgent {
    color: #92400e;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.35);
    animation: product-stock-pulse 2s ease-in-out infinite;
}
.product-stock--urgent i { color: #d97706; }
@keyframes product-stock-pulse {
    0%, 100% { background: rgba(245, 158, 11, 0.15); }
    50%      { background: rgba(245, 158, 11, 0.28); }
}

/* Card glow en hover (borde + halo azul) */
.product-card-tech {
    border: 1px solid transparent;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.product-card-tech:hover {
    border-color: rgba(59, 130, 246, 0.25);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.08);
}

/* Rating placeholder: reservar espacio siempre */
.product-rating {
    min-height: 1.1rem;
}
.product-rating--empty {
    color: var(--tech-text-muted);
    font-size: 0.72rem;
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: var(--tech-spacing-sm);
    min-height: 1.1rem;
}
.product-rating--empty i { color: var(--tech-border-light); font-size: 0.7rem; }

/* Skeleton shimmer (opcional via class .is-loading) */
.product-card-tech.is-loading .product-image-wrapper,
.product-card-tech.is-loading .product-name,
.product-card-tech.is-loading .product-prices {
    background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 50%, #e2e8f0 100%);
    background-size: 200% 100%;
    animation: product-shimmer 1.4s ease-in-out infinite;
    color: transparent !important;
    border-radius: 8px;
}
.product-card-tech.is-loading .product-image-wrapper img,
.product-card-tech.is-loading .product-name a { visibility: hidden; }
@keyframes product-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Focus-visible accesible */
.product-card-tech .overlay-btn:focus-visible,
.product-card-tech .product-favorite:focus-visible,
.product-card-tech .btn-add-cart:focus-visible {
    outline: 2px solid var(--tech-accent);
    outline-offset: 2px;
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .product-badges .product-badge.sale,
    .product-stock--urgent,
    .product-card-tech.is-loading .product-image-wrapper,
    .product-card-tech.is-loading .product-name,
    .product-card-tech.is-loading .product-prices { animation: none; }
}

/* ============================================
   CATEGORIES v2 — ENHANCEMENTS (append overrides)
============================================ */

/* Arrow siempre visible (sutil default, lleno en hover) */
.category-card-premium .category-arrow {
    opacity: 0.45 !important;
    transform: translateX(0) !important;
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.category-card-premium:hover .category-arrow {
    opacity: 1 !important;
    transform: translateX(4px) !important;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(59, 130, 246, 0.2)) !important;
}

/* Count pill coloreado por categoría (hereda color del dataset) */
.category-count-pill {
    padding: 0.25rem 0.65rem;
    background: rgba(100, 116, 139, 0.08);
    border: 1px solid rgba(100, 116, 139, 0.12);
    border-radius: 9999px;
    font-size: 0.75rem !important;
    font-weight: 600;
    color: #475569 !important;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.category-count-pill i { font-size: 0.7rem; }
.category-card-premium[data-category="celulares"]:hover .category-count-pill {
    background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); color: #1d4ed8 !important;
}
.category-card-premium[data-category="tablets"]:hover .category-count-pill {
    background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.25); color: #1d4ed8 !important;
}
.category-card-premium[data-category="audio"]:hover .category-count-pill {
    background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.25); color: #b45309 !important;
}
.category-card-premium[data-category="cargadores"]:hover .category-count-pill,
.category-card-premium[data-category="accesorios"]:hover .category-count-pill {
    background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.25); color: #065f46 !important;
}
.category-card-premium[data-category="smartwatch"]:hover .category-count-pill {
    background: rgba(236, 72, 153, 0.1); border-color: rgba(236, 72, 153, 0.25); color: #be185d !important;
}

/* Icon hover: solo scale (remove rotate para evitar jitter) */
.category-card-premium:hover .category-icon-premium {
    transform: scale(1.1) !important;
}

/* Border gradient animado en hover (ribbon efecto) */
.category-card-premium {
    position: relative;
    isolation: isolate;
}
.category-card-premium::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 0.4));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}
.category-card-premium:hover::after {
    opacity: 1;
}

/* category-trending-badge eliminado */

/* CTA "Ver todas" al final */
.categories-footer-premium {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}
.categories-see-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    background: #fff;
    border: 1px solid var(--tech-border-light, #e2e8f0);
    border-radius: 9999px;
    color: var(--tech-text-primary, #1e293b);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.categories-see-all:hover {
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.4);
    color: var(--tech-accent, #3b82f6);
    box-shadow: 0 12px 28px rgba(59, 130, 246, 0.12);
}
.categories-see-all i {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
}
.categories-see-all:hover i {
    transform: translateX(4px);
}
.categories-see-all:focus-visible {
    outline: 2px solid var(--tech-accent);
    outline-offset: 2px;
}


@media (max-width: 768px) {
    .categories-see-all {
        padding: 0.75rem 1.4rem;
        font-size: 0.85rem;
    }
}

/* ============================================
   NAVBAR v2 — ENHANCEMENTS (append overrides)
============================================ */

/* 1. Skip-to-content link (visible on focus) */
.navbar-skip-link {
    position: fixed;
    top: -48px;
    left: 1rem;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: #3b82f6;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
    transition: top 0.2s ease;
}
.navbar-skip-link:focus {
    top: 0.75rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* 2. Hide-on-scroll-down / show-on-scroll-up */
.navbar-tech {
    transform: translateY(0);
    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    will-change: transform;
}
.navbar-tech.is-hidden {
    transform: translateY(-100%);
}

/* 3. Logo shrink when scrolled (compact mode) */
.navbar-tech.scrolled .navbar-tech-container { height: 56px; }
.navbar-tech.scrolled .navbar-tech-logo-icon {
    width: 34px; height: 34px; border-radius: 10px; font-size: 0.9rem;
}
.navbar-tech.scrolled .navbar-tech-logo-img-wrap { width: 38px; height: 38px; }
.navbar-tech.scrolled .navbar-tech-logo-img { max-height: 38px; }
.navbar-tech.scrolled .navbar-tech-logo-text { font-size: 1.3rem; }
.navbar-tech.scrolled .navbar-tech-logo-tagline { font-size: 0.5rem; }
.navbar-tech .navbar-tech-container { transition: height 0.25s ease; }
.navbar-tech .navbar-tech-logo-icon { transition: width 0.25s ease, height 0.25s ease, border-radius 0.25s ease, font-size 0.25s ease, box-shadow 0.3s ease, transform 0.2s ease; }
.navbar-tech .navbar-tech-logo-img-wrap { transition: width 0.25s ease, height 0.25s ease; }
.navbar-tech .navbar-tech-logo-img { transition: max-height 0.25s ease, transform 0.3s cubic-bezier(.34,1.56,.64,1), filter 0.3s ease; }
.navbar-tech .navbar-tech-logo-text { transition: font-size 0.25s ease, background 0.3s ease; }
.navbar-tech .navbar-tech-logo-tagline { transition: font-size 0.25s ease, opacity 0.3s ease, color 0.3s ease; }

/* 4. Dropdown hover-bridge (fix dead zone between link and dropdown) */
.navbar-tech-menu > li::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 6px;
    pointer-events: none;
}
.navbar-tech-menu > li:hover::before {
    pointer-events: auto;
}

/* 5. Search: leading icon + kbd hint + new styles */
.navbar-tech-search { position: relative; padding-left: 0.35rem; }
.navbar-tech-search-icon {
    color: #475569;
    font-size: 0.8rem;
    padding: 0 0.4rem 0 0.5rem;
    transition: color 0.2s ease;
}
.navbar-tech-search:focus-within .navbar-tech-search-icon { color: #60a5fa; }
.navbar-tech-search-input { width: 220px; padding-left: 0; }
.navbar-tech-search-kbd {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    margin-right: 0.3rem;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom-width: 2px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0.75;
    transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.navbar-tech-search:focus-within .navbar-tech-search-kbd { opacity: 0; }
html.is-mac .navbar-tech-search-kbd .kbd-ctrl { display: none; }
html.is-win .navbar-tech-search-kbd .kbd-cmd { display: none; }

/* 6. Cart badge pulse on update */
.navbar-tech-badge.is-pulsing {
    animation: navbar-cart-pulse 0.55s cubic-bezier(.22,1.2,.36,1) both;
}
@keyframes navbar-cart-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* 7. Mobile hamburger ↔ X morphing toggle */
.navbar-tech-toggle-bars {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 16px;
}
.navbar-tech-toggle-bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}
.navbar-tech-toggle-bars span:nth-child(1) { top: 2px; }
.navbar-tech-toggle-bars span:nth-child(2) { top: 7px; }
.navbar-tech-toggle-bars span:nth-child(3) { top: 12px; }
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span:nth-child(1) {
    top: 7px; transform: rotate(45deg);
}
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span:nth-child(2) {
    opacity: 0;
}
.navbar-tech-toggle.is-open .navbar-tech-toggle-bars span:nth-child(3) {
    top: 7px; transform: rotate(-45deg);
}

/* 8. Focus-visible outlines consistentes */
.navbar-tech-link:focus-visible,
.navbar-tech-dropdown-item:focus-visible,
.navbar-tech-action:focus-visible,
.navbar-tech-toggle:focus-visible,
.navbar-tech-logo:focus-visible,
.navbar-tech-user:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 10px;
}

/* Active link: enhanced glow */
.navbar-tech-link.active {
    color: #f1f5f9;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.12), rgba(59, 130, 246, 0.05));
    box-shadow: inset 0 -2px 0 rgba(59, 130, 246, 0.35);
}
.navbar-tech-link.active i:first-child { color: #93c5fd; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .navbar-tech, .navbar-tech-container, .navbar-tech-logo-icon, .navbar-tech-logo-text,
    .navbar-tech-toggle-bars span, .navbar-tech-badge.is-pulsing,
    .navbar-skip-link { transition: none !important; animation: none !important; }
}

/* Mobile: hide the kbd hint */
@media (max-width: 992px) {
    .navbar-tech-search-kbd { display: none; }
}

/* ============================================
   MOBILE v2 — SMALL SCREENS ≤420px (append)
============================================ */

/* 0. Overflow-x safety (prevent horizontal scroll) */
html, body { overflow-x: hidden; }

/* 1. Safe-area-inset para bottom nav y botón flotante (iPhone) */
.mobile-bottom-nav {
    padding-bottom: max(env(safe-area-inset-bottom, 0), 0px);
}
.nyx-float-cart {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
}
@supports (padding: max(0px)) {
    main#main-content {
        padding-bottom: calc(env(safe-area-inset-bottom, 0) + 70px);
    }
}

/* 2. Mobile bottom-nav: active state + press feedback + badge polish */
.mobile-bottom-nav-item {
    position: relative;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, transform 0.15s ease;
}
.mobile-bottom-nav-item:active { transform: scale(0.94); }
.mobile-bottom-nav-item.active {
    color: #3b82f6 !important;
}
.mobile-bottom-nav-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    border-radius: 0 0 3px 3px;
}
.mobile-bottom-nav-item.active i {
    transform: translateY(-1px) scale(1.05);
    transition: transform 0.2s ease;
}
.mobile-bottom-nav-item .nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 22px);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #ef4444;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(8, 13, 26, 0.9);
}

/* ============== ≤ 420px (small phones: 375, 390, 414) ============== */
@media (max-width: 420px) {
    /* Tap target minimums */
    .product-favorite,
    .overlay-btn,
    .btn-add-cart,
    .navbar-tech-action,
    .navbar-tech-toggle,
    .navbar-tech-search-btn,
    .footer-social-link,
    .footer-newsletter-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Hero: compacto + CTAs full-width stacked */
    .hero-title,
    .hero-tech .hero-title,
    .hero-tech h1 { font-size: 1.75rem !important; line-height: 1.15; }
    .hero-subtitle,
    .hero-tech .hero-subtitle,
    .hero-tech p { font-size: 0.92rem; line-height: 1.5; }
    .hero-buttons,
    .hero-tech .hero-buttons,
    .hero-tech .hero-ctas {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0.55rem;
    }
    .hero-buttons > a, .hero-buttons > button,
    .hero-tech .hero-btn,
    .hero-tech .hero-btn-secondary,
    .hero-tech .hero-btn-primary {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }
    .hero-trust {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }
    .hero-discount-badge { font-size: 0.72rem; padding: 0.25rem 0.55rem; }
    .hero-scroll-indicator { display: none; }

    /* Product grid: 2 cols tight */
    .products-grid-tech,
    .products-grid,
    .ofertas-grid,
    .bestsellers-grid,
    .brand-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    .product-card-tech {
        border-radius: 12px;
    }
    .product-card-tech .product-name {
        font-size: 0.85rem;
        line-height: 1.25;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-card-tech .product-brand { font-size: 0.7rem; }
    .product-card-tech .price-current { font-size: 1rem; }
    .product-card-tech .price-original { font-size: 0.75rem; }
    .product-card-tech .product-badges { gap: 0.2rem; }
    .product-card-tech .product-badge,
    .product-card-tech .product-savings { font-size: 0.62rem; padding: 0.18rem 0.4rem; }
    .product-card-tech .product-favorite {
        width: 32px; height: 32px;
        min-width: 32px; min-height: 32px;
        top: 0.4rem; right: 0.4rem;
        font-size: 0.75rem;
    }
    /* Hide extra overlay buttons on tiny screens, keep add-to-cart */
    .product-card-tech .product-overlay .overlay-btn.overlay-btn-compare { display: none; }

    /* Category cards 2-col compact */
    .categories-grid-premium,
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }
    .category-card-premium {
        padding: 1rem 0.75rem !important;
        min-height: 140px;
    }
    .category-icon-premium {
        width: 44px !important; height: 44px !important;
        font-size: 1.15rem !important;
    }
    .category-card-premium h3,
    .category-title-premium { font-size: 0.9rem; }
    .category-count-pill { font-size: 0.68rem !important; padding: 0.18rem 0.5rem; }

    /* Navbar compacto */
    .navbar-tech-container { padding: 0 0.85rem; height: 56px; }
    .navbar-tech-logo-text { font-size: 1.1rem; }
    .navbar-tech-search { display: none; }
    .navbar-tech-actions { gap: 0.15rem; }

    /* Footer compact */
    .footer-tech-container { padding: 1.5rem 1rem !important; }
    .footer-newsletter-title { font-size: 0.95rem; }
    .footer-payments { flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
    .footer-payments-label { width: 100%; text-align: center; }

    /* Section titles */
    .section-title-tech,
    .tech-section-title,
    .ofertas-title { font-size: 1.4rem !important; }
    .tech-section { padding: 2rem 0 !important; }

    /* Modal carrito full-screen en mobile */
    .modal-dialog.modal-carrito,
    .carrito-modal .modal-dialog {
        margin: 0;
        max-width: 100% !important;
        min-height: 100vh;
    }
}

/* ============== ≤ 360px (extra narrow phones) ============== */
@media (max-width: 360px) {
    .hero-title,
    .hero-tech .hero-title,
    .hero-tech h1 { font-size: 1.55rem !important; }
    .products-grid-tech,
    .products-grid { gap: 0.45rem !important; }
    .category-card-premium { padding: 0.85rem 0.65rem !important; min-height: 130px; }
    .navbar-tech-logo-text { display: none; }
    .product-card-tech .product-name { font-size: 0.8rem; }
}

/* ============================================
   UX GENERAL v2 — cross-cutting polish (append)
============================================ */

/* 1. Image skeleton shimmer hasta que carga */
.product-image-wrapper img,
.product-image-wrapper picture img {
    background:
        linear-gradient(90deg, rgba(148,163,184,0.06) 0%, rgba(148,163,184,0.14) 50%, rgba(148,163,184,0.06) 100%)
        rgba(15, 23, 42, 0.35);
    background-size: 200% 100%;
    animation: img-shimmer 1.4s ease-in-out infinite;
}
.product-image-wrapper img[src],
.product-image-wrapper picture img[src] {
    /* Once loaded (browser sets complete), remove shimmer via JS class below */
}
.product-image-wrapper img.is-loaded,
.product-image-wrapper picture img.is-loaded {
    animation: none;
    background: none;
}
@keyframes img-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 2. Scroll-progress bar polish */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #3b82f6 0%, #3b82f6 50%, #ec4899 100%);
    z-index: 1100;
    transform-origin: 0 50%;
    box-shadow: 0 1px 8px rgba(59, 130, 246, 0.4);
    transition: width 0.08s linear;
}

/* 3. Empty state (grids vacíos / búsquedas sin resultado) */
.ux-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.04);
    border: 1px dashed rgba(148, 163, 184, 0.18);
    border-radius: 16px;
    max-width: 480px;
    margin: 2rem auto;
}
.ux-empty-state-icon {
    width: 64px; height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59, 130, 246,0.12));
    border-radius: 50%;
    color: #60a5fa;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}
.ux-empty-state-title {
    color: #e2e8f0;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.4rem;
}
.ux-empty-state-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}
.ux-empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1.1rem;
    background: #3b82f6;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ux-empty-state-action:hover { background: #2563eb; transform: translateY(-1px); color:#fff; }

/* 4. Toasts uniformes */
.ux-toast {
    position: fixed;
    right: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0));
    z-index: 2000;
    min-width: 280px;
    max-width: 360px;
    padding: 0.85rem 1rem;
    background: rgba(10, 16, 32, 0.96);
    color: #e2e8f0;
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-left: 3px solid #3b82f6;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(.22,1.2,.36,1);
}
.ux-toast.is-visible { transform: translateX(0); }
.ux-toast.is-success { border-left-color: #10b981; }
.ux-toast.is-error   { border-left-color: #ef4444; }
.ux-toast i { font-size: 1rem; flex-shrink: 0; }
.ux-toast.is-success i { color: #10b981; }
.ux-toast.is-error   i { color: #ef4444; }

/* 5. Reduced data: disable heavy effects */
@media (prefers-reduced-data: reduce) {
    .product-card-tech::before,
    .category-card-premium::after,
    .footer-tech::before,
    .navbar-tech::after {
        display: none !important;
    }
    .hero-image::before,
    .hero-image::after { display: none !important; }
    * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* 6. Focus-visible global default */
*:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 4px;
}
a:focus-visible, button:focus-visible {
    outline-offset: 3px;
}

/* 7. Selection color on-brand */
::selection {
    background: rgba(59, 130, 246, 0.35);
    color: #fff;
}

/* 8. Print styles */
@media print {
    .navbar-tech, .navbar-tech-mobile,
    .footer-tech, .footer-back-top,
    .mobile-bottom-nav, .nyx-float-cart,
    #nyx-chat-bubble, #nyx-chat-window,
    .scroll-progress, .hero-scroll-indicator,
    .product-overlay, .product-favorite,
    .modal, .modal-backdrop { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    * { box-shadow: none !important; text-shadow: none !important; animation: none !important; transition: none !important; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
    .product-card-tech { break-inside: avoid; border: 1px solid #ddd; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .product-image-wrapper img,
    .product-image-wrapper picture img,
    .ux-toast,
    .scroll-progress { animation: none !important; transition: none !important; }
}

/* Alias for existing lazy-loaded class (used by current loading script) */
.product-image-wrapper img.lazy-loaded,
.product-image-wrapper picture img.lazy-loaded {
    animation: none;
    background: none;
}