/* =====================================================================
   MAPA DE UBICACIÓN — componente compartido (LTSM-5676 / LTSM-5458)
   Figma cb3izHyJ3uWqfAzbtHjEGP · "3. Home" (frame home 5) y "9. Ubicación"

   El mapa lo usan dos pantallas: la sección Ubicación del Home y la página
   de Ubicación. Aquí vive solo el componente — el mapa, los puntos, la
   tarjeta de categoría y las píldoras del filtro. Dónde se coloca y qué
   tamaño ocupa lo decide cada pantalla en su propio CSS.

   No es un embed de Google: es la imagen del diseño georreferenciada, con
   los puntos posicionados desde su lat/lng (ver $mapa_cal en el partial).

   Los tokens llevan valor de reserva para que el componente se pueda montar
   en una pantalla que no defina la paleta de Castilla.
   ===================================================================== */

.hc-ubic__map {
	--hc-punto: 14px;
	--hc-punto-txt: 10px;
	position: relative;
	/* La proporción la escribe el partial según el encuadre, en una variable y
	   no en `aspect-ratio` directo: así una pantalla puede pedir otra —el
	   teléfono enseña un recorte vertical del mismo mapa— sin pelear contra un
	   estilo en línea a golpe de `!important`. */
	aspect-ratio: var(--hc-mapa-ratio, 582 / 698);
	border-radius: var(--hc-radius, 24px);
	overflow: hidden;
}
/* El lienzo lleva la imagen y los puntos. Por defecto ocupa justo el hueco
   visible; una pantalla que quiera enseñar sólo una parte del mapa lo ensancha
   y lo corre, y todo lo que va dentro se mueve con él. */
