/* ============================================================
   INICIO · 04-api (#api) — Pilar 02 «FITAL API»
   Modos:  (base) estático: sin JS y ?reduce → todo visible, apilado
           .is-live.is-pin   escritorio ≥900px: escenario fijado, consola con scrub
           .is-live.is-tabs  móvil <900px: pestañas + consola con avance automático
   ============================================================ */
#api{overflow:clip;background:var(--ink);
  --ap-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* ---------- Cabecera ---------- */
#api .ap__head{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,6vw,110px);align-items:end;margin-bottom:clamp(28px,3.4vw,56px)}
#api .ap__num{position:absolute;left:calc(var(--gut) - .06em);top:0;z-index:0;padding:0 .16em 0 .04em;
  font:500 italic clamp(8.5rem,19vw,19rem)/.86 var(--serif);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1.2px rgba(244,213,138,.62);pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 16%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.16) 100%);mask-image:linear-gradient(180deg,#000 16%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.16) 100%)}
#api .ap__headL{position:relative;z-index:1;padding-top:clamp(6.4rem,14.2vw,14.2rem)}
#api .ap__title{margin-top:.28em;font-size:clamp(3.1rem,8.2vw,8.4rem);line-height:.9}
#api .ap__headR{position:relative;z-index:1;padding-bottom:.5rem}
#api .ap__lead{max-width:46ch}
#api .ap__cita{margin:clamp(22px,2.6vw,38px) 0 0;padding-left:clamp(16px,1.8vw,26px);border-left:1px solid var(--gold)}
#api .ap__cita p{margin:0;font:500 italic clamp(1.5rem,2.5vw,2.5rem)/1.12 var(--serif);letter-spacing:-.015em;color:var(--cream);max-width:18ch}

/* ---------- Escenario ---------- */
#api .ap__stage{position:relative;padding-block:clamp(36px,6vw,88px)}
#api .ap__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
#api .ap__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;opacity:.5;transform:scale(1.04)}
#api .ap__veil{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,9,15,.94) 0%,rgba(5,9,15,.78) 42%,rgba(5,9,15,.5) 100%),
  radial-gradient(60% 70% at 72% 50%,rgba(5,9,15,0) 0%,rgba(5,9,15,.5) 100%)}
#api .ap__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,4.6vw,84px);align-items:start}
#api .ap__left{position:sticky;top:calc(var(--nav-h) + 24px)}

/* ---------- Pasos ---------- */
#api .ap__rail{position:relative}
#api .ap__line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;display:none}
#api .ap__line-base{stroke:rgba(216,166,70,.22);stroke-width:1}
#api .ap__line-lit{stroke:var(--gold);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(216,166,70,.45))}
#api .ap__drop{opacity:0;filter:drop-shadow(0 0 5px rgba(244,213,138,.85)) drop-shadow(0 0 13px rgba(216,166,70,.55))}
#api .ap__drop-halo{fill:rgba(244,213,138,.2);filter:blur(6px)}
#api .ap__drop-bead{fill:#F4D58A;opacity:0}
#api .ap__drop-spec{fill:#fff;opacity:.88}
#api .ap__steps{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:clamp(4px,1vh,12px)}
#api .ap__li{position:relative}
#api .ap__li:not(:last-child):before{content:"";position:absolute;left:19.5px;top:58px;bottom:-22px;width:1px;background:var(--hair)}
#api .ap__step{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:clamp(14px,1.6vw,24px);
  padding:clamp(12px,1.9vh,20px) clamp(10px,1.2vw,18px) clamp(12px,1.9vh,20px) 0;border-radius:var(--r-sm);min-height:44px;color:var(--cream)}
#api .ap__node{position:relative;z-index:1;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--hair);background:var(--ink-2);
  transition:border-color .6s var(--ease),background .6s var(--ease),box-shadow .8s var(--ease),color .5s}
#api .ap__node b{font:700 .74rem/1 var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--gold-2);transition:color .5s}
#api .ap__sc{display:grid;gap:8px;justify-items:start;min-width:0}
#api .ap__st{font:500 clamp(1.45rem,2.05vw,2rem)/1.05 var(--serif);letter-spacing:-.02em;color:var(--cream);transition:color .6s var(--ease)}
#api .ap__sx{font-size:clamp(.95rem,1vw,1.02rem);line-height:1.5;color:var(--cream-2);max-width:40ch;transition:color .6s var(--ease)}
#api .ap__chip{max-width:100%;min-height:32px;padding:6px 14px;white-space:normal;transition:border-color .6s,color .6s,background .6s}
#api .ap__chip code{font:600 .78rem/1.3 var(--ap-mono);letter-spacing:0;overflow-wrap:anywhere}

