/* ============================================================
   ESVIDAS CENTROS · Mapa de centros por provincia
   v2.5.2

   TODAS las reglas van acotadas bajo .esv-mapa. Es obligatorio: otros
   plugins del grupo usan el mismo prefijo esv- y una regla suelta se
   les cuela. Ya pasó con .esv-nav, que es el menú de esvidas-header y
   heredaba un border-top de la navegación del carrusel.

   Los colores se sobrescriben desde el child theme de cada sitio:
       .esv-mapa { --esv-teal: #XXXXXX; --esv-teal-dark: #XXXXXX; }
   No editar esta paleta salvo para cambiar el valor por defecto.
   Mapa: es-atlas (INE) · proyección cónica conforme · simplificado
   ============================================================ */

.esv-mapa {
	/* Paleta por defecto — sobrescribir desde el child theme */
	--esv-teal:      #2E9B9B;
	--esv-teal-dark: #1F7A7A;
	--esv-teal-soft: #D3E9E8;
	--esv-teal-mid:  #A8D6D4;
	--esv-bg:        transparent;   /* el bloque hereda el fondo de la sección */
	--esv-land:      #E9F2F2;
	--esv-ink:       #27383C;
	--esv-muted:     #6B8085;
	--esv-white:     #FFF;

	--esv-radius:    14px;
	--esv-shadow:    0 2px 4px rgba(39, 56, 60, .04), 0 12px 32px rgba(39, 56, 60, .07);
	--esv-shadow-sm: 0 1px 2px rgba(39, 56, 60, .06), 0 3px 10px rgba(39, 56, 60, .08);
	--esv-ease:      cubic-bezier(.4, 0, .2, 1);
	/* Desaceleración larga: arranca rápido y se posa. Es la que da la
	   sensación de fluidez al abrir y cerrar el panel. */
	--esv-ease-out:  cubic-bezier(.16, 1, .3, 1);

	/* Ancho del panel en escritorio. Se puede ajustar desde el child theme. */
	--esv-panel-w:   420px;
	/* Cuánto se sale el mapa del contenedor en móvil, para llegar al borde
	   de la pantalla. Subir si Divi deja padding lateral en la fila. */
	--esv-sangre:    30px;
	/* Altura máxima de una ficha antes de que aparezca scroll dentro.
	   Si la descripción es corta, la ficha mide lo que mida y no hay scroll. */
	--esv-ficha-alto: min(60vh, 480px);

	font-family: 'Montserrat', system-ui, sans-serif;
	color: var(--esv-ink);
	background: var(--esv-bg);
	padding: 48px 32px 56px;
}

/* Reset acotado: baja especificidad para no pelearse con Divi ni con el propio child */
.esv-mapa :where(p,
.esv-mapa h3,
.esv-mapa article,
.esv-mapa button,
.esv-mapa a,
.esv-mapa svg,
.esv-mapa div,
.esv-mapa span) {
	box-sizing: border-box;
}
.esv-mapa :where(p,
.esv-mapa h3) {
	margin: 0;
	padding: 0;
}
.esv-mapa :where(button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	line-height: inherit;
	text-transform: none;
	letter-spacing: normal;
}
.esv-mapa :where(a) {
	text-decoration: none;
}
.esv-mapa :where(svg) {
	display: inline-block;
	vertical-align: middle;
}

/* ---------- Disposición ----------
   Flexbox y no grid a propósito: animar grid-template-columns de 0fr a una
   medida en píxeles no interpola (son tipos distintos) y el navegador da un
   salto. flex-basis en px sí interpola de forma continua.                    */
.esv-mapa__inner {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	/* Centrado mientras el panel quepa; si crece más que el mapa, se ancla
	   arriba para que el titular quede a la vista sin tener que subir. */
	align-items: center;
}
.esv-mapa.is-open .esv-mapa__inner {
	align-items: flex-start;
}
.esv-mapa__col {
	flex: 1 1 auto;
	min-width: 0;
}
/* Con el panel anclado arriba, el mapa se centra respecto a él */
.esv-mapa.is-open .esv-mapa__col {
	align-self: center;
}

