body { font-family: 'Inter', sans-serif; overflow-x: hidden; }
        
        .hero-gradient { 
            background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                        url('https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?auto=format&fit=crop&q=80&w=1920');
            background-size: cover;
            background-position: center;
        }

    .product-item {
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

        .bg-earth { background-color: #4a5d4e; }
        .bg-brand-brown { background-color: #8c7355; }
        .text-earth { color: #4a5d4e; }
        .text-brand-brown { color: #83807c; }
        .bg-cream { background-color: #fdfaf5; }
        
        .filter-btn { transition: all 0.3s ease; }
        .filter-btn.active { background-color: #8c7355; color: white; border-color: #8c7355; }

        /* Estilos del Modal */
        #product-modal { transition: opacity 0.3s ease; }
        .modal-content { transform: scale(0.95); transition: transform 0.3s ease; }
        #product-modal.active .modal-content { transform: scale(1); }

        /* Animación flecha */
        @keyframes bounce-slow {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
            40% { transform: translateY(-10px) translateX(-50%); }
            60% { transform: translateY(-5px) translateX(-50%); }
        }
        .scroll-hint { animation: bounce-slow 2s infinite; }
        /* Animación de aparición suave para el globo */
#wa-bubble {
    animation: fadeInUp 0.5s ease-out;
}
@media (max-width: 768px) {
    /* Buscamos el div que envuelve la imagen del logo */
    nav div.flex.items-center.space-x-4 {
        justify-content: flex-start !important; /* Lo pega a la izquierda */
        width: auto !important;
        margin-right: auto !important; /* Empuja todo lo demás a la derecha */
    }

    header img, nav img {
        margin-left: 0 !important; /* Asegura que no tenga margen extra */
    }
}
@media (max-width: 768px) {
    /* Movemos el contenedor completo (Lupa + Caja) */
    .search-container {
        order: 2 !important;
        flex: 0 0 55% !important; /* El tamaño que querías */
        margin-left: auto !important;
        position: relative !important;
    }

    /* Aseguramos que la lupita se quede adentro a la izquierda */
    .search-container svg {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10;
        width: 14px !important; /* Ajusta el tamaño de la lupa */
        height: 14px !important;
    }

    /* El input ahora debe ocupar el 100% de SU contenedor */
    #search-input {
        width: 100% !important;
        padding-left: 30px !important; /* Espacio para que el texto no tape la lupa */
        height: 30px !important;
        font-size: 11px !important;
    }
    
}
@media (max-width: 768px) {
    /* 1. PROTEGEMOS EL ENCABEZADO */
    /* Evitamos que el logo y buscador se amontonen */
    header div.flex, nav div.flex {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }

    /* 2. AREA DE PRODUCTOS (Solo esto se vuelve columna) */
    /* Usamos el ID o la clase específica del contenedor de productos */
    main > div.flex.flex-col.md\:flex-row {
        display: block !important;
        height: auto !important;
    }

    /* 3. FILTROS EN HORIZONTAL (Scroll lateral) */
    /* Seleccionamos el div exacto de los botones para que no sea vertical */
    aside div.flex.flex-col {
        display: flex !important;
        flex-direction: row !important; /* <--- Esto los pone horizontales */
        overflow-x: auto !important;    /* <--- Permite el scroll */
        gap: 10px !important;
        padding: 10px 0 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* 4. EL CUADRO CREMA (Aside): Matamos el espacio gigante */
    aside {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        background-color: #fdfaf5 !important;
        padding: 0px 0px !important;
        margin-bottom: 0 !important;
    }

    /* 5. TITULO CATEGORÍAS */
    aside h2, aside span {
        display: block !important;
        font-size: 11px !important;
        margin: 5px 0 !important;
    }

    /* 6. GRID DE PRODUCTOS: 2 columnas y subimos el bloque */
    #product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        margin-top: 0 !important;
        padding-top: 5px !important;
    }

    /* Aseguramos que los botones no se encojan */
    aside div.flex.flex-col button, 
    aside div.flex.flex-col a {
        flex: 0 0 auto !important;
    }
}
@media (max-width: 768px) {
    /* 1. Forzamos al aside a no dejar margen abajo */
    aside {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 2. EL CONTROL REMOTO: Esto sube las imágenes */
    #product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        
        /* Ajusta este número: más negativo = más arriba */
        margin-top: -30px !important; 
        
        padding-top: 0 !important;
        position: relative !important;
        z-index: 50 !important;
    }

    /* 3. Ajuste opcional por si el contenedor de los botones tiene padding */
    aside div.flex.flex-col {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}
@media (max-width: 768px) {
    /* Forzamos al contenedor negro a ignorar todo y cubrir la pantalla completa */
    #product-modal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important; /* Valor extremo para pasar sobre el buscador */
        padding: 0 !important; /* Eliminamos márgenes que lo hacían ver delgado */
        background-color: rgba(0, 0, 0, 0.95) !important;
    }

    /* El cuadro blanco ahora ocupará el ancho total para ser más legible */
    .modal-content {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        border-radius: 0 !important; /* Estética de pantalla completa */
        display: flex;
        flex-direction: column;
    }

    /* Ajuste de imagen para que no empuje el texto fuera de la pantalla */
    #modal-img {
        height: 450px !important; 
        width: 400% !important;
        object-fit: cover !important;
    }
}
/* Ajustes exclusivos para Móvil */
@media (max-width: 767px) {
    /* Hacemos que el modal tenga más espacio lateral y sea scrolleable si el contenido es largo */
    #product-modal .modal-content {
        width: 95% !important;
        max-height: 90vh;
        overflow-y: auto;
        padding: 1.5rem !important;
    }

    /* Ajustamos el tamaño del título del producto para que no se vea gigante */
    #product-modal h2, 
    #product-modal .text-3xl { 
        font-size: 1.5rem !important; /* Un tamaño más manejable en móvil */
        line-height: 1.2;
    }

    /* Ajustamos la imagen dentro del modal para que no empuje el texto hacia afuera */
    #product-modal img {
        max-height: 250px;
        object-fit: contain;
        margin-bottom: 1rem;
    }

    /* Si tienes una cuadrícula de detalles (medidas, color), que se ponga en una sola columna */
    .grid-details {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}
@media (max-width: 767px) {
    /* El contenedor principal del modal blanco */
    #product-modal > div {
        flex-direction: column; /* Pone la imagen arriba y el texto abajo */
        width: 95% !important;
        max-height: 90vh; /* Que no sea más alto que el celular */
        overflow-y: auto; /* Permite hacer scroll si el texto es largo */
        margin: 10px;
        background-color: white; /* Asegúrate que tenga fondo */
        border-radius: 8px;
    }

    /* Bajamos el tamaño del título solo en móvil */
    #modal-title {
        font-size: 1.25rem !important;
        line-height: 1.2;
    }
}
/* --- CAMBIOS EXCLUSIVOS PARA MÓVIL (No afectan a la PC) --- */
@media (max-width: 767px) {
    /* 1. Elevamos el modal y le damos espacio para que no lo tape el header */
    #product-modal {
        z-index: 9999 !important;
        align-items: flex-start !important; /* Lo pega arriba en vez de centrarlo */
        padding-top: 85px !important;      /* El espacio exacto para que baje del logo Homing */
        overflow-y: auto !important;       /* Permite scrollear si el texto es largo */
    }

    /* 2. Transformamos el contenedor blanco a vertical */
    #product-modal > div {
        flex-direction: column !important; /* Imagen arriba, texto abajo */
        width: 92% !important;
        margin: 0 auto 40px auto !important;
        height: auto !important;
        max-height: none !important;
    }

    /* 3. Ajustamos la imagen para que no sea gigante en móvil */
    #product-modal div.md\:w-3\/5 {
        width: 100% !important;
        height: 250px !important; /* Altura fija para que el texto sea visible rápido */
    }

    /* 4. Ajustamos el texto para que respire mejor */
    #product-modal div.md\:w-2\/5 {
        width: 100% !important;
        padding: 20px !important;
    }

    /* 5. Título más pequeño para que quepa en una línea */
    #modal-title {
        font-size: 1.3rem !important;
        line-height: 1.2 !important;
    }
}
@media (max-width: 767px) {
    /* Esto hace que los botones fluyan hacia la derecha sin saltar de línea */
    #sub-filtros-cielo, 
    .contenedor-filtros-movil { 
        display: none; /* El JS se encarga de cambiarlo a flex */
        flex-direction: row !important; /* Fuerza la línea horizontal */
        flex-wrap: nowrap !important;   /* Prohíbe que los botones se bajen */
        overflow-x: auto !important;    /* Activa el deslizamiento lateral */
        gap: 10px;
        padding: 5px 0 15px 0;
        -webkit-overflow-scrolling: touch;
    }

    /* Ocultamos la barrita de scroll para que se vea estético */
    #sub-filtros-cielo::-webkit-scrollbar {
        display: none;
    }
}
@media (max-width: 768px) {
    /* El contenedor de botones principal */
    aside .flex.flex-col, 
    .contenedor-filtros-movil {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding: 5px 10px !important;
    }

    #sub-filtros-cielo:not(.hidden) {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;           /* Fuerza a que use todo el ancho horizontal */
    margin-top: 12px !important;      /* Empuja las letras A, B, C, D un poco hacia abajo de Cielo Raso */
    overflow-x: auto !important;      /* Si no caben a lo ancho, permite deslizar horizontalmente */
    padding-bottom: 5px !important;
}
    /* Aseguramos que los botones no se encojan */
    aside button, #sub-filtros-cielo button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}
