/* ==========================================
   LÚSTRIKA PRO 3.0
   ESTILOS PRINCIPALES
========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f4f7fb;
    color: #333;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =========================
   HEADER
========================= */

.header {
    background: #0057b8;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 40px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-box img {
    width: 100px;            /* Ancho y alto exactamente iguales para un círculo perfecto */
    height: 100px;
    border-radius: 50%;     /* Hace la imagen completamente redonda */
    object-fit: cover;      /* Evita que el logo se estire, aplaste o distorsione */
    display: block;
}
.empresa {
    text-align: center;
    flex: 1;
}

.empresa h1 {
    font-size: 2.7rem;
    font-weight: 800;           
    text-transform: uppercase;  
    letter-spacing: 1px;   
}

/* DISEÑO PREMIUM E INNOVADOR PARA EL CARRITO */
.acciones-header button {
    position: relative; 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
    color: #0057b8;
    border: 1px solid rgba(0, 87, 184, 0.15); 
    border-radius: 50px; 
    padding: 10px 22px; 
    font-size: 1.2rem; 
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 87, 184, 0.08); 
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
}

/* EFECTO INTERACTIVO DE ALTO IMPACTO (HOVER) */
.acciones-header button:hover {
    background: #0057b8;
    color: white;
    border-color: #0057b8;
    transform: translateY(-3px); 
    box-shadow: 0 10px 25px rgba(0, 87, 184, 0.25); 
}

/* EFECTO CUANDO SE PRESIONA (CLICK) */
.acciones-header button:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(0, 87, 184, 0.2);
}

/* REDISEÑO DEL CONTADOR ESTILO NOTIFICACIÓN DE COMPRA */
#contador-carrito {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30; 
    color: white;
    font-size: 0.7rem;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 2px;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.4);
    border: 2px solid white; 
    animation: pulsoNotificacion 2s infinite; 
}

@keyframes pulsoNotificacion {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* =========================
   MENU
========================= */

.menu {
    display: flex;
    justify-content: center;
    gap: 30px;
    background: #003f87;
    padding: 14px;
}

.menu a {
    color: white;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    padding: 4px 0;
    transition: color 0.3s ease;
}

/* Efecto moderno de línea expansiva para el menú */
.menu a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #ffd600; /* Combina con tu color de envío gratis */
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}

.menu a:hover {
    color: #ffd600;
}

.menu a:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* =========================
   HERO
========================= */

.hero {
    background: white;
    text-align: center;
    padding: 70px 20px;
}

.hero h2 {
    color: #0057b8;
    font-size: 2.5rem;
}

.btn-principal {
    display: inline-block;
    background: #0057b8;
    color: white;
    padding: 14px 28px;
    border-radius: 30px;
    text-decoration: none;
    margin-top: 20px;
}

/* =========================
   BENEFICIOS
========================= */

.beneficios {
    display: flex;
    justify-content: center;
    gap: 25px;
    padding: 40px 20px;
}

.beneficio {
    background: white;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    max-width: 300px;
}

/* =========================
   AVISO ENVÍO GRATIS
========================= */

.aviso-envio {
    background: #ffd600;
    color: #222;
    text-align: center;
    padding: 14px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 3px solid #e0b900;
}

/* =========================
   CATALOGO
========================= */

.catalogo {
    padding: 50px 20px;
}

.productos-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 30px;
}

/* TARJETAS PREMIUM DE PRODUCTO (ACTUALIZADAS) */
.card-producto {
    background: white;
    border-radius: 16px;
    padding: 25px 22px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-producto:hover {
    transform: translateY(-8px); /* Efecto 3D de flotado */
    box-shadow: 0 12px 30px rgba(0, 87, 184, 0.12); /* Sombra elegante azulada */
}

.card-producto img {
    width: 100%;
    height: 170px;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform 0.4s ease;
}

.card-producto:hover img {
    transform: scale(1.05); /* Acercamiento suave del envase */
}

.card-producto h3 {
    color: #222;
    font-size: 1.15rem;
    margin: 10px 0 5px 0;
    font-weight: 600;
    line-height: 1.3;
}

/* Estilos de apoyo para los datos de tu base de datos */
.card-producto .marca {
    font-size: 0.85rem;
    color: #0057b8;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 4px;
}

.card-producto .descripcion {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 10px;
}

.precio {
    font-size: 1.4rem;
    font-weight: 700;
    color: #222;
    margin: auto 0 15px 0; /* Empuja el precio y botón al fondo equitativamente */
}

.card-producto button {
    width: 100%;
    background: #0057b8;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.card-producto button:hover {
    background: #004494;
}

/* =========================
   CARRITO MODAL
========================= */

.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    display: none;
    justify-content: flex-end;
    z-index: 2000;
    pointer-events: none; /* Permite que los clics atraviesen el fondo hacia la tienda */
}

.modal.activo {
    display: flex;
}

.carrito {
    background: white;
    width: 380px;
    height: 100%;
    padding: 25px;
    overflow: auto;
    pointer-events: auto; /* La caja del carrito sí recibe los clics */
}