/* ---------- Consola ---------- */
#api .ap__right{position:relative;min-width:0}
#api .ap__right:before{content:"";position:absolute;inset:-12% -8%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(216,166,70,.16),rgba(216,166,70,0) 70%)}
#api .ap__console{position:relative;z-index:1;border-radius:var(--r);border:1px solid var(--hair);overflow:hidden;
  background:linear-gradient(180deg,rgba(13,27,40,.86) 0%,rgba(6,12,20,.93) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(120%);backdrop-filter:blur(18px) saturate(120%);
  box-shadow:0 60px 120px -50px rgba(0,0,0,.95),0 24px 60px -30px rgba(216,166,70,.22),inset 0 1px rgba(244,213,138,.16)}
#api .ap__console:before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--gold-2),transparent);opacity:.8}
#api .ap__bar{display:flex;align-items:center;gap:14px;padding:14px clamp(14px,1.6vw,22px);border-bottom:1px solid var(--line);background:rgba(5,9,15,.35)}
#api .ap__dots{display:flex;gap:7px;flex:none}
#api .ap__dots i{width:10px;height:10px;border-radius:50%;border:1px solid var(--line-2)}
#api .ap__dots i:first-child{background:rgba(216,166,70,.5);border-color:var(--hair)}
#api .ap__host{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:5px 14px;border-radius:999px;
  background:rgba(243,234,219,.05);border:1px solid var(--line);font:500 .8rem/1.2 var(--ap-mono);color:var(--cream-2)}
#api .ap__host svg{width:14px;height:14px;flex:none;color:var(--gold-2)}
#api .ap__host span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#api .ap__env{flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 11px}
#api .ap__env i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(127,214,168,.8)}

#api .ap__body{padding:clamp(18px,2vw,30px) clamp(16px,2vw,30px) clamp(14px,1.6vw,24px)}
#api .ap__panel{min-width:0;scroll-margin-top:calc(var(--nav-h) + 24px)}
#api .ap__panel + .ap__panel{margin-top:clamp(22px,2.4vw,34px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line)}
#api .ap__ph{display:flex;align-items:baseline;gap:12px;margin:0 0 14px;font:500 1.35rem/1.1 var(--serif);color:var(--cream)}
#api .ap__ph .num{font-size:.78rem;letter-spacing:.14em}
#api .ap__about{display:none}
#api .ap__lbl{display:flex;align-items:center;gap:9px;margin:0 0 8px;font:700 .68rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
#api .ap__lbl i{width:14px;height:1px;background:currentColor;opacity:.7}
#api .ap__lbl--res{color:var(--ok)}
#api .ap__code{margin:0;padding:0;border:0;border-radius:0;background:none;overflow:visible;white-space:pre-wrap;overflow-wrap:anywhere;
  font:500 clamp(.84rem,1.04vw,1rem)/1.7 var(--ap-mono);color:var(--cream-2)}
#api .ap__code code{font:inherit}
#api .ap__code .ln{display:block;padding-left:2ch;text-indent:-2ch}
#api .ap__panel:focus-visible{outline:2px solid var(--gold-2);outline-offset:6px;border-radius:8px}
#api .ap__defs{position:absolute;width:0;height:0;overflow:hidden}
#api .ap__code .p{color:var(--cream)}
#api .ap__code .s{color:#BFE0CB}
#api .ap__resw{position:relative;margin-top:clamp(14px,1.6vw,20px);padding-top:clamp(14px,1.6vw,20px)}
#api .ap__resw:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--hair),rgba(216,166,70,0));transform-origin:left}
#api .ap__status{display:inline-flex;align-items:center;gap:8px;margin-bottom:2px;padding:1px 11px 1px 9px;border-radius:999px;
  border:1px solid rgba(127,214,168,.38);background:rgba(127,214,168,.09);color:var(--ok);font-weight:700}
#api .ap__sline{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;max-width:100%}
#api .ap__code .nt{color:var(--cream)}
#api .ap__status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}

#api .ap__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:10px clamp(16px,2vw,30px);border-top:1px solid var(--line);background:rgba(5,9,15,.35)}
#api .ap__pie{margin:0;color:#97A4B0;letter-spacing:.05em;font-size:.7rem;text-wrap:balance}
@media (min-width:900px) and (max-width:1400px){#api .ap__pie{letter-spacing:.03em;font-size:.66rem}}
#api .ap__ctl{display:none;align-items:center;gap:8px;flex:none}
#api .ap__count{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--mute)}
#api .ap__count b{color:var(--gold-2);font-weight:800}
#api .ap__count i{width:22px;height:1px;background:var(--line-2)}
/* «Pausar» / «Reanudar» con texto, como en ecosistema (solo celular) */
#api .ap__pause{display:none;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 16px 0 11px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(243,234,219,.03);color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;
  font:700 .75rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:border-color .5s var(--ease),color .5s var(--ease)}