/* Este código solo se ejecuta en teléfonos (pantallas menores a 768px) */
@media (max-width: 767px) {
    #inicio {
        height: 480px !important; /* Ajusta este número si quieres que sea más alto o bajo */
        min-height: 300px !important;
        max-height: 300px !important;
    }

    /* Opcional: Ajusta el tamaño del texto para que no se vea gigante en el espacio pequeño */
    #inicio h1, #inicio .text-xl {
        font-size: 1rem !important;
        line-height: 6.2;
    }
    /* Agrega esto adentro del @media */
    #inicio > div {
        padding-top: 60px !important; /* Controla la distancia desde el menú */
    }
}
@media (max-width: 767px) {
    #inicio {
        height: 480px !important; 
        min-height: 300px !important;
        max-height: 400px !important;
    }

    #inicio h1, #inicio .text-xl {
        font-size: 1rem !important;
        line-height: 5.2;
    }

    /* 🔥 Pega esto aquí para subir el filtro en el móvil */
    #productos {
        padding-top: 0px !important; /* Quita el gran espacio blanco de arriba */
    }
}

/* =======================================================
   POSICIONAMIENTO PERFECTO DE LOS 4 SUBFILTROS EN MÓVIL
   ======================================================= */
@media (max-width: 768px) {
    /* Mantenemos la barra principal con scroll lateral limpio */
    .contenedor-filtros-movil, 
    aside div.flex.flex-col {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        position: relative !important;
        padding-bottom: 50px !important; /* ¡CLAVE! Abre el espacio rojo exacto abajo para los 4 botones */
    }

    /* Forzamos a los subfiltros a vivir en el espacio creado */
    #sub-filtros-cielo:not(.hidden) {
        display: flex !important;
        position: absolute !important;   /* Lo saca de la fila y lo deja flotar abajo */
        left: 0 !important;
        bottom: 5px !important;          /* Lo posiciona exactamente en tu recuadro rojo */
        width: 100% !important;          /* Ocupa todo el ancho disponible */
        justify-content: center !important; /* Alinea los 4 botones bien centrados */
        gap: 9px !important;            /* Separación perfecta entre los 4 */
        margin: 0 !important;
        padding: 0 10px !important;
        background: transparent !important;
    }

    /* Aseguramos que los 4 botones mantengan su forma de óvalo */
    #sub-filtros-cielo button {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}
