/* ===== Guías · ilustraciones animadas ===== */
.ga-fig{margin:26px 0 28px;padding:18px 18px 14px;border:1px solid var(--border);border-radius:16px;background:radial-gradient(120% 140% at 100% 0,rgba(231,189,90,.07),transparent 55%),var(--card);opacity:0;transform:translateY(12px);transition:opacity .6s,transform .7s cubic-bezier(.16,1,.3,1)}
.ga-fig.ga-in{opacity:1;transform:none}
.ga-hero{border-color:var(--border-gold)}
.ga-art svg{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;overflow:visible}
.ga-fig figcaption{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);font-size:.84rem;line-height:1.55;color:var(--text-2)}
.ga-art text{font-family:var(--mono);font-size:9px;fill:var(--text-muted)}
.ga-art .gc{text-anchor:middle}
.ga-art .gt{fill:var(--text);font-weight:700;font-size:9.5px}
.ga-art .gsm{font-size:8.5px}
.ga-art .gv{fill:var(--gold);font-weight:700}
.ga-art .gbox{fill:var(--bg-2);stroke:var(--border);stroke-width:1}
.ga-art .gbox-gold{stroke:var(--gold);fill:color-mix(in oklab,var(--gold) 10%,var(--bg-2))}
.ga-art .gg{fill:none;stroke:var(--border);stroke-width:1.2;stroke-dasharray:3 4}
.ga-art .gd{fill:var(--gold)}.ga-art .gs{fill:#5ad18a}.ga-art .ghot{fill:#e08a6a}.ga-art .gcold{fill:#6ab8e0}
.ga-art .gi{fill:var(--gold)}
.ga-art .gtr{fill:var(--bg-3,rgba(255,255,255,.05))}
.ga-art .gb{fill:var(--gold);transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.ga-art .gb2{fill:#c98a1e}.ga-art .gb3{fill:#8a6a2a}
.ga-art .gh{fill:var(--gold);transform-box:fill-box;transform-origin:bottom;transform:scaleY(0)}
.ga-art .gh.gb2{fill:#e0b36a}
.ga-art .gok{fill:#5ad18a}.ga-art .gbad{fill:#e08a6a}
.ga-art .gnext{fill:none;stroke:var(--gold);stroke-dasharray:3 3}
.ga-art .gv,.ga-art .gstep{opacity:0}
.ga-art .gp{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ga-art .gp2{stroke:#e08a6a}.ga-art .gp-dash{stroke-dasharray:none}
.ga-art .gz{opacity:0}.ga-art .gz-ok{fill:rgba(90,209,138,.14)}.ga-art .gz-no{fill:rgba(224,138,106,.16)}
.ga-art .gx{fill:var(--gold);opacity:0;transform-box:fill-box;transform-origin:center}
.ga-art .gchip{fill:var(--gold);transform-box:fill-box;transform-origin:bottom;transform:scaleY(.3);opacity:.85}
.ga-art .gled{fill:#5ad18a;opacity:.25}
.ga-art .gwave{fill:none;stroke:#e08a6a;stroke-width:2;stroke-linecap:round;opacity:0}
.ga-art .gsnd{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:0}
.ga-art .gliq{fill:rgba(106,184,224,.14)}
.ga-art .gbub{fill:none;stroke:#6ab8e0;stroke-width:1.2;opacity:0}

.ga-in .gb{animation:gaX .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.2s + var(--i,0)*.16s)}
.ga-in .gh{animation:gaY .8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(.2s + var(--i,0)*.14s)}
.ga-in .gv{animation:gaF .4s forwards;animation-delay:calc(.8s + var(--i,0)*.14s)}
.ga-in .gp{animation:gaL 1.6s cubic-bezier(.4,0,.2,1) .2s forwards}
.ga-in .gp2{animation-delay:.6s}
.ga-in .gz{animation:gaF .6s 1.3s forwards}
.ga-in .gx{animation:gaF .3s 1.5s forwards,gaBeat 1.8s 1.8s ease-in-out infinite}
.ga-in .gstep{animation:gaF .45s forwards;animation-delay:calc(.2s + var(--i)*.35s)}
.ga-in .gchip{animation:gaTune 2.8s cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(var(--i)*.06s)}
.ga-in .gled{animation:gaLed 2.4s steps(1) infinite;animation-delay:calc(var(--i)*.13s)}
.ga-in .gwave{animation:gaRise 2.4s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
.ga-in .gsnd{animation:gaSnd 1.8s ease-out infinite;animation-delay:calc(var(--i)*.3s)}
.ga-in .gbub{animation:gaBub 3.2s ease-in infinite;animation-delay:calc(var(--i)*.35s)}
@keyframes gaX{to{transform:scaleX(1)}}
@keyframes gaY{to{transform:scaleY(1)}}
@keyframes gaF{to{opacity:1}}
@keyframes gaL{to{stroke-dashoffset:0}}
@keyframes gaBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
@keyframes gaTune{0%{transform:scaleY(.3)}35%{transform:scaleY(1)}65%{transform:scaleY(.5)}100%{transform:scaleY(var(--h,.8))}}
@keyframes gaLed{0%{opacity:.25}50%{opacity:1}}
@keyframes gaRise{0%{opacity:0;transform:translateY(6px)}40%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
@keyframes gaSnd{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
@keyframes gaBub{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-62px)}}
@media (prefers-reduced-motion:reduce){
  .ga-fig{opacity:1;transform:none}
  .ga-art *{animation:none!important;opacity:1!important;transform:none!important;stroke-dashoffset:0!important}
  .ga-art circle[r="3.6"]{display:none}
}