/* ==========================================================================
   1. PÁGINA DE CONTACTO VIP (FONDO Y TÍTULO)
========================================================================== */

/* Fondo global de la sección de contacto */
.iba-contacto-wrapper {
    background-color: #0e0f0f !important;
    padding: 60px 20px 100px 20px !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Título principal ("Contacta con nosotros") */
.iba-contacto-titulo {
    text-align: center !important;
    margin-bottom: 60px !important;
    width: 100% !important;
}

.iba-contacto-titulo h1,
.iba-contacto-titulo h2 {
    font-family: 'Gobold', sans-serif !important;
    color: #ffffff !important;
    font-size: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

/* Línea roja debajo del título principal */
.iba-contacto-titulo h1::after,
.iba-contacto-titulo h2::after {
    content: "";
    display: block;
    width: 80px;
    height: 5px;
    background-color: #e40521 !important;
    margin: 20px auto 0 auto !important;
}

/* ==========================================================================
   2. TARJETA IZQUIERDA (DATOS DE CONTACTO)
========================================================================== */

.iba-contacto-info {
    background-color: #161717 !important;
    border: 1px solid #262727 !important;
    border-top: 4px solid #e40521 !important;
    padding: 40px !important;
    box-shadow: 0 15px 40px rgba(0,0,0,0.5) !important;
    border-radius: 4px !important;
}

.iba-contacto-info h3, 
.iba-contacto-info h4 {
    font-family: 'Gobold', sans-serif !important;
    color: #ffffff !important;
    font-size: 28px !important;
    margin-bottom: 20px !important;
}

.iba-contacto-info p {
    font-family: 'Helvetica Neue', sans-serif !important;
    color: #aaaaaa !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 30px !important;
}

/* Forzar textos y títulos de iconos a blanco/gris */
.iba-contacto-info .elementor-icon-box-title,
.iba-contacto-info span {
    color: #ffffff !important;
    font-family: 'Gobold', sans-serif !important;
    letter-spacing: 1px !important;
}
.iba-contacto-info .elementor-icon-box-description {
    color: #aaaaaa !important;
}

/* Iconos de contacto en Rojo Ibamotors */
.iba-contacto-info .elementor-icon i,
.iba-contacto-info .elementor-icon svg {
    color: #e40521 !important;
    fill: #e40521 !important;
}

/* ==========================================================================
   3. COLUMNA DERECHA (FORMULARIO PREMIUM)
========================================================================== */

.iba-contacto-form {
    padding: 20px !important;
}

/* Cajas de texto del formulario */
.iba-contacto-form input:not([type="submit"]),
.iba-contacto-form select,
.iba-contacto-form textarea {
    background-color: #161717 !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
    padding: 15px 20px !important;
    font-family: 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
}

/* Efecto focus al escribir (Brillo Rojo) */
.iba-contacto-form input:focus,
.iba-contacto-form select:focus,
.iba-contacto-form textarea:focus {
    border-color: #e40521 !important;
    outline: none !important;
    box-shadow: 0 0 10px rgba(228, 5, 33, 0.3) !important;
}

/* Ocultar/estilizar labels por defecto */
.iba-contacto-form label {
    color: #aaaaaa !important;
    font-family: 'Gobold', sans-serif !important;
    letter-spacing: 1px !important;
}

/* Botón de Enviar */
.iba-contacto-form button,
.iba-contacto-form input[type="submit"] {
    background-color: #e40521 !important;
    color: #ffffff !important;
    font-family: 'Gobold', sans-serif !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
    padding: 18px 40px !important;
    border: 2px solid #e40521 !important;
    cursor: pointer !important;
    width: 100% !important;
    border-radius: 4px !important;
    transition: all 0.4s ease !important;
    letter-spacing: 2px !important;
    margin-top: 10px !important;
}

.iba-contacto-form button:hover,
.iba-contacto-form input[type="submit"]:hover {
    background-color: #0e0f0f !important;
    color: #e40521 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(228, 5, 33, 0.5) !important;
}

/* ==========================================================================
   4. REGLA DE CONTRASTE (TODO TEXTO EN BLANCO)
========================================================================== */

/* Fuerza todos los textos de la zona de contacto a blanco puro */
.iba-contacto-wrapper p,
.iba-contacto-wrapper span,
.iba-contacto-wrapper label,
.iba-contacto-wrapper h1,
.iba-contacto-wrapper h2,
.iba-contacto-wrapper h3,
.iba-contacto-wrapper h4,
.iba-contacto-wrapper h5,
.iba-contacto-wrapper h6,
.iba-contacto-info .elementor-icon-box-title,
.iba-contacto-info .elementor-icon-box-description,
.iba-contacto-form .elementor-widget-text-editor,
.elementor-widget-heading .elementor-heading-title {
    color: #ffffff !important;
}

.iba-contacto-form input,
.iba-contacto-form select,
.iba-contacto-form textarea {
    color: #ffffff !important;
}

/* Textos de relleno (Placeholder) sutiles */
.iba-contacto-form input::placeholder,
.iba-contacto-form textarea::placeholder {
    color: #ffffff !important;
    opacity: 0.8 !important; 
}

/* ==========================================================================
   5. SECCIÓN REDES SOCIALES (BLOQUE ROJO UNIFICADO Y FINAL)
========================================================================== */


/* ==========================================================================
   DESTRUCTOR DE FRANJAS (TRUCO DE PINTURA ROJA)
========================================================================== */

.iba-redes-titulo {
    background-color: #e40521 !important; 
    
    /* 1. Intentamos subirlo un poco */
    margin-top: -20px !important; 
    
    /* 🚨 2. EL TRUCO MÁGICO: Proyecta un bloque de pintura roja 50px hacia arriba para rellenar la franja blanca 🚨 */
    box-shadow: 0 -50px 0 0 #e40521 !important; 
    
    margin-bottom: -100px !important;
    padding-top: 0px !important; 
	margin-top : 0px 
    padding-bottom: 10px !important; 
    text-align: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    
    /* Evita que se corte la pintura */
    overflow: visible !important; 
}

/* El texto del título Stackable */
.iba-redes-titulo h1,
.iba-redes-titulo h2,
.iba-redes-titulo h3,
.iba-redes-titulo .stk-block-heading__text { 
    margin-top: 0 !important; 
    color: #ffffff !important;
    font-family: 'Gobold', sans-serif !important;
    font-size: 38px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-shadow: 3px 3px 0px #900010 !important; 
    position: relative !important;
    z-index: 11 !important;
}

/* Unimos el Título y los Iconos en un solo bloque rojo continuo */
.iba-redes-titulo,
.iba-redes-sociales {
    background-color: #e40521 !important; 
    text-align: center !important;
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 5 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ajustes de unión (sin espacios en blanco) */
.iba-redes-titulo {
    padding-top: 60px !important;
    padding-bottom: 10px !important; 
}

.iba-redes-sociales {
    padding-top: 10px !important; 
    padding-bottom: 60px !important;
    box-shadow: 0 15px 30px rgba(228, 5, 33, 0.2) !important; 
}

/* Título de Redes Sociales (Blanco con sombra 3D roja oscura) */
.iba-redes-titulo h1,
.iba-redes-titulo h2,
.iba-redes-titulo h3,
.iba-redes-titulo .elementor-heading-title {
    color: #ffffff !important;
    font-family: 'Gobold', sans-serif !important;
    font-size: 38px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin: 0 auto !important;
    text-shadow: 3px 3px 0px #900010 !important; 
}

/* Iconos GIGANTES en Blanco Puro */
.iba-redes-sociales .elementor-social-icon {
    background-color: transparent !important; 
    border: none !important;
    margin: 0 25px !important;
    transition: all 0.3s ease !important;
}

.iba-redes-sociales .elementor-social-icon i,
.iba-redes-sociales .elementor-social-icon svg {
    color: #ffffff !important;
    fill: #ffffff !important;
    font-size: 50px !important; 
    transition: all 0.3s ease !important;
}

/* Efecto Hover: Iconos pasan a Negro Absoluto */
.iba-redes-sociales .elementor-social-icon:hover i,
.iba-redes-sociales .elementor-social-icon:hover svg {
    color: #0e0f0f !important; 
    fill: #0e0f0f !important;
    transform: scale(1.2) !important; 
    filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.6)) !important; 
}

/* Ajustes Móviles (Redes Sociales) */
@media (max-width: 767px) {
    .iba-redes-titulo { padding-top: 40px !important; }
    .iba-redes-sociales { padding-bottom: 40px !important; }
    
    .iba-redes-titulo h1,
    .iba-redes-titulo h2,
    .iba-redes-titulo h3,
    .iba-redes-titulo .elementor-heading-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        padding: 0 15px !important;
    }
    
    .iba-redes-sociales .elementor-social-icon i,
    .iba-redes-sociales .elementor-social-icon svg {
        font-size: 40px !important; 
        margin: 0 12px !important;
    }
}
/* =======================================================

   SISTEMA DE CATÁLOGO / ARCHIVO IBAMOTORS (DARK MODE)

======================================================= */



