*{
  font-family: 'Fira Sans', sans-serif;
}

.modal.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto; /* Activa los eventos de clic */
}

/* Modal general sin scroll */
.modal-content {
    overflow: hidden;  /* Deshabilita el scroll para todo el modal */
}

/* Descripción con scroll controlado */
.scrollable-description {
    overflow-y: auto;   /* Habilita el scroll solo en la descripción */
    padding: 10px;
}

/* Opcional: Para darle un estilo a la barra de desplazamiento (si es necesario) */
.scrollable-description::-webkit-scrollbar {
    width: 8px;
}

.scrollable-description::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.scrollable-description::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.blur-reveal {
  opacity: 0;
  transform: translateY(50px);
  /* Mueve los botones hacia la izquierda */
  filter: blur(5px);
  /* Agrega desenfoque */
  transition: all 1.8s ease-out, filter 1.8s ease-out;
}

/* Estado visible */
.blur-reveal.visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.custom-hover {
  border: 1px solid transparent; /* Mantener el borde de los botones original */
  background-color: transparent; /* Fondo transparente */
  color: white; /* Color de texto en estado normal */
  text-decoration: none; /* Evitar subrayado */
  transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave para el hover */
}

.custom-hover:hover {
  background-color: #fff; /* Fondo blanco al pasar el ratón */
  color: #000; /* Color de texto negro */
  border-color: #fff; /* Borde blanco al hacer hover */
}


.row {
  row-gap: 1.5rem; /* Establece el espaciado vertical entre las filas */
}


/* CSS para la imagen y el contenido principal */
.image-container {
  text-align: center;
}

.image-content {
  width: 100%;
  height: auto;
}

/* Estilos generales */
.footer-link {
  color: rgba(126, 145, 140, 0.9);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

.footer-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: rgba(126, 145, 140, 0.9);
  bottom: 10px; /* Ajusté este valor para mover la línea hacia arriba */
  left: 0;
  transform: scaleX(0);
  transform-origin: bottom left;
  transition: transform 0.4s ease-out;
}

.footer-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}


.image-container {
  /* Tamaño base adaptativo */
  width: clamp(6rem, 100%, 16.94rem); /* Mínimo: 6rem (~96px), Preferido: 95%, Máximo: 16.94rem (~271px) */
  height: clamp(6rem, 100%, 16.94rem); /* Igual que el ancho para mantener proporción cuadrada */
  border-radius: 30px; /* Bordes redondeados */
  overflow: hidden; /* Ocultar el exceso de imagen */
  display: flex; /* Centrar contenido */
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0; /* Fondo para contraste */
  position: relative; /* Para manejar la posición de la imagen */
  transition: transform 1s ease, box-shadow 1s ease; /* Animación suave */
  margin-bottom: 0.7rem; /* Espaciado inicial entre el contenedor y el texto */
}

.image-container:hover {
  /*transform: scale(1.1);  Agrandamiento del contenedor */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Sombra al pasar el mouse */
}

.image-content {
  width: 100%; /* La imagen llena todo el contenedor */
  height: 100%; /* La imagen llena todo el contenedor */
  object-fit: cover; /* Ajusta la imagen para llenar el contenedor */
  object-position: center; /* Centra la imagen en caso de recorte */
  transform: scale(1.05); /* Imagen acercada por defecto */
  transition: transform 0.3s ease; /* Animación suave de la imagen */
}

.image-container:hover .image-content {
  transform: scale(1); /* Imagen se ve completa al hacer hover */
}

/* Estilo para el texto 
.team-title,
.team-role {
  transition: transform 1s ease; 
}

.image-container:hover + .team-title,
.image-container:hover + .team-title + .team-role {
  transform: translateY(10px); /* El texto se mueve hacia abajo 
}
*/

.contactanos{
  padding-right: 5vw;
}

@media (min-width: 1000px){

  #headerEscritorio {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    transition: transform 0.5s ease-in-out, opacity 0.1s ease-in-out; /* Transición para el movimiento y la opacidad */
    opacity: 1; /* Comienza visible */
  }
  
  #headerEscritorio.hidden {
    opacity: 0; /* Desaparece con opacidad 0 */
    transform: translateY(-100px); /* El header se mueve hacia arriba */
    
  }

  
  .body-background-nosotros {
      font-family: 'Fira Sans', sans-serif;
      margin: 0;
      overflow-x: hidden;
      background-image: url(''), linear-gradient(to bottom, rgba(9, 27, 23, 1), rgba(36, 75, 67, 1), rgba(123, 252, 198, 1), rgba(247, 247, 247, 1));
      background-size: 140vh, cover; 
      background-position: top; 
      background-repeat: no-repeat;  
      min-height: 100vh;
      margin: 0;
      padding: 0;
      position: relative;
      color: white;
  }

  .body-background-nosotros {
    font-family: 'Fira Sans', sans-serif;
    margin: 0;
    overflow-x: hidden;
    background-image: 
       url(''), 
       linear-gradient(
          to bottom, 
          rgba(9, 27, 23, 1) 0%, 
          rgba(9, 27, 23, 1) 8%, 
          rgba(25, 57, 48, 1) 20%, 
          rgba(36, 75, 67, 1) 35%, 
          rgba(58, 112, 100, 1) 50%, 
          rgba(87, 179, 145, 1) 70%, 
          rgba(123, 252, 198, 1) 85%, 
          rgba(180, 255, 223, 1) 92%, 
          rgba(247, 247, 247, 1) 100%
       );
    background-size: 140vh, cover;
    background-position: top;
    background-repeat: no-repeat;  
    min-height: 100vh;
  }


  .navbar-brand img {
      padding-left: 200px;
      height: 5vh;
    }
   
    .navbar {
      background-color: transparent !important;
      box-shadow: none;
    }

    .navbar{
      backdrop-filter: blur(30px) brightness(90%);
      -webkit-backdrop-filter: blur(30px) brightness(90%);
      height: 300px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 20px 50px rgba(0, 0, 0, 0.15);
      width: auto;
    }

    .container-fluid{
      padding-bottom: 19vh;
    }

    .logoHeaderEscritorio{
      height: 38px; 
      padding-left: 8%;
    }
    
    .navbar-brand img {
      height: 50px;
      object-fit: contain;
      transition: transform 0.3s ease;
      /* Animación de hover */
    }
   
   
    .nav-item{
     font-weight: 200;
     
    }

    .navbar-nav {
      display: flex; /* Asegura que los elementos estén en una fila */
      justify-content: center; /* Centra los elementos horizontalmente */
      align-items: center; /* Alinea verticalmente los elementos */
      gap: 20px; /* Espaciado uniforme entre los nav-items */
    }
    
    .nav-item {
      font-weight: 200;
      font-family: 'Fira Sans', sans-serif;
      font-size: 18px;
    }
    
    .nav-link {
      color: white !important;
      font-size: 1.1rem;
      transition: color 0.3s ease;
      padding: 14px 28px; /* Simplifica los paddings */
      text-align: center;
    }
    
    .nav-link.active {
      color: #000;
      background-color: rgba(162, 185, 180, 0.35);
      border-radius: 8px;
      font-weight: 400;
      width: 131px;
    }
    
    .nav-link:hover {
      color: #000;
      background-color: rgba(162, 185, 180, 0.35);
      border-radius: 8px;
      font-weight: 400;
    }

    
    
   
    .navbar-toggler {
      border: none;
    }

    /* Ajustes para el contenedor principal */
