/* ========================================= */
/* CONFIGURACIÓN GLOBAL LIMPIA */
/* ========================================= */

body {
    font-family: 'Poppins', sans-serif; /* 👈 fuente base correcta */
    margin: 0;
    background: #f5f6fa;
    color: #020617;
}

        /* ========================================= */
        /* 2. HEADER Y MARCA (LOGO + NOMBRE)         */
        /* ========================================= */
        .header {
            text-align: center;
            padding: 20px 15px;
            /* Barra delgada/Slim */
            background: #0f172a !important;
            perspective: 1000px;
            overflow: hidden;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .marca-principal {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 5px;
        }

        .logo-estilo {
            height: 40px;
            width: auto;
            object-fit: contain;
            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
            /* Eliminamos el display: none de aquí para que el JS tenga control total */
            vertical-align: middle;
        }

        /* ========================================= */
        /* 3. TÍTULO: EFECTO REVELADO DE SEDA        */
        /* ========================================= */
        #nombreEmpresa {
           font-family: 'Montserrat', sans-serif;
            font-size: clamp(1.8rem, 6vw, 2.8rem);
            font-weight: 900;
            margin: 0;
            text-transform: none;
            /* Respeta mayúsculas/minúsculas del usuario */
            color: #F8F9FA;
            display: inline-block;

            /* Máscara de recorte para efecto de emergencia */
            clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

            /* Degradado de brillo metálico */
            background: linear-gradient(to right, #ffffff 20%, #E5C453 50%, #ffffff 80%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            /* Animaciones: Entrada + Brillo constante */
            animation: revealText 1.5s ease forwards, shineSweep 4s linear infinite;
        }

        /* ========================================= */
        /* 4. ESLOGAN: ELEGANTE Y FLOTANTE           */
        /* ========================================= */
        .eslogan {
            font-family: 'Cormorant Garamond', serif;
            display: block;
            font-size: 1.3rem;
            font-style: italic;
            color: #E5C453;
            margin-top: 5px;
            font-weight: 500;
            text-transform: none;
            animation: fadeSlogan 4s ease-in-out infinite !important;
        }

        /* ========================================= */
        /* 5. BANNER INFORMATIVO (DIFUMINADO)        */
        /* ========================================= */
        .texto-destacado {
            margin-top: 15px;
            display: inline-block;
            padding: 12px 40px;
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
            font-size: 0.85rem;
            color: #ffffff;
            text-transform: none;
            letter-spacing: 1.5px;

            /* Efecto de degradado que desaparece a los lados */
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(125, 94, 0, 0.8) 20%,
                    rgba(166, 138, 61, 1) 50%,
                    rgba(125, 94, 0, 0.8) 80%,
                    transparent 100%);

            border: none;
            border-top: 1px solid rgba(191, 155, 48, 0.2);
            border-bottom: 1px solid rgba(191, 155, 48, 0.2);

            animation: pulseElegant 4s ease-in-out infinite !important;
            text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.8);
        }

        /* ========================================= */
        /* 7. DEFINICIÓN DE TODAS LAS ANIMACIONES    */
        /* ========================================= */

        /* Revelado de Título */
        @keyframes revealText {
            0% {
                opacity: 0;
                transform: translateY(30px) skewY(5deg);
                filter: blur(10px);
            }

            100% {
                opacity: 1;
                transform: translateY(0) skewY(0deg);
                filter: blur(0);
            }
        }

        /* Brillo Metálico del Título */
        @keyframes shineSweep {
            to {
                background-position: 200% center;
            }
        }

        /* Aparición del Slogan */
        @keyframes fadeSlogan {

            0%,
            100% {
                opacity: 0;
                transform: scale(0.9);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Pulso de luz para el Banner Informativo */
        @keyframes pulseElegant {

            0%,
            100% {
                opacity: 0.8;
                filter: brightness(0.9);
            }

            50% {
                opacity: 1;
                filter: brightness(1.2);
            }
        }

        /* Pulso de escala (opcional por si lo usas en otro lado) */
        @keyframes pulseAd {
            0% {
                transform: scale(1);
                opacity: 0.9;
            }

            50% {
                transform: scale(1.03);
                opacity: 1;
            }

            100% {
                transform: scale(1);
                opacity: 0.9;
            }
        }

        /* ========================================= */
        /* 4. GRID DE PRODUCTOS (VISTA PC)           */
        /* ========================================= */
        .productos {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 20px;
            padding: 20px;

        }

        .producto {
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            padding: 0;
            text-align: center;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            /* === ESTO CREA EL EFECTO DE ELEVACIÓN === */
            /* Desplazamiento x=0, y=5px, desenfoque=15px, color=negro muy transparente */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

            /* (Opcional) Prepara la tarjeta para una animación suave en PC */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        /* Efecto de elevación interactiva (Hover) en PC */
        .producto:hover {
            /* La tarjeta sube sutilmente */
            transform: translateY(-5px);

            /* La sombra se vuelve un poco más oscura y grande para simular más altura */
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);

            /* Ocultamos el borde sutil para que la sombra destaque más */
            border-color: transparent;
        }

.producto img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    object-position: center;
    display: block;
    /* Marcamos el margen en 0 para evitar que se separe del texto abajo */
    margin: 0; 
    background-color: #ffffff;
    border-radius: 12px;
    
    /* Mantenemos tus efectos premium */
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    cursor: pointer;
    
    /* 🛠️ SOLUCIÓN PARA LA FRANJA: */
    /* Evita bordes fantasma y asegura que el color sea sólido */
    border: none;
    outline: none;
}

.producto img:hover {
    /* Mantenemos tu elevación elegante */
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    filter: brightness(1.05);
}

/* Opcional: Si quieres que toda la tarjeta reaccione */
.producto:hover {
    border-color: #E5C453; /* El dorado que usas en tus botones */
}

      .nombre {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    /* Explicación: 15px es el ideal, pero bajará hasta 12px si el espacio es poco */
    font-size: clamp(12px, 2.5vw, 15px); 
    color: #333;
    margin: 8px 0 2px 0;
    text-transform: capitalize;
    line-height: 1.2;
    padding: 0 5px;
    
    /* Esto asegura que si el nombre es MUY largo, se rompa en palabras 
       y no desborde la tarjeta lateralmente */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

        .precio-contenedor {
            margin: 0;
            padding: 0 5px 12px 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

/* Contenedor principal del precio */
.precio-contenedor-premium {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrado para el catálogo */
    margin-top: 5px;
}

/* El precio que paga el cliente (ARRIBA) */
.precio {
    color: #111;
    font-size: 22px; /* Un poco más grande para ser el protagonista */
    font-weight: 800;
    line-height: 1;
    margin-bottom: 4px;
}

/* Contenedor de la oferta (DEBAJO) */
.precioViejo-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Precio tachado más discreto */
.precioViejo {
    text-decoration: line-through;
    color: #a0a0a0;
    font-size: 12px;
    font-weight: 400;
}

/* El Globo de Ahorro (Pequeño y elegante) */
.badge-ahorro-premium {
    background-color: #f0fdf4; /* Verde menta muy suave */
    color: #16a34a;           /* Verde bosque elegante */
    font-size: 10px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 12px;      /* Forma de pastilla */
    border: 1px solid #dcfce7;
   
}

        /* ETIQUETAS */
        .etiquetaPromo,
        .etiquetaAgotado {
            position: absolute;
            top: 0;
            font-size: 11px;
            padding: 8px 15px;
            z-index: 5;
        }

        .etiquetaPromo {
            left: 0;
            background: #e53935;
            color: white;
            font-weight: bold;
            border-radius: 0 0 12px 0;
        }

        .etiquetaAgotado {
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border-radius: 0 0 0 12px;
        }

/* Contenedor de botones car whp del producto */
.btn-container-responsive {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* El botón transparente con líneas negras */
.btn-outline-minimal {
    background: transparent !important;
    border: 1.2px solid #eeeeee !important; /* Línea negra fina */
    color: #303030 !important;             /* Icono negro */
    border-radius: 50%;                 /* Lo hace circular para que parezca el logo */
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;          /* Transición suave */
    box-shadow: none !important;
}

/* EFECTO HOVER: Solo cambian las líneas a verde */
.btn-outline-minimal:hover {
    background: transparent !important;  /* Sigue siendo transparente */
    border-color: #25D366 !important;    /* La línea del círculo se vuelve verde */
    color: #25D366 !important;           /* El logo se vuelve verde */
    transform: scale(1.1);               /* Crece un poquito sutilmente */
}

/* Ajuste del tamaño del icono */
.btn-outline-minimal i {
    font-size: 1.2rem;
}
/* ================================================= */
/* BOTONES FLOTANTES UNIFICADOS (CUADRADOS MINIMAL)  */
/* ================================================= */

/* ESTILO BASE PARA AMBOS BOTONES */
.whatsappbtnflotante, 
.cart-btn-flotante {
    position: fixed !important;
    right: 20px !important;
    width: 50px !important;
    height: 50px !important;
    background: transparent !important; /* Fondo transparente */
    border: 1.2px solid #000 !important;   /* Línea negra fina idéntica */
    border-radius: 10px !important;      /* Forma cuadrada con puntas suaves */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: none !important;
    cursor: pointer !important;
    z-index: 999999 !important;
}

/* Iconos Negros por defecto */
.whatsappbtnflotante i, 
.cart-btn-flotante i {
    font-size: 24px !important;
    color: #000 !important;
    transition: all 0.3s ease !important;
}

/* --- POSICIONAMIENTO Y SEPARACIÓN --- */
.whatsappbtnflotante {
    bottom: 20px !important; /* El de abajo */
}

.cart-btn-flotante {
    bottom: 85px !important; /* Separación perfecta de 15px entre ellos */
}

/* --- EFECTOS HOVER (COLOR AL TOCAR) --- */

/* Hover WhatsApp -> Se vuelve Verde */
.whatsappbtnflotante:hover {
    border-color: #25D366 !important;
    transform: scale(1.1);
}
.whatsappbtnflotante:hover i {
    color: #25D366 !important;
}

/* Hover Carrito -> Se vuelve Dorado */
.cart-btn-flotante:hover {
    border-color: #E5C453 !important;
    transform: scale(1.1);
}
.cart-btn-flotante:hover i {
    color: #E5C453 !important;
}

/* --- CONTADOR DEL CARRITO (PEQUEÑO CUADRADO) --- */
.cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #000 !important;
    color: #fff !important;
    width: 18px;
    height: 18px;
    border-radius: 4px !important; /* Cuadradito a juego */
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
}
        /* ========================================= */
/* LOADER MODERNO PREMUM                     */
/* ========================================= */
#loader {
    /* ... tus otros estilos ... */
    z-index: 9999999 !important; /* Agregamos un 9 extra para que sea el máximo */
}

.whatsappbtnflotante {
    /* ... tus otros estilos ... */
    z-index: 999998 !important; /* Lo dejamos un número por debajo del loader */
}
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
     background: #0f172a !important; /* Fondo de carga azul */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1); /* Transición ultra suave */
}

/* La barrita de progreso arriba, muy fina */
.loader-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #E5C453, transparent);
    width: 100%;
    animation: scan 2s linear infinite;
}

