/* ============================================================
   GPI SAS · Scrollytelling de Servicios
   Panel fijo (sticky) que cambia según el servicio activo +
   pasos que avanzan al hacer scroll. Sin librerías.
   Hereda la paleta, la tipografía y las marcas de registro
   de site.css / premium.css. Respeta prefers-reduced-motion.
   ============================================================ */

.scrolly-sec .sec-head{margin-bottom:6px}

.scrolly{
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:clamp(36px,5vw,84px);
  align-items:start;
  margin-top:46px;
}

/* ---------- Panel fijo (columna izquierda) ---------- */
.scrolly-visual{position:sticky;top:92px;align-self:start}

.scrolly-stage{
  position:relative;
  aspect-ratio:1 / 1.04;
  max-height:74vh;
  border-radius:var(--radius);
  overflow:hidden;
  isolation:isolate;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 80% -12%, #F8F3E7 0%, rgba(248,243,231,0) 56%),
    linear-gradient(180deg,#F5F0E4,var(--paper-2));
  box-shadow:var(--shadow-3, 0 26px 50px -24px rgba(30,39,34,.30));
}
/* Marcas de registro cartográficas (mismo lenguaje del sitio) */
.scrolly-stage::before,
.scrolly-stage::after{content:"";position:absolute;z-index:4;width:18px;height:18px;pointer-events:none}
.scrolly-stage::before{top:14px;left:14px;border-top:1.5px solid var(--clay);border-left:1.5px solid var(--clay);opacity:.8}
.scrolly-stage::after{bottom:14px;right:14px;border-bottom:1.5px solid var(--clay);border-right:1.5px solid var(--clay);opacity:.8}

/* Trama de curvas de nivel de fondo */
.scrolly-topo{position:absolute;inset:0;z-index:0;width:100%;height:100%;opacity:.5;pointer-events:none}

/* Número grande del servicio activo */
.scrolly-num{
  position:absolute;top:24px;left:30px;z-index:3;margin:0;
  font-family:var(--serif);font-weight:600;line-height:.9;letter-spacing:-.035em;
  font-size:clamp(54px,7.2vw,96px);
  font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(140deg,var(--green),var(--green-2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}

/* Glifos (uno por servicio, superpuestos) */
.scrolly-glyphs{position:absolute;inset:0;z-index:2;display:grid;place-items:center}
.glyph{
  grid-area:1 / 1;
  width:min(56%,300px);height:auto;
  color:var(--green);
  fill:none;stroke-width:3.2;
  opacity:0;
  transform:scale(.96) translateY(8px);
  transition:opacity .4s var(--ease,cubic-bezier(.16,.84,.44,1)),
             transform .4s var(--ease,cubic-bezier(.16,.84,.44,1));
  pointer-events:none;
}
.glyph.is-active{opacity:1;transform:none}
.glyph .accent{color:var(--clay)}

/* Firma: el glifo activo se "dibuja" como la pluma de un plotter.
   El recorrido de cada trazo lo calcula scrolly.js con getTotalLength()
   (soporte uniforme en todos los navegadores). Por defecto los trazos
   quedan sólidos: si el JS no corre, el glifo se ve completo. */
.glyph path,.glyph polygon,.glyph rect,.glyph line,.glyph circle{
  transition:stroke-dashoffset .6s var(--ease,cubic-bezier(.16,.84,.44,1));
}
.glyph .accent path,.glyph .accent polygon,.glyph .accent rect{transition-delay:.16s} /* el acento clay entra después */

/* Pie del panel: barra de progreso + título, en un solo bloque anclado abajo.
   Al agruparlos, el título siempre queda por debajo de la línea, con una
   separación constante, aunque envuelva a dos líneas. */
.scrolly-foot{position:absolute;left:30px;right:30px;bottom:24px;z-index:3;
  display:flex;flex-direction:column;gap:14px}

/* Indicador de progreso (6 segmentos) */
.scrolly-ticks{display:flex;gap:6px}
.scrolly-ticks i{flex:1;height:3px;border-radius:3px;background:rgba(30,39,34,.12);transition:background .45s ease}
.scrolly-ticks i.on{background:linear-gradient(90deg,var(--clay),var(--green))}

/* Título activo + contador */
.scrolly-caption{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.scrolly-caption .t{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em;
  font-size:clamp(17px,1.5vw,21px);color:var(--ink);max-width:15ch;margin:0}
.scrolly-count{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--clay);white-space:nowrap}

/* ---------- Pasos (columna derecha) ---------- */
.scrolly-steps{display:flex;flex-direction:column}
.scrolly-step{
  min-height:78vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:5vh 0;
  opacity:.42;
  transition:opacity .5s var(--ease,ease);
}
.scrolly-step:first-child{min-height:62vh;padding-top:0;justify-content:flex-start}
.scrolly-step:last-child{min-height:66vh}
.scrolly-step.is-current{opacity:1}

.scrolly-step .s-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay-ink);display:flex;align-items:center;gap:11px}
.scrolly-step .s-eyebrow::before{content:"";width:24px;height:1px;background:var(--clay)}
.scrolly-step h3{font-family:var(--serif);font-weight:600;letter-spacing:-.02em;line-height:1.06;
  font-size:clamp(26px,3vw,38px);margin:16px 0 14px}
.scrolly-step .lead-s{font-size:18px;line-height:1.55;color:var(--ink-soft);max-width:38ch;margin:0}
.scrolly-step ul{list-style:none;display:grid;gap:11px;margin:24px 0 0;padding:0;max-width:44ch}
.scrolly-step li{font-size:15.5px;line-height:1.5;color:var(--ink-soft);display:flex;gap:12px;align-items:flex-start}
.scrolly-step li::before{content:"";flex:0 0 7px;width:7px;height:7px;margin-top:8px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 4px rgba(51,80,63,.08)}

/* ---------- Responsive: pila limpia en móvil/tablet ---------- */
@media (max-width:900px){
  .scrolly{grid-template-columns:1fr;gap:0;margin-top:24px}
  /* panel fijo arriba; los pasos pasan por debajo y lo controlan */
  .scrolly-visual{display:block;position:sticky;top:74px;z-index:5;margin-bottom:6px}
  .scrolly-stage{aspect-ratio:auto;height:44vh;max-height:none}
  .scrolly-step{min-height:64vh;opacity:.32;padding:0;border:0}
  .scrolly-step:first-child{min-height:52vh}
  .scrolly-step:last-child{min-height:58vh}
  .scrolly-step.is-current{opacity:1}
  .scrolly-step .lead-s{font-size:16.5px;max-width:none}
}

/* ---------- Accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .scrolly-step{opacity:1;transition:none}
  .glyph{transition:none}
  .glyph path,.glyph polygon,.glyph rect,.glyph line,.glyph circle{transition:none}
  .scrolly-ticks i{transition:none}
}