#menuContent {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; /* Permite que los elementos se ajusten en pantallas pequeñas */
  width: 100%;
}


   
/* Ajustes para el botón de contáctanos */
.contactanos {
  white-space: nowrap;  /* Evita que el botón se divida en varias líneas */
}
   
    .contactanos a {
      background-color: #7BFCC6;
      /* Color de fondo */
      border-radius: 160px;
      /* Bordes redondeados */
      text-decoration: none;
      /* Sin subrayado */
      display: flex;
      align-items: center;
      gap: 8px;
      /* Espaciado entre texto y flecha */
      font-family: 'Fira Sans', sans-serif;
      height: 52px;
      width: 175px;
      text-align: center;
      position: relative;
      animation: shadowPulse 2s ease-in-out infinite;
      /* Animación de sombra pulsante */
    }


   
/* Flecha */
.arrow {
  font-size: 1.2rem;
  /* Tamaño de la flecha */
  transform: rotate(85deg);
  /* Rotación inicial */
  transition: transform 0.3s ease, margin-left 0.3s ease;
  /* Animaciones suaves */
}

.btn-5 img {
  height: 2vh;
  padding-left: 0.8vw;
  padding-bottom: 0.5vh;
}
   
    /* Hover en la Flecha */
    .btn-contact:hover .arrow {
      transform: rotate(5deg) translate(-3px, -3px);
      /* Nueva posición al hacer hover */
      margin-left: 10px;
      /* Espaciado adicional */
    }
  
  .nuestroAdn {
      text-align: center;
      padding: 60px 0;
  }
  
  .tituloAdn h2 {
      font-size: 2.5rem;
      margin-bottom: 40px;
      font-weight: 700;
  }
  
  .valores {
      display: flex;
      justify-content: space-around;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 60px;
      position: relative;
      padding-top: 10vh;
      
  }
  
  .mision {
      text-align: center;
      max-width: 500px;
      position: relative;
      text-align: left;
  }
  
  .mision img {
      margin-bottom: 7vh;
  }
  
  .mision h5 {
      margin-bottom: 4vh;
      font-size: 34px;
      font-weight: 600;
  }
  
  .mision p {
      margin: 5px 0;
  }
  
  /* Línea de cadena entre imágenes */
  .mision:not(:last-child)::after {
      content: "";
      position: absolute;
      top: 40px;
      left: 12vw;
      width: 15vw;
      height: 10px;
      background: url('../assets/img/Line\ 1.png') repeat-x center;
      background-size: contain;
  }
  
  .imgConfianza{
      padding-top: 2.5vh;
  }

  .seccionNuestroEquipo{
    padding-bottom: 10vh;
  }

  #conoceNuestroEquipo {
      font-weight: 100;
      font-size: 60px;
      padding-bottom: 3vh;
      padding-top: 10vh;
    }

  #combinamosTalento{
    font-size: 24px;
  }

    #talentoYExperiencia{
      font-weight: 410;
    }

    .titularNuestroEquipo{
      padding-bottom: 10vh;
    }

    #footerEscritorio {
      width: 81.66vw;
      height: auto;
      background-color: #A2B9B459;
      border-radius: 40px;
      font-family: 'Fira Sans', sans-serif;
      color: #244B43;
      margin: 5vh auto;
      padding-top: 100px;
    }
    
    .footer-link {
      color: #244B43;
      text-decoration: none;
      padding: 8px 0;
      display: inline-block;
      font-size: 2vw;
    }
    
    .footer-logo {
      max-width: 311px;
      height: auto;
      width: 95%;
      margin-bottom: 6%;
    }
  
    .trabajamosPersonas {
      width: 17vw;
      float: right;
    }

    #logoConTexto{
      margin-top: -2.2%;
      height: auto;
    }
  
    #footerNosotros, #footerProductos,
    #footerContacto {
      text-align: left;
      padding-right: 4%;
      width: auto;
    }

    #footerNosotros h5, #footerProductos h5,
    #footerContacto h5, #footerLegal h5 {
      padding-bottom: 1vw;
      font-size: 1vw;
      font-weight: 500;
    }

    .list-unstyled li a, .footer-text{
      font-weight: 300;
      font-size: 0.9vw;
    }

    .footer-text{
      font-size: 0.9vw;
      padding-top: 2vh;
    }

    #footerAbajo hr{
      padding-left: 50vw;
    }
  
    .footer-divider {
      width: 70vw;
    }
    
    .footer-btn {
      background-color: #A2B9B459;
      color: white;
      width: 6vw;
      height: 40px;
      border-radius: 80px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s;
      font-weight: 300;
    }
    
    .footer-btn:hover {
      transform: scale(1.1);
    }
  
    .footer-rights div {
      margin-top: 20px;
      background-color: transparent;
      color: rgba(126, 145, 140, 0.9);
      border-radius: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 911px;
      height: 40px;
    }
  
    .custom-gap {
      padding-left: 5.5vw;
      flex-wrap: wrap
    }
  
    .footer-bottom .col-12 {
      padding: 0;
    }

    .footer-btn {
      color: rgba(126, 145, 140, 0.9);
      text-decoration: none;
      border: 1px solid rgba(126, 145, 140, 0.9);
      border-radius: 100px;
      padding: 10px 16px;
      background-color: transparent;
      font-size: 0.85vw;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      transition: transform 0.3s;
    }
  
    .footer-btn:hover {
      transform: scale(1.05);
    }
  
    .footer-rights-container {
      width: 48vw;
      height: 39px;
      margin: 0 auto;
      border: 1px solid rgba(126, 145, 140, 0.9);
      border-radius: 100px;
      padding: 10px 16px;
      background-color: transparent;
      font-size: 16px;
      color: #244B43;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      color: rgba(126, 145, 140, 0.9);
    }
  
    .footer-rights-container img.footer-logo-img {
      max-height: 40px; /* Ajusta el tamaño de la imagen */
    }
  
    .footer-rights-container .footer-rights-text {
      margin: 0;
      font-size: 1vw;
      font-weight: 300;
    }
  
    .footer-divider {
      width: 70%;
      margin: 0 auto 1rem;
    }

    .footer-logo-img{
      height: 16px;
      width: auto;
    }

    #footerArriba{
      padding-bottom: 4vh;
      width: auto;
    }

    .footer-divider {
      width: 76vw;
      border-top: 1px solid rgba(126, 145, 140, 0.9); /* Línea divisoria */
      margin: 20px auto; /* Centramos la línea con margen */
      padding-bottom: 1%;
    }
    

    #footerAbajo {
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-wrap: nowrap;
      max-width: 80vw;
      padding-left: 5vw;
      width: auto;
      padding-bottom: 5vh;
    }

    #socialesFooterAbajo{
      width: auto;
    }
  
  #footerMobile{
      display: none;
  }

  .headerMobile{
    display: none;
}

 #menuContenido{
  display: none;
 }

