/* Se mantiene el estilo general */
    #headerEscritorio {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9999;
      transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
      /* Transición para el movimiento y la opacidad */
      opacity: 1;
      /* Comienza visible */
    }

    #enviarMensajeTexto::placeholder {
      color: white;
    }

    #headerEscritorio.hidden {
      opacity: 0;
      /* Desaparece con opacidad 0 */
      transform: translateY(-100px);
      /* El header se mueve hacia arriba */
    }

    .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 */
    }

    #seccionPreguntas {
      position: relative;
      z-index: 10;
    }

    /* Formulario base con transición para el movimiento hacia arriba */
    #escribirMensaje>div {
      width: 100%;
      transition: transform 0.5s ease;
      /* Transición suave */
    }

    #formulario2,
    #formulario3 {
      display: none;
      /* Inicialmente ocultos */
    }

    .hide-up {
      transform: translateY(0);
      filter: blur(0px) brightness(0) hue-rotate(0deg);
      animation: desaparecerYSubir 0.8s ease-out forwards;
      /* Animación más rápida */
    }

    @keyframes desaparecerYSubir {
      0% {
        transform: translateY(0);
        /* Empieza en su posición original */
        filter: blur(0px) brightness(1) hue-rotate(0deg);
        /* Empieza oscuro e invisible */
        opacity: 100;
      }

      100% {
        transform: translateY(-100px);
        /* Subir completamente */
        filter: blur(4px) brightness(1) hue-rotate(360deg);
        /* Aparece completamente (brillo normal y cambio completo de color) */
        opacity: 0;
      }
    }

    .show-down {
      transform: translateY(0);
      filter: blur(10px) brightness(0.5) hue-rotate(0deg);
      animation: aparecerYSubir 0.8s ease-out forwards;
      /* Coincide con la animación de subida */
    }

    @keyframes aparecerYSubir {
      0% {
        transform: translateY(100px);
        /* Empieza en su posición original */
        filter: blur(4px) brightness(1) hue-rotate(360deg);
        /* Empieza oscuro e invisible */
        opacity: 0;
      }

      100% {
        transform: translateY(0);
        /* Detenerse en su posición original */
        filter: blur(0px) brightness(1) hue-rotate(0deg);
        /* Aparece completamente (brillo normal y cambio completo de color) */
        opacity: 100;
      }
    }

    /* Clase para hacer que los formularios aparezcan desde abajo */
    .show-up {
      transform: translateY(100%);
      /* Desplazar desde abajo */
    }

    /* Mensaje de éxito estilizado con animación */
    #mensajeExito {
      display: none;
      font-weight: 100;
      font-size: 2rem;
      padding-bottom: 6vh;
      padding-top: 8vh;
      color: white;
      width: auto;
      text-align: center;
      transition: transform 0.5s ease, opacity 0.5s ease;
      transform: translateY(20%);
      opacity: 0;
    }

    #mensajeExito.show-down {
      transform: translateY(0);
      opacity: 1;
    }

    /* Estilos para el scrollbar del textarea */
    #enviarMensajeTexto::-webkit-scrollbar {
      width: 8px;
      /* Ancho del scrollbar */
    }

    #enviarMensajeTexto::-webkit-scrollbar-track {
      background: transparent;
      /* Fondo del track */
    }

    #enviarMensajeTexto::-webkit-scrollbar-thumb {
      background: rgba(162, 185, 180, 0.53);
      /* Color personalizado */
      border-radius: 60px;
      /* Borde redondeado */
    }

    #enviarMensajeTexto::-webkit-scrollbar-thumb:hover {
      background: rgba(162, 185, 180, 0.75);
      /* Cambio de color al hover */
    }

    /* Estilos del textarea */
    #enviarMensajeTexto {
      resize: none;
      /* Evita redimensionar manualmente */
      overflow-y: auto;
      /* Scroll vertical automático */
      height: 38px;
      /* Altura inicial */
      max-height: 150px;
      /* Altura máxima */
      line-height: 1.5;
      /* Espaciado entre líneas */
      padding: 0.5rem;
      border-radius: 5px;
      transition: height 0.2s ease-in-out;
      /* Transición suave para el crecimiento del alto */
      max-height: 10vh;
      /* Altura inicial */
    }

    /* 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;
    }

    #mensaje,
    #enviarMensaje,
    #enviarCorreo,
    #enviarMensajeTexto {
      border: none;
      border-bottom: 1px solid white;
      border-radius: 0;
      background: transparent;
      color: white;
      padding-right: 30px;
      box-shadow: none;
      font-weight: 200;
    }

    #textoConectado p {
      font-weight: 300;
    }

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

    .body-background-contactanos {
      min-height: 100vh;
      background-image: url('../assets/img/canica-degradado-contactanos.png'), 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;
    }

    .body-background-contactanos {
      min-height: 100vh;
      background-image:
        url(''),
        linear-gradient(to bottom,
          rgba(9, 27, 23, 1) 0%,
          rgba(13, 38, 32, 1) 10%,
          rgba(25, 57, 48, 1) 20%,
          rgba(36, 75, 67, 1) 30%,
          rgba(46, 92, 82, 1) 40%,
          rgba(58, 112, 100, 1) 50%,
          rgba(73, 145, 125, 1) 60%,
          rgba(87, 179, 145, 1) 70%,
          rgba(105, 215, 170, 1) 80%,
          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;
    }

    .hero-imageMobileContactanos {
      background-image: url('');
      background-color: rgb(3, 75, 59);
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      height: 100vh;
      width: 100wh;
      background-blend-mode: multiply;
    }

    @media (min-width: 768px) {

      #headerMobile,
      #menuContenido {
        display: none;
      }

      .navbar-brand img {
        padding-left: 200px;
        height: 5vh;
      }

      .navbar {
        background-color: transparent !important;
        box-shadow: none;
        /* Sin sombra en el fondo */
        padding: 10px 15px;
      }

      .navbar {
        padding: 3vh;
        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%));
        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;
      }

      .navbar-brand img {
        height: 50px;
        object-fit: contain;
        transition: transform 0.3s ease;
        /* Animación de hover */
      }

      .nav-link {
        color: white !important;
        font-size: 1.1rem;
        transition: color 0.3s ease;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 28px;
        padding-left: 28px;
      }

      .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;
      }

      .nav-link:hover {
        color: #000;
        background-color: rgba(162, 185, 180, 0.35);
        border-radius: 8px;
        font-weight: 400;
      }

      .navbar-toggler {
        border: none;
      }

      .contactanos {
        padding-right: 5vw;
      }

      .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 */
      }

      /* Estilo para el enlace activo */
      .nav-link.active {
        color: #000;
        background-color: rgba(162, 185, 180, 0.35);
        border-radius: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 28px;
        padding-left: 28px;
        width: 131px;
        text-align: center;
        font-weight: 400;
      }

      .nav-link:hover {
        color: #000;
        background-color: rgba(162, 185, 180, 0.35);
        border-radius: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 28px;
        padding-left: 28px;
        font-weight: 400;
      }

      .nav-link a:hover {
        color: #000;
        background-color: rgba(162, 185, 180, 0.35);
        border-radius: 8px;
        padding-top: 14px;
        padding-bottom: 14px;
        padding-right: 28px;
        padding-left: 28px;
        font-weight: 800;
      }

      /* 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 */
      }

      /* 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 */
      }

      /* 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 */
      }

      /* 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;
      }

      .btn-5 img {
        height: 2vh;
        padding-left: 0.8vw;
        padding-bottom: 0.5vh;
      }

      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: 64px;
      }

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

      h4.hero-subtitleService {
        font-family: Fira Sans !important;
        font-size: 18px;
        font-weight: 300;
        color: #244B43;
      }

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

      #imagenConTextoTienesPreguntas {
        text-align: end;
      }

      #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;
      }

      .holaMail,
      .redes {
        font-size: 0.8333vw !important;
        font-weight: 300 !important;
        line-height: 0.9896vw !important;
      }

      .redes {
        padding: 0.52vw 0.83vw !important;
      }

      #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;
      }

      #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;
      }

      #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;
      }

      #seccionPreguntas {
        padding-top: 40vh;
      }

      #tienesPreguntas {
        font-size: 3.125vw;
        font-weight: 275;
        line-height: 3.75vw;
      }

      #escribenosMensaje {
        font-weight: 300;
        font-size: 1.7708vw;
        line-height: 1.6667vw;
        padding-bottom: 6vh;
        color: white;
        white-space: nowrap;
      }

      #rellenableNombre {
        font-weight: 100;
        font-size: 0.8333vw;
      }

      #rellenableNombre input {
        font-size: 0.8333vw;
      }

      .email-input input {
        position: relative;
        font-size: 0.8333vw !important;
      }

      #conectadoFila {
        width: auto;
        padding-right: 200vw;
      }

      #conectado h3 {
        font-size: 3.125vw;
        font-weight: 275;
        line-height: 3.75vw;
      }

      #barraSocial h5 {
        font-size: 1.7708vw;
        font-weight: 300;
        line-height: 1.6667vw;
      }

      #redesSociales {
        justify-content: end;
      }

      #redesSociales a {
        font-size: 16px;
        width: auto;
        font-weight: 200;
      }

      #sigueNoticias {
        padding-top: 4vh;
        position: relative;
        height: 15.94vw;
      }

      #sigueNoticias h5 {
        font-size: 1.7708vw;
        font-weight: 300;
        line-height: 1.6667vw;
        margin-bottom: 2vw;
      }
      
      /* Ocultar y animar el formulario hacia arriba */
