/* El puente en 3D — título centrado arriba, puente al medio, método abajo */
.p3d{padding:0!important;background:radial-gradient(55% 60% at 20% 55%,rgba(201,44,119,.16),transparent 70%),radial-gradient(55% 60% at 80% 55%,rgba(0,166,202,.16),transparent 70%),var(--bg)}
.p3d__pin{position:relative;height:100svh;min-height:620px;overflow:hidden}
.p3d__stage{position:absolute;inset:0}
.p3d__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1s var(--ease)}
.is-3d .p3d__canvas{opacity:1}
.p3d__fallback{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:min(70vw,640px);opacity:0;transition:opacity .6s}
.no-webgl .p3d__fallback{opacity:1}
.no-webgl .p3d__canvas,.no-webgl .p3d__loading,.no-webgl .p3d__tag{display:none}
.p3d__loading{position:absolute;left:50%;top:54%;transform:translateX(-50%);display:flex;gap:12px;align-items:center;font:500 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);transition:opacity .5s}
.p3d__loading i{width:16px;height:16px;border:1.5px solid rgba(250,250,250,.2);border-top-color:var(--g1);border-radius:50%;animation:p3dspin 1s linear infinite}
.is-3d .p3d__loading{opacity:0;pointer-events:none}
@keyframes p3dspin{to{transform:rotate(360deg)}}

.p3d__head{position:absolute;left:0;right:0;top:0;z-index:2;text-align:center;padding:calc(var(--nav-h) + 26px) var(--pad) 60px;
  background:linear-gradient(180deg,rgba(10,10,11,.92) 0%,rgba(10,10,11,.55) 62%,transparent);pointer-events:none}
.p3d__head .kicker{justify-content:center}
.p3d__head h2{font:900 clamp(2.2rem,5vw,4.4rem)/1.02 var(--sans);letter-spacing:-.02em;margin:12px 0 0}

.p3d__tag{position:absolute;left:0;top:0;z-index:2;font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink);
  padding:8px 12px;border-radius:999px;background:rgba(10,10,11,.75);border:1px solid var(--line-2);white-space:nowrap;pointer-events:none;transition:opacity .3s}
.p3d__tag--l{border-color:rgba(255,107,35,.55)}
.p3d__tag--r{border-color:rgba(0,166,202,.6)}

.p3d__copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:70px var(--pad) clamp(24px,4vh,40px);
  background:linear-gradient(0deg,rgba(10,10,11,.94) 0%,rgba(10,10,11,.72) 55%,transparent);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
.p3d__copy>*{pointer-events:auto}
.p3d__steps{list-style:none;margin:0;padding:0;position:relative;width:min(560px,100%);min-height:112px}
.p3d__steps li{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.p3d__steps li.is-on{opacity:1;transform:none}
.p3d__steps .pn{font:700 .8rem/1 var(--mono);letter-spacing:.14em}
.p3d__steps h3{font:800 clamp(1.5rem,2.4vw,2.1rem)/1.1 var(--sans);margin:10px 0 8px}
.p3d__steps p{color:var(--ink-soft);margin:0 auto;max-width:460px;font-family:var(--body)}
.p3d__dots{display:flex;gap:8px;margin-top:14px}
.p3d__dots i{width:26px;height:3px;border-radius:2px;background:var(--line-2);transition:background .4s}
.p3d__dots i.on{background:var(--spectrum)}
.p3d__host{position:absolute;left:max(var(--pad),calc(50% - 600px));bottom:clamp(36px,8vh,86px);width:clamp(110px,11vw,160px);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.p3d__host .bmascot{display:block;width:100%;aspect-ratio:1}
.p3d__host b{font:500 .68rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:2px}

.no-pin3d .p3d__pin{height:auto;min-height:0;display:flex;flex-direction:column}
.no-pin3d .p3d__head,.no-pin3d .p3d__copy{position:static;background:none}
.no-pin3d .p3d__stage{position:relative;height:60svh;order:1}
.no-pin3d .p3d__copy{order:2}
.no-pin3d .p3d__steps{min-height:0;display:grid;gap:22px}
.no-pin3d .p3d__steps li{position:static;opacity:1;transform:none}
.no-pin3d .p3d__host,.no-pin3d .p3d__dots{display:none}

@media (max-width:720px){
  .p3d__pin{min-height:560px}
  .p3d__head{padding:calc(var(--nav-h) + 6px) var(--pad) 40px}
  .p3d__head h2{font-size:1.9rem}
  .p3d__copy{padding:46px var(--pad) 18px;align-items:stretch;text-align:left}
  .p3d__steps{width:auto;min-height:116px}
  .p3d__steps li{left:88px}
  .p3d__steps h3{font-size:1.35rem;margin:6px 0 4px}
  .p3d__steps p{font-size:.88rem;margin:0}
  .p3d__dots{margin-left:88px}
  .p3d__host{left:calc(var(--pad) - 12px);bottom:30px;width:92px}
  .p3d__tag{font-size:.56rem;padding:6px 9px}
}