/* VS V39 — responsive final, estabilidad visual y prevención de descuadres
   Base: v38 SEO titles. Esta capa solo corrige comportamiento responsive. */

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body { width: 100%; min-width: 0; overflow-x: hidden; }
#page-wrapper { width: 100%; max-width: 100%; overflow-x: clip; }
img, video, iframe, svg { max-width: 100%; }
img { height: auto; }

:root {
  --vs-header-h: 4.25rem;
  --vs-header-h-mobile: 3.65rem;
  --vs-page-pad-x: clamp(1rem, 4vw, 3rem);
  --vs-content-max: 1180px;
}

/* Contenedores: todos respetan el ancho del viewport */
.inner,
.wrapper > .inner,
.vs-services-editorial .inner,
.vs-services-editorial-v28 .inner,
.vs-about-compact .inner,
.vs-allies-section .inner,
.vs-contact-compact .inner,
.vs-clients-compact .inner,
.vs-gallery-page .inner,
.vs-subpage-intro .inner {
  width: min(var(--vs-content-max), calc(100% - (var(--vs-page-pad-x) * 2))) !important;
  max-width: var(--vs-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Header: logo dentro de la franja, menú sin invadir ni cortar */
#header,
#header.alt {
  min-height: var(--vs-header-h) !important;
  height: var(--vs-header-h) !important;
  line-height: var(--vs-header-h) !important;
  padding: 0 !important;
}
#header h1,
#header.alt h1 {
  height: var(--vs-header-h) !important;
  line-height: var(--vs-header-h) !important;
  display: flex !important;
  align-items: center !important;
  left: clamp(.9rem, 2.4vw, 1.65rem) !important;
  max-width: calc(100vw - 8.8rem) !important;
  overflow: visible !important;
}
#header .site-logo-link {
  height: var(--vs-header-h) !important;
  min-height: var(--vs-header-h) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  max-width: 100% !important;
  overflow: visible !important;
}
#header .site-logo {
  width: auto !important;
  height: clamp(34px, 3.4vw, 46px) !important;
  max-height: 46px !important;
  max-width: min(245px, calc(100vw - 9.2rem)) !important;
  object-fit: contain !important;
}
#header nav {
  height: var(--vs-header-h) !important;
  line-height: var(--vs-header-h) !important;
  right: 0 !important;
}
#header nav > ul > li > a.menuToggle {
  height: var(--vs-header-h) !important;
  min-width: 5.9rem !important;
  padding: 0 1.2rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .62rem !important;
  white-space: nowrap !important;
}
#menu {
  max-width: min(22rem, 88vw) !important;
  width: min(22rem, 88vw) !important;
}