/* El pulso central: un anillo dorado elegante */
.loader-pulse {
    width: 80px;
    height: 80px;
    border: 2px solid rgba(229, 196, 83, 0.1);
    border-top: 2px solid #E5C453;
    border-radius: 50%;
    animation: spin-elegant 1.2s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
    position: relative;
}

.loader-pulse::after {
    content: '';
    position: absolute;
    top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid rgba(229, 196, 83, 0.05);
    border-top: 1px solid #E5C453;
    border-radius: 50%;
    opacity: 0.5;
    animation: spin-elegant 2s linear infinite reverse;
}

/* Texto de carga minimalista */
.loader-text {
    margin-top: 25px;
    font-family: 'Montserrat', sans-serif;
    color: #E5C453;
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-weight: 400;
    opacity: 0.8;
    animation: breathe 2s ease-in-out infinite;
}

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

@keyframes spin-elegant {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes breathe {
    0%, 100% { opacity: 0.3; transform: scale(0.98); }
    50% { opacity: 0.8; transform: scale(1); }
}

/* Clase para el efecto de salida */
.loader-hidden {
    opacity: 0 !important;
    transform: scale(1.1); /* Efecto de acercamiento al entrar a la tienda */
    pointer-events: none;
}
/* ========================================= */
/* FORMULARIO COMO PESTAÑA (OPTIMIZADO)      */
/* ========================================= */

/* Contenedor Principal (ID: modalPedido) */
#modalPedido {
    display: none; 
    width: 100%;
    min-height: 100vh;
    background-color: #f8f9fa;
    margin: 0;
    padding-top: 10px !important;
    box-sizing: border-box; 
    overflow-x: hidden; /* Evita cualquier desborde lateral */
}
/* 2. El botón "Volver a la tienda" */
.btn-volver {
    margin-bottom: 5px !important; /* Reduce espacio debajo del botón */
    padding: 8px 15px !important; /* Lo hace un poco más delgado */
    display: inline-block;
}