/* -----------------------------------------

   1. EL TÍTULO DE LA CATEGORÍA (Franja Roja)

----------------------------------------- */

.iba-titulo-categoria {

    background-color: #e40521 !important; /* Rojo Ibamotors */

    width: 100vw !important;

    max-width: 100vw !important;

    position: relative !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    padding: 60px 20px !important;

    margin: 0 !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

}



.iba-titulo-categoria h1,

.iba-titulo-categoria .wls-archive-title {

    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;

    font-size: 52px !important;

    color: #ffffff !important;

    text-transform: uppercase !important;

    letter-spacing: 3px !important;

    margin: 0 !important;

    text-align: center !important;

}



/* -----------------------------------------

   2. EL CONTENEDOR DE LA GRILLA (Fondo Negro)

----------------------------------------- */

.iba-grilla-productos {

    background-color: #0e0f0f !important; /* Fondo Negro Oficial */

    width: 100vw !important;

    max-width: 100vw !important;

    position: relative !important;

    left: 50% !important;

    transform: translateX(-50%) !important;

    padding: 40px 20px 100px 20px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

}



/* -----------------------------------------

   3. LAS TARJETAS ESTILO "SPLIT"

----------------------------------------- */

.iba-grilla-productos .woocommerce ul.products li.product {

    background-color: #161717 !important; /* Base oscura elegante */

    border: 1px solid #262727 !important; /* Borde sutil oscuro */

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;

    overflow: hidden !important;

    padding-bottom: 20px !important;

}



