.banner-custom-info {
    background-image: url('../images/bannerfinalnosotros.jpg'); 
    background-size: cover;
    background-position: center;
    background-color: #000;
    padding: 30px 0;
    color: #fff;
    font-family: 'Inter', sans-serif;
    border-top: 2px solid #111;
}

.banner-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.banner-col-text, .banner-col-stats, .banner-col-cta {
    flex: 1;
}


.banner-col-text { text-align: left; }
.banner-col-stats { text-align: center; }
.banner-col-cta { text-align: right; }


.title-nosotros {
    font-weight: 900;
    font-size: 32px;
    line-height: 0.9;
    margin: 0;
    text-transform: uppercase;
}

.stat-number {
    font-size: 46px;
    font-weight: 900;
    display: block;
    line-height: 1;
}

.stat-desc {
    font-size: 13px;
    margin-top: 5px;
    opacity: 0.9;
}

.cta-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
}


.highlight, .highlight-green {
    color: #00FF00;
}

@media (max-width: 768px) {
    .banner-flex {
        flex-direction: column;
        gap: 25px;
        padding: 20px;
    }
    .banner-col-text, .banner-col-cta { text-align: center; }
}

#TA_container [data-tag="12311"] {
    font-style: normal !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    background-color: #00FF00 !important; 
    color: #000000 !important;
    border-radius: 10px !important;
    border: none !important;
    padding: 15px 20px !important;
    display: flex !important;
    height: auto !important;
    min-height: 50px !important;
    width: 100% !important;
    opacity: 1 !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
}

#TA_container [data-tag="12311"] i, 
#TA_container [data-tag="12311"] svg {
    font-style: normal !important;
}

/* --- BOTÓN WHATSAPP CON TEXTO --- */
.js-btn-fixed-bottom.btn-whatsapp {
    width: auto !important;
    padding-left: 6px !important;
    padding-right: 18px !important;
    border-radius: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #307F2C !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.js-btn-fixed-bottom.btn-whatsapp svg {
    width: 35px !important;
    height: 35px !important;
}
/* Efecto de micro-interacción al hacer hover */
.js-btn-fixed-bottom.btn-whatsapp:hover {
    transform: scale(1.05) translateY(-3px) !important;
}

/* Inyección avanzada de contenido textual */
.js-btn-fixed-bottom.btn-whatsapp::after {
    content: "ATENCIÓN PERSONALIZADA";
    font-size: 11px;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    white-space: nowrap;
    text-transform: uppercase;
}

/* --- AJUSTES DE HEADER EN CELULAR --- */
@media (max-width: 768px) {
    /* Achicamos apenitas el input de búsqueda para que entre bien */
    .js-search-input { 
        height: 38px !important; 
        font-size: 13px !important; 
        border-radius: 20px !important;
        padding-left: 15px !important;
    }

    /* Le damos un margen mínimo al logo para que no se pegue al buscador */
    .head-logo-img { 
        max-width: 105px !important; 
        margin-right: 5px;
    }
}

/* --- ETIQUETA DE SIN STOCK --- */
.label-without-stock,
.item-label-without-stock,
.js-stock-label {
    background-color: #E60000 !important; /* Un rojo potente y deportivo */
    color: #FFFFFF !important; /* Texto blanco puro */
    font-weight: 200 !important; /* Misma negrita que venimos usando */
    border: none !important; /* Quitamos cualquier borde gris que pueda tener por defecto */
    text-transform: uppercase !important;
}

/* --- EFECTO HOVER EN PRODUCTOS (ZOOM + CARTEL) DEFINITIVO --- */

/* 1. Hacemos que el contenedor corte la imagen si se agranda, para no tapar lo de abajo */
.js-item-product .position-relative.d-block {
    overflow: hidden !important;
}


