/* VS V40 — corrección menú / responsive
   Objetivo: eliminar la línea verde visible cuando el menú está cerrado
   y evitar que el panel del menú invada o corte la pantalla en responsive. */

html,
body,
#page-wrapper {
  overflow-x: hidden !important;
}

/* El menú debe quedar 100% fuera de pantalla cuando está cerrado.
   Antes se desplazaba 20em, pero el ancho final podía ser mayor y dejaba visible
   el borde verde como una línea vertical hasta el final de la web. */
#menu {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  width: min(20rem, 82vw) !important;
  max-width: 82vw !important;
  padding: 4.9rem 1.85rem 2rem !important;
  background: rgba(10,10,10,.98) !important;
  border-left: 2px solid rgba(0,207,104,.82) !important;
  box-shadow: -1.25rem 0 3rem rgba(0,0,0,.38) !important;
  transform: translateX(calc(100% + 8px)) !important;
  transition: transform .45s cubic-bezier(.22,1,.36,1) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  z-index: 10002 !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
}

body.is-menu-visible #menu {
  transform: translateX(0) !important;
}

body.is-menu-visible #page-wrapper {
  opacity: 1 !important;
}

body.is-menu-visible #page-wrapper:before {
  display: block !important;
  background: rgba(0,0,0,.48) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  z-index: 10001 !important;
}

#menu .close {
  top: .85rem !important;
  right: .75rem !important;
  width: 3rem !important;
  height: 3rem !important;
  background-position: center !important;
  background-size: 1.15rem 1.15rem !important;
  opacity: .86 !important;
}

#menu ul {
  margin: 0 !important;
  padding: 0 !important;
}

#menu ul > li {
  margin: .45rem 0 0 !important;
  padding: .45rem 0 0 !important;
}

#menu ul > li > a {
  display: block !important;
  padding: .72rem 0 !important;
  line-height: 1.45 !important;
  letter-spacing: .09em !important;
}

/* Header: el botón menú no debe comerse el ancho ni empujar el logo. */
#header nav {
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
}

#header nav > ul,
#header nav > ul > li {
  margin: 0 !important;
  padding: 0 !important;
}

#header nav > ul > li > a.menuToggle {
  width: auto !important;
  min-width: 5.7rem !important;
  max-width: 8.4rem !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  overflow: hidden !important;
}

#header h1 {
  max-width: calc(100vw - 9rem) !important;
}

#header .site-logo {
  max-width: min(238px, calc(100vw - 9.4rem)) !important;
}

@media screen and (max-width: 980px) {
  #menu {
    width: min(19rem, 84vw) !important;
    max-width: 84vw !important;
    padding: 4.55rem 1.55rem 1.8rem !important;
  }
  #header nav > ul > li > a.menuToggle {
    min-width: 5.1rem !important;
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }
  #header h1 {
    left: .95rem !important;
    max-width: calc(100vw - 7.4rem) !important;
  }
  #header .site-logo {
    max-width: min(210px, calc(100vw - 7.6rem)) !important;
  }
}

@media screen and (max-width: 736px) {
  #menu {
    width: min(18rem, 84vw) !important;
    max-width: 84vw !important;
    padding: 4.35rem 1.3rem 1.65rem !important;
    border-left-width: 1px !important;
  }
  #menu ul > li > a {
    padding: .62rem 0 !important;
    font-size: .78rem !important;
    letter-spacing: .08em !important;
  }
  #header nav > ul > li > a.menuToggle {
    min-width: 3.65rem !important;
    max-width: 3.65rem !important;
    padding-left: .72rem !important;
    padding-right: .72rem !important;
    gap: 0 !important;
  }
  #header nav > ul > li > a.menuToggle span {
    display: none !important;
  }
  #header nav > ul > li > a.menuToggle:after {
    margin: 0 !important;
  }
  #header h1 {
    max-width: calc(100vw - 4.9rem) !important;
  }
  #header .site-logo {
    max-width: min(185px, calc(100vw - 5.25rem)) !important;
    height: 32px !important;
    max-height: 32px !important;
  }
}

@media screen and (max-width: 420px) {
  #menu {
    width: 86vw !important;
    max-width: 86vw !important;
  }
  #header .site-logo {
    max-width: min(165px, calc(100vw - 5rem)) !important;
  }
}


/* VS V42 — ajustes finales solicitados
   - El preloader aparece solo en el home.
   - Las palabras del preloader nunca se parten en dos líneas.
   - El preloader con barra no muestra isotipo.
   - El CTA final de Servicios mantiene “¿Tienes una idea en mente?” en una sola línea en responsive.
*/

/* Preloader: palabras siempre completas en una sola línea */
#vs-preloader .vs-preloader-words span,
#vs-preloader.is-first-visit .vs-preloader-words span,
#vs-preloader.is-returning .vs-preloader-words span {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  line-height: 1 !important;
  width: max-content !important;
  max-width: none !important;
  text-align: center !important;
}

/* Preloader con barra: sin isotipo inicial, solo palabras + barra + logotipo final */
#vs-preloader.is-first-visit .vs-preloader-mark,
#vs-preloader.is-returning .vs-preloader-mark {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Al quitar el isotipo, damos aire para que barra y palabras respiren mejor */
#vs-preloader.is-first-visit .vs-preloader-progress {
  margin-top: clamp(6.5rem, 14vh, 9rem) !important;
}
#vs-preloader.is-first-visit .vs-preloader-caption {
  margin-top: 1.05rem !important;
}

/* Primer preloader: tamaño controlado para evitar saltos de línea en desktop/tablet/móvil */
#vs-preloader.is-first-visit .vs-preloader-words span {
  letter-spacing: clamp(.055em, .65vw, .20em) !important;
  font-size: clamp(1.05rem, 5.2vw, 4.7rem) !important;
}

/* Preloader recurrente: palabras secuenciales, legibles y sin superposición */
#vs-preloader.is-returning .vs-preloader-words span {
  letter-spacing: clamp(.045em, .55vw, .18em) !important;
  font-size: clamp(1.02rem, 4.6vw, 3.35rem) !important;
}

/* Responsive fino para pantallas pequeñas */
@media screen and (max-width: 736px) {
  #vs-preloader .vs-preloader-stage {
    width: calc(100vw - 1.5rem) !important;
    height: 64svh !important;
  }
  #vs-preloader.is-first-visit .vs-preloader-words span,
  #vs-preloader.is-returning .vs-preloader-words span {
    letter-spacing: .055em !important;
    font-size: clamp(.98rem, 5.75vw, 2.15rem) !important;
  }
  #vs-preloader.is-first-visit .vs-preloader-progress {
    width: min(70vw, 22rem) !important;
    margin-top: clamp(5.8rem, 13vh, 7.6rem) !important;
  }
}

@media screen and (max-width: 380px) {
  #vs-preloader.is-first-visit .vs-preloader-words span,
  #vs-preloader.is-returning .vs-preloader-words span {
    letter-spacing: .035em !important;
    font-size: clamp(.92rem, 5.35vw, 1.82rem) !important;
  }
}

/* Servicios: CTA final responsive en una sola línea */
@media screen and (max-width: 736px) {
  .vs-contact-compact h2 {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    font-size: clamp(1.02rem, 5.05vw, 1.35rem) !important;
    letter-spacing: .045em !important;
    line-height: 1.18 !important;
    margin-bottom: .8rem !important;
  }
  .vs-contact-compact header {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media screen and (max-width: 380px) {
  .vs-contact-compact h2 {
    font-size: clamp(.94rem, 4.85vw, 1.14rem) !important;
    letter-spacing: .028em !important;
  }
}