/* GS Support V7 · solución de compatibilidad para capítulos por scroll.
   Solo corrige activación sticky y dimensiones responsivas en móviles y tablets.
   No cambia la identidad visual, las animaciones ni la composición existente. */

/* Evita que las reglas generales de la V7 dejen escenas altas de scroll
   cuando el motor detecta que no caben; en ese caso se usan pestañas nativas. */
.scroll-track.gs-scroll-disabled {height:auto!important}
.scroll-track.gs-scroll-disabled > .scroll-pin {
  position:relative!important;top:auto!important;height:auto!important;
  max-height:none!important;
}
.scroll-track.gs-scroll-disabled.solutions-scroll-track > .solutions-pin {display:block!important}
.scroll-track.gs-scroll-disabled.ecosystem-scroll-track > .ecosystem-pin {display:block!important}
.scroll-track.gs-scroll-disabled .scroll-stage-meta,
.scroll-track.gs-scroll-disabled ~ .eco-scroll-status {display:none}

/* La V7 anterior desactivaba deliberadamente sticky entre 768 y 1100 px.
   Restauramos su recorrido sin bloquear la rueda ni los eventos táctiles. */
@media (min-width:768px) and (max-width:1100px) {
  .scroll-track.gs-scroll-candidate,.scroll-track.gs-scroll-ready {height:336svh!important}
  .scroll-track.gs-scroll-candidate > .scroll-pin,
  .scroll-track.gs-scroll-ready > .scroll-pin {
    position:sticky!important;top:var(--v4-header)!important;
    height:calc(100svh - var(--v4-header))!important;
    max-height:none!important;min-height:0;
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .solutions-pin {
    display:flex;flex-direction:column;justify-content:center;
  }
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .ecosystem-pin {
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,28px);
    align-items:center;padding-block:6px;
  }
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-stage {
    width:min(100%,min(50svh,500px));
  }
}
/* Tablets verticales: la composición original es de una columna. Reducimos
   únicamente el diagrama para que todo el bloque pueda permanecer visible. */
@media (min-width:768px) and (max-width:820px) {
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .ecosystem-pin {
    grid-template-columns:1fr;gap:3px;
  }
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-stage {
    width:min(100%,min(42svh,430px));
  }
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-intro {margin-bottom:10px}
}
/* El layout compacto de la V7 funcionaba solo desde 780 px de alto.
   Ahora también lo usamos en smartphones habituales de 620-779 px. */
@media (max-width:767px) and (min-height:620px) and (max-height:779px) and (prefers-reduced-motion:no-preference) {
  .solutions {padding-bottom:0}
  .solutions-scroll-track {height:322svh}
  .ecosystem-scroll-track {height:325svh}
  .solutions-pin,.ecosystem-pin {
    position:sticky;top:74px;height:calc(100svh - 74px);max-height:none;
    display:flex;flex-direction:column;justify-content:center;
  }
  .solutions-pin .pillars-layout {display:flex;flex-direction:column;gap:12px}
  .solutions-pin .pillars-menu {grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .solutions-pin .pillar-tab {min-height:60px}
  .solutions-pin .pillar-feature {min-height:0}
  .solutions-pin .pillar-photo {min-height:175px}
  .solutions-pin .pillar-content {min-height:0;padding:20px 18px 22px}
  .solutions-pin .pillar-content h3 {font-size:22px;margin:9px 0}
  .solutions-pin .pillar-content p {font-size:11px;line-height:1.55}
  .solutions-pin .pillar-content .feature-tags {margin-top:11px;gap:5px}
  .solutions-pin .pillar-content .feature-tags span {font-size:9px;padding:5px 7px}
  .solutions-pin .pillar-content .feature-link {margin-top:13px;font-size:10px}
  .solutions-pin .pillars-footer {margin-top:0}
  .scroll-stage-meta {display:flex;font-size:8px}
  .ecosystem {padding:0}
  .ecosystem-pin {gap:0;display:flex;align-items:center;justify-content:center;flex-direction:column}
  .ecosystem-layout {gap:2px}
  .ecosystem-copy {width:100%}
  .ecosystem .eco-kicker {font-size:9px}
  .ecosystem .display-heading {font-size:39px;line-height:1.08;margin:10px 0 12px}
  .ecosystem .eco-intro {font-size:12px;line-height:1.5;margin:0 0 8px}
  .ecosystem .eco-selector {gap:0 12px}
  .ecosystem .eco-choice {font-size:11px;padding:8px 4px;grid-template-columns:19px 1fr 12px;gap:5px}
  .ecosystem .eco-choice-index {font-size:8px}
  .ecosystem .eco-detail {min-height:63px;padding-top:10px}
  .ecosystem .eco-detail-kicker {font-size:8px}
  .ecosystem .eco-detail p {font-size:11px;line-height:1.5;margin-top:5px}
  .ecosystem .eco-stage {width:min(73vw,250px);max-width:250px;margin:auto}
  .ecosystem .eco-node {height:45px;width:50px;border-radius:11px}
  .ecosystem .eco-node .ico {height:18px;width:18px}
  .ecosystem .eco-node small {font-size:4.9px}
  .ecosystem .eco-real-isotipo {width:20px;height:38px}
  .eco-scroll-status {display:block}
}
/* Los navegadores con preferencia de movimiento reducido siguen usando
   los controles normales: nunca forzar sticky cuando se reduce movimiento. */
@media (prefers-reduced-motion:reduce) {
  .scroll-track.gs-scroll-candidate,.scroll-track.gs-scroll-ready {height:auto!important}
  .scroll-track > .scroll-pin {position:relative!important;top:auto!important;height:auto!important}
}

/* Compatible con navegadores sin soporte correcto de svh: el motor establece
   una altura en píxeles que refleja el viewport disponible. Solo afecta las
   escenas que el motor está evaluando o que ya están activadas. */
.solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) {
  height: calc(var(--gs-scroll-viewport, 100vh) * 3.42) !important;
}
.ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) {
  height: calc(var(--gs-scroll-viewport, 100vh) * 3.38) !important;
}
@media (min-width:768px) and (max-width:1100px) {
  .scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) {
    height: calc(var(--gs-scroll-viewport, 100vh) * 3.36) !important;
  }
}
@media (max-width:767px) {
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) {
    height: calc(var(--gs-scroll-viewport, 100vh) * 3.22) !important;
  }
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) {
    height: calc(var(--gs-scroll-viewport, 100vh) * 3.25) !important;
  }
}
.scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .scroll-pin {
  position: sticky !important;
  top: var(--gs-scroll-header, var(--v4-header)) !important;
  height: calc(var(--gs-scroll-viewport, 100vh) - var(--gs-scroll-header, var(--v4-header))) !important;
  max-height: none !important;
  min-height: 0;
}
/* Extendemos la recuperación también a laptops/tablets anchos pero bajos. */
@media (min-width:1101px) and (max-height:730px) {
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .solutions-pin {
    display:flex;flex-direction:column;justify-content:center;
  }
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .ecosystem-pin {
    display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,30px);align-items:center;
  }
}
/* Para navegadores donde sticky anuncia compatibilidad pero no fija el
   elemento al hacer scroll, el motor usa position:fixed solo mientras la escena
   está en su tramo activo. Al salir, lo deja exactamente al final del track. */
