/* ========== FONTS ========== */

@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Geist:wght@100..900&family=Outfit:wght@100..900&display=swap");

/* ============================== 

HEADER 

============================== */

header.container-fluid {
  position: relative;
}

/* Establecemos un z-index mayor para la navbar para asegurarnos que esté encima */
.navbar {
  z-index: 5;
}

.nav-link {
  font-family: "Figtree", sans-serif;
  font-size: 16px;
  font-weight: 300;
  font-optical-sizing: auto;
  font-style: normal;
}

nav img {
  width: 150px;
  height: auto;
}

.navbar-hidden {
  transform: translateY(-100%);
  transition: transform 1.5s ease-in-out;
}

.navbar-scrolled {
  background-color: rgba(
    0,
    0,
    0,
    0.8
  ) !important; /* Cambia el color a negro semi-transparente */
  transition: background-color 1.5s ease-in-out;
}

.botonTop {
  background-color: #00a3e4;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  font-weight: 400;
  transition: all 5ms;

  border: none;
  border-radius: 10px;

  padding: 5px 15px;
}

.botonTop:hover {
  background-color: #fff;
  color: #00a3e4 !important;
}

.carousel-celular {
  font-size: 30px;
  font-family: "Geist", sans-serif;
  color: white;
}

/* ============================== 

CAROUSEL

============================== */

.carousel-item {
  width: 100%;
  height: 100vh;
  max-height: 1080px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.carousel-indicators .active {
  background-color: #00a3e4;
}

.carousel .carousel-indicators button {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  margin: 25px 20px;
}

.carousel .carousel-item .carousel-caption {
  max-width: 900px;
  height: 280px;
  margin-left: auto;
  margin-right: auto;
}

.carousel .carousel-item .carousel-caption h5 {
  font-family: "Figtree", sans-serif;
  font-weight: 100;
  font-size: 60px;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1;
}

.carousel button {
  color: #33b5e9;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  height: 30px;
  width: 30px;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  background-size: 70%, 70%;
  border-radius: 50%;
  transition: all 3ms;
}

.ad1 {
  background: url(../images/Image_1.webp) no-repeat top center fixed;
}
.ad2 {
  background: url(../images/Image_2.webp) no-repeat top center fixed;
}
.ad3 {
  background: url(../images/Image_3.webp) no-repeat top center fixed;
}
.ad4 {
  background: url(../images/Image_4.webp) no-repeat top center fixed;
}
.ad5 {
  background: url(../images/Image_5.webp) no-repeat top center fixed;
}

@media (max-width: 1170px) {
  #carouselExampleCaptions .carousel .carousel-item .carousel-caption h5 {
    font-size: 40px;
  }
  #carouselExampleCaptions .carousel .carousel-item .carousel-caption {
    max-width: 900px;
    height: 200px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 768px) {
  #carouselExampleCaptions {
    visibility: hidden;
  }
  .carousel-item {
    width: 100%;
    height: auto;
  }

  $.carousel-item {
    width: 100%;
    height: 80vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

  #textCarousel2 .carousel-celular {
    font-family: "Figtree", sans-serif;
    font-weight: 100;
    font-size: 28px;
    font-optical-sizing: auto;
    font-style: normal;
    line-height: 1;
  }

  #textCarousel2 .carousel-item {
    height: 150px;
  }
}

/* ============================ 

CURRICULUM

============================ */
#curriculum {
  margin-top: 100px;
}

#curriculum p {
  font-family: "Figtree", sans-serif;
  font-weight: 100;
  font-size: 18px;
  text-align: justify;
  color: #676465;
}

#logoJC {
  max-width: 400px;
}

.fuenteBold {
  font-weight: 600;
}

@media (max-width: 768px) {
  #logoJC {
    max-width: 250px;
  }
}

/* ============================ 

EXPERTISE

============================ */

#expertise {
}

.tituloExp {
  font-size: 96px;
  font-weight: 300;
  font-family: "Figtree", sans-serif;
  line-height: 1;
}

.side-img {
  object-fit: cover;
  width: auto;
}

