/*Helpers*/

.strong-italic {
  font-style: italic;
  font-weight: 700;
}

.center {
  text-align: center;
}

.light {
  font-weight: 100 !important;
}

.m-50 {
  margin: 50px;
}

.m-100 {
  margin: 100px !important;
}

.my-100 {
  margin: 50px 0;
}

.bgWhite {
  background: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}

nav ul {
  display: none;
  position: absolute;
  top: 0px;
  z-index: 1000;
  background-color: white;
  border-radius: 5%;
  margin-top: 4%;
  padding: 2%;
  border: solid 1px #dde695;
}

nav ul li {
  color: #808584;
}

nav ul li a div.nav-item-submenu {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 20rem;
  margin-top: 1%;
  margin-bottom: 1%;
  padding-top: 1%;
  padding-bottom: 1%;
}

nav ul li a div.nav-item-submenu .nav-item-submenu-img {
  background: url("../assets/img/servicios/nube/Nube.svg") no-repeat;
  width: 4rem;
  height: 2rem;
}

nav ul li a div.nav-item-submenu .nav-item-submenu-text p {
  font-size: 0.9rem;
  color: #808584;
}

nav ul li a div.nav-item-submenu .nav-item-submenu-text b {
  color: black;
}

nav .nav-item:hover ul {
  display: block;
}

:root {
  --base-header-height: 6.813vw;
  --header-height: var(--base-header-height);
}
@media (max-width: 1023px) {
  :root {
    --header-height: calc(var(--base-header-height) * 3);
  }
}
@media (min-width: 1024px) {
  header {
    width: 100%;
  }
}

