/* ===================================================================
   NOREX — Mapa de cobertura nacional (home)
   Marcado generado por site/templates/coverage-map.js
=================================================================== */

:root{
  --map-red: #D92D3A;
  --map-red-glow: rgba(217,45,58,.35);
  --map-land: #E6EBF3;
  --map-covered: #C6D5EF;
  --map-border: #FFFFFF;
}

/* ---------- Layout ---------- */
.cov__head{
  display:grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 4vw, 4rem);
  align-items:end;
  margin-bottom: clamp(1.8rem, 1.4rem + 1.6vw, 2.8rem);
}
.cov__head .lead{ margin:0; }
.cov__grid{
  display:grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}
@media (max-width: 980px){
  .cov__head, .cov__grid{ grid-template-columns: 1fr; }
}

/* ---------- Cifras ---------- */
.cov-stats{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1rem; margin:0;
}
.cov-stats > div{
  display:flex; flex-direction: column-reverse; justify-content: flex-end; gap:.35rem;
  border-left: 3px solid var(--map-red);
  padding-left: .85rem;
}
.cov-stats dd{ margin:0; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); font-weight:800; line-height:1; color: var(--ink); }
.cov-stats dt{ font-size:.8rem; line-height:1.35; color: var(--ink-70); }

/* ---------- Tarjeta del mapa ---------- */
.cov-map{
  margin:0;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  padding: clamp(1rem, .6rem + 1.6vw, 2rem);
}

.cov-map__canvas{ position: relative; width:100%; }
.cov-map__svg{ display:block; width:100%; height:100%; overflow: visible; }

.cov-state{
  fill: var(--map-land);
  stroke: var(--map-border);
  stroke-width: 1.2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill .2s var(--ease);
}
.cov-state.is-covered{ fill: var(--map-covered); }

/* ---------- Pines ---------- */
.cov-map__pins{ position:absolute; inset:0; }

.cov-pin{
  position:absolute;
  width:22px; height:22px;
  margin:-11px 0 0 -11px;           /* centra el pin en la coordenada */
  z-index:1;
}
.cov-pin:hover, .cov-pin.is-active{ z-index:3; }
.cov-pin.is-office{ z-index:2; }

.cov-pin__dot{
  position:absolute; inset:5px;
  border-radius:50%;
  background: var(--map-red);
  box-shadow: 0 0 0 2px var(--white), 0 2px 6px var(--map-red-glow);
  transition: transform .18s var(--ease);
}
.cov-pin.is-office .cov-pin__dot{ inset:2px; box-shadow: 0 0 0 3px var(--white), 0 3px 10px var(--map-red-glow); }
.cov-pin.is-office .cov-pin__dot::after{        /* centro blanco: "diana" de oficina */
  content:""; position:absolute; inset:5px; border-radius:50%; background: var(--white);
}

.cov-pin:hover .cov-pin__dot,
.cov-pin.is-active .cov-pin__dot{ transform: scale(1.3); }

/* Pulso: siempre en la oficina; en el resto solo al resaltar */
.cov-pin::before{
  content:""; position:absolute; inset:2px; border-radius:50%;
  border: 2px solid var(--map-red);
  opacity:0; pointer-events:none;
}
.cov-pin.is-office::before{ animation: cov-pulse 2.6s ease-out infinite; }
.cov-pin.is-active::before,
.cov-pin:hover::before{ animation: cov-pulse 1.4s ease-out infinite; }

@keyframes cov-pulse{
  0%  { transform: scale(.8); opacity:.7; }
  100%{ transform: scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .cov-pin::before{ animation:none !important; }
}

/* ---------- Etiquetas ---------- */
.cov-pin__label{
  position:absolute;
  white-space:nowrap;
  font-size:.72rem; font-weight:700; letter-spacing:.005em;
  color: var(--ink);
  padding:.18em .5em;
  border-radius: 999px;
  text-shadow: 0 0 3px var(--white), 0 0 3px var(--white), 0 0 6px var(--white);
  transition: background .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
  pointer-events:none;
}
.cov-pin__label em{
  font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color: var(--map-red); margin-left:.35em;
}
.cov-pin__label--right { left: calc(100% - 2px); top:50%; transform: translateY(-50%); }
.cov-pin__label--left  { right: calc(100% - 2px); top:50%; transform: translateY(-50%); }
.cov-pin__label--top   { bottom: calc(100% - 2px); left:50%; transform: translateX(-50%); }
.cov-pin__label--bottom{ top: calc(100% - 2px); left:50%; transform: translateX(-50%); }

.cov-pin:hover .cov-pin__label,
.cov-pin.is-active .cov-pin__label{
  background: var(--ink); color: var(--white); text-shadow:none;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.4);
}
.cov-pin:hover .cov-pin__label em,
.cov-pin.is-active .cov-pin__label em{ color: #FF9AA2; }

/* En pantallas chicas solo queda visible la etiqueta de la oficina */
@media (max-width: 640px){
  .cov-pin{ width:18px; height:18px; margin:-9px 0 0 -9px; }
  .cov-pin__dot{ inset:4px; }
  .cov-pin:not(.is-office):not(.is-active) .cov-pin__label{ opacity:0; }
  .cov-pin__label{ font-size:.66rem; }
}

/* ---------- Leyenda ---------- */
.cov-map__legend{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem;
  margin-top: 1.1rem; padding-top: 1rem;
  border-top: 1px solid var(--slate-100);
  font-size:.8rem; color: var(--ink-70);
}
.cov-map__legend span{ display:inline-flex; align-items:center; gap:.5em; }
.cov-map__legend i{ display:inline-block; flex:none; }
.lg-dot{ width:10px; height:10px; border-radius:50%; background: var(--map-red); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--slate-200); }
.lg-office{ width:14px; height:14px; border-radius:50%; background: radial-gradient(circle, var(--white) 0 26%, var(--map-red) 28%); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--slate-200); }
.lg-state{ width:14px; height:10px; border-radius:3px; background: var(--map-covered); }

/* ---------- Lista de ciudades ---------- */
.cov__list{ padding-top: .4rem; }
.cov-list__title{ font-size: 1rem; margin-bottom: .8rem; }
.cov-list{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .15rem 1rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 340px){ .cov-list{ grid-template-columns: 1fr; } }

.cov-list a{
  display:grid;
  grid-template-columns: 10px minmax(0,1fr);
  column-gap:.65rem;
  align-items:center;
  padding: .45rem .6rem;
  margin-inline: -.6rem;
  border-radius: var(--radius-s);
  transition: background .15s var(--ease);
}
.cov-list a:hover, .cov-list a.is-active, .cov-list a:focus-visible{ background: var(--white); }
.cov-list__dot{ grid-row: span 2; width:8px; height:8px; border-radius:50%; background: var(--map-red); justify-self:center; }
.cov-list a.is-office .cov-list__dot{ width:10px; height:10px; background: radial-gradient(circle, var(--white) 0 26%, var(--map-red) 28%); }
.cov-list__name{ font-weight:700; font-size:.92rem; line-height:1.25; }
.cov-list a:hover .cov-list__name, .cov-list a.is-active .cov-list__name{ color: var(--blue); }
.cov-list__state{ font-size:.76rem; color: var(--slate); line-height:1.3; }

.cov__note{ font-size:.88rem; color: var(--ink-70); margin-bottom: 1.1rem; }