@font-face {
  font-family: 'Gotham';
  src: url('../utils/gotham-6-cufonfonts/GothamXLight.otf') format('woff2');
  /* Otras fuentes alternativas (woff, ttf) pueden ser necesarias para una mejor compatibilidad */
}

/* Aplica la fuente Gotham al elemento body */
body {
  font-family: 'Gotham', sans-serif;
}

/* Puedes aplicar la fuente a otros elementos específicos si lo deseas */
h1,
h2,
h3 {
  font-family: 'Gotham', sans-serif;
}

/* Estilo para el subrayado en los enlaces al pasar el cursor */
nav ul li a {
  position: relative;
  text-decoration: none;
  /* Elimina el subrayado predeterminado */
  transition: padding 0.2s ease-in-out;
  /* Transición para el relleno del subrayado */
  padding-bottom: 5px;
  /* Grosor inicial del subrayado */
}

nav ul li a:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  /* Grosor del subrayado */
  background-color: white;
  /* Color del subrayado */
  transition: width 0.2s ease-in-out;
  /* Transición para ajustar la anchura */
}

nav ul li a:hover:before {
  width: 100%;
  /* Ancho completo al pasar el cursor */
}

/* ESTILOS PARA PANTALLAS DIFERENTES LOGO*/
/* Estilos para todas las pantallas */
.imagen {
  width: 100%;
  /* La imagen ocupará el ancho completo del contenedor */
  height: auto;
  /* La altura se ajustará automáticamente para mantener la proporción */
}

/* Estilos específicos para tablets (pantallas de hasta 768px de ancho) */
@media only screen and (max-width: 768px) {
  .imagen {
    /* Puedes cambiar el tamaño de la imagen o ajustar otros estilos según sea necesario */
    width: 100%;
  }
  
}

/* Estilos específicos para dispositivos móviles (pantallas de hasta 480px de ancho) */
@media only screen and (max-width: 480px) {
  .imagen {
    /* Puedes cambiar el tamaño de la imagen o ajustar otros estilos según sea necesario */
    width: 100%;
  }
}

/* Estilos específicos para pantallas de computadora (pantallas de más de 1024px de ancho) */
@media only screen and (min-width: 1024px) {
  .imagen {
    /* Puedes cambiar el tamaño de la imagen o ajustar otros estilos según sea necesario */
    width: 50%;
  }
  .linea-sectores {
    position: relative; /* Cambiado a relative */
    z-index: -1; /* Ajustado el z-index */
    top: 175px;
    color: #000000;
    border-top: 10px solid black;
    width: 100%;
    height: 2px;
  }
}



/* Estilo de la barra de desplazamiento */
::-webkit-scrollbar {
  width: 12px;
  /* Ancho de la barra de desplazamiento */
}

/* Estilo del thumb (la parte que el usuario puede arrastrar) */
::-webkit-scrollbar-thumb {
  background-color: #888;
  /* Color del thumb */
  border-radius: 6px;
  /* Borde redondeado del thumb */
}

/* Estilo del track (la parte de la barra que no es el thumb) */
::-webkit-scrollbar-track {
  background-color: #f1f1f1;
  /* Color del track */
}

/* Cambiar el estilo cuando el usuario pasa el mouse sobre la barra de desplazamiento */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* Color del thumb al hacer hover */
}

html {
  scroll-behavior: smooth;
}

.swiper {
  width: 95%;
  height: 450px;
}

.swiper-button-next {
  color: #000000;
  font-size: 1rem;
  padding-left: 5%;
}

.swiper-button-prev {
  color: black;
  padding-right: 50px;
}


.hidden-element {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  transform: translateX(0);
}

.hidenValor {
  opacity: 0;
  transform: translateX(-10%);
  transition: all 1s;
}

.showValor {
  opacity: 1;
  transform: translateX(0);
}

.hidenValorDerecha {
  position: static;
  opacity: 0;
  transform: translateX(10%);
  transition: all 1s;
}

.showValorDerecha {
  opacity: 1;
  transform: translateX(0);
}