/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL (PALETA AZUL CORPORATE TECH)
   ========================================================================== */
:root {
    /* --- Paleta de Colores Nueva (Azul) --- */
    --primary-blue: #3182CE;       /* Color principal (Botones, Acentos) */
    --primary-dark: #1A365D;       /* Azul Marino (Textos fuertes, Hover) */
    --navy-bg: #0c0c22;            /* Fondo Oscuro (Footer, Header móvil) */
    --accent-cyan: #63B3ED;        /* Detalles claros */
    
    /* --- Fondos y Estructura --- */
    --grey-bg: #F7FAFC;            /* Fondo general más limpio */
    --card-white: #ffffff;
    --text-dark: #2D3748;          /* Gris oscuro (Más suave que negro puro) */
    --text-light: #718096;         /* Gris medio */
    --border-color: #E2E8F0;

    /* --- Sombras Premium --- */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', 'Arial', sans-serif;
}

body {
    background-color: var(--grey-bg);
    line-height: 1.6;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased; /* Texto más nítido */
}
body {
    background-color: #F7FAFC; /* El gris base que ya tenés */
    /* Creamos una textura de puntitos grises muy suaves */
    background-image: radial-gradient(#CBD5E0 1px, transparent 1px);
    background-size: 24px 24px; /* Separación entre los puntos */
    line-height: 1.6;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden !important; 
    width: 100%;
    position: relative;
}
/* 1. ELIMINAR EL "TAMBALEO" HORIZONTAL (Pero salvando el Sticky) */


/* 1.5 OBLIGAR AL HEADER A SEGUIRTE (STICKY) */
.main-header {
    position: -webkit-sticky !important; /* Para iPhones */
    position: sticky !important;
    top: 0 !important;
    z-index: 1500 !important; /* Muy alto para que ninguna tarjeta lo tape */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

img {
    max-width: 100%;
    display: block;
}

/* ==========================================================================
   1.5 CINTA SUPERIOR (TOP BAR CORPORATIVA)
   ========================================================================== */
.top-bar {
    background-color: var(--primary-dark);
    color: #CBD5E0;
    padding: 8px 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1501; /* Asegura que quede por encima de todo */
}

.top-bar-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-bar-right a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #CBD5E0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-bar-right a:hover {
    color: #63B3ED; /* Brillo celeste al pasar el mouse */
}

/* ==========================================================================
   2. HEADER Y NAVEGACIÓN (MODERNO Y LIMPIO)
   ========================================================================== */
.main-header {
    background-color: var(--card-white); /* Cambio a Blanco para estilo Tech */
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
    border-top: 4px solid var(--primary-blue);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* 1. Ocultar el ícono de persona en PC (Solo debe salir en celular) */
.mobile-user-icon {
    display: none; 
}

/* 2. Asegurar que el botón "CUENTA" (o VIP) se vea en PC */
.desktop-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ================= NUEVOS ESTILOS LOGO ================= */
/* VERSIÓN ESCRITORIO (PC): Flexible y a la izquierda */
.logo {
    text-decoration: none;
    display: flex; 
    align-items: center; 
    height: 100%; 
}

/* NUEVO: Reglas estrictas para el gráfico del logo */
.logo img {
    max-height: 70px; /* 🔥 AUMENTADO: De 40px a 70px para que las letras se lean claras */
    width: auto; 
    display: block; 
    object-fit: contain; 
    transition: transform 0.3s ease; 
}

.logo:hover img {
    transform: scale(1.03); /* Crece apenitas al pasar el mouse */
}

/* 3. EL DEGRADADO PARA "ENZO" */
.text-gradient {
    /* Define los colores del degradado (usando tus variables) */
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
    
    /* Estas propiedades mágicas recortan el fondo con la forma del texto */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent; /* Fallback */
    
    display: inline-block; /* Necesario para que el degradado se aplique bien */
}
/* ======================================================= */

/* Agrega esto justo antes de la barra de búsqueda para que el menú no se rompa */
.main-nav {
    flex-shrink: 0; /* Evita que el menú se aplaste si hay poco espacio */
    margin-right: 20px;
}

/* Navegación Principal (Escritorio) */
.main-nav ul {
    display: flex;
    list-style: none;
    gap: 25px;
}

.main-nav a {
    color: var(--text-dark);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    position: relative;
    padding: 5px 0;
}

.main-nav a:hover {
    color: var(--primary-blue);
}

/* Efecto de subrayado animado */
.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-blue);
    transition: width 0.3s;
}
.main-nav a:hover::after {
    width: 100%;
}

/* Botón Hamburguesa */
.menu-toggle {
    display: none; /* Oculto en PC */
    background: none;
    border: none;
    color: var(--primary-dark);
    font-size: 2rem;
    cursor: pointer;
}

.mobile-only { display: none; }
/* --- AJUSTE DE SEGURIDAD PARA EL MENÚ --- */


/* --- BARRA DE BÚSQUEDA (EQUILIBRADA) --- */
.search-container {
    flex-grow: 1;       /* Crece, pero comparte espacio amablemente */
    max-width: 600px;   /* Un ancho máximo más seguro para laptops */
    position: relative;
}

.search-bar {
    display: flex;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra más elegante */
    border-radius: 50px;
    overflow: hidden;
    border: 2px solid #E2E8F0; /* Borde un poquito más grueso */
    height: 46px;       /* Altura generosa y fácil de tocar */
    transition: all 0.3s ease;
}

/* Efecto al hacer clic: Se ilumina el borde */
.search-bar:focus-within {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.1);
}

.search-bar input[type="text"] {
    width: 100%;
    border: none;
    background: white;
    padding: 0 25px;
    outline: none;
    color: var(--text-dark);
    font-size: 1.1rem;  /* AUMENTADO: Letra más grande (aprox 18px) */
    line-height: 55px;
}

.search-bar button.search-btn {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 0 30px;
    cursor: pointer;
    transition: background 0.3s;
    font-size: 1.6rem;  /* AUMENTADO: Lupa bien visible */
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-bar button.search-btn:hover {
    background-color: var(--primary-dark);
}

/* --- RESULTADOS FLOTANTES (MÁS GRANDES Y LEGIBLES) --- */
.search-results {
    position: absolute; 
    top: calc(100% + 10px); 
    left: 0; 
    width: 100%;
    background: white; 
    border-radius: 16px; 
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
    z-index: 1001; 
    display: none; 
    max-height: 500px; 
    overflow-y: auto; 
    padding: 10px 0;
}
.search-results.active { display: block; animation: slideDownFade 0.2s ease-out forwards; }

.search-item { 
    display: flex; 
    align-items: center; 
    gap: 20px;          /* Más separación entre foto y texto */
    padding: 15px 25px; /* Más aire interno */
    cursor: pointer; 
    text-decoration: none; 
    color: inherit; 
    border-bottom: 1px solid #f7fafc; 
    transition: background 0.2s;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background-color: #F8FAFC; }

/* Imagen del resultado más grande */
.search-img-box {
    width: 60px;        /* AUMENTADO: De 45px a 60px */
    height: 60px; 
    background: white; 
    border: 1px solid #eee; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 5px;
    flex-shrink: 0;
}
.search-img-box img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}

.search-info { flex: 1; }

.search-info h4 { 
    font-size: 1.05rem; /* AUMENTADO: Título del producto más grande */
    margin: 0 0 4px 0; 
    color: var(--text-dark); 
    font-weight: 700; 
    line-height: 1.2;
}

.search-brand { 
    font-size: 0.8rem;  /* Marca más legible */
    color: var(--primary-blue); 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    background: #EBF8FF;
    padding: 2px 6px;
    border-radius: 4px;
}

.search-action { 
    font-size: 0.85rem; 
    color: #A0AEC0; 
    font-weight: 700; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
    gap: 5px;
}
.search-item:hover .search-action { color: var(--primary-blue); }

/* Botones de Usuario */
.user-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 8px 20px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s;
    border-radius: 50px;
    font-size: 0.85rem;
}

.btn-outline:hover {
    background: var(--primary-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.4);
}

.cart-icon {
    position: relative;
    cursor: pointer;
    color: var(--primary-dark);
    transition: transform 0.2s;
}
.cart-icon:hover { transform: scale(1.1); }

.badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #E53E3E; /* Rojo alerta */
    color: white;
    font-size: 0.7rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    border: 2px solid white;
}

/* ==========================================================================
   3. HERO BANNER (SOLUCIÓN VISUAL PRO)
   ========================================================================== */
.hero-banner {
    position: relative;
    height: 450px;
    /* Gradiente Oscuro Neutral para apagar colores chillones */
    background: linear-gradient(140deg, rgba(10, 15, 30, 0.9) 40%, rgba(20, 35, 60, 0.75) 90%), url("./fondo.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    margin-bottom: 50px;
    border-radius: 0 0 40px 40px;
    box-shadow: var(--shadow-md);
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 0 20px;
    max-width: 800px;
}

.hero-content h1 {
    font-size: 3.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    letter-spacing: -1px;
    text-transform: uppercase;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    line-height: 1.1;
}

.hero-content p {
    font-size: 1.25rem;
    opacity: 0.95;
    margin-bottom: 30px;
    font-weight: 300;
}

.btn-hero {
    background: linear-gradient(90deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 15px 40px;
    font-weight: bold;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(49, 130, 206, 0.5);
    font-size: 1rem;
}

.btn-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(49, 130, 206, 0.6);
}

/* ==========================================================================
   4. CATEGORÍAS (CARRUSEL TIPO PRIME VIDEO)
   ========================================================================== */


/* ==========================================================================
   BANDA DE CATEGORÍAS (AHORA SUAVE Y ELEGANTE)
   ========================================================================== */
.premium-categories-band {
    /* Fondo "Gris Hielo" súper limpio y profesional */
    background-color: #F8FAFC;
    background: linear-gradient(180deg, #F8FAFC 0%, #EDF2F7 100%);
    
    padding: 30px 0 10px 0; /* Menos aire arriba y abajo */
    margin: 30px 0 20px 0; 
    
    /* Bordes sutiles, no la línea gruesa azul de antes */
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    
    overflow: hidden; 
}

.premium-categories-band .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Ajuste fino al contenedor del carrusel para que no tenga tanto margen extra ahora que tiene fondo */
.carousel-b2b-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 15px auto 10px auto; 
}
 
.carousel-b2b-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 15px auto 20px auto;
    /* Evitamos que las flechas se salgan del contenedor */
}