#api .ap__pause svg{width:16px;height:16px;flex:none;color:var(--gold-2)}
#api .ap__pause .ap__ico-play,#api .ap__pause-b{display:none}
#api .ap__pause.is-off{border-color:var(--hair);color:var(--gold-2)}
#api .ap__pause.is-off .ap__ico-play,#api .ap__pause.is-off .ap__pause-b{display:inline}
#api .ap__pause.is-off .ap__ico-pause,#api .ap__pause.is-off .ap__pause-a{display:none}
#api .ap__pause:focus-visible,#api .ap__jb:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
/* saltos a cada paso desde el pie (solo celular): 4 puntos sobre un hilo, el activo se alarga */
#api .ap__jump{display:none}
#api .ap__jb{position:relative;flex:1 1 44px;min-width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
#api .ap__jb i{display:block;width:8px;height:8px;border-radius:999px;border:1px solid var(--gold);background:var(--ink-2);
  transition:width .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease)}
#api .ap__jb.is-done i{background:rgba(216,166,70,.55)}
#api .ap__jb.is-on i{width:24px;background:var(--gold-2);border-color:var(--gold-2);box-shadow:0 0 10px rgba(244,213,138,.6)}

/* ---------- Después: tarjetas y botones ---------- */
#api .ap__after{position:relative;z-index:1;margin-top:clamp(64px,7vw,116px)}
#api .ap__cards{position:relative}
#api .ap__cards:before{content:"";position:absolute;left:0;right:0;top:calc(clamp(26px,3vw,44px) * -1);height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(216,166,70,0),var(--gold) 12%,var(--gold-2) 50%,var(--gold) 88%,rgba(216,166,70,0));opacity:.55}
#api .ap__card{position:relative;display:flex;flex-direction:column}
#api .ap__card:before{content:"";position:absolute;left:clamp(40px,4.2vw,62px);top:calc(clamp(26px,3vw,44px) * -1 - 1px);width:1px;height:clamp(26px,3vw,44px);
  background:linear-gradient(180deg,var(--gold-2),rgba(216,166,70,.15));pointer-events:none}
#api .ap__card:after{content:"";position:absolute;left:clamp(40px,4.2vw,62px);top:calc(clamp(26px,3vw,44px) * -1 - 1px);width:7px;height:7px;margin:-3px 0 0 -3px;border-radius:50%;
  background:var(--gold-2);box-shadow:0 0 0 4px rgba(216,166,70,.12),0 0 14px rgba(244,213,138,.8);pointer-events:none}
#api .ap__ctop{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:clamp(18px,1.6vw,24px);padding-bottom:clamp(16px,1.4vw,20px);border-bottom:1px solid var(--line)}
#api .ap__ico{width:48px;height:48px;margin-left:-4px;color:var(--gold-2);flex:none;transition:transform .8s var(--ease)}
#api .ap__card:hover .ap__ico{transform:translateY(-3px) scale(1.06)}
#api .ap__ct{margin:0 0 10px;font:500 clamp(1.5rem,2.1vw,2rem)/1.08 var(--serif);letter-spacing:-.02em;color:var(--cream);text-wrap:balance}
#api .ap__card .body{margin:0;max-width:34ch;text-wrap:pretty}
#api .ap__card:nth-child(2).is-in{transition-delay:.09s}
#api .ap__card:nth-child(3).is-in{transition-delay:.18s}
#api .ap__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(32px,4vw,56px)}
#api .ap__ctas .btn{min-height:52px}
/* acciones secundarias: bajo el botón dorado, sin moverlo */
#api .ap__ctas2{display:flex;flex-wrap:wrap;gap:10px 12px;width:100%;justify-content:inherit}
#api .ap__ctas2 .btn{min-height:48px}

/* ============================================================
   DIAGRAMA 3D (.is-3d lo pone api.js solo con WebGL y sin ?reduce)
   Sin esa clase: las 3 tarjetas de vidrio de siempre (respaldo)
   ============================================================ */
#api .ap__scene,#api .ap__tp{display:none}
#api.is-3d .ap__cards:before,#api.is-3d .ap__card:before,#api.is-3d .ap__card:after{display:none}
#api.is-3d .ap__dia{position:relative}
#api.is-3d .ap__scene{display:block;position:relative;height:min(88vw,400px);margin-bottom:clamp(14px,2vw,26px);
  touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#api.is-3d .ap__scene.is-drag{cursor:grabbing}
