/* Estilos para optimizar la carga del hero */
.hero {
    position: relative;
    overflow: hidden;
    /* Fondo de respaldo */
    background-color: #0f0f0f;
}

/* Contenedor de la imagen de fondo con transición suave */
.hero-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.8s ease-out;
    will-change: opacity;
}

/* Cuando la imagen está cargada */
.hero-bg-container.loaded {
    opacity: 1;
}

/* Overlay con gradiente */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%);
    z-index: 0;
}

/* Ajustes para móviles */
@media (max-width: 768px) {
    .hero {
        background-color: #0f0f0f; /* Fondo oscuro como respaldo */
    }
    
    .hero-bg-container {
        background-attachment: scroll; /* Mejor rendimiento en móviles */
    }
    
    /* Overlay más oscuro en móviles para mejor contraste */
    .hero-overlay {
        background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.8) 100%);
    }
    
    /* Asegurar que el texto sea legible */
    .hero-title,
    .hero-description,
    .hero-buttons {
        position: relative;
        z-index: 2;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }
}

/* Clase para manejar el estado de carga */
.is-loading .hero-bg-container {
    opacity: 0;
}

.is-loaded .hero-bg-container {
    opacity: 1;
}