.nuestroAdn h2{
  font-family: Fira Sans !important;
 font-weight: 100;
 color: white;
 line-height: 1;
 font-size: 64px;
}

.nuestroAdn h5{
  font-family: Fira Sans !important;
  font-weight: 400;
  color: white;
  line-height: 1;
  font-size: 34px;
} 

.titularNuestroEquipo h2{
  font-size: 60px;
}

h1.hero-titleService
{ 
 font-family: Fira Sans !important;
 font-weight: 100;
 color: #244B43;
 line-height: 1;
 font-size: 64px;
}

h1.hero-titleServiceOscuro
{ 
 font-family: Fira Sans !important;
 font-weight: 100;
 color: white;
 line-height: 1;
 font-size: 80px;
}

h4.hero-subtitleServiceOscuro
{
 font-family: Fira Sans !important;
 font-size: 32px; 
 font-weight: 100;
 color: white;
}

#subtituloHeroEscritorio {
  padding-top: 10vh;
}

/* Efecto blur imagen cursor*/
/* Cambiar el cursor */
.team-member img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.team-member img:hover {
  transform: scale(1.05);
  border-radius: 3.5px;
}

.team-member h6{
  font-size: 18px;
  font-weight: 400;
  padding-left: 10px;
  text-align: left;
  padding-top: 10px;
}

.team-member p{
  padding-left: 10px;
  font-size: 14px;
  text-align: left;
  font-weight: 350;
}


/* CSS para el modal */
.modal {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100%;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-family: 'Fira Sans', sans-serif;
}

.modal.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.modal.show ~ #headerEscritorio {
  z-index: 1 !important; /* Baja la prioridad del header */
}

/* Modal Content */
.modal-content {
  display: flex;
  width: 100vw;
  height: 100%;
  background-color: rgba(204, 223, 219, 1);
  animation: slideIn 0.5s ease-out;
  border-radius: 0 !important;
  border: none;
}

@keyframes slideIn {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Modal Body */
.modal-body {
  display: flex;
  width: 100%;
  height: 100%;
}

/* Imagen en el Modal */
.image-container-modal {
  width: 50%;
  height: 99.1%;
}

.image-content {
  width: 100%;
  height: 100%;
}

/* Información en el Modal */
.info-container-modal {
  position: relative;
  width: 50%;
  height: inherit;
  overflow-y: auto;
  padding-left: 5%;
  text-align: start;
}

#modalName {
  font-size: 60px;
  font-weight: 275;
  padding-top: 10vh;
  width: 31vw;
}

#modalRole {
  font-size: 31px;
  font-weight: 275;
  padding-bottom: 6%;
}

#modalDescription {
  width: 33vw;
  height: 49.5vh;
  font-size: 24px;
  overflow-y: auto;
  padding-right: 10px;
  scroll-behavior: smooth;
}

#modalDescription::-webkit-scrollbar {
  width: 8px;
}

#modalDescription::-webkit-scrollbar-track {
  background: transparent;
}

#modalDescription::-webkit-scrollbar-thumb {
  background: rgba(162, 185, 180, 0.53);
  border-radius: 60px;
}

#modalDescription::-webkit-scrollbar-thumb:hover {
  background: rgba(162, 185, 180, 0.75);
}

#socialModal {
  padding-top: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.linkedin-btn {
  width: 96px;
  height: 39px;
  border-radius: 100px;
  border: 1px solid rgba(36, 75, 67, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(36, 75, 67, 1);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s ease;
}

.linkedin-btn:hover {
  background-color: #fff;
  color: #000;
  border-color: #fff;
}

.close-btn {
  position: absolute;
  left: 1;
  top: -40px;
  background: none;
  border: none;
  font-size: 100px;
  font-weight: 100;
  cursor: pointer;
  color: #333;
  z-index: 1050;
}

.navModalContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.navModal {
  width: 20px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 10%;
}

#navModalAnterior {
  right: 32%;
  transform: rotate(-320deg);
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  top: 4%;
}

#navModalSiguiente {
  right: 27%;
  transform: rotate(45deg);
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  top: 4%;
}

/* Estilo para el texto "_01" */
#codigoTexto {
  font-size: 22px;
  font-weight: 275;
  color: rgba(36, 75, 67, 1);
  padding-right: 26%;
}

#navModalAnterior::after {
  content: "";
  position: absolute;
  top: 56%;
  width: 0;
  height: 20px;
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  transform: rotate(50deg);  /* Hace la punta de la flecha */
  transform-origin: center;
  margin-top: -7px;
}