#api.is-3d .ap__scene:before{content:"";position:absolute;inset:-6% 4%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(216,166,70,.13),rgba(216,166,70,.035) 46%,rgba(216,166,70,0) 72%)}
#api .ap__gl{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;opacity:0;transition:opacity 1.4s var(--ease)}
#api .ap__gl.is-ready{opacity:1}
#api .ap__wires{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#api .ap__wire{opacity:.34;transition:opacity .7s var(--ease)}
#api .ap__wire.is-on{opacity:1}
#api .ap__wire path{stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
#api .ap__wire.is-on path{stroke:var(--gold-2)}
#api .ap__wire-r{stroke:var(--gold-2);stroke-width:1;opacity:.55}
#api .ap__wire-d{fill:#FFF6DC}
#api .ap__wire.is-on .ap__wire-d{filter:drop-shadow(0 0 5px rgba(244,213,138,.95))}

/* rótulos (las mismas 3 tarjetas, ahora ancladas a su capa) */
#api.is-3d .ap__card{cursor:pointer;-webkit-tap-highlight-color:transparent;padding:clamp(18px,2vw,26px);
  transition:border-color .6s var(--ease),background .6s var(--ease),box-shadow .8s var(--ease),opacity 1.2s var(--ease),transform 1.4s var(--ease)}
#api.is-3d .ap__card:hover{transform:none}
#api.is-3d .ap__card:focus-visible{outline:2px solid var(--gold-2);outline-offset:5px;border-radius:var(--r-sm)}
#api.is-3d .ap__ctop{margin-bottom:12px;padding-bottom:0;border-bottom:0;gap:14px;justify-content:flex-start}
#api.is-3d .ap__ctop:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hair),rgba(216,166,70,.08));transition:background .6s}
#api.is-3d .ap__ico{order:-1;width:30px;height:30px;margin-left:-2px;color:var(--mute);transition:color .6s var(--ease)}
#api.is-3d .ap__card .glass__n{color:var(--cream-2);transition:color .6s var(--ease)}
#api.is-3d .ap__ct{margin:0 0 8px;font-size:clamp(1.34rem,1.72vw,1.7rem);color:var(--cream-2);transition:color .6s var(--ease)}
#api.is-3d .ap__card .body{color:var(--mute);transition:color .6s var(--ease)}
#api.is-3d .ap__card.is-on{border-color:var(--gold);background:linear-gradient(180deg,rgba(216,166,70,.1),rgba(216,166,70,.02) 60%),var(--glass-2);
  box-shadow:0 26px 60px -34px rgba(216,166,70,.5),inset 0 1px rgba(244,213,138,.2)}
#api.is-3d .ap__card.is-on .ap__ico,#api.is-3d .ap__card.is-on .glass__n{color:var(--gold-2)}
#api.is-3d .ap__card.is-on .ap__ct{color:var(--cream)}
#api.is-3d .ap__card.is-on .body{color:var(--cream)}
#api.is-3d .ap__card.is-on .ap__ctop:after{background:linear-gradient(90deg,var(--gold-2),rgba(216,166,70,.12))}
/* hilo de oro que marca cuánto falta para la siguiente capa */
#api.is-3d .ap__tp{display:block;position:relative;height:2px;margin-top:16px;border-radius:2px;background:var(--line);overflow:hidden}
#api.is-3d .ap__tp:after{content:"";position:absolute;inset:0;border-radius:2px;background:var(--gold-grad);transform-origin:left;transform:scaleX(0);opacity:0;transition:opacity .5s}
#api.is-3d .ap__card.is-on .ap__tp:after{transform:scaleX(var(--ap-tp,0));opacity:1}
#api.is-3d .ap__ctas{justify-content:center}
html.reveal-on #api .ap__ctas[data-reveal]:not(.is-in){pointer-events:none}
/* micro-rótulos de la capa 01 (los coloca api.js sobre sus nodos; solo se ven con esa capa encendida) */
#api .ap__tags{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#api .ap__tag{position:absolute;left:0;top:0;translate:-50% calc(-100% - 13px);opacity:0;white-space:nowrap;will-change:transform,opacity;
  padding:4px 10px 3px;border-radius:999px;border:1px solid rgba(216,166,70,.46);background:rgba(5,9,15,.78);
  font-size:.75rem;line-height:1.2;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cream);
  box-shadow:0 8px 22px -12px rgba(0,0,0,.9);transition:opacity .28s linear,border-color .5s var(--ease),color .5s var(--ease)}