/* 1. CONTROL MANUAL DEL CONTENEDOR DE FILTROS */
    aside {
        position: sticky !important;
        top: 100px !important;       /* Pegado al menú de Homing */
        z-index: 100 !important;    
        background-color: #fdfaf5 !important; 
        overflow: visible !important; /* Crucial para que no te mutile los 4 subfiltros */
        
        /* 🔥 TU CONTROL REMOTO MANUAL (Ajusta estos píxeles) */
        height: 100px !important;      /* Modifica este número para estirar o encoger la caja crema */
        padding-bottom: 0 !important;  /* Limpiamos paddings viejos para que no te alteren la altura */
    }
    /* =======================================================
   REPARACIÓN DE VISTA PC (RESTAURAR DISEÑO ORIGINAL)
   ======================================================= */
@media (min-width: 769px) {
    /* 1. Limpiamos por completo el aside en computadoras */
    aside {
        position: relative !important;
        top: 0 !important;
        height: auto !important;
        background-color: transparent !important;
        z-index: 1 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
    }

    /* 2. Aseguramos que la cuadrícula de productos en PC no tenga márgenes locos */
    #product-grid {
        position: relative !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        z-index: 1 !important;
    }

    /* 3. Nos aseguramos de que el contenedor de subfiltros no flote en PC */
    #sub-filtros-cielo {
        position: relative !important;
        margin-left: 0 !important;
        top: auto !important;
        bottom: auto !important;
        width: auto !important;
    }
}
/* =======================================================
   ESTILO DE BOTONES: TONOS CAFÉ EN CONTRASTE
   ======================================================= */

