/* ══════════════════════════════════════════════════════════════════════
   Territorio Keybourne · el mapa de las casas
   ─────────────────────────────────────────────────────────────────────
   Sustituye a la tira horizontal de marcas. Usa los tokens de
   keybourne.css: aquí no se define ni un color ni una letra propios.

   El mapa es MapLibre con estilo escrito a mano (ver mapa.js): llega
   como datos, no como imagen, así que no trae ni un rótulo ajeno.
   ══════════════════════════════════════════════════════════════════════ */

.mp{position:relative;width:100vw;margin-inline:calc(50% - 50vw);
  height:min(100svh,600px);padding:var(--kb-6);background:var(--kb-fondo)}
.mp__lienzo{width:100%;height:100%;border-radius:var(--kb-radio-caja);
  background:var(--kb-piedra)}

/* Los mandos de MapLibre vienen en gris de fábrica; aquí van en la paleta. */
.maplibregl-map{font-family:var(--kb-texto);background:var(--kb-piedra)}
.maplibregl-ctrl-attrib{font-size:9.5px;background:rgba(247,243,234,.82);color:var(--kb-peltre)}
.maplibregl-ctrl-attrib a{color:var(--kb-casa)}
.maplibregl-ctrl-group{background:rgba(247,243,234,.94);border:var(--kb-linea);
  box-shadow:0 6px 18px -8px rgba(35,42,32,.4)}
.maplibregl-ctrl-group button+button{border-top:var(--kb-linea)}
.maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:none;opacity:.75}

/* ── 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(35,42,32,.35))}
.mp-pin .num{position:absolute;inset:2px 0 auto 0;text-align:center;
  font:600 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--kb-tarjeta);padding-top:5px;pointer-events:none}
/* El de la unidad abierta va en cobre y algo mayor: no es una ciudad más. */
.mp-pin--unidad{width:30px;height:39px;z-index:2}

/* Sin rótulo bajo el pin: en la vista mundial Cancún, Playa, Tulum y Cozumel
   caen tan juntas que los nombres se montan unos sobre otros. El nombre sale
   en el panel. */

/* ── 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, así ninguna lista
   empuja a otra hacia abajo. */
.mp-panel{position:absolute;z-index:20;top:calc(var(--kb-6) + var(--kb-4));
  left:calc(var(--kb-6) + var(--kb-4));
  max-width:calc(100vw - var(--kb-6) * 3);
  max-height:calc(min(100svh,600px) - var(--kb-6) * 2 - var(--kb-5));
  display:flex;align-items:stretch;color:var(--kb-tinta);
  background:rgba(247,243,234,.94);backdrop-filter:blur(16px) saturate(140%);
  border:var(--kb-linea);border-radius:var(--kb-radio-caja);overflow:hidden;
  box-shadow:0 20px 56px -22px rgba(35,42,32,.5)}

.mp-col{display:flex;flex-direction:column;min-height:0;flex:0 0 auto;
  border-right:var(--kb-linea)}
.mp-col:last-child{border-right:0}
/* Cerrada no ocupa nada; abierta, su ancho propio. Se anima el ancho para
   que el despliegue se vea salir de la columna anterior. */
.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:186px}
#mpFicha.abierta{width:262px}

.mp-col__cab{padding:var(--kb-3) var(--kb-4) 11px;border-bottom:var(--kb-linea);
  display:flex;align-items:center;gap:9px;flex:0 0 auto}
.mp-col__cab b{font:600 12px/1.2 var(--kb-texto);color:var(--kb-tinta)}
.mp-volver{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;
  border:var(--kb-linea);border-radius:50%;background:none;cursor:pointer;
  color:var(--kb-peltre);font-size:12px;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:min(220px,calc(100vw - var(--kb-6) * 3))}
