/* ============================================================
   MOVEO · "Cómo funciona el pin" — explicador visual
   Sirve como POPUP (aviso que se cierra) y como PESTAÑA.
   Todo bajo .mv-howto / .mv-howto-overlay (no choca).
   ============================================================ */
.mv-howto, .mv-howto *{ box-sizing:border-box; }
.mv-howto{
  --sand:#F2EBDE;--sand-2:#E8DFCC;--sand-3:#D8CDB6;--paper:#F7F2E9;
  --ink:#1A1A1A;--espresso:#3F352B;--taupe:#A89B85;--olive:#6B6A4E;--rule:#C9BFAD;--gold:#B8924A;--blue:#6f8fae;
  --serif:'Cormorant Garamond',Garamond,serif;--sans:'Jost','Helvetica Neue',Arial,sans-serif;--mono:'JetBrains Mono',monospace;--ease:cubic-bezier(.22,1,.36,1);
  font-family:var(--sans);font-weight:300;color:var(--espresso);-webkit-font-smoothing:antialiased
}
.mv-howto .mvh-eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--olive)}
.mv-howto h2{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:clamp(1.5rem,3.4vw,2.1rem);margin:.25em 0 0;line-height:1.05}
.mv-howto .mvh-lede{color:var(--olive);font-size:14.5px;margin:9px 0 0;max-width:56ch}

.mv-howto .mvh-steps{display:grid;gap:12px;grid-template-columns:1fr;margin-top:22px}
@media(min-width:560px){.mv-howto .mvh-steps{grid-template-columns:1fr 1fr}}
.mv-howto .mvh-step{display:flex;gap:13px;align-items:center;background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.mv-howto .mvh-ix{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--sand);font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mv-howto .mvh-tx b{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ink);display:block}
.mv-howto .mvh-tx span{font-size:12.5px;color:var(--olive)}
.mv-howto .mvh-demo{margin-left:auto;flex-shrink:0}
.mv-howto .mvh-rings{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.mv-howto .mvh-rings i{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--espresso)}
.mv-howto .mvh-rings .r{width:16px;height:16px;border-radius:50%;border:2px solid #fff;box-shadow:inset 0 0 0 1px var(--rule)}
.mv-howto .mvh-rings .r.b{border-color:var(--blue);box-shadow:none}.mv-howto .mvh-rings .r.g{border-color:var(--gold);box-shadow:none}

/* pin */
.mv-howto .pin{position:relative;perspective:480px}
.mv-howto .dot{position:relative;border-radius:50%}
.mv-howto .dot .disc{position:absolute;inset:0;border-radius:50%;background:center/cover no-repeat var(--sand-3);border:2px solid var(--ink)}
.mv-howto .dot .ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff}
.mv-howto .dot.alto .ring{border-color:var(--gold);box-shadow:0 0 9px -2px var(--gold)}.mv-howto .dot.creators .ring{border-color:var(--gold);box-shadow:0 0 9px -2px var(--gold)}.mv-howto .dot.verif .ring{border-color:var(--blue)}
.mv-howto .dot .code{position:absolute;right:-3px;bottom:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--paper);border:2px solid #fff;color:var(--ink);font-family:var(--mono);font-size:8px;display:flex;align-items:center;justify-content:center;z-index:3}
.mv-howto .dot .rate{position:absolute;right:-6px;top:calc(100% + 3px);display:inline-flex;align-items:center;gap:2px;background:var(--ink);color:var(--sand);border:1px solid var(--sand);border-radius:999px;padding:1px 6px;font-family:var(--mono);font-size:8px;white-space:nowrap;z-index:4}
.mv-howto .dot .rate b{color:var(--gold)}
.mv-howto .dot.flat{width:calc(32px + var(--t,.5)*26px);height:calc(32px + var(--t,.5)*26px)}
.mv-howto .dot.flat .disc{box-shadow:0 calc(3px + var(--t,.5)*6px) calc(6px + var(--t,.5)*9px) -3px rgba(60,45,20,.4)}
.mv-howto .dot.orb{width:60px;height:60px;transform-style:preserve-3d;transform:rotateY(-18deg) rotateX(12deg);animation:mvh-spin 7s ease-in-out infinite}
.mv-howto .dot.orb .disc{overflow:hidden;box-shadow:inset -14px -16px 30px rgba(0,0,0,.55),inset 12px 10px 22px rgba(255,255,255,.35)}
.mv-howto .dot.orb .disc::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(120% 120% at 70% 80%,rgba(20,15,8,.6),transparent 55%)}
.mv-howto .dot.orb .spec{position:absolute;left:17%;top:11%;width:46%;height:38%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.95),transparent 70%);transform:translateZ(12px)}
.mv-howto .dot.orb .ring{transform:translateZ(8px)}.mv-howto .dot.orb .code{transform:translateZ(20px)}.mv-howto .dot.orb .rate{transform:translateZ(16px)}
@keyframes mvh-spin{0%,100%{transform:rotateY(-20deg) rotateX(12deg)}50%{transform:rotateY(20deg) rotateX(12deg)}}

/* interactivo */
.mv-howto .mvh-try{margin-top:20px;background:#2c3138;border:1px solid var(--rule);border-radius:16px;padding:20px;position:relative;overflow:hidden}
.mv-howto .mvh-stage{height:140px;display:flex;align-items:center;justify-content:center}
.mv-howto .mvh-ctl{display:flex;align-items:center;gap:14px;margin-top:6px}
.mv-howto .mvh-sc{font-family:var(--serif);font-size:1.5rem;color:#fff;min-width:70px}.mv-howto .mvh-sc b{color:var(--gold)}
.mv-howto .mvh-tier{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-left:4px}
.mv-howto .mvh-slider{-webkit-appearance:none;flex:1;height:4px;border-radius:999px;background:#4a5058}
.mv-howto .mvh-slider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer}
.mv-howto .mvh-unlock{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold);border-radius:999px;padding:4px 11px;opacity:0;transition:opacity .3s}
.mv-howto .mvh-unlock.show{opacity:1}

.mv-howto .mvh-roles{display:grid;gap:12px;grid-template-columns:1fr;margin-top:16px}
@media(min-width:560px){.mv-howto .mvh-roles{grid-template-columns:1fr 1fr}}
.mv-howto .mvh-role{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:14px 16px}
.mv-howto .mvh-role b{font-family:var(--serif);font-size:1.1rem;color:var(--ink)}
.mv-howto .mvh-role p{font-size:12.5px;color:var(--olive);margin:4px 0 0}
@media (prefers-reduced-motion:reduce){.mv-howto .dot.orb{animation:none}}

/* ====== POPUP (aviso que se cierra) ====== */
.mv-howto-overlay{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(26,26,26,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease,ease)}
.mv-howto-overlay.open{opacity:1;pointer-events:auto}
.mv-howto-modal{position:relative;width:min(720px,100%);max-height:88vh;overflow:auto;
  background:#F2EBDE;border:1px solid #C9BFAD;border-radius:22px;padding:30px 28px;
  box-shadow:0 50px 90px -40px rgba(26,26,26,.6);transform:translateY(10px) scale(.98);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.mv-howto-overlay.open .mv-howto-modal{transform:none}
.mv-howto-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid #C9BFAD;background:#F7F2E9;color:#3F352B;font-size:18px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:2}
.mv-howto-x:hover{background:#E8DFCC}