#api .ap__tag.is-vis{opacity:1}
/* capa 03: los 4 pasos como hitos; el punto se llena cuando el pago ya pasó por ahí */
#api .ap__tag--st{display:inline-flex;align-items:center;gap:7px;color:var(--cream-2);border-color:rgba(216,166,70,.3)}
#api .ap__tag--st i{flex:none;width:7px;height:7px;border-radius:50%;border:1px solid var(--gold-2);background:transparent;transition:background .5s var(--ease),box-shadow .5s var(--ease)}
#api .ap__tag--st.is-done{color:var(--cream);border-color:rgba(244,213,138,.8)}
#api .ap__tag--st.is-done i{background:var(--gold-2);box-shadow:0 0 8px rgba(244,213,138,.9)}
#api .ap__tag:after{content:"";position:absolute;left:50%;top:100%;width:1px;height:9px;background:linear-gradient(180deg,var(--gold-2),rgba(216,166,70,0))}

/* escritorio ancho: el diagrama al centro y los rótulos flotando a los lados, con su hilo hasta la capa */
@media (min-width:1200px){
  #api.is-3d .ap__after{margin-top:clamp(20px,2.4vw,40px)}
  #api.is-3d .ap__dia{height:clamp(540px,70vh,660px)}
  #api.is-3d .ap__scene{position:absolute;inset:0;height:auto;margin:0}
  #api.is-3d .ap__wires{display:block}
  #api.is-3d .ap__cards{position:absolute;inset:0;display:block;pointer-events:none}
  #api.is-3d .ap__card{position:absolute;width:clamp(236px,20.5vw,286px);padding:14px 0 14px;pointer-events:auto;
    background:none;border:0;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  #api.is-3d .ap__card:before{display:block;content:"";position:absolute;inset:-26px -34px;left:-34px;top:-26px;width:auto;height:auto;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side,rgba(5,9,15,.82),rgba(5,9,15,.5) 62%,rgba(5,9,15,0))}
  #api.is-3d .ap__card.is-on{background:none;box-shadow:none}
  #api.is-3d .ap__card:nth-child(1){left:0;top:3%}
  #api.is-3d .ap__card:nth-child(2){right:0;top:31%}
  #api.is-3d .ap__card:nth-child(3){left:0;bottom:3%}
  #api.is-3d .ap__card:nth-child(2) .ap__ctop{flex-direction:row-reverse}
  #api.is-3d .ap__card:nth-child(2) .ap__ico{order:0}
  #api.is-3d .ap__card:nth-child(2) .ap__ctop:after{background:linear-gradient(270deg,var(--hair),rgba(216,166,70,.08))}
  #api.is-3d .ap__card:nth-child(2).is-on .ap__ctop:after{background:linear-gradient(270deg,var(--gold-2),rgba(216,166,70,.12))}
  #api.is-3d .ap__ct{font-size:clamp(1.5rem,1.9vw,1.9rem)}
  #api.is-3d .ap__card .body{max-width:none}
  /* la acción cierra la columna derecha, bajo el rótulo 02: equilibra la composición y entra en el pliegue */
  #api.is-3d .ap__ctas{position:absolute;right:var(--gut);bottom:calc(clamp(540px,70vh,660px) * .06);z-index:2;margin:0;justify-content:flex-end}
  #api.is-3d .ap__ctas2{position:absolute;right:0;top:calc(100% + 14px);flex-wrap:nowrap;justify-content:flex-end;width:max-content}
}
@media (min-width:768px) and (max-width:1199px){
  /* compacto: el diagrama y la fila de rótulos caben juntos en pantalla */
  #api.is-3d .ap__scene{height:clamp(320px,56vw,460px);height:clamp(320px,calc(100svh - 370px),460px)}
  #api.is-3d .ap__cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  #api.is-3d .ap__card{padding:18px}
  #api.is-3d .ap__ico{display:none}
}
@media (max-width:767px){
  /* el diagrama va en el flujo, encima de los rótulos: se desplaza con ellos y nunca tapa ninguno */
  #api.is-3d .ap__scene{position:relative;top:auto;z-index:auto;height:min(74vw,290px);height:clamp(236px,35svh,300px);margin-bottom:14px}
  #api.is-3d .ap__cards{gap:12px}
  #api.is-3d .ap__card .body{max-width:none}
  /* los rótulos pasan bajo el canvas que se repinta en cada cuadro: sin desenfoque de fondo (sobre negro no se nota y cuesta cuadros) */
  #api.is-3d .ap__card{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ============================================================
   MODO VIVO (común)
   ============================================================ */
#api.is-live .ap__li:before{display:none}
#api.is-live .ap__line{display:block}
#api.is-live .ap__left{position:relative;top:auto}
#api.is-live .ap__ctl{display:flex}
#api.is-live .ap__ph{display:none}
#api.is-live .ap__body{display:grid}
#api.is-live .ap__panel{grid-area:1/1;margin:0;padding:0;border:0;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .16s ease,transform .3s var(--ease),visibility 0s .16s}
#api.is-live .ap__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .2s,transform .75s var(--ease) .2s,visibility 0s .2s}
#api.is-live .ap__req .ch{opacity:.13;transition:opacity .18s linear}
#api.is-live .ap__req .ch.on{opacity:1}
#api.is-live .ap__req .ch.cur{position:relative}
#api.is-live .ap__req .ch.cur:after{content:"";position:absolute;left:100%;top:.08em;margin-left:2px;width:.5em;height:1.2em;border-radius:1px;
  background:var(--gold-2);box-shadow:0 0 10px rgba(244,213,138,.8);animation:ap-caret 1.05s steps(1) infinite}
