/*
 * /css/style.css (Versión 8.0 - MASTER COMPLETA)
 * - Incluye: Tienda, Carrito, Modales, Marketing, Flotantes, Responsividad.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --color-fondo: #1a1a1a;
    --color-superficie: #2c2c2c;
    --color-borde: #444;
    --color-texto-principal: #f0f0f0;
    --color-texto-secundario: #ccc;
    --color-primario: #E60000; 
    --color-primario-hover: #FF1A1A;
    --color-primario-fondo: rgba(230, 0, 0, 0.1);
    --color-verde: #76ff03;
    --color-amarillo: #ffeb3b;
    --color-texto-oscuro: #111;
    --color-info: #00BFFF;
    
    --header-height-desktop: 62px;
    --header-height-mobile: 60px; 
}

/* =========================================
   1. ESTILOS GENERALES
   ========================================= */
body {
    font-family: 'Poppins', sans-serif; 
    margin: 0;
    background-color: var(--color-fondo);
    color: var(--color-texto-principal);
    scroll-behavior: smooth;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}
h2 {
    text-align: center;
    font-size: 2em;
    margin-top: 30px;
    color: #fff;
    font-weight: 700;
}
h2.catalogo-titulo {
    margin-top: 30px;
}

/* =========================================
   2. HEADER
   ========================================= */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; 
    background-color: var(--color-superficie);
    border-bottom: 2px solid var(--color-primario);
    position: sticky;
    top: 0;
    z-index: 900;
    height: var(--header-height-desktop);
    box-sizing: border-box; 
}
header .logo-container {
    margin-bottom: 0;
    height: 40px; 
    display: flex;
    align-items: center;
}
header .logo-container img {
    max-height: 40px; 
    width: auto;
}
header h1, header p { display: none; }
header .header-actions { display: flex; align-items: center; }
header .btn-carrito {
    background-color: var(--color-primario);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500; 
    transition: background-color 0.2s;
    display: inline-block;
}
header .btn-carrito:hover { background-color: var(--color-primario-hover); }

/* =========================================
   3. NAVEGACIÓN Y FILTROS (Escritorio)
   ========================================= */
.filter-nav {
    text-align: center;
    padding: 15px 10px;
    background-color: var(--color-superficie);
    border-bottom: 1px solid var(--color-borde);
    position: sticky;
    top: var(--header-height-desktop); 
    z-index: 899;
    white-space: nowrap;
    overflow-x: auto;
}
.filter-nav::-webkit-scrollbar { display: none; }
.filter-btn {
    display: inline-flex; 
    align-items: center;
    gap: 8px;
    color: var(--color-texto-secundario);
    background-color: var(--color-borde);
    padding: 8px 16px;
    border-radius: 20px; 
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9em;
    margin: 0 5px;
    transition: all 0.2s;
}
.filter-btn:hover { background-color: #555; color: #fff; }
.filter-btn.active { background-color: var(--color-primario); color: #fff; box-shadow: 0 0 10px rgba(230, 0, 0, 0.5); }

/* Ocultos en PC */
.filter-mobile-container, .mobile-toolbar { display: none; }

/* Buscador (Escritorio) */
.product-search-container { margin: 20px auto 10px auto; max-width: 600px; padding: 0 20px; }
.search-wrapper { position: relative; }
.search-wrapper input { width: 100%; padding: 12px 15px 12px 45px; border-radius: 25px; border: 1px solid var(--color-borde); background-color: var(--color-superficie); color: var(--color-texto-principal); font-family: 'Poppins', sans-serif; font-size: 1em; box-sizing: border-box; }
.search-wrapper .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--color-texto-secundario); }

/* =========================================
   4. CATÁLOGO (Grid y Tarjetas)
   ========================================= */
.catalogo-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; 
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}
/* PC Grande: 5 Columnas */
@media (min-width: 1100px) {
    .catalogo-grid { grid-template-columns: repeat(5, 1fr); }
}

