body,html{font-family: "Roboto Condensed", sans-serif; background-color:#fff}a:active,a:hover,a:link,a:visited{text-decoration:none}.space0{margin-top:5px;margin-bottom:5px}.space1{margin-top:10px;margin-bottom:10px}.space2{margin-top:20px;margin-bottom:20px}.space3{margin-top:30px;margin-bottom:30px}.space4{margin-top:40px;margin-bottom:40px}.space5{margin-top:50px;margin-bottom:50px}.space6{margin-top:60px;margin-bottom:60px}.space7{margin-top:70px;margin-bottom:70px}.space8{margin-top:80px;margin-bottom:80px}.space9{margin-top:90px;margin-bottom:90px}.space10{margin-top:100px;margin-bottom:100px}.no-padding{margin:0;padding:0}
a:active,
a:hover,
a:link,
a:visited {
    text-decoration: none;
    color: #fff;
}
html{
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  /*padding-top: 180px;*/ /* según la altura total visible de header + menudisp */
}






  .roboto-condensed {
    font-family: "Roboto Condensed", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400; /* Puedes cambiar a 300, 500, 700, etc. según necesites */
    font-style: normal;
  }


  .encabezado {
    width: 100%;
    position: fixed;
    background-color: #fff;
    z-index: 100;
    top: 0px;
    min-height: auto; /* o ajusta según la huella */
    
}


.espacioheader{
    height: 250px;
}

.piedepagina{
    background-color: #242753;
    padding: 10px 10px 10px 10px;
    margin-top: 30px;
}


.fondobolitasss {
    background-image: url(../img/3x/fondobolitas2@3x.png);
    background-repeat: no-repeat;
    margin: 50px;
    background-size: 100%;
    height: auto;
    text-align: center;
  }
  
  .fondobolitasss img {
    width: 90%;
  }


.nombreempresalist h2{
    margin: 0px;
    font-size: 1.4em;
    color: #252554;
    font-weight: 500;
}

.icoarrow{
    width: 20px;
}
.alcentrosiempre{
    /* text-align: center; */
}

/* EFECTO EN LISTAS DEL CONTENIDO DEL SITIO */

.infoest a {
  text-decoration: none;
  color: #1c1c46;
  transition: color 0.3s ease;
}

.infoest i {
  transition: transform 0.3s ease;
  color: #1c1c46;
}

.infoest:hover a {
  color: #1c1c46; /* azul oscuro */
}

.infoest:hover i {
  transform: translateX(5px);
  color: #1c1c46;
}


.infoest p{
    text-align: left;
}

  .encuentro-link {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
  }

  .encuentro-link i {
    margin-right: 10px;
    color: #cc0000; /* rojo PDF */
    transition: transform 0.3s ease;
  }

  .encuentro-link a {
    color: #1c1c46;
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .encuentro-link:hover i {
    transform: translateX(5px);
    color: #900;
  }

  .encuentro-link:hover a {
    color: #1c1c46;
  }

  /* EFECTO EN LISTAS DEL CONTENIDO DEL SITIO */

.zoomele{
    transition: transform .2s; /* Animation */
    transition: all 0.2s ease;
}
.zoomele:hover{
    transform: scale(1.1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}




.bg-header2{
    background: url(../img/1x/desing2.png) no-repeat center right; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 20px 20px;
    width: 100%;

}

.contenedor2{
    max-width: 900px;
    margin: 0px auto;
}
.contenedor2 p{
    color: #252554;
    font-size: 1.2em;
    font-weight: 300;
}


.infocol{
  

    overflow-x: hidden;
}

.esconder {
    display: none;
}
.menup{
    padding: 0px 10px;
    border-bottom: 1px solid #252554;;
    
}

.infofoot{
    text-align: center;
}

.infofoot p a{
    color: #fff;
    margin: 0px;
}
.infofoot p{
    color: #fff;
    font-size: 1em;
    margin: 0px;
}

.menup{
    padding:0px 0px;
    margin: 0;
    width: 100%;
    overflow: hidden;
}


.infonoticas h1{
    margin: 0px;
    font-size: 1.5em;
    color: #252554;
}
.infonoticas h2{
    margin: 0px;
    font-size: 1.4em;
    color: #252554;
    font-weight: 500;
    font-style: italic;
}
.infonoticas p{
    margin: 0px;
    font-size: 15px;
    color: #252554;
    margin-bottom: 20px !important;
    text-align: justify;
}


.infonoticas p a{
    margin: 0px;
    color: #252554;
}
.infonoticas ul li{
    margin: 0px;
    color: #252554;
    font-size: 15px;
}

.infonoticas ol li{
    margin: 0px;
    color: #252554;
    font-size: 15px;
}
.infonoticas h3{
    margin: 0px;
    font-size: 17px;
    color: #252554;
    font-weight: bold;
    margin-bottom: 5px;
}
.infonoticas h4{
    margin: 0px;
    font-size: 17px;
    color: #252554;
    font-weight: bold;
    margin-bottom: 5px;
}
.infonoticas h3 a{
    color: #252554;
}
.inforev h2{
    margin: 0px;
    font-size: 1.0em;
    color: #252554;
    font-weight: 500;
}
.inforev h2 a{
    color: #252554;
}
.inforev p{
    margin: 0px;
    font-size: 1.2em;
    color: #252554;
}

.notis h2{
    margin: 0px;
    font-size: 1.4em;
    color: #252554;
    font-weight: 500;
}
.notis p{
    margin: 0px;
    font-size: 1.2em;
    color: #252554;
}



.tamanioinfo{
    height: 70vh;
}

.separalines{
    height: 2px;
    background-color: #252554;
    margin-top: 20px;
    margin-bottom: 20px;
}
.logoorgs{
    text-align: center;
}

.imgrev{
    width: 100%;
    text-align: center;
}
.imgrev img{
    width: 50%;
}
.imgrev2{
    width: 100%;
    text-align: center;
}
.imgrev2 img{
    width: 90%;
}


.infocont h1{
    font-size: 18px;
    color: #252554;
    font-weight: 500;
    margin-bottom: 5px;
}
.infocont p{
    margin: 0px;
    font-size: 15px;
    color: #252554;
    font-weight: 300;
}
.infocont a{
    margin: 0px;
    font-size: 15px;
    color: #252554;
    font-weight: 500;
}
/***info del contacto**/
.informacion {
    display: none;
}

.informacion.active {
    display: block;
}

#anterior {
    display: none; /* Ocultar por defecto */
}



#controles {
    margin-top: 30px; /* Espacio inferior respecto al contenido superior */
    text-align: center;
  }
  
  #controles a {
    display: inline-block;
    margin: 0 10px;
    min-width: 80px;
    text-align: center;
    font-weight: bold; /* Cambiado de 500 a bold */
    color: #252554;
    text-decoration: none;
  }
  