/* La Imagen de la Tarjeta (Fondo blanco y línea roja) */

.iba-grilla-productos .woocommerce ul.products li.product a img {

    background-color: #ffffff !important;

    padding: 20px !important;

    border-bottom: 3px solid #e40521 !important; 

    margin-bottom: 15px !important;

    width: 100% !important;

}



/* -----------------------------------------

   4. TEXTOS DE LA TARJETA Y RAYA ROJA VIP

----------------------------------------- */

/* Título del vehículo */

.iba-grilla-productos .woocommerce ul.products li.product .woocommerce-loop-product__title {

    color: #ffffff !important; 

    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;

    font-size: 20px !important;

    text-transform: uppercase !important; /* Forzar Mayúsculas */

    text-align: center !important;

    padding: 0 15px !important;

    margin-top: 15px !important;

    margin-bottom: 0 !important; /* Quitamos margen para darle espacio a la raya roja */

}



/* DESTRUIR LÍNEAS FEAS Y DOBLES DEL TEMA */

.iba-grilla-productos .woocommerce ul.products li.product .woocommerce-loop-product__title::after,

.iba-grilla-productos .woocommerce ul.products li.product .woocommerce-loop-product__title::before,

.iba-grilla-productos .woocommerce ul.products li.product .price::after {

    display: none !important;

    content: none !important;

    background: transparent !important;

    border: none !important;

}



