/* 
 * Banner Transition Fix
 * Solución para la transición visual entre banner y fondo en responsive
 * 
 * Este CSS suaviza la transición entre la imagen del banner y el fondo oscuro
 * mediante un gradiente y efectos de blur en la parte inferior del banner.
 */

/* Aplicar un gradiente en la parte inferior del hero */
#inicio::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 25vh; /* Altura del gradiente */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(10, 10, 13, 0.6) 70%,
        rgba(10, 10, 13, 0.95) 100%
    );
    z-index: 5;
    pointer-events: none;
}

/* Efecto de suavizado para la transición entre secciones */
.snap-point {
    position: relative;
}

.snap-point::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 10vh;
    background: linear-gradient(
        to top,
        rgba(10, 10, 13, 0) 0%,
        rgba(10, 10, 13, 0.7) 100%
    );
    z-index: 5;
    pointer-events: none;
    opacity: 0.8;
}

/* Optimizaciones para dispositivos móviles */
@media (max-width: 768px) {
    /* Aumentar tamaño del gradiente en móvil para una transición más suave */
    #inicio::after {
        height: 30vh;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(10, 10, 13, 0.7) 60%,
            rgba(10, 10, 13, 1) 100%
        );
    }
    
    /* Ajustar la transición entre secciones en móvil */
    .snap-point::before {
        height: 15vh;
    }
    
    /* Asegurar que el video de fondo tenga un overlay consistente */
    .video-hole-effect::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 20%;
        background: linear-gradient(
            to bottom,
            rgba(10, 10, 13, 0) 0%,
            rgba(10, 10, 13, 1) 100%
        );
        z-index: 6;
        pointer-events: none;
    }
}

/* Dispositivos muy pequeños */
@media (max-width: 480px) {
    #inicio::after {
        height: 35vh;
    }
}