/* === CONTENEDOR PRINCIPAL DEL BANNER === */
.swiper-container {
    width: 100%;
    height: 100vh;                  /* Banner tipo hero fullscreen */
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;    /* Nada sale del banner */
}

/* Ajuste para pantallas móviles (similar a Kolbi / YouWager) */
@media (max-width: 768px) {
    .swiper-container {
        height: 60vh;              /* Banner más pequeño en móviles */
    }
}

/* === SWIPER WRAPPER SIN NINGÚN ESPACIO === */
.swiper-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    gap: 0 !important;
    width: 100%;
    height: 100%;
}

/* === SLIDES SIN BORDES === */
.swiper-slide {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    position: relative;
    overflow: hidden;               /* Importante para el efecto zoom */
}
/* === CONTENEDOR DEL SLIDE (para centrar spinner) === */
.swiper-slide {
    position: relative;
    overflow: hidden;
}

/* === IMÁGENES === */
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    border: none;

    transform: scale(1);
    opacity: 0;

    transition:
        transform 0.30s ease-out,
        opacity 0.30s ease-out;
}

/* === IMAGEN ACTIVA (ENTRANTE) === */
.swiper-slide-active img {
    opacity: 1;
    transform: scale(1);
}

/* === IMAGEN SALIENTE (ZOOM OUT 130% + FADE) === */
.swiper-slide-prev img,
.swiper-slide-next img {
    transform: scale(1.5);
    opacity: 0;
}

/* =========================
   SPINNER DE CARGA
   ========================= */

/* Spinner base */
.swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48px;
    height: 48px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 5;
}

/* Oculta spinner cuando la imagen ya es visible */
.swiper-slide-active img {
    pointer-events: none;
}

.swiper-slide-active::before {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease-out;
}

/* Animación del spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* === OPCIONAL: PUNTOS DE NAVEGACIÓN (CUSTOM) === */
.swiper-pagination-bullet {
    background: white;
    opacity: 0.6;
    width: 10px;
    height: 10px;
    margin: 0 4px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

/* === FLECHAS (Custom) === */
.swiper-button-prev,
.swiper-button-next {
    color: white;
    text-shadow: 0 0 8px rgba(0,0,0,0.7);
}