#api.is-live .ap__lbl:not(.ap__lbl--res){transition:opacity .4s}
#api.is-live .ap__resw{opacity:.17;transform:translateY(6px);transition:opacity .3s ease,transform .5s var(--ease)}
#api.is-live .ap__resw:before{transform:scaleX(.08);transition:transform .9s var(--ease)}
#api.is-live .ap__lbl:not(.ap__lbl--res){opacity:1}
#api.is-live .ap__panel.is-res .ap__resw{opacity:1;transform:none;transition:opacity .6s ease .1s,transform .9s var(--ease) .1s}
#api.is-live .ap__panel.is-res .ap__resw:before{transform:scaleX(1)}
#api.is-live .ap__console:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:var(--gold-grad);transform-origin:left;transform:scaleX(var(--ap-p,0));opacity:.9}
/* reflejo de oro líquido que recorre el borde cuando llega la respuesta (una vuelta, una vez) */
@property --ap-a{syntax:"<angle>";inherits:true;initial-value:0deg}
#api .ap__sheen{display:none}
#api.is-live .ap__sheen{display:block;position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;--ap-a:0deg}
#api .ap__sheen:before,#api .ap__sheen:after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:conic-gradient(from calc(var(--ap-a) - 52deg) at 50% 50%,rgba(216,166,70,0) 0deg,rgba(216,166,70,0) 248deg,rgba(167,121,39,.38) 284deg,rgba(216,166,70,.9) 322deg,#F4D58A 346deg,#FFF6DC 357deg,rgba(255,246,220,0) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#api .ap__sheen:before{padding:1.5px}
#api .ap__sheen:after{padding:7px;filter:blur(7px);opacity:.5}
#api.is-live .ap__sheen.is-run{animation:ap-sheen 1.8s cubic-bezier(.45,.05,.2,1) both}
@keyframes ap-sheen{0%{--ap-a:0deg;opacity:0}6%{opacity:1}78%{opacity:1}100%{--ap-a:360deg;opacity:0}}
/* luz de oro líquido que sigue al puntero con inercia sobre el vidrio de la consola (solo escritorio) */
#api .ap__glint{display:none}
#api.is-pin .ap__glint{display:block;position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1s var(--ease)}
#api.is-pin .ap__glint.is-on{opacity:1}
#api .ap__glint i{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
#api .ap__glint i:first-child{width:560px;height:560px;margin:-280px 0 0 -280px;background:radial-gradient(closest-side,rgba(216,166,70,.21),rgba(216,166,70,.07) 52%,rgba(216,166,70,0))}
#api .ap__glint i:last-child{width:180px;height:180px;margin:-90px 0 0 -90px;background:radial-gradient(closest-side,rgba(255,246,220,.24),rgba(244,213,138,.1) 44%,rgba(244,213,138,0))}
@keyframes ap-caret{0%,55%{opacity:1}56%,100%{opacity:0}}
/* acuse de llegada del pulso: destello en el nodo destino y en el filete de la consola (una vez) */
#api.is-live .ap__li.is-hit .ap__node:after{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;animation:ap-hit .8s cubic-bezier(.16,1,.3,1) both}
#api.is-live .ap__console.is-hit:before{animation:ap-fillet 1.1s cubic-bezier(.16,1,.3,1) both}
@keyframes ap-hit{0%{box-shadow:0 0 0 0 rgba(244,213,138,.8),0 0 0 0 rgba(244,213,138,.4)}100%{box-shadow:0 0 0 24px rgba(244,213,138,0),0 0 0 44px rgba(244,213,138,0)}}
@keyframes ap-fillet{0%{opacity:1;transform:scaleX(1.3);box-shadow:0 0 24px 2px rgba(244,213,138,.95)}100%{opacity:.8;transform:none;box-shadow:0 0 0 0 rgba(244,213,138,0)}}