/* Flechas flotantes: no pisan el menú ni el contenido */
.vs-floating-nav {
  position: fixed !important;
  right: clamp(.75rem, 2vw, 1.35rem) !important;
  bottom: clamp(.85rem, 2vw, 1.4rem) !important;
  top: auto !important;
  transform: none !important;
  z-index: 900 !important;
  display: grid !important;
  gap: .55rem !important;
}
.vs-float-btn {
  width: clamp(2.55rem, 4.8vw, 3.2rem) !important;
  height: clamp(2.55rem, 4.8vw, 3.2rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Home */
.vs-hero {
  min-height: 100svh !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  padding: calc(var(--vs-header-h) + 1rem) var(--vs-page-pad-x) 4.8rem !important;
}
.vs-hero .inner,
.vs-hero .hero-copy {
  width: min(1180px, 100%) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
}
.vs-hero .hero-title {
  font-size: clamp(2.35rem, 7.2vw, 6.25rem) !important;
  line-height: .98 !important;
  max-width: 11.2em !important;
  overflow-wrap: anywhere;
}
.vs-hero p {
  max-width: 38rem !important;
  font-size: clamp(.96rem, 1.55vw, 1.14rem) !important;
  line-height: 1.65 !important;
}
.vs-home-split {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: stretch !important;
}
.vs-home-split-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 30rem !important;
  object-fit: cover !important;
  display: block !important;
}
.vs-home-split-copy {
  min-width: 0 !important;
  padding: clamp(2.2rem, 5vw, 5rem) !important;
}
.vs-home-split-copy h2 {
  font-size: clamp(1.9rem, 3.6vw, 3.4rem) !important;
  line-height: 1.08 !important;
  overflow-wrap: balance;
}
.vs-allies-section,
.vs-contact-compact {
  overflow: hidden !important;
}
.vs-logo-marquee {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.vs-logo-track {
  max-width: none !important;
  will-change: transform;
}
.vs-logo-track span,
.vs-logo-track .vs-logo-item {
  min-width: clamp(112px, 18vw, 160px) !important;
}

/* Servicios: cards editoriales estables */
.vs-services-editorial,
.vs-services-editorial-v28 {
  padding-top: clamp(4.25rem, 7vw, 5.35rem) !important;
  padding-bottom: clamp(3rem, 6vw, 4.5rem) !important;
}
.vs-service-section-head,
.vs-service-section-head-v28 {
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: clamp(1.1rem, 2vw, 1.6rem) !important;
  text-align: center !important;
}
.vs-service-section-head p,
.vs-service-section-head-v28 p {
  font-size: clamp(.94rem, 1.4vw, 1.02rem) !important;
  line-height: 1.65 !important;
}
.vs-service-editorial-list {
  display: grid !important;
  gap: clamp(1rem, 2vw, 1.25rem) !important;
  margin-top: clamp(1rem, 2.2vw, 1.55rem) !important;
}
.vs-service-editorial-card,
.vs-service-editorial-card:nth-child(even) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
  align-items: stretch !important;
  min-height: 0 !important;
}
.vs-service-editorial-card:nth-child(even) {
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1fr) !important;
}
.vs-service-editorial-card:nth-child(even) .vs-service-copy { grid-column: 2 !important; grid-row: 1 !important; }
.vs-service-editorial-card:nth-child(even) figure { grid-column: 1 !important; grid-row: 1 !important; }
.vs-service-copy {
  min-width: 0 !important;
  padding: clamp(1.3rem, 3vw, 2.35rem) !important;
}
.vs-service-copy h3 {
  font-size: clamp(1.22rem, 2vw, 1.78rem) !important;
  line-height: 1.16 !important;
  overflow-wrap: balance;
}
.vs-service-copy p,
.vs-service-focus,
.vs-service-bullets li {
  overflow-wrap: anywhere;
}
.vs-service-editorial-card figure {
  min-width: 0 !important;
  min-height: 100% !important;
  aspect-ratio: auto !important;
}
.vs-service-editorial-card figure img {
  width: 100% !important;
  height: 100% !important;
  min-height: 21rem !important;
  max-height: none !important;
  object-fit: cover !important;
  display: block !important;
}

/* Nosotros */
.vs-about-compact {
  padding-top: clamp(5.2rem, 8vw, 6.4rem) !important;
  padding-bottom: clamp(2rem, 5vw, 3.2rem) !important;
}
.vs-about-compact .inner {
  display: grid !important;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
  gap: clamp(1.4rem, 4vw, 2.6rem) !important;
  align-items: center !important;
}
.vs-about-mini-copy,
.vs-about-mini-grid { min-width: 0 !important; }
.vs-about-mini-copy h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.9rem) !important;
  line-height: 1.12 !important;
  overflow-wrap: balance;
}
.vs-about-mini-copy p {
  max-width: 36rem !important;
}
.vs-process,
.vs-process-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .55rem !important;
  max-width: 100% !important;
}
.vs-process-inline span,
.vs-process span {
  white-space: nowrap !important;
  flex: 0 1 auto !important;
}
.vs-about-mini-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) !important;
  gap: .75rem !important;
}
.vs-about-mini-grid img {
  width: 100% !important;
  height: clamp(10rem, 16vw, 13rem) !important;
  object-fit: cover !important;
}
.vs-about-mini-grid img:first-child {
  grid-row: span 2 !important;
  height: clamp(21rem, 34vw, 26rem) !important;
}

