/* Guía Braiins · esquemas animados (sustituyen a las capturas) */
.gb-fig{margin:22px 0;display:grid;gap:10px}
.gb-box{position:relative;border:1px solid var(--border);border-radius:16px;background:radial-gradient(120% 100% at 100% 0,rgba(231,189,90,.07),transparent 60%),var(--card);padding:clamp(16px,3vw,26px);overflow:hidden}
.gb-fig figcaption{font-size:.8rem;line-height:1.5;color:var(--text-muted);text-wrap:pretty}
.gb-tag{font:600 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.gb-mono{font-family:var(--mono,ui-monospace,monospace)}
/* --- 1 · acceso --- */
.gb-acc{display:grid;gap:14px;max-width:460px;margin:0 auto}
.gb-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg-2,#111)}
.gb-step .n{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--mono,monospace);color:var(--gold);border:1px solid var(--border-gold,#3a2f16)}
.gb-step b{display:block;font-size:.92rem;color:var(--text)}
.gb-step small{display:block;font-size:.78rem;color:var(--text-muted);margin-top:2px}
.gb-ok{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#0a0a0c;background:#4ade80;transform:scale(0)}
.gb-tok{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 10px;border:1px dashed var(--border-gold,#3a2f16);border-radius:8px;font:600 .8rem/1 var(--mono,monospace);color:var(--gold);overflow:hidden}
.gb-tok i{font-style:normal;display:inline-block;clip-path:inset(0 100% 0 0);white-space:nowrap}
.gb-warn{font-size:.74rem;color:#f59e0b;margin-top:6px;opacity:0}
.gb-acc .gb-step:nth-child(1) .gb-ok{animation:gbPop 9s infinite}
.gb-acc .gb-step:nth-child(2) .gb-tok i{animation:gbType 9s infinite}
.gb-acc .gb-step:nth-child(2) .gb-warn{animation:gbWarn 9s infinite}
.gb-acc .gb-step:nth-child(2) .gb-ok{animation:gbPop2 9s infinite}
.gb-acc .gb-step:nth-child(3) .gb-ok{animation:gbPop3 9s infinite}
.gb-acc .gb-step{animation:gbFocus 9s infinite}
.gb-acc .gb-step:nth-child(2){animation-name:gbFocus2}.gb-acc .gb-step:nth-child(3){animation-name:gbFocus3}
@keyframes gbPop{0%,10%{transform:scale(0)}14%{transform:scale(1.2)}17%,90%{transform:scale(1)}95%,100%{transform:scale(0)}}
@keyframes gbType{0%,20%{clip-path:inset(0 100% 0 0)}42%,90%{clip-path:inset(0 0 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes gbWarn{0%,40%{opacity:0}46%,90%{opacity:1}95%,100%{opacity:0}}
@keyframes gbPop2{0%,50%{transform:scale(0)}54%{transform:scale(1.2)}57%,90%{transform:scale(1)}95%,100%{transform:scale(0)}}
@keyframes gbPop3{0%,70%{transform:scale(0)}74%{transform:scale(1.2)}77%,90%{transform:scale(1)}95%,100%{transform:scale(0)}}
@keyframes gbFocus{0%,1%{border-color:var(--border)}3%,15%{border-color:var(--gold)}18%,100%{border-color:var(--border)}}
@keyframes gbFocus2{0%,18%{border-color:var(--border)}21%,55%{border-color:var(--gold)}58%,100%{border-color:var(--border)}}
@keyframes gbFocus3{0%,58%{border-color:var(--border)}61%,75%{border-color:var(--gold)}78%,100%{border-color:var(--border)}}
/* --- 2 · puja --- */
.gb-bid{display:grid;gap:8px}
.gb-bid-h,.gb-row{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:10px}
.gb-bid-h{margin-bottom:4px}
.gb-row>div{min-width:0}
.gb-lab{display:block;font:600 9.5px/1.3 var(--mono,monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.gb-src,.gb-dst{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:9px;font:600 .8rem/1.2 var(--mono,monospace);overflow:hidden;white-space:nowrap}
.gb-src{border:1px solid var(--border);color:var(--text)}
.gb-dst{border:1px solid var(--border);background:var(--bg-2,#111);color:var(--gold)}
.gb-src span,.gb-dst span{overflow:hidden;text-overflow:ellipsis}
.gb-dst span{clip-path:inset(0 100% 0 0)}
.gb-arr{height:2px;background:linear-gradient(90deg,var(--border),var(--border));position:relative;align-self:end;margin-bottom:19px}
.gb-arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--text-muted);border-right:0}
.gb-arr i{position:absolute;top:-2px;left:0;width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:0}
.gb-lock{display:inline-flex;align-items:center;gap:5px;margin-left:6px;padding:2px 7px;border-radius:99px;border:1px solid #6b5324;color:#f59e0b;font-size:9px;letter-spacing:.08em}
.gb-res{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:11px 14px;border:1px solid #2f5d3f;border-radius:11px;opacity:0}
.gb-res b{font-size:.88rem;color:var(--text)}
.gb-res .gb-dot{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.16)}
.gb-res span{font-size:.8rem;color:var(--text-muted)}
@media(max-width:560px){.gb-bid-h{display:none}.gb-row{grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:6px}.gb-src,.gb-dst{padding:0 8px;font-size:.72rem}}
@media(prefers-reduced-motion:reduce){
  .gb-fig *{animation:none!important}
  .gb-ok{transform:scale(1)}.gb-tok i,.gb-dst span{clip-path:none}.gb-warn,.gb-res{opacity:1}
}
.gb-row:nth-of-type(2) .gb-dst span{animation:gbF0 11s infinite}
.gb-row:nth-of-type(2) .gb-src{animation:gbS0 11s infinite}
.gb-row:nth-of-type(2) .gb-dst{animation:gbD0 11s infinite}
.gb-row:nth-of-type(2) .gb-arr i{animation:gbA0 11s infinite}
@keyframes gbF0{0%,10%{clip-path:inset(0 100% 0 0)}15%,90%{clip-path:inset(0 0 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes gbS0{0%,5%{border-color:var(--border)}6%,15%{border-color:var(--gold)}17%,100%{border-color:var(--border)}}
@keyframes gbD0{0%,9%{border-color:var(--border)}10%,16%{border-color:var(--gold)}18%,100%{border-color:var(--border)}}
@keyframes gbA0{0%,6%{left:0;opacity:0}7%{opacity:1}10%{left:calc(100% - 6px);opacity:1}11%,100%{opacity:0}}
.gb-row:nth-of-type(3) .gb-dst span{animation:gbF1 11s infinite}
.gb-row:nth-of-type(3) .gb-src{animation:gbS1 11s infinite}
.gb-row:nth-of-type(3) .gb-dst{animation:gbD1 11s infinite}
.gb-row:nth-of-type(3) .gb-arr i{animation:gbA1 11s infinite}
@keyframes gbF1{0%,23%{clip-path:inset(0 100% 0 0)}28%,90%{clip-path:inset(0 0 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes gbS1{0%,18%{border-color:var(--border)}19%,28%{border-color:var(--gold)}30%,100%{border-color:var(--border)}}
@keyframes gbD1{0%,22%{border-color:var(--border)}23%,29%{border-color:var(--gold)}31%,100%{border-color:var(--border)}}
@keyframes gbA1{0%,19%{left:0;opacity:0}20%{opacity:1}23%{left:calc(100% - 6px);opacity:1}24%,100%{opacity:0}}
.gb-row:nth-of-type(4) .gb-dst span{animation:gbF2 11s infinite}
.gb-row:nth-of-type(4) .gb-src{animation:gbS2 11s infinite}
.gb-row:nth-of-type(4) .gb-dst{animation:gbD2 11s infinite}
.gb-row:nth-of-type(4) .gb-arr i{animation:gbA2 11s infinite}
@keyframes gbF2{0%,36%{clip-path:inset(0 100% 0 0)}41%,90%{clip-path:inset(0 0 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes gbS2{0%,31%{border-color:var(--border)}32%,41%{border-color:var(--gold)}43%,100%{border-color:var(--border)}}
@keyframes gbD2{0%,35%{border-color:var(--border)}36%,42%{border-color:var(--gold)}44%,100%{border-color:var(--border)}}
@keyframes gbA2{0%,32%{left:0;opacity:0}33%{opacity:1}36%{left:calc(100% - 6px);opacity:1}37%,100%{opacity:0}}
.gb-row:nth-of-type(5) .gb-dst span{animation:gbF3 11s infinite}
.gb-row:nth-of-type(5) .gb-src{animation:gbS3 11s infinite}
.gb-row:nth-of-type(5) .gb-dst{animation:gbD3 11s infinite}
.gb-row:nth-of-type(5) .gb-arr i{animation:gbA3 11s infinite}
@keyframes gbF3{0%,49%{clip-path:inset(0 100% 0 0)}54%,90%{clip-path:inset(0 0 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes gbS3{0%,44%{border-color:var(--border)}45%,54%{border-color:var(--gold)}56%,100%{border-color:var(--border)}}
@keyframes gbD3{0%,48%{border-color:var(--border)}49%,55%{border-color:var(--gold)}57%,100%{border-color:var(--border)}}
@keyframes gbA3{0%,45%{left:0;opacity:0}46%{opacity:1}49%{left:calc(100% - 6px);opacity:1}50%,100%{opacity:0}}
.gb-row:nth-of-type(6) .gb-dst span{animation:gbF4 11s infinite}
.gb-row:nth-of-type(6) .gb-src{animation:gbS4 11s infinite}
.gb-row:nth-of-type(6) .gb-dst{animation:gbD4 11s infinite}
.gb-row:nth-of-type(6) .gb-arr i{animation:gbA4 11s infinite}
@keyframes gbF4{0%,62%{clip-path:inset(0 100% 0 0)}67%,90%{clip-path:inset(0 0 0 0)}95%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes gbS4{0%,57%{border-color:var(--border)}58%,67%{border-color:var(--gold)}69%,100%{border-color:var(--border)}}
@keyframes gbD4{0%,61%{border-color:var(--border)}62%,68%{border-color:var(--gold)}70%,100%{border-color:var(--border)}}
@keyframes gbA4{0%,58%{left:0;opacity:0}59%{opacity:1}62%{left:calc(100% - 6px);opacity:1}63%,100%{opacity:0}}
.gb-res{animation:gbR 11s infinite}
@keyframes gbR{0%,74%{opacity:0;transform:translateY(6px)}78%,90%{opacity:1;transform:none}95%,100%{opacity:0}}