/* nodos según el estado */
#api.is-live .ap__li.is-on .ap__node{border-color:var(--gold-2);background:linear-gradient(rgba(216,166,70,.14),rgba(216,166,70,.14)),var(--ink-2);box-shadow:0 0 0 6px rgba(216,166,70,.08),0 0 28px rgba(216,166,70,.45)}
/* el nodo se llena de oro líquido: sube con ola y menisco, y se vacía al regresar */
#api.is-live .ap__node:before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4D58A'/%3E%3Cstop offset='.3' stop-color='%23D8A646'/%3E%3Cstop offset='1' stop-color='%23C9973A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 7Q10 1 20 7T40 7T60 7T80 7V64H0Z'/%3E%3Cpath fill='none' stroke='%23FFF6DC' stroke-opacity='.85' stroke-width='1.1' d='M0 7Q10 1 20 7T40 7T60 7T80 7'/%3E%3C/svg%3E") 0 37px/80px 64px repeat-x;transition:background-position 1.3s cubic-bezier(.33,0,.15,1)}
#api.is-live .ap__node b{position:relative;z-index:1}
#api.is-live .ap__li.is-done .ap__node{border-color:var(--gold)}
#api.is-live .ap__li.is-done .ap__node:before{background-position:-80px -12px}
#api.is-live .ap__li.is-done .ap__node b{color:var(--ink)}
/* el número cambia de tinta justo donde lo cubre el líquido: mismo recorrido, misma curva y misma duración que la ola */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  #api.is-live .ap__node b{position:absolute;inset:0;display:grid;place-items:center;color:transparent;-webkit-text-fill-color:transparent;
    background:linear-gradient(180deg,var(--gold-2) 33.333%,var(--ink) 33.333%) 0 4px/100% 300% no-repeat;-webkit-background-clip:text;background-clip:text;
    transition:background-position 1.3s cubic-bezier(.33,0,.15,1)}
  #api.is-live .ap__li.is-done .ap__node b{background-position:0 -45px}
}
#api.is-live .ap__li:not(.is-on) .ap__st{color:var(--cream-2)}
#api.is-live .ap__li:not(.is-on) .ap__sx{color:var(--mute)}
#api.is-live .ap__li:not(.is-on) .ap__chip{border-color:var(--line);color:var(--mute)}
#api.is-live .ap__li.is-on .ap__st{color:var(--gold-2)}
#api.is-live .ap__li.is-on .ap__sx{color:var(--cream)}
#api.is-live .ap__li.is-on .ap__chip{background:rgba(216,166,70,.1);border-color:var(--gold)}

/* ============================================================
   ESCRITORIO FIJADO
   ============================================================ */