.cajaform p{
    font-size: 15px;
    color: #252554;
    font-weight: 400;
}
.cajaform p a{    
    color: #252554;
    font-weight: 400;
}
.cajaform h2{
    font-size: 1.2em;
    color: #252554;
    font-weight: 500;
    font-size: 15px;
}

.campoform{
    width: 100%;
    padding: 5px;
    color: #252554;
    background-color: transparent;
    font-size: 15px;
    border: none;
}

.levelex h3{
    font-size: 1.2em;
    color: #252554;
    font-weight: 500;
    margin: 0px;
}
.lineform{
    border-bottom: 2px solid #252554;
}
.cajabtnnext{
    width: 90%;
}
.btnsig{
    float: right;
}
.btnsig{
    border: none;
    font-size: 1.3em;
    font-weight: 500;
    color: #252554 !important;
    background-color: transparent;
    margin-left: 30px;
}



/*******mapa interativo*****/
.mapaint{
    text-align: center;
}


.titumapa1{
    text-align: center;
}
.titumapa1 img{
    width: 80%;
}

.infocadapais img{
    width: 100%;
}
.lineamaps{
    height: 110px;
    width: 2px;
    background-color: #252554;
    position: absolute;
}
.infobanderamiembros p{
    margin: 0px;
    color: #252554;
    font-size: 1em;
    padding-left: 20px;
}
.infobanderamiembros p span{
    font-weight: 500;
}
.infoplusmiembros p{
    color: #252554;
    font-size: 1.1em;
    text-align: justify;
}
.infoplusmiembros ul li{
    color: #252554;
    font-size: 1.1em;
    text-align: justify;
}
.infoplusmiembros ul li ul li{
    color: #252554;
    font-size: 1.1em;
    text-align: justify;
}
.infoplusmiembros ul li ol li{
    color: #252554;
    font-size: 1.1em;
    text-align: justify;
}
.infoplusmiembros ol li{
    color: #252554;
    font-size: 1.1em;
    text-align: justify;
}