.cerrar {
    float: right;
    border: none;
    background: none;
    font-size: 25px;
    cursor: pointer;
}

#lista-carrito li {
    list-style: none;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}
.btn-whatsapp {
    background: #25D366;
    color: white;
    border: none;
    padding: 14px 25px;
    border-radius: 30px;
    cursor: pointer;
}

/* =========================
   FOOTER
========================= */

.footer {
    background: #003b7a;
    color: white;
    text-align: center;
    padding: 25px;
}

/* =========================
   ANIMACIÓN GLOBAL BOTONES
========================= */

button,
.btn-principal {
    transition: all .3s ease;
}

button:hover,
.btn-principal:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

button:active,
.btn-principal:active {
    transform: scale(.95);
}

/* DISEÑO DE WHATSAPP FLOTANTE PREMIUM */
.whatsapp-flotante {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    background: rgba(37, 211, 102, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    animation: flotarSuave 3s ease-in-out infinite;
}

.whatsapp-flotante:hover {
    background: #25d366;
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

.whatsapp-texto {
    letter-spacing: 0.3px;
}

@keyframes flotarSuave {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

/* =========================
   RESPONSIVE (CELULAR)
========================= */

@media(max-width: 768px) {
    .header {
        flex-direction: column;
        gap: 10px;
    }

    .menu {
        flex-wrap: wrap;
    }

    .productos-grid {
        grid-template-columns: 1fr;
    }

    .carrito {
        width: 100%;
    }

    .beneficios {
        flex-direction: column;
        align-items: center;
    }

    .whatsapp-flotante {
        bottom: 20px;
        right: 20px;
        padding: 12px;
    }

    .whatsapp-texto {
        display: none; /* Esconde el texto en móvil para mejor espacio */
    }
}

/* ACTUALIZACIÓN PREMIUM PARA EL BOTÓN DE LA SECCIÓN CONTACTO */
.btn-whatsapp {
    display: inline-block;
    background: #25D366; /* Verde característico de WhatsApp */
    color: white;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    padding: 12px 30px; /* Le da más aire interno al texto */
    border-radius: 50px; /* Bordes perfectamente redondeados estilo cápsula */
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.2); /* Sombra suave para generar volumen */
    margin-top: 10px;
    border: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* EFECTO INTERACTIVO AL PASAR EL MOUSE */
.btn-whatsapp:hover {
    background: #20ba56; /* Oscurece sutilmente el verde al interactuar */
    transform: translateY(-3px); /* Eleva el botón suavemente */
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35); /* La sombra se proyecta con más profundidad */
}

/* ==========================================
   MAQUILLAJE SECCIÓN SOBRE LÚSTRIKA
========================================== */
.nosotros {
    background: #ffffff; /* Fondo blanco limpio para contrastar con el gris de la página */
    padding: 80px 20px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.nosotros h2 {
    color: #0057b8; /* Tu azul corporativo */
    font-size: 2.3rem;
    font-weight: 700;
    margin-bottom: 30px;
    position: relative;
}

/* Contenedor que centra el texto y limita su ancho para que sea legible */
.nosotros-contenido {
    max-width: 750px;
    margin: 0 auto;
    padding: 0 10px;
}

.nosotros p {
    font-size: 1.15rem;
    color: #4a5568; /* Un gris oscuro premium, más suave que el negro puro */
    line-height: 1.7; /* Da aire entre las líneas para que no canse la vista */
    margin-bottom: 20px; /* Separa un párrafo del otro */
    text-align: justify; /* Alinea el texto de forma prolija */
}

/* El último párrafo no necesita espacio abajo */
.nosotros p:last-child {
    margin-bottom: 0;
}

/* ==========================================
   MAQUILLAJE PREMIUM DEL CARRITO LATERAL
========================================== */

/* Fondo del panel lateral */
/* Fondo del panel lateral */
.carrito {
    background: #ffffff;
    width: 400px; /* Un poquito más ancho para dar comodidad en PC */
    height: 100%;
    padding: 12px 24px 24px 24px; /* Cambiado de 30px a 12px en la parte superior */
    overflow-y: auto;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15); /* Sombra lateral elegante */
    display: flex;
    flex-direction: column;
}/* Título principal del carrito */
.carrito h2 {
    color: #0057b8;
    font-size: 1.4rem;             /* Reducido ligeramente para ganar espacio */
    font-weight: 700;
    margin-top: 0 !important;       /* Elimina el desperdicio de espacio arriba */
    margin-bottom: 10px !important;  /* Reduce la separación con la lista de productos */
    border-bottom: 2px solid #f4f7fb;
    padding-bottom: 6px !important;  /* Ajusta la línea separadora */
}

/* Lista de productos agregados */
#lista-carrito {
    padding: 0;
    margin-bottom: 5px !important; /* Reducido de 20px a 5px para juntar más */
    min-height: 200px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

#lista-carrito li {
    list-style: none;
    padding: 8px 5px; /* Reducido un poco el padding de los ítems para ganar espacio */
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.95rem;
    color: #444;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Subtítulos de secciones del formulario */
.carrito h3 {
    color: #222;
    font-size: 1.1rem; /* Ligeramente más pequeño para no desperdiciar tanto aire */
    font-weight: 600;
    margin: 5px 0 8px 0 !important; /* Reducido drásticamente el espacio arriba y abajo */
}
/* ESTILIZADO DE CAMPOS DE TEXTO E INPUTS (NIVEL APPLE/MERCADO LIBRE) */
.carrito input[type="text"],
.carrito input[type="tel"],
.carrito select {
    width: 100%;
    background: #f8fafc; /* Fondo gris sutil hipermoderno */
    color: #333;
    border: 1px solid #e2e8f0; /* Borde suave */
    border-radius: 10px; /* Esquinas curvas elegantes */
    padding: 12px 14px;
    font-size: 0.95rem;
    margin-bottom: 12px; /* Separación prolija entre casilleros */
    font-family: 'Segoe UI', Arial, sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

/* Efecto cuando el usuario hace clic para escribir */
.carrito input[type="text"]:focus,
.carrito input[type="tel"]:focus,
.carrito select:focus {
    background: #ffffff;
    border-color: #0057b8; /* El borde cambia a tu azul corporativo */
    box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.12); /* Brillo difuminado suave */
}

/* SECCIÓN DE TOTALES Y PRECIOS */
.total {
    font-size: 1rem;
    color: #555;
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-weight: 500;
}

/* El precio final destacado */
.total:last-of-type {
    font-size: 1.3rem;
    color: #222;
    font-weight: 700;
    border-top: 2px dashed #e2e8f0;
    padding-top: 12px;
    margin-top: 15px;
    margin-bottom: 25px;
}

/* BOTÓN FINAL DE ENVIAR PEDIDO POR WHATSAPP (ESTRATEGIA DE VENTAS) */
#enviar-whatsapp {
    width: 100%;
    background: #25D366; /* Verde conversión */
    color: white;
    border: none;
    padding: 16px;
    border-radius: 12px; /* Combina con las tarjetas */
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: auto; /* Se acomoda al fondo con presencia */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Interacción de cierre de compra */
#enviar-whatsapp:hover {
    background: #20ba56;
    transform: translateY(-3px); /* Pequeño salto que da sensación de ligereza */
    box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

#enviar-whatsapp:active {
    transform: scale(0.98);
}

/* REPARACIÓN Y RECORTE DE ESPACIO DEL BOTÓN CERRAR */
.carrito button.cerrar {
    position: absolute;
    top: 15px;
    right: 20px; /* Lo anclamos de forma flotante en la esquina */
    width: auto !important; /* Rompe la barra gris y lo vuelve pequeño */
    background: transparent !important; /* Quita el fondo gris */
    color: #888888 !important; /* Color gris suave para la cruz */
    border: none !important;
    padding: 5px !important;
    font-size: 22px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    cursor: pointer;
    box-shadow: none !important; /* Elimina sombras extrañas */
    transform: none !important; /* Detiene movimientos no deseados */
    transition: color 0.2s ease !important;
}

/* Efecto al pasar el cursor sobre la cruz */
.carrito button.cerrar:hover {
    color: #ff3b30 !important; /* Cambia a rojo sutil al querer cerrar */
    background: transparent !important;
    transform: scale(1.1) !important; /* Crece ligeramente de forma limpia */
}

/* PONE EL NÚMERO DE PUERTA Y EL APARTAMENTO UNO AL LADO DEL OTRO */
.direccion-detalles {
    display: flex;
    gap: 10px; /* Deja una separación pequeña entre las dos cajitas */
    width: 100%;
}

.direccion-detalles input {
    flex: 1; /* Obliga a que ambos casilleros midan exactamente la mitad */
    margin-bottom: 8px; 
}

/* ==========================================
   OPTIMIZACIÓN EXTREMA DE ESPACIOS EN CARRITO
========================================== */

/* 1. Recorte superior (Título) */
.carrito h2 {
    margin-top: 5px !important;    /* Pega el título más arriba */
    margin-bottom: 8px !important;  /* Reduce la separación con el formulario */
    padding-bottom: 4px !important;
}

/* 2. Recorte intermedio (Subtítulos internos) */
.carrito h3 {
    margin: 6px 0 4px 0 !important; /* Compacta los títulos como "Datos de entrega" */
}

/* 3. Ajuste de los campos de texto para ganar más renglones */
.carrito input[type="text"],
.carrito input[type="tel"],
.carrito select {
    padding: 8px 10px !important;   /* Cajitas ligeramente más delgadas */
    margin-bottom: 6px !important;  /* Menos separación entre casilleros */
}

/* 4. Recorte inferior (Zona de totales y precios) */
.total {
    margin: 2px 0 !important;       /* Junta las líneas de Subtotal y Envío */
    font-size: 0.9rem !important;
}

/* Ajuste del Total destacado */
.total:last-of-type {
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 6px !important;
    margin-top: 6px !important;
    margin-bottom: 10px !important; /* Despeja el espacio justo para el botón */
}

/* =========================================
   MODO SEGURO: MINIMIZAR CARRITO
========================================= */
.carrito {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}