/* ═══ LUGARES MAPEADOS ═══
   Colombia dividida por departamentos, con sus curvas de nivel, y en verde
   los que ya se han trabajado.

   El SVG lo calcula el generador desde coordenadas reales; aquí solo se le
   ponen los colores de la marca y el movimiento. Las capas van, de atrás
   hacia delante: departamentos, relieve, frontera y rótulos. */
.cobertura{
  background:var(--blanco);
  padding:var(--ritmo-seccion) var(--margen-lateral);
}
.cobertura .container{max-width:1100px;margin-inline:auto}

.mapa{
  margin-top:clamp(28px, 4vw, 46px);
  display:flex;flex-direction:column;align-items:center;gap:26px;
}
.mapa-svg{width:100%;max-width:560px;height:auto}

/* ── Los departamentos ──
   Gris claro con la división en blanco: el país se lee como un mosaico y no
   como una mancha. */
.mapa-dep{
  fill:var(--gris-claro);
  stroke:var(--blanco);stroke-width:.8;
  stroke-linejoin:round;
}

/* Donde ya se ha trabajado. Respira despacio, y cada uno a su turno. */
.mapa-dep--marcada{
  fill:var(--verde-agricola);fill-opacity:.85;
  animation:mapaRespira 4.4s ease-in-out infinite;
}
.mapa-dep--2{animation-delay:.5s}
.mapa-dep--3{animation-delay:1s}
.mapa-dep--4{animation-delay:1.5s}
.mapa-dep--5{animation-delay:2s}
.mapa-dep--6{animation-delay:2.5s}
@keyframes mapaRespira{
  0%,100%{fill-opacity:.72}
  50%{fill-opacity:.95}
}

/* ── El relieve ──
   Curvas de nivel de verdad, a 100, 200, 500, 1.000, 2.000 y 3.000 m. Las
   tres bajas cubren lo que las de montaña dejaban en blanco: los llanos, la
   Amazonía y el Caribe, que son media Colombia.

   Cada altura con su tono y su grosor, de tierra clara y fina a tierra
   quemada y gruesa, como en un mapa topográfico: así se lee de un vistazo
   hacia dónde sube el terreno. */
.mapa-curva{
  fill:none;
  stroke:var(--relieve-4);stroke-width:.95;
  stroke-linejoin:round;stroke-linecap:round;
}
.mapa-curva--100{stroke:var(--relieve-1);stroke-width:.85}
.mapa-curva--200{stroke:var(--relieve-2);stroke-width:.9}
.mapa-curva--500{stroke:var(--relieve-3);stroke-width:.95}
.mapa-curva--1000{stroke:var(--relieve-4);stroke-width:1.05}
.mapa-curva--2000{stroke:var(--relieve-5);stroke-width:1.15}
.mapa-curva--3000{stroke:var(--relieve-6);stroke-width:1.3}

/* La leyenda de alturas: sin ella el color sería solo decoración. */
.mapa-leyenda{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 18px;
  font-size:0.75rem;color:var(--gris-texto);
}
.mapa-leyenda-titulo{
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  font-size:0.6875rem;color:var(--verde-oscuro);
}
.mapa-altura{display:inline-flex;align-items:center;gap:7px}
.mapa-altura::before{
  content:'';width:18px;
  border-top:2px solid var(--relieve-4);
}
.mapa-altura--100::before{border-top-color:var(--relieve-1)}
.mapa-altura--200::before{border-top-color:var(--relieve-2)}
.mapa-altura--500::before{border-top-color:var(--relieve-3)}
.mapa-altura--1000::before{border-top-color:var(--relieve-4);border-top-width:2.5px}
.mapa-altura--2000::before{border-top-color:var(--relieve-5);border-top-width:2.5px}
.mapa-altura--3000::before{border-top-color:var(--relieve-6);border-top-width:3px}

/* ── La frontera ──
   Se dibuja sola cuando la sección entra en pantalla. Como el trazo lleva
   `pathLength="1"`, el recorrido entero vale 1 sin que nadie tenga que medir
   el perímetro. Sin JavaScript no hay clase `con-revelado` y el mapa nace
   dibujado. */
.mapa-pais{
  fill:none;
  stroke:var(--verde-agricola);stroke-width:1.8;
  stroke-linejoin:round;stroke-linecap:round;
}
.con-revelado .mapa-pais{stroke-dasharray:1;stroke-dashoffset:1}
.con-revelado [data-revelar].revelado .mapa-pais{
  animation:mapaTraza 2.4s ease-out forwards;
}
@keyframes mapaTraza{to{stroke-dashoffset:0}}

/* ── Los rótulos ── */
.mapa-punto{fill:var(--verde-oscuro)}
.mapa-guia{stroke:var(--verde-oscuro);stroke-width:1;opacity:.45}
.mapa-pastilla{fill:var(--blanco);stroke:var(--line)}
.mapa-rotulo{
  font-family:'Montserrat',Arial,sans-serif;
  font-size:14px;font-weight:800;letter-spacing:-.01em;
  fill:var(--verde-oscuro);
}

/* Los mismos nombres en texto, debajo del mapa. */
.mapa-lista{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
.mapa-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:var(--gris-claro);
  font-size:0.8125rem;font-weight:700;color:var(--verde-oscuro);
}
.mapa-chip::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--verde-agricola);
}

/* En pantallas estrechas el mapa se encoge y sus rótulos quedarían en letra
   de 8 px: se esconden y manda la lista, que ya dice lo mismo. */
@media (max-width:700px){
  .mapa-etiqueta{display:none}
  .mapa-svg{max-width:380px}
  /* A ese tamaño las curvas se apelmazan; el mosaico de departamentos ya
     cuenta lo que hay que contar. Sin curvas, su leyenda tampoco pinta. */
  .mapa-relieve,
  .mapa-leyenda{display:none}
}