/* ---------- Aviso ---------- */
.esv-mapa__hint {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 4px;
}
.esv-mapa__hint-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--esv-teal-soft);
	display: grid;
	place-items: center;
	color: var(--esv-teal);
}
.esv-mapa__hint p {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--esv-muted);
}

/* ---------- Mapa ---------- */
.esv-mapa__canvas {
	position: relative;
	min-width: 0;
}
.esv-mapa__svg {
	display: block;
	width: 100%;
	height: auto;
	/* hidden y no visible: con visible, lo que queda fuera del viewBox se
	   sigue pintando y el recorte de móvil no serviría de nada */
	overflow: hidden;
}
/* Sin centros en Baleares, las islas sobran: quitarlas deja el peninsular
   más grande y evita que asomen al recortar en móvil */
.esv-mapa--sin-islas .esv-prov[data-prov="illes-balears"] {
	display: none;
}
/* El SVG se re-rasteriza en cada fotograma mientras cambia el ancho.
   Avisarlo evita microtirones en equipos flojos. */
.esv-mapa.is-animando .esv-mapa__svg {
	will-change: width;
}

/* Todas las provincias salen apagadas; el JS activa las que tienen centro */
.esv-mapa .esv-prov {
	fill: var(--esv-land);
	stroke: var(--esv-white);
	stroke-width: 1.4;
	stroke-linejoin: round;
	pointer-events: none;
	transition: fill .3s var(--esv-ease);
}
.esv-mapa .esv-prov.is-on {
	fill: var(--esv-teal-soft);
	stroke-width: 1.6;
	pointer-events: auto;
	cursor: pointer;
}
.esv-mapa .esv-prov.is-hover {
	fill: var(--esv-teal-mid);
}
.esv-mapa .esv-prov.is-active {
	fill: var(--esv-teal);
}

/* ---------- Marcadores ----------
   La etiqueta va posicionada en absoluto y oculta por defecto. Si está en el
   flujo y siempre visible, en zonas con varios centros (Andalucía) se solapan
   unas con otras y el mapa se vuelve ilegible.                              */
.esv-mapa .esv-pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -100%);
	display: block;
	line-height: 0;
	padding: 6px 8px 2px;
	cursor: pointer;
	z-index: 2;
}
.esv-mapa .esv-pin:hover,
.esv-mapa .esv-pin:focus-visible,
.esv-mapa .esv-pin[aria-expanded="true"] {
	z-index: 5; /* la etiqueta visible por encima de los pines vecinos */
}
.esv-mapa .esv-pin:focus-visible {
	outline: 2px solid var(--esv-teal-dark);
	outline-offset: 2px;
	border-radius: 8px;
}

.esv-mapa .esv-pin__drop {
	position: relative;
	display: block;
	color: var(--esv-teal);
	filter: drop-shadow(0 2px 5px rgba(31, 122, 122, .28));
	transition: transform .35s var(--esv-ease), color .25s var(--esv-ease);
}
.esv-mapa .esv-pin__drop svg {
	display: block;
	width: 19px;
	height: 25px;
}
.esv-mapa .esv-pin:hover .esv-pin__drop,
.esv-mapa .esv-pin:focus-visible .esv-pin__drop {
	transform: translateY(-4px) scale(1.06);
}
.esv-mapa .esv-pin[aria-expanded="true"] .esv-pin__drop {
	color: var(--esv-teal-dark);
	transform: translateY(-4px) scale(1.12);
}

/* Contador cuando la provincia tiene más de un centro */
.esv-mapa .esv-pin__cuenta {
	position: absolute;
	top: -4px;
	right: -7px;
	min-width: 15px;
	height: 15px;
	padding: 0 3px;
	border-radius: 8px;
	background: var(--esv-white);
	color: var(--esv-teal-dark);
	font-size: 9.5px;
	font-weight: 600;
	line-height: 15px;
	text-align: center;
	box-shadow: 0 1px 3px rgba(39, 56, 60, .25);
}

