* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: 'Noto Sans', sans-serif; /* Aplicar la fuente Noto Sans */
}

.hero {
    position: relative; /* Necesario para el overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url('/assets/img/169bigdata.4acd309a.jpg'); /* Fondo con la imagen que subiste */
    background-size: cover;
    background-position: center;
    height: 100vh; /* 100% de la altura de la pantalla */
    color: white;
    text-align: left;
    margin-bottom: 0;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Superposición oscura con opacidad */
    z-index: 1; /* Coloca el overlay detrás del contenido */
}

.content {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1400px;
    width: 90%;
    gap: 2.5rem;
    z-index: 2; /* Asegura que el contenido esté encima del overlay */
}


.left-image {
    width: 500px; /* Tamaño aumentado de la imagen */
    border-radius: 10px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3); /* Sombra para el efecto flotante */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave */
}

.left-image:hover {
    transform: translateY(-10px); /* Efecto de elevación en hover */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4); /* Sombra más intensa en hover */
}

.text-content-hero {
    max-width: 700px; /* Ajuste para pantallas grandes */
}

.text-content-hero h1 {
    font-size: 2.5rem; /* Tamaño de fuente aumentado para el título */
    margin-bottom: 1.2rem;
}

.text-content-hero p {
    font-size: 1.150rem; /* Tamaño de fuente aumentado para el párrafo */
    margin-bottom: 1rem;
}

.cta-button {
    padding: 1rem 2.5rem;
    font-size: 1.2rem;
    color: #fff;
    background-color: #0074D9;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* text-transform: uppercase; */
    transition: background-color 0.3s ease ,transform 0.6s ease;
}

.cta-button:hover {
    background-color: #005bb5;
    transform: translateY(-5px);
}

.cta-container {
    display: flex;
    align-items: center;
    gap: 1rem; /* Espacio entre el botón y el enlace */
    margin-top: 1rem;
}

.info-link {
    font-size: 1.2rem;
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease,transform 0.6s ease;;
}

.info-link:hover {
    color: #a0c4ff;
    text-decoration: underline;
    transform: translateY(-5px);
   
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-image {
        width: 200px; /* Tamaño reducido de la imagen en pantallas pequeñas */
        margin-bottom: 1rem;
    }

    .text-content h1 {
        font-size: 2.5rem;
    }

    .text-content p {
        font-size: 1rem;
    }
}




.registration-section {
    background-color: #5657bc; /* Azul oscuro en la misma paleta que el hero */
    color: #ffffff;
    padding: 2rem 0;
    text-align: center;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5); /* Sombra para efecto de profundidad */
    width: 100%; /* Ocupa el 100% del ancho de la pantalla */
}

.registration-content {
    max-width: 1400px; /* Limitar ancho del contenido */
    width: 90%; /* Coincidir con .content */
    margin: 0 auto; /* Centrar el contenido */
}

.registration-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
}

.time-box {
    text-align: center;
    font-size: 1rem;
}

.time-box span {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
}

.player-container {
    /* background-color: #013a63; */ /* Otro tono de azul para el área del reproductor */
    padding: 1.5rem;
    /* border-radius: 8px; */
    box-shadow: none; /* Quitar la sombra del reproductor */
    margin-top: 1.5rem;
    height: 500px;
}



.presentation-section {
    background-image: url('/assets/img/686f086325b7d5d96d1ffe2120e13a33.jpg'); /* Imagen de fondo para toda la sección */
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 3rem 0; /* Espaciado arriba y abajo */
    text-align: center;
}

.presentation-content {
    max-width: 1400px; /* Limitar ancho del contenido */
    width: 90%; /* Coincidir con .content */
    margin: 0 auto;
}

.presentation-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}

.presentation-section h3 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #ffffff;
}
.text-image-container {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 80px;
}

.text-content-presentation {
    flex: 1;
    font-size: 1.125rem;
    color: #ffffff;
}

.text-content-presentation p {
    line-height: 1.8; /* Ajusta el valor según el espacio deseado */
    margin-bottom: 1rem; /* Opcional: agrega un margen inferior si quieres separar los párrafos */
}


.image-content {
    flex: 1;
}

.image-content img {
    width: 84%;
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5); /* Sombra para dar efecto de profundidad */
}

/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .text-image-container {
        flex-direction: column;
        text-align: center;
    }

    .image-content img {
        width: 80%; /* Ajustar ancho de la imagen en pantallas pequeñas */
        margin: 0 auto;
    }
}


.personalities-section {
    position: relative;
    background-image: url('/assets/img/6687fc8f23be5.jpg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    padding: 3rem 0;
    color: #ffffff;
    overflow: hidden; /* Para asegurar que el pseudo-elemento no desborde */
}

.personalities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Oscurecimiento con un overlay */
    filter: blur(5px); /* Ajusta el valor del blur según prefieras */
    z-index: 1; /* Coloca el overlay detrás del contenido */
    pointer-events: none; /* Permite hacer clic en el contenido sin problemas */
}