/* El cuadro blanco del formulario */
.modal-contenido {
    background: #ffffff;
    width: 100%;
    max-width: 700px; 
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box; 
}

/* Resumen del producto */
.producto-info-pestaña {
    display: flex;
    gap: 12px;
    background: #fffcf5;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #fdf2d2;
    margin-bottom: 20px;
    align-items: center;
}

#productoImagen {
    width: 70px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

#productoTitulo { font-size: 16px; font-weight: 700; color: #333; margin: 0; }
#productoPrecio { font-size: 18px; font-weight: 800; color: #000; }

/* ESTILO DE LOS CAMPOS (IDs respetados) */
.formulario input,
.formulario textarea,
.formulario select {
    width: 100%;
    padding: 10px;
    margin: 6px 0;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 15px; /* Tamaño ideal para móvil y web */
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box; /* Esto evita que el 100% se salga */
}

/* FILA DE DOS COLUMNAS (SE MANTIENE EN MÓVIL) */
.fila2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Fuerza 2 columnas siempre */
    gap: 10px; /* Espacio entre columnas */
}

/* Títulos separadores dentro del form */
.separador-tarjeta, .separador-entrega {
    font-size: 14px;
    color: #e5c453;
    margin-top: 15px;
    margin-bottom: 5px;
    border-bottom: 1px solid #eee;
    padding-bottom: 3px;
    grid-column: span 2; /* Ocupa las dos columnas si está dentro de una fila2 */
}

/* BOTÓN DE ENVÍO (ID: enviarPedidoBtn) */
#enviarPedidoBtn {
    width: 100%;
    background: #25D366;
    color: white !important;
    border: none;
    padding: 15px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 20px;
    display: block;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}
.total-pago-box {
    text-align: right;
    padding: 15px;
    font-size: 18px;
    font-weight: 800;
    color: #000;
    border-top: 2px solid #E5C453;
}

/* ========================================= */
/* BOTONES CIRCULARES WhatsApp y carrito sobre carrito  IMAGEN */
/* ========================================= */


/* 1. Contenedor de la franja (Precio Viejo + Botones/Agotado) */
.franja-promo-botones {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    min-height: 38px; /* Altura fija para que la tarjeta no salte */
    padding: 0 8px;
    margin-top: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* 2. Bloque de ahorro (Lado izquierdo) */
.bloque-ahorro {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-grow: 1;
}

/* 3. Contenedor de botones (Lado derecho - SIEMPRE ANCLADO) */
.botones-alineados {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-width: 80px; /* Reserva el espacio para que nada se mueva */
    margin-left: auto;
}

/* 6. ETIQUETA PROFESIONAL: Producto sin Stock y color imagen (Estilo Pill) */
.btn-agotado-layer, .btn-agotado-final {
    background: #f8f9fa !important; /* Gris muy limpio */
    color: #a0a0a0 !important;    /* Texto suave */
    border: 1px solid #e0e0e0 !important; /* Borde sutil profesional */
    padding: 5px 12px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    border-radius: 50px !important; /* Forma de cápsula, no círculo */
    text-transform: uppercase;
    letter-spacing: 0.8px;
    cursor: not-allowed;
    margin-left: auto; /* Se pega a la derecha igual que los botones */
    display: inline-block !important;
    white-space: nowrap;
    box-shadow: none !important; /* Sin sombra para diferenciarlo de los botones */
}
/* --- EFECTO AGOTADO AZUL NAVY --- */

/* La tarjeta completa cuando está agotada */
.producto.agotado {
    background-color: #f8fafc; /* Fondo un poco más gris */
    border-color: rgba(15, 23, 42, 0.1);
    cursor: not-allowed;
}

/* El contenedor de la imagen recibe el velo azul */
.producto.agotado .img-container {
    position: relative;
}

/* Creamos una capa azul navy semi-transparente sobre la imagen */
.producto.agotado .img-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.4); /* Azul Navy con 40% de opacidad */
    z-index: 2;
    transition: all 0.3s ease;
}

/* Atenuamos la imagen y el texto */
.producto.agotado img {
    filter: grayscale(80%) brightness(0.8) !important; /* Casi sin color y más oscura */
    opacity: 0.8 !important;
}

.producto.agotado .nombre {
    color: #64748b !important; /* Gris azulado para el nombre */
}

.producto.agotado .precio {
    color: #94a3b8 !important; /* Precio más tenue */
}

