/* ==========================================================
   UBICACIÓN — DÓNDE ESTAMOS
   ----------------------------------------------------------
   Imagen de satélite real, en un círculo, y un botón que lanza el
   vuelo. Aquí hubo un globo dibujado a mano: estaba bien hecho y
   era la respuesta equivocada — un dibujo de la Tierra no dice
   dónde está el sitio, dice que alguien ha dibujado la Tierra.

   El círculo se queda porque es lo que hace que esto se lea como
   mirar por una portilla y no como un mapa incrustado. Y no
   cambia de tamaño en todo el viaje: lo único que cambia es
   cuánto mundo cabe dentro.
   ========================================================== */
.ubi{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.2rem, 3vh, 2rem);
  margin:clamp(1.4rem, 4vh, 2.6rem) 0 clamp(1.8rem, 5vh, 3rem);
}
.ubi__fijo{
  position:relative;
  /* AISLADO. Sin esto, el menú se abría POR DEBAJO del globo.
     ----------------------------------------------------------
     Leaflet coloca sus capas con z-index propios que llegan a 400
     y 800. "position:relative" a secas NO crea contexto de apilado,
     así que esos números no se quedaban dentro del círculo: subían
     al nivel de la página y competían de tú a tú con el menú, que
     está en 200. Cuatrocientos gana a doscientos, y el mapa se
     ponía delante de la pantalla del menú.

     La tentación es subirle el z-index al menú hasta que gane. Eso
     no arregla nada: deja la puerta abierta a que el siguiente
     componente con números altos vuelva a colarse. "isolation"
     encierra toda la escala del mapa dentro de su círculo, y desde
     fuera el círculo entero vale lo que valga su sitio en la
     página — que es lo que debería haber valido siempre. */
  isolation:isolate;
  width:min(82vmin, 520px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  /* La sombra lo separa del fondo blanco: sin ella, un círculo
     claro sobre una página clara flota sin apoyarse en nada. */
  box-shadow:0 24px 60px -30px rgba(14,13,11,.45),
             0 0 0 1px var(--velo-borde, rgba(14,13,11,.10)) inset;
}
/* ==========================================================
   EL GLOBO Y EL MAPA, UNO DELANTE DEL OTRO
   ----------------------------------------------------------
   Los dos ocupan el mismo círculo, apilados. Arriba el globo, que
   es lo que se ve al llegar; debajo el mapa, esperando. Al pulsar,
   el globo se aparta y aparece el mapa ya centrado en el sitio.

   No es un truco para simular el zoom: son dos cosas distintas
   —una esfera girable y un mapa navegable— y el relevo ocurre en
   el único momento en que enseñan lo mismo, con España de frente.
   ========================================================== */
#globo3d{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:2;
  cursor:grab;
  touch-action:none;             /* el dedo gira la bola, no hace scroll */
  /* Se dibuja a media resolución y se estira: el suavizado del
     navegador tapa el escalón sin que haya que calcular el doble
     de píxeles en cada fotograma. */
  image-rendering:auto;
  transition:opacity .5s var(--ease-out, ease-out),
             transform .5s var(--ease-out, ease-out);
}
#globo3d.es-cogido{ cursor:grabbing }

/* El relevo. El globo se va creciendo un poco —como si se
   entrara en él— en vez de desvanecerse sin más: irse hacia
   delante es lo que encadena con el vuelo que empieza justo
   después. */
.ubi.es-mapa #globo3d{
  opacity:0; transform:scale(1.12); pointer-events:none;
}

/* Mientras el globo gira buscando España, el botón espera. */
.ubi.es-girando #botonGlobo{ opacity:.5; pointer-events:none }

/* Si las teselas no bajan no hay esfera que enseñar, así que el
   mapa se queda a la vista desde el principio y el viaje sigue
   funcionando igual: solo se pierde el globo. */
.ubi.es-sin-globo #globo3d{ display:none }

#map{
  width:100%; height:100%;
  background:var(--fondo-2, #f4f2ed);
  /* Hasta que se pulsa, el mapa no acepta gestos: si los
     aceptara, pasar por encima con la rueda te robaría el scroll
     de la página. Se enciende al llegar. */
  cursor:default;
}
#map.es-vivo{ cursor:grab }
#map.es-vivo:active{ cursor:grabbing }
/* La atribución de Esri es obligatoria —son sus imágenes— pero no
   tiene por qué gritar: pequeña y en una esquina. */
