/* Estilos básicos para la página */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Evita el desbordamiento horizontal */
    font-family: Arial, sans-serif; /* Fuente predeterminada */
    background-color: lightgrey;
}

/* Contenedor principal que centra el contenido */
.container {
    width: 1200px; /* Ancho fijo */
    margin: 0 auto; /* Elimina los márgenes */
    box-shadow: none; /* Sin sombras */
    padding: 0; /* Sin padding */
    background-color: white;
}

/* Estilos para el banner */
.banner {
    width: 1200px;
    height: calc(1200px / (16 / 6)); /* Altura basada en la relación de aspecto 16:9 */
    display: flex;
    justify-content: flex-end; /* Alinea las imágenes al lado derecho */
    align-items: center; /* Centra verticalmente las imágenes */
    background-image: url('../images/banner1-2.webp'); /* Asegúrate de que la ruta es correcta */
    background-size: cover; /* Cubre el área del contenedor */
    background-position: center; /* Centra la imagen de fondo */
}

.banner img {
    max-width: 33%; /* Limita el ancho máximo de cada imagen al 33% del contenedor */
    height: auto; /* Mantiene la proporción de la altura */
}

.split-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto;
    max-width: 1200px; /* Mismo ancho que el contenedor principal para mantener la coherencia */    
}

.text-side {
    width: 25%;
    padding: 100px;
    font-size: 18px;
}

.video-side {
    width: 50%;
    padding: 20px;
}

.special-title {
    font-size: 35px;
    font-weight: normal;
    line-height: 1.4;
}

.social-share {
    background-color: #ffca00;  /* Fondo amarillo */
    color: black;  /* Texto en negro */
    text-align: center;
    padding: 20px 0;
}

.social-share a {    
    margin: 0 10px;
    display: inline-block; /* Alinea los íconos horizontalmente */
}

.social-share img {
    width: 40px; /* Tamaño uniforme para los logos */
    height: auto;
}

.social-share .social-container {
    text-align: center;  /* Alinea el texto y los íconos al centro */
    display: flex;       /* Usa flexbox para un control más fácil del layout */
    align-items: center; /* Alinea los elementos verticalmente en el centro */
    justify-content: center; /* Centra los elementos horizontalmente */
    flex-wrap: wrap;     /* Permite que los elementos se envuelvan si no hay espacio suficiente */
}

.social-share p {
    margin: 0 10px 0 0; /* Espacio a la derecha del texto */
    white-space: nowrap; /* Evita que el texto se envuelva en múltiples líneas */
    font-size: 28px;
    font-weight: bold;
}

.social-share .social-icons {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap; /* Evita el envolvimiento de los íconos */
}

.highlight-section {
    background-image: url('../images/banner2-2.webp'); /* Ajusta la ruta de la imagen */
    background-size: cover;
    background-position: center;
    height: calc(1200px / (16 / 6)); /* Mantiene la relación de aspecto 16:6 */
    display: flex;
    align-items: center; /* Centra los elementos verticalmente */
}

.content-container {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Separa el texto a ambos extremos */
    padding: 20px; /* Añade algo de padding */
}

.left-text, .right-text {
    flex: 1; /* Ocupan espacio disponible de manera equitativa */
    max-width: 50%; /* Limita el ancho máximo al 50% */
}

.left-text p, .right-text p {
    margin: 0; /* Elimina márgenes por defecto */
    color: white;
}

.left-text {
    text-align: left; /* Alinea el texto a la izquierda */
    padding-left: 5%; /* Añade padding para evitar que el texto toque los bordes */
    padding-right: 25%;
    font-size: 20px;
}

.right-text {
    text-align: right; /* Alinea el texto a la izquierda */
    padding-right: 5%; /* Añade padding para evitar que el texto toque los bordes */
    font-size: 44px;
    align-content: center;
}

.gallery-section {
    background-color: white;  /* Fondo blanco para la sección */
    text-align: center;  /* Centra el texto en la sección */
    padding: 50px 0;  /* Añade padding alrededor del contenido */
}

.gallery-section p {
    color: black;  /* Texto en color negro */
    max-width: 80%;  /* Limita el ancho del párrafo para mejorar la legibilidad */
    margin: 0 auto 20px;  /* Centra el párrafo horizontalmente y añade espacio debajo */
    font-size: 24px;
}

.four-column-gallery {
    display: grid;  /* Usa Grid Layout para organizar las imágenes */
    grid-template-columns: repeat(4, 1fr);  /* Crea cuatro columnas de igual tamaño */
    gap: 10px;  /* Añade espacio entre las imágenes */
    max-width: 90%;  /* Limita el ancho máximo de la galería */
    margin: auto;  /* Centra la galería horizontalmente */
}