.personalities-title {
    position: relative;
    z-index: 2; /* Asegura que el título esté encima del overlay */
    text-align: center;
    font-size: 2.5rem;
    color: #ffffff; /* Color del texto */
    margin-bottom: 3rem;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Opcional: Sombra para mejorar el contraste */
}

.personalities-content {
    position: relative;
    z-index: 2; /* Asegura que el contenido esté encima del overlay */
    max-width: 1400px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    gap: 2rem;
}

.left-image-3 {
    flex: 1;
    max-width: 300px;
}

.left-image-3 img {
    width: 100%;
    max-width: 300px; /* Ajuste de tamaño máximo para mantener proporción */
    border-radius: 10px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
}

.text-and-images {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.text-paragraph {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.text-paragraph p {
    flex: 3;
    font-size: 1.5rem; /* Tamaño de fuente aumentado */
    line-height: 1.8;
    margin: 0;
}

.text-paragraph p strong {
    font-weight: bold;
    display: block; /* Coloca el nombre en una línea separada */
    margin-top: 0.5rem; /* Opcional: Ajusta el espacio entre el texto y el nombre */
}



.text-paragraph img {
    width: 100%;
    max-width: 120px; /* Tamaño consistente con la imagen grande de la izquierda */
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
    /* align-self: flex-start; */ /* Alinear con el inicio del texto */
}

/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .personalities-content {
        flex-direction: column;
        align-items: center;
    }

    .left-image-3, .text-paragraph img {
        width: 80%;
    }

    .text-paragraph {
        flex-direction: column;
        text-align: center;
    }
}




.guests-section {
    position: relative;
    background-image: url('/assets/img/bg4.jpg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    padding: 3rem 0;
    color: #ffffff;
    text-align: center;
    overflow: hidden;
}

.guests-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Oscurecimiento con overlay */
    filter: blur(10px); /* Ajusta el valor para un blur más fuerte */
    z-index: 1;
    pointer-events: none;
}

.section-title {
    position: relative;
    z-index: 2;
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.guests-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.guest {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.guest-image {
    width: 120px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
}

.guest-info {
    text-align: left;
    font-size: 1.2rem;
    line-height: 1.6;
}

.guest-info a {
    color: #ffffff; /* Color para los enlaces */
    text-decoration: none;
}

.guest-info a:hover {
    text-decoration: underline;
}

/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .guest {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .guest-image {
        width: 80%;
    }

    .guest-info {
        text-align: center;
    }
}


.guest-name {
    font-weight: bold;
    font-size: 1.3rem; /* Ajusta el tamaño de la fuente según tus necesidades */
    margin-bottom: 0.5rem; /* Espacio entre el nombre y el texto descriptivo */
    color: #ffffff;
}

.social-web {
    margin-top: 0.5rem; /* Espacio entre el texto descriptivo y las redes/página */
    display: flex;
    gap: 1rem; /* Espacio entre redes sociales y página web */
    align-items: center;
}

.social {
    /* color: #ffdd57; */ /* Color destacado para redes sociales */
    font-weight: bold;
}


.social a:hover {
    /* color: #ffdd57;  *//* Color destacado para redes sociales */
    font-weight: bold;
    text-decoration: underline;
}

.website a {
    /* color: #ff4500; */ /* Color destacado para enlaces de sitios web */
    text-decoration: none;
    font-weight: bold;
}

.website a:hover {
    text-decoration: underline;
}


.footer {
    background-color: rgba(4,19,27.1); /* Color sólido de fondo */
    color: #ffffff; /* Color de texto en blanco */
    padding: 2rem 0;
    text-align: center;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-links {
    display: flex;
    gap: 2rem; /* Espacio entre enlaces */
}

.footer-links a {
    color: #ffffff; /* Enlaces en blanco */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease; /* Transición para el hover */
}

.footer-links a:hover {
    color: #ffdd57; /* Cambia el color en hover */
}

.footer-text {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #ffffff; /* Texto en blanco */
}




/* Estilos responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-image {
        width: 200px; /* Tamaño reducido de la imagen en pantallas pequeñas */
        margin-bottom: 1rem;
    }

    .left-image-3 {
       width: 100%;
    }

    .text-content-hero h1 {
        font-size: 2rem; /* Reducir el tamaño del título en pantallas pequeñas */
    }

    .text-content-hero p {
        font-size: 1rem; /* Reducir el tamaño del párrafo en pantallas pequeñas */
    }

    .cta-button {
        font-size: 1rem; /* Reducir el tamaño de la fuente del botón CTA en pantallas pequeñas */
        padding: 0.8rem 2rem; /* Reducir el padding del botón CTA en pantallas pequeñas */
    }

    .cta-container {
        flex-direction: column; /* Apilar el botón y el enlace en pantallas pequeñas */
        align-items: center;
    }

    .info-link {
        font-size: 1rem; /* Reducir el tamaño de la fuente del enlace de información en pantallas pequeñas */
    }

    .presentation-section h2 {
        font-size: 2rem; /* Reducir el tamaño del título de la sección de presentación en pantallas pequeñas */
    }

    .presentation-section h3 {
        font-size: 1.25rem; /* Reducir el tamaño del subtítulo de la sección de presentación en pantallas pequeñas */
    }

    .text-content-presentation {
        font-size: 1rem; /* Reducir el tamaño de fuente del texto de la sección de presentación en pantallas pequeñas */
    }

    .personalities-title {
        font-size: 2rem; /* Reducir el tamaño del título de la sección de personalidades en pantallas pequeñas */
    }

    .text-paragraph p {
        font-size: 1.25rem; /* Reducir el tamaño de fuente de los párrafos de la sección de personalidades en pantallas pequeñas */
    }

    .text-paragraph img {
        max-width: 80px; /* Reducir el tamaño de las imágenes de la sección de personalidades en pantallas pequeñas */
    }

    .section-title {
        font-size: 2rem; /* Reducir el tamaño del título de la sección de invitados en pantallas pequeñas */
    }

    .guest-image {
        width: 100px; /* Reducir el tamaño de las imágenes de los invitados en pantallas pequeñas */
    }

    .guest-info {
        font-size: 1rem; /* Reducir el tamaño de fuente de la información de los invitados en pantallas pequeñas */
        text-align: center;
    }
    .social-web {
        justify-content: center;
    }

    .footer-content {
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .footer-text {
        font-size: 0.8rem;
    }
}


@media (max-width: 360px) {
    .hero {
        height: auto; /* Elimina la altura fija del hero */
        padding: 2rem 0; /* Agrega un poco de espacio arriba y abajo */
    }

    .content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem; /* Aumenta el espacio entre los elementos */
    }

    .left-image {
        width: 150px; /* Reduce aún más el tamaño de la imagen */
        margin-bottom: 0; /* Elimina el margen inferior */
    }

    .text-content-hero h1 {
        font-size: 1.8rem; /* Reduce aún más el tamaño de fuente del título */
        margin-bottom: 0.8rem; /* Ajusta el espacio debajo del título */
    }

    .text-content-hero p {
        font-size: 0.9rem; /* Reduce aún más el tamaño de fuente del párrafo */
        margin-bottom: 1rem; /* Ajusta el espacio debajo del párrafo */
    }

    .cta-button {
        font-size: 0.9rem; /* Reduce aún más el tamaño de fuente del botón CTA */
        padding: 0.6rem 1.8rem; /* Reduce el padding del botón CTA */
    }

    .cta-container {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem; /* Reduce el espacio entre el botón y el enlace */
    }

    .info-link {
        font-size: 0.9rem; /* Reduce aún más el tamaño de fuente del enlace de información */
    }
}


@media only screen and (max-width: 390px) {
    .content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .left-image {
        width: 60%;
        margin-bottom: 1rem;
    }

    .text-content-hero h1 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
    }

    .text-content-hero p {
        font-size: 0.9rem;
        margin-bottom: 1.2rem;
    }

    .cta-button {
        font-size: 0.9rem;
        padding: 0.8rem 2rem;
    }

    .cta-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .info-link {
        font-size: 0.9rem;
    }

    .modal-content {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        width: 100% !important;
    }
}




[data-aos] {
    opacity: 0;
    transition-property: opacity, transform;
  }
  
  [data-aos="fade-up"] {
    transform: translateY(100px);
  }
  
  [data-aos="fade-down"] {
    transform: translateY(-100px);
  }
  
  [data-aos="fade-right"] {
    transform: translateX(-100px);
  }
  
  [data-aos="fade-left"] {
    transform: translateX(100px);
  }


  .modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  .modal-content {
    background-color: #000000;
    margin: 10px auto;
    padding: 20px;
    /* border: 1px solid #888; */
    width: 90%;
    height: 95%;
  }
  
  .close-button {
    color: #fff;
    float: right;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    position: relative;
  }
  
  .close-button:hover,
  .close-button:focus {
    color: #ffffff;
    text-decoration: none;
    cursor: pointer;
  }

  .modal-body {
    width: 100%;
    height: 85vh; /* Ajusta la altura según tus necesidades */
  }
  
  #iframeContent {
    width: 100%;
    height: 100%;
  }