/* ══════════════════════════════════════════════════════════════════════
   Nuestro territorio · el mapa de las casas de Anderson's
   ─────────────────────────────────────────────────────────────────────
   Portado del «Territorio» de Keybourne. Usa los tokens --ga- de
   andersons.css. El mapa es MapLibre con estilo escrito a mano (mapa.js):
   tierra navy claro, mar en noche, pines en cielo con borde blanco.
   Ningún cálido (rojo, naranja, dorado, amarillo), sin cursivas, sin
   sombras interiores y sin partir palabras.
   ══════════════════════════════════════════════════════════════════════ */

.pd-mapa .pd-entrada{color:rgba(223,234,244,.86)}

.mp{--mp-alto:min(100svh,620px);position:relative;height:var(--mp-alto);
  hyphens:manual;-webkit-hyphens:manual;overflow-wrap:normal;word-break:normal}
.mp__lienzo{width:100%;height:100%;border-radius:var(--ga-radio-caja);overflow:hidden;
  background:#485871;border:1px solid rgba(201,222,240,.18)}
.mp .em,.mp .i,.mp cite,.mp small{font-style:normal}

/* Los mandos de MapLibre vienen en gris de fábrica; aquí van en la paleta. */
.mp .maplibregl-map{font-family:var(--ga-texto);background:#485871}
.mp .maplibregl-ctrl-attrib{font-size:9.5px;background:rgba(245,248,251,.86);color:var(--ga-acero)}
.mp .maplibregl-ctrl-attrib a{color:var(--ga-marina)}
.mp .maplibregl-ctrl-group{background:rgba(245,248,251,.94);border:var(--ga-borde);
  box-shadow:0 6px 18px -8px rgba(22,32,47,.45)}
.mp .maplibregl-ctrl-group button+button{border-top:var(--ga-borde)}
.mp .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:none;opacity:.75}
.mp .maplibregl-ctrl-top-right{top:6px;right:6px}

/* ── Los pines ── */
.mp-pin{width:26px;height:34px;display:block;cursor:pointer;
  transition:transform .22s cubic-bezier(.23,1,.32,1)}
.mp-pin:hover,.mp-pin.viva{transform:translateY(-3px) scale(1.12)}
.mp-pin svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 4px 7px rgba(14,20,32,.55))}
.mp-pin .num{position:absolute;inset:2px 0 auto 0;text-align:center;
  font:700 10px/1 var(--ga-texto);font-variant-numeric:tabular-nums;
  color:var(--ga-marina);padding-top:5px;pointer-events:none}
/* Con número el punto central estorba: el número hace de punto. */
.mp-pin:has(.num) circle{display:none}
/* El de la casa abierta: blanco y algo mayor, no es una ciudad más. */
.mp-pin--unidad{width:32px;height:42px;z-index:2}

/* ── El panel: tres columnas encadenadas ──
   Región → ciudades → ficha. Cada paso despliega la siguiente hacia la
   derecha: el panel crece a lo ancho y nunca a lo largo. */
.mp-panel{position:absolute;z-index:20;top:var(--ga-4);left:var(--ga-4);
  max-width:calc(100% - var(--ga-4) * 2 - 48px);
  max-height:calc(var(--mp-alto) - var(--ga-4) * 2);
  display:flex;align-items:stretch;color:var(--ga-tinta);
  background:rgba(245,248,251,.93);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.7);border-radius:20px;overflow:hidden;
  box-shadow:0 22px 56px -22px rgba(14,20,32,.6)}

.mp-col{display:flex;flex-direction:column;min-height:0;flex:0 0 auto;
  border-right:var(--ga-borde)}
.mp-col:last-child{border-right:0}
/* Cerrada no ocupa nada; abierta, su ancho propio. */
.mp-col--plegable{width:0;opacity:0;overflow:hidden;
  transition:width .38s cubic-bezier(.23,1,.32,1), opacity .26s ease}
.mp-col--plegable.abierta{opacity:1}
#mpCiudades.abierta{width:200px}
#mpFicha.abierta{width:286px}

.mp-col__cab{padding:var(--ga-3) var(--ga-4) 11px;border-bottom:var(--ga-borde);
  display:flex;align-items:center;gap:9px;flex:0 0 auto}
.mp-col__cab b{font:600 12px/1.2 var(--ga-texto);letter-spacing:var(--ga-track-etiqueta);
  text-transform:uppercase;color:var(--ga-marina)}
.mp-volver{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;
  border:var(--ga-borde);border-radius:50%;background:var(--ga-tarjeta);cursor:pointer;
  color:var(--ga-acero);font-size:13px;line-height:1;padding:0;
  transition:color .2s ease,border-color .2s ease}
.mp-col__cuerpo{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto}