.scroll-track > .scroll-pin.gs-scroll-fixed {
  position:fixed!important;
  top:var(--gs-scroll-header,74px)!important;
  left:var(--gs-scroll-left,0px)!important;
  width:var(--gs-scroll-width,100%)!important;
  max-height:none!important;
  z-index:3;
}
.scroll-track > .scroll-pin.gs-scroll-at-end {
  position:absolute!important;
  top:auto!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
}
@media (prefers-reduced-motion:reduce) {
  .scroll-track > .scroll-pin.gs-scroll-fixed,
  .scroll-track > .scroll-pin.gs-scroll-at-end {
    position:relative!important;left:auto!important;top:auto!important;
    width:auto!important;height:auto!important;
  }
}

/* En teléfonos cortos, el modo de capítulos usa una composición más compacta
   SOLO si está siendo evaluado/activado; si no cabe, permanece la V7 original
   con controles táctiles manuales, sin ocultar contenido. */
@media (max-width:767px) and (max-height:619px) and (prefers-reduced-motion:no-preference) {
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .solutions-pin,
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) > .ecosystem-pin {
    display:flex;flex-direction:column;justify-content:center;gap:3px;
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillars-layout {
    display:flex;flex-direction:column;gap:6px;min-height:0;
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillars-menu {
    grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-tab {min-height:48px;padding:5px 2px!important}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-feature {min-height:0}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-photo {min-height:110px}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-content {min-height:0;padding:11px 14px}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-content h3 {font-size:18px;margin:5px 0}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-content p {font-size:10px;line-height:1.35;margin-bottom:7px}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .feature-tags {margin-top:5px;gap:3px}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .feature-tags span {font-size:8px;padding:3px 5px}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .feature-link {padding-top:5px;margin-top:8px;font-size:9px}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillars-footer {display:none}
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .scroll-stage-meta {display:none}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .ecosystem-layout {gap:0}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .display-heading {font-size:30px;margin:5px 0 8px}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-intro {font-size:10px;line-height:1.35;margin-bottom:4px}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-choice {padding:4px 0;font-size:10px}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-detail {min-height:55px;padding-top:5px}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-detail p {font-size:10px;line-height:1.35}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-stage {width:min(57vw,190px);margin:auto}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-node {width:44px;height:41px}
  .ecosystem-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .eco-node small {font-size:5px}
}
/* El media query "max-height" de la V7 convertía la tabla de soluciones de
   escritorio en una sola columna incluso en laptops anchas: ocupaba más que
   la pantalla y desactivaba los capítulos. Recuperamos sus dos columnas
   únicamente dentro de la escena controlada por scroll. */
@media (min-width:1101px) and (max-height:730px) {
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillars-layout {
    display:grid;grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr);gap:20px;
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillars-menu {
    display:flex;flex-direction:column;
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-tab {
    min-height:clamp(75px,11svh,100px);
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-feature {
    min-height:clamp(330px,52svh,480px);
  }
  .solutions-scroll-track:is(.gs-scroll-candidate,.gs-scroll-ready) .pillar-photo {
    min-height:0;
  }
}