/* Contacto y CTA */
.vs-contact-compact .inner,
.vs-contact-page .inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 2rem !important;
}
.vs-contact-compact header,
.vs-contact-page header { min-width: 0 !important; }
.vs-contact-compact h2,
.vs-contact-page h2 {
  font-size: clamp(1.55rem, 3vw, 2.25rem) !important;
  line-height: 1.15 !important;
}
.vs-contact-compact .actions,
.vs-contact-page .actions {
  min-width: min(20rem, 100%) !important;
}

/* Preloader responsive */
.vs-preloader-stage {
  width: min(820px, calc(100vw - 2rem)) !important;
  height: min(470px, 70svh) !important;
}
.vs-preloader-progress { width: min(540px, 74vw) !important; }
.vs-preloader-words span { max-width: 92vw !important; text-align: center !important; overflow-wrap: anywhere; }
.vs-preloader-final-logo { width: min(520px, 76vw) !important; }

/* Tablets */
@media screen and (max-width: 980px) {
  :root { --vs-page-pad-x: clamp(1rem, 3vw, 2rem); }
  .wrapper { padding-left: 0 !important; padding-right: 0 !important; }
  .vs-home-split,
  .vs-about-compact .inner {
    grid-template-columns: 1fr !important;
  }
  .vs-home-split-image img { min-height: 24rem !important; }
  .vs-home-split-copy { padding: 3rem var(--vs-page-pad-x) !important; }
  .vs-about-mini-copy { text-align: left !important; }
  .vs-about-mini-grid { max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; }
  .vs-service-editorial-card,
  .vs-service-editorial-card:nth-child(even) {
    grid-template-columns: 1fr !important;
  }
  .vs-service-editorial-card:nth-child(even) .vs-service-copy,
  .vs-service-editorial-card:nth-child(even) figure,
  .vs-service-copy,
  .vs-service-editorial-card figure {
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .vs-service-editorial-card figure { order: -1 !important; }
  .vs-service-editorial-card figure img {
    min-height: 18rem !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
  .vs-contact-compact .inner,
  .vs-contact-page .inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }
  .vs-contact-compact .actions,
  .vs-contact-page .actions { width: min(24rem, 100%) !important; }
}

/* Móviles */
@media screen and (max-width: 736px) {
  :root { --vs-page-pad-x: 1rem; }
  #header,
  #header.alt {
    min-height: var(--vs-header-h-mobile) !important;
    height: var(--vs-header-h-mobile) !important;
    line-height: var(--vs-header-h-mobile) !important;
  }
  #header h1,
  #header.alt h1 {
    height: var(--vs-header-h-mobile) !important;
    line-height: var(--vs-header-h-mobile) !important;
    left: .85rem !important;
    max-width: calc(100vw - 6.7rem) !important;
  }
  #header .site-logo-link {
    height: var(--vs-header-h-mobile) !important;
    min-height: var(--vs-header-h-mobile) !important;
  }
  #header .site-logo {
    height: 31px !important;
    max-height: 31px !important;
    max-width: calc(100vw - 7.15rem) !important;
  }
  #header nav,
  #header nav > ul > li > a.menuToggle {
    height: var(--vs-header-h-mobile) !important;
    line-height: var(--vs-header-h-mobile) !important;
  }
  #header nav > ul > li > a.menuToggle {
    min-width: 4.9rem !important;
    padding: 0 .82rem !important;
    gap: .45rem !important;
    font-size: .74rem !important;
  }
  #header nav > ul > li > a.menuToggle:after {
    width: 1.55rem !important;
    height: 1.15rem !important;
  }
  #menu { width: 86vw !important; max-width: 86vw !important; }
  #menu ul > li > a { padding: .82rem 0 !important; }

  .vs-hero {
    min-height: 100svh !important;
    padding: calc(var(--vs-header-h-mobile) + 1.35rem) 1rem 4rem !important;
    align-items: center !important;
  }
  .vs-hero .hero-title {
    font-size: clamp(2.1rem, 11.5vw, 3.4rem) !important;
    line-height: 1.02 !important;
    max-width: 100% !important;
  }
  .vs-hero p { font-size: .96rem !important; max-width: 100% !important; }
  .vs-hero .actions { margin-top: 1.35rem !important; }
  .vs-hero .button { width: auto !important; max-width: 100% !important; }
  .vs-hero .more { bottom: 1.35rem !important; }

  .vs-home-split-image img { min-height: 18rem !important; }
  .vs-home-split-copy { padding: 2.25rem 1rem !important; }
  .vs-home-split-copy h2 { font-size: clamp(1.75rem, 8.5vw, 2.35rem) !important; }

  .vs-services-editorial,
  .vs-services-editorial-v28,
  .vs-about-compact,
  .vs-contact-page,
  .vs-contact-compact {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .vs-services-editorial,
  .vs-services-editorial-v28 { padding-top: 4rem !important; }
  .vs-service-section-head,
  .vs-service-section-head-v28 { text-align: left !important; margin-bottom: 1rem !important; }
  .vs-service-copy { padding: 1.2rem 1rem 1.35rem !important; }
  .vs-service-copy .vs-service-number {
    font-size: .62rem !important;
    letter-spacing: .12em !important;
    line-height: 1.3 !important;
  }
  .vs-service-copy h3 { font-size: 1.22rem !important; }
  .vs-service-copy p { font-size: .93rem !important; line-height: 1.62 !important; }
  .vs-service-focus { font-size: .84rem !important; padding: .72rem .78rem !important; }
  .vs-service-bullets { gap: .45rem !important; }
  .vs-service-bullets li { font-size: .84rem !important; }
  .vs-service-editorial-card figure img { min-height: 13.75rem !important; aspect-ratio: 16 / 10 !important; }

  .vs-about-compact { padding-top: 4.6rem !important; }
  .vs-about-mini-copy h2 { font-size: clamp(1.55rem, 8.5vw, 2.08rem) !important; }
  .vs-about-mini-copy p { font-size: .94rem !important; line-height: 1.62 !important; }
  .vs-process-inline,
  .vs-process { gap: .42rem !important; }
  .vs-process-inline span,
  .vs-process span {
    padding: .58rem .62rem !important;
    font-size: .56rem !important;
    letter-spacing: .055em !important;
    white-space: normal !important;
    text-align: center !important;
    flex: 1 1 calc(50% - .42rem) !important;
  }
  .vs-about-mini-grid { grid-template-columns: 1fr !important; gap: .7rem !important; }
  .vs-about-mini-grid img:first-child,
  .vs-about-mini-grid img { height: 13rem !important; grid-row: auto !important; }

  .vs-contact-compact .inner,
  .vs-contact-page .inner { gap: 1.2rem !important; }
  .vs-contact-compact .actions,
  .vs-contact-page .actions { width: 100% !important; }
  .vs-contact-compact .button.fit,
  .vs-contact-page .button.fit { width: 100% !important; }

  .vs-floating-nav {
    right: .75rem !important;
    bottom: .75rem !important;
    gap: .45rem !important;
  }
  .vs-float-btn {
    width: 2.55rem !important;
    height: 2.55rem !important;
    font-size: .9rem !important;
  }

  .vs-preloader-stage { width: calc(100vw - 2rem) !important; height: 64svh !important; }
  .vs-preloader-words span {
    max-width: 88vw !important;
    letter-spacing: .13em !important;
    font-size: clamp(1.25rem, 8vw, 2.6rem) !important;
  }
  .vs-preloader-progress { width: 72vw !important; }
  .vs-preloader-final-logo,
  #vs-preloader.is-returning .vs-preloader-final-logo { width: min(300px, 76vw) !important; }
}