.mp-regiones{display:grid;padding:var(--kb-2) 0;align-content:start}
.mp-regiones button{font:500 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.13em;text-transform:uppercase;color:var(--kb-peltre);
  background:none;border:0;padding:10px var(--kb-4);cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:var(--kb-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:14px;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:.55;transform:none}
.mp-regiones button[aria-expanded="true"]{color:var(--kb-tinta);background:rgba(70,81,62,.12)}

/* ── Columna dos · las ciudades ── */
.mp-ciudades{display:grid;align-content:start;padding:2px 0}
.mp-ciudades button{background:none;border:0;cursor:pointer;text-align:left;
  padding:6px var(--kb-4);display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:12px;
  transition:background-color .22s ease}
.mp-ciudades b{font:500 12.5px/1.25 var(--kb-texto);color:var(--kb-tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-ciudades i{font-style:normal;color:var(--kb-acento);margin-left:4px}
.mp-ciudades span{font:500 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;text-transform:uppercase;color:var(--kb-peltre)}
.mp-ciudades button[aria-current="true"]{background:rgba(70,81,62,.12)}

/* ── Columna tres · la ficha ── */
.mp-ficha{padding:var(--kb-3) var(--kb-4) var(--kb-3)}
.mp-foto{aspect-ratio:16/9;background:var(--kb-casa);display:grid;place-items:center;
  border-radius:var(--kb-radio-caja);overflow:hidden;margin-bottom:var(--kb-3);
  font-family:var(--kb-logo);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(247,243,234,.45)}
.mp-foto img{width:100%;height:100%;object-fit:cover;display:block}
.mp-ficha b{display:block;font-size:15px;font-weight:600;line-height:1.25;color:var(--kb-tinta)}
.mp-ficha em{font-style:normal;font:500 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--kb-peltre);
  display:block;margin:5px 0 9px}
.mp-ficha ul{margin:0;padding:0;list-style:none;display:grid;gap:0}
.mp-ficha li{border-bottom:var(--kb-linea)}
.mp-ficha li:last-child{border-bottom:0}

/* Cada unidad 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(--kb-2);background:none;border:0;cursor:pointer;text-align:left;
  padding:6px 6px 6px 0;font:400 12.5px/1.4 var(--kb-texto);color:var(--kb-tinta);
  transition:color .2s ease,padding-left .2s cubic-bezier(.23,1,.32,1)}
.mp-unidad i{font-style:normal;font-size:13px;color:var(--kb-peltre);opacity:.45;
  transition:opacity .2s ease,transform .2s cubic-bezier(.23,1,.32,1)}
.mp-aviso{margin:0 0 11px;font-size:11.5px;line-height:1.45;color:var(--kb-peltre)}
.mp-volver-ciudad{background:none;border:var(--kb-linea);border-radius:var(--kb-radio-boton);
  cursor:pointer;padding:7px 11px;width:100%;text-align:left;
  font:500 9.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.11em;
  text-transform:uppercase;color:var(--kb-peltre);
  transition:color .2s ease,border-color .2s ease}

@media (hover:hover) and (pointer:fine){
  .mp-regiones button:hover{color:var(--kb-tinta);background:rgba(70,81,62,.07)}
  .mp-ciudades button:hover{background:rgba(70,81,62,.07)}
  .mp-volver:hover,.mp-volver-ciudad:hover{color:var(--kb-tinta);border-color:var(--kb-casa)}
  .mp-unidad:hover{color:var(--kb-casa);padding-left:5px}
  .mp-unidad:hover i{opacity:.9;transform:translateX(2px)}
}

/* En móvil no caben tres columnas al lado: se ve UNA a la vez, la última
   abierta, y se vuelve con la flecha. El escritorio no se toca. */
@media (max-width:860px){
  .mp{padding:var(--kb-4)}
  .mp-panel{top:auto;left:var(--kb-5);right:var(--kb-5);bottom:var(--kb-5);
    max-width:none;max-height:min(56vh,340px)}
  .mp-col{border-right:0}
  #mpRegiones{width:100%}
  .mp-panel.paso-1 #mpRegiones,
  .mp-panel.paso-2 #mpRegiones,
  .mp-panel.paso-2 #mpCiudades{display:none}
  #mpCiudades.abierta,#mpFicha.abierta{width:100%}
  /* Cerrada, fuera del todo. Con ancho cero la columna seguía midiendo lo
     alto de su lista, y al volver a las regiones el panel se quedaba con ese
     alto: cinco renglones arriba y un hueco vacío debajo. */
  .mp-col--plegable:not(.abierta){display:none}
  .mp-foto{aspect-ratio:auto;height:112px}
}

@media (prefers-reduced-motion:reduce){
  .mp-col--plegable,.mp-pin,.mp-unidad,.mp-regiones button{transition-duration:.01ms}
}
/* Margen lateral mínimo de la casa en el teléfono: 28 px, también el mapa. */
@media (max-width:619px){.mp{padding-inline:28px}}
.mp-pronto{display:inline-block;margin-left:6px;font-size:.78em;letter-spacing:.08em;text-transform:uppercase;opacity:.7}

/* Móvil (2026-09-25): nada por debajo de 12 px y zoom con dedo de verdad.
   La atribución de MapLibre se deja como viene: es aviso legal, no contenido. */
@media (max-width:759px){
  .mp-regiones button,.mp-panel b,.mp-ciudades span,.mp-ficha em,.mp-pronto,.mp-volver-ciudad,.mp-foto{font-size:12px !important}
  .mp-pin .num{font-size:12px !important}
  .maplibregl-ctrl-group button{width:40px !important;height:40px !important}
}

/* Contador del mapa (2026-09-25): cuadritos flotando sobre el mapa, bajo las
   regiones, gris con velo verde (Carlos). Para que no se tapen, el panel nunca
   baja más que ellos: su alto se limita y las listas largas hacen scroll dentro. */
.mp-cifras{position:absolute;z-index:10;left:calc(var(--kb-6) + var(--kb-4));bottom:calc(var(--kb-6) + var(--kb-4));
  display:grid;grid-template-columns:repeat(5,58px);gap:5px}
.mp-cifras div{height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(rgba(70,81,62,.62),rgba(70,81,62,.62)),rgba(220,213,198,.22);
  border:1px solid rgba(247,243,234,.16);border-radius:var(--kb-radio-caja);
  backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%);color:var(--kb-fondo)}
.mp-cifras b{font:400 18px/1 var(--kb-texto)}
.mp-cifras span{font:500 9.5px/1 var(--kb-texto);letter-spacing:0;color:rgba(247,243,234,.82)}
/* alto del mapa − márgenes del panel y de las cifras − la fila de cuadros (52) − 10 de aire.
   México (12 ciudades) cabe entera porque cada ciudad va en una sola línea. */
@media (min-width:861px){
  .mp-panel{max-height:calc(min(100svh,600px) - (var(--kb-6) + var(--kb-4)) * 2 - 52px - 10px)}
}
.mp-pin--pronto svg{filter:drop-shadow(0 3px 6px rgba(35,42,32,.25))}
@media (max-width:860px){
  .mp{height:auto}
  .mp__lienzo{height:min(80svh,560px)}
  .mp-cifras{position:static;width:auto;grid-template-columns:repeat(5,1fr);gap:5px;margin-bottom:var(--kb-3)}
  .mp-cifras div{height:auto;padding:12px 2px;background:var(--kb-casa);border-color:transparent}
  .mp-cifras b{font-size:20px}
  .mp-cifras span{font-size:12px;letter-spacing:0;text-transform:none}
}

/* ══ Mapa en el teléfono (Carlos, 2026-09-25) ══
   El panel tapaba más de la mitad del mapa. Ahora el mapa va entero arriba y el
   panel debajo, en el flujo de la página: las regiones son pastillas que se
   deslizan en una fila, y al tocar una sus ciudades aparecen justo debajo. */
@media (max-width:860px){
  .mp__lienzo{height:min(60svh,430px)}
  .mp-panel{position:static;display:block;margin-top:12px;max-height:none;box-shadow:none;border-radius:var(--kb-radio-caja)}
  #mpRegiones .mp-col__cab{display:none}
  .mp-panel.paso-1 #mpRegiones,.mp-panel.paso-2 #mpRegiones{display:block}
  .mp-regiones{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:12px;overscroll-behavior-x:contain}
  .mp-regiones::-webkit-scrollbar{display:none}
  .mp-regiones button{flex:none;width:auto;white-space:nowrap;padding:11px 16px;border:1px solid var(--kb-piedra);border-radius:99px;
    font:500 12px/1 var(--kb-texto) !important;letter-spacing:.08em}
  .mp-regiones button::after{display:none}
  .mp-regiones button[aria-expanded="true"]{background:var(--kb-casa);border-color:var(--kb-casa);color:var(--kb-fondo)}
  #mpCiudades.abierta,#mpFicha.abierta{border-top:1px solid var(--kb-piedra)}
  .mp-col__cuerpo{max-height:none;overflow:visible}
}

/* Teléfono: selector de región con flechas (Carlos, 2026-09-25). En escritorio no existe. */
.mp-paso{display:none}
@media (max-width:860px){
  .mp-regiones{display:none !important}
  .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:1px solid var(--kb-piedra);background:var(--kb-tarjeta);cursor:pointer;position:relative}
  .mp-paso__f::before{content:"";position:absolute;inset:0;margin:auto;width:9px;height:9px;border:solid var(--kb-tinta);
    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:4px;padding:10px 12px;border:1px solid var(--kb-piedra);border-radius:99px;
    background:var(--kb-tarjeta);cursor:pointer;color:var(--kb-tinta)}
  .mp-paso__n b{font:500 16px/1 var(--kb-logo);letter-spacing:.16em;text-transform:uppercase}
  .mp-paso__n small{font:500 12px/1 var(--kb-texto);letter-spacing:.1em;color:var(--kb-peltre)}
  .mp-paso.abierta .mp-paso__n{background:var(--kb-casa);border-color:var(--kb-casa);color:var(--kb-fondo)}
  .mp-paso.abierta .mp-paso__n small{color:rgba(239,233,222,.75)}
}
@media (max-width:860px){#mpCiudades .mp-col__cab{display:none}}   /* el selector ya dice la región */