/* Estilo para el botón de "Sin Stock" dentro de la tarjeta */
.btn-agotado-final {
    background: #0f172a !important; /* Fondo Azul Navy */
    color: #fff !important;           /* Texto blanco */
    border: none !important;
    opacity: 0.6;                     /* Atenuado */
}

        /* ========================================= */
        /* 7. FOOTER Y AVISOS                        */
        /* ========================================= */
        .footer {
            background: #000000;
            color: white;
            padding: 30px 20px;
            text-align: center;
            border-top: 2px solid #34c274;
            font-family: 'Poppins', sans-serif;
        }

        .info-footer-elegante {
            margin: 2px 0;
            font-size: 14px;
            color: #ffffff;
            line-height: 1.2;
        }

        #descripcion.info-footer-elegante {
            font-size: 12px;
            color: #b3b3b3;
            max-width: 600px;
            margin: 0 auto 10px auto;
            line-height: 1.4;
            font-weight: 300;
        }

        .aviso-privacidad {
            font-size: 12px;
            color: #64748b;
            line-height: 1.3;
            padding: 8px 12px;
            background-color: #f1f5f9;
            border-left: 3px solid #25D366;
           margin-top: 0 !important;
    margin-bottom: 10px !important;
            border-radius: 4px;
        }

        
        /* --- BOTÓN FLOTANTE DE WHATSAPP --- */
.whatsappbtnflotante {
    position: fixed !important; /* Mantiene el botón en la esquina de la pantalla */
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex !important; /* Obligatorio para que se vea */
    justify-content: center;
    align-items: center;
    z-index: 999999; /* Por encima de todo */
    animation: pulse-green 2s infinite;
}

/* Efecto al pasar el mouse */
.whatsappbtnflotante:hover {
    transform: scale(1.1); /* Agranda un poquito */
    background-color: #20ba5a;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3);
}

/* Estilo de la imagen dentro del botón */
.whatsappbtnflotante img {
    width: 35px;
    height: 35px;
    object-fit: contain;
}
/* Aseguramos que el estado inicial en la tienda sea visible */
#btnWhats {
    display: flex !important; /* Fuerza la visibilidad inicial */
}

.whatsappbtnflotante {
    /* ... tus otros estilos ... */
    z-index: 99999 !important; /* Súbelo al máximo */
    display: flex; /* Asegúrate de que no empiece en none */
}
/* Animación de pulso sutil */
@keyframes pulse-green {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}


      /* 1. CONTENEDOR pagina empresas */
/* 1. CONFIGURACIÓN DE FONDO Y CUERPO */
#empresa-tab {
    background: #0f1115; /* Gris oscuro moderno, no negro total */
    color: #e2e8f0;
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    padding: 0 !important; /* Quitamos padding para que las cintas toquen la orilla */
    overflow-x: hidden;
}

.empresa-full {
    width: 100%;
}

/* 2. HEADER (CINTA DE BIENVENIDA) */
.empresa-header {
     background: #0f172a !important;
    padding: 60px 20px;
    text-align: center;
    border-bottom: 1px solid rgba(229, 196, 83, 0.1);
}

/* --- SECCIÓN LOGO (AHORA CUADRADO MODERNO) --- */
.empresa-logo {
    width: 140px;
    height: 140px;
    margin: 0 auto 25px; /* Centrado horizontal */
    border-radius: 15px;  /* Cuadrado con esquinas suaves */
    padding: 10px;
    background: linear-gradient(135deg, #E5C453, #1c1f26);
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.empresa-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Asegura que el logo no se deforme */
    border-radius: 8px;   /* Un radio menor para la imagen interna */
    background: #0f1115;  /* Fondo para logos transparentes */
}

.empresa-titulo {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: 2.8rem;
    margin-bottom: 10px;
    background: linear-gradient(to right, #fff, #E5C453, #fff);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineSweep 5s linear infinite;
}

.empresa-eslogan {
    color: #94a3b8;
    font-style: italic;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

/* 3. SECCIONES TIPO "CINTA" (ANCHO COMPLETO) */
.empresa-section {
    width: 100%;
    padding: 60px 0; /* Centrado vertical */
    display: flex;
    flex-direction: column;
    align-items: center;    /* Centra los elementos hijos horizontalmente */
    justify-content: center;
    text-align: center;      /* Centra el texto interno */
    border-bottom: 1px solid rgba(255,255,255,0.03);
    box-sizing: border-box;  /* Evita que el padding empuje la caja hacia un lado */
}

/* Alternamos colores de cinta para dar ritmo visual */
.empresa-section:nth-child(even) {
    background: #161920; /* Un tono un poco más claro */
}

.empresa-section:nth-child(odd) {
    background: #0f1115;
}

.empresa-subtitulo {
    font-family: 'Montserrat', sans-serif;
    color: #E5C453;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 25px;
    font-weight: 600;
}

.empresa-descripcion {
    max-width: 700px;        /* Un ancho más legible para lectura */
    width: 90%;              /* Margen de seguridad para móviles */
    margin: 0 auto;          /* FUERZA el centrado horizontal del bloque */
    line-height: 1.8;
    color: #cbd5e1;
    font-size: 1.05rem;
    word-wrap: break-word;   /* Evita que palabras largas rompan el margen */
}

/* --- ESTILO DEL MAPA --- */
/* --- ESTILO DEL MAPA (ESTILO FRANJA TOTAL) --- */
#contenedor-mapa {
    width: 100%;           /* Ocupa todo el ancho disponible */
    max-width: none;       /* Eliminamos el tope de 900px */
    margin: 20px 0 0;      /* Quitamos el 'auto' para que no se centre, se pegue arriba */
    padding: 0;            /* Quitamos el espacio de 20px de los lados */
    box-sizing: border-box;
    overflow: hidden;      /* Evita que el radio de las esquinas cause problemas */
}

#google-map-iframe {
    width: 100%;           /* Obliga al iframe a ser tan ancho como la pantalla */
    display: block;        /* Elimina espacios vacíos debajo del iframe */
    border-radius: 0;      /* OJO: Para efecto franja total, es mejor sin esquinas redondeadas */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* Mantenemos tu estilo oscuro/moderno */
    filter: grayscale(0.8) invert(0.9) hue-rotate(180deg) brightness(0.9);
    transition: filter 0.5s ease;
}

#google-map-iframe:hover {
    filter: grayscale(0); /* Se pone a color al pasar el mouse */
}

