*{
 
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
   
   }
   @keyframes pulse {
       0% {
           transform: scale(1);
       }
       50% {
           transform: scale(1.05);
       }
       100% {
           transform: scale(1);
       }
   }
   
   html, body{
       width: 100%;
       height: auto;
       margin: 0;
   }
   
   nav{
   
       height:16vh;
       width: auto;
   }
   .enlace{
       position: absolute;
       padding:0;
       
   }
   .logo{
       height:10vh;
       padding: 0;
   
   }
   
   .enlace .logo img{
       width: 100%;
       height: 8vh;
   }
   nav ul{
       float: right;
       margin-right: 20px;
   }
   nav ul li{
       display: inline-block;
       line-height: 80px;
       margin: 0 5px;
   }
   nav ul li a{
       color:#fff;
       font-size: 18px;
       padding: 7px 13px;
       border-radius: 3px;
       text-transform: uppercase;
   }
   li a.active, li a:hover{
    animation: pulse 1s infinite;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);  
   
   }
   nav ul li a {
       color: white;
       text-decoration: none;
       font-size: 18px;
       position: relative;
       padding: 5px 10px;
    
   }
   /*------------------------------------------------------video-----------------------------------------------------*/
            .videos-section {
    width: 100%;
   height: 70vh;
    background-image: url(/img/background-congreso-invitados.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
 
  
}

.videos-section h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #fff;
    
    font-weight: 600;
    font-size: 30px;
}
   
   .carousel-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carousel-wrapper {
    display: flex;
    margin: 0;
    padding: 0;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden; /* Ocultar videos a los lados */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Desplazamiento suave entre videos */
}

.video-container {
    flex: 0 0 100%; /* Cada video ocupa todo el contenedor */
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
}

/* Imagen de vista previa del video */
.video-thumbnail {
    cursor: pointer;
    width: 100%;
    max-width: 250px; /* Asegura que todas las imágenes tengan el mismo tamaño */
    display: flex;
    justify-content: center;
    align-items: center;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Indicadores de posición */
.carousel-indicators {
    text-align: center;
    margin-top: 10px;
}
iframe {
    width: 30%; /* Asegurarse de que el video ocupe el 100% del contenedor */
    height: 400px; /* Aumentar la altura del video */
}
.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color:#fff;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color:#00ff00;
}