#navModalSiguiente::after {
  content: "";
  position: absolute;
  top: 40%;
  width: 0;
  height: 20px;
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  transform: rotate(44deg);  /* Hace la punta de la flecha */
  transform-origin: center;
  margin-top: -11px;
}

#navModalAnterior::after {
  left: 6px; /* Ajuste para que apunte a la izquierda */
}

#navModalSiguiente::after {
  right: 6px; /* Ajuste para que apunte a la derecha */
}

}

/* Responsiveness */
@media (max-width: 1000px) {
  *{
      font-family: 'Fira Sans', sans-serif;
  }
  
  .body-background-nosotros {
      font-family: 'Fira Sans', sans-serif;
      margin: 0;
      overflow-x: hidden;
      background-image: url(''), linear-gradient(to bottom, rgba(9, 27, 23, 1), rgba(36, 75, 67, 1), rgba(123, 252, 198, 1), rgba(247, 247, 247, 1));
      background-size: 140vh, cover; 
      background-position: top; 
      background-repeat: no-repeat;  
      min-height: 100vh;
      margin: 0;
      padding: 0;
      position: relative;
      color: white;
  }

  header {
    top: 0;
    width: 100%;
    background-color: transparent;  /* SIN FONDO */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 60px 25px;
     z-index: 2000;
}

#headerMobile{
    background: linear-gradient(180deg, rgba(9, 27, 23, 1) 0%, rgba((36, 75, 67, 0.85) 35%, rgba(123, 252, 198, 0.6) 70%, rgba(247, 247, 247, 0) 100%));
    position: fixed;
}

.logo {
    width: 46px;
    height: auto;
}

/* ICONO DE MENÚ (MISMO PARA ABRIR Y CERRAR) */
.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 1100;
    
}

.menu-icon div {
    height: 3px;
    background-color: white;
    transition: all 0.3s ease;
    border-radius: 2px;
    z-index: 1000;
}

.mision img{
    padding-bottom: 5vh;
}

.line1 {
    width: 100%;
}
.line2 {
    width: 80%;
    align-self: flex-end;
}
.line3 {
    width: 60%;
    align-self: flex-end;
}

/* TRANSFORMACIÓN EN "X" */
.menu-icon.open div:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
    position:sticky;
    top: 0;
}

.menu-icon.open div:nth-child(2) {
    opacity: 0;
}

.menu-icon.open div:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
    position:sticky;
    top: 0;
    width: 100%;
}

/* MENÚ DESPLEGABLE */
.menu-content {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado absoluto */
    width: 96%;
    max-width: 98vw;
    height: 93vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(65, 255, 104, 0.3) 100%);
    backdrop-filter: blur(40px);
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    opacity: 0;
    pointer-events: none;
    z-index: 1200;
    transition: opacity 0.5s ease, transform 0.5s ease;
    box-shadow: 0 60px 41.5px -30px rgba(162, 185, 180, 0.53);
}

.footer-link{
  color:  rgba(36, 75, 67, 1) !important;
}

.menu-content.open {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
}


/* ICONO DE CERRAR (SE ALINEA CON EL MENÚ) */
.close-icon {
    font-size: 40px;
    position: absolute;
    top: 15px;
    right: 15px;  /* Alineado con el borde del menú */
    cursor: pointer;
}

/* Alinear el texto con la "X" */
.menu-content a {
    display: block;
    color: white;
    /*margin-bottom: 20px;*/
    font-size: 1.5rem;
    text-decoration: none;
    font-family: 'Fira Sans', sans-serif;
   /*padding-right: 35px; /* Pequeño margen a la derecha */
    font-size: 7.14vw;
    font-weight: 300;
    text-align: right;
}

.menuContent1{
  padding-left: 55%;
}

#contenidoDesplegable{
    padding-top: 1rem;
    display: grid;
    height: 88vh;
    width: 100%;
    justify-content: space-between;
}

/* Estilos para "Legal" y "Soporte" */
.menu-content a.legal, 
.menu-content a.soporte {
    font-size: 4.76vw;
    /*padding-top: 3vh;*/
    font-weight: 300;
}

#menuContentSecundario{
    /*padding-top: 4vh;*/
    padding-left: 83%;
}

/* SOCIAL BUTTONS */
.social-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100vw;      
}

.social-buttons button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
    background: transparent;
    cursor: pointer;
    font-family: 'Fira Sans', sans-serif;
    padding-top: 2.38vw;
    padding-right: 3.81vw;
    padding-bottom: 2.38vw;
    padding-left: 3.81vw;
    width: 26.19vw;
    height: 9.05vw;
    font-size: 3.57vw;
}

.footer-bottom .social-buttons{
    padding-top: 2vh;
    padding-bottom: 2vh;
}

.footer-bottom .social-buttons button{
    width: 50vw;
}

.menu-content .social-buttons {
    /*padding-top: 8vw;*/
    width: 80vw;
    padding-left: 10%;
}

.menu-content .social-buttons button{
    border: 1px solid white;
    color: white;
}

  #Hero{
      height: 85vh;
      background-image: -moz-radial-gradient();
  }

  .principalHero h1{
      font-size: 40px;
      font-size: 100;
  }
  
  .principalHero h1 span{
      font-weight:300;
  }
  
  .tituloAdn{
      text-align: center;
  }

  .mision{
      padding-top: 10vh;
  }
  
  .valores{
      padding-left: 10vw;
  }
  
  .textoColaboracion{
      padding-top: 3vh;
      width: 76vw;
      height: 173px;
  }

  .textoConfianza{
      padding-top: 3vh;
      width: 76vw;
      height: 173px;
  }

  .textoInnovación{
      padding-top: 3vh;
      width: 76vw;
      height: 173px;
  }
  

  .seccionEquipo{
    padding-bottom: 10vh;
  }



  #nuestroEquipo{
    padding-top: 18vh;
  }

  .titularNuestroEquipo h2{
    font-weight: 100;
    font-size: 37px;
    padding-bottom: 5vh;
  }
  
    #combinamosTalento{
      font-size: 18px;
      font-weight: 200;
      padding-bottom: 4vh;
    }
    

    #talentoYExperiencia{
      font-weight: 400;
    }
  
    .col h6{
      padding-top: 2vh;
    }
  
    .col p{
      padding-bottom: 4vh;
    }    

    #navbar{
      display: none;
  }


  
  #botonParaAbajo{
    padding-top: 20vh;
    
  }
   
  h1.hero-titleService
  { 
   font-family: Fira Sans !important;
   font-weight: 100;
   color: #244B43;
   line-height: 1;
  }
  
