/* ============================================================
   GPI SAS · Scrollytelling de equipo — "retrato-protagonista"
   Retrato fijo (sticky) que cambia por socio + malla de
   disciplinas que enciende el nodo activo, mientras avanzan
   las biografías. Lenguaje humano/editorial, distinto al de
   Servicios e Inicio. Sin librerías. Respeta reduced-motion.
   ============================================================ */

.st{
  display:grid;
  grid-template-columns:0.86fr 1.14fr;
  gap:clamp(36px,5vw,80px);
  align-items:start;
  margin-top:44px;
}

/* ---------- Panel fijo: retrato ---------- */
.st-visual{position:sticky;top:92px;align-self:start}
.st-stage{
  position:relative;aspect-ratio:4 / 5;max-height:78vh;
  border-radius:var(--radius);overflow:hidden;isolation:isolate;
  border:1px solid var(--line);background:var(--green);
  box-shadow:var(--shadow-3, 0 26px 50px -24px rgba(30,39,34,.30));
}
.st-portrait{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;
  opacity:0;transition:opacity .55s cubic-bezier(.16,.84,.44,1)}
.st-portrait.is-active{opacity:1}
.st-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(20,26,22,.20) 0%, rgba(20,26,22,0) 34%, rgba(20,26,22,.74) 100%)}

/* marcas de registro */
.st-mark{position:absolute;z-index:3;width:18px;height:18px;pointer-events:none}
.st-mark.tl{top:14px;left:14px;border-top:1.5px solid #E7D5BD;border-left:1.5px solid #E7D5BD;opacity:.85}
.st-mark.br{bottom:14px;right:14px;border-bottom:1.5px solid #E7D5BD;border-right:1.5px solid #E7D5BD;opacity:.85}

.st-num{position:absolute;top:18px;left:26px;z-index:3;margin:0;
  font-family:var(--serif);font-weight:600;font-size:clamp(40px,5vw,64px);line-height:.9;letter-spacing:-.03em;
  color:var(--paper);font-variant-numeric:tabular-nums lining-nums;text-shadow:0 2px 20px rgba(0,0,0,.45)}

/* malla de disciplinas (detalle, esquina sup. der.) */
/* halo oscuro para que lea sobre cualquier zona de la foto (clave en móvil) */
.st-mesh{position:absolute;z-index:3;top:18px;right:18px;width:clamp(78px,9vw,104px);height:auto;
  filter:drop-shadow(0 1px 2.5px rgba(0,0,0,.65))}
.st-mesh .edge{stroke:rgba(246,242,232,.55);stroke-width:1.4;fill:none}
.st-mesh .mcenter{fill:rgba(246,242,232,.6)}
.st-mesh .mnode{fill:rgba(246,242,232,.72);r:4.5;transition:fill .4s ease,r .4s ease}
.st-mesh .mnode.is-on{fill:var(--clay,#A8663F);r:7}

/* pie: disciplina + nombre + rol + progreso */
.st-meta{position:absolute;left:24px;right:24px;bottom:22px;z-index:3;color:var(--paper)}
.st-disc{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#E7D5BD;
  display:flex;align-items:center;gap:10px;margin:0 0 10px}
.st-disc::before{content:"";width:20px;height:1px;background:#E7D5BD}
.st-name{font-family:var(--serif);font-weight:600;font-size:clamp(20px,2vw,27px);line-height:1.08;letter-spacing:-.015em;
  color:var(--paper);margin:0}
.st-role{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(246,242,232,.8);
  margin-top:6px;display:block}
.st-ticks{display:flex;gap:6px;margin-top:16px}
.st-ticks i{flex:1;height:3px;border-radius:3px;background:rgba(246,242,232,.25);transition:background .45s ease}
.st-ticks i.on{background:linear-gradient(90deg,var(--clay,#A8663F),#E7D5BD)}

/* ---------- Biografías ---------- */
.st-steps{display:flex;flex-direction:column}
.st-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:5vh 0;
  opacity:.4;transition:opacity .5s cubic-bezier(.16,.84,.44,1)}
.st-step:first-child{min-height:58vh;justify-content:flex-start;padding-top:0}
.st-step:last-child{min-height:64vh}
.st-step.is-current{opacity:1}
.st-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}
.st-step .s-eyebrow::before{content:"";width:24px;height:1px;background:var(--clay)}
.st-step h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em;line-height:1.1;
  font-size:clamp(25px,2.8vw,36px);margin:15px 0 6px}
.st-step .st-role-in{font-family:var(--mono);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:16px}
.st-step .pbio{font-size:17px;line-height:1.6;color:var(--ink-soft);max-width:42ch;margin:0}
.st-photo{display:none}

/* ---------- Responsive: lista con retrato inline ---------- */
@media (max-width:900px){
  .st{grid-template-columns:1fr;gap:0;margin-top:24px}
  /* retrato fijo arriba; las biografías pasan por debajo y lo controlan */
  .st-visual{display:block;position:sticky;top:74px;z-index:5;align-self:start;margin-bottom:6px}
  .st-stage{aspect-ratio:auto;height:46vh;max-height:none}
  .st-photo{display:none}
  .st-step{min-height:62vh;opacity:.32;padding:0;border:0}
  .st-step:first-child{min-height:50vh}
  .st-step:last-child{min-height:58vh}
  .st-step.is-current{opacity:1}
  .st-step .pbio{max-width:none;font-size:16px}
}

/* ---------- Accesibilidad / movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  .st-step{opacity:1;transition:none}
  .st-portrait{transition:none}
  .st-mesh .mnode,.st-ticks i{transition:none}
}