/* 4. Diseño del cartel "Ver Producto" */
.overlay-ver-producto {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #111111; 
    color: #ffffff; 
    font-weight: 200;
    font-size: 14px;
    letter-spacing: 0.5px;
    padding: 12px 15px;
    justify-content: space-between;
    align-items: center;
    border-top: 4px solid #333333;
    z-index: 99 !important; 
    
    /* Estado inicial: invisible y escondido más abajo */
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: all 0.3s ease-out !important;
    pointer-events: none; /* Evita que moleste si el usuario quiere clickear la foto */
}

/* 5. El cartel emerge suavemente hacia arriba al pasar el mouse */
.js-item-product:hover .overlay-ver-producto {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* 1. ESTRUCTURA CENTRAL: Volvemos a un ancho fijo pero adaptable */
#home-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    height: auto !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 !important;
    
    width: 90% !important;
    max-width: 420px !important; 
    
    max-height: 90vh !important;
    overflow-y: auto !important;
    
    display: flex !important;
    flex-direction: column !important;
    
    background-color: #111111 !important;
    border: none !important; 
    border-radius: 0px !important;
    z-index: 9999 !important;
    
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85) !important;
    
    /* ANIMACIÓN Y HACK ANTI-FANTASMA */
    opacity: 0 !important;
    visibility: hidden !important; /* Lo esconde de verdad */
    pointer-events: none !important; /* Permite que los clics pasen de largo hacia los productos */
    transition: all 0.4s ease-out !important;
}

/* Cuando el sistema activa el popup, lo volvemos tangible */
#home-modal.modal-show {
    opacity: 1 !important;
    visibility: visible !important; /* Vuelve a ser visible */
    pointer-events: auto !important; /* Vuelve a bloquear los clics del fondo */
}

/* 2. EL CONTENEDOR: Usamos CSS Grid para apilar matemáticamente sin que nada se pise */
#home-modal .modal-body {
    display: grid !important; 
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr auto auto !important; /* La magia: empuja el texto y el email hacia abajo de forma automática */
    padding: 0 !important; 
    margin: 0 !important;
    width: 100% !important;
}

/* TRUCO PREMIUM: Sombra en la base comprimida (Mantiene tu diseño oscuro intacto) */
#home-modal .modal-body::after {
    content: '' !important;
    grid-row: 1 / -1 !important;
    grid-column: 1 / -1 !important;
    align-self: end !important;
    height: 45% !important; 
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0) 100%) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* 3. LA IMAGEN: Fondo total de extremo a extremo */
#home-modal .modal-body img {
    grid-row: 1 / -1 !important;
    grid-column: 1 / -1 !important;
    width: 100% !important; 
    height: auto !important; 
    max-height: none !important; 
    object-fit: unset !important; 
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important; 
}

/* 4. EL TÍTULO: Siempre respetará su espacio sobre la caja de email */
#home-modal .modal-body h3 {
    grid-row: 2 / 3 !important; /* Se ubica en su propia fila */
    grid-column: 1 / -1 !important;
    position: relative !important;
    bottom: auto !important; /* Reseteamos los pixeles fijos que causaban el problema */
    left: auto !important;
    right: auto !important;
    width: 100% !important; 
    padding: 0 25px !important;
    margin: 0 0 15px 0 !important; /* 15px de aire SEGURO para que jamás toque la caja de email */
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: left !important;
    line-height: 1.2 !important;
    z-index: 3 !important; 
    box-sizing: border-box !important;
}

#home-modal .modal-body p {
    display: none !important; 
}

/* 5. EL EMAIL: Ubicado en la última fila, apoyado en el piso */
#home-modal .newsletter {
    grid-row: 3 / 4 !important; /* Última fila de la grilla */
    grid-column: 1 / -1 !important;
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    padding: 0 25px !important; 
    margin: 0 0 25px 0 !important; /* 25px de aire contra el piso de la foto */
    z-index: 3 !important;
    box-sizing: border-box !important;
}

/* Eliminamos márgenes fantasma del formulario que puedan arruinar la altura */
#home-modal .newsletter form {
    margin: 0 !important;
}

