*{

  margin: 0;

  padding: 0;

  border: 0;

  font-size: 100%;

  vertical-align: baseline;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: 'Poppins', sans-serif;

    text-align: center;

    margin: 0;

    cursor: url("./img/cursor.png"), auto;

}



header {

  display: flex;

  justify-content: space-between;

  min-height: 70px;

  background-color: #eceaf3;

  align-items: center;

  padding: 10px;

  position: fixed; /* Hace que el encabezado sea estático */

  top: 0; /* Posiciona el encabezado en la parte superior de la pantalla */

  width: 100%; /* Asegura que el encabezado ocupe todo el ancho de la pantalla */

  z-index: 1000; /* Asegura que el encabezado esté encima de otros elementos */

}



body {

  padding-top: 70px; /* Agrega espacio para evitar que el contenido quede oculto detrás del encabezado */

}



.logo {

  display: flex;

  align-items: center;

}



.logo img {

  height: 80px;

  margin-left: 60px;

}



nav a {

  color: #493188;

  text-decoration: none;

  font-size: 15px;

  padding: 5px 10px;

  transition: background-color 0.3s;

  margin-right: 20px;

}



nav a:hover {

  background-color: #493188;

  color: white;

  border-radius: 5px;

}



@media (max-width: 700px) {

  header {

    flex-direction: column;

  }



  nav {

    padding: 10px 0px;

  }

}













/* Estilos generales */



.section--info {

  display: flex;

  flex-direction: column; 

  justify-content: center;

  align-items: center;

  height: auto; 

  background: url(./img/bg_presentacion.webp) no-repeat center;

  background-size: cover;

  padding: 40px 20px; 

}



.section__title {

  margin-top: 10px;

  font-size: 30px; 

  font-weight: 600;

  text-transform: uppercase;

  color: white;

  text-align: center;

  line-height: 45px;

}



.parrafo_head {

  margin-bottom: 40px;

  font-size: 16px; 

  color: #fff;

  text-align: center;

  margin: 0 20px; 

  line-height: 25px;

}



.section__button {

  display: inline-block;

  margin-top: 15px;

  padding: 10px 40px;

  border: 2px solid #ffffff;

  color: white;

  text-decoration: none;

  background: none;

  border-radius: 20px;

}



.section__button:hover {

  background: #e41ada;

}



.btn_home {

  display: flex;

  justify-content: center; 

}



/* Media Queries para mejorar la responsividad */

@media (min-width: 600px) {

  .section--info {

    height: 50vh; 

  }



  .section__title {

    font-size: 40px; 

  }



  .parrafo_head {

    font-size: 18px; 

  }

}













p {

  color: #493188;

  text-align: justify;

  line-height: 1.5; 

  margin: 20px auto; 

  max-width: 800px; 

}



.title {

  color: #493188;

  text-align: center;

  font-size: 30px; 

  margin-top: 10px;

  line-height: 1.2; 

}



.pregunta {

  background: url(./img/BG_Pregunta.webp);

  background-size: cover;

  margin: 0;

  padding: 30px;

}



.sau {

  padding: 30px;

  background: url(./img/BG_Pregunta2.webp);

}



/* Estilos responsivos */

@media (max-width: 768px) {

  .title {

      font-size: 24px; 

  }



  p {

      margin-left: 15px; 

      margin-right: 15px; 

  }

}













.ov {

  background: url(./img/BG_CIMP.webp);

  padding: 100px 20px; 

  background-size: cover;

}



.description-box {

  max-width: 1024px;

  margin: 0 auto;

  margin-top: -70px; 

  display: flex; 

  flex-wrap: wrap; 

  justify-content: space-between; 

}



.img-container {

  box-sizing: border-box;

  width: 100%; 

  margin: 20px 0; 

}



.logoCIMP {

  height: auto; 

  max-height: 80px; 

  width: 100%; 

  margin: 20px auto; 

  display: block; 

}



/* Estilos para pantallas más grandes */

@media (min-width: 600px) {

  .img-container {

    width: 48%; 

  }

}



.tit {

  text-align: center;

  color: aqua;

  font-size: 28px; 

}



.big {

  margin: 20px 0; 

}



.img-container p {

  text-align: justify;

  font-size: 16px; 

  color: #fff;

}



.logoCIMP {

  max-height: 100px; 

}

















.section__title2 {

  height: 300px;

  width: 300px;

}



.sau3 {

  background: url(./img/BG_Pregunta2.webp);

  background-size: cover; 

  padding: 20px; 

}



.parrafo_head2 {

  margin-bottom: 30px;

  font-size: 15px;

  color: #493188;

  text-align: center;

  margin: -50px auto 30px; 

  max-width: 90%; 

}



.section__button2 {

  display: inline-block;

  margin-top: 15px;

  padding: 10px 40px;

  border: 2px solid #493188;

  color: #493188;

  text-decoration: none;

  background: none;

  border-radius: 20px;

  font-size: 16px; 

}



.section__button2:hover {

  background: #493188;

  color: white;

}



.btn_home2 {

  display: flex; 

  justify-content: center; 

  margin: 20px 0; 

}