/* LA NUEVA RAYA ROJA PERFECTA (Idéntica al Home) */

.iba-grilla-productos .woocommerce ul.products li.product .price::before {

    content: "" !important;

    display: block !important;

    width: 42px !important;

    height: 3px !important;

    background-color: #e40521 !important; /* Rojo Ibamotors */

    margin: 15px auto 15px auto !important; /* Centrado perfecto con respiro */

    border: none !important;

}



/* Precio en la tarjeta */

.iba-grilla-productos .woocommerce ul.products li.product .price {

    color: #e40521 !important; /* Rojo Ibamotors */

    font-family: 'Helvetica Neue', sans-serif !important;

    font-size: 18px !important;

    font-weight: bold !important;

    text-align: center !important;

    display: block !important;

    margin-top: 0 !important;

}



/* -----------------------------------------

   5. CORRECCIÓN DEFINITIVA: CATEGORÍAS BLANCAS

----------------------------------------- */

.iba-grilla-productos .woocommerce ul.products li.product a[rel="tag"],

.iba-grilla-productos .woocommerce ul.products li.product .meta-categories a {

    color: #ffffff !important; /* Blanco puro */

    background-color: transparent !important; /* Destruye el fondo rojo del tema */

    background: none !important;

    font-family: 'Gobold', sans-serif !important;

    font-size: 14px !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    text-decoration: none !important;

    padding: 0 !important;

    margin-top: 5px !important;

    display: inline-block !important;

    box-shadow: none !important;

    border: none !important;

    text-align: center !important;

    width: 100% !important; /* Para asegurar el centrado */

}



.iba-grilla-productos .woocommerce ul.products li.product a[rel="tag"]:hover,

.iba-grilla-productos .woocommerce ul.products li.product .meta-categories a:hover {

    color: #e40521 !important; /* Hover rojo Ibamotors */

}



/* -----------------------------------------

   6. EFECTO HOVER VIP

----------------------------------------- */

.iba-grilla-productos .woocommerce ul.products li.product:hover {

    transform: translateY(-8px) !important;

    box-shadow: 0 15px 35px rgba(228, 5, 33, 0.25) !important; /* Resplandor rojo */

    border-color: #e40521 !important; /* El borde entero se enciende en rojo */

}



/* -----------------------------------------

   7. FILTROS SUPERIORES BLANCOS Y DROPDOWN

----------------------------------------- */

/* "Mostrando los X resultados" */

.iba-grilla-productos .woocommerce-result-count,

.iba-grilla-productos .woocommerce-result-count p {

    color: #ffffff !important;

    font-family: 'Gobold', sans-serif !important;

    letter-spacing: 1px !important;

}



/* Selector "Orden predeterminado" (La caja principal) */

.iba-grilla-productos .woocommerce-ordering select {

    background-color: #161717 !important;

    color: #ffffff !important;

    border: 1px solid #333333 !important;

    padding: 8px 15px !important;

}



/* Las opciones que se despliegan hacia abajo (Dropdown) */

.iba-grilla-productos .woocommerce-ordering select option {

    background-color: #161717 !important; /* Fondo negro elegante */

    color: #ffffff !important; /* Texto blanco puro */

    padding: 10px !important;

}



/* -----------------------------------------

   8. AJUSTES PARA MÓVILES

----------------------------------------- */

@media (max-width: 767px) {

    .iba-titulo-categoria h1,

    .iba-titulo-categoria .wls-archive-title { font-size: 36px !important; }

    .iba-grilla-productos { padding: 30px 15px 60px 15px !important; }

}


/* =======================================================
   9. PAGINATION - WHITE TEXT FIX
======================================================= */

