/* =============================================
   EFECTOS DE SCROLL DINÁMICOS - FAEMULTIMEDIA
   ============================================= */

/* Overlay dinámico del Hero que se intensifica al hacer scroll */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.8) 70%,
            #000000 100%);
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Cuando el hero está scrolleado, intensificar el degradado */
.hero.scrolled::after {
    opacity: 1;
    height: 50%;
}

/* Asegurar que el contenido del hero esté por encima del overlay */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Efecto de parallax sutil en el hero background */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Mejora de contraste para sección de servicios */
#servicios {
    background: linear-gradient(to bottom,
            #000000 0%,
            rgba(10, 10, 10, 1) 20%,
            rgba(15, 15, 15, 1) 100%);
    position: relative;
    z-index: 1;
}

/* Overlay sutil en la parte superior de la sección de servicios */
#servicios::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 1) 0%,
            transparent 100%);
    pointer-events: none;
    z-index: 1;
}

/* Asegurar que el contenido esté por encima del overlay */
#servicios .container {
    position: relative;
    z-index: 2;
}

/* Mejora de legibilidad para el texto con gradiente */
.text-gradient {
    position: relative;
    filter: drop-shadow(0 2px 8px rgba(230, 86, 22, 0.5)) drop-shadow(0 0 20px rgba(230, 86, 22, 0.3));
}

/* Efecto de fade-in mejorado para section headers */
.section-header {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUpSmooth 0.8s ease forwards;
    animation-delay: 0.2s;
}

@keyframes fadeInUpSmooth {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Backdrop blur sutil para mejorar legibilidad */
.section-title,
.section-subtitle {
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
}

/* Mejora visual del borde inferior del hero */
.hero {
    position: relative;
}

.hero::after {
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.7) inset;
}

/* Responsive - Ajustes para móviles */
@media (max-width: 768px) {
    .hero::after {
        height: 30%;
    }

    #servicios::before {
        height: 60px;
    }
}