/* Móviles muy estrechos */
@media screen and (max-width: 420px) {
  #header .site-logo { height: 28px !important; max-height: 28px !important; max-width: calc(100vw - 6.4rem) !important; }
  #header nav > ul > li > a.menuToggle span { font-size: 0 !important; }
  #header nav > ul > li > a.menuToggle { min-width: 3.55rem !important; padding: 0 .75rem !important; }
  .vs-hero .hero-title { font-size: clamp(1.95rem, 11vw, 3rem) !important; }
  .vs-kicker,
  .vs-page-label { letter-spacing: .095em !important; }
  .vs-logo-track span,
  .vs-logo-track .vs-logo-item { min-width: 110px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* VS V40 — corrección menú lateral y línea verde fantasma
   Evita que el drawer del menú quede parcialmente visible fuera de pantalla
   y elimina la línea verde vertical que aparecía al costado en desktop. */
#menu {
  left: auto !important;
  right: 0 !important;
  width: min(20rem, 84vw) !important;
  max-width: min(20rem, 84vw) !important;
  border-left: 0 !important;
  box-shadow: -1.2rem 0 3rem rgba(0, 0, 0, .42) !important;
  overflow-x: hidden !important;
  -moz-transform: translateX(100%) !important;
  -webkit-transform: translateX(100%) !important;
  -ms-transform: translateX(100%) !important;
  transform: translateX(100%) !important;
}
body.is-menu-visible #menu {
  -moz-transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
  -ms-transform: translateX(0) !important;
  transform: translateX(0) !important;
}
body:not(.is-menu-visible) #menu {
  pointer-events: none !important;
}
body.is-menu-visible #menu {
  pointer-events: auto !important;
}
#page-wrapper {
  margin-right: 0 !important;
  transform: none !important;
}