.textoExp {
  color: #8a8b8c;
  font-weight: 300;
  font-size: 24px;
  font-family: "Figtree", sans-serif;
}

@media (max-width: 768px) {
  .tituloExp {
    font-size: 44px;
  }
  .textoExp {
    font-size: 16px;
  }

  #expertise img {
    width: 300px;
    margin-top: -80px;
  }
}

/* ============================ 

BENEFICIOS

============================ */

#beneficios {
}

#beneficios .contenedor {
  height: 90vh;
}

.tituloBen {
  font-size: 96px;
  font-weight: 300;
  font-family: "Figtree", sans-serif;
  line-height: 1;
  padding-left: 25%;
}

.lista {
  text-align: left;
  width: 90%;
}

#beneficios .puntos {
  font-size: 28px;
  font-weight: 300;
  color: #fff;
  font-family: "Figtree", sans-serif;
}

@media (max-width: 1380px) {
  .tituloBen {
    font-size: 80px;
    padding-left: 20%;
  }
}

@media (max-width: 1080px) {
  .tituloBen {
    font-size: 70px;
    padding-left: 20%;
  }
  #beneficios .puntos {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .tituloBen {
    font-size: 40px;
    padding-left: 10%;
  }

  #beneficios .puntos {
    font-size: 14px;
  }

  #beneficios .contenedor {
    height: auto;
    padding-top: 50px;
  }
}

/* ============================ 

CONFERENCIA

============================ */

#conferencia {
  height: auto;
  background-color: #010304;
}

.titulo-main {
  font-size: 204px;
  font-weight: bold;
  color: #535353; /* Color recomendado*/
  font-family: "Figtree", sans-serif;
}

.titulo-conferencia {
  color: #ffffff;
  font-size: 120px;
  font-weight: 300;
  font-family: "Figtree", sans-serif;
  line-height: 1;
}

#conferencia .puntos {
  font-size: 24px;
  font-weight: 300;
  color: #fff;
  font-family: "Figtree", sans-serif;
}

.duracion {
  font-size: 16px;
  font-weight: 300;
  color: #fff;
  font-family: "Figtree", sans-serif;
  margin: 30px 0px;
}

.btn-conferencia {
  font-size: 16px;
  font-weight: 600;
  color: #00a3e4;
  margin: 30px 10px 30px 30px;
}

.btn-conferencia:hover {
  color: #003adc;
}

.flecha {
  font-size: 20px;
  font-weight: 600;
  color: #00a3e4;
  vertical-align: middle;
}

.flechasConferencias {
  width: 240px;
  height: 40px;
  position: absolute;
  margin-right: 150px;
  z-index: 999;
}

.flechasConferencias .izq {
  width: 40px;
  height: 40px;
  cursor: pointer;

  display: flex;
  display: inline-block;

  background-image: url("../images/left-small_1.png");
  background-repeat: no-repeat;

  transition: all 0.5s ease-in-out 0s;
}

.flechasConferencias .izq:hover {
  background-image: url("../images/left-small_2.png");
}

.flechasConferencias .der {
  width: 40px;
  height: 40px;
  cursor: pointer;

  margin-left: 150px;

  display: flex;
  display: inline-block;
  align-items: flex-end;

  background-image: url("../images/right-small_1.png");
  background-repeat: no-repeat;

  transition: all 0.5s ease-in-out 0s;
}

.flechasConferencias .der:hover {
  background-image: url("../images/right-small_2.png");
}

@media (max-width: 1280px) {
  .titulo-main {
    font-size: 180px;
  }
  .titulo-conferencia {
    font-size: 100px;
  }
}

@media (max-width: 1080px) {
  .titulo-main {
    font-size: 120px;
  }
  .titulo-conferencia {
    font-size: 80px;
  }
}