/* ── Columna uno · las regiones ── */
#mpRegiones{width:210px}
.mp-regiones{display:grid;padding:var(--ga-2) 0;align-content:start}
.mp-regiones button{font:500 11px/1.2 var(--ga-texto);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ga-acero);
  background:none;border:0;padding:12px var(--ga-4);cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--ga-2);
  transition:color .25s cubic-bezier(.23,1,.32,1),background-color .25s cubic-bezier(.23,1,.32,1)}
/* La flecha sólo aparece en la región abierta: señala de dónde sale la columna. */
.mp-regiones button::after{content:"›";font-size:15px;opacity:0;transform:translateX(-4px);
  transition:opacity .25s ease,transform .25s cubic-bezier(.23,1,.32,1)}
.mp-regiones button[aria-expanded="true"]::after{opacity:.6;transform:none}
.mp-regiones button[aria-expanded="true"]{color:var(--ga-marina);background:var(--ga-cielo-claro);font-weight:600}

/* ── Columna dos · las ciudades ── */
.mp-ciudades{display:grid;align-content:start;padding:4px 0}
.mp-ciudades button{background:none;border:0;cursor:pointer;text-align:left;
  padding:8px var(--ga-4);display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;
  transition:background-color .22s ease}
.mp-ciudades b{font:500 13px/1.3 var(--ga-texto);color:var(--ga-tinta)}
.mp-ciudades span{font:600 11px/1 var(--ga-texto);font-variant-numeric:tabular-nums;color:var(--ga-acero-2)}
.mp-ciudades button[aria-current="true"]{background:var(--ga-cielo-claro)}
.mp-ciudades button[aria-current="true"] b{font-weight:600;color:var(--ga-marina)}

/* ── Columna tres · la ficha ── */
.mp-ficha{padding:var(--ga-3) var(--ga-4) var(--ga-4)}
.mp-foto{aspect-ratio:16/9;background:var(--ga-marina);
  border-radius:12px;overflow:hidden;margin-bottom:var(--ga-3)}
.mp-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mp-ficha__nombre{display:block;font:600 16px/1.25 var(--ga-texto);color:var(--ga-tinta)}
.mp-ficha__dato{display:block;margin:6px 0 10px;font:500 10.5px/1.3 var(--ga-texto);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ga-acero)}
.mp-ficha ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.mp-ficha li{border-bottom:var(--ga-borde)}
.mp-ficha li:last-child{border-bottom:0}

/* Cada casa es un botón de fila entera: se pulsa y el mapa va a ella. */
.mp-unidad{width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:var(--ga-2);background:none;border:0;cursor:pointer;text-align:left;
  padding:8px 4px 8px 0;font:400 13px/1.35 var(--ga-texto);color:var(--ga-tinta);
  transition:color .2s ease,padding-left .2s cubic-bezier(.23,1,.32,1)}
.mp-unidad strong{display:block;font-weight:600}
.mp-unidad small{display:block;margin-top:2px;font-size:11.5px;color:var(--ga-acero)}
.mp-flecha{font-size:15px;color:var(--ga-acero);opacity:.5;flex:0 0 auto;
  transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}

.mp-zona{margin:0 0 6px;font:600 12.5px/1.4 var(--ga-texto);color:var(--ga-marina)}
.mp-dir{margin:0 0 6px;font-size:12.5px;line-height:1.5;color:var(--ga-acero)}
.mp-tel{margin:0 0 12px;font-size:12.5px;line-height:1.4}
.mp-tel a{color:var(--ga-marina);text-decoration:underline;text-decoration-color:var(--ga-cielo);
  text-underline-offset:3px;text-decoration-thickness:2px}
.mp-aviso{margin:0 0 12px;padding:9px 11px;border-radius:10px;background:var(--ga-cielo-claro);
  font-size:12px;line-height:1.45;color:var(--ga-acero)}
.mp-marca{display:block;text-align:center;margin-bottom:8px;padding:10px 14px;border-radius:var(--ga-radio-boton);
  background:var(--ga-marina);color:#fff;text-decoration:none;
  font:600 11px/1 var(--ga-texto);letter-spacing:var(--ga-track-boton);text-transform:uppercase;
  transition:background-color .2s ease}
.mp-volver-ciudad{background:none;border:var(--ga-borde);border-radius:var(--ga-radio-boton);
  cursor:pointer;padding:9px 14px;width:100%;text-align:center;
  font:500 11px/1.2 var(--ga-texto);letter-spacing:.08em;
  color:var(--ga-acero);transition:color .2s ease,border-color .2s ease}

@media (hover:hover) and (pointer:fine){
  .mp-regiones button:hover{color:var(--ga-marina);background:rgba(201,222,240,.5)}
  .mp-ciudades button:hover{background:rgba(201,222,240,.5)}
  .mp-volver:hover,.mp-volver-ciudad:hover{color:var(--ga-marina);border-color:var(--ga-acero-2)}
  .mp-unidad:hover{color:var(--ga-marina);padding-left:5px}
  .mp-unidad:hover .mp-flecha{opacity:.95;transform:translateX(2px)}
  .mp-marca:hover{background:var(--ga-marina-2)}
}