.dot:hover {
    background-color:#17E5A5;
}
   /*----------------------------------------------------------end video--------------------------------------------------------*/
   nav ul li a::before {
       content: '';
       position: absolute;
       width: 0;
       height: 2px;
       background-color: #009bdb; 
   
       bottom: 0;
       left: 50%;
       transition: width 0.3s ease, left 0.3s ease;
   }
   
   nav ul li a:hover::before {
       width: 100%;
       left: 0;
   }
   nav ul li a:active::after {
       width: 100%;
       background-color: #00ff00;
   }
   .checkbtn{
       font-size: 30px;
       color: #fff;
       float: right;
       line-height: 80px;
       margin-right: 40px;
       cursor: pointer;
       display: none;
   }
   #check{
       display: none;
   }
   .submenu {
       display: none;
       height: 55vh;
       position: absolute;
       background-color: #019CDC;
       box-shadow: 0 8px 16px rgba(0,0,0,0.2);
       z-index: 100;
   }
   
   .submenu li {
       display: block;
   }
   
   .submenu-parent:hover .submenu {
       display: block;
   }
   @media (max-width:860px){
       .checkbtn{
           display: block;
           color: #F0513B;
       }
       ul{
           position: fixed;
           width: 80%;
           height: 32vh;
           background:#019CDC;
           top: 143px;
           left: -100%;
           text-align: center;
           transition: all .5s;
           z-index: 2;
       }
       nav ul li{
           display:flex;
           margin: 0px 0;
           line-height: 30px;
       }
       nav ul li a{
           font-size: 20px;
       }
       li a:hover, li a.active{
           background: none;
           color: #fff;
       }
       #check:checked ~ ul{
           left:0;
       }
       .checkbtn {
           display: block;
           color: #fff;
       }
       
       ul {
           position: fixed;
           width: 60%;
           height: 36vh;
           background:#019CDC;
           top: 143px;
           left: -100%;
           text-align: center;
           transition: all .5s;
           z-index: 2;
       }
       
       nav ul li {
           display: flex;
           background-color: #00a3e0;
           width: 100%;
           margin: 0px 0;
           line-height: 30px;
           position: relative; /* Asegúrate de que los elementos del menú puedan contener submenús correctamente */
       }
       
       nav ul li a {
           font-size: 20px;
           width: 100%;
       }
       
       li a:hover, li a.active {
           background: none;
           color:rgb(38, 207, 123);
       }
       
       #check:checked ~ ul {
           left: 0;
       }
   }
       .enlace{
           width: 28%;
           height:15vh;
        justify-content: center;
           display: flex;
           align-items: center;
       }
    
     
       nav ul {
           height: 12vh;
       
       }
       nav ul li{
           height: 12vh;
       }
       header{
           width: 100%;
           height: auto;
           padding-bottom: 10%;
           margin: 0;
           padding: 0;
           background-image: url(/img/header-8-15.jpg);
           background-size: cover;
           background-repeat: no-repeat;
           background-position: bottom;
         
       }
       .button .home{width: 15%;
            color: #fff;
           }
       .navbar {
           width: 100%;
       
           color:#F0513B;
           display: flex;
           justify-content: space-between;
       align-items: center;
       padding: 5px;
       height: auto;
       padding-left: 12%;
       }
       
       .navbar .logo {
          width: 20%;
          height: auto;
          padding: 3%;
          
       }
       img .logo{
           width: 100%;
           height: 100%;
       }
       .navbar .logo img{
           width: 100%;
           height: 4.5rem;
       }
       
       .nav-links {
           list-style: none;
           margin: 0;
           padding: 0;
           display: flex;
           width: 75%;
       }
       
       .nav-links li {
           padding: 0 15px;
       }
       
       .nav-links a {
           color: #F0513B;    text-decoration: none;
           font-size: 22px;
           transition: color 0.3s;
       }
       
       .nav-links a:hover {
           animation: pulse 1s infinite; 
           color: #44DD9D;  
       }
       @keyframes pulse {
           0% {
               transform: scale(1);
           }
           50% {
               transform: scale(1.1);
           }
           100% {
               transform: scale(1);
           }
       }
       
       
       /* Animación */
       @keyframes slide-in {
           from {
               transform: translateX(-100%);
               opacity: 0;
           }
           to {
               transform: translateX(0);
               opacity: 1;
           }
       }
       
       .slide-in {
           animation: slide-in 1s ease-out;
       }
   
   
     /*TIME LINE*/
   .cronograma{
       width: 100%;
       padding: 0;
       margin: 0;
       display: flex;
       justify-content: center;
   }
     .timeline-container {
       width: 80%;
       max-width: 1200px;
       background: white;
       border-radius: 10px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       overflow: hidden;
       position: relative;
   }
   
   .timeline-header {
       display: flex;
       justify-content: center;
       background: #f4f4f4;
       border-bottom: 2px solid #e0e0e0;
   }
   
   .timeline-date {
       padding: 15px 30px;
       font-size: 20px;
       font-weight: 600;
       cursor: pointer;
       transition: background 0.3s, color 0.3s;
   }
   
   .timeline-date.active, .timeline-date:hover {
       background: #ff0066;
       color: white;
       font-size: 20px;
   }
   
   .timeline-date span {
       display: block;
       font-size: 20px;
       color: #666;
   }
   
   .timeline-events {
       padding: 20px;
   }
   
   .timeline-event {
       display: flex;
       align-items: center;
       margin-bottom: 20px;
       position: relative;
   }
   
   .timeline-event:last-child {
       margin-bottom: 0;
   }
   
   .event-time {
       width: 12%;
       text-align: right;
       margin-right: 20px;
       font-size: 0.9em;
       color: #ff0066;
   }
   
   .event-details {
       background: #fff;
       padding: 10px 20px;
       border-radius: 5px;
       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       width: calc(100% - 140px);
   }
   .event-details h3{
       color: #FF0066;
       font-size: 22px;
       width: 30%;
   }
   .event-details p{
       width: 42%;
       height: auto;
       text-align: center;
   }
   .event-details p strong{
       text-align: center;
   }
   .timeline-event::before {
       content: '';
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
       width: 18px;
       height: 15px;
       background: #ff0066;
       border-radius: 50%;
       z-index: 1;
   }
   
   .timeline-event::after {
       content: '';
       position: absolute;
       left: 50%;
       top: 20px;
       bottom: -20px;
       width: 2px;
       background: #ff0066;
       transform: translateX(-50%);
       z-index: 0;
   }
   
   .timeline-event:last-child::after {
       display: none;
   }
   .timeline-container h2{
       text-align: center;
   }
   
   
      /*TIME LINE*/
   
   
       .hom{
           width: 90%;
           display: flex;
       }
       .hom .text {
        width: 100%;
       }
       .hom .text h1{
           color:#fff;
           width: 60%;
           font-size: 32px;
           padding-left: 5.5%;
       }
      header{
        height: auto;
        padding-bottom: 12%;
      }
       .banderas{
           width: 90%;
           height: 10vh;
           padding-left: 5.5%;
        
       }
       .banderas img{
           width: 60%;
           height: auto;
       }
       .patrocinio, .auspicio{
           width: 55%;
           padding-top: 0;
           flex-direction: column;
           margin: 0;
           padding-left: 3%;
           height: auto;
           display: flex;
           align-items: center;
        
       }
       .patrocinadores{
           width: 100%;
           display: flex;
           align-items: center;
         
        
       }
       .patrocinio .patrocinadores img{
           width: 19%;
           height: auto;
           object-fit: cover; /* Asegura que la imagen cubra completamente el espacio sin deformarse */
           margin-right: 2%;
                max-height: 16vh;
       
       
       }
       .patrocinio h2, .auspicio h2{
           color: #fff;
           font-size: 25px;
           padding-left: 3.5%;
           align-items: center;
       }
     
       .auspician img{
           width: 18%;
           height: auto;
           object-fit: cover;
           margin-right: 5%;
           padding-right: 1%;
        
       }
       .auspician{
           width: 100%;
           display: flex;
            align-items: center;
       }
       /*PORQUE ASISTIR*/
       .porque-asistir{
           display: flex;
           width: 100%;
           height: auto;
       }
   
   
       .porque-asistir .info{
           width: 25%;
           height: auto;
           justify-content: center;
   
       }
       .porque-asistir .info h3{
           padding-left: 3%;
           font-size: 15px;
           color:#7A7A8F ;
       }
       .porque-asistir .info h2{
           padding-left: 3%;
           color: #009BDB;
           font-size: 33px;
           font-weight: 600;
       }
       .porque-asistir .info p{
           font-size: 20px;
           padding-left: 3%;
       }
       .porque-asistir .info button{
           background-color: #FE3B37;
           padding: 2%;
           margin-left: 3%;
           border-radius: 10px;
       }
       .porque-asistir .info button:hover{
           animation: pulse 1s infinite;
           box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);  
       }
       .porque-asistir .info button a{
           color: #fff;
           text-decoration: none;
           font-size: 20px;
       }
   
   
   
       
   .grid-container {
       padding-top: 5%;
       width:75%;
       height: auto;
       margin: 0;
       padding: 0;
       display:grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-rows: repeat(2, auto); /* Crea dos filas */
       gap: 10px;
       background-image:url(../img/fumigacion-de-plagas-medellin.webp);
       background-repeat: no-repeat;
       background-size: cover;
   
   }
   .grid-item {
       background-color: #fff; /* Fondo de cada tarjeta */
       
       border-radius: 10px; /* Bordes redondeados de las tarjetas */
       box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Sombra suave para las tarjetas */
       margin: 22px; /* Margen alrededor de las tarjetas */
       margin-top: 10px;
       transition: transform 0.3s ease-in-out; /* Transición para el efecto de hover */
       height:45vh;
       width: 80%;
       justify-self: center;
       align-self: center; 
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);   
   }
   
   .grid-item:hover {
       transform: scale(1.03); /* Efecto de escala al pasar el ratón */
   }
   .grid-item img {
       width: 30%; /* Las imágenes ocupan todo el ancho de la tarjeta */
       height: 10vh; /* Altura automática para mantener la proporción */
       margin: 10px 10px;
       border-radius: 1rem;
   }
   .grid-item h3 {
       padding: 0 15px; /* Relleno para el título dentro de la tarjeta */
       text-align: center;
       color: #17E5A5;
   }
   
   .grid-item p {
       padding: 0 10px; /* Relleno para el párrafo dentro de la tarjeta */
    text-align: center;
    color: #000;
    font-size: 18px;
   }
   
   
   
   /*conferencistaas*/
   
   .conferencistas{
       width: 100%;
       height: auto;
       margin: 0;
       padding: 0;
       justify-content: center;
       display: flex;
       flex-direction: column;
   }
   .tittle{
       width: 100%;
       margin: 0;
       padding: 0;
       text-align: center; 
   }
   .tittle h3{
       font-size: 18px;
       color:#7A7A8F ;
   }
   .tittle h2{
       color: #009BDB;
       font-size: 30px;
   }
   .invitados{
    align-items: center;
       justify-content: center;
       width: 100%;
       padding:0;
       height: auto;
       margin-bottom: 5%;
       display: grid;
       justify-content: center;
       grid-template-columns: repeat(4, 1fr);
       grid-template-rows: repeat(2, auto); /* Crea dos filas */
       gap: 10px;
   }
   .invitados .description{
       width: 95%;
       height:98vh;
       margin-bottom: 2%;
       background-color: #fff;
       border: 1px solid #ddd;
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       padding: 20px;
       text-align: center;
       display: flex;
       transition: transform 0.3s ease-in-out;
       flex-direction: column;
       align-items: center;
       justify-content: center;
   }
   .invitados .description img{
    width: 100%;    /* Ajusta el ancho al del contenedor de la tarjeta */
    height: 200px; /* Opcional, depende de si quieres que ocupe todo el alto del contenedor */
    object-fit: contain;/* Asegura que la imagen cubra todo el espacio sin deformarse */
    object-position: center;
    display: block;
   } 
   
   .invitados .description p{
       font-size: 17px;
       height: 50vh;
       color: #666;
       line-height: 1.4;
       text-align: left;
       margin: 0;
   }
   .invitados .description h3{
       font-size: 22px;
       font-weight: 600;
   }
   
   
   .entradas{
      
       width: 100%;
       height:70vh;
       margin: 0;
       position: relative;
       padding: 0;
       text-align: center;
       background: linear-gradient(to right, #00c6ff, #31ac97);
   }
   .entradas h2{
       color: #fff;
   }
   .entradas h3{
       color: #fff;
       font-size: 15px;  
   }
   .cupones{
       width: 100%;
       margin: 0;
       padding: 0;
       justify-content: space-around;
       display: flex;
   }
   .card {
       background-color: white;
       border-radius: 15px;
       width: 200px;
       padding: 20px;
       text-align: center;
       position: relative;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       border: 1px solid #ddd;
       clip-path: polygon(15% 6%, 29% 0, 48% 8%, 60% 0, 78% 5%, 100% 0, 100% 100%, 0 100%, 0% 35%, 0 0);
   }
   
   .card h2 {
       color: #5a2ea6;
       font-size: 1.2em;
       margin: 10px 0;
       text-transform: uppercase;
   }
   
   .card .price {
       color: #5a2ea6;
       font-size: 2em;
       font-weight: bold;
       margin: 10px 0;
   }
   
   .card hr {
       border: 0;
       height: 1px;
       background: #ddd;
       margin: 20px 0;
   }
   
   .card button {
       background-color: #ff0066;
       color: white;
       border: none;
       border-radius: 25px;
       padding: 10px 20px;
       font-size: 1em;
       cursor: pointer;
       text-transform: uppercase;
   }
   
   .card button a{
       text-decoration: none;
       color: #fff;
   }
   .card button:hover {
      animation: pulse 1s infinite;
   }
   
   .button button{
       margin-top: 2%;
       background-color: #ff0066; 
       border: none;
       border-radius:10px;
       padding: 10px 20px;
       font-size: 1em;
       cursor: pointer;
       text-transform: uppercase;
   }
   .button button a{
       text-decoration: none;
       color: #fff;
   }
   .button button:hover {
       animation: pulse 1s infinite;
    }
    
   
   .contacto{
       width: 100%;
       margin: 0;
       display: flex;
       justify-content: space-evenly;
       padding-bottom: 2%;
       padding-top: 2%;
   }
   .contac{
       width: 50%;
   }
   .contac h3{
       color: #000;
       width: 50%;
   
   }
   .contac h2{
       font-size: 28px;
       color: #009BDB;
       width: 40%;
   
   }
   .contac p{
       font-size: 20px;
       width: 40%;
   }
   .hospedaje{
       width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
   }
   .info{
       width: 30%;
       height: auto;
       padding: 2%;
   
   }
   .info h2{
       color: #009BDB;
       font-size: 28PX;
   }
   .info h3{
       color: #000;  
   }
   .info p{
       color: #666;  
       font-size: 20px;
   }
   .info button{
       background-color: #FE3B37;
       padding: 2%;
       margin-left: 3%;
       border-radius: 10px;
   }
   .info button a    {
       color: #fff;
           text-decoration: none;
           font-size: 20px;
   }
   .info button:hover{
       animation: pulse 1s infinite;
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);  
   }
   .hoteles {
       width: 70%;
       display: flex;
       justify-content: space-around;
       flex-wrap: wrap;
       margin: 20px;
   }
   
   .hotel {
       background-color: #fff;
       border: 1px solid #ddd;
       border-radius: 10px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
       width: 30%;
       margin: 20px;
       padding: 20px;
       text-align:start;
   }
   
   .hotel img {
       width: 30%;
       height: auto;
       
   }
   
   .hotel h3 {
       color: #17E5A5; /* color verde */
       font-size:30PX;
       margin-bottom: 10px;
   }
   
   .hotel p {
       color: #666;
       font-size: 20px;
       margin-bottom: 20px;
   }
   
   .hotel button {
       background-color: #17E5A5; /* color verde claro */
       border: none;
       border-radius: 10px;
       color: white;
       padding: 10px 20px;
       cursor: pointer;
       font-size: 1em;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   .hotel button a{
       color: #000;
       text-decoration: none;
   }
   
   .hotel button:hover {
       animation: pulse 1s infinite;
       box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);  
   }
   
   
   /*formulariooo*/
   
   .formulario{
       width: 100%;
       margin-top: 2%;
       height: auto;
       margin: 0;
       padding: 0;
       background-repeat: no-repeat;
       background-size: cover;
       background-image: url(/img/congreso-psicologia-2024.webp);
       padding-bottom: 3%;
   }
   .g-recaptcha{
    width: 100%;
    justify-content: center;
    text-align: center;
        display: flex;
    height: auto;
   }
   .contact-form {
       margin: 0 auto;
       display: flex;
       justify-content: center;
       align-items: center;
       flex-direction: column;
       padding: 20px;
       padding-left:2%;
      height:auto;
       width:42%; /* O ajusta según la necesidad */
       box-shadow: none; /* Sombra suave alrededor del formulario */
       text-align: center; /* Centrar el texto y los elementos del formulario */
       margin-top: 5%;
   
   }
   form{
       width: 60%;
     
     
   }
   #contactForm label {
       display: block; /* Los labels en su propia línea */
       margin-top: 10px; /* Margen superior */
       margin-bottom: 2px; /* Espaciado antes de cada input */
       color: #fff; /* Color del texto de las etiquetas */
   }
   #contactForm textarea {
       width: 100%; /* Ocupa todo el ancho del contenedor del formulario */
       height: 130px; /* Ajusta esto según cuánto quieras que sea alto el cuadro de texto */
       padding: 7px; /* Espacio interior alrededor del texto */
       margin-bottom: 15px; /* Espaciado después del textarea */
       border: 1px solid #fff; /* Borde del color azul característico */
       border-radius: 6px; /* Bordes redondeados para el textarea */
       box-sizing: border-box; /* El width incluye el padding y border */
       resize: vertical; /* Permite al usuario cambiar el tamaño verticalmente si es necesario */
       color: #fff;
   }
   input, textarea {
       width: 100%;
       height:7vh;
       padding: 8px;
       margin: 10px 0;
       border-radius: 4px;
       border: 1px solid #ccc;
       color: #fff;
     }
     .submit-container {
       display: flex;
       align-items: center;
       justify-content: flex-start; /* Alinea el contenido a la izquierda */
     }
     .submit-container input[type="submit"] {
       margin-right: 10px; /* Espacio entre el botón y el texto */
       cursor: pointer;
     }
     .submit-text {
       color:#fff;
       font-size: 16px;
     }
   #contactForm input[type="text"],
   #contactForm input[type="email"],
   #contactForm input[type="tel"],
   #contactForm textarea {
       width: calc(100% - 20px); /* Ancho menos el padding */
       padding: 8px; /* Espacio interior para escribir */
       margin-bottom: 15px; /* Espaciado después de cada input */
       border: 1px solid #fff;
       border-radius: 12px; /* Bordes redondeados para los inputs y textarea */
       border-width:2px ;
       background: none;
       color: #fff;
       box-sizing: border-box; /* El width incluye el padding y border */
   }
   
     input::placeholder, textarea::placeholder {
       color: white; /* Cambia el color a blanco */
       opacity: 1; /* Asegura que el color sea completamente opaco */
     }
   
   #contactForm input[type="submit"] {
       background: none;
       border: 1px solid #fff;
       margin-left:0;
       width: 50%; /* El botón de envío ocupa todo el ancho */
       padding:2px 2px; /* Espacio interior del botón */
       color: white; /* Texto blanco en el botón */
       border-radius: 12px; /* Bordes redondeados del botón */
       cursor: pointer; /* Cursor de mano al pasar por encima */
       margin-top: 3px; /* Margen superior para separar del último input/textarea */
   }
   
   #contactForm input[type="submit"]:hover {
       background-color: #00abfb; /* Color del botón al pasar el cursor por encima */
   }
   
   #contactForm input:invalid,
   #contactForm textarea:invalid {
       border-color:  #fff;
        /* Color de borde para campos inválidos */
   }
   
   .contact-form h2 {
       margin-bottom: 15px;
       color: #fff;
       width: 60%;
       align-items: center;
       text-align: center;
   
   }
   
   /*footer*/
   footer{
       background-size: cover;
       background-repeat: no-repeat;
       background-image: url(/img/congreso-internacional.webp);
   }
   .footer-container {
       width: 100%;
       display: flex;
       justify-content: space-around;
       align-items: center;
       margin: 0 auto;
       flex-wrap: wrap;
   }
   
   .logo-section{
       height:15vh;
       padding: 0;
       margin: 0;
       width:20%;
       display: flex;
       align-items: center;
      
   }
   .logo-section img{
       height: auto;
       width:100%;
       padding: 0;
       
   }
   .links-section{
       width: 70%;
       display: flex;
       justify-content: space-between;
       
   }
   .links-section ul{
       width: 100%;
   }
   .links-section a{
       padding: 1%;
       color: #fff;
       font-size: 18px;
       text-decoration: none;
         
   }
   .links-section a:hover{
    animation: pulse 1s infinite;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);  
   }
   .copyright{
       width: 100%;
       padding: 0;
       padding-top: 0.5%;
       padding-bottom: 0.5%;
       text-align: center;
       color: #fff;
   font-size: 18px;
   }
   .copyright a{
       color: #fff;
       text-decoration: none;
   }
   .maps{
     width: 40%;
     height: auto;
   }
   .maps iframe {
       width: 80%;
       height: 70vh;
   }

   /*invitada especial*/
   .invitados-especiales{
    width: 100%;
   }
   .tex{
    width: 100%;
    text-align: center;
   }
   .tex h2{
    font-size: 40px;
   }
   .invitada-container{
    width: 100%;
    height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
  padding-bottom: 2%;
   }
   .biografia{
    padding-top: 2%;
    width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
   .biografia img{
    width: 50%;
   }
   .biografia h3{
    text-align: center;
    font-size: 25px;
    margin: 0;
   }
   .biografia p{
    font-size: 18px;
    padding: 2%;
    text-align: center;
    margin: 0;
      color: #666;
   }
   /*------------------------------------------MEDIA UERY----------------------------------------*/
   
   @media (min-width: 300px) and (max-width:798px){
       nav{
           width: 100%;
           height: 12vh;
           align-items: center;
           justify-content: center;
           margin: 0;
           padding: 0;
       }
       .checkbtn{
           width: 5%;
       }
           iframe {
        width: 90%; /* Asegurarse de que el video ocupe el 100% del contenedor */
        height: 400px; /* Aumentar la altura del video */
    }
       .enlace{
           width: 65%;
           height: 10vh;
           align-items: center;
           justify-content: center;
           display: flex;
       }
       .enlace .logo{
           height:7vh;
           
   
       }
   
       .enlace img{
           height: 5vh;
           width: 100%;
       }
       .contact-form{
           width: 90%;
           height: 84vh;
        align-content: center;
           align-items: center;
           padding-left: 0;
       }
       .contact-form h2{
           width: 100%;
           height: 14vh;
           padding: 0;
           margin: 0;
           padding-left: 0;
           text-align: center;
       }
       form{
           width: 100%;
         padding-top: 5%;
       }
       .home{
           width: 100%;
           background-position: center right;
           height: auto;
       }
       .hom,   .text{
           width: 100%;
       }
       .hom .text h1{
           width: 93%;
           font-size: 28px;
           padding: 2%;
       }
       .links-section ul{
           display: none;
       }
       .porque-asistir{
           flex-direction: column;
           height: auto;
       }
       .grid-container {
           width: 100%;
           margin: 0;
           padding: 0;
           height: auto;
           display: flex;
           overflow-x: auto;
           scroll-snap-type: x mandatory;
           -webkit-overflow-scrolling: touch;
       
       }
       .grid-item{
           height:50vh;
           width: 100%;
           flex: 0 0 80%;
           scroll-snap-align: center;
           margin-right: 10px;
           margin-left: 5%;
       
       }
       .hospedaje{
           margin: 0;
           padding: 0;
           height: auto;
           width: 100%;
           justify-content: center;
           display: flex;
           align-items: center;
           margin-bottom: 2%;
       }
        /*invitada especial*/
   .invitados-especiales{
    width: 100%;
   }
   .tex{
    width: 100%;
    text-align: center;
   }
   .tex h2{
    font-size: 40px;
   }
   .invitada-container{
    width: 100%;
    height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
   }
   .biografia{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
        padding: 2%;
   }
   .biografia img{
    width: 50%;
   }
   .biografia h3{
    text-align: center;
    font-size: 25px;
   }
   .biografia p{
    font-size: 20px;
    padding: 1%;
   }
       .hoteles{
           width: 100%;
           height: auto;
           margin-top: 2%;
           margin-bottom:2% ;
           display: flex;
           flex-wrap: nowrap; /* Asegura que las tarjetas estén en una línea horizontal */
           overflow-x: auto; /* Habilita el desplazamiento horizontal */
           scroll-snap-type: x mandatory; /* Habilita el snap por tarjeta */
           box-sizing: content-box; 
       overflow-x: auto; /* Habilita el desplazamiento horizontal */
       scroll-snap-type: x mandatory; /* Habilita el snap por tarjeta */
       -webkit-overflow-scrolling: touch; /* Mejora el desplazamiento en iOS */
       }
       .hotel{
           flex: 0 0 80%; /* Cada tarjeta ocupa el 90% del ancho de la pantalla */
           height: auto;
           scroll-snap-align: start; /* Alinea el inicio de cada tarjeta con el inicio del viewport */
           box-sizing: border-box;
           padding: 20px; /* Espacio interior para evitar que el contenido toque los bordes de la tarjeta */
           margin: 0 5%; /* Margen horizontal para crear espacio entre las tarjetas */
           display: flex; /* Usar flexbox para organizar el contenido de cada tarjeta */
           flex-direction: column; /* Organiza el contenido de la tarjeta verticalmente */
           align-items: center; /* Centra el contenido horizontalmente */
           text-align: center; /* Alinea el texto al centro */
           background: white; /* Fondo blanco para cada tarjeta */
           border: 1px solid #ccc; /* Borde para cada tarjeta */
           border-radius: 10px; /* Bordes redondeados */
       }
       .hotel img {
           max-width: 80%; /* Controla el tamaño de la imagen para que no ocupe toda la tarjeta */
           height: auto; /* Mantiene la proporción de las imágenes */
           margin-bottom: 20px; /* Espacio entre la imagen y el texto */
       }
       .hotel a {
           color: white;
           padding: 10px 20px;
           border-radius: 5px; /* Bordes redondeados para el botón */
           text-decoration: none; /* Elimina el subrayado del texto */
           display: inline-block; /* Hace que el enlace sea un bloque, permitiendo más control sobre el padding */
       }
       .invitados {
          width: 100%;
          margin: 0;
          padding: 0;
          display:flex;
          flex-direction:column;
          justify-content: center;
          align-items: center;
        
       }
   
       .description {
           width: 100%;
           height: auto;
           margin-top: 2%;
          
       }
       .description :last-child {
           margin-right: 0; /* Elimina el margen derecho del último elemento para ajuste visual */
       }
      
     
       .entradas, .cupones, .contacto, .hospedaje, .auspicio,  .patrocinio{
           display: flex;
           flex-direction: column;
       }
       .maps{
           width: 100%;
       }
       .patrocinio{
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: center;
       }
       .porque-asistir .info{
           width: 100%;
       }
       .banderas{
           width: 100%;
           height: auto;
           padding-top: 2%;
       }
       .banderas img {
           width: 95%;
           height: auto;
       }
    
       header{
        height: auto;
        background-position: left center;
       }
       .patrocinadores {
        
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    .patrocinio .patrocinadores img {
          max-width: 100%;
     padding: 5px;
        height: auto;
        flex: 1 1 16%;
    }
       .auspicio{
           justify-content: center;
           align-items: center;
           width: 100%;
           height: auto;
         
       }
    
       .auspician{
        width: 100%;
        padding: 5px; /* Padding alrededor del contenedor */
        height: auto;
        object-fit: cover;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
   
       }
       .auspicio .auspician img{
           width: 50%;
           height: auto;
           margin-bottom: 2%;
         
         
       }
       .videos-section{
           width: 100%;
           height: auto;
       }
       .entradas, .cupones{
           display:flex ;
           width: 100%;
           height: auto;
           justify-content: center;
           align-items: center;
           padding-bottom: 2%;
       }
       .entradas{
           padding-bottom: 2%;
       }
       .contac {
           width: 100%;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
       }
       .contac h2{
           width: 100%;
           text-align: center;
       }
       .contac h3{
           width: 100%;
       }
       .contac p{
           width: 80%;
       }
       .hospedaje, .hospedaje .info{
           width: 100%;
       }
       .maps{
           width: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
       }
       .maps iframe {
           width: 90%;
       }
       .cronograma {
           width: 100%;
           margin: 0;
           padding: 0;
       }
       .timeline-container{
           width: 95%;
           height: auto;
           margin-bottom: 2%;
           margin-top: 2%;
       }
       .timeline-event{
           width: 100%;
           padding: 0;
           margin: 0;
           margin-bottom: 2%;
           
       }
       .event-details h3{
           width: 60%;
       }
       .event-details p{
           width: 100%;
           height: auto;
       }
       .timeline-events{
           width: 100%;
           padding: 0;
       }
       .event-details{
           width: 70%;
       }
       .event-time{
           width: 30%;
           padding: 0;
           margin: 0;
       }
       .event-details p{
           width: 90%;
       }
       .timeline-event::after{
           left: 33%;
       }
       .timeline-event::before{
          left: 33%; 
       }
       .formulario{
           width: 100%;
           margin: 0;
           padding: 0;
           height: auto;
           display: flex;
           justify-content: center;
           align-items: center;
       }
       .contact-form{
           height: auto;
           margin-top: 2%;
           margin-bottom: 2%;
       }
       footer{
           width: 100%;
           height: auto;
           margin: 0;
           padding: 0;
       }
       .footer-container{
           width: 100%;
       }
       .logo-section{
           width: 60%;
       }
       .links-section{
           width: 100%;
       }
       .links-section a{
           color: #fff;
       }
   }
      /* MEDIA QUERY IPHONE 14 PRO MAX */
      @media (min-width: 401px) and (max-width:600px){
       .invitados .description{
           height: auto;
       }
       .invitados .description p{
           height: auto;
       }
       .invitados .description p{
           height: auto;
       }
       .enlace .logo{
           height:7vh;
           
   
       }
       .patrocinio .patrocinadores img {
   
        max-width: 100%;
        padding: 5px;
           height: auto;
           flex: 1 1 16%;
    }
   
      }
      @media (min-width: 601px) and (max-device-width:800px){
   
       .invitados .description {
           height: auto;
       }
       .invitados .description p{
           height: auto;
       }
       .contact-form{
           width: 80%;
       }
      }
      @media (min-width:1920px) and (max-device-width:1920px){
        .invitados .description {
            height: 85vh;
        }
        .entradas{
            height: 50vh;
        }
      }
      @media (min-width: 1300px) and (max-width:1400px) {
       .invitados .description {
           height: 106vh;
       }
       .grid-item{
           height: 45vh;
       }
       .patrocinio{
        width: 58%;
       }
       .patrocinio .patrocinadores img {
           width:11% ;
           height: auto;
     
       }
       .event-details p {
           width: 40%;
       }
       .event-details h3 {
           width: 40%;
Success!
       }
      }
      @media only screen and (min-device-width: 360px) and (max-device-width: 360px) and (min-device-height: 640px) and (max-device-height: 640px) and (-webkit-min-device-pixel-ratio: 4) {
    
 
    .invitados .description{
        height: 150vh;
        margin-bottom: 2%;
    }
    .conferencistas{
        height: auto;
        padding-top: 2%;
        padding-bottom: 2%;
    }
    .invitados .description p{
        height: auto;
    }
    .invitados{
        height: auto;
        padding-bottom: 2%;
        padding-top: 2%;
    }
    .grid-container{
        padding-top: 2%;
        padding-bottom: 2%;
    }
    .grid-item{
        height: auto;
        margin-top: 2%;
    }
    .grid-item p{
        height: auto;
    }


}