:root{
  --bg: #ffffff;
  --bg-soft: #F4F6F8;
  --ink: #2E2E2E;
  --muted: #6B7280;
  --line: #D9DEE3;

  --brand: #1E8E6E;
  --accent: #E8483F;

  --ok: #1E8E6E;
  --warn: #C78A1B;

  --bad-fill: rgba(232,72,63,0.20);
  --bad-stroke: rgba(232,72,63,0.55);
}

html, body{ background: var(--bg); color: var(--ink); }

.site-header{
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}

.brand-logo{
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.brand-title{
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--brand);
  line-height: 1.05;
}

.brand-subtitle{
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.1;
}

.nav-link{
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
}
.nav-link:hover{ color: var(--ink); }

.mobile-nav{
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.96);
}

.hero{
  background:
    radial-gradient(1200px 420px at 12% 10%, rgba(30,142,110,0.10), transparent 55%),
    radial-gradient(900px 420px at 90% 0%, rgba(232,72,63,0.08), transparent 60%),
    linear-gradient(180deg, #fff, var(--bg-soft));
  border-bottom: 1px solid var(--line);
}

.kicker{
  display:inline-block;
  font-weight: 800;
  font-size: .90rem;
  color: var(--brand);
  background: rgba(30,142,110,0.08);
  border: 1px solid rgba(30,142,110,0.18);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 10px;
}

.hero-card{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.06);
}

.hero-card-title{ font-weight: 900; color: var(--ink); }
.hero-card-text{ color: var(--muted); margin-top: 8px; }

.mini-list{ display:grid; gap:8px; }
.mini-item{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 9px 10px;
  font-weight: 700;
  color: var(--ink);
}

.hero-points{ display: grid; gap: 10px; }
.point{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 700;
  color: var(--ink);
}

.hero-badges .pill{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: .9rem;
  border: 1px solid var(--line);
  background: #fff;
}

.pill-ok{
  border-color: rgba(30,142,110,0.22) !important;
  background: rgba(30,142,110,0.06) !important;
}

.section{ background: var(--bg); }

.section-alt{
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.legend-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: .9rem;
  color: var(--muted);
  border: 1px solid var(--line);
  background:#fff;
  padding: 6px 10px;
  border-radius: 999px;
}

.dot{ width: 10px; height: 10px; border-radius: 50%; display:inline-block; }
.dot-ok{ background: var(--ok); }
.dot-warn{ background: var(--warn); }
.dot-bad{ background: rgba(232,72,63,0.75); }

.map-shell{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.05);
}

.map-toolbar{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(244,246,248,0.7);
}

.map-wrap{ padding: 12px; }

@media (max-width: 768px){
  .map-wrap{ padding: 8px; }
}

.map-svg svg{
  width: 100%;
  height: auto;
  display: block;
}

.map-svg svg path{
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
  opacity: .98;
  fill: var(--bad-fill) !important;
  stroke: var(--bad-stroke) !important;
  stroke-width: 1.05 !important;
  filter: grayscale(15%);
}

.map-svg svg path:hover{
  opacity: 1;
  transform: translateY(-1px);
  filter: grayscale(0%);
}

.side-panel{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.05);
}

.side-title{
  font-weight: 900;
  font-size: 1.05rem;
}

.side-text{
  color: var(--muted);
  margin-top: 6px;
}

.side-divider{
  height: 1px;
  background: var(--line);
  margin: 14px 0;
}

.side-subtitle{
  font-weight: 800;
  margin-bottom: 6px;
}

.side-contact{
  font-size: .95rem;
  color: var(--ink);
}
.side-contact .label{
  color: var(--muted);
  font-weight: 800;
}

.info-card{
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  height: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}

.info-num{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  color: var(--brand);
  background: rgba(30,142,110,0.10);
  border: 1px solid rgba(30,142,110,0.18);
  margin-bottom: 10px;
}

.info-title{ font-weight: 900; margin-bottom: 6px; }
.info-text{ color: var(--muted); }

.site-footer{
  border-top: 1px solid var(--line);
  background: #fff;
}

.link-muted{
  font-size: .92rem;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
}
.link-muted:hover{
  color: var(--ink);
  border-bottom-color: var(--line);
}


/* ===== MAPA (FIX ESPECIFICIDAD) =====
   Base (no publicado/sin estructura) = ROJO
   Operativo/visible = BLANCO (con borde verde)
   En formación = BLANCO (con borde ámbar)
   Nota: La regla base usa :not() para no pisar las clases pintadas por JS.
*/
.map-svg svg path:not(.st-operativo):not(.st-formacion){
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease, filter .12s ease;
  opacity: .98;
  fill: var(--bad-fill) !important;
  stroke: var(--bad-stroke) !important;
  stroke-width: 1.05 !important;
  filter: grayscale(0%);
}

.map-svg svg path.map-svg svg path.map-svg svg path:hover{
  opacity: 1;
  transform: translateY(-1px);
}


/* FIX ESPECIFICIDAD:
   El selector base ".map-svg svg path" es más específico que ".st-operativo".
   Por eso el rojo ganaba. Estas reglas lo corrigen. */
.map-svg svg path.st-operativo{
  fill: rgba(30,142,110,0.48) !important;
  stroke: rgba(30,142,110,0.85) !important;
  stroke-width: 1.2 !important;
  filter: grayscale(0%) !important;
}

.map-svg svg path.st-formacion{
  fill: rgba(199,138,27,0.48) !important;
  stroke: rgba(199,138,27,0.85) !important;
  stroke-width: 1.2 !important;
  filter: grayscale(0%) !important;
}