.four-column-gallery img {
    width: 100%;  /* Las imágenes ocupan todo el espacio de la celda de la cuadrícula */
    height: auto;  /* Mantiene la proporción de las imágenes */
}

.special-section {
    background-image: url(../images/banner3.webp); /* Ajusta la ruta a tu imagen */
    background-size: cover;
    background-position: center;
    height: calc(1200px / (16 / 6)); /* Mantiene la relación de aspecto 16:6 */
    display: flex;
    align-items: center; /* Alinea el contenido verticalmente */
    color: white; /* Color de texto */
}

.text-container {
    width: 30%; /* Ocupa el 50% del ancho de la sección */
    padding-left: 5%; /* Espacio desde el borde izquierdo de la sección */
    text-align: left; /* Alinea el texto a la izquierda */
}

.special-section h1 {
    font-size: 28px; /* Tamaño de fuente para el título */
    margin-top: 20px; /* Espacio antes del título */
}

.special-section p {
    margin-bottom: 10px; /* Espacio entre párrafos */
    font-size: 18px;
}

.media-section {
    background-color: white; /* Fondo blanco para la sección */
    text-align: center; /* Centra el texto en la sección */
    padding: 20px; /* Añade padding alrededor del contenido */
}

.media-section p {
    color: black; /* Texto en color negro */
    margin-bottom: 20px; /* Espacio debajo del párrafo */
    font-size: 24px;
}

.media-content {
    display: flex;
    justify-content: space-between; /* Separa el video y la galería */
    align-items: start; /* Alinea el contenido al inicio */
}

.video-container {
    width: 60%; /* Ocupa casi la mitad del ancho disponible */
}

.two-column-gallery {
    width: 35%; /* Ocupa casi la mitad del ancho disponible */
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 5px; /* Espacio entre imágenes */
}

.two-column-gallery img {
    width: 85%; /* Las imágenes ocupan todo el espacio de la celda */
    height: auto; /* Mantiene la proporción de las imágenes */
}

.episodes-section {
    background-color: #fbb040; /* Fondo amarillo para la sección */
    padding: 20px; /* Espaciado alrededor del contenido */
}

.episodes-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas para las imágenes */
    gap: 10px; /* Espacio entre las imágenes y textos */
    max-width: 1000px; /* Ancho máximo para la galería */
    margin: auto; /* Centra la galería horizontalmente */
}

.episode {
    text-align: center; /* Centra el texto y las imágenes en cada 'episode' */
}

.episode img {
    width: 100%; /* Asegura que la imagen ocupe todo el espacio horizontal disponible */
    height: auto; /* Mantiene la proporción de la imagen */
}

.episode p {
    margin-top: 10px; /* Un pequeño margen en la parte superior del texto */
    color: black; /* Texto en color negro */
}

.last-section {
    background-color: white; /* Fondo blanco */
    display: flex; /* Distribución en línea de los contenidos */
    padding: 20px; /* Espaciado interno */
    padding-top: 30px;
    flex-wrap: wrap;
}

.left-content, .right-content {
    flex: 1 1 50%; /* Asegura que ambos bloques intenten ocupar el 100% del ancho en móvil */
}

.left-content {
    width: 50%; /* Asegura que el contenedor de la imagen use todo el ancho disponible */
    margin-bottom: 10px; /* Espacio entre la imagen y los textos debajo */
}

.left-content img {
    max-width: 85%; /* Asegura que la imagen no exceda el ancho del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Asegura que la imagen no tenga espacio adicional debajo */
    margin: 0 auto; /* Centra la imagen horizontalmente */
}

.right-content p {
    margin-bottom: 10px; /* Espacio entre párrafos */
    font-size: 30px;
}