.producto-card { border: 1px solid var(--color-borde); background: var(--color-superficie); color: #fff; border-radius: 8px; overflow: hidden; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.3); transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.producto-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(230, 0, 0, 0.25); }
.producto-card img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid var(--color-borde); }
.producto-card .card-content { padding: 10px 10px 5px 10px; flex-grow: 1; }
.producto-card h3 { font-size: 1.2em; margin: 0 0 5px 0; height: 40px; overflow: hidden; font-weight: 500; }
.producto-card .precio { font-size: 1.3em; font-weight: 700; color: var(--color-primario); margin: 0 0 5px 0; }
.producto-card .disponibilidad { padding: 5px 10px; border-radius: 15px; font-size: 0.9em; font-weight: 500; color: var(--color-texto-oscuro); margin-top: 10px; display: inline-block; }
.producto-card .dispo-inmediata { background-color: var(--color-verde); }
.producto-card .dispo-diferida { background-color: var(--color-amarillo); }
.producto-card .card-actions { padding: 10px; border-top: 1px solid var(--color-borde); margin-top: 5px; }
.producto-card button { background-image: linear-gradient(to top, var(--color-primario) 0%, #FF1A1A 100%); color: #fff; border: none; padding: 10px 15px; margin: 5px; border-radius: 5px; cursor: pointer; font-weight: 500; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.producto-card button:hover { background-image: linear-gradient(to top, #FF1A1A 0%, #E60000 100%); box-shadow: 0 4px 10px rgba(230, 0, 0, 0.4); transform: translateY(-2px); }
.producto-card button.btn-anadido-exito { background-image: none; background-color: var(--color-verde); color: var(--color-texto-oscuro); transform: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.producto-card .btn-detalles { background-image: none; background-color: transparent; border: 1px solid var(--color-primario); color: var(--color-primario); box-shadow: none; }
.producto-card .btn-detalles:hover { background-color: var(--color-primario); color: #fff; transform: none; box-shadow: none; }

/* =========================================
   5. MODALES (Ver Detalles y Mini Carrito)
   ========================================= */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); display: none; justify-content: center; align-items: center; z-index: 1000; }
.modal-overlay.show { display: flex; }
.modal-content { background-color: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 10px; padding: 25px; width: 90%; max-width: 600px; box-shadow: 0 5px 20px rgba(0,0,0,0.5); position: relative; max-height: 80vh; overflow-y: auto; }
.modal-close { position: absolute; top: 10px; right: 15px; font-size: 2.5em; font-weight: bold; color: var(--color-texto-secundario); background: none; border: none; cursor: pointer; line-height: 1; }
.modal-close:hover { color: #fff; }

/* Estilos internos del modal */
#modal-body h3 { font-size: 2em; margin: 0; color: var(--color-texto-principal); font-weight: 700; text-align: center; }
#modal-body .precio { font-size: 1.5em; font-weight: 700; margin: 10px 0; color: var(--color-primario); text-align: center; display: block; }
#modal-body .descripcion { font-size: 1em; color: var(--color-texto-secundario); border-top: 1px solid var(--color-borde); padding-top: 15px; margin-top: 10px; line-height: 1.6; }
#modal-body .modal-actions { text-align: center; margin-top: 20px; }
#modal-body .btn-add-carrito-modal { background-image: linear-gradient(to top, var(--color-primario) 0%, #FF1A1A 100%); color: #fff; border: none; padding: 12px 30px; border-radius: 5px; cursor: pointer; font-weight: 600; font-size: 1.1em; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
#modal-body .btn-add-carrito-modal:hover { background-image: linear-gradient(to top, #FF1A1A 0%, #E60000 100%); transform: translateY(-2px); }
#modal-body .btn-add-carrito-modal.btn-anadido-exito { background-image: none; background-color: var(--color-verde); color: var(--color-texto-oscuro); transform: none; }

/* Mini Carrito */
.mini-cart { max-width: 380px; margin: 10% auto; display: flex; flex-direction: column; width: 90%; }
#mini-cart-body { flex-grow: 1; overflow-y: auto; max-height: 40vh; }
.cart-empty-msg { text-align: center; color: var(--color-texto-secundario); padding: 30px 0; }
#mini-cart-footer { border-top: 2px solid var(--color-primario); padding-top: 15px; margin-top: 15px; }
.mini-cart-total { display: flex; justify-content: space-between; font-size: 1.3em; font-weight: 700; margin-bottom: 15px; }
#btn-finalizar-compra { text-align: center; text-decoration: none; display: block; width: 80%; max-width: 300px; margin: 0 auto; background-image: linear-gradient(to top, var(--color-primario) 0%, #FF1A1A 100%); color: #fff; padding: 12px; border-radius: 5px; font-weight: 600; }
#btn-finalizar-compra.disabled { background-image: none; background-color: var(--color-borde); opacity: 0.7; cursor: not-allowed; }
.mini-cart-item { list-style: none; display: flex; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--color-borde); }
.mini-cart-item img { width: 60px; height: 60px; object-fit: cover; border-radius: 5px; }
.mini-cart-details { flex-grow: 1; }
.mini-cart-details .item-name { font-weight: 500; font-size: 1em; }
.mini-cart-details .item-price { font-size: 0.9em; color: var(--color-texto-secundario); }
.mini-cart-details .item-quantity { margin-top: 5px; }

/* =========================================
   6. CARRITO COMPLETO (CHECKOUT)
   ========================================= */
.checkout-container { max-width: 1000px; margin: 30px auto; padding: 20px; }
.back-to-store { color: var(--color-primario); text-decoration: none; font-weight: 500; display: inline-block; margin-bottom: 20px; }
.back-to-store:hover { text-decoration: underline; }
.checkout-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 20px; }
.order-summary, .payment-form { background-color: var(--color-superficie); border: 1px solid var(--color-borde); border-radius: 8px; padding: 25px; }
.order-summary h3, .payment-form h3 { color: var(--color-primario); margin-top: 0; border-bottom: 1px solid var(--color-borde); padding-bottom: 10px; font-weight: 500; font-size: 1.4em; }
.cart-item-list { list-style: none; padding: 0; margin: 0; }
.cart-item-list li { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid var(--color-borde); }
.cart-item-list li:last-child { border-bottom: none; margin-bottom: 0; }
.cart-item-img { width: 60px; height: 60px; object-fit: cover; border-radius: 5px; }
.cart-item-details { display: flex; flex-direction: column; flex-grow: 1; }
.cart-item-details .item-name { font-weight: 500; font-size: 1em; }
.cart-item-details .item-price { color: var(--color-texto-secundario); font-size: 0.9em; }
.cart-total { border-top: 2px solid var(--color-primario); padding-top: 15px; margin-top: 20px; display: flex; justify-content: space-between; font-size: 1.3em; }
.cart-total strong, .cart-total span { font-weight: 700; }
.payment-instructions { list-style: none; padding: 10px 15px; background-color: var(--color-fondo); border-radius: 5px; margin-bottom: 25px; }
.payment-instructions li { margin: 5px 0; }

/* Formularios */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: var(--color-texto-secundario); }
.form-group input[type="text"], .form-group input[type="tel"], .form-group input[type="file"] { width: 100%; padding: 12px; background-color: var(--color-fondo); border: 1px solid var(--color-borde); color: var(--color-texto-principal); border-radius: 5px; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
.form-group input[type="file"] { color: var(--color-texto-secundario); }
.btn-confirm-payment { width: 100%; padding: 15px; font-size: 1.1em; font-weight: 500; background-image: linear-gradient(to top, var(--color-primario) 0%, #FF1A1A 100%); color: #fff; border: none; border-radius: 5px; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.btn-confirm-payment:hover { background-image: linear-gradient(to top, #FF1A1A 0%, #E60000 100%); box-shadow: 0 4px 10px rgba(230, 0, 0, 0.4); transform: translateY(-2px); }

/* Controles de Cantidad */
.item-quantity { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.item-quantity span { font-weight: 500; min-width: 20px; text-align: center; }
.btn-qty { background-color: var(--color-borde); color: #fff; border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1.2em; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; }
.btn-qty:hover { background-color: var(--color-primario); }
.item-subtotal { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.item-subtotal span { font-weight: 700; font-size: 1.1em; }
.btn-eliminar-item { background: none; border: none; color: var(--color-texto-secundario); font-size: 1.5em; cursor: pointer; padding: 5px; }
.btn-eliminar-item:hover { color: var(--color-primario); }

/* Cuentas Bancarias (Tarjetas) */
.bank-accounts-list { display: flex; flex-direction: column; gap: 10px; }
.bank-card { background-color: var(--color-fondo); border: 1px solid var(--color-borde); border-radius: 8px; padding: 15px; display: flex; justify-content: space-between; align-items: center; }
.bank-name { font-weight: 700; color: var(--color-texto-principal); text-transform: uppercase; font-size: 0.9em; }
.bank-number { font-family: 'Poppins', sans-serif; font-size: 1.2em; font-weight: 700; color: var(--color-info); }
.bank-holder { font-size: 0.85em; color: var(--color-texto-secundario); }
.btn-copy { background-color: var(--color-superficie); border: 1px solid var(--color-borde); color: var(--color-texto-principal); width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2em; transition: all 0.2s; }
.btn-copy:hover { background-color: var(--color-primario); color: #fff; border-color: var(--color-primario); }
.btn-copy:active { transform: scale(0.95); }

/* =========================================
   7. MARKETING Y FOOTER
   ========================================= */
.carousel-container { width: 100%; max-width: 1200px; margin: 30px auto 20px auto; overflow: hidden; border-radius: 8px; position: relative; aspect-ratio: 3 / 1; height: auto; }
.carousel-track { display: flex; width: 100%; height: 100%; transition: transform 0.5s ease-in-out; }
.carousel-slide { min-width: 100%; height: 100%; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; display: block; }

.testimonials-section { margin-top: 40px; text-align: center; }
.testimonials-scroll-container { display: flex; gap: 15px; overflow-x: auto; padding: 20px 5px; justify-content: flex-start; scrollbar-width: none; }
.testimonial-capture { flex: 0 0 auto; width: 180px; background: var(--color-superficie); border-radius: 10px; padding: 5px; border: 1px solid var(--color-borde); text-align: center; }
.testimonial-capture img { width: 100%; height: 320px; object-fit: cover; border-radius: 8px; }
.testimonial-capture p { margin: 5px 0 0 0; font-size: 0.85em; color: var(--color-texto-secundario); font-weight: 500; }

.features-section { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 30px 20px; background-color: var(--color-superficie); margin: 20px 0; border-radius: 8px; border: 1px solid var(--color-borde); }
.feature-card { text-align: center; padding: 15px; }
.feature-icon { font-size: 2.5em; color: var(--color-primario); margin-bottom: 10px; display: block; }
.feature-title { font-weight: 700; color: #fff; margin-bottom: 5px; display: block; }
.feature-desc { color: var(--color-texto-secundario); font-size: 0.9em; }

.faq-container { max-width: 900px; margin: 40px auto; padding: 20px; }
.faq-item { background-color: var(--color-superficie); border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--color-borde); }
.faq-question { padding: 20px; font-weight: 500; cursor: pointer; list-style: none; position: relative; }
.faq-question::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5em; color: var(--color-primario); }
.faq-item[open] .faq-question::after { content: '−'; transform: translateY(-50%); }
.faq-answer { padding: 20px; border-top: 1px solid var(--color-borde); color: var(--color-texto-secundario); }
.footer { background-color: var(--color-superficie); border-top: 1px solid var(--color-borde); padding: 20px; text-align: center; color: var(--color-texto-secundario); font-size: 0.9em; margin-top: 40px; }
.btn-whatsapp-footer { display: inline-flex; align-items: center; gap: 10px; background-color: #25D366; color: #fff; padding: 10px 20px; border-radius: 25px; text-decoration: none; font-weight: 700; margin-top: 10px; }

/* --- Botones Flotantes (CORREGIDO) --- */
.float-whatsapp { 
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 50px; /* Antes 55px */
    height: 50px; /* Antes 55px */
    background-color: #25D366; 
    color: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.6em; /* Ajustado al nuevo tamaño */
    text-decoration: none; 
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4); 
    z-index: 2000; 
    transition: transform 0.3s; 
    overflow: visible; 
}
.float-whatsapp:hover { transform: scale(1.05); }

.whatsapp-label { 
    position: absolute; 
    bottom: 60px; /* Ajustado para el botón más pequeño */
    right: 0; 
    background-color: #fff; 
    color: #444; 
    padding: 4px 8px; /* Menos relleno */
    border-radius: 12px; 
    font-size: 10px !important; /* Letra más pequeña */
    font-weight: 600; 
    text-align: center; 
    white-space: nowrap; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); 
    line-height: 1.2; /* Líneas más pegadas */
    pointer-events: none; 
    opacity: 0.95; 
    animation: floatBubble 3s infinite ease-in-out; 
}
.whatsapp-label::after { 
    content: ''; 
    position: absolute; 
    bottom: -5px; 
    right: 20px; /* Centrado visualmente */
    border-width: 5px 5px 0; 
    border-style: solid; 
    border-color: #fff transparent transparent transparent; 
}

@keyframes floatBubble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.float-scroll-top { 
    position: fixed; 
    bottom: 135px; /* SUBIDO de 110px a 135px para evitar choque */
    right: 27px; 
    width: 36px; /* Reducido de 40px */
    height: 36px; 
    background-color: rgba(40, 40, 40, 0.8); 
    color: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.1em; 
    text-decoration: none; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
    z-index: 1990; 
    transition: all 0.3s ease; 
    border: 1px solid rgba(255,255,255,0.1); 
    cursor: pointer; 
    opacity: 0; 
    transform: translateY(10px); 
    pointer-events: none; 
}
.float-scroll-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.float-scroll-top:hover { background-color: var(--color-primario); }
/* -------------------------------------------------
 * --- Modal de Zoom (Lightbox Profesional) ---
 * -------------------------------------------------
 */
#modal-testimonio-zoom {
    z-index: 3000 !important; /* Siempre encima de todo */
    background-color: rgba(0, 0, 0, 0.95); /* Fondo casi negro */
    display: none;
    justify-content: center;
    align-items: center;
}

/* Botón Cerrar (Fijo en la pantalla) */
#modal-testimonio-zoom .modal-close {
    position: fixed; /* ¡Clave! Fijo a la ventana, no a la imagen */
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3002;
    text-decoration: none;
    line-height: 1;
    transition: background 0.3s;
}
#modal-testimonio-zoom .modal-close:hover {
    background-color: rgba(230, 0, 0, 0.8); /* Rojo al pasar el mouse */
    border-color: #E60000;
}

/* Contenedor interno */
.modal-content-zoom {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* Permitir clic a través en áreas vacías */
}

/* La imagen o video */
#contenido-testimonio-zoom img, 
#contenido-testimonio-zoom video {
    max-width: 95vw; /* Máximo 95% del ancho de la pantalla */
    max-height: 85vh; /* Máximo 85% del alto de la pantalla */
    width: auto;
    height: auto;
    object-fit: contain; /* Asegura que se vea completo */
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0,0,0,0.8);
    pointer-events: auto; /* Reactivar clics en la imagen */
}