.email-input {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.hide-up {
  animation: desaparecerYSubir 0.8s ease-out forwards;
}

@keyframes desaparecerYSubir {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100px);
    opacity: 0;
  }
}

/* Animación para mostrar el mensaje de agradecimiento */
#responseMessage {
  display: none;
  font-weight: 100;
  font-size: 2rem;
  color: white;
  text-align: center;
  transform: translateY(20%);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.show-down {
  display: block;
  animation: aparecerYSubir 0.8s ease-out forwards;
}




      /* Estilos Generales */
      #conectado {
        height: 15.94vw;
        max-height: 15.94vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .email-input {
        position: relative;
        width: 22.2917vw !important;
      }

      .email-input input {
        width: 100%;
        padding-right: 40px;
        border: 1px solid white;
        border-radius: 5px;
        background-color: transparent;
        color: white;
      }

      .email-input input::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      /* Flecha personalizada */
      .flecha {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%) rotate(45deg);
        width: 14px;
        height: 14px;
        border-right: 2px solid white;
        border-top: 2px solid white;
        cursor: pointer;
      }

      .flecha::after {
        content: "";
        position: absolute;
        top: -7px;
        right: 3px;
        width: 14px;
        height: 17px;
        border-right: 2px solid white;
        transform: rotate(45deg);
        /* Cabeza ↗ */
      }

      #barraSocial {
        height: 15.94vw;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding-top: 4vh;
        align-items: baseline;
      }

      .socialLinks {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 13.5vw;
      }

      .FormEmail {
        display: flex;
        flex-direction: column;
        justify-content: baseline;
        width: 100%;
      }

      .hablemosBtn {
        color: white;
        font-weight: 200;
        font-family: 'Fira Sans', sans-serif;
      }

      .hablemosBtn {
        font-size: 24px;
        color: white;
        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 {
        padding: 1rem;
        padding-left: 4rem;
        padding-right: 4rem;
        transition: all 0.3s ease-in-out;
      }

      #escribirMensaje .input-group {
        width: 34vw;
      }

    }

    /* Estilos responsivos */
    @media (max-width: 767px) {

      #imagenConTextoTienesPreguntas {
        text-align: start;
      }

      .slider {
        display: block;
        animation: none;
      }

      .logos {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        justify-items: center;
        animation: none;
      }

      .logos img {
        width: 80px;
        height: 80px;
        margin: 0;
      }

      /* Alineación de Social con Escríbenos */
      #barraSocial {
        margin-top: 15vw;
        display: flex;
        align-items: flex-start;
      }

      /* Ajuste fino del margen izquierdo de Social */
      .social-align {
        margin-left: 10px;
        /* Ajuste de precisión */
      }

      /* Alineación general */
      #escribenosMensaje {
        margin-left: 10px;
      }

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

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

      .input-group input::placeholder {
        color: white;
        opacity: 1;
      }

      /* Estilo para "tienes preguntas" */
      #imagenConTextoTienesPreguntas {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 10vh;
      }

      #imagenInterrogacion {
        order: 1;
        /* Mueve la imagen al lado derecho */
        margin-left: 10vw;
        /* Añade espacio entre el texto y la imagen */
      }

      #tienesPreguntas {
        order: 0;
      }

      #seccionPreguntas {
        padding-top: 30vh;
      }

      #imagenInterrogacion {
        width: 80px;
        padding-top: 2vh;
      }

      #imagenInterrogacion img {
        width: 16.67vw;
        max-width: 16.67vw !important;
        height: auto;
        max-height: 16.67vw !important;
      }

      #tienesPreguntas {
        font-size: 8.75vw;
        font-weight: 275;
        line-height: 10.42vw;
      }

      #rellenableNombre {
        font-weight: 100;
        font-size: 15px;
      }

      #conectado h3 {
        font-size: 60px;
        font-weight: 100;
      }

      #barraSocial h5 {
        font-size: 34px;
        font-weight: 100;
      }

      /* Alineación de Sigue nuestras noticias */
      #sigueNoticias {
        padding-bottom: 15vh;
      }

      #sigueNoticias h5 {
        font-size: 34px;
        font-weight: 100;
      }

      #sigueNoticias .form-control {
        font-size: 16px;
        font-weight: 300;
      }

      /* Alineación general de Conectado */
      #conectado {
        margin-top: 6vh;
      }

      .email-input {
        position: relative;
        width: 428px;
      }

      .email-input input {
        width: 100%;
        padding-right: 40px;
        border: 1px solid white;
        border-radius: 5px;
        background-color: transparent;
        color: white;
      }

      .email-input input::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      #redesSociales {
        padding-bottom: 8vh;
      }

      #redesSociales a {
        font-size: 16px;
        width: auto;
        font-weight: 200;
      }

      #headerEscritorio {
        display: none;
      }

      body {
        margin: 0;
        overflow-x: hidden;
        background: linear-gradient(to bottom, rgba(9, 27, 23, 1), rgba(36, 75, 67, 1), rgba(123, 252, 198, 1), rgba(247, 247, 247, 1));
        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);
      }

      .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;
      }

      footer {
        background-color: rgba(162, 185, 180, 0.35);
        color: rgba(36, 75, 67, 1) !important;
        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;
      }

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

      .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: 275;
        font-size: 5.42vw;
        line-height: 6.67vw;
        padding-bottom: 6vh;
        padding-top: 8vh;
        color: white;
        width: auto;
      }

      #enviarMensaje {
        font-weight: 200;
        font-size: 16px;
      }

      #rellenableNombre {
        font-weight: 400;
        font-size: 3.33vw;
      }

      #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 !important;
        /* 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 {
        margin-top: 15vw;
        padding-bottom: 10vh;
        height: 15.2083vw;
      }

      #imagenMantenteConectado {
        padding-bottom: 8vh;
      }

      #imagenMantenteConectado img {
        max-width: 16.67vw !important;
        max-height: 16.67vw !important;
      }

      #textoConectado p {
        font-weight: 400;
        font-size: 3.33vw;
        line-height: 3.96vw;
        padding: 2.08vw 3.33vw;
      }

      #barraSocial h5 {
        font-size: 7.08vw;
        font-weight: 300;
        line-height: 6.67vw;
      }

      #redesSociales {
        padding-top: 6vh;
      }

      #redesSociales a {
        font-size: 3.33vw;
        width: auto;
        font-weight: 400;
        line-height: 3.96vw;
      }

      #sigueNoticias {
        width: auto;
        margin-right: 3vw;
        padding-top: 4vh;
      }

      #sigueNoticias h5 {
        font-size: 5.42vw;
        font-weight: 300;
        line-height: 6.67vw;
      }

      /* Estilos Generales */
      #conectado {
        margin-top: 6vh;
      }

      #textoConectado h3 {
        font-size: 8.75vw;
        font-weight: 275;
        line-height: 10.42vw;
        padding-bottom: 3vh;
      }

      .email-input {
        position: relative;
        width: 428px;
      }

      .email-input input {
        width: 100%;
        padding-right: 40px;
        border: 1px solid white;
        border-radius: 5px;
        background-color: transparent;
        color: white;
      }

      .email-input input::placeholder {
        color: rgba(255, 255, 255, 0.7);
      }

      .flecha {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
        width: 14px;
        /* Ajusta el tamaño de la flecha */
        height: 14px;
        /* Ajusta el tamaño de la flecha */
        background: url('assets\img\flechaFormulario.png') no-repeat center center;
        background-size: contain;
        /* Asegura que la imagen mantenga su tamaño original */
        cursor: pointer;
      }

      #escribirMensaje .input-group {
        width: 78.92vw;
      }

      #escribirMensaje input {
        font-size: 3.33vw;
        font-weight: 400;
        line-height: 3.96vw;
      }

      #sigueNoticias .input-group {
        width: 78.92vw;
      }

      #sigueNoticias input {
        font-size: 3.33vw !important;
        font-weight: 400;
        line-height: 3.96vw !important;
      }

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

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

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

      h4.hero-subtitleService {
        font-family: Fira Sans !important;
        font-size: 18px;
        font-weight: 300;
        color: #244B43;
      }

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

      .hablemosBtn {
        font-size: 14px;
        color: white;
        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);
        font-family: 'Fira Sans', sans-serif;
      }

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

      /* Flecha personalizada */
      .flecha {
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%) rotate(45deg);
        width: 14px;
        height: 14px;
        border-right: 2px solid white;
        border-top: 2px solid white;
        cursor: pointer;
      }

      .flecha::after {
        content: "";
        position: absolute;
        top: -7px;
        right: 3px;
        width: 14px;
        height: 17px;
        border-right: 2px solid white;
        transform: rotate(45deg);
        /* Cabeza ↗ */
      }

      #botonParaAbajo {
        padding-top: 20vh;
      }

      #seccionPreguntas,
      #conectado {
        width: 100%;
        max-width: 1200px;
        /* Limita el ancho máximo si lo deseas */
        margin: 0 auto;
        box-sizing: border-box;
        /* Asegura que el padding no afecte el tamaño total */
      }

      .row {
        display: flex;
        justify-content: center;
      }

    }

    /* Preguntas Section CSS */

    .container img {
      max-height: 4.2708vw;
      max-width: 4.2708vw;
    }

    h3 .fw-bold {
      font-weight: bold;
    }

    label {
      margin-bottom: -10%;
    }

    .input-group {
      margin-top: 10%;
    }

    /* Conectado Section CSS */

    .container .col-md-6 {
      padding-right: 15%;
    }

    .container p {
      border: 1px solid white;
      border-radius: 30px;
      padding: 0.52vw 0.83vw;
      display: inline-block;
    }

    .container .btn-outline-light {
      border-radius: 30px;
      width: auto;
    }

    /* Form and Social Links CSS */
    /* Alineación vertical para Social */

    /* Ajuste general de input */
    .input-group input {
      border: none;
      border-bottom: 1px solid white;
      border-radius: 0;
      background: transparent;
      color: white;
      padding-right: 30px;
      box-shadow: none;
    }

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

    .input-group input::placeholder {
      color: white;
      opacity: 1;
    }

    .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);
      }
    }

    .body-background-contactanos {
      min-height: 100vh;
      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;
      overflow-x: hidden;
    }

    .body-background-contactanos {
      min-height: 100vh;
      background-image:
        url(''),
        linear-gradient(to bottom,
          rgba(9, 27, 23, 1) 0%,
          rgba(13, 38, 32, 1) 10%,
          rgba(25, 57, 48, 1) 20%,
          rgba(36, 75, 67, 1) 30%,
          rgba(46, 92, 82, 1) 40%,
          rgba(58, 112, 100, 1) 50%,
          rgba(73, 145, 125, 1) 60%,
          rgba(87, 179, 145, 1) 70%,
          rgba(105, 215, 170, 1) 80%,
          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;
    }

    /*Hero Contact Imagenes*/
    .img-contenedor-hero {
      height: auto;
      position: relative;
      width: 90vw !important;
      max-width: none !important;
      z-index: 1;
    }

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

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

    .title-container{
      position: relative;
      z-index: 8;
    }

    .button-container{
      position: relative;
      z-index: 8;
    }

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

    .imgHeroContact1, .imgHeroContact2, .imgHeroContact3, .imgHeroContact4, .imgHeroContact5 {
      will-change: transform;
    }

    .imgHeroContact1 {
      /*Parte Blanca*/
      max-width: 100vw !important;
      max-height: none !important;
      width: 85vw;
      height: 74.75vw;
      position: absolute;
      right: -4.5vw;
      top: -14vw;
      object-fit: cover;
      z-index: 1;
    }

    .imgHeroContact2 {
      /*Parte Verde Chillon*/
      max-width: 100vw !important;
      max-height: none !important;
      width: 80vw;
      height: 74.75vw;
      position: absolute;
      left: 13.5vw;
      top: -11.5vw;
      object-fit: cover;
      z-index: 2;
    }

    .imgHeroContact3 {
      /*Parte Verde/Rosa Superior Izquierda*/
      max-width: 100vw !important;
      max-height: none !important;
      width: 90vw;
      height: 74.75vw;
      position: absolute;
      left: -1vw;
      top: -15vw;
      object-fit: cover;
      z-index: 4;
    }

    .imgHeroContact4 {
      /*Parte Verde/Rosa Inferior Derecha*/
      max-width: 100vw !important;
      max-height: none !important;
      width: 90vw;
      height: 74.75vw;
      position: absolute;
      right: -1vw;
      top: -16vw;
      object-fit: cover;
      z-index: 3;
    }

    .imgHeroContact5 {
      /*Parte Verde Medio*/
      max-width: 100vw !important;
      max-height: none !important;
      width: 90vw;
      height: 74.75vw;
      position: absolute;
      left: 0vw;
      top: -15vw;
      object-fit: cover;
      z-index: 5;
    }

    /*Hero Contact Imagenes*/
    /*Hero Contact Imagenes Movil*/
    .img-contenedor-hero-movil {
      height: auto;
      position: relative;
      width: 100vw !important;
      max-width: none !important;
      overflow-x: visible;
    }

    .imgHeroContactMovil1 {
      /*Parte Blanca*/
      max-width: 225vw !important;
      max-height: none !important;
      width: 225vw;
      position: absolute;
      right: -80.5vw;
      top: -31vw;
      object-fit: cover;
      z-index: 1;
      overflow: visible;
    }

    .imgHeroContactMovil2 {
      /*Parte Verde Chillon*/
      max-width: 225vw !important;
      max-height: none !important;
      width: 225vw;
      position: absolute;
      left: -38vw;
      top: -29vw;
      object-fit: cover;
      z-index: 2;
      overflow: visible;
    }

    .imgHeroContactMovil3 {
      /*Parte Verde/Rosa Superior Izquierda*/
      max-width: 225vw !important;
      max-height: none !important;
      width: 225vw;
      position: absolute;
      left: -65vw;
      top: -30vw;
      object-fit: cover;
      z-index: 4;
      overflow: visible;
    }

    .imgHeroContactMovil4 {
      /*Parte Verde/Rosa Inferior Derecha*/
      max-width: 225vw !important;
      max-height: none !important;
      width: 225vw;
      position: absolute;
      right: -80.5vw;
      top: -29vw;
      object-fit: cover;
      z-index: 3;
      overflow: visible;
    }

    .imgHeroContactMovil5 {
      /*Parte Verde Medio*/
      max-width: 225vw !important;
      max-height: none !important;
      width: 225vw;
      position: absolute;
      left: -65vw;
      top: -30vw;
      object-fit: cover;
      z-index: 5;
      overflow: visible;

    }

    /*Hero Contact Imagenes Movil*/

    .hero-imageMobileContactanos {
      background-image: url('');
      background-color: rgb(3, 75, 59);
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      height: 100vh;
      width: 100vw;
      background-blend-mode: multiply;
    }

    html {
      overflow-x: hidden;
    }

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

    .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);
    }

    /* 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: 46px;
      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);
      }
    }

    @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);
      }
    }

    /* Change autocomplete styles in WebKit */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    textarea:-webkit-autofill,
    textarea:-webkit-autofill:hover,
    textarea:-webkit-autofill:focus,
    select:-webkit-autofill,
    select:-webkit-autofill:hover,
    select:-webkit-autofill:focus {
      -webkit-text-fill-color: white;
      -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
      transition: background-color 5000s ease-in-out 0s;
    }

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