/* ── Contador: cuadritos de cristal navy flotando abajo a la izquierda ── */
.mp-cifras{position:absolute;z-index:10;left:var(--ga-4);bottom:var(--ga-4);
  display:grid;grid-template-columns:repeat(4,66px);gap:6px}
.mp-cifras div{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:rgba(30,43,64,.62);border:1px solid rgba(201,222,240,.22);border-radius:12px;
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);color:#fff}
.mp-cifras b{font:500 19px/1 var(--ga-texto);font-variant-numeric:tabular-nums}
.mp-cifras span{font:500 10px/1 var(--ga-texto);color:rgba(223,234,244,.85)}
/* El panel nunca baja hasta las cifras: alto limitado y scroll dentro. */
@media (min-width:861px){
  .mp-panel{max-height:calc(var(--mp-alto) - var(--ga-4) * 2 - 56px - 12px)}
}

@media (prefers-reduced-motion:reduce){
  .mp-col--plegable,.mp-pin,.mp-unidad,.mp-regiones button{transition-duration:.01ms}
}

/* ══ Teléfono: el mapa entero arriba y el panel DEBAJO, en el flujo ══
   (así quedó en Keybourne). Se ve una columna a la vez; el selector de
   región con flechas sustituye a la lista. */
.mp-paso{display:none}
@media (max-width:860px){
  .mp{height:auto;--mp-alto:auto}
  .mp__lienzo{height:min(60svh,430px)}
  .mp-cifras{position:static;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:var(--ga-3)}
  .mp-cifras div{height:auto;padding:12px 2px;background:rgba(201,222,240,.12);border-color:rgba(201,222,240,.2);
    backdrop-filter:none;-webkit-backdrop-filter:none}
  .mp-cifras b{font-size:20px}
  .mp-cifras span{font-size:12px}

  .mp-panel{position:static;display:block;margin-top:12px;max-width:none;max-height:none;
    box-shadow:none;border-radius:18px;background:var(--ga-fondo)}
  .mp-col{border-right:0}
  #mpRegiones{width:100%}
  #mpRegiones .mp-col__cab,#mpCiudades .mp-col__cab{display:none}
  .mp-regiones{display:none !important}
  .mp-panel.paso-2 #mpCiudades{display:none}
  #mpCiudades.abierta,#mpFicha.abierta{width:100%;border-top:var(--ga-borde)}
  /* Cerrada, fuera del todo: con ancho cero seguía midiendo lo alto de su lista. */
  .mp-col--plegable:not(.abierta){display:none}
  .mp-col__cuerpo{max-height:none;overflow:visible}
  .mp-foto{aspect-ratio:auto;height:150px}

  .mp-paso{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;gap:10px;padding:12px}
  .mp-paso__f{width:44px;height:44px;border-radius:50%;border:var(--ga-borde);background:var(--ga-tarjeta);cursor:pointer;position:relative}
  .mp-paso__f::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border:solid var(--ga-marina);
    border-width:0 1.5px 1.5px 0;transform:translateX(-2px) rotate(-45deg)}
  .mp-paso__f[data-d="-1"]::before{transform:translateX(2px) rotate(135deg)}
  .mp-paso__n{display:grid;justify-items:center;gap:5px;padding:10px 12px;border:var(--ga-borde);border-radius:99px;
    background:var(--ga-tarjeta);cursor:pointer;color:var(--ga-marina)}
  .mp-paso__n b{font:500 15px/1.1 var(--ga-titular);letter-spacing:.14em;text-transform:uppercase}
  .mp-paso__n small{font:500 12px/1 var(--ga-texto);letter-spacing:.1em;color:var(--ga-acero)}
  .mp-paso.abierta .mp-paso__n{background:var(--ga-marina);border-color:var(--ga-marina);color:#fff}
  .mp-paso.abierta .mp-paso__n small{color:rgba(223,234,244,.8)}
}

/* Móvil: nada por debajo de 12 px y botones de dedo. */
@media (max-width:759px){
  .mp-col__cab b,.mp-ciudades span,.mp-ficha__dato,.mp-unidad small,.mp-volver-ciudad,.mp-marca,
  .mp-dir,.mp-zona,.mp-tel,.mp-aviso{font-size:12px}
  .mp-ciudades b,.mp-unidad{font-size:14px}
  .mp-ficha__nombre{font-size:17px}
  .mp-ciudades button,.mp-unidad{min-height:44px}
  .mp-pin .num{font-size:11px}
}
/* móvil: las cifras salen del mapa y quedan sobre la banda clara → tarjetas navy, texto claro (antes blanco sobre celeste) */
@media (max-width:860px){.mp-cifras div{background:var(--ga-marina);border-color:transparent}.mp-cifras b{color:#fff}.mp-cifras span{color:var(--ga-cielo)}}