/* 1. Botones en estado normal: Café claro suave */
aside button, 
.contenedor-filtros-movil button {
    background-color: #f3ece4 !important; /* Un café claro/crema hermoso que contrasta con el fondo */
    color: #5c4d42 !important;            /* Texto en café oscuro para que sea perfectamente legible */
    border: 1px solid #e6dad0 !important;  /* Un borde sutil para darles volumen */
    transition: all 0.3s ease !important;  /* Transición suave al tocarlos o pasar el mouse */
}

/* 2. El botón "Todos" y cualquier botón seleccionado (Activo) */
aside button.active, 
.contenedor-filtros-movil button.active,
aside button[active], 
.contenedor-filtros-movil button[active] {
    background-color: #8c6f56 !important; /* El café oscuro original que ya tienes en tu foto */
    color: #ffffff !important;            /* Texto en blanco para resaltar */
    border-color: #8c6f56 !important;
}

/* 3. Efecto al pasar el mouse por encima (Solo PC) */
@media (min-width: 769px) {
    aside button:hover {
        background-color: #d9cbbe !important; /* Un café intermedio cuando el usuario pasa el mouse */
        color: #5c4d42 !important;
    }
}
/* =======================================================
   SOLUCIÓN: DESFASE DE SCROLL PARA QUE NO SE TAPE EL FILTRO
   ======================================================= */
/* Buscaremos el contenedor principal del catálogo (cambia 'aside' por el ID o clase de tu sección si es necesario) */
aside {
    scroll-margin-top: 500px !important; /* El truco mágico: frena el salto 100px antes para que no se tape */
}

/* Por si acaso tu sección entera o el contenedor de productos tiene un ID específico que recibe el clic del menú, agrégalo también: */
#productos, .seccion-productos {
    scroll-margin-top: 100px !important;
}
/* 🔥 OCULTAR LA BARRITA GRIS DE SCROLL EN CELULARES */
@media (max-width: 768px) {
    /* Seleccionamos el mismo div de tu foto */
    aside div.flex.flex-col {
        -webkit-overflow-scrolling: touch; /* Hace que el deslizamiento con el dedo sea súper suave */
    }

    /* Oculta la barra en Chrome, Safari, Edge y navegadores modernos */
    aside div.flex.flex-col::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Oculta la barra en Firefox */
    aside div.flex.flex-col {
        scrollbar-width: none !important;
    }
}
/* 🔥 REACTIVAR CLICS Y DETALLES EN LAS TARJETAS EN MÓVIL */
    #product-grid, 
    .producto-card, 
    .btn-detalles, /* Cambia esto por la clase real de tu botón de detalles si usas otra */
    .product-card button {
        pointer-events: auto !important; /* Fuerza al navegador a permitir clics/toques */
        cursor: pointer !important;
    }

    /* Nos aseguramos de que ninguna caja invisible de filtros se quede encima flotando */
    aside {
        pointer-events: none !important; /* El fondo del aside no estorba... */
    }
    aside button, aside div.flex {
        pointer-events: auto !important; /* ...pero tus botones de filtro SÍ se pueden tocar */
    }
    /* =======================================================
   REDUCIR IMAGEN DEL MODAL DE DETALLES (SOLO EN MÓVIL)
   ======================================================= */
@media (max-width: 768px) {

    /* Seleccionamos la imagen que está adentro de tu ventana de detalles */
    .modal-content img, 
    #modal-detalles img, /* Cambia estos IDs/clases por los que tenga tu estructura */
    .popup-detalles img {
        /* 1. Forzamos un tamaño máximo de altura más pequeño para que quepa en la pantalla */
        max-height: 320px !important; 
        width: auto !important; /* Que el ancho se ajuste de forma proporcional */
        
        /* 2. El truco de oro: la obliga a encajar completa sin recortar nada */
        object-fit: contain !important; 
        
        /* 3. Centramos la imagen por si acaso */
        margin: 0 auto 15px auto !important;
        display: block !important;
    }
}
/* 🔥 SEPARACIÓN DEL TÍTULO Y TEXTOS EN EL MODAL MÓVIL */
    .modal-content h2, 
    .modal-content .titulo-detalle, /* Usa la clase o etiqueta exacta de tu título */
    #modal-detalles h3 {
        /* 1. Forzamos un margen arriba para empujar las letras hacia abajo de la foto */
        margin-top: 45px !important; 
        
        /* 2. Ajustamos un poco el espacio entre líneas para que respire si el título es largo */
        line-height: 1.4 !important; 
        
        /* 3. Margen abajo para que no choque con la descripción */
        margin-bottom: 15px !important; 
        
        display: block !important;
    }

    /* Si necesitas separar también el texto de la descripción que va abajo */
    .modal-content p {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
    }