/* Escenas de MECO de las demos pequeñas (9-oct-2026): mv-mapa y mv-ficha-parcela. Todos los selectores cuelgan de .mv-meco. */
.mv-meco { position:absolute; inset:0; overflow:hidden; background:#16221a; color:var(--ink) }
.mv-meco .mm-fondo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; max-width:none; filter:saturate(.92) contrast(1.03) }
.mv-meco .mm-fondo + .mm-svg, .mv-meco .mm-svg { position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none }
.mv-meco .mm-sec { fill:rgba(37, 81, 214, .10); stroke:#fff; stroke-width:2.2; stroke-dasharray:9 6; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 2px rgba(0, 0, 0, .65)); transition:opacity .9s var(--ease-ui) }
.mv-meco.mm-ini .mm-sec { opacity:0 }
.mv-meco .mm-p { fill:rgba(37, 81, 214, 0); stroke:rgba(255, 255, 255, .5); stroke-width:1; vector-effect:non-scaling-stroke; transition:fill .45s var(--ease-ui), stroke .45s var(--ease-ui), stroke-width .45s var(--ease-ui) }
.mv-meco .mm-p.on { fill:rgba(37, 81, 214, .36); stroke:#fff; stroke-width:2 }
.mv-meco .mm-m { fill:rgba(255, 196, 70, .30); stroke:rgba(255, 220, 130, .95); stroke-width:1.3; vector-effect:non-scaling-stroke; opacity:0; transition:opacity 1s var(--ease-ui) }
.mv-meco.mm-zon .mm-m, .mv-meco.mf-pulsa .mm-m { opacity:1 }
.mv-meco .mm-capa { position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(180deg, rgba(8, 12, 20, .30), rgba(8, 12, 20, 0) 30%, rgba(8, 12, 20, 0) 62%, rgba(8, 12, 20, .38)) }
.mv-meco .mm-c { position:absolute; left:0; top:0; display:grid; grid-template-columns:auto auto; column-gap:7px; padding:3px 8px 4px; border-radius:8px; background:rgba(255, 255, 255, .96); box-shadow:0 3px 14px rgba(0, 0, 0, .38);
  font:500 max(13px, calc(13 * var(--u)))/1.3 var(--sans); opacity:0; scale:.9; transition:opacity .3s var(--ease-ui), scale .4s var(--ease), transform .4s var(--ease) }
.mv-meco .mm-c b { font:600 max(13px, calc(13 * var(--u)))/1.3 var(--mono); letter-spacing:-.01em }
.mv-meco .mm-c i { font-style:normal; color:var(--acento); opacity:0; transition:opacity .3s var(--ease-ui) }
.mv-meco .mm-c span { grid-column:1 / -1; color:var(--ink-3) }
.mv-meco .mm-c.on { opacity:1; scale:1 } .mv-meco .mm-c.ok i { opacity:1 }
.mv-meco .mm-cred { position:absolute; right:10px; top:8px; z-index:3; font:500 max(13px, calc(13 * var(--u)))/1.3 var(--sans); color:#fff; text-shadow:0 1px 3px rgba(0, 0, 0, .8) }
.mv-meco .mm-sec-t { position:absolute; left:8px; top:8px; z-index:3; white-space:normal; max-width:calc(100% - 150px) }
.mv-meco .mm-cuenta, .mv-meco .mm-fin { position:absolute; right:8px; bottom:8px; z-index:3; white-space:normal; text-align:right; max-width:calc(100% - 190px); transition:opacity .4s var(--ease-ui) }
.mv-meco .mm-fin { opacity:0 } .mv-meco.mm-fin-on .mm-fin { opacity:1 } .mv-meco.mm-fin-on .mm-cuenta { opacity:0 }
.mv-meco .mm-zona { position:absolute; left:8px; bottom:54px; z-index:3; opacity:0; transition:opacity .6s var(--ease-ui); border-color:#e8b53c }
.mv-meco .mm-zona::before { content:""; width:.7em; height:.7em; border-radius:2px; background:rgba(255, 196, 70, .9); border:1px solid #c98f10 }
.mv-meco.mm-zon .mm-zona { opacity:1 }
/* ficha de la parcela */
.mv-meco .mf { position:absolute; inset:0; display:grid; grid-template-columns:50% 50%; background:#fff }
.mv-meco .mf-mapa { position:relative; overflow:hidden; background:#16221a }
.mv-meco .mf-mapa .mm-cred { right:6px; top:6px; font-size:max(13px, calc(13 * var(--u))) }
.mv-meco .mf-vec path { fill:none; stroke:rgba(255, 255, 255, .42); stroke-width:1; vector-effect:non-scaling-stroke }
.mv-meco .mf-p { fill:rgba(37, 81, 214, 0); stroke:#fff; stroke-width:2.2; vector-effect:non-scaling-stroke; transition:fill .5s var(--ease-ui); filter:drop-shadow(0 0 3px rgba(0, 0, 0, .6)) }
.mv-meco .mf-p.on { fill:rgba(37, 81, 214, .38) }
.mv-meco.mf-pulsa .mf-p { animation:mfpulso 1.1s var(--ease-ui) 1 }
@keyframes mfpulso { 0% { stroke-width:2.2 } 40% { stroke-width:5 } 100% { stroke-width:2.2 } }
.mv-meco .mf-ficha { padding:10px 12px 8px; display:flex; flex-direction:column; gap:2px; overflow:hidden }
.mv-meco .mf-cat, .mv-meco .mf-sit { margin:0; opacity:0; transform:translateY(5px); transition:opacity .4s var(--ease-ui), transform .5s var(--ease) }
.mv-meco .mf-cat { font:500 max(13px, calc(13 * var(--u)))/1.3 var(--mono); color:var(--ink-3) }
.mv-meco .mf-sit { font:600 max(13px, calc(13 * var(--u)))/1.3 var(--sans); color:var(--ink); margin-bottom:3px }
.mv-meco .mf-cat.on, .mv-meco .mf-sit.on { opacity:1; transform:none }
.mv-meco .mf-l { margin:0; display:grid; gap:2px }
.mv-meco .mf-f { opacity:0; transform:translateY(6px); transition:opacity .4s var(--ease-ui), transform .5s var(--ease); padding-bottom:2px; border-bottom:1px solid var(--line) }
.mv-meco .mf-f.on { opacity:1; transform:none }
.mv-meco .mf-f dt { font:500 max(13px, calc(13 * var(--u)))/1.25 var(--sans); color:var(--ink-3) }
.mv-meco .mf-f dd { margin:0; font:600 max(13px, calc(13 * var(--u)))/1.3 var(--sans) }
.mv-meco .mf-f.mono dd { font-family:var(--mono); letter-spacing:-.01em }
.mv-meco .mf-f.ok dd { color:var(--acento) }
.mv-meco .mf-f.inf { border-left:2px dashed #e8b53c; padding-left:6px }
.mv-meco .mf-nd { margin:auto 0 2px; font:500 max(13px, calc(13 * var(--u)))/1.3 var(--sans); color:var(--ink-3); opacity:0; transition:opacity .5s var(--ease-ui) }
.mv-meco.mf-nd-on .mf-nd { opacity:1 }
.mv-meco .mm-c.no { display:none }
/* pantalla estrecha: lo justo (el resumen ya dice el área del sector) */
.mv-meco.mm-estrecho .mm-sec-t { display:none }
.mv-meco.mm-estrecho .mm-zona { display:none }
.mv-meco.mm-estrecho .mf { grid-template-columns:40% 60% }
.mv-meco.mm-estrecho .mf-sit, .mv-meco.mm-estrecho .mf-nd, .mv-meco.mm-estrecho .mf-f.inf { display:none }
/* mv-cruce */
.mv-meco .mc-pgou { fill:rgba(150, 120, 230, .14); stroke:rgba(205, 190, 255, .95); stroke-width:1.6; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .8s var(--ease-ui) }
.mv-meco .mc-r2 { fill:rgba(18, 18, 24, .42); stroke:rgba(255, 255, 255, .8); stroke-width:1; vector-effect:non-scaling-stroke; opacity:0; transition:opacity .8s var(--ease-ui) }
.mv-meco .mc-p { fill:rgba(37, 81, 214, .40); stroke:#fff; stroke-width:2; vector-effect:non-scaling-stroke }
.mv-meco .mc-lin { stroke:#fff; stroke-width:2; stroke-dasharray:5 4; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 2px rgba(0, 0, 0, .7)); opacity:0; transition:opacity .6s var(--ease-ui) }
.mv-meco .mc-leg { position:absolute; left:8px; top:8px; z-index:3; display:flex; gap:5px; flex-wrap:wrap }
.mv-cruce .mm-cred { top:38px }
.mv-meco .mc-leg .mv-chip { opacity:0; transform:translateY(-4px); transition:opacity .4s var(--ease-ui), transform .5s var(--ease) }
.mv-meco .mc-leg i { flex:none; width:.8em; height:.8em; border-radius:2px }
.mv-meco .mc-leg .l1 { background:rgba(150, 120, 230, .6); border:1px dashed #cdbeff } .mv-meco .mc-leg .l2 { border:2px dashed #fff; background:rgba(37, 81, 214, .5) } .mv-meco .mc-leg .l3 { background:rgba(255, 196, 70, .85) }
.mv-meco .mc-dist { position:absolute; left:0; top:0; z-index:3; opacity:0; transition:opacity .5s var(--ease-ui) }
.mv-meco .mc-card { position:absolute; left:8px; right:8px; bottom:8px; z-index:5; display:grid; grid-template-columns:1fr 1fr; gap:5px; pointer-events:none }
.mv-meco .mc-c { padding:4px 9px 5px; border-radius:10px; background:rgba(255, 255, 255, .97); box-shadow:0 3px 14px rgba(0, 0, 0, .35); opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease-ui), transform .5s var(--ease) }
.mv-meco .mc-c b { display:block; font:600 max(13px, calc(13 * var(--u)))/1.25 var(--sans) }
.mv-meco .mc-c span { display:block; font:500 max(13px, calc(13 * var(--u)))/1.25 var(--sans); color:var(--ink-3) }
.mv-meco .mc-c.nd { background:rgba(244, 245, 247, .97) } .mv-meco .mc-c.nd b { color:var(--ink-3) }
.mv-meco.mc-1 .mc-pgou, .mv-meco.mc-4 .mc-r2, .mv-meco.mc-4 .mc-lin, .mv-meco.mc-4 .mc-dist { opacity:1 }
.mv-meco.mc-1 .mc-leg .mv-chip:nth-child(1), .mv-meco.mc-2 .mc-leg .mv-chip:nth-child(2), .mv-meco.mc-3 .mc-leg .mv-chip:nth-child(3) { opacity:1; transform:none }
.mv-meco.mc-3 .mm-m { opacity:1 }
.mv-meco.mc-5 .mc-c:nth-child(1), .mv-meco.mc-6 .mc-c:nth-child(2), .mv-meco.mc-7 .mc-c:nth-child(3), .mv-meco.mc-8 .mc-c:nth-child(4) { opacity:1; transform:none }
.mv-meco.mm-ini .mc-pgou, .mv-meco.mm-ini .mc-r2 { opacity:0 }
.mv-meco.mm-estrecho .mc-leg, .mv-meco.mm-estrecho .mc-c span, .mv-meco.mm-estrecho .mc-dist { display:none }

/* mv-agente (9-oct): un agente, cinco pasos. Un color (azul), un nombre y un verbo pegado al cursor; cero siglas; cada dato con su fuente en mono pequeño. */
.mv-meco.ma .ma-pg { fill:none; stroke:rgba(255, 255, 255, .55); stroke-width:1; vector-effect:non-scaling-stroke }
.mv-meco.ma .mm-sec { opacity:0 } .mv-meco.ma.ma-s4 .mm-sec { opacity:1 }
.mv-meco.ma .mm-m { opacity:0 } .mv-meco.ma.ma-s4 .mm-m { opacity:1 }
.mv-meco.ma .mm-capa { background:none; z-index:6 }      /* el cursor del agente va POR ENCIMA de las tarjetas */
.ma-paso { position:absolute; left:8px; top:8px; z-index:5; margin:0; display:flex; align-items:center; gap:7px; max-width:calc(100% - 130px); padding:4px 11px 4px 5px; border-radius:999px; background:#fff; box-shadow:0 2px 10px rgba(0, 0, 0, .28);
  font:600 max(13px, calc(13 * var(--u)))/1.3 var(--sans); color:var(--ink) }
.ma-paso b { display:grid; place-items:center; width:1.55em; height:1.55em; border-radius:50%; background:#2551d6; color:#fff; font-size:.92em }
.ma-paso small { display:none; font-weight:500; color:var(--ink-3) }
.mv-meco.ma[data-p="1"] .ma-paso small { display:inline }
.ma-card { position:absolute; z-index:5; margin:0; padding:8px 11px 9px; border-radius:11px; background:#fff; box-shadow:0 6px 22px rgba(0, 0, 0, .38); font:500 max(13px, calc(13 * var(--u)))/1.35 var(--sans);
  opacity:0; transform:translateY(8px) scale(.97); pointer-events:none; transition:opacity .35s var(--ease-ui), transform .5s var(--ease) }
.ma-card .ma-t { margin:0 0 5px; font-weight:600; color:var(--ink-3); font-size:.92em }
.ma-card code { display:block; margin-top:5px; font:500 max(12.5px, calc(12.5 * var(--u)))/1.3 var(--mono); color:var(--ink-3); background:#f1f2f5; padding:1px 6px; border-radius:5px; width:fit-content; max-width:100% }
.ma-busca { left:8px; top:calc(8px + 2.6em); width:min(64%, 330px) }
.mv-meco.ma.ma-s2 .ma-busca { opacity:1; transform:none }
.ma-q { margin:0; display:flex; align-items:center; gap:7px; padding:6px 9px; border-radius:8px; border:1.5px solid #2551d6; background:#f7f9ff; font-weight:600; min-height:1.9em }
.ma-q i { width:.8em; height:.8em; border-radius:50%; border:2px solid #2551d6; flex:none }
.ma-q span::after { content:""; display:inline-block; width:1.5px; height:1em; background:#2551d6; margin-left:2px; vertical-align:-.12em; animation:ma-cur .9s steps(1) infinite }
@keyframes ma-cur { 50% { opacity:0 } }
.ma-r { margin:7px 0 0; padding:7px 9px; border-radius:8px; background:rgba(37, 81, 214, .08); opacity:0; transform:translateY(5px); transition:opacity .4s var(--ease-ui), transform .5s var(--ease) }
.ma-busca.hecho .ma-r { opacity:1; transform:none }
.ma-r b { display:block; font-weight:600 } .ma-r small { display:block; color:var(--ink-3); font-size:.92em }
.ma-visor { right:8px; top:calc(8px + 2.6em); width:min(48%, 250px) }
.mv-meco.ma.ma-s3 .ma-visor { opacity:1; transform:none }
.ma-vm { height:calc(5.2 * 1em); border-radius:7px; overflow:hidden; border:1px solid var(--line); background:#eef1f6 } .ma-vm svg { width:100%; height:100%; display:block }
.ma-l { margin:6px 0 0; display:flex; align-items:center; gap:6px; font-weight:600 } .ma-l i { width:.9em; height:.9em; border-radius:3px; background:rgba(37, 81, 214, .35); border:1.5px solid #2551d6; flex:none }
.ma-c { margin:2px 0 0; color:var(--ink-3); font-size:.92em }
.ma-sector { right:8px; bottom:8px; width:min(60%, 300px) }
.mv-meco.ma.ma-s5 .ma-sector { opacity:1; transform:none }
.ma-sector ul { list-style:none; margin:0; padding:0; display:grid; gap:5px } .ma-sector li b { display:block; font-weight:600 } .ma-sector li code { margin-top:1px }
.ma-inf { margin:6px 0 0; padding-left:7px; border-left:2px dashed #e8b53c; color:var(--ink-3); font-size:.92em }
.mv-meco.ma.ma-s5 .ma-paso { }
.mv-meco.ma .mm-cred { z-index:3 }
.mv-meco.ma .mm-estrecho .ma-busca, .mv-meco.ma.mm-estrecho .ma-busca { width:calc(100% - 16px) }
.mv-meco.ma.mm-estrecho .ma-visor { width:min(58%, 220px) }
.mv-meco.ma.mm-estrecho .ma-sector { width:calc(100% - 16px) }
.mv-meco.ma.mm-estrecho .ma-inf { display:none }
@media (prefers-reduced-motion: reduce) { .ma-q span::after { animation:none } }
.mv-meco.ma .ma-pc em { grid-column:1 / -1; font-style:normal; color:var(--ink-3); font-size:.94em }
.ma-sector { width:min(52%, 270px); padding:7px 10px 8px } .ma-sector ul { gap:3px }
/* la ficha del sector, como una franja al pie: tres datos, cada uno con su fuente (9-oct) */
.ma-sector { left:8px; right:8px; bottom:36px; width:auto; padding:7px 10px 7px }
.ma-sector ul { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:4px 12px }
.ma-sector li b { font-size:.98em; line-height:1.25 } .ma-sector li code { margin-top:3px }
.ma-inf { margin:5px 0 0 }
.mv-meco.ma.mm-estrecho .ma-sector ul { grid-template-columns:1fr; gap:3px }
.mv-meco.ma.mm-estrecho .ma-sector li code { display:none } .mv-meco.ma.mm-estrecho .ma-sector { bottom:34px }