#perfil-medios-pago {
    width: 95%;
    max-width: 800px;
    margin: 20px auto 0;
    display: flex !important;    /* Cambiamos a Flex para mejor control vertical */
    flex-direction: column;      /* Apila uno debajo de otro */
    gap: 12px;                   /* Espacio entre cada tarjeta */
}

#perfil-medios-pago div {
    width: 100%;                 /* Ocupa todo el ancho del contenedor */
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(229, 196, 83, 0.2);
    padding: 18px;               /* Un poco más de espacio interno */
    border-radius: 12px;
    color: #f1f5f9 !important;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Alinea el contenido a la izquierda */
    transition: 0.3s ease;
    box-sizing: border-box;      /* Asegura que el padding no rompa el ancho */
}

#perfil-medios-pago div:hover {
    background: #0f172a !important;
    border-color: rgba(229, 196, 83, 0.5);
    transform: translateX(5px);  /* Pequeño efecto de deslizamiento al pasar el mouse */
}

#perfil-medios-pago div i {
    color: #E5C453;
    margin-right: 15px;          /* Más espacio entre icono y texto */
    font-size: 1.2rem;           /* Icono un poco más grande */
}

/* 5. SECCIÓN DE CONTACTO Y BOTÓN SEPARADO */
.contacto-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;      /* Asegura que los iconos y texto estén al centro */
    color: #94a3b8;
}
.contacto-container p {
    display: flex;
    align-items: center;
    justify-content: center; /* Centra iconos con el texto */
    gap: 10px;
    margin-bottom: 15px;
}
.empresa-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #25d366;
    color: #fff !important;
    padding: 18px 40px;
    border-radius: 100px;
    font-weight: 700;
    text-decoration: none;
    margin-top: 30px;
    box-shadow: 0 15px 30px rgba(37, 211, 102, 0.2);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.empresa-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(37, 211, 102, 0.3);
}

