/* ==========================================================================
   Mapas de ruta

   Siluetas reales (Natural Earth) generadas con tests/gen-mapas.py.
   El SVG solo trae la geometria: el color se decide aqui, asi que se puede
   retocar la paleta sin volver a generar los mapas.

   Por defecto se pintan para fondo oscuro, que es donde viven casi todos.
   Un contenedor claro puede pedir la variante con .eb-map--claro.
   ========================================================================== */

.eb-map {
  display: block;
  width: 100%;
  height: auto;
  /* varios mapas viven en cajas de altura fija pensadas para el dibujo anterior:
     asi el mapa se ajusta dentro en vez de quedar recortado */
  max-height: 100%;

  --eb-map-tierra: #1b2530;
  --eb-map-borde:  #2b3947;
  --eb-map-origen: #e11d2a;
  --eb-map-destino:#12a150;
  --eb-map-ruta:   #ffb020;
  --eb-map-texto:  #eef2f7;
  --eb-map-halo:   #0d1117;
}
/* ACCIONES DEL HERO --------------------------------------------------------
   El hero conserva sus dos columnas originales. Solo las acciones se mantienen
   juntas en una fila en escritorio; en movil vuelven a apilarse. */
@media (min-width: 768px) {
  body > section:first-of-type :is(
    .ax-ths-acts, .br-actions, .mx-actions, .pg-actions, .uy-acts,
    .ush-actions, .ax-jp-actions, .ax-bo-actions, .ax-ca-actions,
    .ax-cl-hero-actions, .cuba-hero__actions
  ) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
    gap: 12px;
  }

  body > section:first-of-type :is(
    .ax-ths-acts, .br-actions, .mx-actions, .pg-actions, .uy-acts,
    .ush-actions, .ax-jp-actions, .ax-bo-actions, .ax-ca-actions,
    .ax-cl-hero-actions, .cuba-hero__actions
  ) > :is(a, button) {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    min-height: 64px !important;
    height: auto !important;
    justify-content: center;
    padding: 12px 8px !important;
    font-size: clamp(10.5px, .78vw, 13.5px) !important;
    line-height: 1.2 !important;
    text-align: center;
    white-space: normal;
  }

  body > section:first-of-type :is(
    .ax-ths-acts, .br-actions, .mx-actions, .pg-actions, .uy-acts,
    .ush-actions, .ax-jp-actions, .ax-bo-actions, .ax-ca-actions,
    .ax-cl-hero-actions, .cuba-hero__actions
  ) > :is(a, button):first-child { flex-grow: 1.35; }

  body > section:first-of-type :is(
    .ax-ths-acts, .br-actions, .mx-actions, .pg-actions, .uy-acts,
    .ush-actions, .ax-jp-actions, .ax-bo-actions, .ax-ca-actions,
    .ax-cl-hero-actions, .cuba-hero__actions
  ) > :is(a, button):nth-child(2) { flex-grow: .9; }

  body > section:first-of-type :is(
    .ax-ths-acts, .br-actions, .mx-actions, .pg-actions, .uy-acts,
    .ush-actions, .ax-jp-actions, .ax-bo-actions, .ax-ca-actions,
    .ax-cl-hero-actions, .cuba-hero__actions
  ) > :is(a, button):nth-child(3) { flex-grow: 1.1; }
}

@media (max-width: 767px) {
  body > section:first-of-type :is(
    .ax-ths-acts, .br-actions, .mx-actions, .pg-actions, .uy-acts,
    .ush-actions, .ax-jp-actions, .ax-bo-actions, .ax-ca-actions,
    .ax-cl-hero-actions, .cuba-hero__actions
  ) > :is(a, button) {
    width: 100%;
    justify-content: center;
  }
}


.eb-map--claro {
  --eb-map-tierra: #e8edf3;
  --eb-map-borde:  #cfd8e3;
  --eb-map-texto:  #1b2530;
  --eb-map-halo:   #ffffff;
}

.eb-map-land path {
  fill: var(--eb-map-tierra);
  stroke: var(--eb-map-borde);
  stroke-width: .6;
}

.eb-map-origin { fill: var(--eb-map-origen);  stroke: #ff6b74; stroke-width: .8; }
.eb-map-dest   { fill: var(--eb-map-destino); stroke: #4ade80; stroke-width: .8; }

.eb-map-route {
  fill: none;
  stroke: var(--eb-map-ruta);
  stroke-width: 2.2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
}

.eb-map-dot--origin { fill: var(--eb-map-origen);  stroke: #fff; stroke-width: 2; }
.eb-map-dot--dest   { fill: var(--eb-map-destino); stroke: #fff; stroke-width: 2; }

.eb-map-label {
  fill: var(--eb-map-texto);
  font-family: inherit;
  font-size: 11.5px;      /* el svg se escala; en pantalla acaba en unos 16px */
  font-weight: 700;
  paint-order: stroke;          /* el halo va por debajo del texto, no encima */
  stroke: var(--eb-map-halo);
  stroke-width: 4;
  stroke-linejoin: round;
}

/* la ruta se dibuja sola al entrar en pantalla; si el visitante pide menos
   movimiento, aparece ya trazada */
@media (prefers-reduced-motion: no-preference) {
  .eb-map-route {
    stroke-dasharray: 7 6;
    animation: eb-map-fluir 1.6s linear infinite;
  }
  @keyframes eb-map-fluir {
    to { stroke-dashoffset: -26; }
  }
}

@media (max-width: 767px) {
  .eb-map-label { font-size: 15px; }
  .eb-map-route { stroke-width: 2.8; }
}

/* --------------------------------------------------------------------------
   Seccion de mapa
   Se anade a las paginas de destino que no tenian ninguna.
   -------------------------------------------------------------------------- */

.eb-mapa-sec {
  padding: clamp(48px, 6vw, 88px) 0;
  background: #12294b;
  color: #e6edf3;
}

.eb-mapa-sec .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px);
}

.eb-mapa-cab {
  max-width: 680px;
  margin: 0 0 clamp(24px, 3vw, 40px);
}

.eb-mapa-eyebrow {
  margin: 0 0 10px;
  color: #ff8a93;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eb-mapa-sec h2 {
  margin: 0;
  text-transform: none;   /* main.css pone capitalize a todos los titulos */
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.15;
  font-weight: 900;
}

.eb-mapa-texto {
  margin: 14px 0 0;
  color: #b9c3d0;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
}

.eb-mapa-fig {
  max-width: 880px;       /* si no, el mapa se estira y la seccion queda altisima */
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  border: 1px solid #1e2937;
  border-radius: 18px;
  background: #163156;
}

.eb-mapa-fig figcaption {
  margin: 14px 0 0;
  color: #97a3b4;
  font-size: 14px;
  text-align: center;
}