/* ========================================================
   PARALLAX HERO STYLES - RENTALOYA
   ======================================================== */

/* ========== NAVBAR OPTIMIZADO ==========*/
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(0px);
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0);
    transition: 
        background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        border-bottom-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar__logo,
.navbar__link {
    transition: color 0.3s ease;
}

.navbar__cta a {
    transition: 
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* ========== HERO PARALLAX OPTIMIZADO ==========*/
.hero {
    position: relative;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    will-change: transform;
    z-index: 1;
}

/* Asegurar que contenido está por encima del bg */
.hero__content {
    position: relative;
    z-index: 3;
}

.hero__panel,
.hero__divider {
    position: relative;
    z-index: 2;
}

/* ========== ANIMACIONES DE ENTRADA ==========*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Aplicar animaciones opcionales a hero__content si no las tiene */
.hero__content {
    animation: fadeInUp 1s ease-out 0.3s both;
}

/* ========== ELEMENTOS CON PARALLAX ==========*/
[data-parallax] {
    will-change: transform;
}