/* ==========================================================================
   GRAN MANTRA · MAPA DE UBICACIÓN (pieza reutilizable: inicio y capacitación)
   Marcado: fuente/mapa/ubicacion-fragmento.html (lo genera fuente/mapa/build_mapa.py)
   Comportamiento: js/mapa-gm.js. Todo lleva el prefijo gmmapa- para no chocar con otras hojas.
   Usa los tokens de gm-base.css si están; si no, los valores de respaldo.
   ========================================================================== */
.gmmapa{
  --gmmapa-navy:var(--gm-navy,#152486);
  --gmmapa-noche:var(--gm-noche,#0E1540);
  --gmmapa-bronce:var(--gm-bronce,#B78350);
  --gmmapa-bronce-dk:var(--gm-bronce-dk,#8A5A2B);
  --gmmapa-oro-claro:var(--gm-oro-claro,#E2C29A);
  --gmmapa-papel:var(--gm-papel,#FBF8F2);
  --gmmapa-tinta:var(--gm-tinta,#1B2540);
  --gmmapa-tinta-suave:var(--gm-tinta-suave,rgba(27,37,64,.72));
  --gmmapa-linea:var(--gm-linea,rgba(27,37,64,.12));
  --gmmapa-display:var(--gm-display,"Cormorant Garamond",Georgia,serif);
  --gmmapa-texto:var(--gm-texto,"Montserrat",system-ui,sans-serif);
  --gmmapa-tierra:#EDE6D7;
  --gmmapa-alto:clamp(520px,calc(100svh - 190px),760px);
  display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"lienzo panel" "nota nota";gap:18px;
  font-family:var(--gmmapa-texto);color:var(--gmmapa-tinta);text-align:left
}
.gmmapa *,.gmmapa *::before,.gmmapa *::after{box-sizing:border-box}

/* lienzo del mapa */
.gmmapa-lienzo{grid-area:lienzo;position:relative;height:var(--gmmapa-alto);min-width:0;border-radius:24px;overflow:hidden;
  background:var(--gmmapa-tierra);box-shadow:0 22px 50px -24px rgba(14,21,64,.35);isolation:isolate}
.gmmapa-svg{display:block;width:100%;height:100%;user-select:none;-webkit-user-select:none}
.gmmapa-marca{position:absolute;top:14px;left:14px;z-index:3;display:flex;align-items:center;gap:10px;padding:7px 14px 7px 9px;border-radius:14px;
  background:rgba(251,248,242,.94);box-shadow:0 10px 30px -18px rgba(14,21,64,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.gmmapa-marca img{display:block;height:38px;width:auto}
.gmmapa-marca span{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.35;color:var(--gmmapa-tinta-suave)}

/* ficha del lugar: va en la esquina libre del mapa (la elige js/mapa-gm.js) */
.gmmapa-ficha{position:absolute;z-index:4;left:auto;top:auto;width:clamp(240px,32%,296px);overflow:hidden;border-radius:16px;background:#fff;
  box-shadow:0 24px 50px -18px rgba(14,21,64,.55);transition:opacity .28s ease}
.gmmapa-ficha--oculta{opacity:0;pointer-events:none}
.gmmapa-ficha img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#e9e2d4}
.gmmapa-ficha-c{padding:13px 17px 16px}
.gmmapa-ficha-cat{margin:0 0 4px;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gmmapa-bronce-dk)}
.gmmapa-ficha h3{margin:0;font-family:var(--gmmapa-display);font-weight:500;font-size:21px;line-height:1.12;text-transform:uppercase;letter-spacing:.04em;color:var(--gmmapa-navy)}
.gmmapa-ficha-dato{display:flex;align-items:center;gap:7px;margin:7px 0 11px;font-size:13.5px;color:var(--gmmapa-tinta-suave)}
.gmmapa-ficha-dato b{color:var(--gmmapa-navy)}
.gmmapa-ficha .gm-ico,.gmmapa-ficha-dato svg{width:17px;height:17px;flex:none;fill:none;stroke:var(--gmmapa-bronce-dk);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gmmapa-ficha a{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gmmapa-bronce-dk);text-decoration:none}
.gmmapa-ficha a:hover,.gmmapa-ficha a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.gmmapa-ficha--compacta{width:236px}
.gmmapa-ficha--compacta img{aspect-ratio:2/1}
.gmmapa-ficha--compacta .gmmapa-ficha-c{padding:9px 13px 11px}
.gmmapa-ficha--compacta h3{font-size:18px}
.gmmapa-ficha--compacta .gmmapa-ficha-dato{margin:3px 0 6px;font-size:12.5px}

/* panel: pestañas + lista */
.gmmapa-panel{grid-area:panel;display:flex;flex-direction:column;min-height:0;height:var(--gmmapa-alto);overflow:hidden;border-radius:22px;background:#fff;
  border:1px solid var(--gmmapa-linea);box-shadow:0 10px 30px -18px rgba(14,21,64,.3)}
.gmmapa-pestanas{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--gmmapa-linea);flex:none}
.gmmapa-pestana{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 14px 14px;margin:0;border:0;background:none;
  font:inherit;color:var(--gmmapa-tinta-suave);text-align:left;cursor:pointer;transition:background .25s,color .25s}
.gmmapa-pestana+.gmmapa-pestana{border-left:1px solid var(--gmmapa-linea)}
.gmmapa-pestana .gm-ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.gmmapa-pestana b{display:block;font-family:var(--gmmapa-display);font-weight:500;font-size:15.5px;line-height:1.15;text-transform:uppercase;letter-spacing:.04em}
.gmmapa-pestana small{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--gmmapa-tinta-suave)}
.gmmapa-pestana::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:transparent;transition:background .25s}
.gmmapa-pestana[aria-selected="true"]{color:var(--gmmapa-navy);background:linear-gradient(180deg,#fff,var(--gmmapa-papel))}
.gmmapa-pestana[aria-selected="true"]::after{background:var(--gmmapa-navy)}
.gmmapa-pestana[data-cat="ruta"][aria-selected="true"]{color:var(--gmmapa-bronce-dk)}
.gmmapa-pestana[data-cat="ruta"][aria-selected="true"]::after{background:var(--gmmapa-bronce)}
.gmmapa-pestana:focus-visible{outline:2px solid var(--gmmapa-navy);outline-offset:-4px}
@media (hover:hover){.gmmapa-pestana:hover{background:var(--gmmapa-papel)}}

.gmmapa-lista{flex:1;min-height:0;list-style:none;margin:0;padding:10px;display:grid;align-content:start;gap:3px;overflow-y:auto;scrollbar-width:thin}
.gmmapa-lista[hidden]{display:none}
.gmmapa-lugar{width:100%;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;padding:5px 9px 5px 5px;margin:0;border:1px solid transparent;
  border-radius:12px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.gmmapa-lugar img{display:block;width:44px;height:44px;border-radius:10px;object-fit:cover;background:#e9e2d4}
.gmmapa-lugar-n{font-size:13.5px;font-weight:600;line-height:1.25}
.gmmapa-lugar-t{font-size:12px;font-weight:700;white-space:nowrap;color:var(--gmmapa-navy)}
.gmmapa-lista[data-cat="ruta"] .gmmapa-lugar-t{color:var(--gmmapa-bronce-dk)}
@media (hover:hover){.gmmapa-lugar:hover{background:var(--gmmapa-papel)}}
.gmmapa-lugar[aria-pressed="true"]{background:#EDEFF6;border-color:rgba(21,36,134,.3)}
.gmmapa-lista[data-cat="ruta"] .gmmapa-lugar[aria-pressed="true"]{background:#F6EEE3;border-color:rgba(183,131,80,.45)}
.gmmapa-lugar:focus-visible{outline:2px solid var(--gmmapa-navy);outline-offset:1px}
.gmmapa-leyenda{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin:0;padding:11px 16px 13px;border-top:1px solid var(--gmmapa-linea);
  font-size:11px;color:var(--gmmapa-tinta-suave)}
.gmmapa-ley-ruta,.gmmapa-ley-tren{display:inline-block;width:24px;height:6px;border-radius:4px}
.gmmapa-ley-ruta{background:var(--gmmapa-navy);box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(14,21,64,.15)}
.gmmapa-ley-tren{height:4px;margin-left:10px;background:repeating-linear-gradient(90deg,#7D8299 0 4px,#fff 4px 7px);box-shadow:0 0 0 1px #7D8299}
.gmmapa-nota{grid-area:nota;margin:0;font-size:11.5px;line-height:1.55;color:rgba(27,37,64,.55);max-width:110ch}

/* capas del mapa (los trazos no cambian de grosor al acercar: vector-effect) */
.gmmapa-base path:not(.gmmapa-tierra),.gmmapa-ruta path{vector-effect:non-scaling-stroke}
.gmmapa-mar{fill:url(#gmmapa-mar)}
.gmmapa-tierra{fill:var(--gmmapa-tierra)}
/* agua: turquesa caribeño en la costa (franjas de agua baja, en km reales: escalan con el mapa) y azul profundo mar adentro */
.gmmapa-bajo{fill:none;stroke:#9BE3D8;stroke-linejoin:round}
.gmmapa-bajo-1{stroke-width:150;opacity:.22}
.gmmapa-bajo-2{stroke-width:80;opacity:.32}
.gmmapa-bajo-3{stroke-width:34;opacity:.5;stroke:#B8EEE4}
.gmmapa-laguna{fill:#A9DFDA}
.gmmapa-costa{fill:none;stroke:#E4F6F1;stroke-width:1.4}
.gmmapa-urbe{fill:url(#gmmapa-urbe)}
.gmmapa-via,.gmmapa-via-borde,.gmmapa-tren,.gmmapa-tren-durmientes{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gmmapa-via-calle{stroke:#FBF8F2;stroke-width:.9}
.gmmapa-via5{stroke:#FBF8F2;stroke-width:1.1}
.gmmapa-via4{stroke:#fff;stroke-width:1.5}
.gmmapa-via3{stroke:#fff;stroke-width:2}
.gmmapa-via-borde.gmmapa-via2{stroke:#D0BFA2;stroke-width:4.4}
.gmmapa-via.gmmapa-via2{stroke:#fff;stroke-width:2.8}
.gmmapa-via-borde.gmmapa-via-rc{stroke:#C9B48E;stroke-width:6}
.gmmapa-via.gmmapa-via-rc{stroke:#FFFDF8;stroke-width:3.8}
.gmmapa-via-borde.gmmapa-via0{stroke:#D3B98F;stroke-width:5.2}
.gmmapa-via.gmmapa-via0{stroke:#F7E9CF;stroke-width:3.4}
.gmmapa-tren{stroke:#7D8299;stroke-width:3}
.gmmapa-tren-durmientes{stroke:#fff;stroke-width:1.3;stroke-linecap:butt;stroke-dasharray:4 5}
.gmmapa-txt{font-family:var(--gmmapa-texto);font-size:10.5px;font-weight:600;letter-spacing:.14em;fill:#6A604F;text-anchor:middle;
  paint-order:stroke;stroke:var(--gmmapa-tierra);stroke-width:3px;stroke-linejoin:round}
.gmmapa-txt-ciudad{font-family:var(--gmmapa-display);font-size:20px;font-weight:600;letter-spacing:.08em;fill:var(--gmmapa-noche)}
.gmmapa-txt-pueblo{font-weight:700;fill:#3F3C55}
.gmmapa-txt-mar{fill:#fff;stroke:rgba(23,63,110,.35);stroke-width:2px;paint-order:stroke;font-size:11.5px;font-weight:700;letter-spacing:.55em;opacity:.95}
.gmmapa-txt-via{font-family:var(--gmmapa-texto);font-size:9.5px;font-weight:700;letter-spacing:.24em;fill:var(--gmmapa-bronce-dk);text-anchor:middle;
  paint-order:stroke;stroke:var(--gmmapa-tierra);stroke-width:3px;stroke-linejoin:round}
.gmmapa-pob{fill:#fff;stroke:#8F8571;stroke-width:1.5}
.gmmapa-pto{pointer-events:none}

/* ruta: una sola línea continua estilo Google Maps (halo, borde claro y línea); aparece con fundido, sin trazo animado */
.gmmapa-ruta{opacity:0;transition:opacity .5s ease;pointer-events:none}
.gmmapa-ruta.on{opacity:1}
.gmmapa-ruta path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.gmmapa-ruta-halo{stroke:rgba(14,21,64,.16);stroke-width:13}
.gmmapa-ruta-borde{stroke:#fff;stroke-width:9.5}
.gmmapa-ruta-linea{stroke:var(--gmmapa-navy);stroke-width:5.5}
.gmmapa-ruta-puntos{stroke:var(--gmmapa-navy);stroke-width:3.6;stroke-dasharray:0 7}

/* pines */
.gmmapa-pin{cursor:pointer;outline:none;transition:opacity .3s}
.gmmapa-pin-area{fill:transparent}
.gmmapa-pin-punto{stroke:#fff;stroke-width:2.2;transition:opacity .25s}
.gmmapa-pin[data-cat="emblematicos"] .gmmapa-pin-punto,.gmmapa-pin[data-cat="emblematicos"] .gmmapa-pin-gota path{fill:var(--gmmapa-navy)}
.gmmapa-pin[data-cat="ruta"] .gmmapa-pin-punto,.gmmapa-pin[data-cat="ruta"] .gmmapa-pin-gota path{fill:var(--gmmapa-bronce)}
.gmmapa-pin-foco{fill:none;stroke:var(--gmmapa-navy);stroke-width:2;opacity:0}
.gmmapa-pin:focus-visible .gmmapa-pin-foco{opacity:1}
.gmmapa-pin-gota{opacity:0;transition:opacity .3s}
.gmmapa-pin-gota path{stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 3px 3px rgba(14,21,64,.35))}
.gmmapa-pin-gota use{fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gmmapa-pin.on .gmmapa-pin-gota{opacity:1}
.gmmapa-pin.on .gmmapa-pin-punto{opacity:0}
.gmmapa-pin.on .gmmapa-pin-foco{transform:translateY(-23px)}
.gmmapa-pin.apagado{opacity:.4}
@media (hover:hover){.gmmapa-pin:not(.on):hover .gmmapa-pin-punto{stroke-width:3.2}}
.gmmapa-gm{pointer-events:none}
.gmmapa-gm-halo{fill:var(--gmmapa-bronce);opacity:.2}
.gmmapa-gm-disco{fill:var(--gmmapa-noche);stroke:var(--gmmapa-oro-claro);stroke-width:2;filter:drop-shadow(0 5px 7px rgba(14,21,64,.4))}
.gmmapa-gm-etq rect{fill:var(--gmmapa-noche)}
.gmmapa-gm-etq text{font-family:var(--gmmapa-texto);font-size:9.5px;font-weight:700;letter-spacing:.2em;fill:var(--gmmapa-oro-claro);text-anchor:middle}

/* tableta */
@media (max-width:1080px){
  .gmmapa{grid-template-columns:minmax(0,1fr) 296px}
  .gmmapa-pestana{padding:13px 11px 12px}
  .gmmapa-pestana small{display:none}
}
/* celular: mapa arriba (cabe en la pantalla), ficha debajo del mapa y lista que se desliza de lado */
@media (max-width:820px){
  .gmmapa{grid-template-columns:minmax(0,1fr);grid-template-areas:"lienzo" "panel" "nota";gap:14px;--gmmapa-alto:auto}
  .gmmapa-lienzo{height:auto;border-radius:20px}
  .gmmapa-svg{height:auto;aspect-ratio:1/1;max-height:62svh}
  .gmmapa-marca{top:10px;left:10px;padding:5px 9px 5px 6px}
  .gmmapa-marca img{height:26px}
  .gmmapa-marca span{display:none}
  .gmmapa-ficha,.gmmapa-ficha--compacta{position:relative;left:auto!important;top:auto!important;width:auto;display:grid;grid-template-columns:118px 1fr;
    border-radius:0;box-shadow:none;border-top:1px solid var(--gmmapa-linea)}
  .gmmapa-ficha img,.gmmapa-ficha--compacta img{height:100%;min-height:118px;aspect-ratio:auto}
  .gmmapa-ficha-c,.gmmapa-ficha--compacta .gmmapa-ficha-c{padding:11px 14px 12px}
  .gmmapa-ficha h3,.gmmapa-ficha--compacta h3{font-size:18px}
  .gmmapa-ficha-dato,.gmmapa-ficha--compacta .gmmapa-ficha-dato{margin:4px 0 7px;font-size:12.5px}
  .gmmapa-panel{height:auto;border-radius:20px}
  .gmmapa-pestana small{display:block}
  .gmmapa-lista{display:flex;gap:8px;padding:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .gmmapa-lista>li{flex:0 0 min(76%,250px);scroll-snap-align:start}
  .gmmapa-lugar{height:100%;border-color:var(--gmmapa-linea)}
}
@media (max-width:420px){
  .gmmapa-pestana{padding:12px 10px 11px;gap:6px}
  .gmmapa-pestana b{font-size:14px}
  .gmmapa-pestana small{display:none}
  .gmmapa-ficha,.gmmapa-ficha--compacta{grid-template-columns:104px 1fr}
}
@media (prefers-reduced-motion:reduce){
  .gmmapa-ruta,.gmmapa-ficha,.gmmapa-pin,.gmmapa-pin-gota,.gmmapa-pin-punto{transition:none}
}