/* ═══════════════════════════════════════════════════════════════
   Salesforce · dos caminos en paralelo
   Arriba la elección; abajo las dos ramas bajan juntas, cada una
   con su color y sus proyectos. El trazo que las separa se dibuja
   con el scroll, así el recorrido se lee como una bifurcación real.
   ═══════════════════════════════════════════════════════════════ */

.sf{--nube1:#00A1E0;--nube2:#0176D3;
    --ag1:#9050E9;--ag2:#5A1BA9;
    background:#07070d;color:#fff}

/* ── la elección ────────────────────────────────────────────── */
.sf-entrada{position:relative;overflow:hidden;
  padding:clamp(54px,9vh,110px) 0 0;text-align:center}
.sf-entrada::before{content:"";position:absolute;left:50%;top:-14%;
  width:min(1000px,120%);aspect-ratio:2/1;transform:translateX(-50%);
  pointer-events:none;z-index:0;filter:blur(70px);opacity:.3;
  background:radial-gradient(ellipse at 30% 50%,var(--nube1),transparent 62%),
             radial-gradient(ellipse at 70% 50%,var(--ag1),transparent 62%)}
.sf-in{position:relative;z-index:1;max-width:1220px;margin:0 auto;
  padding:0 clamp(20px,5vw,48px)}
.sf-h1{font-size:clamp(36px,6.4vw,76px);font-weight:700;line-height:1;
  letter-spacing:-.04em;margin:0;text-wrap:balance}
.sf-bajada{font-size:clamp(16px,1.8vw,20px);line-height:1.5;
  color:rgba(255,255,255,.6);max-width:52ch;margin:18px auto 0;text-wrap:pretty}

/* el trazo que se abre en dos */
.sf-trazo{display:block;width:min(920px,100%);height:clamp(56px,9vw,108px);
  margin:clamp(24px,4vh,44px) auto 0;overflow:visible}
.sf-trazo path{fill:none;stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.5s cubic-bezier(.35,0,.15,1)}
.sf-entrada.vis .sf-trazo path{stroke-dashoffset:0}
.sf-trazo .rama-a{stroke:var(--nube1);transition-delay:.35s}
.sf-trazo .rama-b{stroke:var(--ag1);transition-delay:.35s}
.sf-trazo .tronco{stroke:rgba(255,255,255,.4)}
@media(max-width:760px){.sf-trazo{display:none}}

/* ── las dos ramas bajan en paralelo ────────────────────────── */
.sf-ramas{display:grid;grid-template-columns:1fr 1px 1fr;
  gap:0 clamp(22px,3.4vw,52px);align-items:start;
  max-width:1220px;margin:0 auto;padding:0 clamp(20px,5vw,48px)
              clamp(50px,8vh,96px)}
/* el filete que las separa se dibuja al bajar */
.sf-divisoria{align-self:stretch;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.16) 8%,
             rgba(255,255,255,.16) 92%,transparent);
  transform:scaleY(var(--tramo,0));transform-origin:top;
  transition:transform .5s linear}
@media(max-width:900px){
  .sf-ramas{grid-template-columns:1fr;gap:clamp(40px,7vh,70px) 0}
  .sf-divisoria{display:none}
}

/* ── cabecera de cada rama ──────────────────────────────────── */
.sf-rama{min-width:0}
.sf-rama--nubes{--c1:var(--nube1);--c2:var(--nube2)}
.sf-rama--agentes{--c1:var(--ag1);--c2:var(--ag2)}
.sf-cab{padding:0 0 clamp(16px,2.4vh,24px);
  margin-bottom:clamp(6px,1vh,12px)}
.sf-marca{display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--c1);margin-bottom:12px}
.sf-marca i{width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--c1),var(--c2))}
.sf-titulo{font-size:clamp(24px,3.4vw,40px);font-weight:700;line-height:1.04;
  letter-spacing:-.035em;margin:0;text-wrap:balance}
.sf-texto{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.5;
  color:rgba(255,255,255,.58);margin:11px 0 0;max-width:36ch;text-wrap:pretty}
.sf-cuenta{display:inline-block;margin-top:14px;font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}

/* ── cada proyecto ──────────────────────────────────────────── */
.sf-proy{padding:clamp(18px,2.8vh,30px) 0;
  border-top:1px solid rgba(255,255,255,.08);
  opacity:0;transform:translateY(20px);
  transition:opacity .5s var(--ease-j),transform .55s var(--ease-j)}
.sf-proy.vis{opacity:1;transform:none}
.sf-proy h3{font-size:clamp(17px,1.9vw,21px);font-weight:700;letter-spacing:-.02em;
  margin:0 0 clamp(12px,1.8vh,16px);text-wrap:balance}
.sf-proy h3 em{font-style:normal;display:block;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c1);margin-bottom:7px}

/* la captura, dentro de una ventana ─────────────────────────── */
.sf-vent{position:relative;border-radius:11px;overflow:hidden;
  background:#15151c;box-shadow:0 0 0 1px rgba(255,255,255,.11),
             0 24px 48px -22px rgba(0,0,0,.9);
  transition:transform .5s var(--ease-j),box-shadow .5s var(--ease-j)}
.sf-proy:hover .sf-vent{transform:translateY(-4px);
  box-shadow:0 0 0 1px var(--c1),0 30px 60px -24px rgba(0,0,0,.95)}
.sf-vent-barra{display:flex;align-items:center;gap:6px;padding:8px 11px;
  background:#1b1b23;border-bottom:1px solid rgba(255,255,255,.07)}
.sf-vent-barra i{width:7px;height:7px;border-radius:50%;flex:none;
  background:rgba(255,255,255,.16)}
.sf-vent-barra span{margin-left:6px;font-size:10.5px;letter-spacing:.06em;
  color:rgba(255,255,255,.34);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.sf-vent img{display:block;width:100%;height:auto}

/* los puntos del proyecto ───────────────────────────────────── */
.sf-puntos{list-style:none;padding:clamp(13px,2vh,18px) 0 0;margin:0;display:grid;gap:0}
.sf-puntos li{position:relative;padding:8px 0 8px 21px;font-size:14px;line-height:1.5;
  color:rgba(255,255,255,.66);text-wrap:pretty}
.sf-puntos li + li{border-top:1px solid rgba(255,255,255,.06)}
.sf-puntos li::before{content:"";position:absolute;left:0;top:15px;
  width:6px;height:6px;border-radius:2px;
  background:linear-gradient(120deg,var(--c1),var(--c2))}

/* ── remate de la rama ──────────────────────────────────────── */
.sf-fin{padding-top:clamp(20px,3vh,28px);border-top:1px solid rgba(255,255,255,.08)}
.sf-cta{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;
  padding:13px 26px;border-radius:999px;color:#fff;
  background:linear-gradient(100deg,var(--c1),var(--c2));
  transition:transform .3s var(--ease-j),box-shadow .3s var(--ease-j)}
.sf-cta:hover{color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 28px -10px var(--c1)}
.sf-cta svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.3;fill:none}

/* ── saltos rápidos en pantalla angosta ─────────────────────── */
.sf-saltos{display:none}
@media(max-width:900px){
  .sf-saltos{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
    padding:0 clamp(20px,5vw,48px) clamp(24px,4vh,38px)}
  .sf-saltos a{font-size:13px;font-weight:600;padding:10px 18px;border-radius:999px;
    color:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.04)}
  .sf-saltos a:hover{color:#fff}
}

@media(prefers-reduced-motion:reduce){
  .sf-proy{opacity:1;transform:none}
  .sf-trazo path{stroke-dashoffset:0}
  .sf-divisoria{transform:none}
}