h4.hero-subtitleServiceOscuro
{
 font-family: Fira Sans !important;
 font-size: 18px; 
 font-weight: 300;
 color: white;
}

  h1.hero-titleServiceOscuro
  { 
   font-family: Fira Sans !important;
   font-weight: 100;
   color: white;
   line-height: 1;
   font-size: 40px;
  }

  /* Efecto blur imagen cursor*/
/* Cambiar el cursor */
.team-member img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

.team-member img:hover {
  transform: scale(1.05);
  border-radius: 3.5px;
}

.team-member h6{
  font-size: 18px;
  font-weight: 400;
  padding-left: 10px;
  text-align: left;
  padding-top: 3vh;
}

.team-member p{
  padding-left: 10px;
  font-size: 15px;
  text-align: left;
  font-weight: 400;
}

/* CSS para el modal */
.modal {
  display: none;
  position: fixed;
  overflow-x: hidden; /* Oculta el desplazamiento horizontal en el modal */
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
  font-family: 'Fira Sans', sans-serif !important;
}

.modal.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Modal Content */
.modal-content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: rgba(204, 223, 219, 1);
  animation: slideIn 0.5s ease-out;
  border-radius: 0 !important;
  background-clip: border-box !important; /* Restablece a border-box */
}

/* Animación de deslizamiento */
@keyframes slideIn {
  from {
    transform: translateY(-50%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Modal Body */
.modal-body {

  flex-direction: column;
  width: 100%;
  height: 100vh; /* Hacemos que el modal ocupe toda la altura de la pantalla */
  overflow-y: auto; /* Permite el desplazamiento en todo el modal */
  padding: 0;
   overflow-x: hidden; /* Evita el desplazamiento horizontal dentro del cuerpo del modal */
  width: 100%; /* Asegura que el modal se ajuste al 100% del ancho */
}

/* Imagen en el Modal */
.image-container-modal {
  width: 100vw;
  height: 68.5vh; /* Usa vh para que la imagen ocupe el 68.5% de la altura de la ventana */
}

.image-content {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Información en el Modal (contenido debajo de la imagen) */
.info-container-modal {
  position: relative;
  width: 100%;
  height: auto;
  padding-left: 5%;
  padding-right: 5%;
  text-align: left;
  padding-top: 20px; /* Espacio entre la imagen y el texto */
}


/* Botón de cerrar */
.close-btn {
  position: absolute;
  top: -1%;
  left: -5%;
  background: none;
  border: none;
  font-size: 5rem;
  font-weight: 100;
  cursor: pointer;
  color: #333;
  z-index: 1050;
}

/* Nombre y puesto */
#nombreModal {
  width: 30%;
  padding-top: 22%;
  font-size: 32px;
  font-weight: 275 !important;
}

/* Contenedor para los elementos puestos y flecha */
.info-row {
  display: flex; /* Establece flexbox para alineación horizontal */
  justify-content: space-between; /* Centra los elementos horizontalmente */
  align-items: center; /* Centra los elementos verticalmente */
  gap: 10px; /* Añade espacio entre el texto y la flecha */
  padding-bottom: 6vh;
  padding-top: 6vh;
}

#puestoModal {
  font-size: 22px;
  font-weight: 275;
}

/* Flecha abajo */
.arrow-container {
  display: flex;
  justify-content: flex-end;
}

/* Flecha hacia abajo */
.arrow-down {
  width: 15px;
  height: 15px;
  cursor: pointer;
  position: relative;
  top: -2vh;
  transform: rotate(315deg); /* Rotación para hacer que la flecha apunte hacia abajo */
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  right: 10vw;
}


/* Descripción Modal */
#descripcionModal {
  width: 100%;
  height: auto;
  font-size: 18px;
  overflow-y: auto;
  padding-right: 10px;
  scroll-behavior: smooth;
}

#socialModal {
  padding-top: 15%;
  padding-bottom: 15%;
  display: flex; /* Establece el contenedor en flexbox */
  justify-content: space-between; /* Coloca los elementos a los extremos */
  align-items: center; /* Centra verticalmente los elementos */
}

/* Estilo del botón LinkedIn */
.linkedin-btn {
  width: 96px;
  height: 39px;
  border-radius: 100px;
  border: 1px solid rgba(36, 75, 67, 1);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 16px;
  padding-right: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(36, 75, 67, 1);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  background-color: transparent;
  transition: all 0.3s ease;
}

.linkedin-btn:hover {
  background-color: rgba(36, 75, 67, 0.1);
  border-color: rgba(36, 75, 67, 0.8);
}

/* Estilo para el texto "_01" */
#codigoTexto {
  font-size: 22px;
  font-weight: 275;
  color: rgba(36, 75, 67, 1);
  padding-right: 5%;
}


.navModalContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

/* Botones personalizados para las flechas */
.navModal {
  width: 20px; /* Tamaño ajustable */
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 10%; /* Ajusta la posición vertical para que estén más arriba */
}

#navModalAnterior {
  right: 30%; /* Mueve la flecha anterior un 5% hacia la izquierda */
  transform: rotate(-320deg); /* Flecha izquierda ↖ */
  border-left: 2px solid #333;
  border-bottom: 2px solid #333;
  top: 6.5vh;
}

#navModalSiguiente {
  right: 17%; /* Ajusta la posición de la flecha derecha */
  transform: rotate(45deg); /* Flecha derecha ↗ */
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  top: 6.5vh;
}

#navModalAnterior::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 20px;
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  transform: rotate(50deg);  /* Hace la punta de la flecha */
  transform-origin: center;
  margin-top: -7px;
}

#navModalSiguiente::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 20px;
  border-right: 2px solid #333;
  border-top: 2px solid #333;
  transform: rotate(44deg);  /* Hace la punta de la flecha */
  transform-origin: center;
  margin-top: -11px;
}

#navModalAnterior::after {
  left: 6px; /* Ajuste para que apunte a la izquierda */
}

#navModalSiguiente::after {
  right: 6px; /* Ajuste para que apunte a la derecha */
}




