/* ============================================================
   MOVEO · Marcador completo (banderín + pin) — autónomo
   Todo bajo .mv-marker (no choca). Incluye:
     · PIN: foto + aro fino de estado + iniciales + ★ + crece + 3D a 5★
     · BANDERÍN: bocadillo crema con ✕ y viento, colgando del círculo
   ============================================================ */
.mv-marker, .mv-marker *{ box-sizing:border-box; }
.mv-marker{
  --ink:#1A1A1A; --sand:#F2EBDE; --sand2:#E8DFCC; --paper:#F7F2E9; --sand3:#D8CDB6;
  --gold:#B8924A; --blue:#6f8fae; --rule:#C9BFAD; --taupe:#A89B85; --espresso:#3F352B;
  --serif:'Cormorant Garamond',Garamond,serif; --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace; --ease:cubic-bezier(.22,1,.36,1);
  position:relative; display:inline-flex; flex-direction:column; align-items:center;
}

/* ---------- PIN ---------- */
.mv-pin{ --t:.6; perspective:600px; }
.mv-pin__dot{ position:relative; border-radius:50%; }
/* línea interior NEGRA y discreta (separa la foto), para que resalte el aro de color */
.mv-pin__disc{ position:absolute; inset:0; border-radius:50%; background:center/cover no-repeat var(--sand3); border:2px solid var(--ink); }
/* "pie" del pin (la punta que lo clava en el mapa) */
.mv-pin__tip{ position:absolute; left:50%; bottom:-6px; width:12px; height:12px; background:#fff;
  transform:translateX(-50%) rotate(45deg); border-bottom-right-radius:3px; z-index:-1;
  box-shadow:2px 2px 5px -2px rgba(60,45,20,.35); }
.mv-pin__dot.orb .mv-pin__tip{ width:13px; height:13px; bottom:-7px; }
/* aro de ESTADO = el que resalta: blanco (sin verificar) · azul (verificado) · oro (VIP) */
.mv-pin__ring{ position:absolute; inset:-2px; border-radius:50%; border:2px solid #fff; }
.mv-pin--verif .mv-pin__ring{ border-color:var(--blue); }
.mv-pin--alto  .mv-pin__ring{ border-color:var(--gold); box-shadow:0 0 8px -2px var(--gold); }   /* alto rendimiento */
.mv-pin--creators .mv-pin__ring{ border-color:var(--gold); box-shadow:0 0 8px -2px var(--gold); } /* creators (mismo oro) */
.mv-pin__code{ position:absolute; right:-3px; bottom:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:999px;
  background:var(--paper); border:2px solid #fff; color:var(--ink); font-family:var(--mono); font-size:9px;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px rgba(0,0,0,.25); z-index:3; }
.mv-pin__rate{ position:absolute; right:-7px; top:calc(100% + 4px); display:inline-flex; align-items:center; gap:3px;
  background:var(--ink); color:var(--sand); border:1px solid var(--sand); border-radius:999px; padding:2px 7px;
  font-family:var(--mono); font-size:9px; white-space:nowrap; box-shadow:0 4px 9px -3px rgba(0,0,0,.5); z-index:4; }
.mv-pin__rate b{ color:var(--gold); font-weight:400; }
.mv-pin__rate::before{ content:""; position:absolute; left:50%; top:-5px; width:2px; height:5px; background:var(--sand); transform:translateX(-50%); }
/* plano (crece) */
.mv-pin__dot.flat{ width:calc(40px + var(--t)*32px); height:calc(40px + var(--t)*32px); transition:width .18s var(--ease), height .18s; }
.mv-pin__dot.flat .mv-pin__disc{ box-shadow:0 calc(3px + var(--t)*7px) calc(6px + var(--t)*11px) -3px rgba(60,45,20,.4); }
/* orbe 3D (5★) */
.mv-pin__dot.orb{ width:70px; height:70px; transform-style:preserve-3d; transform:rotateY(-18deg) rotateX(12deg); animation:mv-spin 7s ease-in-out infinite; }
.mv-pin__dot.orb .mv-pin__disc{ overflow:hidden; box-shadow:inset -16px -18px 36px rgba(0,0,0,.55), inset 14px 12px 26px rgba(255,255,255,.35); }
.mv-pin__dot.orb .mv-pin__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-pin__spec{ display:none; }
.mv-pin__dot.orb .mv-pin__spec{ display:block; position:absolute; left:17%; top:11%; width:46%; height:38%; border-radius:50%; pointer-events:none; transform:translateZ(12px); background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,255,255,0) 70%); }
.mv-pin__dot.orb .mv-pin__ring{ transform:translateZ(8px); }
.mv-pin__dot.orb .mv-pin__code{ transform:translateZ(22px); }
.mv-pin__dot.orb .mv-pin__rate{ transform:translateZ(18px); }
@keyframes mv-spin{ 0%,100%{ transform:rotateY(-20deg) rotateX(12deg); } 50%{ transform:rotateY(20deg) rotateX(12deg); } }

