/* =================================================================
   CÓDIGO FINAL CONSOLIDADO PARA FLECHAS DE BANNER
   ================================================================= */

/* 1. Prepara el contenedor Y anula la variable de tamaño del plugin */
.slider-principal-custom {
    position: relative;
    --wp--custom--carousel-block--navigation-size: 12px !important;
}

/* 2. Estilo del CÍRCULO de las flechas (forzando el fondo) */
div.slider-principal-custom.slider-principal-custom .cb-button-next,
div.slider-principal-custom.slider-principal-custom .cb-button-prev {
    width: 30px;
    height: 30px;
    border-radius: 50% !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
    background-color: rgba(255, 255, 255, 0.9) !important; /* <-- FORZAMOS EL FONDO */
}

/* 3. Estilo del ÍCONO (ya corregido por la variable de arriba) */
div.slider-principal-custom.slider-principal-custom .cb-button-next::after,
div.slider-principal-custom.slider-principal-custom .cb-button-prev::after {
    color: #333;
}

/* 4. Efecto HOVER */
div.slider-principal-custom.slider-principal-custom .cb-button-next:hover,
div.slider-principal-custom.slider-principal-custom .cb-button-prev:hover {
    background-color: rgba(255, 255, 255, 1) !important; /* Forzamos también el hover */
}

/* 5. POSICIONES */
div.slider-principal-custom.slider-principal-custom .cb-button-prev {
    left: 16px;
}
div.slider-principal-custom.slider-principal-custom .cb-button-next {
    right: 16px;
}
/* Centrar horizontalmente el carrusel */
.slider-principal-custom {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
    max-width: 100%; /* Asegura que el carrusel no exceda el ancho de su contenedor */
}
@media only screen and (max-width: 768px) {
    .slider-principal-custom {
        display: none !important;
    }
}
/* Ocultar contenedor en pantallas mayores a 768px */
.banners-mobile {
    display: none !important;
    visibility: hidden !important; /* Asegura que el contenedor esté completamente oculto */
    height: 0 !important; /* Elimina el espacio vertical */
    overflow: hidden !important; /* Previene cualquier contenido visible */
    padding: 0 !important; /* Elimina cualquier espacio interno */
    margin: 0 !important; /* Elimina cualquier espacio externo */
}

/* Mostrar el contenedor en pantallas móviles */
@media only screen and (max-width: 768px) {
    .banners-mobile {
        display: block !important;
        visibility: visible !important;
        height: auto !important; /* Restaura el tamaño en pantallas móviles */
        overflow: visible !important; /* Permite el contenido */
        padding: initial !important; /* Restaura el padding */
        margin: initial !important; /* Restaura el margen */
    }
}

/* =================================================================
   FLECHAS PARA BANNERS MOBILE
   ================================================================= */

/* 1. Prepara el contenedor Y anula la variable de tamaño del plugin */
.banners-mobile {
    position: relative;
    --wp--custom--carousel-block--navigation-size: 12px !important;
}

/* 2. Estilo del CÍRCULO de las flechas (forzando el fondo) */
.banners-mobile .swiper-button-next,
.banners-mobile .swiper-button-prev {
    width: 30px;
    /* Tamaño del círculo */
    height: 30px;
    /* Tamaño del círculo */
    border-radius: 50% !important;
    /* Círculo perfecto */
    position: absolute;
    top: 50%;
    /* Centra verticalmente */
    transform: translateY(-50%);
    /* Ajusta la posición al centro */
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    /* Sombra para dar profundidad */
    background-color: rgba(255, 255, 255, 0.9) !important;
    /* Fondo blanco suave */
}

/* 3. Estilo del ÍCONO de las flechas */
.banners-mobile .swiper-button-next::after,
.banners-mobile .swiper-button-prev::after {
    color: #333;
    /* Color del ícono */
    font-size: 16px;
    /* Tamaño del ícono */
}

/* 4. Efecto HOVER */
.banners-mobile .swiper-button-next:hover,
.banners-mobile .swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 1) !important;
    /* Fondo más sólido */
}

/* 5. POSICIONES */
.banners-mobile .swiper-button-prev {
    left: 16px;
    /* Posición de la flecha izquierda */
}

.banners-mobile .swiper-button-next {
    right: 16px;
    /* Posición de la flecha derecha */
}

/* 6. Centrar horizontalmente el carrusel */
.banners-mobile {
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
    text-align: center !important;
    min-width: 100%;
    /* Asegura que el carrusel no exceda el ancho de su contenedor */
}