/* =============================================================================
   Map 01 — BEM scoped al wrapper .wp-block-mwm-map-01
   ============================================================================= */

/* --------------------------------------------------------------------------
   Tokens locales (scopeados al bloque)
   -------------------------------------------------------------------------- */
.wp-block-mwm-map-01 {
	/* Card — blanca, tema claro, como la maqueta */
	--map01-card-bg: #ffffff;
	--map01-card-border: #f3f4f6;
	--map01-card-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.25);
	--map01-card-title: #111827;
	--map01-card-desc: #6b7280;
	--map01-card-cta-color: #111827;
	--map01-card-cta-border: #111827;
	--map01-card-w: 385px;
	--map01-card-gap: 16px;

	/* Scrollbar card (desktop): discreta, acorde al fondo blanco */
	--map01-scrollbar-thumb: rgba(17, 24, 39, 0.14);
	--map01-scrollbar-thumb-hover: rgba(17, 24, 39, 0.28);

	/* Marker */
	--map01-marker-bg: #262626;
	--map01-marker-border: #ffffff;
	--map01-marker-color: #ffffff;
	--map01-marker-size: 54px;
	--map01-marker-active: var(--mwm-brand, #00ce7c);
	/* Aro identificativo por establecimiento; lo sobrescribe view.js por marker.
	   Verde corporativo oscurecido: el #00ce7c puro se queda en 1.8:1 sobre el
	   terreno claro del mapa. */
	--map01-marker-brand: #00734a;
	--map01-marker-ring: 3px;

	/* Focus ring en markers (accesibilidad) */
	--map01-circle-stroke: #196EE6;

	--map01-radius: 8px;
}

/* --------------------------------------------------------------------------
   Bloque
   -------------------------------------------------------------------------- */
.mwm-map-01,
.mwm-map-01__inner {
	width: 100%;
}


/* --------------------------------------------------------------------------
   Stage (mapa + card)
   -------------------------------------------------------------------------- */
.mwm-map-01__stage {
	max-width: 71.1875rem;
	margin: 0 auto;
	position: relative;
	width: 100%;
	aspect-ratio: 1104 / 500;
	border-radius: var(--map01-radius);
	background: #e9ebee;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0px 20px 40px -16px rgba(0, 0, 0, 0.55);
	overflow: visible !important;
}

/* --------------------------------------------------------------------------
   Canvas del mapa
   -------------------------------------------------------------------------- */
.mwm-map-01__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--map01-radius);
}

/* --------------------------------------------------------------------------
   Card flotante (izquierda, como en la maqueta)
   -------------------------------------------------------------------------- */
.mwm-map-01__card {
	position: absolute;
	top: -2.5rem;
	left: var(--map01-card-gap);
	width: var(--map01-card-w);
	max-height: 445px;
	background: var(--map01-card-bg);
	border: 1px solid var(--map01-card-border);
	border-radius: var(--map01-radius);
	box-shadow: var(--map01-card-shadow);
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	z-index: 10;
	pointer-events: auto;
	transition: opacity 0.25s ease;
}

.mwm-map-01__card-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;

	scrollbar-width: thin;
	scrollbar-color: var(--map01-scrollbar-thumb) transparent;
}

.mwm-map-01__card-body::-webkit-scrollbar {
	width: 4px;
}

.mwm-map-01__card-body::-webkit-scrollbar-track {
	background: transparent;
}

.mwm-map-01__card-body::-webkit-scrollbar-thumb {
	background-color: var(--map01-scrollbar-thumb);
	border-radius: 100px;
}

.mwm-map-01__card-body::-webkit-scrollbar-thumb:hover {
	background-color: var(--map01-scrollbar-thumb-hover);
}

.mwm-map-01__mobile-intro {
	display: none;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
	color: #ffffff;
}

.mwm-map-01__mobile-intro .mwm-map-01__card-title {
	color: #ffffff;
}

.mwm-map-01__mobile-intro .mwm-map-01__card-desc {
	color: rgba(255, 255, 255, 0.7);
}

.mwm-map-01__mobile-card {
	display: none;
	background: var(--map01-card-bg);
	border: 1px solid var(--map01-card-border);
	border-radius: var(--map01-radius);
	box-shadow: var(--map01-card-shadow);
	padding: 24px 20px;
	flex-direction: column;
	gap: 14px;
	overflow: hidden;
}

.mwm-map-01__card-title {
	font-family: 'Neue Metana', Georgia, serif;
	font-size: clamp(14px, 1.4vw, 18px);
	font-weight: 700;
	color: var(--map01-card-title);
	line-height: 1.4;
	letter-spacing: -0.02em;
	margin: 0;
}

.mwm-map-01__card-desc {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.875rem;
	color: var(--map01-card-desc);
	line-height: 1.625;
	margin: 0;
}

.mwm-map-01__card-photo-wrap {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: calc(var(--map01-radius) - 2px);
	overflow: hidden;
	flex-shrink: 0;
}

.mwm-map-01__card-photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mwm-map-01__card-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding: 9px 18px;
	border: 1px solid var(--map01-card-cta-border);
	border-radius: 50px;
	font-family: 'Montserrat', sans-serif;
	font-size: var(--fs-16, 1rem);
	font-weight: 600;
	color: var(--map01-card-cta-color);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
	align-self: flex-start;
}

.mwm-map-01__card-cta:hover,
.mwm-map-01__card-cta:focus-visible {
	background: var(--map01-card-title);
	color: var(--map01-card-bg);
	outline: none;
}