/* 6. ANIMACIONES Y DECORACIÓN */
@keyframes shineSweep {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.divider-gold {
    width: 40px;
    height: 3px;
    background: #E5C453;
    margin: 15px auto;
    border-radius: 10px;
}
/* GRID DE REDES SOCIALES */
.grid-redes {
    width: 90%;
    max-width: 800px;
    margin: 20px auto 0;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.red-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(229, 196, 83, 0.2);
    padding: 15px;
    border-radius: 12px;
    text-decoration: none;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: 600;
}

.red-item i {
    margin-right: 10px;
    font-size: 1.2rem;
}

/* Colores de marca al pasar el mouse */
.red-item:hover {
    transform: translateY(-5px);
    background: rgba(229, 196, 83, 0.1);
    border-color: #E5C453;
}

.red-item.facebook:hover { color: #1877F2 !important; }
.red-item.instagram:hover { color: #E4405F !important; }
.red-item.tiktok:hover { color: #00f2ea !important; }

/* ========================================= */
/* BARRA PRINCIPAL: ESTRUCTURA BLINDADA      */
/* ========================================= */
.tabs-container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
     background: #0f172a !important;
    border-bottom: 1.5px solid rgba(229, 196, 83, 0.3) !important;
    position: sticky!important; 
    top: 0; left: 0; width: 100%; height: 60px !important;
    z-index: 5000 !important;
    padding: 0 15px !important;
    box-sizing: border-box;
}

/* 🚩 HAMBURGUESA: Oculta en PC, solo líneas en móvil */
.menu-toggle {
    display: none !important; 
    background: transparent !important;
    border: none !important;
    color: #E5C453 !important;
    font-size: 24px !important;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* ZONA IZQUIERDA: Pestañas */
.tabs-left {
    display: flex !important;
    height: 100%;
    align-items: center;
}
/* --- BOTÓN BASE CENTRADO --- */
.tab-item {
    display: flex !important;           /* Mantiene los elementos en línea */
    align-items: center !important;     /* 🚩 CENTRADO VERTICAL ABSOLUTO */
    justify-content: center !important;
    height: 100% !important;            /* Ocupa todo el alto de la barra */
    padding: 0 25px !important;
    color: rgba(255,255,255,0.7) !important;
    font-weight: 700 !important;
    font-size: 14px !important;         /* Tamaño del texto fijo */
    text-transform: uppercase;
    cursor: pointer;
    gap: 12px !important;               /* Espacio entre icono y texto */
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    box-sizing: border-box !important;  /* Evita que el borde empuje hacia arriba */
}

/* 🚩 ICONO GRANDE (Independiente del texto) */
.tab-item i {
    font-size: 22px !important;         /* Icono grande y notable */
    transition: transform 0.3s ease;
}

/* --- ESTADO ACTIVO (CENTRADO Y DORADO) --- */
.tab-item.active { 
    display: flex !important;           /* 🚩 NUNCA USAR inline-block AQUÍ */
    color: #E5C453 !important; 
    border-bottom: 3px solid #E5C453 !important; 
    background: transparent !important;
}

/* Animación sutil para el icono activo */
.tab-item.active i {
    transform: scale(1.1);
    color: #E5C453 !important;
}

/* EFECTO HOVER */
.tab-item:hover {
    color: #fff !important;
}

/* ZONA CENTRAL: Buscador equilibrado */
.search-nav-container {
    position: relative;
    flex: 0 1 350px !important; 
    margin: 0 15px !important;
    min-width: 40px;
}

.search-input-nav {
    width: 100%;
    height: 36px;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 20px !important;
    padding: 0 15px 0 35px !important;
    color: white !important;
    outline: none !important;
}

.search-icon-nav {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: #E5C453;
}

/* ZONA DERECHA: Redes */
.redes-nav {
    display: flex !important;
    gap: 10px;
    align-items: center;
}

.icono-nav {
    color: white;
    font-size: 18px;
    transition: 0.3s;
}

.icono-nav:hover { color: #E5C453; }

/* ========================================= */
/* --- AJUSTES MÓVIL (767px o menos) ---     */
/* ========================================= */
@media screen and (max-width: 767px) {
    .menu-toggle {
        display: block !important; /* Aparece en móvil */
        order: 1;
    }

    .tabs-left {
        display: none !important; /* Se oculta detrás del botón */
        position: absolute;
        top: 60px; left: 0; width: 100%;
        background: #020617 !important;
        flex-direction: column !important;
        height: auto !important;
        border-bottom: 2px solid #E5C453;
        padding-bottom: 10px;
    }

    .tabs-left.mostrar-menu {
        display: flex !important;
    }

    .tab-item {
        width: 100% !important;
        height: 55px !important;
        justify-content: flex-start !important;
        padding-left: 20px !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    .search-nav-container {
        order: 2;
        margin: 0 10px !important;
        flex: 1 !important;
        max-width: 180px !important;
    }

    .redes-nav {
        order: 3;
    }
}
/* ========================================= */
/* --- SECCIÓN UNIFICADA: DISEÑO MÓVIL modal ---  */
/* ========================================= */
@media screen and (max-width: 767px) {

    /* 1. RESET DE SEGURIDAD (Evita que el contenido se salga) */
    .modal-contenido, .formulario input, .formulario select, .fila2 {
        box-sizing: border-box !important;
    }

    /* 2. GRID EN 2 COLUMNAS */
    .productos {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 10px !important;
    }


    .cat-btn {
        min-width: 130px !important;
        max-width: 160px !important;
        font-size: 13px !important;
        padding: 10px 15px !important;
        border-radius: 20px 0 0 20px !important; /* Más redondeado y moderno */
        border: none !important;
        box-shadow: -4px 4px 12px rgba(0,0,0,0.25);
    }

    .cat-main {
        background: linear-gradient(135deg, #E5C453, #caa93a) !important;
        color: #000 !important;
        font-weight: bold;
    }

    /* 4. FORMULARIO DE PEDIDO (Blindado contra desbordes) */
    .modal-contenido { 
        padding: 15px !important; 
        width: 100% !important;
        max-width: 100vw !important;
    }

    .fila2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* Asegura mitades exactas */
        gap: 8px !important;
        width: 100% !important;
    }

    .formulario input, .formulario select {
        width: 100% !important; /* Obligatorio con border-box */
        padding: 12px !important;
        font-size: 16px !important; /* Evita que iOS haga zoom al escribir */
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
    }

    #productoImagen { 
        width: 65px !important; 
        height: 65px !important; /* Cuadrado para que no empuje el texto */
        object-fit: cover;
    }

    /* 5. AVISOS TOAST (Sincronizados con la altura de categorías) */
    .swal2-bottom-end .swal2-toast { 
        margin-bottom: 120px !important; 
    }
    
    /* Contador de productos */
    .cart-count {
        width: 22px; 
        height: 22px;
        font-size: 12px;
    }
}
/* Regla para que el texto se ajuste en pantallas pequeñas (menos de 360px) */
    @media (max-width: 360px) {
        .btn-text-responsive {
            font-size: 9px !important; /* Baja de 11px a 9px */
        }
        .btn-container-responsive {
            gap: 3px !important; /* Reduce el espacio entre botones */
        }
    }
/* ========================================= */
/* CATEGORÍAS: BOTONES DE LÍNEA (FIXED)      */
/* ========================================= */

#menu-categorias-flotante {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    padding: 12px 0 !important;
    z-index: 1000 !important;
    border-bottom: 1px solid #f0f0f0;
}

.categorias-wrapper-tags {
    display: flex !important;
    flex-wrap: nowrap !important; /* 🔥 Evita que se amontonen abajo */
    overflow-x: auto !important;
    gap: 12px !important;
    padding: 0 45px !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.categorias-wrapper-tags::-webkit-scrollbar {
    display: none !important;
}

/* --- BOTÓN DE CATEGORÍA (ESTILO LÍNEA NEGRA) --- */
.cat-tag {
    flex: 0 0 auto !important; /* 🔥 Evita que el botón se encoja */
    background: transparent !important;
    border: 1px solid #ddd !important; /* Línea gris suave por defecto */
    color: #333 !important;
    padding: 8px 20px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: capitalize; /* "Flores Amarillas" con mayúscula inicial */
    white-space: nowrap !important; /* 🔥 OBLIGA A QUE "Flores amarillas" esté en una sola línea */
    cursor: pointer !important;
    transition: all 0.3s ease;
}

/* Hover: Se pone negro como tus otros botones */
.cat-tag:hover {
    background: rgba(15, 23, 42, 0.04) !important; /* Un "velo" azul casi invisible */
    border-color: #0f172a !important;             /* El borde cambia al Azul Navy */
    color: #0f172a !important;                    /* El texto se oscurece al Azul Navy */
             
}

/* ACTIVO: Fondo negro y letra dorada */
.cat-tag.activo {
     background: #0f172ade !important;
    color: #E5C453 !important;
    border-color: #000 !important;
}

/* --- FLECHAS (SOLO EL ICONO) --- */
.cat-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    background: white !important; /* Fondo blanco para que no se pierdan */
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1005 !important;
    cursor: pointer !important;
    color: #000 !important;
    font-size: 20px !important;
}

.arrow-left { left: 8px !important; }
.arrow-right { right: 8px !important; }

/* OCULTAR EN MÓVIL */
@media screen and (max-width: 767px) {
    .cat-arrow { display: none !important; }
    .categorias-wrapper-tags { padding: 0 15px !important; }
}
/* ============================================================ */
/* 2. SECCIÓN: BANNER DE PROMOCIONES (EFECTO VIVO Y ASÍNCRONO)  */
/* ============================================================ */

/* Contenedor: Fondo Blanco (Igual a los productos) */
.promo-grid-fade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 0 !important; 
    margin-bottom: 0 !important;
    padding: 15px 20px !important;
    background: #ffffff; /* 👈 Fondo blanco solicitado */
    transition: opacity 0.8s ease-in-out;
}

/* LA TARJETA DE PROMO */
.promo-item-fade {
    background: #ffffff;
    border-radius: 12px; /* Radio suave */
    display: flex;
    align-items: center;
    padding: 8px;
    margin: 0; 
    cursor: pointer;
    border: 1px solid #f0f0f0; /* Borde muy suave */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* Sombra ligera */
    
    /* Aplicamos la animación base */
    animation: jellyLife 6s ease-in-out infinite;
}

/* 🌀 EFECTO ASÍNCRONO (MOVIMIENTOS ALEATORIOS) */
/* Usamos nth-child para que cada tarjeta tenga un tiempo diferente y no se muevan juntas */

.promo-item-fade:nth-child(1) { animation-duration: 5s; animation-delay: 0s; }
.promo-item-fade:nth-child(2) { animation-duration: 7s; animation-delay: 1s; }
.promo-item-fade:nth-child(3) { animation-duration: 6s; animation-delay: 0.5s; }
.promo-item-fade:nth-child(4) { animation-duration: 8s; animation-delay: 2s; }
.promo-item-fade:nth-child(odd) { animation-direction: alternate; }

/* ANIMACIÓN GELATINOSA VIVA */
@keyframes jellyLife {
    0%, 80%, 100% { transform: scale(1); }
    85% { transform: scale(1.08, 0.9); }
    90% { transform: scale(0.9, 1.08); }
    95% { transform: scale(1.03, 0.97); }
}

.promo-img-box {
    width: 65px; height: 65px;
    flex-shrink: 0;
    margin-right: 12px;
}
.promo-img-box img { width: 100%; height: 100%; object-fit: contain; }

.promo-info { flex: 1; min-width: 0; }
.p-name-slim { 
    font-size: 13px; 
    font-weight: 700; 
    color: #333; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
}
.p-price-big { 
    color: #111; 
    font-size: 18px; 
    font-weight: 800; 
}

/* BOTÓN DE ACCIÓN */
.btn-promo-action {
    display: flex; flex-direction: column; align-items: center;
    background: #f8f9fa; 
    border: 1px solid #eee;
    padding: 6px; 
    border-radius: 8px; 
    min-width: 95px; 
    flex-shrink: 0;
}
.buy-text { font-size: 12px; font-weight: 700; color: #16a34a; text-transform: uppercase; }
.save-badge { 
    background: #ef4444; 
    color: #fff; 
    font-size: 10px; 
    font-weight: 800; 
    padding: 2px 6px; 
    border-radius: 4px; 
    margin-top: 3px; 
}

/* RESPONSIVO MÓVIL */
@media screen and (max-width: 767px) {
    .promo-grid-fade {
        grid-template-columns: 1fr;
        padding: 10px 15px !important;
        margin: 0 !important;
        background: #ffffff;
    }

    .promo-item-fade {
        flex-direction: row;
        text-align: left;
        padding: 10px;
        height: 85px;
        justify-content: space-between;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }

    .promo-img-box {
        width: 60px;
        height: 60px;
        margin-right: 10px;
    }
}

/* ETIQUETA DE STOCK PERSUASIVA */
.badge-stock-urgente {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 68, 68, 0.9); /* Rojo vibrante suave */
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    backdrop-filter: blur(4px); /* Efecto cristal moderno */
    animation: pulseUrgencia 2s infinite;
}

@keyframes pulseUrgencia {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}
/* ETIQUETA DE chekc para destinatario */
@keyframes sutil-pulso {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4); }
    70% { box-shadow: 0 0 0 6px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}
#contenedor-check-regalo:hover {
    background: #e1efff;
    transform: scale(1.01);
}
/* Contenedor principal del Banner (Micro) */
#seccion-adicionales {
    background: #fdfdfd; /* Un tono casi blanco para diferenciar */
    border-radius: 8px; /* Bordes un poco más suaves */
    margin: 10px 0; /* Menos margen vertical */
    padding: 6px 0; /* Padding vertical mínimo */
    border: 1px solid #f2f2f2;
}

