/* Explicaciones M6-2: todos los selectores bajo .m62-explain; hereda la paleta agua/bosque de expo.css con respaldo. */
.m62-explain{
  --m-agua:var(--agua,#62c8e8);--m-bosque:var(--bosque,#8fd6a0);--m-ocre:var(--ocre,#f2b84b);--m-lila:var(--lila,#c4b0f5);
  --m-coral:var(--coral,#f59a9a);--m-tx:var(--texto,#eaf4ef);--m-tx2:var(--texto-2,#a8c8bf);--m-panel:var(--panel,#123f3b);
  --m-panel2:var(--panel-2,#17504a);--m-linea:var(--linea,#2a5e57);--m-ink:var(--tinta-seg,#0b2a2b);
  box-sizing:border-box;display:flex;flex-direction:column;gap:10px;width:100%;max-width:100%;min-width:0;
  padding:clamp(10px,2.4vw,18px);border:1px solid var(--m-linea);border-radius:14px;
  background:linear-gradient(160deg,var(--m-panel) 0%,var(--m-panel2) 100%);
  color:var(--m-tx);font-family:var(--sans,"Segoe UI","Noto Sans",Arial,sans-serif);font-size:clamp(13px,12px + .25vw,15.5px);
  line-height:1.4;text-align:left;overflow-wrap:anywhere;container-type:inline-size
}
.m62-explain *,.m62-explain *::before,.m62-explain *::after{box-sizing:border-box}
.m62-explain p{margin:0}
.m62-explain .m62-head{display:flex;flex-direction:column;gap:3px;min-width:0}
.m62-explain .m62-kick{font-size:.76em;letter-spacing:.08em;text-transform:uppercase;color:var(--m-agua);font-weight:700}
.m62-explain .m62-title{font-family:var(--serif,Georgia,serif);font-size:clamp(1.08em,.9em + 1.2cqi,1.5em);font-weight:600;line-height:1.15;text-wrap:balance}
.m62-explain .m62-lede{color:var(--m-tx2);font-size:.92em;max-width:70ch}
.m62-explain .m62-svg{display:block;width:100%;height:auto;max-height:min(300px,42vh);min-height:0;overflow:visible}
.m62-explain .m62-t{font-family:var(--sans,"Segoe UI","Noto Sans",Arial,sans-serif);fill:var(--m-tx);font-size:17px;font-weight:600}
.m62-explain .m62-t-s{font-size:14px;font-weight:500;fill:var(--m-tx2)}
.m62-explain .m62-t-m{font-size:15px;font-weight:600}
.m62-explain .m62-t-h{font-size:18px;font-weight:700}
.m62-explain .m62-t-big{font-size:28px;font-weight:700;font-family:var(--serif,Georgia,serif)}
.m62-explain .m62-t-ink{fill:var(--m-ink);font-weight:700;font-size:19px}
.m62-explain .m62-t-muni{font-family:var(--serif,Georgia,serif);font-size:20px;font-weight:600}
.m62-explain .m62-box-front{fill:var(--m-panel2);stroke:var(--m-agua);stroke-width:2}
.m62-explain .m62-box-top{fill:var(--m-agua);opacity:.35}
.m62-explain .m62-box-side{fill:var(--m-bosque);opacity:.28}
.m62-explain .m62-flow{fill:none;stroke-width:2.6;stroke-linecap:round;opacity:.85}
.m62-explain .m62-axis{stroke:var(--m-tx2);stroke-width:2;fill:none}
.m62-explain .m62-tick{stroke:var(--m-tx2);stroke-width:1.5}
.m62-explain .m62-year{fill:var(--u01,#3fae72);fill-opacity:.22;stroke-width:1.5}
.m62-explain .m62-sep{stroke:var(--m-linea);stroke-width:1.5;stroke-dasharray:5 5}
.m62-explain .m62-cond{fill:var(--m-panel);stroke:var(--m-ocre);stroke-width:1.5}
.m62-explain .m62-link{stroke:var(--m-bosque);stroke-width:2.5;stroke-dasharray:1;fill:none;opacity:.8}
.m62-explain .m62-patch{opacity:.85}
.m62-explain .m62-gate{stroke:var(--m-ocre);stroke-width:3;fill:none;stroke-linecap:round}
.m62-explain .m62-fulcrum{fill:var(--m-tx2);opacity:.7}
.m62-explain .m62-beam{stroke:var(--m-tx);stroke-width:4;stroke-linecap:round}
.m62-explain .m62-slot{stroke:transparent;stroke-width:2.5}
.m62-explain .m62-slot-swap{stroke:var(--m-ocre)}
.m62-explain .m62-arrow{stroke:var(--m-ocre);stroke-width:2.5;fill:none;stroke-linecap:round}
.m62-explain .m62-base{fill:var(--m-bosque)}
.m62-explain .m62-aux{fill:none;stroke:var(--m-lila);stroke-width:2;stroke-dasharray:4 3}
.m62-explain .m62-mark{fill:var(--m-ocre);stroke:var(--m-ink);stroke-width:1.5}
.m62-explain .m62-frame{fill:none;stroke:var(--m-linea);stroke-width:1.5;stroke-dasharray:3 6}
.m62-explain .m62-muni{fill:var(--m-tx2);fill-opacity:.12;stroke:var(--m-tx2);stroke-opacity:.5;stroke-width:1.5}
.m62-explain .m62-band{stroke:var(--m-agua);stroke-opacity:.32;stroke-width:44;stroke-linecap:round;fill:none}
.m62-explain .m62-bandchip{fill:var(--m-panel);stroke:var(--m-agua);stroke-width:1.5}
.m62-explain .m62-cover{fill:none;stroke:var(--u14,#aeb9f7);stroke-width:2.5;stroke-dasharray:1}
/* Draw de una pasada: pathLength=1, dasharray 1; estado final = trazo completo. Los punteados se recuperan al final. */
.m62-explain .m62-draw{stroke-dasharray:1;stroke-dashoffset:0}
.m62-explain .m62-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px;min-width:0}
.m62-explain .m62-cards-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr))}
.m62-explain .m62-card{min-width:0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--m-panel) 70%,transparent);
  border:1px solid var(--m-linea);border-left:5px solid var(--uc,var(--m-bosque));display:flex;flex-direction:column;gap:3px}
.m62-explain .m62-card-h{font-size:.95em}
.m62-explain .m62-card-h b{font-weight:700}
.m62-explain .m62-card-n b{font-family:var(--serif,Georgia,serif);font-size:1.25em}
.m62-explain .m62-card-n span{color:var(--m-tx2);font-size:.86em}
.m62-explain .m62-card-d{color:var(--m-tx2);font-size:.86em;line-height:1.35}
.m62-explain .m62-u01{border-left:3px solid var(--u01,#3fae72);padding-left:6px}
.m62-explain .m62-u03{border-left:3px solid var(--u03,#93d69a);padding-left:6px}
.m62-explain .m62-row{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.m62-explain .m62-chip{display:inline-block;max-width:100%;padding:4px 10px;border-radius:999px;font-size:.84em;line-height:1.3;
  border:1px solid var(--m-linea);background:color-mix(in srgb,var(--m-panel) 80%,transparent);color:var(--m-tx)}
.m62-explain .m62-chip-muted{color:var(--m-tx2)}
.m62-explain .m62-chip-warn{border-color:var(--m-ocre);border-radius:10px}
.m62-explain .m62-chip-x{text-decoration:line-through;text-decoration-color:var(--m-coral);color:var(--m-tx2)}
.m62-explain .m62-note{font-size:.84em;color:var(--m-tx2)}
.m62-explain .m62-foot{font-size:.76em;color:var(--m-tx2);border-top:1px dashed var(--m-linea);padding-top:6px}

/* Animación única (≤ 6 s). Sólo keyframes "from": sin animación, todo queda visible en su estado final. */
@keyframes m62-in{from{opacity:0;transform:translateY(8px)}}
@keyframes m62-fade{from{opacity:0}}
@keyframes m62-grow{from{transform:scaleX(0);opacity:.2}}
@keyframes m62-pop{from{transform:scale(.4);opacity:0}}
@keyframes m62-draw{from{stroke-dashoffset:1}}
@keyframes m62-settle{0%{transform:rotate(-7deg)}55%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes m62-dash{from{stroke-dasharray:1}to{stroke-dasharray:.012 .012}}
.m62-explain .m62-a{animation:m62-in .6s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.m62-explain svg .m62-a{animation-name:m62-fade}
.m62-explain .m62-grow{transform-box:fill-box;transform-origin:left center;animation:m62-grow .7s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
.m62-explain .m62-pop{transform-box:fill-box;transform-origin:center;animation:m62-pop .5s cubic-bezier(.3,1.4,.5,1) var(--d,0s) both}
.m62-explain .m62-draw{animation:m62-draw .9s ease-out var(--d,0s) both}
.m62-explain .m62-link.m62-draw,.m62-explain .m62-cover.m62-draw{animation:m62-draw .8s ease-out var(--d,0s) both,m62-dash .4s linear calc(var(--d,0s) + .8s) forwards}
.m62-explain .m62-link:not(.m62-draw),.m62-explain .m62-cover:not(.m62-draw){stroke-dasharray:.012 .012}
.m62-explain .m62-settle{transform-box:view-box;transform-origin:320px 102px;animation:m62-settle 1.6s ease-out var(--d,0s) both}
/* Estático: reducedMotion o preferencia del sistema → nada se mueve, todo visible; los punteados conceptuales se conservan. */
.m62-explain.m62-static *,.m62-explain.m62-static *::before,.m62-explain.m62-static *::after{animation:none!important;transition:none!important}
.m62-explain.m62-static .m62-link,.m62-explain.m62-static .m62-cover{stroke-dasharray:.012 .012}
@media (prefers-reduced-motion:reduce){
  .m62-explain *,.m62-explain *::before,.m62-explain *::after{animation:none!important;transition:none!important}
  .m62-explain .m62-link,.m62-explain .m62-cover{stroke-dasharray:.012 .012}
}
@container (max-width:460px){
  .m62-explain .m62-svg{max-height:none}
  .m62-explain .m62-lede{font-size:.88em}
}