footer {
  background-color: rgba(162, 185, 180, 0.35);
  color: rgba(36, 75, 67, 1);
  border-radius: 40px;
  padding: 20px;
  text-align: left;
  width: 93.7vw;
  max-width: 1200px;
  height: auto; /* Ajusta la altura automáticamente */
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 10vh;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 50px;
}

.info-box {
  width: 50%;
  height: auto; /* Cambié el valor fijo por uno automático */
  display: flex;
  flex-direction: column;
  text-align: left;
  padding-left: 10%; /* Añadido padding-left */
  padding-top: 20px;  /* Añadido padding-top */
  justify-content: start;
  padding-right: 1%;
}

#footerMobile h3 {
  font-family: Fira Sans !important;
  font-size: 18px;
  padding-bottom: 2vh;
}

#footerMobile p {
  font-family: Fira Sans !important;
}

.nuestroAdn h2{
font-family: Fira Sans !important;
font-weight: 100;
color: white;
line-height: 1;
font-size: 37px;
}


.nuestroAdn p {
  font-size: 16px;
  font-weight: 300;
}

.footer-logo {
  padding-bottom: 5vh; /* Reducido padding-bottom */
}

.footer-logo img {
  width: 52.5px;
  height: 28px;
}

.footer-top{
align-items: center;
text-align: center;
justify-content: center;
padding-bottom: 5vh;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 50px; /* Reducido el margen superior */
}


.rights-square {
  border: 1px solid rgba(126, 145, 140, 0.9);
  border-radius: 100px;
  padding: 8px 16px;
  display: inline-block;
  width: 100%; /* Hizo que la caja de derechos ocupe todo el ancho disponible */
  max-width: 85vw;
  height: auto;
  box-sizing: border-box;
  text-align: center;
  color: rgba(126, 145, 140, 0.9);
}


.rights-square p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.social-buttons {
  display: flex;
  gap: 10px; /* Reducido el espacio entre los botones */
  justify-content: space-between;
  width: 100%; /* Ocupa todo el ancho disponible */
  margin-top: 3vh; /* Reducido el margen superior */
}

button {
  padding: 10px 20px;
  background-color: transparent;
  border: 1px solid rgba(126, 145, 140, 0.9);
  color: rgba(126, 145, 140, 0.9);
  cursor: pointer;
  font-size: 14px;
  border-radius: 5px;
  width: 30%; /* Hace que los botones ocupen el 30% del espacio cada uno */
}


button:hover {
  background-color: rgba(36, 75, 67, 0.1);
}

#footerEscritorio{
display: none;
}

.footer-divider {
width: 76vw;
border-top: 1px solid rgba(126, 145, 140, 0.9); /* Línea divisoria */
margin: 20px auto; /* Centramos la línea con margen */
}
  
  #escribenosMensaje {
    font-weight: 100;
    font-size: 26px;
    padding-bottom: 6vh;
    padding-top: 8vh;
    color: white;
    width: auto;
  }

  #enviarMensaje{
    font-weight: 200;
    font-size: 16px;
  }
  
  #rellenableNombre {
    font-weight: 100;
    font-size: 15px;
    
  }
  
  #conectadoFila {
    width: auto;
  }
  
  #conectado h3 {
    font-size: 60px;
    font-weight: 100;
  }



  #mantenteConectado .text-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: start;  /* Alinea el texto a la izquierda */
  }
  
  #mantenteConectado .mb-3 {
    order: 1;  /* Mueve la imagen a la derecha */
    margin-left: 10vw;  /* Añade espacio entre el texto y la imagen */
  }
  
  #mantenteConectado #textoConectado {
    order: 0;
  }

  #mantenteConectado{
    padding-bottom: 10vh;
  }

  #imagenMantenteConectado {
    padding-bottom: 8vh;
  }
  
  #barraSocial h5 {
    font-size: 34px;
    font-weight: 100;
  }
  
  #redesSociales{
    padding-top: 6vh;
  }
  
  #redesSociales a{
    font-size: 16px;
    width: auto;
    height: 39px;
  }
  
  #sigueNoticias{
    width: auto;
    margin-right: 3vw;
    padding-top: 4vh;
  }
  
  #sigueNoticias h5 {
    font-size: 34px;
    font-weight: 100;
  }

  #modalName {
    font-size: 60px;
    font-weight: 275;
    padding-top: 10vh;
    width: 35vw;
  }

  .modal.show ~ #headerMobile {
    z-index: 1 !important; /* Baja la prioridad del header */
  }

}

.sticky-image img {
  width: 49vw;
  /* Establece el ancho */
  height: auto;
  /* Ajusté para mantener la relación de aspecto */
  object-fit: cover;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.section-height-892 {
  display: flex;
  /* Flexbox para alinear el contenido */
  flex-direction: column;
  /* Alinea los elementos en columna */
  gap: 10px;
  /* Espacio entre elementos */
}

#methodology-image {
  max-width: 49vw;
  /* Hace que la imagen sea flexible */
  height: 70vh;
  /* Mantiene la relación de aspecto */
  text-align: initial;
  transition: opacity 1s ease-in-out;
  opacity: 1;
}


/* Animación del slider infinito */
@keyframes slide-infinite {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100%, 0, 0);
  }
}



/* Efecto blur imagen cursor*/
.area-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.carousel-item {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out;
}

.carousel-item.active {
  opacity: 1;
  transform: translateX(0);
}

.carousel-item-next {
  transform: translateX(100%);
}

.carousel-item-prev {
  transform: translateX(-100%);
}

.carousel-item-end {
  opacity: 0;
  transform: translateX(-100%);
}

.carousel-inner {
  overflow: hidden;
}

.circle {
  position: absolute;
  width: 100px;
  height: 100px;
  background: #244B43;
  opacity: 5%;
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}