/* Caja de email sólida para máxima legibilidad */
#home-modal .newsletter input[type="email"] {
    background-color: #050505 !important; 
    border: 1px solid #333333 !important; 
    color: #ffffff !important;
    font-size: 13px !important;
    padding: 12px 15px !important;
    border-radius: 4px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 6. LA CRUZ */
#home-modal .modal-header {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 99999 !important; 
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

#home-modal .modal-close {
    margin: 0px !important;
}

#home-modal .js-modal-close svg {
    fill: #000000 !important;
    width: 18px !important;
    height: 18px !important;
    filter: drop-shadow(0px 0px 1px rgb(0, 0, 0)) !important;
}

/* --- BOTON FLOTANTE COMUNIDAD (GEMELO DE WHATSAPP) --- */

/* 1. Diseño base (Celular: Circular tipo píldora) */
.btn-flotante-comunidad {
    position: fixed !important;
    bottom: 15px !important; /* Alineado al nivel de WhatsApp */
    left: 15px !important; 
    z-index: 9998 !important; 
    background-color: #111111 !important; 
    color: #ffffff !important; 
    border: 1px solid #333333 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    margin-bottom: 0px !important;
    
    /* IGUALAMOS LA FORMA Y ANIMACIÓN AL WA */
    border-radius: 40px !important; /* Forma de Píldora */
    padding: 0px !important; /* Redondito en celular */
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, color 0.3s ease !important;
}

.icono-comunidad {
    width: 35px !important; /* Tamaño balanceado para igualar el peso visual del icono de WA */
    height: 35px !important;
    padding: 10px !important;
    transition: all 0.3s ease !important;
}

/* Ocultamos el texto en el celu y le copiamos la tipografía a WA */
.texto-comunidad {
    display: none !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-left: 0px !important;
}

/* 2. Efecto Hover (Idéntico a WhatsApp) */
.btn-flotante-comunidad:hover {
    transform: scale(1.05) translateY(-3px) !important; /* Crece y sube exactamente igual */
}

/* 3. Diseño expandido para Computadora */
@media (min-width: 768px) {
    .btn-flotante-comunidad {
        /* Padding asimétrico similar a WA para darle espacio al texto manteniendo la píldora */
        padding: 0px 18px 0px 2px !important
    }
    
    .texto-comunidad {
        display: block !important; 
    }
}

/* --- ARREGLO BANNER DE CATEGORÍAS (RECORTE A LA IZQUIERDA) --- */
.category-banner-image {
     object-fit: cover !important;
     object-position: left center !important; 
}
@media (max-width: 887px) {
    .category-banner {
        height: auto !important;
        min-height: unset !important;
        padding: 0 !important; 
    }

    .category-banner-image {
        width: 100% !important;
        height: auto !important;
        
        /* 1. LA MAGIA DEL ESCALADO: Le damos una proporción fija (Ej: Cuadrado o 4:3) */
        aspect-ratio: 80 / 23 !important; 
        
        /* 2. CORTADOR DE GALLETAS: Llena el contenedor (corta lo que sobra) */
        object-fit: cover !important; 
        
        /* 3. EL ANCLA: Clavamos la foto a la izquierda para que SIEMPRE se lea tu texto */
        object-position: left center !important; 
        
        display: block !important;
    }
}

/* --- REDISEÑO PRECIO DE PRODUCTO (TIPO MOCKUP) V2 --- */

/* 1. LIMITAMOS EL CAMBIO SOLO A LA PÁGINA DEL PRODUCTO */
.js-product-detail .js-price-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 20px !important;
    gap: 8px !important; /* Aire exacto entre precio, cuotas y descuento para que no se pisen */
}

/* 2. Reseteamos las columnas para que ocupen el 100% y no se superpongan */
.js-product-detail .js-price-container .col,
.js-product-detail .js-price-container .col-auto,
.js-product-detail .js-price-container .col-12 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important; 
    text-align: left !important;
}

