:root {--main: #bc964f; --negro: rgb(10, 10, 10); --blanco: #ffffff;}

.banner-container {
    width: 100%;
    max-width: 100vw; /* Asegura que no exceda el ancho de la ventana */
   /* aspect-ratio: 16/9;
   /* height: 840px;*/

    height: calc(100vh - 160px);
    position: relative;
    overflow: hidden;
    background-color: var(--negro); /* Color de fondo por si el contenido no carga */
    user-select: none; /* Evita la selección de texto al arrastrar */
    -webkit-user-select: none; /* Para Safari */
    -moz-user-select: none; /* Para Firefox */
    -ms-user-select: none; /* Para IE/Edge */
    touch-action: pan-y; /* Permite desplazamiento vertical nativo, previene horizontal no deseado */
    margin-top: 160px;
}

.banner-content {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease-in-out; /* La transición es importante */
}

.banner-item {
    min-width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Importante para posicionar el texto encima */
}

.banner-item img,
.banner-item video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen o video cubra el área */
    display: block;
    pointer-events: none; /* Evita que las imágenes/videos capturen eventos de puntero durante el drag */
}

.nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.11);
    color: white;
    border: none;
    padding: 15px 10px;
    cursor: pointer;
    font-size: 24px;
    z-index: 9;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

.dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 6;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: var(--main);
}

/* --- Estilos para el texto del banner --- */
.banner-text-overlay {
    font-family: "JosefinSans", sans-serif;
    font-weight: 100;
    position: absolute;
    bottom: 0; /* Ubicar en la parte inferior */
    left: 0;
    width: 100%;
    padding: 40px;
    color: white;
    text-align: left; /* Alinear texto a la izquierda */
    box-sizing: border-box; /* Incluir padding en el width */
    z-index: 5; /* Asegurar que esté por encima de la imagen/video pero debajo de botones/dots */

}

.banner-headline {
    margin: 0; /* Espaciado inferior */
    font-size: 5rem; /* Tamaño grande */
    font-weight: 100;
}

.banner-description {
    font-size: 1.3em; /* Tamaño de texto normal */
    line-height: 1;
    font-style: italic;
}

/*
// Opcional: Si quieres el texto centrado en el medio
.banner-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    max-width: 800px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    box-sizing: border-box;
    border-radius: 10px;
    z-index: 5;
}
*/

@media screen and (max-width:800px){
.banner-container{
    margin-top: 0;
}

}


@media screen and (max-width:730px){
    .banner-container{
        height: 60vh;
    }

    .banner-headline{
        font-size: 3em;
    }
    .banner-headline, .banner-description{
        text-align: center;
    }
}