.nuestroBtn 
{
 color: #000;
 border: 0 solid;
 background-color: rgba(255, 255, 255, 50%);
 text-shadow: none;
 text-decoration: none;
 border-radius: 78px;
 transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

a.nuestroBtn {
 color: #244;
 padding: 1rem;
 padding-left: 1.6rem;
 padding-right: 1.6rem;
 transition: all 0.3s ease-in-out;
}

.hablemosBtn 
{
color: #000;
border: 0 solid;
background-color: rgba(255, 255, 255, 50%);
text-shadow: none;
text-decoration: none;
border-radius: 78px;
transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

a.hablemosBtn {
color: #244;
padding: 1rem;
padding-left: 4rem;
padding-right: 4rem;
transition: all 0.3s ease-in-out;
}

.agendaBtn {
 background-color: #7BFCC6;
 color: #000;
 border: 0 solid;
 box-shadow: inset 0 0 20px rgba(123, 252, 198, 0);
 /* Ondas iniciales invisibles */
 outline: 1px solid;
 outline-color: rgba(123, 252, 198, 0.5);
 outline-offset: 0px;
 text-shadow: none;
 text-decoration: none;
 border-radius: 78px;
 padding: 10px 30px;
 transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
 box-shadow: 0 12px 24px rgba(123, 252, 198, 0.6);
}

a.agendaBtn {
 color: #244;
 padding: 1rem;
 padding-left: 1.6rem;
 padding-right: 1.6rem;
 transition: all 0.3s ease-in-out;
}
.agendaBtn img {
 height: 2vh;
 padding-left: 0.4vw;
 padding-bottom: 0.5vh;
}


/* Cambiar el cursor */
/* Boton */
.btn-5 {
  background-color: #7BFCC6;
  color: #000;
  border: 0 solid;
  box-shadow: inset 0 0 20px rgba(123, 252, 198, 0);
  /* Ondas iniciales invisibles */
  outline: 1px solid;
  outline-color: rgba(123, 252, 198, 0.5);
  outline-offset: 0px;
  text-shadow: none;
  text-decoration: none;
  border-radius: 78px;
  padding: 10px 30px;
  transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-5:hover {
  background-color: #65E6B4;
  box-shadow: inset 0 0 20px rgba(123, 252, 198, 0.5),
    /* Ondas internas */
    0 0 20px rgba(123, 252, 198, 0.3);
  /* Ondas externas */
  outline-color: rgba(123, 252, 198, 0);
  /* Quita el color del contorno */
  outline-offset: 15px;
  text-shadow: none;
  text-decoration: none;
  color: #000;
}

/* Boton */
/* Pagina productos cuadros*/
.cuadro {
  background-color: rgba(255, 255, 255, 0);
  border: 1px solid #244B43;
  border-radius: 8px;
  width: 200px;
  height: 100px;
  color: #244B43;
}

/*Pagina Contactanos*/
#mensaje::placeholder {
  color: white;
  opacity: 1;
  
}

#mensaje {
  border: none;
  border-bottom: 1px solid white;
  border-radius: 0;
  background: transparent;
  color: white;
  padding-right: 30px;
  box-shadow: none;
}

.flecha {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  z-index: 10;
}

h1, h2, h3, h4, h5
{
 font-family: Fira Sans !important;
}

a
{
 font-family: Fira Sans !important;
}

span
{
 font-family: Fira Sans !important;
}

.nuestroAdn .valores{
  font-family: Fira Sans !important;
  font-weight: 200;
  color: white;
  line-height: 1;
  font-size: 22px;
}

.nuestroAdn .valores{
  font-family: Fira Sans !important;
  font-weight: 200;
  color: white;
  line-height: 1;
  font-size: 22px;
}

b.hero-Negrita
{
 font-style: italic; 
}

#miembroAbajo h6, #miembroAbajo p{
  color: rgba(36, 75, 67, 1)
}

#miembroAbajo h6, #miembroAbajo p{
  color: rgba(36, 75, 67, 1)
}

 /* Mobile Button */
 .blur-reveal.btn {
  text-align: center;
  display: block;
  margin: 2rem auto 0;
}

/* Space below for buttons */
#Hero .mouse-container {
  margin-top: 1rem;
  /* Incrementa la distancia de los botones inferiores */
}

.mouse {
  /*background: #c3c9cc00 linear-gradient(transparent 0%, transparent 50%, #A2D9C2 50%, #A2D9C2 100%);*/
  position: relative;
  width: 47px;
  height: 71px;
  border-radius: 100px;
  background-size: 100% 200%;
  border: 3px solid white;
  animation: nudgeMouse 5s ease-out infinite;
}

.mouse:before,
.mouse:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.mouse:before {
  width: 37px;
  height: 71px;
  /*background: linear-gradient(500deg, #b1afaf00, #a1a1a1);*/
  border-radius: 100px;
}

.mouse:after {
  content: "";
  width: 12px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  bottom: 20%;
  /* Posiciona la flecha dentro del contenedor */
  transform: rotate(45deg);
  animation: trackBallSlide 5s linear infinite;
}

@keyframes colorSlide {
  0% {
    background-position: 0% 100%;
  }

  20% {
    background-position: 0% 0%;
  }

  21% {
    background-color: #244b43;
  }

  29.99% {
    background-color: #a2d9c2;
    background-position: 0% 0%;
  }

  30% {
    background-color: #244b43;
    background-position: 0% 100%;
  }

  50% {
    background-position: 0% 0%;
  }

  51% {
    background-color: #244b43;
  }

  59% {
    background-color: #a2d9c2;
    background-position: 0% 0%;
  }

  60% {
    background-color: #244b43;
    background-position: 0% 100%;
  }

  80% {
    background-position: 0% 0%;
  }

  81% {
    background-color: #244b43;
  }

  90%,
  100% {
    background-color: #a2d9c2;
  }
}

@keyframes trackBallSlide {
  0% {
    opacity: 1;
    transform: translateY(-20px) rotate(45deg) scale(1);
  }

  6% {
    opacity: 1;
    transform: translateY(5px) rotate(45deg) scale(0.9);
  }

  14% {
    opacity: 0;
    transform: translateY(40px) rotate(45deg) scale(0.4);
  }

  15%,
  19% {
    opacity: 0;
    transform: translateY(-20px) rotate(45deg) scale(0.4);
  }

  28%,
  29.99% {
    opacity: 1;
    transform: translateY(-20px) rotate(45deg) scale(1);
  }

  30% {
    opacity: 1;
    transform: translateY(-20px) rotate(45deg) scale(1);
  }

  36% {
    opacity: 1;
    transform: translateY(5px) rotate(45deg) scale(0.9);
  }

  44% {
    opacity: 0;
    transform: translateY(40px) rotate(45deg) scale(0.4);
  }

  45%,
  49% {
    opacity: 0;
    transform: translateY(-20px) rotate(45deg) scale(0.4);
  }

  58%,
  59.99% {
    opacity: 1;
    transform: translateY(-20px) rotate(45deg) scale(1);
  }

  60% {
    opacity: 1;
    transform: translateY(-20px) rotate(45deg) scale(1);
  }

  66% {
    opacity: 1;
    transform: translateY(5px) rotate(45deg) scale(0.9);
  }

  74% {
    opacity: 0;
    transform: translateY(40px) rotate(45deg) scale(0.4);
  }

  75%,
  79% {
    opacity: 0;
    transform: translateY(-20px) rotate(45deg) scale(0.4);
  }

  88%,
  100% {
    opacity: 1;
    transform: translateY(-20px) rotate(45deg) scale(1);
  }
}

