body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* 🔥 Banner */
.banner {
    margin-top: 50px; /* Mantiene separación superior */
    width: 100%;
    height: auto; /* Permite que la altura sea flexible */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Imagen del banner */
.banner-img {
    width: 100%;  /* Ocupa todo el ancho del contenedor */
    height: auto; /* Mantiene la proporción */
    max-height: 310px; /* Límite máximo para evitar imágenes gigantes */
    object-fit: contain; /* Ajusta la imagen sin recortarla */
}

/* 📱 Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .banner {
        margin-top: 50px; /* Reduce la separación en móviles */
    }

    .banner-img {
        max-height: 200px; /* Hace el banner más pequeño en pantallas pequeñas */
    }
}

/* 📌 Título */
.evento-titulo {
    font-size: 2.5rem;
    margin-top: 20px;
}

/* 📄 Descripción */
.evento-descripcion {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 10px auto;
    padding: 0 20px;
}

/* 🎥 Contenedor Responsivo para Videos */
.media-container {
    width: 100%; /* Ocupa todo el ancho disponible */
    max-width: 1350px; /* Límite para pantallas grandes */
    margin: 50px auto 60px auto; /* 🔹 Márgenes: 50px arriba, 30px abajo */
    display: flex;
    justify-content: center;
    position: relative;
    height: 750px; /* 🔹 Altura fija para evitar excesos */
    overflow: hidden;
    border-radius: 10px;
}

/* 📺 Estilos para el iframe */
.media-container iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* 📱 Ajustes para pantallas pequeñas */
@media (max-width: 768px) {
    .media-container {
        width: 90%;
        height: 250px; /* 🔹 Altura reducida para móviles */
    }
}