/* La pista infinita */
.carousel-b2b-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Efecto Imán */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Fluidez nativa en celulares */
    padding: 20px 5px 40px 5px; /* Padding para la sombra */
    /* Ocultar barra de scroll para un look limpio */
    scrollbar-width: none; 
}
.carousel-b2b-track::-webkit-scrollbar {
    display: none;
}

/* Las Tarjetas (Formato Póster) */
.b2b-cat-banner {
    flex: 0 0 230px; /* MÁS ANGOSTAS: Antes era 260px */
    height: 280px;   /* MUCHO MÁS CORTAS: Antes era 380px */
    scroll-snap-align: start;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: flex-end;
    padding: 30px 25px;
    background-size: cover;
    background-position: center;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease;
    cursor: pointer;
}

/* El filtro oscuro */
.cat-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(10, 25, 47, 0.95) 0%, rgba(10, 25, 47, 0.4) 50%, rgba(10, 25, 47, 0.1) 100%);
    z-index: 1; transition: background 0.4s ease;
}

.b2b-cat-banner:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(49, 130, 206, 0.3);
}

.b2b-cat-banner:hover .cat-overlay {
    background: linear-gradient(to top, rgba(49, 130, 206, 0.95) 0%, rgba(10, 25, 47, 0.5) 50%, rgba(10, 25, 47, 0.1) 100%);
}

.cat-content { position: relative; z-index: 2; width: 100%; }

.cat-content h3 {
    color: white; font-size: 1.6rem; font-weight: 900; text-transform: uppercase;
    margin-bottom: 5px; letter-spacing: 0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.3s ease;
}

.btn-ghost {
    display: inline-flex; align-items: center; gap: 5px; color: var(--accent-cyan);
    font-size: 0.9rem; font-weight: 800; text-transform: uppercase;
    opacity: 0; transform: translateY(15px); transition: all 0.3s ease;
}
.btn-ghost .material-icons { font-size: 1.1rem; }
.b2b-cat-banner:hover .cat-content h3 { transform: translateY(-5px); }
.b2b-cat-banner:hover .btn-ghost { opacity: 1; transform: translateY(0); color: white; }

/* ==========================================================================
   FONDOS DE CATEGORÍAS (INYECCIÓN SEGURA DESDE CSS)
   ========================================================================== */
.cat-electricas { background-image: url('./categorias/herramientas-electricas.jpg'); }
.cat-pinturas { background-image: url('./categorias/pintura.jpg'); }
.cat-plomeria { background-image: url('./categorias/plomeria.jpg'); }
.cat-buloneria { background-image: url('./categorias/buloneria.jpg'); }
.cat-bazar { background-image: url('./categorias/cocina.webp'); }
.cat-electricidad { background-image: url('./categorias/electricidad.jpg'); }

/* ==========================================================================
   FLECHAS LATERALES (MAGIA PRIME VIDEO)
   ========================================================================== */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 90px; /* Altura rectangular elegante */
    background: rgba(10, 25, 47, 0.85); /* Azul marino fuerte */
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Ocultas por defecto */
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.carousel-arrow .material-icons { font-size: 2.5rem; }

/* Se muestran solo cuando el mouse entra en la zona */
.carousel-b2b-wrapper:hover .carousel-arrow { opacity: 1; }

.carousel-arrow:hover { background: var(--primary-blue); width: 55px; } /* Crece un poquito */
.left-arrow { left: -10px; border-radius: 0 8px 8px 0; }
.right-arrow { right: -10px; border-radius: 8px 0 0 8px; }





/* ==========================================================================
   5. PRODUCTOS Y GRID (TARJETAS CATÁLOGO)
   ========================================================================== */
.section-title {
    text-align: center;
    margin: 60px 0 40px;
}

.section-title h2 {
    color: var(--primary-dark);
    text-transform: uppercase;
    font-weight: 800;
    font-size: 1.8rem;
}

.divider {
    width: 70px;
    height: 4px;
    background-color: var(--primary-blue);
    margin: 15px auto;
    border-radius: 2px;
}

/* Grid Inteligente */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    padding-bottom: 20px;
}

/* Tarjeta Individual */
.product-card {
    background: var(--card-white);
    /* 🔥 REDUCIDO VERTICALMENTE: 12px arriba/abajo, 15px a los lados */
    padding: 12px 15px; 
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-image {
    height: 110px; /* 🔥 MUCHO MÁS BAJITA: Pasamos de 160px a 130px */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(49, 130, 206, 0.3);
}


.card-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.3s;
}

.product-card:hover .card-image img {
    transform: scale(1.05);
}

.brand {
    font-size: 0.7rem;
    color: var(--primary-blue);
    font-weight: 800;
    background: #EBF8FF;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.product-card h3 {
    font-size: 0.95rem; /* 🔥 REDUCIDO: De 1rem a 0.95rem */
    margin: 5px 0 10px 0;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.4;
}

.price {
    font-size: 1.35rem; /* 🔥 REDUCIDO: De 1.5rem a 1.35rem */
    color: var(--primary-dark);
    font-weight: 900;
    margin-bottom: 15px;
}