/* Base pagination container */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination li {
    background: transparent !important;
    border: none !important;
}

/* All pagination links and numbers */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li span,
.iba-grilla-productos .woocommerce .page-numbers,
.iba-grilla-productos .woocommerce .page-numbers a,
.iba-grilla-productos .woocommerce .page-numbers span {
    color: #ffffff !important;
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
}

/* Current page */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li span.current,
.iba-grilla-productos .woocommerce .page-numbers.current {
    color: #ffffff !important;
    background-color: #3a3a3a !important;
    border-color: #3a3a3a !important;
}

/* Normal buttons */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.iba-grilla-productos .woocommerce .page-numbers:not(.current) {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
}

/* Hover */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover,
.iba-grilla-productos .woocommerce .page-numbers:hover {
    color: #ffffff !important;
    background-color: #e40521 !important;
    border-color: #e40521 !important;
}

/* Next / Prev specifically */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.next,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.prev,
.iba-grilla-productos .woocommerce a.next,
.iba-grilla-productos .woocommerce a.prev {
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    background: transparent !important;
}

/* If the arrow is injected with pseudo-elements by the theme */
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.next::before,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.next::after,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.prev::before,
.iba-grilla-productos .woocommerce nav.woocommerce-pagination ul li a.prev::after {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
/* CONTENEDOR DEL TÍTULO */
.iba-seccion-titulo {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #e40521 !important;

    padding: 60px 20px !important;
    margin-top: -25px !important;
    margin-bottom: -2px !important;
    box-sizing: border-box !important;
    border: none !important;

    text-align: center !important;
}

/* FORZAR CENTRADO EN TODOS LOS WRAPPERS INTERNOS */
.iba-seccion-titulo *,
.iba-seccion-titulo .wp-block-heading,
.iba-seccion-titulo .stk-block-heading,
.iba-seccion-titulo .stk-heading {
    text-align: center !important;
    justify-content: center !important;
}

/* EL TÍTULO */
.iba-seccion-titulo h1,
.iba-seccion-titulo h2,
.iba-seccion-titulo h3 {
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
    font-size: 46px !important;
    color: #0e0f0f !important;
    background-color: #ffffff !important;
    border: 8px solid #0e0f0f !important;
    padding: 20px 60px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    line-height: 1.1 !important;

    display: inline-block !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* =========================================
   BOTÓN "VER MÁS" — Normal
========================================= */
.iba-btn-ver-mas .wp-block-button__link,
.iba-btn-ver-mas .stk-button,
.iba-btn-ver-mas a {
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    padding: 12px 35px !important;
    border: 2px solid #0e0f0f !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;

    background: #ffffff !important;
    color: #0e0f0f !important;
    min-width: 180px !important;
    min-height: 56px !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 1 !important;
}

/* Forzar texto interno visible */
.iba-btn-ver-mas .wp-block-button__link *,
.iba-btn-ver-mas .stk-button *,
.iba-btn-ver-mas a * {
    color: inherit !important;
    position: relative !important;
    z-index: 2 !important;
}

/* =========================================
   HOVER
========================================= */
.iba-btn-ver-mas .wp-block-button__link:hover,
.iba-btn-ver-mas .stk-button:hover,
.iba-btn-ver-mas a:hover {
    background: #d90000 !important;
    color: #ffffff !important;
    border-color: #d90000 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(0,0,0,0.18) !important;
    text-decoration: none !important;
}

/* Focus también */
.iba-btn-ver-mas .wp-block-button__link:focus,
.iba-btn-ver-mas .stk-button:focus,
.iba-btn-ver-mas a:focus {
    background: #d90000 !important;
    color: #ffffff !important;
    border-color: #d90000 !important;
    outline: none !important;
}

/* Si Stackable mete pseudo-elementos encima */
.iba-btn-ver-mas .wp-block-button__link::before,
.iba-btn-ver-mas .wp-block-button__link::after,
.iba-btn-ver-mas .stk-button::before,
.iba-btn-ver-mas .stk-button::after,
.iba-btn-ver-mas a::before,
.iba-btn-ver-mas a::after {
    z-index: 0 !important;
}
/* =========================================
   BANNER ROJO SEPARADOR (Ajustado)
========================================= */

/* 1. EL CONTENEDOR */
.iba-banner-separador {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: #e40521 !important; /* Rojo oficial Ibamotors */
    
    /* Ajuste de espacios: buen aire arriba, casi pegado abajo */
    padding-top: 45px !important; 
    padding-bottom: 15px !important; 
    padding-left: 20px !important;
    padding-right: 20px !important;
    
    /* Elimina la franja blanca "jalando" el bloque hacia arriba */
    margin-top: -25px !important; 
    margin-bottom: 0 !important;
    
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

/* 2. EL LOGO (Más grande) */
.iba-banner-separador img,
.iba-banner-separador .wp-block-image {
    max-width: 280px !important; /* Aumentado para mayor presencia */
    height: auto !important;
    margin: 0 auto 20px auto !important; 
    display: block !important;
}

/* 3. EL TEXTO (Pegado a la parte inferior) */
.iba-banner-separador h1,
.iba-banner-separador h2,
.iba-banner-separador h3,
.iba-banner-separador p {
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
    color: #ffffff !important;
    text-align: center !important;
    font-size: 26px !important; 
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: 1px !important;
    line-height: 1.2 !important;
}

/* 4. AJUSTES PARA MÓVILES */
@media (max-width: 767px) {
    .iba-banner-separador {
        padding-top: 30px !important;
        padding-bottom: 10px !important;
    }
    .iba-banner-separador img {
        max-width: 200px !important; /* Más grande también en celulares */
    }
    .iba-banner-separador p,
    .iba-banner-separador h2 {
        font-size: 18px !important;
    }
}
/* =========================================
   ISOLATED CAROUSEL MODE (Updated)
========================================= */

/* 1. Transform into a Scrolling Track */
.iba-carousel-mode .woocommerce ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important; /* Un-sticks them from the center */
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    gap: 15px !important;
    padding-bottom: 10px !important;
    margin: 0 !important;
    
    /* Hide scrollbars */
    scrollbar-width: none; 
    -ms-overflow-style: none; 
}

.iba-carousel-mode .woocommerce ul.products::-webkit-scrollbar {
    display: none; 
}

/* 2. Lock the Product Width */
.iba-carousel-mode .woocommerce ul.products li.product {
    flex: 0 0 100% !important; /* Shows 1 car at a time. Change to calc(50% - 7.5px) for 2 cars */
    max-width: 100% !important;
    scroll-snap-align: start !important; /* Locks perfectly to the left edge */
    margin: 0 !important;
}

/* 3. Keep Images Clean */
.iba-carousel-mode .woocommerce ul.products li.product a img {
    height: 180px !important; 
    object-fit: contain !important;
    padding: 15px;
}

/* =========================================
   4. CAROUSEL NAVIGATION DOTS
========================================= */
.iba-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.iba-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #cfcfcf; /* Subtle grey for inactive dots */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Hover effect using Brand Black */
.iba-dot:hover {
    background-color: #0e0f0f !important; 
}

/* The active dot becomes a modern, Brand Red 'pill' shape */
.iba-dot.active {
    width: 28px; 
    border-radius: 10px;
    background-color: #e40521 !important; 
}

/* =========================================
   5. Fondo del carrousel 
========================================= */

.iba-seccion-carruseles {
    background-color: #f7f7f7 !important; /* Gris perla sutil */
    padding: 40px 20px 80px 20px !important; /* Espacio cómodo para los autos */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Aseguramos que las tarjetas sigan siendo blancas sobre el fondo gris */
.iba-carousel-mode .woocommerce ul.products li.product {
    background-color: #ffffff !important;
}

/* =========================================
   AJUSTES PARA MÓVILES (Ambas secciones)
========================================= */
@media (max-width: 767px) {
    .iba-seccion-titulo {
        padding: 50px 15px 15px 15px !important;
    }
    .iba-seccion-titulo h1,
    .iba-seccion-titulo h2,
    .iba-seccion-titulo h3 {
        font-size: 32px !important;
    }
    .iba-seccion-carruseles {
        padding: 20px 15px 60px 15px !important;
    }
}
/* 1. MAKE THE MAIN CONTAINER FULL WIDTH */
.jordan-style-grid {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #000000 !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; 
}

/* 2. STOP THE VIDEO BLOWOUT IN STACKABLE COLUMNS */
/* We target the columns Stackable generates to make sure they don't stretch */
.jordan-style-grid .stk-column {
    min-width: 0 !important; /* Kills the video blowout */
    position: relative !important;
}

/* 3. FORCE MEDIA TO FILL THE BOXES */
.jordan-style-grid .wp-block-image,
.jordan-style-grid .wp-block-video,
.jordan-style-grid .stk-block-image,
.jordan-style-grid .stk-block-video {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important; /* Gives the boxes a consistent height so they look like posters */
    position: relative !important;
    overflow: hidden !important;
}

.jordan-style-grid img,
.jordan-style-grid video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Crops the media perfectly to fit the odd shapes */
    border-radius: 4px !important;
}

/* 4. THE FLOATING OVERLAY TEXT */
.jordan-overlay-text {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    text-align: center !important;
    width: 100% !important;
    pointer-events: none !important; 
}

.jordan-overlay-text h1, 
.jordan-overlay-text h2,
.jordan-overlay-text p {
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
    font-size: 8vw !important; 
    color: #ffffff !important;
    font-weight: 700 !important;
    margin: 0 !important;
    letter-spacing: -2px !important;
    text-shadow: 0px 10px 40px rgba(0,0,0,0.9) !important; 
}

/* 5. RESPONSIVE FOR MOBILE (Changes text size, Stackable handles column stacking automatically) */
@media (max-width: 1024px) {
    .jordan-style-grid .wp-block-image,
    .jordan-style-grid .wp-block-video,
    .jordan-style-grid .stk-block-image,
    .jordan-style-grid .stk-block-video {
        min-height: 300px !important; 
    }
    .jordan-overlay-text h1, 
    .jordan-overlay-text h2 {
        font-size: 12vw !important; 
    }
}

@media (max-width: 767px) {
    .jordan-overlay-text h1, 
    .jordan-overlay-text h2 {
        font-size: 16vw !important;
    }
}
/* 1. KILL THE GREY CONTAINER BACKGROUND & CENTER WRAPPER */
.woocommerce,
.woocommerce ul.products {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.woocommerce {
    margin: 0 auto !important; 
}

/* 2. MAIN LAYOUT (Switched to Flexbox to center incomplete rows) */
.woocommerce ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* <--- This forces the 3 cars to the middle! */
    gap: 20px;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 3. DYNAMIC COLUMNS (Calculates exact width based on your shortcode) */
.woocommerce.columns-2 ul.products li.product, .woocommerce ul.products.columns-2 li.product { width: calc(50% - 10px) !important; }
.woocommerce.columns-3 ul.products li.product, .woocommerce ul.products.columns-3 li.product { width: calc(33.333% - 14px) !important; }
.woocommerce.columns-4 ul.products li.product, .woocommerce ul.products.columns-4 li.product { width: calc(25% - 15px) !important; }
.woocommerce.columns-5 ul.products li.product, .woocommerce ul.products.columns-5 li.product { width: calc(20% - 16px) !important; }
.woocommerce.columns-6 ul.products li.product, .woocommerce ul.products.columns-6 li.product { width: calc(16.666% - 17px) !important; }

/* ===================================================
   4. INDIVIDUAL CARDS (ACTUALIZADO CON HOVER ROJO VIP)
=================================================== */
.woocommerce ul.products li.product {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important; 
    border: 1px solid #f0f0f0 !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(14, 15, 15, 0.04) !important; 
    /* Transición suave para todos los efectos */
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* EL EFECTO HOVER DE IBAMOTORS */
.woocommerce ul.products li.product:hover {
    transform: translateY(-8px) !important; /* Se eleva más */
    border-color: #e40521 !important; /* El borde se pinta del rojo oficial */
    box-shadow: 0 15px 35px rgba(228, 5, 33, 0.15) !important; /* Resplandor rojo sutil */
}

/* CLICKABLE AREA */
.woocommerce ul.products li.product a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* 5. IMAGE AREA */
.woocommerce ul.products li.product a img {
    width: 100% !important;
    height: 220px !important;
    object-fit: contain !important;
    display: block;
    margin: 0 !important;
    padding: 24px;
    background: transparent !important; 
}

/* CONTENT PADDING */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .product-excerpt {
    padding-left: 18px;
    padding-right: 18px;
}

/* 6. TITLE - Brand Typography & Colors */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.35;
    font-weight: 700;
    color: #0e0f0f !important; 
    text-align: center;
    text-transform: uppercase;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
    min-height: 48px;
}

/* DESCRIPTION */
.woocommerce ul.products li.product .product-excerpt {
    font-family: 'Helvetica Neue', sans-serif !important;
    font-size: 13px;
    line-height: 1.6;
    color: #7b7b7b;
    text-align: center;
    margin-bottom: 20px;
    min-height: 85px;
}

/* REMOVE DEFAULT JUNK */
.woocommerce ul.products li.product .posted_in,
.woocommerce ul.products li.product .product-category,
.woocommerce ul.products li.product .star-rating,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
    display: none !important;
}

/* 7. BRAND RED SEPARATOR LINE */
.woocommerce ul.products li.product .price::before {
    content: "";
    display: block;
    width: 42px;
    height: 3px;
    background: #e40521 !important; 
    margin: 0 auto 18px auto;
}

/* 8. PRICE - Brand Typography & Colors */
.woocommerce ul.products li.product .price {
    text-align: center;
    font-family: 'Gobold', 'Helvetica Neue', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700;
    color: #e40521 !important; 
    margin-top: auto !important;
    margin-bottom: 24px !important;
    display: block;
}

.woocommerce ul.products li.product .price ins,
.woocommerce ul.products li.product .price bdi {
    color: #e40521 !important;
    text-decoration: none !important;
}

.woocommerce ul.products li.product .price del {
    opacity: .45;
    margin-right: 8px;
    color: #0e0f0f !important;
}

/* 9. RESPONSIVE ADJUSTMENTS (Updated for Flexbox) */

/* Shrink 5 & 6 columns down to 4 on smaller laptops */
@media (max-width: 1200px) {
    .woocommerce.columns-5 ul.products li.product, .woocommerce ul.products.columns-5 li.product,
    .woocommerce.columns-6 ul.products li.product, .woocommerce ul.products.columns-6 li.product {
        width: calc(25% - 15px) !important;
    }
}

/* Shrink 4+ columns down to 3 on tablets */
@media (max-width: 1024px) {
    .woocommerce[class*="columns-"] ul.products li.product, 
    .woocommerce ul.products[class*="columns-"] li.product {
        width: calc(33.333% - 14px) !important;
    }
}

/* Force 2 columns on mobile devices */
@media (max-width: 767px) {
    .woocommerce[class*="columns-"] ul.products li.product, 
    .woocommerce ul.products[class*="columns-"] li.product {
        width: calc(50% - 10px) !important;
    }
    .woocommerce ul.products li.product a img {
        height: 180px !important;
    }
}

/* Force 1 column on very small mobile screens */
@media (max-width: 480px) {
    .woocommerce[class*="columns-"] ul.products li.product, 
    .woocommerce ul.products[class*="columns-"] li.product {
        width: 100% !important;
    }
}