.btn_home2 a {

  margin: 0 10px;

}



/* Media Queries para mejor responsividad */

@media (max-width: 600px) {

  .section__title2 {

    max-width: 80%;

  }



  .parrafo_head2 {

    font-size: 14px; 

  }



  .section__button2 {

    padding: 10px 20px; 

    font-size: 14px; 

  }

}



















.section--ponentes {

  background: url(./img/BG_Expositores02.webp);

  background-size: cover; 

  padding: 100px 20px; 

  text-align: center; 

}



.section__subtitle {

  font-size: 40px; 

  color: #ffffff;

  margin: 0; 

}



/* Media Queries para mejor responsividad */

@media (min-width: 600px) {

  .section__subtitle {

    font-size: 50px; 

    margin-top: -90px; 

  }

}



.section__img {

  max-width: 100%; 

  height: auto; 

  margin-top: 20px; 

}







.section--moderadores {

  background: url(./img/BG_Expositores02.webp);

  background-size: cover;

  padding: 100px 20px; 

  text-align: center; 

}



.section__subtitle2 {

  font-size: 40px; 

  color: #ffffff;

  margin: 0; 

}



/* Media Queries para mejor responsividad */

@media (min-width: 600px) {

  .section__subtitle2 {

    font-size: 50px; 

    margin-top: -90px; 

  }

}



.section__img {

  max-width: 100%; 

  height: auto; 

  margin-top: 20px; 

}







 











.fotos-y-video {

  background: url(./img/BG_Pregunta2.webp);

  background-size: cover; 

  padding: 100px 20px; 

  text-align: center; 

}



.section__subtitleFV {

  font-size: 40px; 

  color: #493188;

  margin: -150px auto 30px; 

}



/* Contenedor de videos */

.container-box2 {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  align-items: center;

  margin: 20px 0; 

}

.videos-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.box2 {

  margin: 10px; 

  flex: 1 1 300px; 

}



/* Ajustes para iframe */

.box2 iframe {

  max-width: 100%;

  max-height: 100%;

}



/* Media Queries para mejor responsividad */

@media (min-width: 600px) {

  .section__subtitleFV {

    font-size: 50px; 

    margin-top: -90px; 

  }

}



















.pe{

  text-align: center;

  margin-left: 20px;

}





.titulo-informacion{

  font-size: 30px;

  color: #493188; 

}



.titulo-informacion{

  background: url(./img/BG_Pregunta.webp);

  padding: 10px;

}













.container {

  padding: 20px; 

}



.inscribe__wrapper {

  display: flex;

  justify-content: space-between; 

  flex-wrap: wrap; 

}



.inscribe__container {

  background: #493188; 

  border-radius: 0px; 

  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); 

  padding: 20px; 

  margin: 10px;

  flex: 1 1 45%; 

}



.inscribe__container h5 {

  text-align: center; 

  margin-bottom: 10px; 

  color: white;

}



.section__button {

  display: inline-block;

  margin-top: 15px;

  padding: 10px 20px;

  border: 2px solid #ffffff;

  color: #ffffff;

  text-decoration: none;

  border-radius: 20px;

  background: none;

  text-align: center;

}



.section__button:hover {

  background: #ffffff;

  color: rgb(0, 0, 0);

}



.titulo{

  font-size: 40px;

  color: #493188;

}























/* Estilos para la sección de información */

.info {

  text-align: center; 

  padding: 20px;

}



.titulo-informacion {

  font-size: 30px;

  color: #493188;

  margin-bottom: 20px;

}



.pe {

  margin: 0 auto; 

  max-width: 600px; 

  font-size: 18px;

  line-height: 1.5;

  color: #493188;

}

















/*Bton para subir*/

.back-to-top {

  position: fixed; 

  bottom: 20px; 

  right: 20px; 

  background-color: #493188; 

  color: white; 

  padding: 10px 15px; 

  border-radius: 5px; 

  text-decoration: none; 

  display: none; 

  z-index: 1000; 

}



.back-to-top:hover {

  background-color: #e41ada; 

}

























/* Styles for Ponentes */

.profile-img {

    width: 250px;

    height: 250px;

    object-fit: cover;

    filter: grayscale(100%);

    transition: filter 0.4s ease;

    cursor: default; /* Cambiar el cursor a predeterminado */

}



.profile-wrapper:hover .profile-img {

  filter: grayscale(0%);

}



/* Eliminar hover en el contenedor */

.profile-hover {

    display: none; /* Ocultar el contenido de hover */

    opacity: 0; /* Eliminar la opacidad */

    transition: none; /* Eliminar transiciones */

    background: #433384

}


.row {

    display: flex;

    justify-content: space-between; /* Espaciado uniforme */

    gap: 30px; /* Espaciado entre imágenes */

}



.profile-img {

    width: 200px; /* Nuevo tamaño */

    height: 200px; /* Nuevo tamaño */

    filter: grayscale(100%); /* Blanco y negro por defecto */

    transition: filter 0.4s ease-in-out; /* Suaviza el cambio */

    cursor: pointer; /* Manito al pasar el mouse */

}



