/* Capítulo 04 · Medios (modo oscuro) */
#medios{min-height:100vh;min-height:100svh;display:grid;align-items:center;padding:88px 0 32px;position:relative;overflow:clip;
  background:radial-gradient(800px 520px at 90% 10%,rgba(122,33,233,.22),transparent 70%),radial-gradient(640px 480px at 0% 100%,rgba(0,180,255,.12),transparent 70%),var(--bg)}
.md{display:grid;gap:clamp(16px,3vh,30px)}
.md .h2{font-size:clamp(1.7rem,3vw,2.6rem);max-width:none}
.md-head{display:grid;gap:12px}
.mv{display:flex;gap:12px;height:clamp(470px,66vh,590px)}
.mv-c{position:relative;flex:1;min-width:0;border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--surface);overflow:hidden;display:flex;flex-direction:column;transition:flex .75s var(--ease),border-color .3s}
.mv-c.on{flex:6;border-color:rgba(176,120,255,.55);background:radial-gradient(520px 360px at 100% 0%,rgba(122,33,233,.3),transparent 70%),var(--surface)}
.mv-h{display:grid;gap:4px;text-align:left;padding:18px 24px 12px;width:100%;align-content:start}
.mv-h i{font-style:normal;font-size:.8rem;font-weight:800;color:var(--violet-l)}
.mv-h b{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.mv-st{display:flex;align-items:baseline;gap:12px;margin-top:2px}
.mv-st em{font-style:normal;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;letter-spacing:-.05em;line-height:1;background:var(--growth);-webkit-background-clip:text;background-clip:text;color:transparent}
.mv-st small{font-size:.8rem;color:var(--muted);font-weight:600;max-width:24ch}
.mv-c:not(.on) .mv-h{flex:1;min-height:0;grid-template-rows:auto 1fr;align-content:stretch}
.mv-c:not(.on) .mv-h b{writing-mode:vertical-rl;rotate:180deg;align-self:end;justify-self:start}
.mv-c:not(.on) .mv-st{display:none}
.mv-b{min-width:min(580px,86vw);padding:0 24px 20px;display:grid;gap:12px;opacity:0;pointer-events:none;transition:opacity .3s}
.mv-c.on .mv-b{opacity:1;pointer-events:auto;transition-delay:.35s}
.mv-c:not(.on) .mv-b{position:absolute;left:0;bottom:0}
.mv-lead{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.3;max-width:34ch}
.mv-note{font-size:.84rem;color:var(--muted);font-weight:600}
.mv-win{display:flex;flex-wrap:wrap;gap:8px}
.mv-win span{padding:9px 16px;border-radius:999px;border:1.5px solid rgba(0,223,125,.5);background:rgba(0,223,125,.1);font-weight:700;font-size:.86rem;color:#BFFBE0}
/* capacitaciones */
.mv-cap svg{display:block;width:100%;max-width:480px;height:auto;max-height:clamp(150px,24vh,210px);margin-inline:auto;overflow:visible}
.mv-ln{stroke:rgba(176,120,255,.6);stroke-width:2;stroke-dasharray:5 6;animation:mvdash 1.4s linear infinite}
@keyframes mvdash{to{stroke-dashoffset:-22}}
.mv-nd rect{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.3)}
.mv-nd text{fill:#fff;font:800 15px Montserrat,sans-serif}
.mv-cn circle{fill:url(#none);fill:#5B21C9;stroke:#B078FF;stroke-width:3}
.mv-cn text{fill:#fff;font:800 14px Montserrat,sans-serif}
/* exterior */
.mv-ext{display:grid;gap:18px;align-content:start}
.mv-fl{display:flex;align-items:center;gap:10px}
.mv-fn{flex:1;min-width:0;display:grid;gap:3px;text-align:center;padding:16px 10px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.mv-fn:nth-child(3){background:var(--cta);border-color:transparent}
.mv-fn b{font-weight:800;font-size:clamp(.9rem,1.5vw,1.15rem);letter-spacing:-.02em}
.mv-fn small{font-size:.74rem;font-weight:600;color:#D5DCEC}
.mv-ar{width:28px;flex:none;color:var(--violet-l);animation:mvnudge 1.6s ease-in-out infinite}
.mv-ar svg{width:100%}
@keyframes mvnudge{50%{translate:6px 0}}
/* entrada escalonada al abrir */
.mv-c.on .mv-br span,.mv-c.on .mv-win span,.mv-c.on .mv-fn,.mv-c.on .mv-nd{animation:mvin .6s var(--ease) both;animation-delay:calc(.45s + var(--i,0) * .07s)}
.mv-c.on .mv-one,.mv-c.on .mv-fun{animation:mvin .6s var(--ease) both;animation-delay:.9s}
.mv-c.on .mv-cn{animation:mvin .6s var(--ease) both;animation-delay:.4s}
@keyframes mvin{from{opacity:0;transform:translateY(12px)}}
@media (max-width:900px){
  #medios{min-height:0;padding:96px 0 56px}
  .mv{flex-direction:column;height:auto}
  .mv-c,.mv-c.on{flex:none}
  .mv-c:not(.on) .mv-h{display:flex;align-items:baseline;gap:14px}
  .mv-c:not(.on) .mv-h b{writing-mode:horizontal-tb;rotate:none;align-self:auto}
  .mv-c:not(.on) .mv-b{display:none}
  .mv-b{min-width:0}
  .mv-fl{flex-direction:column}.mv-ar{rotate:90deg;animation:none}
  .mv-fn{width:100%;flex:none}
}
@media (prefers-reduced-motion:reduce){.mv-ln,.mv-ar{animation:none}.mv-c.on *{animation:none!important}}

/* pestañas */
.mv-tg{display:flex;gap:6px;flex-wrap:wrap}
.mv-tg button{--c:#fff;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-weight:700;font-size:.82rem;transition:background-color .25s,color .25s,border-color .25s}
.mv-tg button:hover{border-color:var(--c)}
.mv-tg button[aria-selected="true"]{background:#fff;color:#171D20;border-color:#fff}
/* cobertura */
.mv-cob{display:grid;gap:14px}
.mv-tl{--c:#00B4FF;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mv-tl>span{display:grid;place-items:center;min-height:62px;padding:8px 12px;border-radius:14px;background:color-mix(in srgb,var(--c) 10%,transparent);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);font-weight:800;font-size:.95rem;text-align:center;animation:mvin .5s var(--ease) both;animation-delay:calc(var(--i) * .05s)}
.mv-gg{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-radius:14px;background:color-mix(in srgb,var(--c) 6%,transparent);border:1px dashed color-mix(in srgb,var(--c) 55%,transparent);animation:mvin .5s var(--ease) both;animation-delay:.35s}
.mv-gg>b{font-size:.95rem}
.mv-gg>div{display:flex;flex-wrap:wrap;gap:6px}
.mv-gg em{font-style:normal;font-size:.76rem;font-weight:700;padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent)}
/* comisiones */
.mv-usd{display:grid;gap:10px;align-content:start}
.mv-tb{display:grid;gap:6px}
.mv-th,.mv-tr{display:grid;grid-template-columns:1.5fr .7fr .9fr .9fr 1.6fr;gap:10px;align-items:center}
.mv-th{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 12px}
.mv-tr{padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line-2);animation:mvin .5s var(--ease) both;animation-delay:calc(var(--i) * .06s)}
.mv-tr b{font-size:.88rem;line-height:1.15}
.mv-tr .num{font-weight:800;font-size:.95rem}
.ag{--k:#B078FF}.md{--k:#00DF7D}.fx{--k:#E434E7}
.mv-tr span.ag{color:#C9A6FF}.mv-tr span.md{color:#4EF0A6}.mv-tr span.fx{color:#F27EF3}
.mv-mb{display:flex;align-items:center;gap:2px;min-width:0}
.mv-mb i{height:12px;width:var(--w);background:var(--k);border-radius:3px;min-width:0;scale:0 1;transform-origin:left;animation:mvgrow .8s var(--ease) .3s both}
.mv-mb i[style*="--w:0%"]{display:none}
.mv-mb em{font-style:normal;font-weight:800;font-size:.85rem;margin-left:8px;white-space:nowrap}
.mv-ft{font-size:.8rem;color:var(--muted);font-weight:600;max-width:60ch}
.mv-ft--hl{color:#E6D8FF;font-size:.92rem;padding:12px 16px;border-radius:12px;background:rgba(176,120,255,.14);border:1px solid rgba(176,120,255,.4)}
.mv-ac{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mv-ac>div{display:grid;gap:4px;padding:18px 16px;border-radius:16px;background:color-mix(in srgb,var(--c) 12%,transparent);border:1px solid color-mix(in srgb,var(--c) 50%,transparent);animation:mvin .5s var(--ease) both;animation-delay:calc(var(--i) * .08s)}
.mv-ac b{font-size:clamp(1.8rem,3vw,2.5rem);font-weight:800;letter-spacing:-.05em;color:var(--c);line-height:1}
.mv-ac small{font-size:.82rem;font-weight:700}
@keyframes mvgrow{to{scale:1 1}}
/* negociaciones */
.mv-neg{display:grid;gap:10px}
.mv-kp{display:flex;align-items:center;gap:12px}
.mv-kp>div{flex:1;display:grid;gap:2px;padding:9px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid var(--line);animation:mvin .5s var(--ease) both;animation-delay:calc(.4s + var(--i) * .1s)}
.mv-kp>div:last-child{background:var(--cta);border-color:transparent}
.mv-kp b{font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.mv-kp small{font-size:.74rem;font-weight:600;color:#D5DCEC}
.mv-kp>span{width:22px;flex:none;color:var(--violet-l)}
.mv-kp>span svg{width:100%}
.mv-cm{display:grid;gap:6px}
.mv-ch,.mv-cr{display:grid;grid-template-columns:.8fr 1fr 1.2fr;gap:10px;align-items:center}
.mv-ch{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:0 12px}
.mv-ch b:last-child{color:#4EF0A6}
.mv-cr{padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);font-size:.84rem;animation:mvin .5s var(--ease) both;animation-delay:calc(.7s + var(--i) * .08s)}
.mv-cr>b{font-size:.84rem}.mv-cr>span{color:var(--muted)}
.mv-cr>.mv-pm{color:#fff;font-weight:700;padding:3px 10px;border-radius:8px;background:rgba(0,223,125,.13);border:1px solid rgba(0,223,125,.4)}
@media (max-width:900px){.mv-tl{grid-template-columns:repeat(2,1fr)}.mv-th{display:none}.mv-tr{grid-template-columns:1fr 1fr 1fr 1fr}.mv-tr b,.mv-mb{grid-column:1/-1}.mv-ac{grid-template-columns:1fr}.mv-kp{flex-wrap:wrap}.mv-kp>span{display:none}.mv-ch{display:none}.mv-cr{grid-template-columns:1fr}}
/* Cuentas del exterior: ruta de pago por aliado */
.mv-rt{display:grid;grid-template-columns:auto 28px minmax(0,1fr);align-items:center;gap:12px}
.mv-or{min-width:128px;background:rgba(255,255,255,.1)}
.mv-ln2{width:28px;color:var(--violet-l)}.mv-ln2 svg{width:100%}
.mv-lanes{display:grid;gap:12px}
.mv-lane{display:flex;align-items:center;gap:10px}
.mv-al{flex:none;width:150px;background:var(--cta)!important;border-color:transparent!important}
.mv-pl{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.mv-lg{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 10px;border-radius:999px;background:#fff;color:#171D20;font-weight:800;font-size:.9rem}
.mv-lg svg{width:26px;height:26px;flex:none}
.mv-lane{animation:none}.mv-c.on .mv-lane{animation:mvin .6s var(--ease) both;animation-delay:calc(.45s + var(--i,0) * .12s)}
@media (max-width:720px){.mv-rt{grid-template-columns:1fr}.mv-ln2{rotate:90deg;margin:0 auto}.mv-lane{flex-wrap:wrap}}
/* indicador "+" en columnas cerradas */
.mv-c:not(.on)::after{content:"+";position:absolute;top:14px;right:12px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--cta);color:#fff;font-weight:800;font-size:1.1rem;line-height:1;pointer-events:none}
@media (max-width:760px){.mv-c:not(.on)::after{top:50%;translate:0 -50%}}
.mv-neg .mv-tg{margin-bottom:12px}
.mv-lg--t{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);padding:0 16px}
.mv-ext .mv-lg{min-height:40px;font-size:.84rem}
.mv-ext .mv-lg svg{width:22px;height:22px}
.mv-ext .mv-win span{font-size:.8rem;padding:6px 12px}
.mv-rt,.mv-lanes{gap:8px}
.mv-ext .mv-fn{padding:8px 12px}

/* Botón hacia los acuerdos por medio y página de negociaciones */
.mv-more{display:inline-flex;align-items:center;gap:8px;margin-top:10px;min-height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:.8rem;color:#fff;transition:border-color .2s,background-color .2s}
.mv-more:hover{border-color:var(--violet-l);background:rgba(255,255,255,.06)}.mv-more svg{width:16px;height:16px}
.ng{display:grid;gap:18px;padding:clamp(16px,2.4vw,28px) 0 60px}
.ng-head{display:grid;gap:12px;justify-items:start}.ng .pg-h1{font-size:clamp(2.2rem,4.6vw,3.8rem)}
.ng-f{display:flex;flex-wrap:wrap;gap:8px}
.ng-f button{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--line);font-weight:700;font-size:.86rem;color:var(--muted);transition:background-color .2s,color .2s,border-color .2s}
.ng-f button:hover{border-color:var(--violet-l);color:#fff}
.ng-f button[aria-pressed="true"]{background:var(--cta);border-color:transparent;color:#fff}
.ng-t{display:grid;border-radius:20px;border:1px solid var(--line);overflow:hidden;background:rgba(255,255,255,.03)}
.ng-r{display:grid;grid-template-columns:1.5fr 1.1fr 1.3fr 1.1fr 1.5fr .9fr;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line-2);font-size:.86rem;color:var(--muted);line-height:1.35}
.ng-r[hidden]{display:none}
.ng-r b{color:#fff;font-size:.92rem}
.ng-h{border-top:0;background:rgba(255,255,255,.05);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.ng-soon{display:inline-block;padding:3px 10px;border-radius:999px;border:1px dashed var(--muted-2);font-size:.74rem;font-weight:700;color:var(--muted-2)}
.ng-st{font-weight:700;color:#B078FF}
.ng-note{font-size:.84rem;color:var(--muted)}
@media (max-width:860px){
  .ng-h{display:none}
  .ng-r{grid-template-columns:1fr 1fr;gap:6px 12px}.ng-r b{grid-column:1/-1}
}