.image-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay-image {
    position: absolute;
    top: 11%; /* Ajusta la posición según sea necesario */
    left: 14%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.overlay-image2 {
    position: absolute;
    top: 45%; /* Ajusta la posición según sea necesario */
    left: 74%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}

.mexico {
    position: absolute;
    top: 11%; /* Ajusta la posición según sea necesario */
    left: 14%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.brasil {
    position: absolute;
    top: 49.5%; /* Ajusta la posición según sea necesario */
    left: 77%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}

.honduras {
    position: absolute;
    top: 19%; /* Ajusta la posición según sea necesario */
    left: 33%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.peru {
    position: absolute;
    top: 43%; /* Ajusta la posición según sea necesario */
    left: 40%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.elsalvador {
    position: absolute;
    top: 21%; /* Ajusta la posición según sea necesario */
    left: 28%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.republica {
    position: absolute;
    top: 15%; /* Ajusta la posición según sea necesario */
    left: 50%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.chile {
    position: absolute;
    top: 68%; /* Ajusta la posición según sea necesario */
    left: 53%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.ecuador {
    position: absolute;
    top: 35%; /* Ajusta la posición según sea necesario */
    left: 39%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.paraguay {
    position: absolute;
    top: 57%; /* Ajusta la posición según sea necesario */
    left: 64%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.colombia {
    position: absolute;
    top: 28.5%; /* Ajusta la posición según sea necesario */
    left: 44.5%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}
.panama {
    position: absolute;
    top: 26%; /* Ajusta la posición según sea necesario */
    left: 35.5%; /* Ajusta la posición según sea necesario */
    width: 30px !important; /* Ajusta el tamaño según sea necesario */
    height: auto;
    cursor: pointer; /* Indica que la imagen es interactiva */
}






.addstik{
    position: sticky;
}

.btnhome{
    padding:10px 20px;
    background-color: #c73834;
    color: #fff;
    font-weight: 500;
    text-align: center;
    position: absolute;
    margin-left: 50px;
    margin-top: -70px;
}

.amarillo{
    background-color: #FFBF3C;
}
.verde{
    background-color: #80BC00;
}

.graciastnks{
    text-align: center;
    padding: 80px 20px;
}
.graciastnks img{
    width: 80%;
}

/* EFECTO BOTON INICIO */
.rojoback{
    transition: background 0.5s ease, color 0.5s ease;
}

.rojoback:hover{
    background: #585a7a;
    color: white !important;
    transition: background 0.5s ease, color 0.5s ease;
}
 


/* Sección Comité Ejecutivo */
/* es\quienes-somos\comites-ejecutivos.html */

#comites h3 {
    font-weight:500;
    color: #252554;
    margin-top: 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#comites h4 {
    font-weight: 400;
    color: #252554;
    margin-top: 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#comites h5 {
    font-weight: bold;
    color: #252554;
    margin-top: 0px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#comites p {
    margin-bottom: 10px;
    font-size: 16px;
    color: #252554;
}

#comites a {
    color: #252554;
    word-break: break-word;
    text-decoration: underline;
}

#comites hr {
    border: none;
    border-top: 2px solid #252554;
    margin: 30px 0;
}


.img-comite-xs {
  margin-bottom: 15px;
  display: block;
}

.bloque-miembro .col-xs-3,
.bloque-miembro .col-xs-9 {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  display: block;
  text-align: center;
}
.bloque-miembro img {
  margin-bottom: 0px;
}
.bloque-miembro h3,
.bloque-miembro h4 {
  text-align: center;
}

@media (max-width: 700px){
    .bloque-miembro .col-xs-3,
    .bloque-miembro .col-xs-9 {
      width: 100%;
      max-width: 100%;
      flex: 0 0 100%;
      display: block;
      text-align: center;
    }
  
    .bloque-miembro img {
      margin-bottom: 10px;
    }
  
    .bloque-miembro h3,
    .bloque-miembro h4 {
      text-align: center;
    }
  }

/* SECCION NOTICIAS BASE */

.noticias-lista {
  /*margin-top: 2rem;*/
}

.noticia-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  border-bottom: 1px solid #ddd;
  padding-bottom: 1.5rem;
}

.noticia-img img {
  max-width: 80px;
  height: auto;
  border-radius: 4px;
}

.noticia-text {
  flex: 1;
}

.noticia-titulo {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: #1d1d4f;
}

.noticia-descripcion {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: #333;
}

/* IMAGEN ORGANIGRAMA CSS BASE*/

.imgcen1 img,
.imgcen2 img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}



/* VIDEOS*/
.contenedor-video {
  max-width: 960px; /* Puedes ajustar a 900, 800, etc. */
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

.video-preview-ytb { 
  position: relative; 
  z-index: 1; 
  cursor: pointer;
}
.video-preview-ytb::before,
.video-preview-ytb::after {
  position: absolute;
  z-index: 1;            /* < card-body (5) */
}

/* 5) Por si algún ratio heredó overlay: cortar desbordes */
.ratio { overflow: hidden; }


.video-preview-ytb img {
  width: 100%;
  height: 100%;        /* ocupa el alto del contenedor */
  object-fit: cover;  /* recorta los bordes negros */ /* se ajusta, puede dejar franjas negras o blancas */
  display: block;
  background: #000;    /* color de fondo de las franjas */
}


/* 3) Overlay del play no bloquea clics ni tapa texto */
.boton-play-ytb {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: #fff;
  text-shadow: 0 0 10px #000;
  pointer-events: none;   /* clave fuera del carrusel también */
  z-index: 2;             /* sobre la imagen, bajo el texto del card */
}

.modal-video {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#modal-video-ytb {
  display: none;
}


.modal-contenido {
  position: relative;
  width: 90%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  background: transparent;
}

.modal-contenido iframe {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: none;
}

.cerrar {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 2.5rem;
  color: white;
  background: transparent;
  cursor: pointer;
  padding: 0 1rem;
}

/* 1) Asegura el apilamiento correcto dentro de las cards con video */
.card .ratio {
  position: relative;    /* contenedor de stacking para el video */
  z-index: 0;
  overflow: hidden;      /* nada sangra fuera del 16:9 */
}

.card .card-body {
  position: relative;    /* lo trae a su propio contexto */
  z-index: 5;            /* SIEMPRE encima del video/overlays */
}

/* 2) El contenedor del preview no invade fuera del 16:9 */
.ratio > .video-preview-ytb {
  position: absolute;
  inset: 0;              /* top/right/bottom/left = 0, más sólido que top/left */
}

/* CSS EVENTOS EN CURSO */

/* Noticia Evento El Salvador y otras nuevas noticias */

.img-1-noticia {
    width: 100%;
    max-width: 540px;
    max-height: 320px;
  }
  .img-1-noticia-wrap {
    flex: 0 0 100% !important;
  }

.contenido-noticia {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contenido-noticia .imagen img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Carrusel noticia: ocupa el ancho de su columna (50%) */
/* ===== Carrusel exclusivo de noticia 12 ===== */
.contenido-noticia .imagen .carousel-noticia12 {
  width: 100%;
}

.contenido-noticia .imagen .carousel-noticia12 .carousel-inner,
.contenido-noticia .imagen .carousel-noticia12 .carousel-item,
.contenido-noticia .imagen .carousel-noticia12 .carousel-item img {
  border-radius: 8px;
  overflow: hidden;
}

.contenido-noticia .imagen .carousel-noticia12 .carousel-item img {
  width: 100%;
  object-fit: cover;
  height: 350px; /* Ajusta según el alto que quieras */
  border-radius: 8px;

}

@media (max-width: 1200px) {
  .contenido-noticia .imagen .carousel-noticia12 .carousel-item img {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .contenido-noticia .imagen .carousel-noticia12 .carousel-item img {
    height: 220px;
  }
}

@media (max-width: 576px) {
  .contenido-noticia .imagen .carousel-noticia12 .carousel-item img {
    height: 180px;
  }
}



/* Ocultar indicadores si usamos thumbnails */
.contenido-noticia .imagen .carousel-noticia12 .carousel-indicators {
  display: none;
}

/* ===== Thumbnails exclusivos ===== */
/* contenedor de thumbs */
.contenido-noticia .imagen .carousel-noticia12-thumbs{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* fuerza tamaño de las miniaturas, sin que Bootstrap las estire */
.contenido-noticia .imagen .carousel-noticia12-thumbs img.thumb{
  width:84px !important;      /* ajusta a gusto */
  height:56px !important;     /* 3:2 */
  max-width:none !important;  /* ignora img-fluid */
  flex:0 0 84px;
  object-fit:cover;
  border-radius:6px;
  opacity:.75;
  cursor:pointer;
  border:2px solid transparent;
  display:block;
}

.contenido-noticia .imagen .carousel-noticia12-thumbs img.thumb.active{
  opacity:1;
  border-color:#0d6efd;
}



.patrocinadores-row {
  row-gap: 3rem; /* Espacio vertical entre filas */
  /*column-gap: 2rem; /* Si quieres también más espacio horizontal */
}

/* Fin seccion ajustes noticias */

/* Estilo base para el texto del botón CLARCIEV */
.evento-en-vivo {
  background-color: white;
  color: #c40000;
  font-weight: bold;
  border-radius: 8px;
  padding: 4px 10px;
  display: inline-block;
  transition: background-color 0.3s ease, color 0.3s ease;
  white-space: normal;
  z-index: 10;
  position: relative;
}

/* Animación al punto rojo */
.pulsante {
  animation: parpadeo 1.2s infinite ease-in-out;
}

@keyframes parpadeo {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* FONDO COMPLETO del ítem al pasar el mouse */
.mostrarDiv7:hover {
  background-color: #c40000 !important;
}

/* TEXTO BLANCO dentro del botón al hacer hover */
.mostrarDiv7:hover .evento-en-vivo {
  background-color: transparent !important;
  color: white !important;
}

/* FONDO COMPLETO del ítem si está marcado como activo */
.mostrarDiv7.activo {
  background-color: #c40000 !important;
}

.mostrarDiv7.activo .evento-en-vivo {
  background-color: transparent !important;
  color: white !important;
}


/* Carrusel evento en curso */
.carousel-evento {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2rem;
  background-color: transparent;
  margin-top: 2rem;
}

.carousel-evento > .card-evento {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 280px;
  margin: 0 0.75rem;
}

.card-evento {
  background-color: #ffffff;
  border: 1px solid #E5E8F0;
  border-radius: 124px;
  box-shadow: 0 4px 12px rgba(33, 35, 79, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding: 1rem; /* <<< agrega esto */
  box-sizing: border-box; /* <<< asegura que el padding no rompa el layout */
}

.card-evento .card-img-top {
  width: 100%;
  height: auto;
  border-radius: 124px;
}


.card-evento:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(33, 35, 79, 0.12);
}

.card-evento .card-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: #21234F;
}

.card-evento .card-text {
  color: #555;
  font-size: 0.95rem;
}

.card-evento .card-img-top {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

/* Flechas carrusel */
.carousel-arrow {
  background-color: #EBF3FC;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  font-size: 20px;
  color: #21234F;
  transition: background-color 0.3s ease, box-shadow 0.2s ease;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.carousel-arrow:hover {
  background-color: #D7E7FB;
  color: #000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Youtube Evento en Curso */

.boton-play-ytb-evento-en-curso {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 4rem;
  color: white;
  text-shadow: 0 0 10px black;
}

.infosecEventoEnCurso {
    padding-top: 100px;
    padding-bottom: 40px;
    min-height: calc(100vh - 160px);
    box-sizing: border-box;
}

.infosecEventoEnCurso2 {
    padding-top: 100px;
    padding-bottom: 25px;
    min-height: calc(100vh - 160px);
    box-sizing: border-box;
    background: linear-gradient(180deg, #fff,#f8fafc);
    color: #242754;
}

/* Pestañas normales */
#tabsSemana.nav-tabs .nav-link {
  background-color: #242754;
  color: #fff;
  border: none;
  border-radius: 0;
  margin-right: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover con inversión */
#tabsSemana.nav-tabs .nav-link:hover {
  background-color: #fff;
  color: #242754;
}

/* Pestaña activa */
#tabsSemana.nav-tabs .nav-link.active {
  background-color: #fff;
  color: #242754;
  border: none;
  border-bottom: 3px solid #242754;
}

/* Contenido sin borde superior duplicado */
#tabsSemanaContent {
  border-top: none;
}

/* Botones */
.btn-vermas, .btn-cerrar, .btn-close {
  background-color: #242754;
  color: white;
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover inverso para botones */
.btn-vermas:hover,
.btn-cerrar:hover,
.btn-close:hover {
  background-color: #fff;
  color: #242754;
  border: 1px solid #242754;
}



/* Botón X blanca */
.btn-close {
  border-radius: 0.25rem;
  opacity: 1 !important;
  --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/></svg>") !important;
  background-color: #242754 !important;

}

/* HOVER: invertir colores */
.btn-close:hover,
.btn-close:focus {
  background-color: #fff !important;
  --bs-btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23242754'><path d='M2.146 2.146a.5.5 0 0 1 .708 0L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.tituloCentradoEvento2 img {
    width: 100%;
    height: auto;
    max-width: 100% !important;
}

#logoCampania{
  display: block;
  margin: 0 auto;       /* centrado */
  height: auto;
  width: 100%;
  
}

/* === CLARCIEV WEEK – HERO MEDIA (aislado) === */

.cw-hero-video { width:80%; max-width:900px; margin:0 auto; }
.cw-hero-16x9-video { position:relative; width:100%; aspect-ratio:16/9; }
.cw-hero-16x9-video .video-preview-ytb-video { position:relative; width:100%; height:100%; }
.cw-hero-16x9-video .cw-ytb-thumb-video { width:100%; height:100%; object-fit:cover; } /* llena sin deformar */
/* Imagenes normales → no forzar alto */
.cw-thumb-normal {
  width: 100%;
  height: auto;        /* mantiene proporción */
  object-fit: contain; /* no recorta */
  border-radius: 12px;
  display: block;
}

.cw-hero {
  width: 80%;
  max-width: 900px;      /* el logo “manda” el tamaño */
  margin: 0 auto;
}

.cw-hero-16x9 {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;  /* misma altura para imagen y video */
}

.cw-hero-16x9 > * {
  width: 100%;
  height: 100%;
  display: block;
}

.cw-hero-16x9 img {
  object-fit: contain;   /* no recorta el logo */
}

.cw-hero-16x9 iframe {
  border: 0;
}


/* mano al pasar por el área clickeable del video */
#carouselCampania .video-preview-ytb-video {
  cursor: pointer;
  position: relative; /* por si posicionas el play */
  width: 100%;
  height: 100%;
  object-fit: cover;  /* recorta las franjas negras */
  display: block;
}

/* el ícono no bloquea el click del contenedor */
#carouselCampania .boton-play-ytb {
  pointer-events: none;
}

/* fondo degradé estilo hero-artistico + bordes y máscara */
/* fondo degradé CLARO + bordes y máscara */
#carouselCampania .cw-hero,
#carouselCampania .cw-hero-video {
  background: linear-gradient(
    180deg,
    #fbfcff 0%,
    #eef2ff 40%,
    #e7ebf8 100%
  );
  border-radius: 18px;
  overflow: hidden;
  /*padding: 12px;*/
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

/* asegúrate que los contenedores 16:9 ocupen todo el ancho */
#carouselCampania .cw-hero-16x9,
#carouselCampania .cw-hero-16x9-video {
  width: 100%;
}

/* primer bloque */
#carouselCampania .cw-hero-16x9 img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 12px;
}

/* segundo bloque (duplicado) */
#carouselCampania .cw-hero-16x9-video img {
  width: 100%;
  height: auto;   /* <- aquí está el problema */
  object-fit: cover;
  border-radius: 12px;
}



/* degradé más sutil y menos alto */
#carouselCampania .cw-hero-video { position: relative; }
#carouselCampania .cw-hero-video::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:36%;
  background: linear-gradient(to top, rgba(12,16,38,.65), rgba(12,16,38,0));
  border-radius: inherit;
  pointer-events:none;
  z-index: 2;
}

/* Texto a lo ancho del slide */
#carouselCampania .carousel-caption-box {
  left: 0 !important;
  right: 0 !important;
 /* bottom: 70px;                /* justo encima de los indicadores */
  padding: 5px 6px;
  color: #fff;
  text-align: center;
  margin: 0;                    /* sin margen lateral */
  max-width: none !important;   /* por si quedó algún max-width anterior */
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(12,16,38,.30), rgba(12,16,38,.70));
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  z-index: 3;
}

/* que la barra ocupe TODO el ancho del slide */

#carouselCampania .carousel-caption-box h5 {
  margin: 0 0 4px;
  font-weight: 900;
  font-size: 1.45rem;
  text-shadow: 0 1px 3px rgba(0,0,0,.6);
}

#carouselCampania .carousel-caption-box p {
  margin: 0;
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}

