/* Configuración Profesional para Proyectos HPL */
.hero-slider-item {
    width: 100%;
    height: 600px; /* Altura fija para evitar el zoom excesivo del 'cover' */
    background-size: cover;
    /* 'top' asegura que no se corte el cielo/techo, 'center' mantiene el equilibrio */
    background-position: center top;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Capa de visibilidad sutil (Solo lo justo para leer el texto) */
.hero-slider-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 0.2 es perfecto para que la foto brille como en tu web original */
    background: rgba(0, 0, 0, 0.2);
    z-index: 2;
}

/* Asegura que el contenido esté sobre la capa oscura */
.hero-slider-item .container {
    position: relative;
    z-index: 10;
}

/* Ajuste para que en móviles no quede un bloque gigante */
@media (max-width: 767px) {
    .hero-slider-item {
        height: 400px;
        background-position: center center;
    }
}