/* Etiqueta: fuera del flujo, solo al pasar por encima o al estar activa */
.esv-mapa .esv-pin__label {
	position: absolute;
	top: calc(100% - 2px);
	left: 50%;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--esv-ink);
	background: var(--esv-white);
	border-radius: 6px;
	padding: 4px 10px;
	box-shadow: var(--esv-shadow-sm);
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -4px);
	transition:
		opacity .2s var(--esv-ease),
		transform .25s var(--esv-ease);
}
.esv-mapa .esv-pin:hover .esv-pin__label,
.esv-mapa .esv-pin:focus-visible .esv-pin__label,
.esv-mapa .esv-pin[aria-expanded="true"] .esv-pin__label {
	opacity: 1;
	transform: translate(-50%, 0);
}
.esv-mapa .esv-pin[aria-expanded="true"] .esv-pin__label {
	color: var(--esv-teal-dark);
	font-weight: 600;
}

/* ---------- Panel ----------
   La columna se abre animando flex-basis y el margen a la vez, con la misma
   curva que el contenido. Al cerrar todo va más rápido y sin retardo: abrir
   puede permitirse ser pausado, cerrar tiene que sentirse inmediato.         */
.esv-mapa__panel {
	position: relative;
	flex: 0 0 0px;
	margin-left: 0;
	overflow: hidden;
	transition:
		flex-basis .7s var(--esv-ease-out),
		margin-left .7s var(--esv-ease-out);
}
.esv-mapa.is-open .esv-mapa__panel {
	flex-basis: var(--esv-panel-w);
	margin-left: 36px;
}
.esv-mapa__panel[inert] {
	pointer-events: none;
}

.esv-mapa .esv-panel {
	width: var(--esv-panel-w);
	background: var(--esv-white);
	border-radius: var(--esv-radius);
	box-shadow: var(--esv-shadow);
	padding: 30px;
	opacity: 0;
	transform: translateX(28px);
	transition:
		opacity .32s ease-out,
		transform .7s var(--esv-ease-out);
}
.esv-mapa.is-open .esv-panel {
	opacity: 1;
	transform: none;
	transition:
		opacity .4s ease-out .16s,
		transform .7s var(--esv-ease-out) .06s;
}
.esv-mapa .esv-panel__close {
	position: absolute;
	top: 18px;
	right: 18px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: var(--esv-muted);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.esv-mapa .esv-panel__close:hover {
	background: var(--esv-teal-soft);
	color: var(--esv-teal-dark);
}
.esv-mapa .esv-panel__close:focus-visible {
	outline: 2px solid var(--esv-teal-dark);
	outline-offset: 2px;
}
.esv-mapa .esv-panel__eyebrow {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-bottom: 10px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--esv-teal);
}
.esv-mapa .esv-panel__title {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 32px !important;
	font-weight: 400;
	line-height: 1.05 !important;
	margin-bottom: 16px;
	color: var(--esv-ink);
}
.esv-mapa .esv-panel__rule {
	width: 48px;
	height: 3px;
	background: var(--esv-teal);
	border-radius: 2px;
	margin-bottom: 20px;
}
.esv-mapa .esv-panel__desc {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--esv-muted);
	margin-bottom: 24px;
}

/* ---------- Cuerpo: uno o varios centros ----------
   Con varios centros el carrusel horizontal es mejor que el scroll vertical
   en las dos vistas: cada centro se lee entero de una vez, sin que la altura
   del panel dependa de cuántos haya.                                        */
.esv-mapa .esv-panel__cuerpo {
	min-width: 0;
}

/* Un solo centro: ficha plana. Solo aparece scroll si el contenido se pasa
   de --esv-ficha-alto; con textos normales no se ve ninguna barra. */
