/* ==========================================================================
   GIG · Mapas de las páginas de empresa (direcciones/CONTENIDO.md, 13.8)
   go-truck.html («Dónde trabajamos» y la banda de dos cifras) y go-ship.html
   (la ruta prevista). Se carga después de empresas.css y solo añade: no
   cambia ninguna regla de estilos.css ni de empresas.css.

   Los mapas son <svg> en línea que escribe scripts/mapa-lugares.mjs. Dentro
   no hay ningún style="…" (lo prohíbe la política de _headers): los colores,
   la letra y los grosores salen de estas clases.

   PARTES
     .empresa-cifras--dos   Dos cifras lado a lado (CR02343 y los
                            contenedores): un punto más chicas que una sola.
     .mapa-apartado         Apartado con mapa: a la izquierda (columnas 1 a 4)
                            el rótulo, la leyenda, la clave de signos y, en Go
                            Truck, el mapa de la región; a la derecha (columna
                            6 en adelante) el mapa grande, la lista de lugares
                            en texto y la fuente. En el teléfono, todo en una
                            columna: rótulo, leyenda, mapa, clave, lista,
                            región, fuente.
     .mapa                  El dibujo: una lámina en verde hondo, la tierra en
                            dos verdes, la costa de Costa Rica en oro.
     .mapa__var--ancho      Puntos y nombres para pantalla ancha.
     .mapa__var--movil      Los mismos para el teléfono (hasta 640 px):
                            puntos y nombres el doble de grandes, y solo los
                            nombres que caben.

   Contrastes sobre el verde hondo de la lámina: marfil 15:1, oro claro 8,6:1.
   ========================================================================== */

/* Dos cifras -------------------------------------------------------------- */

/* Lado a lado desde unos 1180 px (la laptop del dueño, a 1280, las ve juntas); más angostas, una debajo de otra */
.empresa-cifras--dos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.empresa-cifras--dos .empresa-cifra__valor { font-size: clamp(3.25rem, 5.2vw, 5.25rem); }

/* Apartado con mapa ------------------------------------------------------- */

.mapa-apartado { align-items: start; }
.mapa-apartado__lado {
  grid-column: 1 / span 4;
  min-width: 0;
}
.mapa-apartado__dibujo {
  grid-column: 6 / -1;
  min-width: 0;
}
.mapa-apartado__rotulo { line-height: 1.35; }
/* En pantalla ancha, la columna de la izquierda llega hasta el pie del mapa y la fuente se apoya abajo, como el
   pie de una lámina */
@media (min-width: 901px) {
  .mapa-apartado__lado {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  .mapa-apartado__lado > .mapa-fuente { margin-top: auto; padding-top: 1.5rem; }
}

.mapa-leyenda {
  max-width: 17em;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 420;
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -.012em;
  text-wrap: balance;
}

/* La clave de signos */
.mapa-clave {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--oro);
}
.mapa-clave li {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(244, 239, 228, .16);
  font-size: .9375rem;
  line-height: 1.4;
  color: rgba(244, 239, 228, .92);
}
.mapa-clave__signo {
  flex: none;
  width: 28px;
  height: 20px;
}
.mapa-clave__linea,
.mapa-clave__ruta {
  fill: none;
  stroke: var(--oro-claro);
}
.mapa-clave__linea { stroke-width: 1.6; stroke-opacity: .8; stroke-linecap: round; }
.mapa-clave__ruta { stroke-width: 2.2; stroke-dasharray: 5 4; }

/* El mapa de la región, debajo de la clave */
.mapa-region { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
.mapa-region__titulo {
  margin-bottom: 1rem;
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* La lista de lugares en texto, plegada */
.mapa-lista { margin-top: 1.75rem; }
.mapa-lista summary {
  display: inline-block;
  position: relative;
  padding: .35rem 0;
  font: 500 1rem/1.2 var(--sans);
  color: var(--marfil);
  border-bottom: 1px solid var(--oro);
  cursor: pointer;
  list-style: none;
  transition: border-color .25s ease, color .25s ease;
}
.mapa-lista summary::-webkit-details-marker { display: none; }
.mapa-lista summary::after { content: ""; position: absolute; inset: -.5rem -.75rem; }
.mapa-lista summary:hover { color: var(--oro-claro); border-color: var(--oro-claro); }
/* En columnas de periódico: los grupos cortos no se parten; el largo («De vez en cuando») sigue en la columna de al
   lado */
.mapa-lista__cuerpo {
  columns: 12.5rem 3;
  column-gap: var(--medianil);
  margin-top: 1.75rem;
}
.mapa-lista__grupo {
  break-inside: avoid;
  margin-bottom: 2rem;
}
.mapa-lista__grupo--largo { break-inside: auto; }
.mapa-lista h3 { break-after: avoid; }
.mapa-lista li { break-inside: avoid; }
.mapa-lista h3 {
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--oro);
  font: 600 .75rem/1.2 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-claro);
}
.mapa-lista li {
  padding: .5rem 0;
  border-bottom: 1px solid rgba(244, 239, 228, .12);
  line-height: 1.35;
}
.mapa-lista__lugar {
  font-weight: 500;
  font-size: .9375rem;
  color: var(--marfil);
}
.mapa-lista__puertos {
  display: block;
  margin-top: .15rem;
  font-size: .8125rem;
  color: rgba(244, 239, 228, .74);
}

