html {
  scroll-behavior: smooth;
}


header {
    position: relative;
}

body {
    font-family: 'Geologica', sans-serif;
    opacity: 1;
    transition: all 0.8s ease-out; /* Transición en opacidad */
}

#logo {
    background: url("imágenes/logo 2.png");
    width: 40px;
    height: 40px;
    font-size: 0;
    position: absolute;
    z-index: 1;
    left: 0.75rem;
    top: .4rem;
}

.nav-link:hover {
    background-color: #D1D5DB;
    color: #010326;
    transition: all 0.3s ease-in-out;  
  }


@media screen and (max-width: 991px) {
    #logo {
        left: calc(50% - 20px);
    }
}

h2 {
    font-family: 'Geologica', sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 40px;}

.h3-tipo {
    font-family: 'Geologica', sans-serif;
    font-weight: 700;
    font-size: 50px;
}


.fondo1 {
    background: #F9F9F9
}

.fondo2 {
    background: #1F2937;
}

.fondo3 {
    background: #0071CE;
}

.fondo4 {
    background: #9EDBE9;

}

.fondo5 {
    background: #00CE7E;
}

.fondo6 {
    background: #FDDA00;
}

.fondo7 {
background: #d9dde4;
}

.fondo8 {
background: #0E0F12;
}

.fondo9 {
    background-color: rgba(222, 222, 230, 0.041);
    
}

.fondo10 {

  background: #d1d5db5d;
}

.fondoAest {
  background: #E7ECB4;
}

.fondotatanka {
  background: #1F1F26;
}

.fondoarte {
  background: #FFFDE2;
}

.color1 {
    color: linear-gradient(90deg, #0E0F12 0%, #21283E 100%);
}

.color2 {
    color: #1F2937;
}

.color3 {
    color: #0071CE;
}

.color4 {
    color: #fff;
}

.color5 {
    color: #7c7c8b;
}

.colorcamping {
  color: #3B533B;
}

.colorcamping2 {
  color: #E9C89D;
}

.colorproperty {
  color: #557EE5
}

.colorgranola {
  color: #058677;

}

.coloraest {
  color: #E1ED77;
}

.colortatanka {
  color: #b11616;
}

.colorarte {
  color: #4A3B2A;
}

.colorfigma {
 background: linear-gradient(90deg, #F24E1E 0.25%, #FF7262 24.86%, #A259FF 50.02%, #1ABCFE 74.91%, #0ACF83 99.79%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.colormovie {
  background: linear-gradient(269deg, #7889F8 0.64%, #044680 72.68%, #11111E 97.45%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.border1 {
    border: 3px solid #0071CE;
}

.border2 {
    border: 0.5px solid #D1D5DB;
}


.btn:hover {
    background-color: #034f8d;
    color: #fff;
    transition: all 0.3s ease-in-out; 
}

.btn2:hover {
    background: linear-gradient(90deg, #0E0F12 0%, #21283E 100%);
    transform: scale(1.01); 
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2); 
    transition: all 0.3s ease-in-out; 
}


.btn3:hover {
    background-color: #EAF1F6;
    color: #0071CE;
    border: 3px solid #0071CE;
    transition: all 0.3s ease-in-out; 
}



.micard-hover-2 {
  background-color: /* color base, por ejemplo: */ #fff;
  transition: all 0.3s ease-in-out;

}



.micard-hover-2:hover {
  background-color: #d6dde2;
  border-color: #0071ce57; /* solo cambia color del borde */
  transform: scale(1.05); /* efecto de expansión */
  border: 1.5px solid #141414; 
}

.micard-hover-1 {
    background-color: rgba(222, 222, 230, 0.041);
     border: 2px solid transparent;  /* border definido desde el inicio */
}

.micard-hover-1:hover {
  background-color: #0E0F12;
  border-color: #D1D5DB;
}


.icon {
    font-size: 2rem;
    height: 32px;
    width: 32px;
}


#enviado {
    width: 300px;
    background-color: #0071CE ;
    color: #fff;
    padding: 1rem;
    position: fixed;
    left: calc(50% - 150px);
    top: 100px;
    display: none;
    border-radius: 10px;
  }

  #enviado:target {
    display: block;
  }

  /* Clase para ocultar la página */
  .fade-out {
    opacity: 0; 
    background-color: #0E0F12;
  }

  .fs-13 {
    font-size: 13px;
  }

/* ul*/
.ul-sinpuntos {
  list-style-type: none;
}


  .confetti img {
    cursor: pointer;
  }


#backToTop {
  position: fixed;
  bottom: 40px;
  right: 40px;
  display: none; /* Oculto por defecto */
  background: #0E0F12;
  border: none;
  padding: 12px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

#backToTop svg {
  width: 24px;   /* Tamaño del ícono */
  height: 24px;
  fill: #fff;    /* Color del ícono */
}

#backToTop:hover {
  background: #333;
}

#backToTop:hover svg {
  fill: #ccc; /* Cambia color al hover */
}


.marquee {
  overflow: hidden;
  position: relative;
}

.marquee-content {
  display: flex;
  animation: marquee 20s linear infinite;
}

.logo-item {
  flex: 0 0 auto;
  width: 150px;
  margin: 60px 20px 0px;
  text-align: center;
}

.logo-item img {
  max-width: 100px;
  display: block;
  margin: 0 auto;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}




  @media (max-width: 991px) {
    .mi-boton {
      display: none;
    }
  }

.scrollable-image::-webkit-scrollbar {
  width: 10px; /* Ancho de la barra de desplazamiento vertical */
}

.scrollable-image::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color del fondo de la pista de la barra de desplazamiento */
  border-radius: 10px;
}

.scrollable-image::-webkit-scrollbar-thumb {
  background: #0071CE; /* Color del "pulgar" o la parte que se arrastra */
  border-radius: 5px;
}

.scrollable-image::-webkit-scrollbar-thumb:hover {
  background: #555; /* Color del pulgar al pasar el mouse por encima */
}


.badges-ds {
height: 44px;
padding: 10px 17px;
justify-content: center;
align-items: center;
border-radius: 5px;
}

.solution-list {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 2rem auto;
    display: flex; /* La clave para usar Flexbox */
    justify-content: center; /* Centra los elementos horizontalmente */
    gap: 1rem; /* Crea un espacio uniforme entre los botones */
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea en pantallas pequeñas */
}


@media (max-width: 768px) {
    .badges-ds {
        width: 100%; /* Los botones ocupan todo el ancho en pantallas pequeñas */
        margin-bottom: 0.5rem;
    }
}