/* Degradé en la parte baja del slide */
#carouselCampania .cw-hero-video {
  position: relative;
}

#carouselCampania .cw-hero-video::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, rgba(12,16,38,.70), rgba(12,16,38,0));
  border-radius: inherit;
  pointer-events: none;
  z-index: 2; /* debajo del texto */
}




/* tipografía más liviana */
#carouselBienvenida .carousel-caption-box p,
#carouselBienvenida .carousel-caption-box strong{
  color:#fff;
}

/* animación */
@keyframes fadeInUp{
  from{ transform: translateY(12px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}


/* Responsive */

@media (max-width: 992px) {
  #carouselCampania .carousel-caption-box {
    left: 10px;
    right: 10px;
    bottom: 30px;
    /*padding: 8px 10px;*/
    border-radius: 10px;
  }
  #carouselCampania .carousel-caption-box h5 {
 
  font-weight: 900;
  font-size: 1.00rem;
  }
  #carouselCampania .carousel-caption-box p {
    font-size: 0.95rem;
  }

  #carouselCampania .carousel-indicators {
    display: none; /* opcional: ocultar subtítulo en pantallas muy chicas */
  }
}

@media (max-width: 768px) {
  #carouselCampania .carousel-caption-box {
    left: 10px;
    right: 10px;
    bottom: 20px;
    /*padding: 8px 10px;*/
    border-radius: 10px;
  }
  #carouselCampania .carousel-caption-box h5 {
 
  font-weight: 500;
  font-size: 1.05rem;
  }
  #carouselCampania .carousel-caption-box p {
    font-size: 0.85rem;
  }

  #carouselCampania .carousel-indicators {
    display: none; /* opcional: ocultar subtítulo en pantallas muy chicas */
  }
}