.esv-mapa .esv-cuerpo--uno {
	max-height: var(--esv-ficha-alto);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin-right: -10px;
	padding-right: 10px;
}
.esv-mapa .esv-cuerpo--uno::-webkit-scrollbar {
	width: 6px;
}
.esv-mapa .esv-cuerpo--uno::-webkit-scrollbar-thumb {
	background: var(--esv-teal-mid);
	border-radius: 3px;
}
.esv-mapa .esv-cuerpo--uno .esv-centro__desc {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--esv-muted);
	margin-bottom: 24px;
}

/* Varios centros: carrusel con ajuste de posición.

   align-items: flex-start evita que todas las diapositivas se estiren a la
   altura de la más alta, que es lo que dejaba un hueco muerto bajo el botón
   en las fichas cortas. La altura de la pista la fija el JS según la ficha
   visible, y se anima al cambiar. */
.esv-mapa .esv-cuerpo--varios {
	display: flex;
	align-items: flex-start;
	gap: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	transition: height .38s var(--esv-ease-out);
}
/* Sin JS no hay medición posible: que se comporte como una lista normal */
.esv-mapa:not(.esv-js) .esv-cuerpo--varios {
	height: auto !important;
}
.esv-mapa .esv-cuerpo--varios::-webkit-scrollbar {
	display: none;
}
.esv-mapa .esv-cuerpo--varios .esv-centro {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-width: 0;
	/* El scroll vertical va aquí y no en la pista: la pista lleva
	   overflow-x con scroll-snap y mezclar los dos ejes la vuelve loca. */
	max-height: var(--esv-ficha-alto);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}
.esv-mapa .esv-cuerpo--varios .esv-centro::-webkit-scrollbar {
	width: 6px;
}
.esv-mapa .esv-cuerpo--varios .esv-centro::-webkit-scrollbar-thumb {
	background: var(--esv-teal-mid);
	border-radius: 3px;
}
/* El botón relleno ocupa el ancho de la diapositiva, no el del contenedor */
.esv-mapa .esv-cuerpo--varios .esv-centro .esv-cta {
	width: 100%;
}
/* ---------- Foto del centro ----------
   Encajada dentro del padding, no a sangre: el carrusel lleva overflow-x y
   un margen negativo aquí le rompería el ancho de scroll.

   Sin proporción forzada ni recorte: la foto se muestra con su altura real.
   No hace falta aspect-ratio para evitar saltos porque WordPress escribe los
   atributos width y height en el <img> y el navegador ya reserva el hueco. */
.esv-mapa .esv-centro__foto {
	margin: 0 0 18px;
	overflow: hidden;
	border-radius: 10px;
	line-height: 0;
}
.esv-mapa .esv-centro__img {
	display: block;
	width: 100%;
	height: auto;
}

/* El nombre dentro de la diapositiva solo se usa sin JavaScript: con JS sube
   al titular de la ficha y cambia al pasar de un centro a otro. */
.esv-mapa .esv-centro__nombre {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 24px !important;
	font-weight: 500;
	line-height: 1.2 !important;
	margin: 0 0 8px;
	color: var(--esv-ink);
}
.esv-mapa.esv-js .esv-centro__nombre {
	display: none;
}

/* Con el titular cambiando, conviene que la transición se note un poco */
.esv-mapa .esv-panel__title,
.esv-mapa .esv-card__title {
	transition: opacity .2s var(--esv-ease);
}
.esv-mapa .esv-cuerpo--varios .esv-centro__desc {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--esv-muted);
	margin-bottom: 16px;
}
.esv-mapa .esv-cuerpo--varios .esv-datos {
	gap: 10px;
	margin-bottom: 14px;
}
.esv-mapa .esv-cuerpo--varios .esv-dato {
	font-size: 13.5px;
}

