/* Cobertura — the coverage map (Cobertura.jsx). Page-scoped, like marcas.css
   and contacto.css. Monochrome throughout: the points are ink on the light
   band, so the section needs no colour to carry it. */

.mm-cobertura{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(40px,6vw,88px); align-items:center;
}

.mm-cobertura__title{
  margin:22px 0 0; font-family:var(--font-sans); font-weight:var(--fw-regular);
  font-size:clamp(30px,3.6vw,46px); line-height:1.04;
  letter-spacing:var(--tracking-title); text-transform:uppercase;
  color:var(--mm-ink); max-width:14ch; text-wrap:balance;
}
.mm-cobertura__title span{ font-weight:var(--fw-medium); }
.mm-cobertura__lede{
  margin:24px 0 0; font-family:var(--font-serif); font-size:18px; line-height:1.5;
  letter-spacing:-0.01em; color:var(--text-body); max-width:44ch;
}

.mm-cobertura__figs{
  margin:34px 0 0; display:flex; gap:clamp(28px,4vw,56px);
  border-top:1px solid var(--border-strong); padding-top:22px;
}
.mm-cobertura__figs div{ display:flex; flex-direction:column; }
.mm-cobertura__figs dt{
  font-family:var(--font-sans); font-weight:var(--fw-medium);
  font-size:clamp(34px,4vw,52px); line-height:1; letter-spacing:-0.035em;
  color:var(--mm-ink); font-variant-numeric:tabular-nums;
}
.mm-cobertura__figs dd{
  margin:9px 0 0; font-family:var(--font-sans); font-size:12px;
  font-weight:var(--fw-medium); letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-muted);
}

.mm-cobertura__paises{
  margin:26px 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:8px;
}
.mm-cobertura__paises li{
  font-family:var(--font-sans); font-size:12px; font-weight:var(--fw-medium);
  letter-spacing:.07em; text-transform:uppercase; color:var(--mm-ink);
  border:1px solid var(--border-strong); padding:6px 12px;
}

/* ── the map ─────────────────────────────────────────────────────────── */
/* The outline is an <img>; the plazas are an overlay positioned in percent,
   so both scale together at any column width without re-projecting. */
.mm-map{ position:relative; width:100%; }
.mm-map__base{
  display:block; width:100%; height:auto;
  /* The asset is a flat ink fill; opacity sets the tone, so the silhouette
     stays a soft wash that the plaza points can sit on top of without
     competing. Mexico only — see assets/maps/LEEME.md for why. */
  opacity:.12;
}
.mm-map__points{ position:absolute; inset:0; }
.mm-map__pt{
  position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px;
  border-radius:50%; background:var(--mm-ink); display:block;
  opacity:0; transform:scale(.4);
  transition:opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.mm-map.is-in .mm-map__pt{ opacity:1; transform:none; }
/* A named plaza lifts out of the field — whether it was hovered or came up in
   the ambient cycle. Raising z-index keeps its label above neighbouring points
   in the dense centre of the country. `.is-named` is driven from React so both
   routes light the point identically. */
.mm-map.is-in .mm-map__pt.is-named{ transform:scale(1.5); z-index:3; }

/* Replaces the native title tooltip, which is slow to appear and styled by the
   OS rather than the brand. */
.mm-map__label{
  position:absolute; left:15px; top:50%; transform:translateY(-50%);
  padding:4px 8px; white-space:nowrap; pointer-events:none;
  background:var(--mm-ink); color:var(--mm-white);
  font-family:var(--font-sans); font-size:11px; font-weight:var(--fw-medium);
  letter-spacing:.06em; text-transform:uppercase;
  opacity:0; transition:opacity 160ms var(--ease-out);
}
.mm-map__pt--flip .mm-map__label{ left:auto; right:15px; }
.mm-map__pt.is-named .mm-map__label{ opacity:1; }

.mm-cobertura__note{
  margin:22px 0 0; font-family:var(--font-sans); font-size:12.5px;
  line-height:1.5; color:var(--text-muted); max-width:46ch;
}

@media (max-width:860px){
  .mm-cobertura{ grid-template-columns:1fr; gap:40px; }
}
@media (prefers-reduced-motion:reduce){
  .mm-map__pt{ transition:none; opacity:1; transform:none; }
  /* The ambient cycle is switched off in JS for these visitors; hover still
     names a plaza, it just doesn't animate the point. */
  .mm-map__pt.is-named{ transform:none; }
  .mm-map__label{ transition:none; }
}