#api.is-pin .ap__stage{height:100vh;min-height:560px;padding:calc(var(--nav-h) + 6px) 0 26px;display:flex;align-items:center}
#api.is-pin .ap__bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
#api.is-pin .ap__grid{align-items:center}
#api.is-pin .ap__step{padding-left:clamp(10px,1.2vw,18px);cursor:pointer}
#api.is-pin .ap__ind{position:absolute;left:0;right:0;top:0;height:100px;z-index:0;border-radius:var(--r-sm);pointer-events:none;
  background:linear-gradient(90deg,rgba(216,166,70,.11),rgba(216,166,70,.02) 70%,rgba(216,166,70,0));border:1px solid var(--hair);border-right-color:transparent;
  -webkit-mask-image:linear-gradient(90deg,#000 55%,transparent);mask-image:linear-gradient(90deg,#000 55%,transparent)}
#api.is-pin .ap__li:not(.is-on) .ap__step:hover .ap__st{color:var(--cream)}
#api.is-pin .ap__body{min-height:clamp(300px,50vh,470px);align-items:stretch}
#api.is-pin .ap__panel{display:flex;flex-direction:column}
#api.is-pin .ap__req{margin-bottom:clamp(14px,1.6vw,20px)}
#api.is-pin .ap__pause{display:none}
@media (min-width:900px) and (max-height:780px){
  #api.is-pin .ap__st{font-size:clamp(1.3rem,1.8vw,1.6rem)}
  #api.is-pin .ap__sx{font-size:.92rem;line-height:1.42}
  #api.is-pin .ap__sc{gap:6px}
  #api.is-pin .ap__step{padding-block:9px}
  #api.is-pin .ap__chip{min-height:28px;padding:4px 12px}
  #api.is-pin .ap__code{font-size:.82rem;line-height:1.58}
  #api.is-pin .ap__body{padding-block:16px 12px}
}

/* ============================================================
   ≤ 899px
   ============================================================ */
@media (max-width:899px){
  #api .ap__head{grid-template-columns:minmax(0,1fr);gap:26px;align-items:start}
  #api .ap__num{font-size:clamp(7.5rem,36vw,12rem)}
  #api .ap__headL{padding-top:clamp(5.8rem,27.5vw,9.2rem)}
  #api .ap__title{font-size:clamp(3.2rem,15.5vw,6rem)}
  #api .ap__cita p{max-width:none;font-size:clamp(1.55rem,6.6vw,2.2rem)}
  #api .ap__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  #api .ap__left{position:relative;top:auto}
  #api .ap__vid{opacity:.5;object-position:58% 38%}
  #api .ap__veil{background:linear-gradient(180deg,rgba(5,9,15,.8) 0%,rgba(5,9,15,.58) 16%,rgba(5,9,15,.8) 34%,rgba(5,9,15,.9) 100%)}
  #api .ap__host{justify-content:flex-start;font-size:.78rem;padding-inline:8px;gap:5px}
  #api .ap__host svg{width:13px;height:13px}
  #api .ap__bar{gap:8px;padding-inline:12px}
  #api .ap__env{padding-inline:9px;font-size:.75rem}
  #api .ap__dots{display:none}
  #api .ap__foot{flex-direction:column-reverse;align-items:stretch;gap:6px;padding-block:8px 14px}
  #api .ap__pie{line-height:1.5;font-size:.8125rem;letter-spacing:.02em;color:var(--cream-2)}
  #api .ap__sep{display:none}
  #api .ap__ctl{justify-content:space-between}
  #api .ap__lbl{font-size:.75rem;letter-spacing:.16em}
  #api .ap__chip code{font-size:.875rem}
  #api .ap__cards:before,#api .ap__card:before,#api .ap__card:after{display:none}
  #api .ap__after{margin-top:clamp(40px,8vw,64px)}
  #api .ap__ctas{flex-direction:column}
  #api .ap__ctas .btn{width:100%;white-space:normal;text-align:center}
  #api .ap__code{font-size:.875rem;line-height:1.66}

  /* pestañas */
  #api.is-tabs .ap__stage{padding-block:44px 52px}
  #api.is-tabs .ap__grid{gap:22px}
  #api.is-tabs .ap__steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  #api.is-tabs .ap__step{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 2px 6px;text-align:center;border-radius:10px}
  #api.is-tabs .ap__sc{display:block}
  #api.is-tabs .ap__st{display:block;font:700 .95rem/1.2 var(--sans);letter-spacing:0}
  #api.is-tabs .ap__step .ap__sx,#api.is-tabs .ap__step .ap__chip{display:none}
  #api.is-tabs .ap__node{width:44px;height:44px}
  #api.is-tabs .ap__node:before{background-position:0 41px}
  #api.is-tabs .ap__li.is-done .ap__node:before{background-position:-80px -12px}
  #api.is-tabs .ap__li.is-done .ap__node b{background-position:0 -49px}
  #api.is-tabs .ap__about{display:grid;gap:12px;justify-items:start;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
  #api.is-tabs .ap__about p{margin:0;font-size:1rem;line-height:1.5;color:var(--cream)}
  #api.is-tabs .ap__pause{display:inline-flex}
  #api.is-tabs .ap__ctl{flex-wrap:wrap;row-gap:4px}
  #api.is-tabs .ap__jump{display:flex;order:-1;flex:1 1 100%;position:relative;margin:0 -10px}
  #api.is-tabs .ap__jump:before{content:"";position:absolute;left:32px;right:32px;top:50%;height:1px;background:var(--hair);pointer-events:none}
  #api.is-tabs .ap__count{font-size:.86rem}
}
/* celular chico: la sección se compacta sin quitar nada (un paso a la vez en la consola, mismos textos) */
@media (max-width:759px){
  #api{padding-block:calc(var(--sec-y) * .75)}
  #api .ap__head{margin-bottom:20px}
  #api.is-tabs .ap__stage{padding-block:28px 32px}
  #api.is-tabs .ap__grid{gap:18px}
  /* el chip repetía la primera línea de la petición que está justo debajo */
  #api.is-tabs .ap__about{gap:0;margin-bottom:14px;padding-bottom:14px}
  #api.is-tabs .ap__about .ap__chip{display:none}
  #api .ap__code{font-size:.8125rem;line-height:1.58}
  #api.is-tabs .ap__resw{margin-top:12px;padding-top:12px}
  #api .ap__after{margin-top:28px}
  #api .ap__ctas{margin-top:24px}
}
@media (max-width:379px){
  #api .ap__host{font-size:.75rem;letter-spacing:-.02em;padding-inline:6px}
  #api .ap__env{padding-inline:7px;gap:5px;letter-spacing:.06em}
}

/* ---------- Movimiento reducido ---------- */
html.reduce #api .ap__vid{transform:none}
@media (prefers-reduced-motion:reduce){#api.is-live .ap__req .ch.cur:after,#api.is-live .ap__li.is-hit .ap__node:after,#api.is-live .ap__console.is-hit:before,#api.is-live .ap__sheen.is-run{animation:none}#api.is-live .ap__node:before,#api.is-live .ap__node b{transition:none}}