/* Base Styles */
body {
    background-color: #ffffff;
    overflow-x: hidden;
}

/* =========================================
   PRELOADER - styles.css
   ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    /* Esta transición es para el FONDO BLANCO (Paso 2) */
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

#preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#preloader-video {
    width: 245px;
    height: 250px;
    max-width: 80%;
    object-fit: cover;
    background-color: #ffffff;
    /* NUEVO: Esta transición es para EL VIDEO (Paso 1) */
    transition: opacity 0.6s ease-out;
}

#preloader-video.fade-out {
    opacity: 0;
}

body.loading {
    overflow: hidden;
}

/* =========================================
   NAVBAR & LOGO ANIMATION
   ========================================= */
#main-navbar {
    background: transparent;
    transition: all 0.4s ease;
}

#main-navbar.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

#main-navbar.scrolled #desktop-logo-wrapper {
    height: 48px;
}

#main-navbar.scrolled #logo-big {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
}

#main-navbar.scrolled #logo-small {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* =========================================
   MOBILE MENU ANIMATIONS
   ========================================= */
.navbar-hidden {
    transform: translateY(-100%);
}

#mobile-menu-btn.open #line1 {
    transform: translateY(8px) rotate(45deg);
}

#mobile-menu-btn.open #line2 {
    opacity: 0;
    transform: translateX(10px);
}

#mobile-menu-btn.open #line3 {
    transform: translateY(-8px) rotate(-45deg);
}

#mobile-menu.menu-active {
    opacity: 1;
    pointer-events: auto;
}

#mobile-menu.menu-active .mobile-link {
    transform: translateY(0);
    opacity: 1;
}

/* =========================================
   HERO CAROUSEL - PIXEL PERFECT (AS PER IMAGE)
   ========================================= */
#hero-carousel-container {
    height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding-top: 80px;
    /* Space for fixed header */
    overflow-x: hidden;
    /* Evita el scroll horizontal */
    width: 100%;
}

.hero-swiper {
    width: 100%;
    height: 85%;
    overflow: visible !important;
}

/* Slide Styles */
.hero-swiper .swiper-slide {
    width: 600px;
    /* Fixed width for better control */
    height: 100%;
    border-radius: 8rem;
    /* Very rounded corners as seen in images */
    overflow: hidden;
    opacity: 1;
    /* Eliminada la opacidad como se solicitó */
    transform: scale(0.85);
    transition: transform 0.8s cubic-bezier(0.2, 1, 0.3, 1),
        opacity 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    background: #f0f0f0;
}

@media (max-width: 768px) {
    .hero-swiper .swiper-slide {
        width: 80%;
        border-radius: 4rem;
    }
}

/* Active Slide (Center) */
.hero-swiper .swiper-slide-active {
    opacity: 1 !important;
    transform: scale(1.15) !important;
    z-index: 10;
    /* box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1); */
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* NAVIGATION ARROWS (IMAGE SYNC: PURPLE CHEVRONS) */
.hero-nav-prev,
.hero-nav-next {
    color: #362c75 !important;
    /* Deep Purple as in image */
    width: 80px !important;
    height: 80px !important;
    background: transparent !important;
    transition: transform 0.3s ease;
    z-index: 99 !important;
    pointer-events: auto;
}

.hero-nav-prev::after,
.hero-nav-next::after {
    font-size: 4rem !important;
    font-weight: 900 !important;
}

.hero-nav-prev {
    left: 10%;
}

.hero-nav-next {
    right: 10%;
}

.hero-nav-prev:hover {
    transform: scale(1.2) translateX(-5px);
}

.hero-nav-next:hover {
    transform: scale(1.2) translateX(5px);
}



/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 1024px) {
    #hero-carousel-container {
        height: 70vh;
        /* Altura reducida en tablets/móviles */
    }

    .hero-nav-prev,
    .hero-nav-next {
        width: 50px !important;
        height: 50px !important;
    }

    .hero-nav-prev::after,
    .hero-nav-next::after {
        font-size: 2rem !important;
    }

    .hero-nav-prev {
        left: 2% !important;
    }

    .hero-nav-next {
        right: 2% !important;
    }

    .hero-swiper .swiper-slide {
        width: 70%;
    }
}


/* Ajustes específicos para móviles muy pequeños */
@media (max-width: 640px) {

    .hero-nav-prev,
    .hero-nav-next {
        width: 40px !important;
        height: 40px !important;
        z-index: 50;
        /* Asegurar que estén sobre el slide */
    }

    .hero-nav-prev::after,
    .hero-nav-next::after {
        font-size: 1.5rem !important;
    }

    .hero-nav-prev {
        left: 10px !important;
    }

    .hero-nav-next {
        right: 10px !important;
    }
}

/* =========================================
   PIXEL PERFECT BUTTONS
   ========================================= */
.btn-brainbow-primary {
    background-color: #2E3192;
    color: #ffffff;
    padding: 14px 44px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    box-shadow: 6px 6px 0px #F4E8F4;
    transition: all 0.3s ease;
    border: none;
    text-align: center;
}

.btn-brainbow-primary:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #F4E8F4;
}

.btn-brainbow-secondary {
    background-color: #FCEEF9;
    color: #8E0E7A;
    padding: 12px 42px;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    border: 2px solid #8E0E7A;
    box-shadow: 6px 6px 0px #F4E8F4;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-brainbow-secondary:hover {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #F4E8F4;
}

/* LENIS SMOOTH SCROLL STYLES */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}