/* Prueba 4 · El mapa (v3, sobre cobalto): la foto en su marco blanco, el mapa claro troquelado (borde blanco y canto), chinchetas de
   la paleta y fichas blanditas para las ciudades. */
.map{flex:1;display:flex;flex-direction:column;gap:var(--sp-3);-webkit-user-select:none;user-select:none}
.map-intro{display:flex;align-items:center;gap:var(--sp-4)}
/* la foto de la ronda: marco blanco con su canto, un poco torcida */
.map-photo{
  flex:none;margin:0 0 0 2px;width:106px;height:142px;padding:6px;border-radius:18px;background:#fff;
  box-shadow:0 6px 0 var(--cobalto-d);transform:rotate(-3deg);
}
.map-photo img{width:100%;height:100%;border-radius:12px;object-fit:cover}
.map-intro-text{min-width:0;display:flex;flex-direction:column;gap:var(--sp-2)}
.map-question{margin:0;text-wrap:balance;font:400 var(--t-m)/1 var(--display);color:#fff}
.map > .map-question{text-align:left}
.map-hint{margin:0;text-wrap:balance;font:600 16px/1.3 var(--ui);color:var(--fg-2)}
.map > .map-hint{text-align:left}

/* el mapa: troquelado como una pegatina (borde blanco y canto). isolation contiene los z-index de Leaflet (hasta 1000) para que no
   pasen por encima del marcador de arriba */
.map-box{
  position:relative;isolation:isolate;width:calc(100% - 8px);margin:4px auto 10px;height:clamp(270px,40vh,380px);border-radius:var(--r-tesela);overflow:hidden;
  background:#E8E4DC;box-shadow:0 0 0 4px #fff,0 10px 0 4px var(--cobalto-d);
}
.map-box.is-short{height:clamp(230px,34vh,330px)}
.map-box.leaflet-container{font:inherit;background:#E8E4DC}
.map .map-box .leaflet-bar a{width:44px;height:44px;line-height:44px;font-size:22px} /* 44 × 44: el mínimo para el dedo */
.map .map-box .leaflet-control-attribution{font-size:10px;color:var(--tinta);background:rgba(255,250,243,.8)}
.map .map-box .leaflet-control-attribution a{color:var(--cobalto)}
.map-box .leaflet-bottom{z-index:700}
.map-pin{background:none;border:0}
.map-pin-in{display:block;transform-origin:50% 100%;filter:drop-shadow(0 3px 0 rgba(29,20,66,.35))}
.map-box.is-picking .map-pin-in:not(.shake){animation:map-bob 1.1s ease-in-out infinite}
@keyframes map-bob{50%{transform:translateY(-5px)}}
/* el nombre del sitio sobre el mapa: una píldora de tinta */
.leaflet-tooltip.map-tip{
  padding:5px 10px;border:0;border-radius:var(--r-pill);background:var(--tinta);color:#fff;
  font:700 14px/1.1 var(--ui);white-space:nowrap;box-shadow:none;
}
.leaflet-tooltip-left.map-tip::before{border-left-color:var(--tinta)}
.leaflet-tooltip-right.map-tip::before{border-right-color:var(--tinta)}
.map .map-box .leaflet-bar a{background:var(--leche);color:var(--tinta);border-bottom-color:var(--leche-d)}
.map .map-box .leaflet-bar a:hover,.map .map-box .leaflet-bar a:focus{background:var(--girasol);color:var(--tinta)}
.map .map-box .leaflet-bar a.leaflet-disabled{background:var(--leche);color:#B9AE9C}
.map .map-box .leaflet-bar{border:0;border-radius:14px;overflow:hidden;box-shadow:0 4px 0 rgba(29,20,66,.3)}

/* ronda 3: la tira de fotos y las chinchetas de debajo */
.map-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.map-thumb{
  position:relative;aspect-ratio:3/4;padding:0;border-radius:16px;overflow:hidden;background:var(--tinta);
  box-shadow:inset 0 0 0 3px #fff;transition:transform .2s,box-shadow .2s;
}
.map-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.map-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px #fff;pointer-events:none}
.map-thumb.is-selected{transform:translateY(-4px) rotate(-2deg)}
.map-thumb.is-selected::after{box-shadow:inset 0 0 0 4px var(--girasol)}
.map-thumb.is-done{cursor:default}
.map-thumb.is-done::after{box-shadow:inset 0 0 0 4px var(--menta)}
.map-thumb.is-done img{opacity:.5}
.map-thumb:focus-visible{outline:3px solid #fff;outline-offset:3px}
.map-thumb-ok{
  position:absolute;z-index:1;right:6px;top:6px;display:none;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--menta);color:var(--tinta);font:800 14px/1 var(--ui);
}
.map-thumb.is-done .map-thumb-ok{display:grid}
.map-thumb-cap{
  position:absolute;left:0;right:0;bottom:0;padding:5px 3px 6px;text-align:center;overflow-wrap:anywhere;
  font:700 12.5px/1.1 var(--ui);color:#fff;background:var(--tinta);
}
.map-chips{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.map-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:48px;margin-bottom:5px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--leche);color:var(--tinta);box-shadow:0 5px 0 var(--cobalto-d);
  font:800 16px/1.1 var(--ui);transition:opacity .2s,transform .08s,box-shadow .08s,background-color .15s;
}
.map-chip span{min-width:0;overflow-wrap:anywhere}
.map-chip svg{flex:none;color:var(--chicle-d)}
.map-chips.is-picking .map-chip:not(:disabled){background:var(--girasol)}
.map-chip:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--cobalto-d)}
.map-chip:focus-visible{outline:3px solid #fff;outline-offset:2px}
.map-chip.is-done{background:var(--menta);transform:translateY(5px);box-shadow:none;cursor:default}
.map-chip.is-done svg{color:var(--tinta)}

/* pie: aviso de mapa caído, «Confirmar» y el resultado (lima si está cerca, leche con filo tomate si no) */
.map-foot{display:flex;flex-direction:column;gap:var(--sp-3)}
.map-skip{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 14px 12px;border-radius:var(--r-tesela);background:var(--tinta);
}
.map-skip p{margin:0;text-align:center;font:700 17px/1.3 var(--ui);color:#fff}
.map-result.is-near{background:var(--lima)}
.map-result.is-far{box-shadow:inset 0 0 0 3px var(--tomate)}

/* ronda 4: cae un McBesito, y luego el texto y las burbujas */
.map-drop{display:flex;justify-content:center;align-items:flex-end;height:132px}
.map-drop-img{width:120px;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 6px 0 var(--cobalto-d));animation:map-drop 1.3s both}
@keyframes map-drop{
  0%{transform:translateY(-380px) rotate(-14deg);opacity:0;animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  7%{opacity:1}
  50%{transform:translateY(0) rotate(5deg);animation-timing-function:ease-out}
  66%{transform:translateY(-38px) rotate(-3deg);animation-timing-function:ease-in}
  80%{transform:translateY(0) rotate(2deg);animation-timing-function:ease-out}
  90%{transform:translateY(-9px) rotate(0);animation-timing-function:ease-in}
  100%{transform:translateY(0) rotate(0)}
}
.map-prize{animation:map-fade .5s ease-out 1.25s both}
.map-chat{animation:map-fade .6s ease-out .2s both}
.map-drop ~ .map-chat{animation-delay:1.8s} /* tras acertar, las burbujas esperan a que caiga el McBesito */
@keyframes map-fade{from{opacity:0;transform:translateY(10px)}}

/* el SE con las barras de Safari (548 px): foto y mapa algo más bajos, para que «Confirmar» se vea sin bajar */
@media (max-height:600px){
  .map-photo{width:90px;height:120px}
  .map-box{height:clamp(220px,40vh,380px)}
  .map-box.is-short{height:clamp(200px,34vh,330px)}
}

@media (prefers-reduced-motion:reduce){
  .map-drop-img,.map-prize,.map-chat,.map-box.is-picking .map-pin-in{animation:none !important}
  .map-thumb,.map-chip{transition-duration:.01ms !important}
}

/* sin clave de CARTO se usan las teselas de OpenStreetMap: claras, un poco menos saturadas para que manden las chinchetas */
.map-box.is-light-tiles .leaflet-tile-pane{filter:saturate(.55) contrast(1.04)}