.img-contenedor-hero img{
  user-select: none;
 }

@keyframes nudgeMouse {
  0% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(8px);
  }

  30% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }

  60% {
    transform: translateY(0);
  }

  80% {
    transform: translateY(8px);
  }

  90% {
    transform: translateY(0);
  }
}

/*Hero About Imagenes*/
.img-contenedor-hero{
  height: auto;
  position: relative;
  width: 100vw !important;
  max-width: none !important;
 }

 img-contenedor-hero img{
  user-select: none;
 }

 .hero-titleServiceOscuro{
  position: relative;
  z-index: 8;
 }

 .hero-subtitleServiceOscuro, .button{
  position: relative;
  z-index: 8;
 }

 .imgHeroAbout1, .imgHeroAbout2, .imgHeroAbout3, .imgHeroAbout4, .imgHeroAbout5, .imgHeroAbout6, .imgHeroAbout7{
  will-change: transform;
 }

.imgHeroAbout1 { /*Parte Verde Inferior Izquierda*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  right: 12.5vw;
  top: -8vw;
  object-fit: cover;
  overflow: visible;
}
.imgHeroAbout2 { /*Parte Verde Chillon Superior*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  left: -5vw;
  top: -18vw;
  object-fit: cover;

  overflow: visible;
}
.imgHeroAbout3 { /*Parte Verde*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  left: -1vw;
  top: -18vw;
  object-fit: cover;

  overflow: visible;
}
.imgHeroAbout4 { /*Parte Verde Inferior Izquierda*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  right: 12.5vw;
  top: -8vw;
  object-fit: cover;
  overflow: visible;
}
.imgHeroAbout5 { /*Parte Verde Chillon Superior*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  left: -5vw;
  top: -18vw;
  object-fit: cover;

  overflow: visible;
}
.imgHeroAbout6 { /*Parte Verde*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  left: -1vw;
  top: -18vw;
  object-fit: cover;
  overflow: visible;
}
.imgHeroAbout7 { /*Parte Verde Oscuro Inferior*/
  width: 90vw;
  height: 74.75vw;
  position: absolute;
  left: 7vw;
  top: -10vw;
  object-fit: cover;

  overflow: visible;
}
/*Hero About Imagenes*/
/*Hero About Imagenes Movil*/
.img-contenedor-hero-movil{
  height: auto;
  position: relative;
  width: 100vw !important;
  max-width: none !important;
  overflow: hidden;
 }
 .imgHeroAboutMovil1 { /*Parte Verde Inferior Izquierda*/
  width: 200vw;
  position: absolute;
  right: -35vw;
  top: -20vw;
  object-fit: cover;
  z-index: 7;
  overflow: visible;
}
.imgHeroAboutMovil2 { /*Parte Verde Chillon Superior*/
  width: 200vw;
  position: absolute;
  left: -63vw;
  top: -50vw;
  object-fit: cover;
  z-index: 1;
  overflow: visible;
}
.imgHeroAboutMovil3 { /*Parte Verde*/
  width: 200vw;
  position: absolute;
  left: -60vw;
  top: -45vw;
  object-fit: cover;
  z-index: 3;
  overflow: visible;
}
.imgHeroAboutMovil4 { /*Parte Verde Inferior Izquierda*/
  width: 200vw;
  position: absolute;
  right: -35vw;
  top: -20vw;
  object-fit: cover;
  z-index: 6;
  overflow: visible;
}
.imgHeroAboutMovil5 { /*Parte Verde Chillon Superior*/
  width: 200vw;
  position: absolute;
  left: -64vw;
  top: -50vw;
  object-fit: cover;
  z-index: 6;
  overflow: visible;
}
.imgHeroAboutMovil6 { /*Parte Verde*/
  width: 200vw;
  position: absolute;
  left: -60vw;
  top: -45vw;
  object-fit: cover;
  z-index: 5;
  overflow: visible;
}
.imgHeroAboutMovil7 { /*Parte Verde Oscuro Inferior*/
  width: 200vw;
  position: absolute;
  left: -45vw;
  top: -25vw;
  object-fit: cover;
  z-index: 4;
  overflow: visible;
}
 /*Hero About Imagenes Movil*/

 section {
   position: relative;
   z-index: 1;
   background: transparent;
 }

 .grain {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
  pointer-events: none;
  opacity: 0; /* Inicialmente invisible */
  transition: opacity 0.5s ease; /* Transición suave */
}

.grain.loaded {
  opacity: 1; /* Se hace visible cuando se añade la clase */
}

.grain:before {
  content: "";
  top: -10rem;
  left: -10rem;
  width: calc(100% + 20rem);
  height: calc(100% + 20rem);
  z-index: 9999;
  position: fixed;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Image_gaussian_noise_example.png);
  opacity: 0.15;
  pointer-events: none;
  animation: noise 1s steps(2) infinite;
}

@keyframes noise {
  0% { transform: translate3d(0,9rem,0); }
  10% { transform: translate3d(-1rem,-4rem,0); }
  20% { transform: translate3d(-8rem,2rem,0); }
  30% { transform: translate3d(9rem,-9rem,0); }
  40% { transform: translate3d(-2rem,7rem,0); }
  50% { transform: translate3d(-9rem,-4rem,0); }
  60% { transform: translate3d(2rem,6rem,0); }
  70% { transform: translate3d(7rem,-8rem,0); }
  80% { transform: translate3d(-9rem,1rem,0); }
  90% { transform: translate3d(6rem,-5rem,0); }
  100% { transform: translate3d(-7rem,0,0); }
}