/* Título del Banner (Mini) */
#seccion-adicionales p {
    margin: 0 0 5px 10px; /* Margen inferior mínimo */
    font-size: 11px; /* Fuente pequeña para el título */
    font-weight: 700;
    color: #020617; /* Un gris más suave */
    letter-spacing: 0.5px;
}

/* El carril donde deslizan los productos */
#carrusel-adicionales {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto; /* Permite el scroll horizontal */
    padding: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* Scroll suave en iPhone */
}

/* Personalizar la barra de scroll para que NO sea invisible en PC */
#carrusel-adicionales::-webkit-scrollbar {
    height: 6px; /* Barra delgadita */
    display: block; /* Aseguramos que se vea */
}

#carrusel-adicionales::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

#carrusel-adicionales::-webkit-scrollbar-thumb {
    background: #E5C453; /* El color dorado de tu marca */
    border-radius: 10px;
}

#carrusel-adicionales::-webkit-scrollbar-thumb:hover {
    background: #d4b342;
}
/* Estilo de la tarjeta de producto Micro */
.card-adicional-item {
    min-width: 60px; /* Tarjeta mucho más estrecha */
    max-width: 60px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px; /* Bordes más pequeños */
    padding: 4px; /* Padding interno mínimo */
    text-align: center;
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Sombra casi invisible */
    transition: all 0.2s ease;
}