/* --------------------------------------------------------------------------
   Markers — siempre con logo (imagen) en círculo negro
   Estructura: .mwm-map-01__marker (40px alto = 32px circle + 4px + 4px tail)
   -------------------------------------------------------------------------- */
.mwm-map-01__marker {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
	width: var(--map01-marker-size);
}

.mwm-map-01__marker-circle {
	position: relative;
	width: var(--map01-marker-size);
	height: var(--map01-marker-size);
	border-radius: 50%;
	padding: 7px 0.375rem;
	background: var(--map01-marker-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	/* Aro de marca + shadow de la maqueta. El aro va en box-shadow para no
	   robarle espacio al logo (el círculo es overflow:hidden). */
	box-shadow: 0 0 0 var(--map01-marker-ring) var(--map01-marker-brand),
		0px 4px 6px -4px rgba(0, 0, 0, 0.1),
		0px 10px 15px -3px rgba(0, 0, 0, 0.1);
	transition: transform 0.15s ease, box-shadow 0.18s ease;
	flex-shrink: 0;
}

.mwm-map-01__marker:focus-visible .mwm-map-01__marker-circle {
	outline: 2px solid var(--map01-circle-stroke);
	outline-offset: 3px;
}

.mwm-map-01__marker:hover .mwm-map-01__marker-circle,
.mwm-map-01__marker:focus-visible .mwm-map-01__marker-circle {
	transform: scale(1.18);
	box-shadow: 0 0 0 var(--map01-marker-ring) var(--map01-marker-brand),
		0px 8px 20px -4px rgba(0, 0, 0, 0.35);
}

/* Marker seleccionado (activo): aro más grueso y cola del color del establecimiento */
.mwm-map-01__marker--active .mwm-map-01__marker-circle {
	box-shadow: 0 0 0 calc(var(--map01-marker-ring) * 2) var(--map01-marker-brand),
		0px 8px 20px -4px rgba(0, 0, 0, 0.35);
}

.mwm-map-01__marker--active .mwm-map-01__marker-tail {
	background: var(--map01-marker-brand);
}

/* Marker con logo: sin borde blanco, logo llena el círculo */
.mwm-map-01__marker--logo .mwm-map-01__marker-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Marker fallback (sin logo): borde blanco + iniciales */
.mwm-map-01__marker--fallback .mwm-map-01__marker-circle {
	border: 2px solid var(--map01-marker-border);
}

.mwm-map-01__marker--fallback .mwm-map-01__marker-circle span {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.625rem;
	font-weight: 700;
	color: var(--map01-marker-color);
	letter-spacing: 0.02em;
}

/* Punto-cola (4x4 px) debajo del círculo, como en la maqueta */
.mwm-map-01__marker-tail {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--map01-marker-bg);
	margin-top: 2px;
	flex-shrink: 0;
}

/* El bloque usa card externa en mobile; cualquier popup nativo queda desactivado. */
.mwm-map-01 .maplibregl-popup {
	display: none;
}


/* --------------------------------------------------------------------------
   Fallback noscript
   -------------------------------------------------------------------------- */
.mwm-map-01__fallback {
	list-style: disc;
	padding-left: 1.5em;
	margin: 1em 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.9375rem;
}

.mwm-map-01__fallback a {
	color: inherit;
}

/* --------------------------------------------------------------------------
   Preview en editor
   -------------------------------------------------------------------------- */
.mwm-map-01__stage--editor {
	background: #1a1f27;
}

/* --------------------------------------------------------------------------
   Responsive: mobile (<1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
	.mwm-map-01__inner {
		margin-top: 32px;
	}

	.mwm-map-01__stage {
		aspect-ratio: 4 / 3;
		overflow: hidden;
	}

	.mwm-map-01__card {
		display: none;
	}

	.mwm-map-01__mobile-intro {
		display: flex;
	}

	.mwm-map-01__mobile-card.is-active {
		display: flex;
		margin-top: 16px;
	}

	.wp-block-mwm-map-01 {
		--map01-marker-size: 44px;
	}
}

@media (max-width: 767px) {
	.mwm-map-01__stage {
		aspect-ratio: 4 / 3;
	}
}
/*
 * K14 (Karla, 14-8-2026, ampliado a petición del cliente el 27-8): la tarjeta
 * de presentación tapaba demasiado mapa. Se saca por la izquierda y se sube.
 *
 * El desplazamiento lateral era un `translateX(-28%)` fijo y **cortaba la
 * tarjeta fuera de pantalla** por debajo de ~1300px: medido, 20px fuera a 1280
 * y 59px a 1200, 1100 y 1024, porque ahí el mapa ya llega casi al borde de la
 * ventana. Ahora el `max()` limita el desplazamiento a lo que quede libre
 * hasta 1.5rem del borde. El `50%` se resuelve contra el ancho del mapa, que
 * es el bloque contenedor de la tarjeta.
 *
 * Al subirla, el alto del mapa que queda tapado baja del 39% al 25% a 1440.
 * Por debajo de 1200px se sube menos para no chocar con el botón «Ver agenda
 * completa» del bloque de arriba, que ahí ya queda cerca en horizontal.
 */
@media (min-width: 1024px) {
	.mwm-map-01__card {
		margin-left: max(-6.75rem, calc(50% - 50vw + 1.5rem));
		top: -4rem;
	}
}

@media (min-width: 1200px) {
	.mwm-map-01__card {
		top: -7rem;
	}
}