.profile-img:hover {

  filter: grayscale(0%); /* Vuelve a color */

}





/* Ajustar tamaño y diseño de las imágenes en la sección de Ponentes */


/* Estilos para sección de Ponentes con scroll y hover */

.ponentes-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

    max-height: 600px; /* Altura máxima para scroll */

    overflow-y: auto; /* Habilitar scroll vertical */

    scrollbar-width: thin; /* Scroll más delgado */

    scrollbar-color: #888 #f1f1f1; /* Color del scroll */

    margin: 0 auto; /* Centrar horizontalmente */

    width: fit-content; /* Ajustar el ancho al contenido */

}



.ponentes-container::-webkit-scrollbar {

    width: 8px; /* Ancho del scroll */

}



.ponentes-container::-webkit-scrollbar-track {

    background: #f1f1f1; /* Fondo del track */

    border-radius: 10px; /* Bordes redondeados */

}



.ponentes-container::-webkit-scrollbar-thumb {

    background: #888; /* Color del thumb */

    border-radius: 10px; /* Bordes redondeados */

}



.ponentes-container::-webkit-scrollbar-thumb:hover {

    background: #555; /* Color al pasar el cursor */

}







/* Styles for Ponentes */

.profile-wrapper {

  position: relative;

  width: 200px;

  height: 200px;

  overflow: hidden;

}



.profile-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(100%);

  transition: filter 0.4s ease;

  display: block;

}



.profile-wrapper:hover .profile-img {

  filter: grayscale(0%);

}



/* Overlay al pasar el mouse */

.profile-hover {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  background: rgba(0, 0, 0, 0.5);

  opacity: 0;

  transition: opacity 0.4s ease;

}



.profile-wrapper:hover .profile-hover {

  opacity: 1;

}



/* Nombre */

.profile-name {

  color: #fff;

  font-size: 1.2rem;

  font-weight: bold;

  margin-bottom: 10px;

}



/* Botón Ver más */

.profile-more {

  background: #5b269c;

  color: #fff;

  padding: 6px 14px;

  border-radius: 6px;

  cursor: pointer;

  font-size: 0.9rem;

  font-weight: 500;

  transition: background 0.3s ease;

}



.profile-more:hover {

  background: #431c76;

}





.profile-more {

  background: #5b269c;

  color: #fff;

  padding: 6px 14px;

  border: none;

  border-radius: 6px;

  cursor: pointer;

  font-size: 0.9rem;

  font-weight: 500;

  transition: background 0.3s ease;

}



.profile-more:hover {

  background: #431c76;

}





#modal-bio p {

  margin-bottom: 12px;

  line-height: 1.6;

  color: #444;

  text-align: justify;

}



.profile_effect:hover{
    background: #433384
}

.ponentes-container .profile-wrapper .foto img {
    width: 100%;
    height: auto;
    -webkit-filter: grayscale(1);
    -webkit-filter: grayscale(100%);
    filter: url("#greyscale");
    filter: #808080;
    filter: grayscale(100%)
}

.profile_effect:hover img {
    opacity: .4;
}

.tabs-container {
  display: flex;
  flex-direction: column;
  align-items: center; /* Centra horizontalmente todo el contenido */
}

.nav-tabs {
  display: flex;
  //justify-content: center; /* Centra los tabs */
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: 2px solid #ddd;
}

.nav-tabs li {
  margin: 0 10px;
}

.nav-tabs a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
  text-align: center; /* Centra el texto dentro del botón */
}

.nav-tabs .active a {
  background: #433384;
  color: #fff;
}

.tab-content {
  display: none;
  padding: 20px;
}

.tab-content.active {
  display: block;
}


/* Ajustar tamaño y diseño de las imágenes en la sección de Ponentes */

.section_colaboradores {

  //background: url(./img/.webp);
  background-size: cover; 
  padding: 50px 20px; 
  text-align: center; 

}

.colaboradores-container {

    display: flex;

    flex-direction: column;

    gap: 20px;

    max-height: 600px; /* Altura máxima para scroll */

    overflow-y: auto; /* Habilitar scroll vertical */

    scrollbar-width: thin; /* Scroll más delgado */

    scrollbar-color: #888 #f1f1f1; /* Color del scroll */

    margin: 0 auto; /* Centrar horizontalmente */

    width: fit-content; /* Ajustar el ancho al contenido */

}

.row-colaboradores {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 35px;
}

.profile-wrapper-colaboradores {
  position: relative;
  width: 200px;
  height: 150px;
  overflow: hidden;
  align-content: center;
}

.profile-img-colaboradores {
    width: 200px;
    object-fit: cover;
    transition: filter 0.4s ease;
    cursor: default; /* Cambiar el cursor a predeterminado */
}



/** Centrar botones ver programa / ver brochure */
.container-buttons {
  display: flex !important;
  gap: 10px; /* espacio entre botones */
  justify-content: center; /* o center / space-between según prefieras */
  margin-top: 30px; 
}

.nav-link.active {
  color: white;
  background-color: #433384;
  border-radius: 4px;
}

.nav-tabs li.active a {
  background-color: #433384;
  color: white;
}

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}