@media (max-width: 768px) {
  .titulo-main {
    font-size: 90px;
  }
  .titulo-conferencia {
    font-size: 60px;
  }
  #conferencia .puntos {
    font-size: 12px;
    margin-top: 30px;
  }
  .duracion {
    font-size: 12px;
    margin: 20px 0px;
  }

  .btn-conferencia {
    font-size: 12px;
    margin: 0px 10px 20px 30px;
  }
  .flechasConferencias {
    margin-right: 100px;
  }
}

@media (max-width: 668px) {
  .titulo-main {
    font-size: 70px;
  }
  .titulo-conferencia {
    font-size: 40px;
  }
  #conferencia .puntos {
    font-size: 24px;
  }
  .duracion {
    font-size: 20px;
    margin: 30px 0px;
  }

  .btn-conferencia {
    font-size: 20px;
    margin: 0px 10px 30px 30px;
  }
}

@media (max-width: 384px) {
  .titulo-main {
    font-size: 60px;
  }
}

/* ============================ 

ALIADOS

============================ */

.titulo-aliados {
  font-size: 96px;
  font-weight: 300;
  font-family: "Figtree", sans-serif;
}

.tituloSecundario {
  font-size: 96px;
  font-weight: 300;
  font-family: "Figtree", sans-serif;
  line-height: 1;
}

.texto {
  color: #8a8b8c;
  font-weight: 300;
  font-size: 16px;
  font-family: "Figtree", sans-serif;
}

.slider-container {
  width: 100%;
  overflow: hidden; /* Oculta las imágenes que se mueven fuera del contenedor */
  margin: 0 auto;
  position: relative;
}

.slider {
  display: flex; /* Alinea las imágenes en fila */
  transition: transform 1s ease-in-out; /* Desplazamiento suave */
}

.slider img {
  width: 30%; /* Cada imagen ocupa el 25% del contenedor (4 imágenes a la vez) */
  height: auto;
}

/* Añadimos una pausa cuando el slider se haya movido completamente */
.paused {
  transition: none;
}

.btn-reserva {
  color: #00a3e4;
  background-color: #e6f6fc;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 20px;
  width: 138px;
  height: 54px;
  font-family: "Outfit", serif;
}

.btn-reserva:hover {
  color: #000000;
  background-color: transparent;
}

@media (max-width: 768px) {
  .titulo-aliados {
    font-size: 38px;
  }
  .tituloSecundario {
    font-size: 38px;
    font-weight: 300;
    font-family: "Figtree", sans-serif;
    line-height: 1;
  }
  .slider img {
    width: 50%;
  }
  #aliadosImagen {
    width: 270px;
  }
}

/* ============================ 

FOOTER

============================ */

.footer-container {
  background-color: #333536;
}

.text-footer {
  font-size: 14px;
  font-weight: 100;
  color: #ffffff;
  text-align: left;
  font-family: "Figtree", sans-serif;
}

.texto-footer2 {
  font-size: 24px;
  font-weight: 100;
  color: #ffffff;
  text-align: left;
  font-family: "Figtree", sans-serif;
}

#footer .btn {
  font-family: "Outfit", sans-serif;
  font-size: 15px;
  padding: 12px 50px;
}

#footer nav .nav-item a {
  font-weight: 100;
}

@media (max-width: 768px) {
  #logoFooterTop {
    width: 250px;
  }
  .text-footer {
    font-size: 11px;
  }
  #footer .btn {
    font-family: "Outfit", sans-serif;
    font-size: 11px;
    padding: 10px 40px;
  }
  .texto-footer2 {
    font-size: 20px;
  }
  .text-footer {
    font-size: 11px;
    padding-right: 50px;
  }
}

/* ============================== 

RESPONSIVO

============================== */

@media (min-width: 768px) {
  nav img {
    width: 175px;
  }
}

@media (min-width: 1100px) {
  nav img {
    width: 200px;
  }

  .custom-container {
    max-width: 70%; /* Ajusta este valor para hacer el contenedor más pequeño o más grande */
    margin: 0 auto; /* Centra el contenedor */
  }
}

/* ========================= 

NO ENCONTRADO 

========================== */

.btn-contacto {
  color: white;
  background-color: #00a3e4;
  border-radius: 7px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Outfit", serif;
}