@media (max-width: 380px) {
  #carouselCampania .carousel-caption-box p {
    display: none; /* opcional: ocultar subtítulo en pantallas muy chicas */
  }

  #carouselCampania .carousel-caption-box h5 {
    display: none; /* opcional: ocultar subtítulo en pantallas muy chicas */
  }

  #carouselCampania .carousel-indicators {
    display: none; /* opcional: ocultar subtítulo en pantallas muy chicas */
  }
}

/* titulos paises */
/* Título del sub-hero: intermedio (≈32–42px) */
#subhero-pais h2,
.subhero-title{
  font-weight: 800;
  line-height: 1.1;
  /* min 32px, escala fluida, max ~42px */
  font-size: clamp(1.3rem, 3vw, 2.0rem); 
}


.subhero{
  --accent:#1f2937;          /* se setea por JS */
  --accent-hover:#111827;    /* se setea por JS */
  --chip: rgba(0,0,0,.06);
  background: linear-gradient(180deg,#fff, #f8fafc);
  border: 1px solid #e5e7eb; border-radius: 16px; padding: 16px 20px;
}
.subhero .eyebrow{
  display:inline-block; font-size:.8rem; letter-spacing:.12em;
  text-transform:uppercase; color: var(--accent);
  background: var(--chip); padding:.2rem .5rem; border-radius:999px; margin-bottom:.25rem;
}
.subhero h2{ font-weight:700; font-size: clamp(1.25rem, 2.2vw, 1.75rem); color:#0f172a; }
.flag-ring{ width:64px; height:64px; border-radius:999px; padding:6px;
  background:#fff; box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 18%, transparent);
}
.flag-ring img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.subhero:hover{ border-color: color-mix(in oklab, var(--accent) 35%, #e5e7eb); }



#agenda-pais {
  background: linear-gradient(180deg,#f8fafc, #fff);
  margin-top: 0;
}

#agenda-pais h3{
  color: #242754;
}

.secciones-evento {
 /*  margin-top: 60px; o lo que necesites */
 background: linear-gradient(180deg,#f8fafc, #fff);
  position: relative;
  z-index: 1;
}

.form-select:focus{
  border-color: #e7ebf8;
  outline: 0;
  box-shadow: 0 0 0 .25rem #e7ebf8;
}

.form-select{
color: #242754;

}

/* Tooltip */

.tt{ position:relative; }
.tt::after{
  content: attr(data-tooltip);
  position:absolute;
  left:50%; bottom:100%;
  transform: translate(-50%, 6px);
  background:#242754; color:#fff;
  padding:.45rem .6rem; border-radius:.5rem;
  white-space:nowrap; pointer-events:none;
  opacity:0; transition: opacity .2s, transform .2s;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  z-index:20;
}
.tt::before{
  content:"";
  position:absolute;
  left:50%; bottom:100%;
  transform: translate(-50%, 12px) rotate(45deg);
  width:10px; height:10px; background:#242754;
  opacity:0; transition: opacity .2s, transform .2s; z-index:19;
}
.tt:hover::after, .tt:focus-visible::after,
.tt:hover::before, .tt:focus-visible::before{
  opacity:1; transform: translate(-50%, 0);
}