/* Media Queries para pantallas menores de 600px */
@media (max-width: 600px) {
    .banner {
        height: auto; /* Altura automática basada en el contenido */
        flex-direction: column; /* Cambia la dirección de flex a vertical */
    }

    .banner img {
        max-width: 100%; /* Cada imagen puede tomar el 100% del ancho del banner */
        margin-bottom: 20px; /* Añade margen entre las imágenes */
    }

    .split-section {
        flex-direction: column; /* Cambia la disposición a vertical */
        align-items:center; /* Alinea los elementos a lo ancho del contenedor */
    }

    .text-side {
        width: 80%; /* Hace que cada sección tome todo el ancho disponible */
        padding: 10px; /* Ajusta el padding para dispositivos móviles */
        text-align: center;
        font-size: 38px;
    }

    .special-title {
        font-size: 50px;
        font-weight: normal;
        line-height: 1.4;
    }

    .video-side {
        width: 90%; /* Hace que cada sección tome todo el ancho disponible */
        padding: 10px; /* Ajusta el padding para dispositivos móviles */
    }

    .video-side iframe {
        width: 100%; /* Asegura que el iframe tome todo el ancho disponible */
        height: auto; /* Ajusta la altura automáticamente para mantener la proporción */
        aspect-ratio: 16 / 9; /* Mantiene la proporción del video */
    }

    .social-share a {
        margin: 0 15px;
    }

    .social-share img {
        width: 70px; /* Tamaño uniforme para los logos */
        height: auto;
    }

    .social-share p {
        font-size: 38px; /* Aumenta el tamaño de la fuente en móviles */
    }

    .social-share .social-container {
        flex-direction: column; /* Cambia la disposición a vertical */
    }

    .social-share .social-icons {
        flex-direction: row; /* Alinea los íconos en una fila */
        flex-wrap: wrap; /* Permite que los íconos se envuelvan en nuevas líneas si no hay espacio */
    }

    .social-share .social-icons a {
        margin: 10px; /* Espacio alrededor de cada ícono */
        display: inline-block; /* Trata cada enlace como un bloque en línea, mejor para controlar espacios */
    }

    .left-text {
        text-align: left; /* Alinea el texto a la izquierda */
        padding-left: 5%; /* Añade padding para evitar que el texto toque los bordes */
        padding-right: 20%;
        font-size: 40px;
    }
    
    .gallery-section p {
        font-size: 38px; /* Aumenta el tamaño del texto */
    }

    .four-column-gallery {
        grid-template-columns: repeat(2, 1fr); /* Cambia a dos columnas en lugar de cuatro */
    }

    .text-container {
        width: 50%; /* Ocupa el 50% del ancho de la sección */
        padding-left: 5%; /* Espacio desde el borde izquierdo de la sección */
        text-align: left; /* Alinea el texto a la izquierda */
    }
    
    .special-section h1 {
        font-size: 38px; /* Tamaño de fuente para el título */
        margin-top: 20px; /* Espacio antes del título */
    }
    
    .special-section p {
        margin-bottom: 10px; /* Espacio entre párrafos */
        font-size: 28px;
    }

    .media-content {
        flex-direction: column; /* Cambia la disposición a vertical */
    }

    .media-section p {
        color: black; /* Texto en color negro */
        margin-bottom: 20px; /* Espacio debajo del párrafo */
        font-size: 38px;
    }

    .video-container, .two-column-gallery {
        width: 100%; /* Ajusta el ancho al 100% para ocupar toda la fila */
        margin-bottom: 20px; /* Añade espacio debajo de cada contenedor */
    }

    .video-container iframe {
        width: 100%; /* Asegura que el iframe tome todo el ancho disponible */
        height: auto; /* Ajusta la altura automáticamente para mantener la proporción */
        aspect-ratio: 16 / 9; /* Mantiene la proporción del video */
    }

    .two-column-gallery {
        grid-template-columns: repeat(2, 1fr); /* Mantiene dos columnas incluso en móvil si el espacio lo permite */
        padding: 0 1opx;
        box-sizing: border-box;
    }

    .two-column-gallery img {
        width: 100%; /* Las imágenes ocupan todo el espacio de la celda */
        height: auto; /* Mantiene la proporción de las imágenes */
    }

    .episodes-gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 3 columnas para las imágenes */
    }

    .episodes-section h2 {
        font-size: 58px;
    }

    .episode p {
        margin-top: 10px; /* Un pequeño margen en la parte superior del texto */
        color: black; /* Texto en color negro */
        font-size: 38px;
    }

    .last-section {
        flex-direction: column; /* Cambia la disposición a vertical */
    }

    .left-content, .right-content {
        flex: 1 1 100%; /* Asegura que ambos bloques intenten ocupar el 100% del ancho en móvil */
    }

    .left-content {
        width: 100%;
        padding: 0; /* Elimina el padding para evitar desplazamientos indeseados */
        margin: 0;
        padding-top: 30px;
        margin-bottom: 10px; /* Agrega espacio debajo de cada contenido para separación */
    }

    .left-content img {
        width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    }

    .right-content {
        padding: 30px; /* Elimina el padding izquierdo en móviles */
    }

    .right-content p {
        margin-bottom: 10px; /* Espacio entre párrafos */
        font-size: 48px;
    }
}

/* Estilo del modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Permite desplazamiento si es necesario */
    background-color: rgba(0,0,0,0.9); /* Fondo negro con opacidad */
    align-items: center;
    justify-content: center;
}

/* Estilo para cerrar el modal */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/* Estilo del contenido del modal (imagen) */
.modal-content {
    max-width: 90%; /* Ajusta esto según la necesidad */
    max-height: 80%; /* Asegura que no sea demasiado grande */
}

/* Añade animaciones */
.modal-content, #caption {  
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}