.mapa-fuente {
  margin-top: 1.5rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(244, 239, 228, .74);
}

/* El dibujo ----------------------------------------------------------------- */

.mapa {
  display: block;
  width: 100%;
  height: auto;
}
/* Que el mapa grande quepa entero en la pantalla, con la cabecera fija (las proporciones son las del viewBox que
   escribe scripts/mapa-lugares.mjs: 690 x 664 y 660 x 701) */
.mapa--cr {
  max-width: min(100%, calc((100vh - 7rem) * 690 / 664));
  max-width: min(100%, calc((100svh - 7rem) * 690 / 664));
}
.mapa--caribe {
  max-width: min(100%, calc((100vh - 7rem) * 660 / 701));
  max-width: min(100%, calc((100svh - 7rem) * 660 / 701));
}

.mapa__mar-fondo { fill: var(--selva-hondo); }
.mapa__reticula {
  fill: none;
  stroke: rgba(244, 239, 228, .07);
  stroke-width: .75px;
  vector-effect: non-scaling-stroke;
}
.mapa__vecino {
  fill: #15332A;
  stroke: rgba(244, 239, 228, .24);
  stroke-width: .75px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapa__visitado {
  fill: #1B3D32;
  stroke: rgba(210, 183, 127, .55);
  stroke-width: .75px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapa__tierra {
  fill: #21463A;
  stroke: var(--oro);
  stroke-width: 1px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.mapa__marco {
  fill: none;
  stroke: rgba(184, 151, 90, .5);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* Líneas de cada lugar a su puerto (el grosor lo pone el guion: más viajes, más grueso) */
.mapa__lineas path {
  fill: none;
  stroke: var(--oro-claro);
  stroke-opacity: .5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.mapa__ruta {
  fill: none;
  stroke: var(--oro-claro);
}

/* Puertos y lugares (también en la clave, fuera del mapa) */
.mapa__puerto {
  fill: var(--oro-claro);
  stroke: var(--selva-hondo);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.mapa__puerto-aro {
  fill: none;
  stroke: var(--oro-claro);
  stroke-opacity: .75;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.mapa__punto {
  fill: var(--marfil);
  stroke: #21463A;
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.mapa__punto--3 { fill: rgba(244, 239, 228, .82); }
.mapa__punto--ciudad { stroke: #1B3D32; }

/* Nombres: con un halo del color de la lámina, para leerse encima de las líneas */
.mapa text {
  font-family: var(--sans);
  fill: var(--marfil);
  paint-order: stroke;
  stroke: #12302A;
  stroke-width: 3px;
  stroke-linejoin: round;
}
.mapa__nombre--puerto {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-weight: 500;
  letter-spacing: -.005em;
}
.mapa__nombre--1 { font-weight: 600; }
.mapa__nombre--2 { font-weight: 500; }
.mapa__nombre--3 { font-weight: 400; fill: rgba(244, 239, 228, .86); }
.mapa__nombre--ciudad { font-weight: 500; }
.mapa__pais {
  font-weight: 600;
  letter-spacing: .16em;
  fill: var(--oro-claro);
}
.mapa__pais--cr { fill: var(--marfil); }
.mapa__mar {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72;
  font-style: italic;
  font-weight: 400;
  fill: var(--oro-claro);
}
.mapa__escala {
  fill: none;
  stroke: var(--oro-claro);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}
.mapa .mapa__escala-texto { font-weight: 500; fill: var(--oro-claro); }

/* Una variante u otra, según el ancho */
.mapa__var--movil { display: none; }

/* Teléfono y tableta vertical ------------------------------------------------- */

@media (max-width: 900px) {
  /* Una columna, en el orden de lectura: rótulo, leyenda, mapa, clave, lista, región, fuente */
  .mapa-apartado__lado,
  .mapa-apartado__dibujo { display: contents; }
  .mapa-apartado__rotulo { order: 1; margin-bottom: 1.25rem; }
  .mapa-leyenda { order: 2; margin-top: 0; }
  .mapa-apartado__dibujo > .mapa { order: 3; margin-top: 1.75rem; }
  .mapa-clave { order: 4; }
  .mapa-lista { order: 5; }
  .mapa-region { order: 6; }
  .mapa-fuente { order: 7; }
  .mapa-region { max-width: 32rem; }
}

@media (max-width: 640px) {
  .mapa__var--ancho { display: none; }
  .mapa__var--movil { display: inline; }
  .mapa__var--movil text { stroke-width: 6px; }
}