/* 3. Columna interior de precios */
.js-product-detail .js-price-container .col {
    display: flex !important;
    flex-direction: column !important;
}

/* Hacemos que las etiquetas contenedoras sean bloques enteros */
.js-product-detail .js-price-container .col > span {
    display: block !important;
    width: 100% !important;
}

/* 4. Precio tachado (Gris y más chico) */
.js-product-detail .js-compare-price-display {
    font-size: 20px !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    margin-bottom: 0px !important;
}

/* 5. Precio Principal (Gigante y Verde Flúor) */
.js-product-detail .js-price-display {
    font-size: 55px !important; 
    font-weight: 900 !important;
    color: #00FF00 !important;
    line-height: 1.1 !important;
    letter-spacing: -1.5px !important;
    margin: 0 !important;
}

/* 6. Cuotas (Blancas y en negrita, ahora en su propia línea segura) */
.js-product-detail .item-installments,
.js-product-detail .js-max-installments-container {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    text-align: left !important;
}

/* 7. Descuento por transferencia */
.js-product-detail .js-product-discount-container, 
.js-product-detail .js-product-discount-container .text-accent {
    color: #00FF00 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin-top: 5px !important;
}

/* --- REDISEÑO PRECIOS EN GRILLA DE PRODUCTOS (VERSIÓN FINAL) --- */

/* 1. Caja madre: Pasamos a 'row' con 'wrap' */
.js-item-product .item-description {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    text-align: left !important;
}

/* 2. Disolvemos las cajas innecesarias */
.js-item-product .item-link,
.js-item-product .js-item-price-container {
    display: contents !important; 
}

/* 3. Nombre del producto (100% = salta a la siguiente línea) */
.js-item-product .item-name {
    order: 1 !important;
    margin-bottom: 2px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    width: 100% !important;
}

/* 4. Precio Original Tachado */
.js-item-product .js-compare-price-display {
    order: 2 !important;
    font-size: 13px !important;
    color: #888888 !important;
    text-decoration: line-through !important;
    margin-bottom: 0px !important;
    width: 100% !important;
}

/* 5. Precio Final */
.js-item-product .js-price-display {
    order: 3 !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #00FF00 !important;
    line-height: 1.1 !important;
    margin-bottom: 1px !important;
    width: 100% !important;
}

/* 6. OCULTAMOS LAS CUOTAS */
.js-item-product .item-installments {
    display: none !important;
}

/* NUEVO 6.5. PRECIO POR TRANSFERENCIA (Ocupa el lugar y estilo de las cuotas) */
.js-item-product .js-payment-discount-price-product-container,
.js-item-product .payment-discount-price-product-container {
    order: 4 !important;
    display: block !important;
    font-size: 13px !important;
    color: #14A800 !important; /* El verde oscuro que te gustó */
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    margin-top: 0 !important; /* Anulamos el margen superior que trae por defecto */
    line-height: 1.2 !important;
    width: 100% !important;
}

/* Forzamos que cualquier texto o etiqueta adentro se pinte de tu verde oscuro */
.js-item-product .js-payment-discount-price-product-container *,
.js-item-product .payment-discount-price-product-container * {
    color: #14A800 !important; 
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Ocultamos textos viejos de descuento genérico por si acaso */
.js-item-product .js-product-discount-container {
    display: none !important;
}

/* 7. Variaciones de color (Intactas con su candado matemático) */
.js-item-product [class*="js-color-variant"] {
    order: 5 !important; 
    width: 16px !important; 
    height: 16px !important; 
    border-radius: 50% !important; 
    margin: 4px 6px 0 0 !important;
    display: flex !important;
    flex: 0 0 16px !important; 
}

/* El contenedor del texto "+1" */
.js-item-product .item-colors {
    order: 5 !important;
    width: auto !important;
    flex: 0 0 auto !important; 
    display: inline-flex !important;
    align-items: center !important;
    margin-top: 4px !important;
    gap: 6px !important;
    font-size: 11px !important;
}