/* Configuración Base */
html, body {
    background-color: #051024 !important; /* Volvemos a tu azul original. Adiós al negro. */
    color: #ffffff !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Scrollbar premium */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #051024; }
::-webkit-scrollbar-thumb { background: #1a478a; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #3b82f6; }

/* --- CABECERA (A prueba de carruseles) --- */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999 !important; /* Nivel Dios: tapa al carrusel sí o sí */
    background-color: rgba(5, 16, 36, 0.7); /* Fondo oscuro inicial */
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

#main-header .header-container {
    padding-top: 1rem;
    padding-bottom: 1rem;
    transition: all 0.3s ease;
}

/* ESTADO AL BAJAR LA PÁGINA */
#main-header.scroll-active {
    background-color: rgba(5, 16, 36, 0.98); /* Se vuelve casi sólido */
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

#main-header.scroll-active .header-container {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* --- CARRUSEL (SWIPER) --- */
.swiper {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 50px;
}

/* Tamaño en Móvil */
.swiper-slide {
    background-position: center;
    background-size: cover;
    width: 280px; 
    height: 400px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

/* Tamaño en Escritorio (Más grande) */
@media (min-width: 1024px) {
    .swiper-slide {
        width: 500px;
        height: 650px;
    }
}

/* Quitar el botón morado/rosa de la mitad */
.swiper-slide a[class*="bg-[#8e44ad]"] {
    display: none !important;
}

/* Efecto de las imágenes laterales (Opacidad) */
.swiper-slide:not(.swiper-slide-active) {
    filter: brightness(0.5);
    transform: scale(0.85);
}

/* --- MENÚ MÓVIL --- */
#mobile-menu.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Ajuste de logos y nitidez */
img {
    max-width: 100%;
    height: auto;
}

/* Estilo de la paginación del carrusel */
.swiper-pagination-bullet {
    background: #1a478a !important;
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background: #3b82f6 !important;
    opacity: 1;
    width: 20px;
    border-radius: 5px;
}

/* Estilos para el Carrusel Promo (App / YouTube) */
.promoSwiper {
    overflow: visible !important; /* Permite que la paginación se vea si sale del contenedor */
}

.custom-pagination {
    position: relative !important;
    bottom: auto !important;
    text-align: center;
    width: 100%;
    z-index: 10;
    display: flex;
    justify-content: center;
    gap: 8px; /* Espacio entre líneas */
}

/* Diseño de la línea inactiva */
.custom-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    background: #333; /* Gris oscuro */
    opacity: 1;
    border-radius: 4px;
    margin: 0 !important;
    transition: all 0.3s ease;
}

/* Diseño de la línea activa (Azul) */
.custom-pagination .swiper-pagination-bullet-active {
    background: #60a5fa; /* Azul neón */
    width: 50px; /* Se estira */
}

/* ==========================================
   ANIMACIONES DE TRANSICIÓN (SWUP) - INSTANTÁNEO
   ========================================== */
.transition-fade {
    /* 1 milisegundo: invisible al ojo, pero suficiente para el código */
    transition: opacity 0.001s !important;
    opacity: 1 !important;
}

/* Estado cuando la página cambia (sin desvanecimientos) */
html.is-animating .transition-fade {
    opacity: 0.99 !important; /* Mantiene la visibilidad casi completa */
}

/* ==========================================
   ANIMACIÓN DE TEXTOS (Efecto Reveal Ágil)
   ========================================== */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    pointer-events: none;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* ==========================================
   AJUSTES PARA TRANSICIONES PERFECTAS (SWUP)
   ========================================== */
#swup {
    min-height: 100vh;
}