/* Estilos específicos para dispositivos celulares */
@media (max-width: 768px) {
  /********* Menu Header *********/

  .header-container {
    width: 100%;
    height: 7vw;
    padding: 0 5%;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;
  }

  .nav-item {
    cursor: pointer;
  }

  .header-container {
    flex-direction: column;
    padding: 10px;
    height: auto;
    position: relative;
  }

  .header-content {
    flex-direction: row;
    align-items: center;
    gap: 1px;
  }

  .nav-container {
    display: none;
  }

  .nav-container-idiomas {
    display: none;
  }

  .button-contacto-menu-header {
    display: none;
  }

  .menu-icon {
    position: relative;
    right: 10% !important;
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 5vw;
    height: 5vw;
    cursor: pointer;
    background: #f7f7f7;
    border: 2px solid #dde695;
    border-radius: 5px;
    padding: 1%;
  }

  .menu-icon .line {
    width: 100%;
    height: 0.5vw;
    background: #b0b2b1;
    border-radius: 5px;
  }

  .menu-icon {
    display: flex;
  }

  .mobile-nav {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    background: white;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    max-height: calc(100dvh - var(--header-h, 64px));
    overflow-y: auto; /* <-- habilita scroll interno */
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
  }

  .mobile-nav .nav-item {
    width: 70%;
    /* height: 5vw; */
    text-align: left;
    padding: 0.8em 0;
    font-size: 4.7vw;
    font-weight: 500;
  }

  .mobile-nav .nav-item:last-child {
    border-bottom: none;
  }

  .mobile-nav.show {
    display: flex;
  }

  .logo-container {
    display: flex;
    align-items: center;
    position: relative;
    left: -6vw;
  }

  #logo_wundertec {
    width: auto;
    max-height: 20vw;
    position: relative;
    left: 2%;
  }

  .button-contacto-header {
    width: 40%;
    height: 10.8vw;
    position: relative;
    background: linear-gradient(101deg, #638638 0%, #c6d54f 69%);
    border-radius: 41.97px;
    border: 0px;
    color: white;
    font-size: 3.5vw;
    font-weight: 500;
    line-height: 3vw;
    text-align: center;
    display: block;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
  }

  /* ***** footer ***** */

  .footer-container,
  .footer-container * {
    box-sizing: border-box;
  }

  .footer-container {
    display: none;
  }

  .footer-container-movil {
    background: #101011;
    flex-shrink: 0;
    width: 100%;
    height: 260vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 8vw;
  }

  .footer-logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-logo-img {
    width: 59.987vw;
    height: 10.95vw;
  }

  .footer-social-icon {
    width: 100%;
    height: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 2vw;
  }

  .footer-social-icon a {
    text-decoration: none;
  }

  .footer-social-linkedin {
    flex-shrink: 0;
    width: 5.883vw;
    height: 5.883vw;
    position: relative;
    overflow: visible;
  }

  .footer-social-clutch {
    flex-shrink: 0;
    width: 15vw;
    height: 4.5vw;
    position: relative;
    overflow: visible;
    top: -0.3vw;
  }

  .footer-label-correo {
    color: #f2f3f3;
    text-align: center;
    font-size: 3.938vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
  }

  .footer-unete {
    width: 100%;
  }

  .footer-unete span.footer-unete-verde {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 3.938vw;
    line-height: 140%;
    color: rgba(212, 224, 123, 1);
    margin-top: 2vw;
  }

  .footer-unete span {
    display: block;
    width: 100%;
    font-weight: 300;
    font-size: 3.938vw;
    line-height: 140%;
    color: rgba(242, 242, 243, 1);
    text-align: center;
  }

  .footer-oficinas {
    width: 100%;
    height: 60vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 0vw;
    position: relative;
  }

  .footer-oficinas-columna {
    width: 100%;
    height: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 15vw;
  }

  .footer-content-eu {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.22916655vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .footer-item2 {
    display: flex;
    flex-direction: column;
    gap: 1.40625vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 80%;
    position: relative;
    left: 8%;
  }

  .footer-label-pais {
    color: #f2f3f3;
    text-align: left;
    font-size: 4.5vw;
    line-height: 140%;
    font-weight: 700;
    position: relative;
  }

  .footer-label-direccion-eu {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 39vw;
  }

  .footer-label-telefono {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 41vw;
  }

  .phone-link {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 41vw;
    text-decoration: none;

    /* Asegura que el color y el estilo se apliquen en móviles */
    -webkit-text-fill-color: #f2f3f3;
    /* Para Safari y Chrome */
    -webkit-user-select: none;
    /* Evita la selección automática del número en iOS */
    appearance: none;
    /* Elimina los estilos predeterminados en iOS */
  }

  .phone-link:link,
  .phone-link:visited,
  .phone-link:focus,
  .phone-link:hover,
  .phone-link:active {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 41vw;
    text-decoration: none;

    /* Asegura que el color y el estilo se apliquen en todos los estados */
    -webkit-text-fill-color: #f2f3f3;
    /* Para Safari y Chrome */
    -webkit-user-select: none;
    /* Evita la selección automática en iOS */
    appearance: none;
    /* Elimina los estilos predeterminados en iOS */
    outline: none;
    /* Elimina el borde */
  }

  .footer-content-canada {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.22916665vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    top: -7vw;
  }

  .footer-item3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 80%;
    position: relative;
    left: 8%;
  }

  .footer-label-direccion-canada {
    margin: -0.15625vw 0 0 0;
    color: #c2a7cc;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
  }

  .footer-content-mexico {
    display: flex;
    flex-direction: column;
    gap: 3.22916665vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .footer-item4 {
    display: flex;
    flex-direction: column;
    gap: 1.40625vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 39vw;
    position: relative;
  }

  .footer-label-direccion-mexico {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 39vw;
  }

  .footer-menu-suscribirse {
    width: 100%;
    height: 45vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 5vw;
  }

  .footer-menu-suscribirse-columna {
    width: 100%;
    height: 40vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 5vw;
    position: relative;
  }

  .footer-menu-suscribirse-columna a {
    text-decoration: none;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.833333328vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 80%;
    margin-left: 10vw;
  }

  .footer-item {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
  }

  .footer-label-menu {
    color: #ffffff;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    cursor: pointer;
  }

  .footer-label-aviso {
    color: #ffffff;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    cursor: pointer;
  }

  .footer-label-potencia-bandeja {
    color: #d4e07b;
    text-align: left;
    position: relative;
    width: 12.6041666vw;
  }

  .footer-label-potencia-bandeja-span {
    color: #d4e07b;
    font-size: 4vw;
    line-height: 140%;
    font-weight: 600;
    width: 80%;
  }

  .footer-label-potencia-bandeja-span2 {
    color: #d4e07b;
    font-size: 3.9vw;
    line-height: 140%;
    font-weight: 400;
    width: 80%;
    position: relative;
    top: -4vw;
  }

  .footer-button {
    background: #ffffff;
    border-radius: 360px;
    padding: 0.208333328vw 0.833333328vw 0.208333328vw 0.72916665vw;
    display: flex;
    flex-direction: row;
    gap: 0.208333328vw;
    align-items: center;
    justify-content: center;
    width: 30.5vw;
    height: 7.598vw;
    position: relative;
    left: -5%;
    top: -5vw;
  }

  .footer-button-content {
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .footer-button-label {
    padding: 0vw 0.208333328vw 0vw 0.208333328vw;
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .footer-button-label-suscribirse {
    color: #101011;
    text-align: left;
    font-size: 4.5vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
  }

  .footer-menu-logos {
    width: 100%;
    height: 35vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    column-gap: 12vw;
    margin-bottom: 2vw;
  }

  .clutch-widget {
    width: 21.642vw;
    position: relative;
    transform: scale(1);
  }

  .aws-partner {
    width: 21.997vw;
    height: 21.997vw;
    position: relative;
  }

  .footer-divider {
    margin-top: -0.052083333vw;
    border-width: 0.052083333vw 0 0 0;
    border-style: solid;
    border-image: linear-gradient(
      -89deg,
      rgba(198, 213, 79, 0) 0%,
      rgba(198, 213, 79, 0.46) 11.500000208616257%,
      rgba(198, 213, 79, 1) 51.99999809265137%,
      rgba(198, 213, 79, 0.43) 88.99999856948853%,
      rgba(198, 213, 79, 0) 100%
    );
    border-image-slice: 1;
    width: 80vw;
    height: 0vw;
    position: relative;
  }

  .footer-line {
    display: flex;
    flex-direction: row;
    gap: 20.9375vw;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .footer-label-derechos {
    color: #808584;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 80%;
    text-align: center;
  }

  .footer-group2 {
    width: 95.39%;
    height: 10.04%;
    position: absolute;
    right: 2.1%;
    left: 2.5%;
    bottom: -0.01%;
    top: 89.97%;
    overflow: visible;
  }

  .footer-group-1000005553 {
    position: absolute;
    inset: 0;
  }

  .bg404 {
    background: rgb(249, 251, 237);
    background: linear-gradient(
      180deg,
      rgba(249, 251, 237, 1) 0%,
      rgba(232, 245, 251, 1) 100%
    );
    height: 100vh;
    font-size: 5vw;
    line-height: 1.5;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 105vw;
    row-gap: 5vw;
  }

  .bg404 p {
    width: 80%;
  }

  .img404 {
    width: 90%;
  }

  .agradecimiento {
    background: linear-gradient(
      180deg,
      rgba(254, 246, 229, 1) 0%,
      rgba(254, 246, 229, 0) 100%
    );
    flex-shrink: 0;
  }

  .bgConstruccion {
    background: rgb(232, 245, 251);
    background: linear-gradient(
      90deg,
      rgba(232, 245, 251, 1) 0%,
      rgba(232, 245, 251, 1) 100%
    );
    font-size: 4.3vw;
    line-height: 1.5;
    font-weight: 700;
    row-gap: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 130.75vw;
  }

  .bgConstruccion p {
    width: 70%;
    margin-bottom: 4vw;
  }

  .button-regresar-inicio {
    background: linear-gradient(101deg, #638638 0%, #c6d54f 69%);
    border-radius: 22.5vw;
    border: 1px solid #d4e07b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45vw;
    height: 7.8vw;
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 1.5vw;
    cursor: pointer;
  }

  .icon-button-regresar-inicio {
    transform: rotate(180deg);
  }

  .contact-text {
    text-align: center;
    color: white;
    font-size: 3.4vw;
    font-weight: 500;
    line-height: 2vw;
  }
}

/* Estilos específicos para dispositivos tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  /********* Menu Header *********/

  .header-container {
    width: 100%;
    height: 7vw;
    padding: 0 5%;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .header-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #000000;
  }

  .nav-item {
    cursor: pointer;
  }

  .header-container {
    flex-direction: column;
    padding: 10px;
    height: auto;
    position: relative;
  }

  .header-content {
    flex-direction: row;
    align-items: center;
    gap: 1px;
  }

  .nav-container {
    display: none;
  }

  .nav-container-idiomas {
    display: none;
  }

  .button-contacto-menu-header {
    display: none;
  }

  .menu-icon {
    position: relative;
    right: 15%;
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 5vw;
    height: 5vw;
    cursor: pointer;
    background: #f7f7f7;
    border: 2px solid #dde695;
    border-radius: 5px;
    padding: 1%;
  }

  .menu-icon .line {
    width: 100%;
    height: 0.5vw;
    background: #b0b2b1;
    border-radius: 5px;
  }

  .menu-icon {
    display: flex;
  }

  .mobile-nav {
    position: fixed;
    display: none;
    flex-direction: column;
    align-items: center;
    background: white;
    top: var(--header-height);
    left: 0;
    width: 100%;
    height: auto;
    /* height: 100vw; */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    max-height: calc(100dvh - var(--header-h, 64px));
    overflow-y: auto; /* <-- habilita scroll interno */
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
  }

  .mobile-nav .nav-item {
    width: 70%;
    height: 5vw;
    text-align: left;
    padding: 0.8em 0;
    font-size: 4.7vw;
    font-weight: 500;
  }

  .mobile-nav .nav-item:last-child {
    border-bottom: none;
  }

  .mobile-nav.show {
    display: flex;
    max-height: 70vh;
    padding-bottom: 80px;
  }

  .logo-container {
    display: flex;
    align-items: center;
    position: relative;
    left: -6vw;
  }

  #logo_wundertec {
    width: auto;
    max-height: 20vw;
    position: relative;
    left: 2%;
  }

  .button-contacto-header {
    width: 40%;
    height: 10.8vw;
    position: relative;
    background: linear-gradient(101deg, #638638 0%, #c6d54f 69%);
    border-radius: 41.97px;
    border: 0px;
    color: white;
    font-size: 3.5vw;
    font-weight: 500;
    line-height: 3vw;
    text-align: center;
    display: block;
    justify-content: left;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
  }

  /* ***** footer ***** */

  .footer-container,
  .footer-container * {
    box-sizing: border-box;
  }

  .footer-container {
    display: none;
  }

  .footer-container-movil {
    background: #101011;
    flex-shrink: 0;
    width: 100%;
    height: 260vw;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 8vw;
  }

  .footer-logo {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-logo-img {
    width: 59.987vw;
    height: 10.95vw;
  }

  .footer-social-icon {
    width: 100%;
    height: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    row-gap: 2vw;
  }

  .footer-social-icon a {
    text-decoration: none;
  }

  .footer-social-linkedin {
    flex-shrink: 0;
    width: 5.883vw;
    height: 5.883vw;
    position: relative;
    overflow: visible;
  }

  .footer-social-clutch {
    flex-shrink: 0;
    width: 15vw;
    height: 4.5vw;
    position: relative;
    overflow: visible;
    top: -0.3vw;
  }

  .footer-label-correo {
    color: #f2f3f3;
    text-align: center;
    font-size: 3.938vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
  }

  .footer-unete {
    width: 100%;
  }

  .footer-unete span.footer-unete-verde {
    display: block;
    width: 100%;
    font-weight: 600;
    font-size: 3.938vw;
    line-height: 140%;
    color: rgba(212, 224, 123, 1);
  }

  .footer-unete span {
    display: block;
    width: 100%;
    font-size: 3.938vw;
    line-height: 140%;
    color: rgba(242, 242, 243, 1);
    text-align: center;
  }

  .footer-oficinas {
    width: 100%;
    height: 60vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 0vw;
    position: relative;
  }

  .footer-oficinas-columna {
    width: 100%;
    height: 50vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 15vw;
  }

  .footer-content-eu {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.22916655vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .footer-item2 {
    display: flex;
    flex-direction: column;
    gap: 1.40625vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 80%;
    position: relative;
    left: 8%;
  }

  .footer-label-pais {
    color: #f2f3f3;
    text-align: left;
    font-size: 4.5vw;
    line-height: 140%;
    font-weight: 700;
    position: relative;
  }

  .footer-label-direccion-eu {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 39vw;
  }

  .footer-label-telefono {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 41vw;
  }

  .phone-link {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 41vw;
    text-decoration: none;

    /* Asegura que el color y el estilo se apliquen en móviles */
    -webkit-text-fill-color: #f2f3f3;
    /* Para Safari y Chrome */
    -webkit-user-select: none;
    /* Evita la selección automática del número en iOS */
    appearance: none;
    /* Elimina los estilos predeterminados en iOS */
  }

  .phone-link:link,
  .phone-link:visited,
  .phone-link:focus,
  .phone-link:hover,
  .phone-link:active {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 41vw;
    text-decoration: none;

    /* Asegura que el color y el estilo se apliquen en todos los estados */
    -webkit-text-fill-color: #f2f3f3;
    /* Para Safari y Chrome */
    -webkit-user-select: none;
    /* Evita la selección automática en iOS */
    appearance: none;
    /* Elimina los estilos predeterminados en iOS */
    outline: none;
    /* Elimina el borde */
  }

  .footer-content-canada {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3.22916665vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    top: -7vw;
  }

  .footer-item3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 80%;
    position: relative;
    left: 8%;
  }

  .footer-label-direccion-canada {
    margin: -0.15625vw 0 0 0;
    color: #c2a7cc;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
  }

  .footer-content-mexico {
    display: flex;
    flex-direction: column;
    gap: 3.22916665vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
  }

  .footer-item4 {
    display: flex;
    flex-direction: column;
    gap: 1.40625vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 39vw;
    position: relative;
  }

  .footer-label-direccion-mexico {
    color: #f2f3f3;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 39vw;
  }

  .footer-menu-suscribirse {
    width: 100%;
    height: 45vw;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 5vw;
  }

  .footer-menu-suscribirse-columna {
    width: 100%;
    height: 40vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    row-gap: 5vw;
    position: relative;
  }

  .footer-menu-suscribirse-columna a {
    text-decoration: none;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.833333328vw;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    width: 80%;
    margin-left: 10vw;
  }

  .footer-item {
    display: flex;
    flex-direction: column;
    gap: 3vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
  }

  .footer-label-menu {
    color: #ffffff;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    cursor: pointer;
  }

  .footer-label-aviso {
    color: #ffffff;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    cursor: pointer;
  }

  .footer-label-potencia-bandeja {
    color: #d4e07b;
    text-align: left;
    position: relative;
    width: 12.6041666vw;
  }

  .footer-label-potencia-bandeja-span {
    color: #d4e07b;
    font-size: 4vw;
    line-height: 140%;
    font-weight: 600;
    width: 80%;
  }

  .footer-label-potencia-bandeja-span2 {
    color: #d4e07b;
    font-size: 3.9vw;
    line-height: 140%;
    font-weight: 400;
    width: 80%;
    position: relative;
    top: -4vw;
  }

  .footer-button {
    background: #ffffff;
    border-radius: 360px;
    padding: 0.208333328vw 0.833333328vw 0.208333328vw 0.72916665vw;
    display: flex;
    flex-direction: row;
    gap: 0.208333328vw;
    align-items: center;
    justify-content: center;
    width: 30.5vw;
    height: 7.598vw;
    position: relative;
    left: -5%;
    top: -5vw;
  }

  .footer-button-content {
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .footer-button-label {
    padding: 0vw 0.208333328vw 0vw 0.208333328vw;
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .footer-button-label-suscribirse {
    color: #101011;
    text-align: left;
    font-size: 4.5vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
  }

  .footer-menu-logos {
    width: 100%;
    height: 35vw;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    column-gap: 12vw;
    margin-bottom: 2vw;
  }

  .clutch-widget {
    width: 21.642vw;
    position: relative;
    transform: scale(1);
  }

  .aws-partner {
    width: 21.997vw;
    height: 21.997vw;
    position: relative;
  }

  .footer-divider {
    margin-top: -0.052083333vw;
    border-width: 0.052083333vw 0 0 0;
    border-style: solid;
    border-image: linear-gradient(
      -89deg,
      rgba(198, 213, 79, 0) 0%,
      rgba(198, 213, 79, 0.46) 11.500000208616257%,
      rgba(198, 213, 79, 1) 51.99999809265137%,
      rgba(198, 213, 79, 0.43) 88.99999856948853%,
      rgba(198, 213, 79, 0) 100%
    );
    border-image-slice: 1;
    width: 80vw;
    height: 0vw;
    position: relative;
  }

  .footer-line {
    display: flex;
    flex-direction: row;
    gap: 20.9375vw;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .footer-label-derechos {
    color: #808584;
    text-align: left;
    font-size: 3.75vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 80%;
    text-align: center;
  }

  .footer-group2 {
    width: 95.39%;
    height: 10.04%;
    position: absolute;
    right: 2.1%;
    left: 2.5%;
    bottom: -0.01%;
    top: 89.97%;
    overflow: visible;
  }

  .footer-group-1000005553 {
    position: absolute;
    inset: 0;
  }

  .bg404 {
    background: rgb(249, 251, 237);
    background: linear-gradient(
      180deg,
      rgba(249, 251, 237, 1) 0%,
      rgba(232, 245, 251, 1) 100%
    );
    height: 100vh;
    font-size: 5vw;
    line-height: 1.5;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 105vw;
    row-gap: 5vw;
  }

  .bg404 p {
    width: 80%;
  }

  .img404 {
    width: 90%;
  }

  .agradecimiento {
    background: linear-gradient(
      180deg,
      rgba(254, 246, 229, 1) 0%,
      rgba(254, 246, 229, 0) 100%
    );
    flex-shrink: 0;
  }

  .bgConstruccion {
    background: rgb(232, 245, 251);
    background: linear-gradient(
      90deg,
      rgba(232, 245, 251, 1) 0%,
      rgba(232, 245, 251, 1) 100%
    );
    font-size: 4.3vw;
    line-height: 1.5;
    font-weight: 700;
    row-gap: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 130.75vw;
  }

  .bgConstruccion p {
    width: 70%;
    margin-bottom: 4vw;
  }

  .button-regresar-inicio {
    background: linear-gradient(101deg, #638638 0%, #c6d54f 69%);
    border-radius: 22.5vw;
    border: 1px solid #d4e07b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45vw;
    height: 7.8vw;
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 1.5vw;
    cursor: pointer;
  }

  .icon-button-regresar-inicio {
    width: 5vw;
    transform: rotate(180deg);
  }

  .contact-text {
    text-align: center;
    color: white;
    font-size: 3.4vw;
    font-weight: 500;
    line-height: 2vw;
  }
}

/* Estilos específicos para dispositivos de escritorio --------------------------------------------------------------------------*/
@media (min-width: 1024px) {
  /********* Menu Header *********/

  .header-container {
    width: 100%;
    height: 6.813vw;
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7vw;
    position: relative;
    left: 2.8vw;
  }

  .nav-item {
    cursor: pointer;
  }

  .nav-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4vw;
    position: relative;
    width: 37vw;
    right: 1vw;
  }

  .nav-item,
  .contact-text {
    font-size: 1vw;
    font-weight: 500;
  }

  .nav-container-idiomas {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.3vw;
    position: relative;
  }

  .nav-item-idioma {
    color: #808584;
    font-size: 1vw;
    font-weight: 500;
    line-height: 140%;
  }

  .nav-item-idioma-division {
    color: #c6d54f;
    font-size: 1vw;
    font-weight: 500;
    line-height: 140%;
  }

  .button-contacto-menu-header {
    background: linear-gradient(101deg, #638638 0%, #c6d54f 69%);
    border-radius: 22.5vw;
    border: 1px solid #d4e07b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7.5vw;
    height: 2.5vw;
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 2vw;
    cursor: pointer;
  }

  .button-contacto-menu-header:hover {
    background: #f4f7dc;
    border: 1px solid #d4e07b;
  }

  .contact-text {
    text-align: center;
    color: white;
    font-size: 1vw;
    font-weight: 500;
    line-height: 2vw;
    transition: color 0.3s ease;
  }

  .button-contacto-menu-header:hover .contact-text {
    color: #9cb445;
  }

  .mobile-nav {
    display: none;
    flex-direction: column;
    align-items: center;
    background: white;
    position: absolute;
    top: 10vw;
    left: 0;
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .mobile-nav .nav-item {
    width: 100%;
    text-align: center;
    padding: 1em 0;
    border-bottom: 1px solid #e0e0e0;
  }

  .mobile-nav .nav-item:last-child {
    border-bottom: none;
  }

  .logo-container {
    display: flex;
    align-items: center;
  }

  #logo_wundertec {
    width: 18vw;
    position: relative;
  }

  /* ***** footer ***** */

  .footer-container,
  .footer-container * {
    box-sizing: border-box;
  }

  .footer-container {
    background: #101011;
    flex-shrink: 0;
    height: 27vw;
    position: relative;
    overflow: hidden;
  }

  .footer-container-movil {
    display: none;
  }

  .footer-divider {
    margin-top: -0.052083333vw;
    border-width: 0.052083333vw 0 0 0;
    border-style: solid;
    border-image: linear-gradient(
      -89deg,
      rgba(198, 213, 79, 0) 0%,
      rgba(198, 213, 79, 0.46) 11.500000208616257%,
      rgba(198, 213, 79, 1) 51.99999809265137%,
      rgba(198, 213, 79, 0.43) 88.99999856948853%,
      rgba(198, 213, 79, 0) 100%
    );
    border-image-slice: 1;
    width: 80vw;
    height: 0vw;
    position: absolute;
    left: 6.25vw;
    top: 22.13541665vw;
  }

  .footer-line {
    display: flex;
    flex-direction: row;
    gap: 20.9375vw;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    left: calc(50% - 9.6875vw);
    top: 22.96875vw;
  }

  .footer-label-derechos {
    color: #808584;
    text-align: left;
    font-size: 0.78125vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.833333328vw;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 59vw;
    top: 4.21875vw;
  }

  .footer-item {
    display: flex;
    flex-direction: column;
    gap: 0.833333328vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
  }

  .footer-label-menu {
    color: #ffffff;
    text-align: left;
    font-size: 0.78125vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    cursor: pointer;
  }

  .footer-label-aviso {
    color: #ffffff;
    text-align: left;
    font-size: 0.78125vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 11.0416666vw;
    cursor: pointer;
  }

  .footer-content-eu {
    display: flex;
    flex-direction: column;
    gap: 3.22916655vw;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 26vw;
    top: 4.16666665vw;
  }

  .footer-item2 {
    display: flex;
    flex-direction: column;
    gap: 1.40625vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 8.125vw;
    position: relative;
  }

  .footer-label-pais {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.9375vw;
    line-height: 140%;
    font-weight: 700;
    position: relative;
  }

  .footer-label-direccion-eu {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.833333328vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
    width: 8.125vw;
  }

  .footer-label-telefono {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.833333328vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
    width: 9.6875vw;
  }

  .phone-link {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.833333328vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
    width: 9.6875vw;
    text-decoration: none;

    /* Asegura que el color y el estilo se apliquen en móviles */
    -webkit-text-fill-color: #f2f3f3;
    /* Para Safari y Chrome */
    -webkit-user-select: none;
    /* Evita la selección automática del número en iOS */
    appearance: none;
    /* Elimina los estilos predeterminados en iOS */
  }

  .phone-link:link,
  .phone-link:visited,
  .phone-link:focus,
  .phone-link:hover,
  .phone-link:active {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.833333328vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
    width: 9.6875vw;
    text-decoration: none;

    /* Asegura que el color y el estilo se apliquen en todos los estados */
    -webkit-text-fill-color: #f2f3f3;
    /* Para Safari y Chrome */
    -webkit-user-select: none;
    /* Evita la selección automática en iOS */
    appearance: none;
    /* Elimina los estilos predeterminados en iOS */
    outline: none;
    /* Elimina el borde */
  }

  .footer-content-canada {
    display: flex;
    flex-direction: column;
    gap: 3.22916665vw;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 26vw;
    top: 16.04166665vw;
  }

  .footer-item3 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 10.15625vw;
    position: relative;
  }

  .footer-label-direccion-canada {
    margin: -0.15625vw 0 0 0;
    color: #c2a7cc;
    text-align: left;
    font-size: 0.78125vw;
    line-height: 140%;
    font-weight: 400;
    position: relative;
    width: 9.6875vw;
  }

  .footer-content-mexico {
    display: flex;
    flex-direction: column;
    gap: 3.22916665vw;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    left: 42vw;
    top: 4.16666665vw;
  }

  .footer-item4 {
    display: flex;
    flex-direction: column;
    gap: 1.40625vw;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    width: 10.15625vw;
    position: relative;
  }

  .footer-label-direccion-mexico {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.833333328vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
    width: 10.78125vw;
  }

  .footer-label-correo {
    color: #f2f3f3;
    text-align: left;
    font-size: 0.820676866vw;
    line-height: 140%;
    font-weight: 400;
    position: absolute;
    left: 10vw;
    top: 13.48958335vw;
  }

  .footer-contratacion {
    color: white;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 10vw;
    top: 16vw;
  }

  .footer-contratacion a {
    text-decoration: none;
  }

  .footer-contratacion a span {
    position: relative;
    top: initial;
    left: initial;
  }

  .footer-contratacion span.principal {
    font-weight: 600;
    /* font-size: var(--space-16px); */
    font-size: 0.8vw;
    line-height: 140%;
    letter-spacing: 0%;
    text-align: start;
    color: rgba(212, 224, 123, 1);
  }

  .footer-label-potencia-bandeja {
    color: #d4e07b;
    text-align: left;
    position: absolute;
    left: 59vw;
    top: 16.04166665vw;
    width: 12.6041666vw;
  }

  .footer-label-potencia-bandeja-span {
    color: #d4e07b;
    font-size: 0.833333328vw;
    line-height: 140%;
    font-weight: 600;
  }

  .footer-label-potencia-bandeja-span2 {
    color: #d4e07b;
    font-size: 0.78125vw;
    line-height: 140%;
    font-weight: 400;
  }

  .footer-logo {
    display: flex;
    flex-direction: column;
    gap: 1.591145834vw;
    align-items: flex-start;
    justify-content: flex-start;
    position: absolute;
    left: 10vw;
    top: 4.16666665vw;
    overflow: hidden;
  }

  .footer-logo-container {
    flex-shrink: 0;
    width: 6.359375vw;
    height: 5.57291665vw;
    position: static;
  }

  .footer-modo-de-aislamiento {
    width: 6.359375vw;
    height: 5.57291665vw;
    position: absolute;
    left: 0vw;
    top: 0vw;
    overflow: hidden;
  }

  .footer-logo-img {
    width: 6.359375vw;
    height: 5.57291665vw;
    height: auto;
    position: absolute;
    left: 0vw;
    top: 0vw;
    overflow: visible;
  }

  .footer-group2 {
    width: 95.39%;
    height: 10.04%;
    position: absolute;
    right: 2.1%;
    left: 2.5%;
    bottom: -0.01%;
    top: 89.97%;
    overflow: visible;
  }

  .footer-social-icon {
    display: flex;
    flex-direction: row;
    gap: 0.88541665vw;
    align-items: center;
    justify-content: flex-start;
    width: 6.25vw;
    height: 1.35416665vw;
    position: absolute;
    left: 10.1vw;
    top: 11.5625vw;
  }

  .footer-social-linkedin {
    flex-shrink: 0;
    width: 1.433854166vw;
    height: 1.433854166vw;
    position: relative;
    overflow: visible;
  }

  .footer-social-clutch {
    flex-shrink: 0;
    width: 3.5vw;
    height: 1.5vw;
    position: relative;
    overflow: visible;
    top: 0.05vw;
  }

  .footer-group-1000005553 {
    position: absolute;
    inset: 0;
  }

  .clutch-widget {
    width: 10vw;
    position: absolute;
    transform: scale(0.8);
    left: 77%;
    top: 15%;
  }

  .aws-partner {
    width: 5vw;
    height: 5vw;
    position: absolute;
    top: 33%;
    left: 79%;
  }

  .footer-button {
    background: #ffffff;
    border-radius: 360px;
    padding: 0.208333328vw 0.833333328vw 0.208333328vw 0.72916665vw;
    display: flex;
    flex-direction: row;
    gap: 0.208333328vw;
    align-items: center;
    justify-content: center;
    width: 7.3958333vw;
    height: 1.875vw;
    position: absolute;
    left: 77vw;
    top: 16.1458333vw;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .footer-button:hover {
    background: #c6d54f;
  }

  .footer-button-content {
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .footer-button-label {
    padding: 0vw 0.208333328vw 0vw 0.208333328vw;
    display: flex;
    flex-direction: row;
    gap: 0vw;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .footer-button-label-suscribirse {
    color: #101011;
    text-align: left;
    font-size: 0.9375vw;
    line-height: 140%;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
  }

  .footer-button:hover .footer-button-label-suscribirse {
    color: white;
  }

  /********** Construcción ************/
  .bgConstruccion {
    background: rgb(232, 245, 251);
    background: linear-gradient(
      90deg,
      rgba(232, 245, 251, 1) 0%,
      rgba(232, 245, 251, 1) 100%
    );
    height: 50vw;
    font-size: 1.5vw;
    line-height: 1.5;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .button-regresar-inicio {
    background: linear-gradient(101deg, #638638 0%, #c6d54f 69%);
    border-radius: 22.5vw;
    border: 1px solid #d4e07b;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 14vw;
    height: 2.8vw;
    transition: background 0.3s ease, transform 0.3s ease;
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 0.5vw;
    cursor: pointer;
  }

  .icon-button-regresar-inicio {
    transform: rotate(180deg);
  }

  .contact-text {
    color: white;
    font-size: 1vw;
    font-weight: 500;
    line-height: 2vw;
    transition: color 0.3s ease;
  }

  /******** Agredecimiento *********/
  .bgAgradecimiento {
    background: rgb(245, 247, 223);
    background: linear-gradient(170deg, #fef6e5 0%, #fef6e5 100%);
    height: 100vh;
    margin: 0 auto;
    position: relative;
  }

  .title-agradecimiento {
    font-size: 3vw;
    font-weight: 600;
    line-height: 7vw;
    color: #101011;
  }

  .title-agradecimiento span {
    height: 6.5vw;
    /* display: flex; */
    align-items: center;
  }

  .title-agradecimiento .highlight {
    color: #f6a500;
  }

  /********404**********/
  .bg404 {
    background: rgb(249, 251, 237);
    background: linear-gradient(
      180deg,
      rgba(249, 251, 237, 1) 0%,
      rgba(232, 245, 251, 1) 100%
    );
    height: 100vh;
    font-size: 1.5vw;
    line-height: 1.5;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .img404 {
    width: 50vw;
    margin-bottom: 3vh;
  }

  .botonRegresar {
    width: 15vw;
    margin-top: 3vh;
  }
}

html {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  overflow-x: hidden;
  /* overflow-x: scroll;  Para usar zoom*/
  scroll-behavior: smooth;
  line-height: 1.2;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  overflow: hidden;
  scroll-behavior: smooth;
  line-height: 1.2;
  /* transform: scale(1); */
  transform-origin: top left;
}

content {
  overflow: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header + *:not([style*="display: none"]):not([style*="display:none"]) {
  /* Styles for the next sibling element after header */
  margin-top: var(--header-height);
}

/* this is only visible to desktop */
#soluciones-tab-content-desktop {
  padding-bottom: 1vw;
}

#servicios-tab-content-desktop > a > div.flex.justify-center.items-center {
  gap: 0.5vw !important;
}
#servicios-tab-content-desktop > a > div:nth-child(2) {
  gap: 0.56vw !important;
  /* background-color: red; */
}

#soluciones-tab-content-desktop
  > a:nth-child(2)
  > div:nth-child(2)
  > p:nth-child(2) {
  width: 16vw;
}

#soluciones-tab-content-mobile
  /* > a:nth-child(2) */
  > a
  > div.flex.justify-center.items-center
  > p {
  /* background-color: red; */
}

#soluciones-tab-content-desktop > a > div.flex.justify-center.items-center {
  gap: 0.5vw !important;
}
#soluciones-tab-content-desktop > a > div:nth-child(2) {
  gap: 0.56vw !important;
  /* background-color: red; */
}

/* #servicios-tab-content-mobile > a > div.flex.justify-center.items-center {
  gap: 0.5vw !important;
}
#soluciones-tab-content-mobile > a > div.flex.justify-center.items-center {
  gap: 0.5vw !important;
} */

#servicios-tab-content-mobile > a > div:nth-child(2) > p,
#servicios-tab-content-mobile > a > div.flex.justify-center.items-center > p {
  font-size: 3vw !important;
}

#servicios-tab-content-mobile > a > div:nth-child(2) > p {
  padding-left: 6vw;
}

#servicios-tab-content-mobile > a > div.flex.justify-center.items-center > img {
  width: 5vw !important;
  height: 5vw !important;
}

#soluciones-tab-content-mobile
  /* > a:nth-child(1) */
  > a
  > div.flex.justify-center.items-center
  > img {
  width: 5vw !important;
  height: 5vw !important;
}

#soluciones-tab-content-mobile
  /* > a:nth-child(1) */
  > a
  > div.flex.justify-center.items-center
  > p {
  font-size: 3vw !important;
}

#soluciones-tab-content-mobile > a > div:nth-child(2) > p {
  padding-left: 6.5vw;
  font-size: 3vw !important;
}

#soluciones-tab-content-mobile
  > a:nth-child(2)
  > div:nth-child(2)
  > p:nth-child(2) {
  width: 48vw;
}

.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.flex-col {
  flex-direction: column;
}
.flex-row {
  flex-direction: row;
}
.flex-wrap {
  flex-wrap: wrap;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}

.showMenu {
  display: flex !important;
}

.hideMenu {
  display: none;
}

.submenu-nav-container-mobile {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 75%;
}

.fade-in {
  animation: fadeInOut 0.25s ease-in-out;
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.25;
  }
  50% {
    opacity: 0.5;
  }
  75% {
    opacity: 0.75;
  }
  100% {
    opacity: 1;
  }
}

.submenu-nav-container {
  z-index: 3;
  min-width: 300px;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background-color: white;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  transform: translate(-5%, 20px);
  left: 0;
  width: auto;
  min-width: 300px;
  height: auto;
}

.submenu-tab-selector-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 20px 35px;
  box-sizing: border-box;
}

.submenu-tab-selector.active {
  background-color: rgba(244, 247, 220, 1);
  color: rgba(87, 89, 87, 1);
  border: 1.5px solid rgba(212, 224, 123, 1);
  padding: 6px 8px;
  border-radius: 12px;
  color: rgba(87, 89, 87, 1);
  font-weight: 400;
  font-size: 12px;
  &:hover {
    border: 1.5px solid rgba(198, 213, 79, 1);
  }
  &:active {
    background-color: rgba(198, 213, 79, 1);
    color: white;
  }
}

.submenu-tab-selector {
  padding: 6px 8px;
  border-radius: 12px;
  color: rgba(87, 89, 87, 1);
  font-weight: 400;
  font-size: 12px;
  &:hover {
    background-color: rgba(244, 247, 220, 1);
    cursor: pointer;
  }
  &:active {
    background-color: rgba(198, 213, 79, 1);
    color: white;
  }
  transition: background-color 0.3s ease;
}

.hr-submenu {
  width: 95%;
  height: 1px;
  background-color: rgba(198, 213, 79, 1);
}

.submenu-nav-item {
  width: 100%;
  padding: 15px 20px;
  box-sizing: border-box;
  font-weight: 400;
  font-size: 14px;
  color: rgba(87, 89, 87, 1);
  cursor: pointer;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: rgba(244, 247, 220, 1);
  }
  &:active {
    background-color: rgba(198, 213, 79, 1);
    color: white;
  }
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.nav-item-active {
  padding: 4px 0;
  border-bottom: 2px solid #c6d54f;
}

.submenu-goto-button-mobile {
  font-size: 3vw;
  text-decoration: none;
  padding: 9px 16px;
  border: 1.6px solid #c6d54f;
  color: #575957;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: rgba(198, 213, 79, 1);
    color: white;
  }
}

.submenu-goto-button-desktop {
  font-size: 1vw;
  text-decoration: none;
  padding: 9px 16px;
  border: 1.6px solid #c6d54f;
  color: #575957;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  &:hover {
    background-color: rgba(198, 213, 79, 1);
    color: white;
  }
}