/* GS Support · V7 — efectos de scroll para móvil y tablet
   Se carga al final. Todo va dentro de la misma condición que usa assets/js/v7.js:
   pantallas de hasta 1100 px o con puntero táctil. En escritorio con ratón no cambia nada.
   Las variables --sp (progreso) y --rv (revelado) las escribe v7.js; sin ellas, cada regla
   tiene un valor por defecto que deja la página completa y legible. */
:root{--v7-ease:cubic-bezier(.16,1,.3,1)}

/* Botón flotante y miniaturas: solo existen en pantallas pequeñas */
.sticky-cta,.svc-thumb{display:none}

@media (max-width:1100px),(hover:none) and (pointer:coarse){

  /* ── Tira de marcas: se desliza con el scroll ── */
  .brand-strip{overflow:hidden}
  .brand-names{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:clamp(28px,6vw,52px);overflow:hidden;min-width:0;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
  .brand-names li{flex:0 0 auto;translate:var(--tx,0) 0;will-change:translate}

  /* ── Nosotros: cada dato dibuja su línea al aparecer ── */
  .about-facts>div{position:relative;border-top-color:transparent}
  .about-facts>div:before,.about-facts>div:after{content:"";position:absolute;left:0;top:-1px;width:100%;pointer-events:none}
  .about-facts>div:before{height:1px;background:var(--line-light,rgba(31,24,30,.13))}
  .about-facts>div:after{height:2px;background:var(--v5-red,#8E2025);transform:scaleX(var(--rv,0));transform-origin:left}

  /* ── Soluciones (en flujo normal): la foto se desplaza dentro de su marco ── */
  .pillar-photo{background-position:center calc(18% + var(--sp,.5)*64%)}

  /* ── Servicios: la fila centrada se enciende y muestra su foto ── */
  .svc-list.is-focusing .svc{opacity:.36;transition:opacity .5s var(--v7-ease)}
  .svc-list.is-focusing .svc.is-focus{opacity:1}
  .svc.is-focus h3{color:var(--v5-red,#8E2025);transform:translateX(10px)}
  .svc.is-focus:before{transform:scaleX(1)}
  .svc{--thumb:clamp(72px,19vw,160px)}
  .svc-thumb{display:block;position:absolute;right:0;top:50%;width:var(--thumb);aspect-ratio:3/2;border-radius:8px;background-size:cover;background-position:center;pointer-events:none;
    opacity:0;transform:translateY(-50%) scale(.6) rotate(-3deg);transform-origin:right center;transition:opacity .45s var(--v7-ease),transform .6s var(--v7-ease);box-shadow:0 14px 34px rgba(60,12,18,.22)}
  .svc.is-focus .svc-thumb{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}
  .svc a{transition:padding .6s var(--v7-ease),color .3s}
  .svc.is-focus a{padding-right:calc(var(--thumb) + 18px)}

  /* ── Ecosistema (en flujo normal): el isotipo gira y el anillo respira con el scroll ── */
  .eco-real-isotipo{rotate:calc((var(--eco-motion,var(--sp,.5)) - .5)*60deg)}
  .eco-orbit-three{scale:calc(.94 + var(--eco-motion,var(--sp,.5))*.1)}

  /* ── Imagen de cierre: se abre como una ventana y se desplaza ── */
  .story-motion .story-img,.story-motion.is-in-view .story-img{
    clip-path:inset(calc((1 - var(--rv,1))*16%) calc((1 - var(--rv,1))*9%) round calc((1 - var(--rv,1))*34px));
    background-position:center calc(18% + var(--sp,.5)*64%);transition:none}

  /* ── Sección roja: la placa del logo se inclina con el scroll y los anillos crecen ── */
  .brand-manifesto-art{transform:perspective(900px) rotateX(calc((.5 - var(--sp,.5))*18deg)) translate3d(0,calc((.5 - var(--sp,.5))*-40px),0)}
  .brand-manifesto-curve,.brand-manifesto.is-in-view .brand-manifesto-curve{transform:scale(calc(.86 + var(--sp,.5)*.36));transition:none}

  /* ── Botón flotante ── */
  .sticky-cta{display:inline-flex;align-items:center;position:fixed;z-index:120;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));
    min-height:52px;padding:0 24px;border-radius:999px;background:#8E2025;color:#fff;font-weight:700;font-size:15px;
    border:1px solid rgba(255,255,255,.3);box-shadow:0 14px 34px rgba(30,3,8,.4);
    transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none;transition:transform .6s var(--v7-ease),opacity .4s,background .3s}
  .sticky-cta.is-on{transform:none;opacity:1;pointer-events:auto}
  .sticky-cta:active{background:#a93e42}
}
/* En tablet el botón y las miniaturas pueden ser más grandes */
@media (min-width:768px) and (max-width:1100px){
  .svc{--thumb:clamp(140px,20vw,190px)}
  .sticky-cta{min-height:56px;padding:0 30px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .sticky-cta{display:none}
  .svc-thumb{display:none}
}