/* Botones de la tarjeta */
.card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.quantity-selector {
    display: flex;
    border: 1px solid var(--border-color);
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.quantity-selector button {
    border: none;
    background: #F7FAFC;
    padding: 5px 12px;
    cursor: pointer;
    font-weight: bold;
    color: var(--text-dark);
    transition: 0.2s;
}
.quantity-selector button:hover { background: #E2E8F0; }

.quantity-selector input {
    width: 35px;
    text-align: center;
    border: none;
    font-weight: bold;
    color: var(--primary-dark);
}

.add-btn {
    flex-grow: 1;
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.add-btn:hover {
    background-color: var(--primary-dark);
}

.view-more-container {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.btn-view-more {
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    padding: 12px 40px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s;
    border-radius: 50px;
    background: transparent;
}

.btn-view-more:hover {
    background-color: var(--primary-blue);
    color: white;
}

/* ==========================================================================
   6. CONFIANZA Y FUNDADOR (DISEÑO COMPACTO Y ELEGANTE)
   ========================================================================== */
.trust-section {
    background-color: #ffffff;
    padding: 40px 20px; /* Reducido a la mitad para ser menos invasivo */
    margin-top: 30px; /* Menos margen superior */
    position: relative;
    overflow: hidden;
}

.container-trust {
    max-width: 900px; /* Contenedor general más angosto */
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px; /* Menos espacio entre texto y tarjeta */
}

.trust-info { 
    flex: 1; 
    min-width: 280px; 
}

.trust-stats { 
    display: flex; 
    gap: 30px; /* Más compacto */
    margin-top: 20px; 
    border-top: 2px solid #E2E8F0;
    padding-top: 20px;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number { 
    font-size: 2.5rem; /* Números mucho más pequeños (antes 3.5rem) */
    font-weight: 900; 
    color: var(--primary-blue); 
    line-height: 1; 
    margin-bottom: 3px;
}

.stat-label {
    font-size: 0.85rem; /* Etiquetas más sutiles */
    color: var(--primary-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- TARJETA DEL JEFE (Escala reducida) --- */
.boss-card {
    flex: 1;
    min-width: 240px;
    max-width: 420px; /* Tarjeta más angosta (antes 500px) */
    background: linear-gradient(145deg, var(--primary-dark) 0%, #0a192f 100%);
    color: white;
    border-radius: 15px; /* Bordes menos agresivos */
    padding: 25px; /* Menos relleno interno (antes 40px) */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column; 
    align-items: flex-start;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.boss-header {
    display: flex;
    align-items: center;
    gap: 15px; /* Elementos más juntos */
    width: 100%;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 15px;
}

.boss-image-container { flex-shrink: 0; }

.boss-image-container img {
    width: 90px; /* Foto más pequeña (antes 90px) */
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--accent-cyan);
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.boss-titles h3 { font-size: 1.3rem; margin: 0 0 3px 0; color: white; font-weight: 800;}
.boss-role { font-size: 0.75rem; color: var(--accent-cyan); font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }

.boss-content { width: 100%; }

.boss-quote { 
    color: white;
    margin: 15px 0; /* Menos margen */
    font-weight: 300; 
    font-size: 0.95rem; /* Texto de cita más normal (antes 1.05rem) */
    line-height: 1.5;
}

.contact-boss-btn {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    padding: 12px 20px; 
    border-radius: 50px;
    cursor: pointer;
    font-weight: 800;
    font-size: 0.95rem; 
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(49, 130, 206, 0.3);
    
    /* 🔥 CIRUGÍA DE CENTRADO Y ANCHO 🔥 */
    width: 100%; /* Hace que ocupe todo el ancho de la tarjeta */
    display: flex;
    justify-content: center; /* Centra el texto y el ícono perfectamente */
    align-items: center;
    margin-top: 10px; /* Lo separa un poquito más del texto de arriba */
}

.contact-boss-btn:hover {
    background-color: #38bdf8;
    color: #0a192f;
    transform: translateY(-2px);
}





/* ==========================================================================
   TARJETAS DE SERVICIOS (DISEÑO 2x1 EN PIRÁMIDE + ANIMACIÓN INFINITA)
   ========================================================================== */

.services-info {
    display: flex;
    flex-wrap: wrap; /* Permite que la tercera tarjeta baje */
    justify-content: center; /* Centra las tarjetas en su fila */
    gap: 30px;
    margin: 60px auto;
    max-width: 1000px; /* Ancho ajustado para que las cajas no se vean perdidas */
    padding: 0 20px;
}

/* Diseño base: TODAS las tarjetas del MISMO tamaño */
.service-card {
    flex: 0 1 calc(50% - 15px); /* Se reparten el espacio equitativamente */
    min-width: 280px; 
    max-width: 420px; /* 🔥 LA CLAVE: Límite de crecimiento para que parezcan cajas */
    background: white;
    border: 1px solid #E2E8F0;
    border-top: 4px solid var(--primary-blue);
    border-radius: 12px;
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    cursor: pointer;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* ⚠️ BORRAMOS el bloque que decía #card-asesoramiento { flex: 1 1 100%; } 
   Al no forzarla, caerá mágicamente al centro de abajo */

/* Efecto Hover general */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(49, 130, 206, 0.1);
}

/* Íconos y Textos */
.service-card .icon-box {
    color: var(--primary-dark);
    margin-bottom: 15px;
    background: transparent; 
    display: block;
}
.service-card .icon-box .material-icons {
    font-size: 2.5rem;
}

.service-card h3 {
    font-size: 1.2rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
    font-weight: 800;
}

.service-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
}

.service-link {
    margin-top: auto;
    color: var(--primary-blue);
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    transition: all 0.3s;
}

.service-card:hover .service-link {
    gap: 10px;
}
/* --- ANIMACIONES DE ENTRADA/SALIDA --- */
.slide-from-left {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-from-right {
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.slide-from-left.visible, 
.slide-from-right.visible {
    opacity: 1;
    transform: translateX(0);
}









/* ==========================================================================
   7. SECCIÓN MAYORISTA (CINTA CALL-TO-ACTION HORIZONTAL)
   ========================================================================== */
.wholesale-banner {
    background-color: var(--navy-bg);
    background: linear-gradient(90deg, #0c0c22 0%, #1A365D 100%);
    padding: 50px 0; /* Menos altura para no ser tan invasivo */
    color: white;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--primary-blue); /* Línea azul elegante arriba */
}

.banner-content {
    display: flex;
    flex-direction: row; /* Horizontal en PC */
    align-items: center;
    justify-content: space-between; /* Texto a la izquierda, Botón a la derecha */
    gap: 30px;
    position: relative;
    z-index: 2;
}

.banner-text {
    text-align: left; /* Alineado a la izquierda */
    flex: 1;
}

.banner-text h2 {
    font-size: 2.2rem;
    margin-bottom: 5px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.banner-text p {
    font-size: 1.05rem;
    color: #CBD5E0; /* Gris clarito para no competir con el título */
    margin: 0;
}

.btn-banner {
    background-color: white;
    color: var(--primary-dark);
    border: none;
    padding: 15px 35px;
    font-size: 1.05rem;
    font-weight: 800;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap; /* Evita que el botón se parta en dos líneas */
}

/* MAGIA: Al pasar el mouse, el botón se vuelve Verde WhatsApp */
.btn-banner:hover {
    background-color: #25D366; 
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

/* ==========================================================================
   8. FOOTER (DISEÑO CENTRADO B2B PREMIUM)
   ========================================================================== */
.main-footer {
    background-color: var(--navy-bg);
    background: linear-gradient(180deg, #0a192f 0%, #060d1a 100%); /* Gradiente elegante */
    color: #A0AEC0;
    padding: 70px 0 20px 0;
    border-top: 4px solid var(--primary-blue);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    max-width: 1050px; /* Un poco más cerrado para dar sensación de bloque compacto */
    margin: 0 auto 50px auto;
    text-align: center; /* MAGIA: Centra todos los textos */
}

/* Forzamos a las columnas a centrar su contenido interno */
.footer-col.center-col {
    display: flex;
    flex-direction: column;
    align-items: center; 
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 900;
    color: white;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.footer-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 25px;
    max-width: 320px; /* Evita que el texto se estire mucho */
    color: #CBD5E0;
}

/* Redes Sociales */
.social-links {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.08); /* Fondo transparente suave */
    border-radius: 50%;
    color: white;
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: var(--primary-blue);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(49, 130, 206, 0.4);
}

/* Títulos de las columnas */
.footer-col h4 {
    color: white;
    margin-bottom: 25px;
    font-size: 1.05rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 10px;
    display: inline-block; /* Necesario para centrar la rayita abajo */
}

/* La rayita azul centrada debajo del título */
.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* MAGIA: Centra la línea */
    width: 40px;
    height: 3px;
    background-color: var(--primary-blue);
    border-radius: 2px;
}

/* Listas de enlaces y contactos */
.footer-links { 
    list-style: none; 
    padding: 0;
    width: 100%;
}

.footer-links li { 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; /* MAGIA: Centra el icono con el texto */
    gap: 10px; 
}

.footer-links a { color: #CBD5E0; transition: 0.2s; }
.footer-links a:hover { color: var(--primary-blue); }

.footer-links .material-icons {
    color: var(--primary-blue); /* Pintamos los iconitos de azul */
    font-size: 1.3rem;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 25px;
    font-size: 0.85rem;
    color: #718096;
}



/* ==========================================================================
   9. ESTILOS DE LISTADO (SIDEBAR, FILTROS) - SOLUCIÓN PARA PC
   ========================================================================== */
.shop-container {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 60px;
    align-items: flex-start;
    position: relative;
}

/* --- FIX CRÍTICO: OCULTAR BOTÓN MÓVIL EN PC --- */
/* Esto evita que el layout Flex interprete el botón como columna y rompa el diseño */
.filter-toggle-btn { display: none; }
.sidebar-header-mobile { display: none; }

/* Sidebar Fijo en PC */
.sidebar-filters {
    width: 270px;
    flex-shrink: 0;
    background: white;
    padding: 30px 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    position: sticky;
    position: -webkit-sticky;
    top: 110px; /* Espacio para el header fijo */
    align-self: flex-start;
    max-height: calc(100vh - 130px); 
    overflow-y: auto;
    border: 1px solid var(--border-color);
}

.filter-group { margin-bottom: 30px; }
.filter-group h3 {
    font-size: 1.1rem;
    margin-bottom: 15px;
    border-bottom: 2px solid #F0F4F8;
    padding-bottom: 10px;
    text-transform: uppercase;
    color: var(--primary-dark);
}

.category-list { list-style: none; padding: 0; }
.main-cat-item { margin-bottom: 12px; }

.main-cat-link {
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-size: 0.95rem;
    padding: 5px 0;
}
.main-cat-link:hover { color: var(--primary-blue); }

/* Sub-lista */
.sub-category-list {
    list-style: none;
    padding-left: 15px;
    margin-top: 5px;
    border-left: 2px solid #edf2f7;
    display: none; 
}

.sub-category-list.open {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.rotate-icon { transform: rotate(180deg); }
.main-cat-link .material-icons { transition: transform 0.3s ease; font-size: 1.2rem; color: #A0AEC0; }

.sub-category-list li { margin-bottom: 5px; }
.sub-category-list a {
    color: var(--text-light);
    font-size: 0.9rem;
    transition: all 0.2s;
    display: block;
    padding: 3px 0;
}
.sub-category-list a:hover { color: var(--primary-blue); transform: translateX(5px); }
.sub-category-list a.active { color: var(--primary-blue); font-weight: bold; }

/* Botones de Filtro (Reset, Ofertas, Chips) */
.btn-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 2px solid var(--primary-blue);
    border-radius: 8px;
    background-color: white;
    color: var(--primary-blue);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.8rem;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-reset:hover {
    background-color: var(--primary-blue);
    color: white;
    box-shadow: var(--shadow-blue);
}

.link-oferta-especial {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 6px;
}
.link-oferta-especial:hover { background-color: #EBF8FF; color: var(--primary-blue); }
.link-oferta-especial .material-icons { color: #A0AEC0; }
.link-oferta-especial:hover .material-icons { color: var(--primary-blue); }

.btn-precio {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-light) !important;
    padding: 8px;
    border-radius: 6px;
    transition: 0.2s;
}
.btn-precio:hover {
    background: #F7FAFC;
    color: var(--primary-blue) !important;
    padding-left: 12px;
}

/* Listado Principal */
.product-listing { flex-grow: 1; }
.listing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}
.listing-header h1 { font-size: 1.5rem; margin: 0; color: var(--primary-dark); }
.result-count { color: var(--text-light); font-size: 0.9rem; }

/* Paginación */
.pagination-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 50px;
}
.page-btn {
    width: 40px; height: 40px; border: 1px solid var(--border-color); background: white;
    cursor: pointer; border-radius: 8px; font-weight: bold; transition: all 0.3s;
    color: var(--text-dark);
}
.page-btn:hover { border-color: var(--primary-blue); color: var(--primary-blue); }
.page-btn.active { background-color: var(--primary-blue); color: white; border-color: var(--primary-blue); }

/* Animación de carga */
#contenedor-productos {
    opacity: 1; transition: opacity 0.3s ease-in-out; min-height: 300px;
}
#contenedor-productos.loading { opacity: 0; }

/* ==========================================================================
   10. ESTILOS DE FICHA DE PRODUCTO (DETALLE - VERSIÓN COMPACTA)
   ========================================================================== */
.detail-wrapper {
    min-height: 70vh;
    display: flex;
    flex-direction: column; /* ¡ESTA ES LA MAGIA QUE LO ARREGLA! */
    align-items: center; /* Centra los elementos horizontalmente */
    padding-top: 80px;
    padding-bottom: 60px;
    width: 100%;
}

.product-detail-card {
    background: white;
    border-radius: 16px; /* Borde un poco menos curvo para ser más serio */
    box-shadow: var(--shadow-md);
    display: flex;
    position: relative;
    overflow: visible;
    width: 100%;
    max-width: 950px; /* REDUCIDO: De 1100px a 950px para que sea más compacto */
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.5s ease;
}
.product-detail-card.visible { opacity: 1; transform: translateY(0); }

/* Botón Volver Flotante (CORREGIDO) */
.back-btn-floating {
    position: absolute;
    top: -45px; /* Un poco más cerca de la tarjeta */
    left: 0; 
    z-index: 10;
    text-decoration: none; 
    color: var(--text-light); 
    font-weight: 600; 
    font-size: 0.9rem;
    display: flex; 
    align-items: center; 
    gap: 8px;
    transition: all 0.3s ease;
    padding: 5px 10px;
    border-radius: 50px;
}
.back-btn-floating:hover {
    color: var(--primary-blue);
    background: rgba(49, 130, 206, 0.05); /* Fondo sutil al pasar mouse */
    transform: translateX(-3px);
}

.detail-left {
    flex: 1; /* REDUCIDO: Antes era 1.2, ahora ocupa menos ancho */
    background-color: #F8FAFC; 
    padding: 30px; /* Menos padding */
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 16px 0 0 16px;
}
.main-image-container { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.main-image-container img { 
    max-width: 100%; 
    max-height: 320px; /* REDUCIDO: De 400px a 320px para que no sea gigante */
    object-fit: contain; 
    transition: transform 0.3s; 
    mix-blend-mode: multiply; 
}

.detail-right { 
    flex: 1; 
    padding: 30px; /* Menos padding */
    display: flex; 
    flex-direction: column; 
}

.detail-brand { 
    color: var(--primary-blue); 
    font-weight: 800; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    margin-bottom: 5px; 
    letter-spacing: 1px; 
}

.detail-title { 
    font-size: 1.8rem; /* REDUCIDO: De 2.2rem a 1.8rem */
    line-height: 1.2; 
    margin-bottom: 10px; 
    color: var(--primary-dark); 
}

.detail-price { 
    font-size: 2rem; /* REDUCIDO: De 2.5rem a 2rem */
    color: var(--text-dark); 
    font-weight: 900; 
    margin-bottom: 20px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    flex-wrap: wrap;
}

.offer-tag { 
    background: #E53E3E; 
    color: white; 
    font-size: 0.75rem; 
    padding: 4px 8px; 
    border-radius: 4px; 
    font-weight: bold; 
    vertical-align: middle; 
}

.detail-desc { 
    color: var(--text-light); 
    font-size: 0.95rem; /* Letra un poco más chica */
    line-height: 1.6; 
    margin-bottom: 25px; 
}

/* Tabla Técnica Compacta */
.specs-table { width: 100%; margin-bottom: 25px; border-collapse: collapse; font-size: 0.85rem; }
.specs-table td { padding: 8px 0; border-bottom: 1px solid #f0f0f0; color: #555; }
.specs-table td:first-child { font-weight: 600; color: var(--primary-dark); width: 40%; }

.detail-actions { 
    display: flex; 
    flex-direction: row; 
    gap: 12px; 
    margin-top: auto; 
    border-top: 1px dashed var(--border-color); 
    padding-top: 25px; 
}

.big-btn {
    flex: 1; 
    height: 48px; /* REDUCIDO: De 55px a 48px */
    font-size: 1rem; 
    border-radius: 8px;
    background-color: var(--primary-blue);
    color: white; 
    border: none; 
    font-weight: bold;
    box-shadow: var(--shadow-blue); 
    transition: background 0.2s; 
    cursor: pointer; 
    letter-spacing: 0.5px;
}
.big-btn:hover { background-color: var(--primary-dark); }

.quantity-selector.big-selector { 
    height: 48px; /* Igual que el botón */
    width: 120px; 
}
.quantity-selector.big-selector button { font-size: 1.2rem; padding: 0 15px; }
.quantity-selector.big-selector input { font-size: 1.1rem; width: 40px; }

.detail-meta { margin-top: 20px; }
.detail-meta p { 
    color: var(--text-light); 
    font-size: 0.85rem; 
    margin-bottom: 6px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
}
.detail-meta .material-icons { font-size: 1.1rem; color: #38A169; }

/* ==========================================================================
   11. ESTILOS DEL CARRITO (DRAWER)
   ========================================================================== */
.cart-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(12, 12, 34, 0.7); z-index: 1900; opacity: 0; visibility: hidden; transition: all 0.3s;
    backdrop-filter: blur(2px);
}
.cart-overlay.active { opacity: 1; visibility: visible; }

.cart-drawer {
    position: fixed; top: 0; right: 0; width: 100%; max-width: 450px; height: 100vh;
    background: white; z-index: 2000; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex; flex-direction: column; box-shadow: -10px 0 40px rgba(0,0,0,0.2);
}
.cart-drawer.active { transform: translateX(0); }

.cart-header { padding: 15px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; background: #FAFAFA; }
.cart-header h3 { font-size: 1.3rem; font-weight: 800; color: var(--primary-dark); margin: 0; }
.close-cart-btn { background: none; border: none; cursor: pointer; color: #A0AEC0; font-size: 1.5rem; }
.close-cart-btn:hover { color: #E53E3E; }

.cart-items { flex: 1; overflow-y: auto; padding: 25px; }

.cart-item { display: flex; gap: 15px; margin-bottom: 25px; border-bottom: 1px solid #f0f0f0; padding-bottom: 25px; }
.cart-item img { width: 80px; height: 80px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; padding: 5px; }
.cart-item-info { flex: 1; }
.cart-item-title { font-size: 0.95rem; font-weight: bold; margin-bottom: 5px; color: var(--text-dark); }
.cart-item-price { font-size: 1rem; color: var(--primary-blue); font-weight: 800; }

.cart-item-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.cart-qty-box { display: flex; align-items: center; border: 1px solid #ddd; border-radius: 4px; background: white; }
.cart-qty-box button { background: white; border: none; width: 30px; height: 30px; cursor: pointer; color: var(--primary-dark); font-weight: bold; }
.cart-qty-box span { width: 30px; text-align: center; font-size: 0.9rem; }
.btn-remove { color: #A0AEC0; cursor: pointer; font-size: 1.3rem; transition: 0.2s; }
.btn-remove:hover { color: #E53E3E; }

.cart-footer { padding: 20px; border-top: 1px solid #eee; background: #fff; max-height: 245px; }
.cart-total { display: flex; justify-content: space-between; font-size: 1.3rem; font-weight: 800; margin-bottom: 20px; color: var(--primary-dark); }
.btn-checkout { width: 100%; background: var(--primary-blue); color: white; border: none; padding: 13px; font-weight: bold; text-transform: uppercase; border-radius: 8px; cursor: pointer; margin-bottom: 15px; font-size: 1rem; }
.btn-checkout:hover { background: var(--primary-dark); }
.btn-clear { width: 100%; background: transparent; color: var(--text-light); border: none; padding: 10px; cursor: pointer; font-size: 0.9rem; text-decoration: underline; }

/* ==========================================================================
   12. NOTIFICACIONES (TOAST)
   ========================================================================== */
.toast-notification {
    position: fixed; bottom: 30px; right: 30px; background-color: var(--primary-dark); color: white;
    padding: 15px 30px; border-radius: 50px; box-shadow: 0 10px 20px rgba(0,0,0,0.2); z-index: 3000;
    font-weight: 600; display: flex; align-items: center; gap: 15px;
    opacity: 0; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); visibility: hidden;
}
.toast-notification.show { opacity: 1; transform: translateY(0); visibility: visible; }
.toast-notification .material-icons { color: #48BB78; }

/* ==========================================================================
   13. BUSCADOR PREDICTIVO (DISEÑO LIMPIO B2B)
   ========================================================================== */
.search-results {
    position: absolute; 
    top: calc(100% + 8px); 
    left: 0; 
    width: 100%;
    background: white; 
    border-radius: 12px; 
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15); /* Sombra más suave y difusa */
    z-index: 1001; 
    display: none; 
    max-height: 400px; 
    overflow-y: auto; 
    padding: 8px 0;
}
.search-results.active { display: block; animation: slideDownFade 0.2s ease-out forwards; }

.search-item { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 10px 20px; 
    cursor: pointer; 
    text-decoration: none; 
    color: inherit; 
    border-bottom: 1px solid #f7fafc; 
    transition: background 0.2s;
}
.search-item:last-child { border-bottom: none; }
.search-item:hover { background-color: #F8FAFC; }

/* Caja de imagen cuadrada y limpia */
.search-img-box {
    width: 45px; 
    height: 45px; 
    background: white; 
    border: 1px solid #eee; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    padding: 3px;
}
.search-img-box img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
}

/* Información central */
.search-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.search-info h4 { 
    font-size: 0.9rem; 
    margin: 0; 
    color: var(--text-dark); 
    font-weight: 600; 
    line-height: 1.2;
}
.search-brand { 
    font-size: 0.7rem; 
    color: var(--primary-blue); 
    font-weight: 800; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-top: 2px;
}

/* Acción a la derecha (Sin precio) */
.search-action { 
    font-size: 0.75rem; 
    color: #A0AEC0; 
    font-weight: 600; 
    text-transform: uppercase; 
    display: flex; 
    align-items: center; 
    gap: 5px;
}
.search-item:hover .search-action { color: var(--primary-blue); }

.no-results { padding: 25px; text-align: center; color: #A0AEC0; font-size: 0.9rem; font-style: italic; }

/* ==========================================================================
   14. ESTILOS DE LOGIN Y REGISTRO
   ========================================================================== */
.auth-container { min-height: 85vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(135deg, #EBF8FF 0%, #E2E8F0 100%); padding: 20px; }
.auth-wrapper { width: 100%; max-width: 420px; background: white; padding: 50px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.1); position: relative; }
.auth-box h2 { text-align: center; color: var(--primary-dark); margin-bottom: 5px; font-size: 2rem; font-weight: 800; }
.auth-box p { text-align: center; color: var(--text-light); margin-bottom: 40px; font-size: 0.95rem; }
.input-group { position: relative; margin-bottom: 25px; }
.input-group .material-icons { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #A0AEC0; }
.input-group input { width: 100%; padding: 15px 15px 15px 45px; border: 2px solid #E2E8F0; border-radius: 10px; font-size: 1rem; outline: none; transition: 0.3s; background: #F7FAFC; }
.input-group input:focus { border-color: var(--primary-blue); background: white; box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.1); }
.btn-auth { width: 100%; background-color: var(--primary-dark); color: white; border: none; padding: 15px; font-weight: 800; font-size: 1rem; border-radius: 10px; cursor: pointer; transition: 0.3s; margin-top: 15px; text-transform: uppercase; letter-spacing: 1px; }
.btn-auth:hover { background-color: var(--primary-blue); transform: translateY(-2px); }
.forgot-pass { display: block; text-align: right; font-size: 0.85rem; color: var(--text-light); margin-bottom: 20px; }
.auth-switch { margin-top: 30px; text-align: center; padding-top: 20px; border-top: 1px solid #eee; font-size: 0.9rem; }
.auth-switch a { color: var(--primary-blue); font-weight: 700; }
.hidden { display: none; }
.auth-box { animation: fadeIn 0.4s ease; }

/* =========================================
   15. ESTILOS DE MODALS (SERVICIOS)
   ========================================= */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(10, 25, 47, 0.8); z-index: 2500;
    opacity: 0; visibility: hidden; transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}
.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-window {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.9);
    width: 90%; max-width: 500px; background: white; border-radius: 20px; z-index: 2600;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
    opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.modal-window.active { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

.modal-header {
    background: white; color: var(--primary-dark); padding: 20px 25px;
    border-radius: 20px 20px 0 0; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee;
}
.modal-header h3 { font-size: 1.2rem; display: flex; align-items: center; gap: 10px; margin: 0; }
.modal-close { background: none; border: none; color: #A0AEC0; font-size: 2rem; cursor: pointer; line-height: 1; transition: 0.2s; }
.modal-close:hover { color: var(--primary-dark); transform: rotate(90deg); }

.modal-body { padding: 30px; }
.modal-body h4 { color: var(--primary-blue); margin-bottom: 15px; font-size: 1.1rem; }
.modal-list { list-style: none; padding-left: 0; margin-bottom: 25px; }
.modal-list li { margin-bottom: 10px; color: var(--text-dark); position: relative; padding-left: 20px; }
.modal-list li::before { content: "•"; color: var(--primary-blue); font-weight: bold; position: absolute; left: 0; font-size: 1.2rem; line-height: 1; }
.modal-divider { border: 0; border-top: 1px solid #eee; margin: 20px 0; }
.alert-box { background: #EBF8FF; color: var(--primary-dark); padding: 15px; border-radius: 12px; display: flex; align-items: center; gap: 15px; font-size: 0.9rem; margin-top: 15px; font-weight: 500; }
.payment-icons { display: flex; gap: 15px; margin-bottom: 20px; }
.payment-icons img { width: 45px; height: auto; }
.bank-info { background: #F7FAFC; padding: 20px; border-radius: 12px; border: 1px dashed #CBD5E0; font-family: monospace; color: var(--text-dark); font-size: 1rem; }


/* ==========================================================================
   16. AJUSTES DE RITMO VISUAL (FINAL - ALTO CONTRASTE)
   ========================================================================== */

/* 1. Banda Blanca de Ancho Completo (Para Categorías y Ofertas) */
.section-white {
    background-color: #ffffff;
    width: 100%;
    /* Sombra más marcada para que se "levante" del fondo gris */
    box-shadow: 0 0 40px rgba(0,0,0,0.05); 
    position: relative;
    z-index: 5;
    margin-bottom: 0;
}

/* 2. Tarjetas de Categorías (Ahora resaltan sobre lo blanco) */
.section-white .category-item {
    background-color: #F8FAFC; /* Fondo grisáceo muy suave */
    border: 1px solid #E2E8F0;
    box-shadow: none; /* Empezamos planos para limpieza */
}

.section-white .category-item:hover {
    background-color: #fff;
    border-color: var(--primary-blue);
    transform: translateY(-8px); /* Movimiento más notorio */
    box-shadow: 0 15px 30px rgba(49, 130, 206, 0.25); /* Sombra azul brillante */
}

/* 3. Tarjetas de Producto (Dentro de lo blanco) */
.section-white .product-card {
    border: 1px solid #EDF2F7;
    box-shadow: none; /* Limpieza inicial */
}
.section-white .product-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.12); /* Sombra elegante al pasar mouse */
    border-color: transparent;
    transform: translateY(-5px);
}

/* 4. Servicios de Logística (Sección Gris) */
/* Al no tener .section-white, quedan sobre el fondo gris del body. 
   Les damos fuerza con el borde superior */
.services-info {
    padding: 60px 20px;
    margin: 0 auto;
   /* background-color: #3848f835;  Gris muy claro para diferenciar del blanco 
    border-radius: 0 60px 0 60px;
    border: #1A365D solid 2px;  Borde azul oscuro para destacar */
}

.service-card {
    background: white; /* Tarjeta blanca sobre fondo gris */
    border-top: 5px solid var(--primary-blue); /* Detalle de color clave */
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
}
.service-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/* 5. Nueva Sección de Marcas (Cinta Gris Oscura) */

/* 6. Títulos con más presencia */
.section-title h2 {
    font-size: 2.2rem;
    letter-spacing: -1px;
    color: var(--primary-dark);
    margin-bottom: 15px;
}

/* 7. Ajuste de Precios Técnico */
.price {
    font-family: 'Roboto', sans-serif;
    letter-spacing: -0.5px;
    color: var(--primary-blue);
    font-weight: 900;
}

/* Botón de Google */
.btn-google {
    width: 100%;
    background: white;
    color: #444;
    border: 1px solid #ddd;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s;
    font-family: 'Roboto', sans-serif;
}
.btn-google:hover {
    background-color: #f7f7f7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-google img {
    width: 20px;
    height: 20px;
}

/* ==========================================================================
   17. ETIQUETAS DE ESTADO (OFERTA / STOCK)
   ========================================================================== */
.card-image {
    position: relative; /* Necesario para que la etiqueta flote encima */
}

.card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.card-badge.oferta {
    background-color: #E53E3E; /* Rojo Oferta */
}

.card-badge.agotado {
    background-color: #2D3748; /* Gris Oscuro Agotado */
}
.card-badge.nuevo {
    background-color: #38bdf8; /* Cyan vibrante */
    color: #0a192f;
}

/* Texto de stock en la tarjeta */
.stock-label {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 5px;
    display: block;
}

/* ==========================================================================
   18. ESTILOS PERFIL DE USUARIO (DASHBOARD)
   ========================================================================== */
.user-dashboard {
    background: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 800px;
    animation: fadeIn 0.5s ease;
}

.dashboard-header {
    display: flex;
    align-items: center;
    gap: 30px;
    border-bottom: 2px solid #F7FAFC;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

.user-avatar-large {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #EBF8FF;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(49, 130, 206, 0.2);
    overflow: hidden;
}
.user-avatar-large img { width: 100%; height: 100%; object-fit: cover; }
.user-avatar-large .material-icons { font-size: 50px; color: var(--primary-blue); }

.user-welcome h2 { font-size: 2rem; color: var(--primary-dark); margin: 5px 0; }
.user-welcome p { color: var(--text-light); }

/* Insignia VIP Premium */
.badge-vip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, #F6E05E 0%, #B7791F 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 4px 15px rgba(246, 224, 94, 0.4);
    border: 1px solid #F6AD55;
}

/* Grid de Opciones */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

/* Estilo Base Tarjetas (Gris / Inactivo) */
.dash-card {
    background: #F7FAFC;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid transparent;
    transition: 0.3s;
    cursor: pointer;
}
.dash-card:hover {
    background: white;
    border-color: var(--primary-blue);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.dash-card .material-icons { font-size: 2.5rem; margin-bottom: 10px; }
.dash-card h3 { font-size: 1rem; color: var(--primary-dark); margin-bottom: 5px; }
.dash-card p { font-size: 0.85rem; color: var(--text-light); margin: 0; }
.dash-card small { display: block; margin-top: 10px; color: #CBD5E0; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }

/* --- NUEVO: Estilo Tarjeta Activa (Blanca y Azul) --- */
.dash-card.active-card {
    background: white;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.dash-card.active-card:hover {
    border-color: var(--primary-blue);
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(49, 130, 206, 0.15);
}
.dash-card.active-card .material-icons {
    color: var(--primary-blue) !important;
    background: #EBF8FF;
    padding: 10px;
    border-radius: 50%;
    margin-bottom: 15px;
}
.dash-card.active-card small {
    color: var(--primary-blue) !important;
    font-weight: 800;
    background: #EBF8FF;
    padding: 6px 15px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 15px;
    font-size: 0.75rem;
}

.btn-logout {
    width: 100%;
    padding: 15px;
    background: #FFF5F5;
    color: #E53E3E;
    border: 1px solid #FED7D7;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.btn-logout:hover { background: #E53E3E; color: white; border-color: #E53E3E; }

/* ==========================================================================
   22. ESTILOS DEL MODAL DE EDICIÓN (MEJORADO)
   ========================================================================== */
.edit-photo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
}

.img-edit-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    margin-bottom: 15px;
    background-color: #eee;
}

/* Botón personalizado para subir archivo */
.custom-file-upload {
    display: inline-block;
    padding: 8px 20px;
    cursor: pointer;
    background: #F7FAFC;
    border: 1px solid #CBD5E0;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-dark);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.custom-file-upload:hover {
    background: var(--primary-blue);
    color: white;
    border-color: var(--primary-blue);
}

.modal-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid #E2E8F0;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: 0.3s;
    background: #F8FAFC;
    color: var(--text-dark);
}
.modal-input:focus {
    border-color: var(--primary-blue);
    background: white;
}

.btn-save {
    width: 100%;
    background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
    color: white;
    border: none;
    padding: 15px;
    font-weight: 800;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(49, 130, 206, 0.3);
    transition: transform 0.2s;
}
.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(49, 130, 206, 0.4);
}

/* ==========================================================================
   19. BOTÓN HEADER VIP (PASTILLA PREMIUM)
   ========================================================================== */

/* Modificamos el botón existente cuando es VIP */
.btn-outline.desktop-only.vip-active {
    background: #1A202C; /* Fondo oscuro elegante */
    border: 1px solid #2D3748;
    color: white;
    padding: 4px 12px 4px 4px; /* Padding ajustado para la pastilla */
    border-radius: 50px; /* Forma de píldora redonda */
    display: flex;
    align-items: center;
    gap: 10px;
    height: auto;
    transition: all 0.3s ease;
}

.btn-outline.desktop-only.vip-active:hover {
    background: #2D3748;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Estilos internos de la pastilla */
.header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F6E05E; /* Borde dorado VIP */
}

.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}

.header-vip-tag {
    font-size: 0.65rem;
    color: #F6E05E; /* Texto dorado */
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.header-username {
    font-size: 0.9rem;
    font-weight: 700;
}

/* ==========================================================================
   20. ESTILOS DE REGISTRO MODERNO (FOTO CIRCULAR)
   ========================================================================== */
/* ESTILOS DEL REGISTRO (FOTO CIRCULAR) */
.profile-upload-container {
    display: flex;
    justify-content: center;
    margin: 20px 0 30px;
}

.upload-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #F7FAFC;
    border: 2px dashed #CBD5E0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.upload-circle:hover {
    border-color: var(--primary-blue);
    background-color: #EBF8FF;
}

.upload-circle .material-icons {
    font-size: 2rem;
    color: #A0AEC0;
    margin-bottom: 5px;
    z-index: 1;
}

.upload-text {
    font-size: 0.7rem;
    color: #718096;
    font-weight: 700;
    text-transform: uppercase;
    z-index: 1;
}

/* Previsualización de la imagen (JS le quita la clase hidden) */
#preview-registro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2; /* Se pone encima del icono */
}
#preview-registro.hidden { display: none; }

/* --- OVERRIDE DEL HEADER PARA VIP --- */
/* Cuando el botón tiene la clase 'vip-active', ignoramos el borde azul y el fondo transparente */
.btn-outline.desktop-only.vip-active {
    background-color: #1A202C !important; /* Fondo Oscuro */
    border: 1px solid #2D3748 !important;
    color: white !important;
    padding: 5px 15px 5px 5px !important; /* Padding asimétrico para la foto */
    border-radius: 50px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    height: 48px !important; /* Altura fija para que se vea bien */
    width: auto !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.btn-outline.desktop-only.vip-active:hover {
    background-color: #2D3748 !important;
    transform: translateY(-2px);
}

/* Textos dentro de la pastilla */
.header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    text-align: left;
}

.header-vip-tag {
    font-size: 0.65rem;
    color: #F6E05E; /* Dorado */
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.header-username {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #F6E05E; /* Anillo Dorado */
}
/* ==========================================================================
   BOTÓN DE UPSELLING (SEGUIR COMPRANDO)
   ========================================================================== */
.btn-outline-cart {
    width: 100%;
    padding: 10px;
    background: #EBF8FF; /* Fondo celeste muy suave que llama la atención sin saturar */
    border: 2px dashed var(--primary-blue); /* El borde punteado invita a la acción */
    color: var(--primary-blue);
    border-radius: 8px;
    font-weight: 800; /* Letra bien gruesa */
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Efecto al pasar el mouse: Se vuelve un botón sólido y se levanta un poquito */
.btn-outline-cart:hover {
    background: var(--primary-blue);
    color: white;
    border-style: solid;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(49, 130, 206, 0.2);
}


/* ==========================================================================
   ESTILOS ADMIN (BADGE Y ESTADOS)
   ========================================================================== */

/* El círculo rojo de notificación */
.badge-counter {
    background-color: #E53E3E; /* Rojo */
    color: white;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 8px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    vertical-align: middle;
}

/* El selector de estado en la tabla */
.status-select {
    padding: 8px;
    border-radius: 6px;
    font-weight: bold;
    border: 1px solid #ddd;
    cursor: pointer;
    font-size: 0.9rem;
}

/* Colores según el estado */
.status-select.pendiente {
    background-color: #FEFCBF; /* Amarillo claro */
    color: #B7791F;
    border-color: #F6E05E;
}

.status-select.completado {
    background-color: #C6F6D5; /* Verde claro */
    color: #2F855A;
    border-color: #68D391;
}


@media (max-width: 600px) {
    .dashboard-header { flex-direction: column; text-align: center; }
}


/* ==========================================================================
   ESTILOS B2B: CÓDIGO SKU Y ORDEN DE PRECIO
   ========================================================================== */
.product-sku {
    display: block;
    font-size: 0.8rem;
    color: var(--text-light);
    font-family: 'Courier New', Courier, monospace; /* Tipografía técnica */
    font-weight: 700;
    margin-bottom: 3px;
    text-transform: uppercase;
}

.product-units {
    font-size: 0.85rem;
    color: var(--text-light);
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.product-price-box {

    border-top: 1px dashed #E2E8F0; /* Línea separadora prolija */
    display: flex;
    flex-direction: column;
}



/* ==========================================================================
   SECCIÓN: NUEVOS INGRESOS (CONTRASTE OSCURO)
   ========================================================================== */
.section-dark {
    background: linear-gradient(135deg, var(--primary-dark) 0%, #0a192f 100%);
    width: 100%;
    height: 650px;
    padding: 60px 0;
    box-shadow: inset 0 10px 20px rgba(0,0,0,0.2);
}

.section-title-light h2 {
    color: white; font-size: 2.4rem; letter-spacing: -1px;
    margin-bottom: 5px; text-align: center; text-transform: uppercase; font-weight: 800;
}

.divider-light {
    width: 70px; height: 4px; background-color: #38bdf8;
    margin: 10px auto 8px auto; border-radius: 2px;
}



/* ==========================================================================
   SECCIÓN: MARCAS (ESTILO CORPORATIVO LIMPIO)
   ========================================================================== */
.trusted-brands-clean {
    /* 1. EL TRUCO: Un gris-azulado súper elegante en lugar de blanco puro */
    background-color: #F4F7FA; 
    
    /* 2. BORDES: Lo enmarcamos arriba y abajo para que sea un "listón" definido */
    border-top: 1px solid #E2E8F0;
    border-bottom: 1px solid #E2E8F0;
    
    padding: 30px 0 50px 0;
    position: relative;
    z-index: 10;
}

.brands-marquee-clean {
    width: 100%;
    overflow: hidden;
    position: relative;
    /* Desvanecimiento en los bordes para que los logos no se corten feo */
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10%, rgba(0,0,0,1) 90%, rgba(0,0,0,0) 100%);
}

.marquee-track-clean {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 80px; 
    padding: 20px 0;
    animation: scrollMarqueeClean 35s linear infinite; 
}

.trusted-brands-clean:hover .marquee-track-clean {
    animation-play-state: paused;
}

.marquee-track-clean img {
    height: 50px; /* Tamaño generoso como en tus referencias */
    width: auto;
    object-fit: contain;
    /* Estilo limpio: Semi-transparentes para no gritar mucho visualmente */
    opacity: 0.6;
    filter: grayscale(20%); /* Apenas un toque apagados */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

/* Al pasar el mouse: Full color y crecen un poquito */
.marquee-track-clean img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1);
}

@keyframes scrollMarqueeClean {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}


/* ==========================================================================
   NUEVO ESTILO: CARRUSEL HORIZONTAL PREMIUM (Ancho y con Estilo)
   ========================================================================== */

/* 1. El contenedor que permite el deslizar */
.product-carousel {
    display: flex;
    gap: 25px; /* Más espacio entre tarjetas para que respiren */
    overflow-x: auto;
    padding: 20px 20px 40px 20px; 
    
    /* Scroll Snap (frenado suave) */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    
    /* Ocultar barra de scroll (Fuerza Bruta para Firefox y Edge Antiguo) */
    scrollbar-width: none !important; 
    -ms-overflow-style: none !important;
    
    /* Sombra interna sutil en los bordes para efecto de profundidad */
    mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

/* Pseudo-elemento (Fuerza Bruta para Chrome, Safari y Edge Moderno) */
.product-carousel::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    -webkit-appearance: none !important;
}

/* 2. Tarjetas más proporcionadas y elegantes para PC */
/* 2. Tarjetas más anchas horizontalmente */
.product-carousel .product-card {
    min-width: 280px; /* 🔥 MÁS ANCHAS: Subimos de 240px a 270px */
    max-width: 280px;
    flex: 0 0 auto;
    scroll-snap-align: center; 
    box-shadow: var(--shadow-md); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse: crece un poquito */
.product-carousel .product-card:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
/* ==========================================================================
   FIX: FLUIDEZ DE ARRASTRE PARA CARRUSEL EN PC
   ========================================================================== */
.product-carousel.active-drag {
    scroll-snap-type: none !important; /* Apagamos el imán mientras arrastramos */
}

/* Evita que el usuario entre a un producto por error mientras intenta arrastrar */
.product-carousel.active-drag .product-card {
    scroll-snap-align: none !important;
    pointer-events: none !important; 
}
/* --- ADAPTACIÓN ESTRICTA PARA CELULARES --- */
@media (max-width: 768px) {
    .services-info {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 20px;
    }
    .service-card {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%; /* En celular sí le dejamos ocupar todo el ancho */
        transition-delay: 0s !important;
    }
    .slide-from-left { transform: translateX(-50px); }
    .slide-from-right { transform: translateX(50px); }
    .section-dark{
        max-height: 700px; /* Limitamos la altura para evitar scroll infinito en móvil */
    }

}

/* Adaptación para Celulares: Vuelve a centrarse todo apilado */
@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        text-align: center;
    }
    .banner-text { text-align: center; }
    .banner-text h2 { font-size: 1.8rem; }
    .btn-banner { width: 100%; justify-content: center; }
    .top-bar {
        display: none !important;
    }
}


/* Adaptación estricta para celular (Mantenemos el orden pero compactamos) */
@media (max-width: 768px) {
    .trust-section { padding: 30px 15px; margin-top: 20px;}
    .container-trust { flex-direction: column; gap: 30px; }
    .boss-card { padding: 15px; width: 100%; max-width: 100%; }
    .boss-header { flex-direction: row; text-align: left; } /* En celular mantenemos la foto al lado del texto para ahorrar espacio vertical */
    .boss-titles h3 { font-size: 1.2rem; }
    .boss-quote { font-size: 0.9rem; margin: 15px 0; }
    .trust-stats { gap: 20px; justify-content: center; }
    .stat-number { font-size: 2rem; }
}

/* ==========================================================================
   21. RESPONSIVE MÓVIL - VERSIÓN FINAL (SIDEBAR TAPA BOTÓN)
   ========================================================================== */

/* Adaptación estricta para celulares */
@media (max-width: 768px) {
    .main-footer { padding: 50px 0 20px 0; }
    .footer-grid { gap: 50px; }
    .footer-desc { font-size: 0.9rem; }
}

@media (max-width: 768px) {

/* --- 1. HEADER Y LOGO (VERSIÓN IMAGEN GRANDE) --- */
    .header-content {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 5px 10px !important;
    }

    /* Revivimos el menú hamburguesa */
    .menu-toggle { 
        display: block !important; /* 🔥 ¡ESTO FALTABA! La magia para que aparezca */
        order: 1 !important; 
        margin: 0 !important; 
        background: transparent !important;
        border: none !important;
        color: var(--primary-dark) !important; /* Aseguramos que sea visible */
    }
    
    .logo {
        order: 2 !important;
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: center !important; /* Centra el logo en celular */
    }

    .logo img {
        max-height: 55px !important; /* 🔥 TAMAÑO MÓVIL: Lo suficientemente grande para leerse, sin romper la barra */
    }

    .user-actions { order: 3 !important; }

    .desktop-only, .btn-outline.desktop-only.vip-active { display: none !important; }
    .mobile-user-icon { display: flex; color: var(--text-dark); align-items: center; justify-content: center; }
    .mobile-user-icon .material-icons { font-size: 1.8rem; }
    .cart-icon .material-icons { font-size: 1.8rem; color: var(--text-dark); }

    .search-container { width: 100%; margin-top: 15px; order: 5; }
    .search-bar { height: 42px; background-color: #F0F2F5; border: 1px solid #E2E8F0; box-shadow: none; border-radius: 8px; }
    .search-bar input { font-size: 0.95rem; background: transparent; }
    .search-bar button.search-btn { background: var(--primary-blue); border-radius: 0 8px 8px 0; }
    /* -------- esta animacion es para el carrusel infinito--------*/
  .trusted-brands-clean { padding: 20px 0 30px 0; }
    .marquee-track-clean { gap: 50px; animation-duration: 20s; }
    .marquee-track-clean img { height: 35px; }

    /* --- 2. FILTRO DE PRODUCTOS (LA CORRECCIÓN) --- */
    
    .shop-container { flex-direction: column; margin-top: 10px; }

    /* BOTÓN FLOTANTE (NIVEL 900 - SE OCULTARÁ AL ABRIR EL SIDEBAR) */
    .filter-toggle-btn { 
        display: flex !important; 
        position: fixed !important;        
        bottom: 30px;           
        left: 50%;
        transform: translateX(-50%); 
        
        /* ESTILO */
        width: auto;            
        min-width: 180px;
        background-color: var(--primary-blue) !important; 
        color: white !important;
        border: none;
        padding: 12px 25px;
        border-radius: 50px;    
        font-weight: 800;
        text-transform: uppercase;
        font-size: 0.9rem;
        box-shadow: 0 8px 20px rgba(49, 130, 206, 0.4); 
        
        /* Z-INDEX MENOR QUE EL SIDEBAR */
        z-index: 900;           
        
        justify-content: center; align-items: center; gap: 8px; margin: 0;
        cursor: pointer;
    }

    .sidebar-filters { 
        position: fixed !important; /* IMPORTANTE */
        top: 0; 
        left: 0; 
        width: 100%;            
        height: 100vh;      
        background: white; 
        z-index: 2000;          
        
        /* ESTO ES LO QUE LO OCULTA: */
        transform: translateY(100%); 
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
        
        display: block; 
        padding: 0; 
        overflow-y: auto; 
    }

    /* ESTO ES LO QUE LO MUESTRA CUANDO APRETAS EL BOTÓN: */
    .sidebar-filters.active { 
        transform: translateY(0); 
    }

    /* HEADER DEL FILTRO PEGAJOSO */
    .sidebar-header-mobile { 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        padding: 15px 20px; 
        background: white; 
        border-bottom: 1px solid #eee; 
        position: sticky; 
        top: 0;
        z-index: 50; 
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .sidebar-header-mobile h3 { margin: 0; font-size: 1.1rem; color: var(--primary-dark); font-weight: 800; text-transform: uppercase; }

    .close-filter-btn {
        background: #F7FAFC; border: none; width: 36px; height: 36px;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        color: #E53E3E; font-size: 1.4rem; cursor: pointer;
    }

    /* LIMPIEZA DE ESTILOS INTERNOS */
    .filter-group {
        padding: 20px;
        border-bottom: 8px solid #f8f9fa; 
        margin: 0;
        height: auto;
    }
    
    .sidebar-filters::after {
        content: ""; display: block; height: 100px;
    }

    /* --- 3. AJUSTES GENERALES --- */
    .main-nav { position: absolute; top: 100%; left: 0; width: 100%; background: white; overflow: hidden; max-height: 0; transition: max-height 0.4s ease-out; box-shadow: 0 10px 20px rgba(0,0,0,0.1); border-top: 1px solid #eee; z-index: 999; }
    .main-nav.active { max-height: 400px; }
    .main-nav ul { flex-direction: column; padding: 20px; text-align: center; gap: 20px; }
    .mobile-only { display: none; } 

    .hero-banner { height: 260px; padding: 0 15px; }
    .hero-content h1 { font-size: 1.8rem; margin-bottom:15px; }
    .hero-content p { display: none; }
    
    .product-detail-card { flex-direction: column; border:none; box-shadow:none; background:transparent; height: auto !important;}
    .detail-left { padding: 0; background: white; border-radius: 0 0 20px 20px; margin-bottom: 20px; }
    .detail-right { padding: 0 20px 80px 20px; }
    .detail-actions { position: fixed; bottom: 0; left: 0; width: 100%; background: white; padding: 12px 15px; z-index: 900; box-shadow: 0 -4px 15px rgba(0,0,0,0.05); margin: 0; }
    .auth-container { padding: 20px; align-items: flex-start; padding-top: 40px; }
    .auth-wrapper { padding: 30px 20px; width: 100%; }


}

/* --- ADAPTACIÓN PARA CELULARES --- */
@media (max-width: 768px) {
    .services-info {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }
    .service-card {
        width: 100%;
        transition-delay: 0s !important; /* Quitamos el retraso en móvil para mayor fluidez */
    }
    /* En celular el desplazamiento es más corto para que no se salga de la pantalla */
    .slide-from-left { transform: translateX(-50px); }
    .slide-from-right { transform: translateX(50px); }

    .section-title-light h2 {
    color: white; font-size: 1.6rem;
    ;
}
}

/* ==========================================================================
   21. RESPONSIVE MÓVIL - VERSIÓN FINAL (ANIMACIÓN LATERAL IZQUIERDA)
   ========================================================================== */
@media (max-width: 768px) {

    /* --- 1. BOTÓN FLOTANTE AZUL (Nivel 900) --- */
    /* Se queda quieto esperando a ser tapado */
    .filter-toggle-btn {
        display: flex !important;
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 900; /* MENOR que el sidebar */
        
        background-color: #3182CE;
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 30px;
        font-weight: 800;
        box-shadow: 0 5px 15px rgba(49, 130, 206, 0.4);
        width: auto;
        min-width: 200px;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }

    /* --- 2. SIDEBAR DE FILTROS (Nivel 2000 - TAPA AL BOTÓN) --- */
    .sidebar-filters {
        position: fixed !important;
        top: 0;
        left: 0;
        width: 85%;        /* CAMBIO: Ocupa solo el 85% del ancho */
        max-width: 320px;  /* OPCIONAL: Evita que sea gigante en tablets */
        height: 100vh;     /* Ocupa todo el alto */
        background: white; /* Fondo sólido (CRUCIAL para tapar el botón) */
        z-index: 2000;     /* MAYOR que el botón -> Lo tapa */
        
        /* --- AQUÍ ESTÁ EL CAMBIO DE ANIMACIÓN --- */
        /* Empieza escondido a la IZQUIERDA (-100%) */
        transform: translateX(-100%); 
        visibility: hidden;
        /* ALTO (Corrección del problema) */
        height: 100dvh !important;   /* "dvh" se adapta mejor a celulares que "vh" */
        max-height: none !important; /* CLAVE: Anula la restricción de PC */
        border-radius: 0 !important; /* Sin bordes redondeados para que pegue bien */
        
        /* Animación suave de deslizar */
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
        
        display: block !important;
        padding: 0;
        overflow-y: auto;
    }

    /* ESTADO ACTIVO: SE DESLIZA AL CENTRO */
    .sidebar-filters.active {
        transform: translateX(0); /* Vuelve a la posición 0 (Visible) */
        visibility: visible;
    }

    /* --- 3. CABECERA PEGAJOSA --- */
    .sidebar-header-mobile {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
        background: white;
        border-bottom: 1px solid #eee;
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .sidebar-header-mobile h3 { margin: 0; font-size: 1.1rem; color: #1A365D; font-weight: 800; text-transform: uppercase; }

    .close-filter-btn {
        background: #F7FAFC; border: none; width: 36px; height: 36px;
        border-radius: 50%; display: flex; align-items: center; justify-content: center;
        color: #E53E3E; font-size: 1.4rem;
    }

    /* --- 4. AJUSTES GENERALES --- */
    .filter-group { padding: 20px; border-bottom: 8px solid #f8f9fa; margin: 0; height: auto; }
    .sidebar-filters::after { content: ""; display: block; height: 100px; }
    
    .shop-container { flex-direction: column; }
    .hero-banner p { display: none; }
    .logo-container { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
    .header-content { position: relative; gap: 0; }
    .search-container { width: 100%; margin-top: 15px; order: 5; }
    .desktop-only { display: none !important; }
}

/* ==========================================================================
   🚀 PARCHE MAESTRO MÓVIL (CORRECCIÓN ESTRUCTURAL + ANIMACIÓN SEGURA) SECCION DEL HEADER
   ========================================================================== */

@media (max-width: 768px) {
    /* 2. REPARACIÓN DEL HEADER... (deja el resto del código que ya tenías hacia abajo igual) */

    /* 2. REPARACIÓN DEL HEADER */
    .header-content {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
    }

    .menu-toggle { order: 1 !important; margin: 0 !important; }
    
    .logo-container {
        position: relative !important; 
        top: auto !important;
        left: auto !important;
        transform: none !important;
        order: 2 !important;
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .logo-text { font-size: 0.75rem !important; }
    .logo-text span.text-gradient { font-size: 1.2rem !important; }

    .user-actions { order: 3 !important; }

    .search-container { 
        order: 4 !important; 
        width: 100% !important; 
        margin-top: 15px !important; 
    }

    /* 3. REPARACIÓN DE MÁRGENES (Para que no choquen a los bordes) */
    .services-info, .trust-section, .wholesale-banner {
        overflow: hidden !important; 
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
    }

    /* 4. TARJETAS PERFECTAMENTE APILADAS */
    .service-card, .boss-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

   /* 5. TEXTOS EQUILIBRADOS Y FONDO MÓVIL */
    .hero-content h1 { 
        font-size: 1.5rem !important; /* Letra más pequeña y elegante */
        line-height: 1.3 !important;  /* Más aire entre renglones */
        letter-spacing: 0 !important;
        margin-bottom: 20px !important;
        padding: 0 10px !important;
    }
    
    .hero-banner {
        /* Desactiva el parallax en celular porque a veces satura los píxeles al hacer scroll */
        background-attachment: scroll !important; 
    }
    
    .section-title h2 { font-size: 1.6rem !important; }
    .boss-titles h3 { font-size: 1.3rem !important; }


    /* =======================================================
       ✨ 6. LA NUEVA ANIMACIÓN MÓVIL (FADE-IN UP)
       Reemplazamos el deslizamiento lateral peligroso 
       por un movimiento hacia arriba limpio y moderno.
       ======================================================= */
       
    .slide-from-left, 
    .slide-from-right {
        /* Estado inicial: Invisible y un poco más abajo */
        opacity: 0 !important;
        transform: translateY(40px) !important; 
        transition: opacity 0.8s ease, transform 0.8s ease !important;
    }

    .slide-from-left.visible, 
    .slide-from-right.visible {
        /* Estado final: Visible y en su lugar original */
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

/* --- ESTRICTO PARA CELULARES SECCION DE CATEGORÍAS B2B --- */
@media (max-width: 768px) {
    .carousel-arrow { display: none !important; }
    .b2b-cat-banner {
        flex: 0 0 180px; /* Súper compactas para la mano del usuario */
        height: 220px;   /* Altura reducida drásticamente (antes 320) */
        padding: 20px 15px; /* Menos padding interno */
    }
    .carousel-b2b-track {
        padding-left: 20px;
        padding-right: 20px;
    }
    .btn-ghost { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
   📱 OPTIMIZACIÓN MÓVIL: ALTURA COMPACTA (TARJETAS SIMÉTRICAS)
   ========================================================================== */
@media (max-width: 768px) {
    
    /* 1. Achicar los fondos gigantes de las secciones */
    .section {
        padding: 30px 0 !important; 
    }
    .section-dark{
        height: auto !important; 
        padding: 18px 0 !important; 
    }
    
    /* 2. El Carrusel (Fondo de las tarjetas) */
    .product-carousel, 
    .carousel-b2b-track {
        padding: 5px 0 15px 0 !important; 
        height: max-content !important;
        align-items: stretch !important; /* 🔥 CAMBIO 1: Fuerza a todas a estirarse por igual */
    }

    /* 3. Las Tarjetas: Mismo ancho, altura dinámica igualada */
    .product-carousel .product-card,
    .carousel-b2b-track .product-card {
        width: 260px !important;      
        min-width: 260px !important;
        height: auto !important; /* 🔥 CAMBIO 2: Permite que copien la altura de la más grande */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 4. LA FOTO: Más bajita para matar la altura excesiva */
    .card-image {
        height: 140px !important; 
        margin-bottom: 8px !important;
    }

    /* 5. Comprimir todo por dentro */
    .product-card {
        padding: 12px !important;
    }
   
    .card-actions {
        margin-top: 8px !important;
    }
    
    .card-actions button {
        padding: 8px !important; 
        font-size: 0.85rem !important;
    }

    /* ==========================================================================
       📱 OPTIMIZACIÓN MÓVIL: PÁGINA DE DETALLES COMPACTA
       ========================================================================== */
    
    /* 1. Comprimir la caja de la imagen y limitar su altura máxima */
    .detail-image-box {
        padding: 15px !important;
        border-radius: 12px !important;
    }
    .detail-image-box img {
        max-height: 220px !important; /* 🔥 El secreto: La foto no puede medir más que esto */
        width: auto !important;
        margin: 0 auto !important;
        display: block;
    }

    /* 2. Achicar los textos principales */
    #detail-name {
        font-size: 1.3rem !important; 
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }
    #detalle-sku {
        font-size: 0.75rem !important;
        padding: 3px 8px !important;
        margin-bottom: 10px !important;
    }
    #detalle-stock-box {
        font-size: 0.9rem !important;
        padding-bottom: 10px !important;
    }

    /* 3. Domar el Precio Gigante inyectado por JS */
    #detail-price div {
        font-size: 1.6rem !important; /* De 2.2rem bajamos a 1.6rem */
    }
    #detail-price span[style*="line-through"] {
        font-size: 1.1rem !important; /* El precio viejo tachado más chiquito */
    }

    /* 4. Opciones de Caja vs Unidad más finas */
    #opciones-compra-container button {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }

/* 5. Selector de Cantidad y Botón de Carrito (Barra Inferior Compacta) */
    .detail-actions {
        flex-direction: row !important; 
        flex-wrap: nowrap !important;
        padding: 12px 15px !important;
        gap: 10px !important;
        align-items: center !important;
        height: auto !important;
    }
    
    .quantity-selector.big-selector {
        width: 110px !important; /* Tamaño exacto para los dedos */
        min-width: 110px !important;
        height: 45px !important;
        flex-shrink: 0 !important; /* Prohíbe que el selector se aplaste */
    }
    
    #detail-add-btn {
        width: 100% !important;
        height: 45px !important;
        font-size: 0.85rem !important; /* Letra ajustada para celulares */
        font-weight: 900 !important;
        padding: 0 !important;
        white-space: nowrap !important; /* 🔥 LA MAGIA: Prohíbe que el texto salte a otro renglón */
        overflow: hidden !important;
    }

/* ==========================================================================
       📱 OPTIMIZACIÓN MÓVIL: FOOTER Y LEGALES
       ========================================================================== */
    
    .footer-bottom {
        /* 🔥 EL SECRETO: 80px de aire abajo (Safe Area) para destrabar el scroll */
        padding: 25px 15px 7px 15px !important; 
    }

    /* Permite que los enlaces legales bajen al siguiente renglón si no hay espacio */
    .footer-bottom > div:first-child {
        flex-wrap: wrap !important; 
        justify-content: center !important;
        gap: 8px 15px !important;
    }

    /* Ocultamos la rayita vertical "|" solo en celular para que no quede huérfana */
    .footer-bottom > div:first-child span {
        display: none !important; 
    }

    /* Ajustamos los textos para que no desborden */
    .footer-bottom p {
        text-align: center !important;
        font-size: 0.8rem !important;
        line-height: 1.5 !important;
        padding: 0 10px !important;
    }
}