/* ---------- Navegación del carrusel ---------- */
.esv-mapa .esv-nav {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--esv-line, #E4EDED);
}
.esv-mapa .esv-nav__btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--esv-line, #E4EDED);
	background: var(--esv-white);
	color: var(--esv-teal-dark);
	cursor: pointer;
	transition: background .2s, border-color .2s, opacity .2s;
}
.esv-mapa .esv-nav__btn:hover:not(:disabled) {
	background: var(--esv-teal-soft);
	border-color: var(--esv-teal-mid);
}
.esv-mapa .esv-nav__btn:disabled {
	opacity: .35;
	cursor: default;
}
.esv-mapa .esv-nav__btn:focus-visible {
	outline: 2px solid var(--esv-teal-dark);
	outline-offset: 2px;
}
.esv-mapa .esv-nav__cuenta {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--esv-muted);
	letter-spacing: .3px;
	margin-left: 4px;
}

/* ---------- Datos de contacto ---------- */
.esv-mapa .esv-datos {
	display: grid;
	gap: 14px;
	margin-bottom: 26px;
}
.esv-mapa .esv-dato {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--esv-ink);
}
.esv-mapa .esv-dato svg {
	flex: 0 0 auto;
	margin-top: 2px;
	color: var(--esv-teal);
}
.esv-mapa .esv-dato a {
	color: inherit;
}
.esv-mapa .esv-dato a:hover {
	color: var(--esv-teal-dark);
	text-decoration: underline;
}

/* ---------- CTA ---------- */
.esv-mapa .esv-cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 15px 20px;
	background: var(--esv-teal);
	color: var(--esv-white);
	font-size: 14.5px;
	font-weight: 600;
	border-radius: 10px;
	cursor: pointer;
	transition: background .25s var(--esv-ease);
}
.esv-mapa .esv-cta:hover {
	background: var(--esv-teal-dark);
	color: var(--esv-white);
}
.esv-mapa .esv-cta:focus-visible {
	outline: 2px solid var(--esv-teal-dark);
	outline-offset: 3px;
}
.esv-mapa .esv-cta svg {
	transition: transform .25s var(--esv-ease);
}
.esv-mapa .esv-cta:hover svg {
	transform: translateX(4px);
}

/* ---------- Tarjetas ----------
   En escritorio están ocultas: el panel lee de ellas.
   Sin JS quedan visibles (ver .esv-mapa:not(.esv-js) abajo).                */
.esv-mapa.esv-js .esv-lista {
	display: none;
}
.esv-mapa .esv-lista {
	display: grid;
	gap: 14px;
	max-width: 1080px;
	margin: 26px auto 0;
}
.esv-mapa .esv-card {
	background: var(--esv-white);
	border: 2px solid transparent;
	border-radius: var(--esv-radius);
	box-shadow: var(--esv-shadow-sm);
	padding: 22px;
	scroll-margin-top: 100px;
	transition: border-color .3s var(--esv-ease), box-shadow .3s var(--esv-ease);
}

/* Cerrar la tarjeta en móvil. Oculto por defecto: en escritorio manda el panel */
.esv-mapa .esv-card__close {
	display: none;
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 50%;
	color: var(--esv-muted);
	cursor: pointer;
	transition: background .2s, color .2s;
}
.esv-mapa .esv-card__close:hover {
	background: var(--esv-teal-soft);
	color: var(--esv-teal-dark);
}
.esv-mapa .esv-card__close:focus-visible {
	outline: 2px solid var(--esv-teal-dark);
	outline-offset: 2px;
}
.esv-mapa .esv-card__eyebrow {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--esv-teal);
}
.esv-mapa .esv-card__title {
	font-family: 'EB Garamond', Georgia, serif;
	font-size: 29px !important;
	font-weight: 400;
	line-height: 1.1 !important;
	margin-bottom: 14px;
	color: var(--esv-ink);
}

/* ============================================================
   RESPONSIVE — por debajo de 900px cambia el patrón:
   mapa a ancho completo + tarjetas siempre visibles debajo
   ============================================================ */