.ubi .leaflet-control-attribution{
  background:rgba(255,255,255,.72);
  font-size:9px; padding:1px 5px;
}

/* ---------- El localizador ----------
   Es un marcador de Leaflet anclado a las coordenadas, no una
   imagen puesta sobre el centro de la caja: con el mapa centrado
   parecería lo mismo, pero al arrastrarlo el sitio se mueve y el
   centro no. Anclado, la mariposa se queda en la fuente. */
.ubi__marca{
  display:grid; place-items:center;
  /* La sombra, afinada con el icono: la de antes tenía diez píxeles
     de difuminado bajo un icono de treinta; bajo uno de once, esa
     misma sombra sería más grande que lo que sombrea. */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.65));
}
/* Once píxeles. Grande no señalaba: TAPABA. Y lo que se leía como
   "enorme" no era solo la mariposa — era la mariposa más el punto
   blanco con cerco negro que llevaba debajo más la sombra: tres
   cosas superpuestas que juntas hacían una mancha del doble.
   Ahora es una sola, centrada en el recinto, y sin desplazamiento
   vertical: el ancla ya está en su centro. */
.ubi__marca img{
  width:11px; height:auto; display:block;
}

/* El aviso de "lo has abierto con doble clic". Solo lo pone el JS
   cuando la dirección empieza por file://, así que en el sitio
   publicado esta regla no llega a usarse nunca. */
.ubi__nota-local{
  max-width:46ch; margin:0; text-align:center;
  font-size:.78rem; line-height:1.5;
  color:var(--texto-2, #5a5750);
  border:1px dashed var(--velo-borde, rgba(14,13,11,.22));
  border-radius:12px; padding:.7rem 1rem;
}

/* El perímetro del parque, respirando muy despacio. Es lo único
   que se mueve en la vista de llegada, así que es donde va la
   mirada — que es exactamente el sitio al que hay que mirar. */
.ubi__recinto{ animation:recinto-late 3.4s ease-in-out infinite }
@keyframes recinto-late{
  0%, 100%{ stroke-opacity:.95 }
  50%     { stroke-opacity:.55 }
}

.ubi.es-volando #botonGlobo{ opacity:.5; pointer-events:none }

/* Si Leaflet no carga, el círculo vacío sobra: la dirección y el
   enlace a Google Maps de abajo siguen ahí, que es lo que hay que
   poder leer. */
.ubi.es-sin-mapa .ubi__fijo,
.ubi.es-sin-mapa #botonGlobo{ display:none }

/* ==========================================================
   EL TEXTO DE DEBAJO
   ----------------------------------------------------------
   Las dos cajas —la nota de Google Maps y los tres datos— medían
   508 y 820 px. Dos anchos distintos, uno debajo del otro, y
   ninguno alineado con el titular: eso es lo que se veía "un poco
   mal" sin poder decir por qué. Ahora las dos ocupan la columna.
   ========================================================== */
body.es-interior .tienda-nota,
body.es-interior .tienda-info{
  width:100%; max-width:none;
  box-sizing:border-box;
}
body.es-interior .tienda-nota{
  padding:clamp(.8rem, 2vw, 1.05rem) clamp(1rem, 2.4vw, 1.4rem);
  margin:0 0 .8rem;
  display:flex; align-items:flex-start; gap:.6rem;
  color:var(--texto-2);
}
body.es-interior .tienda-nota a{ color:var(--texto) }
body.es-interior .tienda-nota svg{ flex:0 0 auto; margin-top:.25em }

body.es-interior .tienda-info{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:clamp(1rem, 2.6vw, 2rem);
  padding:clamp(1.1rem, 2.6vw, 1.6rem);
  line-height:1.6;
  color:var(--texto-2);
}
/* Los rótulos, en versalita: antes eran negrita del mismo cuerpo
   que el dato, así que rótulo y dato pesaban lo mismo y había que
   leerlos enteros para saber cuál era cuál. */
body.es-interior .tienda-info strong{
  display:block; margin-bottom:.45rem;
  font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--texto);
}
body.es-interior .tienda-info em{
  font-family:var(--serif, Georgia, serif); font-style:italic;
  font-size:var(--serif-cuerpo, 1.04em); color:var(--texto);
}

@media (prefers-reduced-motion: reduce){
  .ubi__pin, .ubi__punto, #globo3d{ transition:none }
  .ubi__recinto{ animation:none }
}