/* Efecto al tocar */
.card-adicional-item:active {
    transform: scale(0.96);
    background-color: #fafafa;
    border-color: #e5c453;
}

/* Imagen dentro de la tarjeta (Mini) */
.card-adicional-item img {
    width: 45px; /* Imagen pequeña */
    height: 45px; /* Imagen pequeña */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 3px; /* Margen inferior mínimo */
    background: #f9f9f9;
}

/* ================================================= */
/* --- MODAL DETALLE PRODUCTO: DISEÑO FINAL ZIPPY --- */
/* ================================================= */

.modal-detalle-overlay {
    display: none; /* Se cambia a flex con JS */
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Un color oscuro sólido o con poco blur para tapar lo de abajo */
    background: rgba(2, 6, 23, 0.98) !important; 
    backdrop-filter: blur(12px) !important;
    
    /* EL TRUCO: Un z-index superior a los botones flotantes */
    z-index: 999999 !important; 
    
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
}

.modal-detalle-box {
    background: #ffffff;
    width: 100%;
    max-width: 900px;
    max-height: 92vh;
    border-radius: 24px;
    position: relative;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    animation: modalSlideUp 0.4s ease-out;
}

@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.btn-cerrar-modal {
    position: absolute;
    top: 15px; right: 15px;
    background: #fff; border: 1.5px solid #eee;
    width: 36px; height: 36px; border-radius: 50%;
    font-size: 20px; cursor: pointer; z-index: 100;
    display: flex; align-items: center; justify-content: center;
}

/* --- ESTABILIDAD DE LA GRILLA --- */
.modal-detalle-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* 2 Columnas PC */
    align-items: stretch;
}

/* Evita que el contenido de la derecha empuje a la izquierda */
.modal-detalle-der {
    padding: 30px;
    display: flex;
    flex-direction: column;
    min-width: 0; /* 🚩 CLAVE: Permite que el contenido interno se encoja/ajuste */
}

/* --- NOMBRE RESPONSIVO (NUNCA APECHURRA) --- */
#detalleNombre {
    /* 🚩 CLAVE: Tamaño de fuente fluido (mínimo 20px, ideal 4vw, máximo 28px) */
    font-size: clamp(20px, 3.5vw, 28px) !important; 
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 15px 0;
    text-transform: capitalize;
    line-height: 1.2;
    
    /* 🚩 CLAVE: Rompe las palabras si son demasiado largas para que bajen */
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto; 
    width: 100%;
}

/* --- IMAGEN SIEMPRE ESTABLE --- */
.modal-detalle-izq {
    flex: 1;
    background: #f8fafc;
    border-right: 1px solid #f1f5f9;
    overflow: hidden;
    min-width: 0;
}

.modal-detalle-izq img {
    width: 100% !important;
    height: auto !important; /* Deja que el aspect-ratio mande */
    
    /* 🚩 ESTA ES LA CLAVE: Relación de aspecto 3 de ancho por 4 de alto */
    aspect-ratio: 3 / 4 !important;
    
    /* 'cover' llena el espacio recortando un poco los bordes si es necesario */
    /* 'contain' muestra la foto completa sin recortar nada */
    object-fit: fill !important; 
    
    max-height: 550px;
    display: block;
    border-radius: 8px; /* Opcional: para que se vea más elegante */
}
/* Ajuste para móvil: para que no ocupe toda la pantalla del celular hacia abajo */
@media screen and (max-width: 767px) {
    .modal-detalle-izq img {
        min-height: 300px; /* Un poco más pequeña en celular */
        max-height: 350px;
    }
}

.modal-detalle-der {
    padding: 30px;
    display: flex;
    flex-direction: column;
}

#detalleNombre {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 20px 0;
    text-transform: capitalize;
}

/* ETIQUETAS Y PRECIOS */
.etiqueta-gris {
    display: block;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.precio-principal-modal {
    font-size: 32px;
    font-weight: 900;
    color: #0f172a;
}

.ahorro-modal-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 5px;
}

.precio-tachado-modal {
    text-decoration: line-through;
    color: #cbd5e1;
    font-size: 18px;
}

.badge-rojo-ahorro {
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 50px;
    animation: pulseAhorro 2s infinite;
}

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

.linea-sutil {
    border: 0;
    border-top: 1px solid #f1f5f9;
    margin: 20px 0;
}

#detalleDescripcion {
    font-size: 15px;
    color: #475569;
    line-height: 1.6;
}

/* 🚩 FOOTER Y BOTONES (MISMA LÍNEA EN PC) */
.modal-detalle-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Contenedor específico para los dos botones */
.contenedor-botones-modal {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Mitad y mitad */
    gap: 10px;
}

.btn-modal-solido {
    padding: 16px 5px !important;
    border-radius: 12px;
    font-weight: 800;
    font-size: 12px !important;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-transform: uppercase;
    white-space: nowrap;
    border: none;
    background: #0f172a; /* Azul Navy */
    color: #fff;
}

/* Diferenciamos el botón de "Comprar Ahora" con el color dorado */
#btnVerCarritoDesdeModal {
    color: #E5C453 !important;
}

.btn-modal-solido:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

/* ========================================= */
/* 📱 AJUSTES PARA MÓVIL (RESPONSIVE)        */
/* ========================================= */
@media screen and (max-width: 767px) {
    .modal-detalle-grid { grid-template-columns: 1fr; }
    .modal-detalle-der { padding: 20px; }
    .modal-detalle-izq img { max-height: 350px; }
    
    /* En móvil se mantienen en línea si hay espacio, si no, se bajan */
    .contenedor-botones-modal {
        grid-template-columns: 1fr 1fr; 
    }
}

@media screen and (max-width: 450px) {
    .contenedor-botones-modal {
        grid-template-columns: 1fr; /* Uno debajo del otro en cel pequeños */
    }
    .btn-modal-solido {
        font-size: 14px !important;
        padding: 14px !important;
    }
}