@media (max-width: 900px) {

	.esv-mapa {
		padding: 30px 25px 40px!important;   /* el mapa va a sangre, el texto lleva su margen */
		overflow-x: clip;       /* que la sangre no genere scroll horizontal */
	}
	.esv-mapa__inner {
		display: block;
	}
	.esv-mapa__panel {
		display: none;
	}
	.esv-mapa__hint {
		padding: 0 18px;
		margin-bottom: 2px;
	}

	/* Mapa al borde: en pantallas estrechas cada píxel de ancho cuenta.
	   El margen negativo compensa el padding que Divi mete en la fila y
	   en la columna, que si no dejarían el mapa encajonado. */
	.esv-mapa__canvas {
		padding: 0;
		margin-left: calc(-1 * var(--esv-sangre, 0px));
		margin-right: calc(-1 * var(--esv-sangre, 0px));
	}

	/* Sin etiquetas: en táctil no hay hover y solo estorban */
	.esv-mapa .esv-pin__label {
		display: none;
	}

	/* Sin JS se usa la posición alternativa tal cual, sobre el mapa completo.
	   Con JS, ajustarMapa() ya ha escrito --x / --y reproyectados al recorte. */
	.esv-mapa:not(.esv-js) .esv-pin {
		left: var(--xm, var(--x));
		top: var(--ym, var(--y));
	}

	/* ---------- Una sola tarjeta a la vez ---------- */
	.esv-mapa.esv-js .esv-lista {
		display: block;
		margin-top: 0;
	}
	.esv-mapa.esv-js .esv-card {
		display: none;
		margin: 20px 10px 0;
	}
	.esv-mapa.esv-js .esv-card.is-visible {
		display: block;
		animation: esv-entra .45s var(--esv-ease-out) both;
	}
	.esv-mapa .esv-lista {
		padding: 0;
	}
	.esv-mapa .esv-card {
		position: relative;
		padding: 22px 18px;
	}

	/* Botón de cerrar de la tarjeta: solo tiene sentido en móvil con JS */
	.esv-mapa.esv-js .esv-card__close {
		display: grid;
	}

	/* El carrusel es común a las dos vistas; en móvil solo se afinan tamaños. */
	.esv-mapa .esv-cuerpo--varios .esv-centro__desc {
		font-size: 14px;
	}

	.esv-mapa .esv-centro__foto {
		margin-bottom: 16px;
	}

	.esv-mapa .esv-nav {
		margin-top: 16px;
		padding-top: 14px;
	}

	.esv-mapa .esv-pin {
		/* Área táctil de 44px sin agrandar el pin visible */
		padding: 11px 13px 7px;
	}
	.esv-mapa .esv-pin__drop svg {
		width: 21px;
		height: 27px;
	}

	.esv-mapa .esv-card .esv-datos {
		gap: 11px;
		margin-bottom: 18px;
	}
	.esv-mapa .esv-card .esv-panel__desc,
.esv-mapa .esv-card .esv-centro__desc {
		font-size: 14px;
		margin-bottom: 18px;
	}
	.esv-mapa .esv-card .esv-cta {
		padding: 13px 18px;
		font-size: 14px;
	}

	/* Aviso: en móvil se toca, no se pasa el ratón */
	.esv-mapa__hint p[data-vista="escritorio"] {
		display: none;
	}
	.esv-mapa__hint p[data-vista="movil"] {
		display: block;
	}
}

@keyframes esv-entra {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 480px) {
	.esv-mapa {
		padding: 26px 0 34px;
	}
	.esv-mapa.esv-js .esv-card {
		margin: 18px 8px 0;
	}
	.esv-mapa .esv-card {
		padding: 20px 16px;
	}
	.esv-mapa__hint p {
		font-size: 12.5px;
	}
	.esv-mapa .esv-pin__label {
		font-size: 10.5px;
		padding: 3px 7px;
	}
	.esv-mapa .esv-pin__drop svg {
		width: 22px;
		height: 29px;
	}
	.esv-mapa .esv-card__title {
		font-size: 26px !important;
	}
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
	.esv-mapa *,
.esv-mapa *::before,
.esv-mapa *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}