/* Header móvil: el botón de menú no debe comerse contenido ni crear desborde. */
@media screen and (max-width: 736px) {
  #header,
  #header.alt {
    min-height: var(--vs-header-h-mobile) !important;
    height: var(--vs-header-h-mobile) !important;
    line-height: var(--vs-header-h-mobile) !important;
  }
  #header h1,
  #header.alt h1 {
    height: var(--vs-header-h-mobile) !important;
    line-height: var(--vs-header-h-mobile) !important;
    max-width: calc(100vw - 4.8rem) !important;
    left: .85rem !important;
  }
  #header .site-logo-link {
    height: var(--vs-header-h-mobile) !important;
    min-height: var(--vs-header-h-mobile) !important;
  }
  #header .site-logo {
    height: 34px !important;
    max-width: calc(100vw - 5.6rem) !important;
  }
  #header nav {
    height: var(--vs-header-h-mobile) !important;
    line-height: var(--vs-header-h-mobile) !important;
    right: 0 !important;
    width: auto !important;
  }
  #header nav > ul {
    margin: 0 !important;
    padding: 0 !important;
  }
  #header nav > ul > li > a.menuToggle {
    width: 3.75rem !important;
    min-width: 3.75rem !important;
    height: var(--vs-header-h-mobile) !important;
    padding: 0 .85rem !important;
    gap: 0 !important;
  }
  #header nav > ul > li > a.menuToggle span {
    font-size: 0 !important;
    width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }
  #header nav > ul > li > a.menuToggle:after {
    margin: 0 !important;
  }
  #menu {
    width: min(18.5rem, 84vw) !important;
    max-width: min(18.5rem, 84vw) !important;
    padding: 3.5rem 1.35rem 2rem !important;
  }
}

@media screen and (max-width: 480px) {
  #header h1,
  #header.alt h1 {
    max-width: calc(100vw - 4.4rem) !important;
  }
  #header .site-logo {
    height: 30px !important;
    max-width: calc(100vw - 5rem) !important;
  }
  #header nav > ul > li > a.menuToggle {
    width: 3.35rem !important;
    min-width: 3.35rem !important;
    padding: 0 .72rem !important;
  }
  #menu {
    width: 86vw !important;
    max-width: 86vw !important;
  }
}