/* Verlumia · mapa.css — apartado "Mapa" (globo mundial). Todo escopado bajo
   .mapa-stage para no colisionar con el sistema del sitio. Escena oscura inmersiva
   (planetario) en ambos temas por diseño. Sin inline, sin CDN (CSP estricta). */
.mapa-stage{
  --g-ink:#E7EDF7; --g-ink-2:#AFBED8; --g-muted:#8695AD;
  --g-navy:#10213F; --g-steel:#4F6180; --g-teal:#0E9E8F;
  --g-hairline:#26395A; --g-surface:#0E1D34;
  position:relative; height:calc(100vh - 108px); min-height:540px;
  overflow:hidden; background:radial-gradient(circle at 50% 45%,#0c1526 0%,#040812 100%);
  color:var(--g-ink); font-family:var(--sans); border-top:1px solid var(--g-hairline);
}
.mapa-stage #globe{position:absolute;inset:0;cursor:grab}
.mapa-stage #globe:active{cursor:grabbing}
.mapa-stage .country{cursor:pointer;transition:filter .15s}
.mapa-stage .country:hover{filter:brightness(1.35)}
.mapa-stage .mx-beacon{pointer-events:none}

/* título */
.mapa-stage .g-head{position:absolute;top:20px;left:24px;z-index:10;max-width:340px;pointer-events:none}
.mapa-stage .g-head .eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--g-ink-2)}
.mapa-stage .g-head h1{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:.3rem 0 .2rem;color:#fff;line-height:1.15}
.mapa-stage .g-head p{font-size:.82rem;color:var(--g-ink-2);margin:0;line-height:1.5}
.mapa-stage .g-head .controls{margin-top:.9rem;pointer-events:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.mapa-stage .pill{background:rgba(255,255,255,.06);border:1px solid var(--g-hairline);color:var(--g-ink);
  font-family:var(--sans);font-size:.76rem;font-weight:600;padding:.45em .9em;border-radius:20px;cursor:pointer;transition:all .15s}
.mapa-stage .pill:hover{background:var(--g-teal);border-color:var(--g-teal);color:#04312c}

/* leyenda */
.mapa-stage .g-legend{position:absolute;left:24px;bottom:22px;z-index:10;background:rgba(14,29,52,.82);
  backdrop-filter:blur(8px);border:1px solid var(--g-hairline);border-radius:12px;padding:.9rem 1rem;max-width:320px}
.mapa-stage .g-legend .lg-row{display:flex;align-items:center;gap:.6rem;font-size:.76rem;color:var(--g-ink-2);margin:.35rem 0}
.mapa-stage .g-legend .ramp{width:120px;height:11px;border-radius:6px;background:linear-gradient(90deg,#3a4a66,#8fa0bd);flex:none}
.mapa-stage .g-legend .beacon{width:13px;height:13px;border-radius:50%;background:var(--g-teal);box-shadow:0 0 8px 2px rgba(14,158,143,.7);flex:none}
.mapa-stage .g-legend .lg-cap{font-size:.7rem;color:var(--g-muted);margin-top:.5rem;border-top:1px solid var(--g-hairline);padding-top:.5rem;line-height:1.45}

/* panel de lectura */
.mapa-stage .g-panel{position:absolute;top:0;right:0;height:100%;width:360px;max-width:86%;z-index:20;
  background:var(--g-surface);border-left:1px solid var(--g-hairline);
  box-shadow:-18px 0 48px rgba(0,0,0,.45);transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto;padding:1.6rem 1.5rem}
.mapa-stage .g-panel.open{transform:translateX(0)}
.mapa-stage .g-panel .close{position:absolute;top:14px;right:16px;background:none;border:none;color:var(--g-ink-2);font-size:1.4rem;cursor:pointer;line-height:1}
.mapa-stage .g-panel .p-eyebrow{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--g-steel)}
.mapa-stage .g-panel h2{font-family:var(--serif);font-weight:500;font-size:1.6rem;margin:.3rem 0 1rem;color:#fff}
.mapa-stage .g-block{border:1px solid var(--g-hairline);border-radius:12px;padding:1rem 1.1rem;margin-bottom:1rem;background:rgba(255,255,255,.02)}
.mapa-stage .g-block .b-lab{display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--g-ink-2);border:1px solid var(--g-hairline);border-radius:6px;padding:.2em .55em}
.mapa-stage .g-block.measured{border-top:3px solid var(--g-teal)}
.mapa-stage .g-block.context{border-top:3px solid var(--g-steel)}
.mapa-stage .g-block h3{font-family:var(--sans);font-size:1rem;font-weight:600;margin:.7rem 0 .3rem;color:var(--g-ink)}
.mapa-stage .g-block .big{font-family:var(--serif);font-size:2rem;font-weight:500;color:#fff;line-height:1}
.mapa-stage .g-block .big.teal{color:var(--g-teal)}
.mapa-stage .g-block .unit{font-size:.9rem;color:var(--g-muted)}
.mapa-stage .g-block p{font-size:.82rem;color:var(--g-ink-2);margin:.4rem 0 0;line-height:1.5}
.mapa-stage .g-block .lineage{font-size:.72rem;color:var(--g-muted);margin-top:.6rem;border-top:1px solid var(--g-hairline);padding-top:.55rem;font-variant-numeric:tabular-nums}
.mapa-stage .g-block .tdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g-teal);margin-right:6px}
.mapa-stage .g-drill{display:inline-block;margin:.2rem 0 .4rem;font-size:.82rem;font-weight:600;color:var(--g-teal);text-decoration:none;border:1px solid var(--g-teal);border-radius:8px;padding:.5em .9em;transition:all .15s}
.mapa-stage .g-drill:hover{background:var(--g-teal);color:#04312c}
.mapa-stage .g-empty{font-size:.86rem;color:var(--g-ink-2);line-height:1.6}
.mapa-stage .g-empty b{color:var(--g-ink)}
.mapa-stage .g-note{font-size:.72rem;color:var(--g-muted);margin-top:1.2rem;border-top:1px solid var(--g-hairline);padding-top:.7rem;line-height:1.5}
@media(max-width:640px){.mapa-stage .g-head{max-width:60%}.mapa-stage .g-head h1{font-size:1.2rem}}

/* ===== Home · globo como portada (mapa + info esencial; sin cifra de país pegada) ===== */
.mapa-stage--home{height:min(84vh,800px);min-height:560px}
.mapa-stage .g-cta{margin-top:.9rem;pointer-events:auto;display:flex;gap:.5rem;flex-wrap:wrap}
.mapa-stage .g-cta__pri{background:#E7EDF7;color:#10213F;font-family:var(--sans);font-weight:600;font-size:.82rem;text-decoration:none;padding:.55em 1.05em;border-radius:8px;transition:background .15s}
.mapa-stage .g-cta__pri:hover{background:#fff}
.mapa-stage .g-cta__ghost{border:1px solid var(--g-hairline);color:var(--g-ink);font-family:var(--sans);font-weight:600;font-size:.82rem;text-decoration:none;padding:.55em 1.05em;border-radius:8px;transition:border-color .15s}
.mapa-stage .g-cta__ghost:hover{border-color:var(--g-steel)}
@media(max-width:760px){
  .mapa-stage--home{height:auto;min-height:0}
  .mapa-stage--home #globe{position:relative;height:66vh;min-height:380px}
  .mapa-stage--home .g-head{position:static;padding:20px 24px 0;max-width:none}
  .mapa-stage--home .g-legend{position:static;margin:0 24px 20px;max-width:none}
}