/* ---------------------------------------------------------------------------
   Mapa de sedes: el fondo del héroe Twilight en la página de Sedes.
   Reemplaza el video de la plantilla (un paisaje que no era de Chile) por las
   sedes en su posición real sobre el oriente de Santiago, con las líneas 1 y 4
   del Metro, la cordillera insinuada al este y un recuadro de Chile para Viña,
   Antofagasta y Online. Lo dibuja componentes/mapa-sedes.js.
   --------------------------------------------------------------------------- */

/* El héroe pasa a fondo claro: el título y el rombo, en los colores de marca. */
.tw.tw--mapa {
  background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #f3f4f9 70%, #eceef6 100%);
  --shadow-card: 0 14px 36px rgba(11, 37, 120, 0.13);
  --shadow-chip: 0 6px 18px rgba(11, 37, 120, 0.14);
}
.tw.tw--mapa .hero__title { color: var(--navy, #0b2578); }
.tw.tw--mapa .hero__title em { color: var(--magenta, #9d0067); }
.tw.tw--mapa .hero__kicker { color: var(--magenta, #9d0067); }
.tw.tw--mapa .aster { display: none; }

/* El hueco del mapa: reserva el espacio entre el título y las tarjetas. */
.tw .ms__hueco {
  position: relative;
  flex: 1 0 auto;
  min-height: clamp(360px, 34vw, 520px);
  margin: clamp(10px, 1.6vw, 24px) calc(var(--gutter) * -1) 0;
}
@media (max-width: 900px) {
  .tw .ms__hueco { min-height: 400px; }
}

/* Uso suelto: una tarjeta clara que hace de lienzo (data-mapa-raiz). */
.ms__raiz:not(.tw) {
  --ease-out: cubic-bezier(0.22, 0.68, 0.32, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #ffffff 0%, #f3f4f9 70%, #eceef6 100%);
}
.ms__raiz:not(.tw) .ms__hueco { position: relative; z-index: 1; min-height: clamp(420px, 42vw, 560px); }
@media (max-width: 900px) { .ms__raiz:not(.tw) .ms__hueco { min-height: 440px; } }

/* Capas de fondo: cubren todo el lienzo, detrás del contenido. */
.ms__raiz > .ms__fondo,
.ms__raiz > .ms__cordillera {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
.ms__raiz > .ms__fondo {
  -webkit-mask-image: radial-gradient(ellipse 58% 62% at var(--mx, 50%) var(--my, 55%), #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 62% at var(--mx, 50%) var(--my, 55%), #000 35%, transparent 100%);
}
.tw .hero__frame { z-index: 5; }

.ms__comuna {
  fill: #ffffff;
  stroke: #d5d8e6;
  stroke-width: 1.1;
  stroke-linejoin: round;
}
.ms__comuna--sede { fill: var(--tinte); stroke: #c3c7da; }
.ms__nombre-comuna {
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: #a3a6ba;
  text-anchor: middle;
}
.ms__linea {
  fill: none;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}
.ms__estacion { fill: #fff; stroke-width: 2.2; }
.ms__nombre-estacion {
  font: 500 10.5px/1 'Inter', system-ui, sans-serif;
  fill: #6b6e84;
}
.ms__linea-rotulo {
  font: 800 10px/1 'Inter', system-ui, sans-serif;
  fill: #fff;
  text-anchor: middle;
  dominant-baseline: central;
}
.ms__monte { stroke-linejoin: round; }

/* Las sedes: un rombo de su color con pulso, y su nombre al lado. */
.ms__pin {
  position: absolute;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-11px, -50%);
  text-decoration: none;
  color: var(--navy, #0b2578);
}
.ms__pin--izq { flex-direction: row-reverse; transform: translate(calc(-100% + 11px), -50%); text-align: right; }
.ms__rombo {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.ms__rombo::before,
.ms__rombo::after {
  content: '';
  position: absolute;
  inset: 3px;
  transform: rotate(45deg);
  border-radius: 3px;
}
.ms__rombo::before { background: var(--c); border: 2.5px solid #fff; box-shadow: 0 4px 12px rgba(11, 37, 120, 0.3); z-index: 1; }
.ms__rombo::after { background: var(--c); opacity: 0; animation: ms-pulso 2.8s ease-out infinite; animation-delay: var(--p, 0s); }
.ms__rotulo {
  display: grid;
  gap: 1px;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 18px rgba(11, 37, 120, 0.13);
  border-left: 3px solid var(--c);
  white-space: nowrap;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}
.ms__pin--izq .ms__rotulo { border-left: 0; border-right: 3px solid var(--c); }
.ms__rotulo b { font-size: 14px; font-weight: 700; line-height: 1.15; }
.ms__rotulo small { font-size: 11.5px; color: #5b5c70; line-height: 1.2; }
.ms__hueco--angosto .ms__rotulo { padding: 5px 9px; }
.ms__hueco--angosto .ms__rotulo b { font-size: 13px; }
.ms__hueco--angosto .ms__rotulo small { display: none; }
.ms__pin:hover .ms__rotulo,
.ms__pin:focus-visible .ms__rotulo { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 37, 120, 0.2); }
.ms__pin:focus-visible { outline: none; }
.ms__pin:focus-visible .ms__rotulo { outline: 3px solid #f4b300; outline-offset: 2px; }

/* Recuadro de Chile: Viña del Mar, Antofagasta y Online. */
.ms__chile {
  position: absolute;
  z-index: 6;
  width: 176px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 36px rgba(11, 37, 120, 0.14);
  color: var(--navy, #0b2578);
}
.ms__chile p { margin: 0 0 6px; font: 700 11px/1.3 'Inter', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6e84; }
.ms__chile svg { display: block; width: 100%; height: auto; overflow: visible; }
.ms__pais { fill: #eef0f7; stroke: #c3c7da; stroke-width: 1; }
.ms__pais--online { fill: url(#ms-online); }
.ms__chile a { fill: var(--navy, #0b2578); text-decoration: none; }
.ms__chile a text { font: 700 12px/1 'Inter', system-ui, sans-serif; }
.ms__chile a:hover text, .ms__chile a:focus-visible text { fill: var(--magenta, #9d0067); text-decoration: underline; }
.ms__ciudad { stroke: #fff; stroke-width: 2; }
.ms__online {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(124, 74, 168, 0.1);
  color: #5c3486;
  font: 700 12px/1.2 'Inter', system-ui, sans-serif;
  text-decoration: none;
}
.ms__online i { width: 9px; height: 9px; border-radius: 50%; background: #7c4aa8; animation: ms-latido 1.8s ease-in-out infinite; }
.ms__online:hover { background: rgba(124, 74, 168, 0.18); }

/* En pantallas angostas el recuadro pasa a una fila bajo el mapa. */
.ms__otras {
  position: absolute;
  z-index: 6;
  left: 12px;
  right: 12px;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ms__otras a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 37, 120, 0.13);
  color: var(--navy, #0b2578);
  font: 700 12.5px/1 'Inter', system-ui, sans-serif;
  text-decoration: none;
  min-height: 34px;
}
.ms__otras a i { width: 9px; height: 9px; transform: rotate(45deg); border-radius: 2px; background: var(--c); }

/* Entradas: el mapa se dibuja, las líneas se trazan y las sedes aparecen. */
.ms--anima .ms__comuna { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ms-traza 1.6s var(--ease-out) forwards; fill-opacity: 0; }
.ms--anima .ms__comuna { animation: ms-traza 1.6s var(--ease-out) forwards, ms-relleno 1s ease 0.6s forwards; }
.ms--anima .ms__linea { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ms-traza 1.5s var(--ease-out) 0.55s forwards; }
.ms--anima .ms__estacion, .ms--anima .ms__nombre-estacion, .ms--anima .ms__nombre-comuna, .ms--anima .ms__linea-rotulo { opacity: 0; animation: ms-aparece 0.6s ease forwards; animation-delay: 1.3s; }
.ms--anima .ms__monte { opacity: 0; animation: ms-monte 0.9s var(--ease-out) forwards; animation-delay: var(--d, 0.4s); }
.ms--anima .ms__pin, .ms--anima .ms__chile, .ms--anima .ms__otras a { opacity: 0; animation: ms-pop 0.6s var(--ease-out) forwards; animation-delay: var(--d, 1s); }

@keyframes ms-traza { to { stroke-dashoffset: 0; } }
@keyframes ms-relleno { to { fill-opacity: 1; } }
@keyframes ms-aparece { to { opacity: 1; } }
@keyframes ms-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes ms-pop { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }
@keyframes ms-pulso { 0% { opacity: 0.55; scale: 1; } 100% { opacity: 0; scale: 3; } }
@keyframes ms-latido { 50% { opacity: 0.35; } }

@media (prefers-reduced-motion: reduce) {
  .ms--anima .ms__comuna, .ms--anima .ms__linea { animation: none; stroke-dasharray: none; fill-opacity: 1; }
  .ms--anima .ms__estacion, .ms--anima .ms__nombre-estacion, .ms--anima .ms__nombre-comuna, .ms--anima .ms__linea-rotulo,
  .ms--anima .ms__monte, .ms--anima .ms__pin, .ms--anima .ms__chile, .ms--anima .ms__otras a { animation: none; opacity: 1; }
  .ms__rombo::after, .ms__online i { animation: none; }
}