/* ---------- BANDERÍN (cuelga del círculo) ---------- */
/* --mv-bscale: tamaño del banderín (1 = normal). MÁS GRANDE de lejos (zoom bajo,
   ~9) y se va encogiendo al acercarte, sin bajar de ~0.85 para que siga legible.
   IMPORTANTE: escala la TIPOGRAFÍA (font-size), NO transform:scale, para que el
   texto se redibuje NÍTIDO a cualquier tamaño (sin desenfoque). */
.mv-bub{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; z-index:6; pointer-events:auto; }
.mv-bub__sail{ display:inline-block; transform-origin:left center; animation:mv-unfurl .5s var(--ease) both; }
.mv-bub__banner{ position:relative; display:inline-flex; align-items:center; gap:.42em; white-space:nowrap;
  background:linear-gradient(160deg, var(--paper), var(--sand2)); color:var(--ink); font-family:var(--sans);
  font-size:calc(12px * var(--mv-bscale,1)); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:.92em 2em .75em 1.83em; clip-path:polygon(0 0, 100% 0, calc(100% - 1em) 50%, 100% 100%, 0 100%);
  transform-origin:left center; filter:drop-shadow(0 .8em 1.3em rgba(60,45,20,.35)); animation:mv-wind 2.8s ease-in-out .6s 4; }
.mv-bub__banner b{ font-family:var(--serif); font-weight:600; font-size:1.5em; color:var(--ink); }
.mv-bub__close{ position:absolute; top:.33em; left:.58em; border:0; background:none; color:var(--taupe); font-size:.83em; line-height:1;
  cursor:pointer; padding:2px; opacity:.7; transition:color .15s var(--ease), opacity .15s var(--ease); }
.mv-bub__close:hover{ color:var(--ink); opacity:1; }
.mv-bub__pole{ width:2px; height:calc(22px * var(--mv-bscale,1)); background:var(--ink); border-radius:2px; }
@keyframes mv-unfurl{ 0%{transform:scaleX(0)} 70%{transform:scaleX(1.04)} 100%{transform:scaleX(1)} }
@keyframes mv-wind{ 0%{transform:rotate(0) skewY(0) scaleY(1)} 20%{transform:rotate(1.2deg) skewY(-4deg) scaleY(1.02)}
  40%{transform:rotate(-.8deg) skewY(2.6deg) scaleY(.99)} 60%{transform:rotate(1deg) skewY(-3deg) scaleY(1.01)}
  80%{transform:rotate(-.5deg) skewY(1.6deg) scaleY(1)} 100%{transform:rotate(0) skewY(0) scaleY(1)} }

@media (prefers-reduced-motion:reduce){
  .mv-pin__dot.orb{ animation:none; }
  .mv-bub__banner{ animation:none; } .mv-bub__sail{ animation:none; transform:scaleX(1); }
}