/* Icono de Play en miniatura (Tienda) */
.play-icon-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: rgba(255,255,255,0.9);
    pointer-events: none;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.5));
}
.testimonial-capture { cursor: pointer; position: relative; }

/* =========================================
   8. RESPONSIVIDAD MÓVIL
   ========================================= */
@media (max-width: 768px) {
    header { padding: 5px 15px; flex-direction: row; height: var(--header-height-mobile); }
    header .header-actions { position: static; margin-top: 0; }
    header .logo-container img { max-height: 35px; }
    header .btn-carrito { padding: 8px 12px; font-size: 0.85em; }

    .filter-nav { display: none; }
    .mobile-toolbar { display: flex; gap: 10px; padding: 10px 15px; background-color: var(--color-superficie); border-bottom: 1px solid var(--color-borde); position: sticky; top: var(--header-height-mobile); z-index: 899; }
    .mobile-search-box { flex: 1; position: relative; }
    .mobile-search-box input { width: 100%; padding: 10px 10px 10px 35px; border-radius: 20px; border: 1px solid var(--color-borde); background-color: var(--color-fondo); color: var(--color-texto-principal); font-size: 0.9em; box-sizing: border-box; }
    .mobile-search-box i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--color-texto-secundario); }
    .mobile-filter-box { flex: 1; display: flex; }
    .filter-select { width: 100%; padding: 10px 5px; border-radius: 20px; background-color: var(--color-borde); color: var(--color-texto-principal); border: none; font-size: 0.9em; text-align: center; }

    h2 { font-size: 1.5em; margin-top: 15px; }
    h2.catalogo-titulo { margin-top: 15px; }

    .catalogo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px; }
    .producto-card img { height: 100px; }
    .producto-card .card-content { padding: 5px; }
    .producto-card h3 { font-size: 0.85em; height: 36px; margin-bottom: 3px; line-height: 1.2; }
    .producto-card .precio { font-size: 0.95em; margin: 0; }
    .producto-card .disponibilidad { display: none; }
    .producto-card .card-actions { padding: 5px; display: flex; flex-direction: column; gap: 5px; }
    .producto-card button { padding: 5px; margin: 0; font-size: 0.75em; width: 100%; }

    /* Checkout en móvil: 1 columna */
    .checkout-layout { grid-template-columns: 1fr; }
    .cart-item-list li { flex-wrap: wrap; }
    .cart-item-details { flex-basis: 100%; order: 1; margin-bottom: 5px; }
    .cart-item-img { order: 2; }
    .item-subtotal { order: 3; margin-left: auto; }
    
    .carousel-container { aspect-ratio: 3/1; height: auto; margin-top: 15px; }
    .testimonial-capture { width: 140px; }
    .testimonial-capture img { height: 250px; }
    .toast-notification { width: 90%; left: 5%; bottom: 10px; }

    .float-whatsapp { 
        width: 45px; 
        height: 45px; 
        font-size: 1.5em; 
        bottom: 15px; 
        right: 15px; 
    }
    .whatsapp-label { 
        bottom: 55px; /* Pegado justo encima del botón */
        font-size: 9px !important; /* Letra pequeña */
        padding: 3px 7px; 
        right: -5px; /* Ajuste horizontal leve */
    }
    .float-scroll-top { 
        width: 32px; /* Más pequeño */
        height: 32px; 
        font-size: 1em; 
        bottom: 125px; /* SUBIDO para que no toque el texto de whatsapp */
        right: 22px; 
    }
}

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