.hc-ubic__lienzo { position: absolute; inset: 0; }
.hc-ubic__mapimg { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------- el pin del proyecto ----------------------------
   LTSM-5681. Hasta ahora venía pintado dentro de la imagen del mapa; se sacó
   de ahí porque un píxel no se puede animar.

   Va anclado por la PUNTA a la coordenada del proyecto —que es como se lee un
   pin— y su tamaño se da en porcentaje del mapa: el componente se monta a
   anchos muy distintos (327 px en el teléfono, 755 en la página de Ubicación)
   y en píxeles fijos quedaría enorme en uno y minúsculo en el otro.

   No recibe puntero: los puntos de interés caen a pocos píxeles y el pin, que
   no lleva nada que pulsar, les robaría el clic.

   El anclaje va aparte, en `--sobre-mapa`: el mismo pin lo monta también la
   banda del mapa de Google, donde la posición la decide Google —o el centro
   del hueco mientras carga— y un `position:absolute` heredado lo mandaría a
   la esquina. */
.hc-ubic__pin {
	--hc-pin-cuerpo: var(--color-primary-500, #a6a64f);
	width: 15.1%; aspect-ratio: 88 / 112;
	z-index: 2; pointer-events: none; color: var(--hc-dark, #302e12);
}
.hc-ubic__pin--sobre-mapa { position: absolute; transform: translate(-50%, -100%); }
.hc-ubic__pin svg { display: block; width: 100%; height: auto; }
.hc-ubic__pin-cuerpo { fill: var(--hc-pin-cuerpo); }
/* La estrella va rellena del color de la gota: es lo que interrumpe la
   retícula del azulejo en el centro, igual que en el isotipo. */
.hc-ubic__pin-estrella { fill: var(--hc-pin-cuerpo); }

/* La gota cuelga de su propio elemento para que el rebote de entrada y el
   latido no peleen con el `translate` que la ancla a la coordenada. */
.hc-ubic__pin-gota {
	display: block; filter: drop-shadow(0 6px 10px rgba(20, 20, 8, .45));
	transform-origin: 50% 100%;
}

/* Las ondas salen del centro del círculo de la gota, no de la punta, y miden
   exactamente lo que ese círculo: nacen justo en su borde. Empezarlas más
   pequeñas las deja creciendo por detrás del pin, escondidas la mitad de la
   animación —que es justo la mitad en que todavía se ven—. */
.hc-ubic__pin-onda {
	position: absolute; left: 50%; top: 39.3%;
	width: 100%; aspect-ratio: 1; margin: -50% 0 0 -50%;
	border-radius: 50%; border: 2px solid var(--hc-pin-cuerpo);
	opacity: 0;
}

/* La entrada y las ondas sólo arrancan cuando el mapa se ve: si se animan al
   cargar, en la página de Ubicación —donde el mapa está en el primer pliegue
   pero el Home lo tiene a 3000 px— la mitad de las veces nadie las ve. */
.hc-ubic__map.is-visible .hc-ubic__pin-gota {
	animation: hc-pin-cae .7s cubic-bezier(.24, 1.4, .5, 1) both;
}
.hc-ubic__map.is-visible .hc-ubic__pin-onda {
	animation: hc-pin-onda 2.8s ease-out .7s infinite;
}
.hc-ubic__map.is-visible .hc-ubic__pin-onda--2 { animation-delay: 2.1s; }

@keyframes hc-pin-cae {
	0%   { opacity: 0; transform: translateY(-28%) scale(.82); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: none; }
}
@keyframes hc-pin-onda {
	0%   { opacity: 0;   transform: scale(1); }
	8%   { opacity: .55; }
	55%  { opacity: 0;   transform: scale(2.1); }
	100% { opacity: 0;   transform: scale(2.1); }
}

/* Con el movimiento reducido el pin sigue estando —es información, no
   decoración—, pero ni cae ni emite ondas: aparece puesto y en su sitio. */
@media (prefers-reduced-motion: reduce) {
	.hc-ubic__map.is-visible .hc-ubic__pin-gota,
	.hc-ubic__map.is-visible .hc-ubic__pin-onda { animation: none; }
	.hc-ubic__pin-onda { display: none; }
}

.hc-ubic__puntos { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.hc-ubic__puntos[hidden] { display: none; }

/* El <li> es un ancla sin tamaño en la coordenada exacta: así el punto queda
   centrado en ella y el rótulo cuelga al lado sin desplazarlo. */
.hc-ubic__punto { position: absolute; width: 0; height: 0; }
/* El punto abierto se pinta por encima de sus vecinos: si no, el globo queda
   por debajo del rótulo del negocio de al lado. */
.hc-ubic__punto.is-abierto { z-index: 3; }

/* El botón es del tamaño del punto y va centrado en la coordenada, así que el
   rótulo y el globo se pueden colgar de él por porcentaje. */
.hc-ubic__punto-btn {
	position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
	width: var(--hc-punto); height: var(--hc-punto);
	margin: 0; padding: 0; border: 0; background: none;
	font: inherit; color: inherit; cursor: pointer;
}
/* En el teléfono el punto mide 14 px, que no es un objetivo táctil: el área
   que recibe el dedo se agranda sin mover nada de lo que se ve. */
.hc-ubic__punto-btn::before {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 34px; height: 34px; transform: translate(-50%, -50%);
}
.hc-ubic__punto-btn:focus-visible { outline: none; }
.hc-ubic__punto-btn:focus-visible .hc-ubic__punto-dot {
	box-shadow: 0 0 0 2px rgba(48, 46, 18, .55), 0 0 0 5px var(--hc-lime-3, #c4ca85);
}

.hc-ubic__punto-dot {
	position: absolute; inset: 0; border-radius: 50%;
	background: var(--hc-gold, #b08524); box-shadow: 0 0 0 2px rgba(48, 46, 18, .55);
	transition: transform .16s ease;
}
.hc-ubic__punto-btn:hover .hc-ubic__punto-dot,
.hc-ubic__punto.is-abierto .hc-ubic__punto-dot { transform: scale(1.25); }

.hc-ubic__punto-rotulo {
	position: absolute; top: 50%; left: calc(100% + 5px);
	/* --hc-desfase lo escribe el JS para despegar rótulos que se pisan. */
	transform: translateY(calc(-50% + var(--hc-desfase, 0px)));
	display: block; padding: 2px 6px; border-radius: 5px;
	/* La placa no es capricho: el mapa trae sus propios rótulos de calle y de
	   colonia, y sin fondo el nombre del punto se mezcla con ellos. */
	background: rgba(30, 28, 12, .66);
	font-size: var(--hc-punto-txt); font-weight: 600; line-height: 1.2;
	color: var(--hc-white, #fff); white-space: nowrap;
}
/* Los puntos del borde derecho voltean el rótulo para no salirse del mapa. */
.hc-ubic__punto--izq .hc-ubic__punto-rotulo {
	left: auto; right: calc(100% + 5px);
}

/* ------------------------------- el globo ---------------------------------
   Sale centrado sobre el punto. `--hc-tip-dx` lo escribe el JS para correrlo
   cuando se saldría por un lado del mapa, y `--abajo` lo pasa debajo cuando
   el punto está tan arriba que el globo no cabe encima. */
.hc-ubic__tip {
	position: absolute; left: 0; top: 0;
	transform: translate(calc(-50% + var(--hc-tip-dx, 0px)), calc(-100% - var(--hc-punto)));
	z-index: 4;
	/* El globo no se toca: no lleva nada que pulsar y los puntos vecinos caen
	   debajo. Sin esto, el globo abierto se come el clic del punto de al lado
	   —que en un mapa de coordenadas reales está a unos pocos píxeles— y el
	   vecino se vuelve inalcanzable mientras éste esté abierto. */
	pointer-events: none;
	display: flex; align-items: center; gap: 8px;
	width: max-content; max-width: 200px;
	padding: 7px 10px; border-radius: 10px;
	background: var(--hc-white, #fff);
	box-shadow: 0 8px 22px rgba(20, 20, 10, .34);
	text-align: left;
}
.hc-ubic__tip[hidden] { display: none; }
.hc-ubic__tip--abajo {
	transform: translate(calc(-50% + var(--hc-tip-dx, 0px)), var(--hc-punto));
}
.hc-ubic__tip-foto {
	flex: 0 0 auto; width: 40px; height: 40px; border-radius: 7px;
	object-fit: cover; display: block;
}
.hc-ubic__tip-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hc-ubic__tip-nombre {
	font-size: 12px; font-weight: 700; line-height: 1.25;
	color: var(--hc-olive, #4a482a);
}
.hc-ubic__tip-dist {
	font-size: 11px; font-weight: 600; line-height: 1.25;
	color: var(--hc-gold, #b08524);
}

.hc-ubic__tarjeta {
	position: absolute; right: 10px; top: 10px; max-width: 66%; margin: 0;
	display: flex; flex-direction: column; gap: 2px;
	padding: 8px 12px; border-radius: 12px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 6px 18px rgba(20, 20, 10, .3);
}
.hc-ubic__tarjeta-cat {
	font-size: 10px; line-height: 13px; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: var(--hc-olive, #4a482a);
}
.hc-ubic__tarjeta-min {
	display: flex; align-items: center; gap: 5px;
	font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--hc-gold, #b08524);
}
.hc-ubic__tarjeta-ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* ------------------------- las categorías ---------------------------------
   Debajo de escritorio las cinco categorías son puntos de paginación bajo el
   mapa, como en Sotobosque: el Figma sólo dibujó la lista vertical para
   escritorio, y cinco píldoras en fila se comen el alto que necesita el mapa,
   que es lo que hay que priorizar en el teléfono.

   Es el mismo `tablist` que en escritorio, sólo que sin rótulo a la vista: el
   nombre sigue en el DOM para el teclado y el lector de pantalla. Sin JS los
   puntos no filtran, pero tampoco estorban. */
.hc-ubic__leyenda { position: relative; }

.hc-ubic__filtros {
	margin: 18px 0 0; padding: 0; list-style: none;
	display: flex; justify-content: center; align-items: center; gap: 18px;
}
.hc-ubic__filtro {
	width: 9px; height: 9px; padding: 0; border-radius: 50%;
	position: relative; flex: 0 0 auto;
	border: 0; background: rgba(255, 255, 255, .32);
	transition: background-color .18s ease, transform .18s ease;
}
/* Nueve píxeles no son un objetivo táctil: el área que recibe el dedo se
   agranda sin mover nada de lo que se ve. */
.hc-ubic__filtro::before {
	content: ''; position: absolute; left: 50%; top: 50%;
	width: 34px; height: 34px; transform: translate(-50%, -50%);
}
.hc-ubic__filtro.is-active { background: var(--hc-gold, #b08524); transform: scale(1.25); }
/* El rótulo se oculta a la vista, no a la accesibilidad: es el nombre del
   control y el JS lo lee para la tarjeta del mapa. */
.hc-ubic__filtro-txt {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.hc-ubic__filtro:focus-visible { outline: 2px solid var(--hc-lime-3, #c4ca85); outline-offset: 4px; }

.hc-ubic__filtro { cursor: pointer; }

/* ------------------------------- tablet ------------------------------ */
@media (min-width: 768px) {
	.hc-ubic__map { --hc-punto: 18px; --hc-punto-txt: 12px; }
	.hc-ubic__tarjeta { right: 12px; top: 12px; padding: 10px 14px; }
	.hc-ubic__tarjeta-cat { font-size: 11px; line-height: 14px; }
	.hc-ubic__tarjeta-min { font-size: 16px; }

	/* Los puntos son para cuando el mapa manda: una sola columna y la imagen a
	   sangre. En cuanto entran las dos columnas del diseño, el mapa deja de
	   ocupar la pantalla y las categorías vuelven a ser píldoras con su
	   nombre; de puntos quedarían sueltas bajo el título, lejos de lo que
	   paginan. */
	.hc-ubic__filtros {
		margin-top: 28px; flex-direction: column;
		justify-content: flex-start; align-items: stretch; gap: 10px;
	}
	.hc-ubic__filtro {
		width: auto; height: 40px; padding: 0 18px; border-radius: 40px;
		display: inline-flex; align-items: center;
		border: 1.5px solid rgba(255, 255, 255, .28); background: transparent;
		font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
		color: rgba(255, 255, 255, .85); white-space: nowrap;
		transform: none;
		transition: border-color .18s ease, color .18s ease,
			background-color .18s ease, width .18s ease;
	}
	.hc-ubic__filtro::before { content: none; }
	.hc-ubic__filtro-txt { position: static; width: auto; height: auto; clip: auto; clip-path: none; }
	.hc-ubic__filtro:hover { border-color: rgba(255, 255, 255, .55); }
	/* La activa va rellena, como en Sotobosque: sobre el oliva del fondo, un
	   borde dorado y el texto del mismo color se leen a media distancia como
	   «una píldora más», y la categoría puesta es justo lo que hay que ver de
	   un vistazo. El dorado es el 400 y no el 500 de la paleta porque con el
	   texto oscuro encima el 500 se queda en 4,1:1 y no llega a AA. */
	.hc-ubic__filtro.is-active {
		border-color: var(--hc-gold-4, #c39a3d);
		background: var(--hc-gold-4, #c39a3d);
		color: var(--hc-dark, #302e12);
		font-weight: 700; transform: none;
	}
	.hc-ubic__filtro:focus-visible { outline-offset: 3px; }
}

/* ------------------------------ escritorio --------------------------- */
@media (min-width: 1200px) {
	.hc-ubic__map { --hc-punto: 22px; --hc-punto-txt: 13px; }
	.hc-ubic__tarjeta { right: 20px; top: 20px; padding: 12px 18px; gap: 4px; border-radius: 14px; }
	.hc-ubic__tarjeta-cat { font-size: 12px; line-height: 15px; }
	.hc-ubic__tarjeta-min { font-size: 20px; gap: 7px; }
	.hc-ubic__tarjeta-ico { width: 19px; height: 19px; }
	/* Escritorio es el breakpoint con la lista vertical del Figma y el único
	   donde cabe entera y a su tamaño; la forma de píldora ya viene de tablet.
	   El ancho lo decide cada pantalla y no el componente: en la página de
	   Ubicación el Figma las quiere todas iguales y hay sitio, pero en el Home
	   la columna comparte espacio con las dos fotos que van encima en
	   absoluto, y estirarlas hasta el ancho de la lista las mete debajo de
	   ellas. Aquí se quedan con el ancho de su texto. */
	.hc-ubic__filtros { margin-top: 32px; gap: 12px; max-width: 356px; }
	.hc-ubic__filtro { height: 48px; padding: 0 24px; font-size: 15px; }
}