/* MAP Audios – estilos del front. Solo se cargan en páginas MAP Audios activas. */

body.map-audios-page {
	--map-primary: #0e2a4d;   /* Azul marino: botón play, barra, botón mapa */
	--map-accent: #e04b3c;    /* Rojo de la web: idioma activo, botón reserva */
	--map-text: #333333;
	--map-soft: #f1f3f6;
	--map-radius: 16px;
	--map-gap: 14px;
	--map-side: 16px;
	background: #eef1f5;
	color: var(--map-text);
	margin: 0;
	-webkit-text-size-adjust: 100%;
}

.map-audios-page .map-block {
	box-sizing: border-box;
	margin: 0 var(--map-side) var(--map-gap);
	font-family: var(--e-global-typography-text-font-family, "Roboto"), system-ui, -apple-system, sans-serif;
}
.map-audios-page .map-block *,
.map-audios-page .map-block *::before,
.map-audios-page .map-block *::after { box-sizing: border-box; }
.map-audios-page .map-block svg { display: block; flex: none; }

/* Columna tipo app: en escritorio, centrada a 480 px y sin estirar el vídeo */
.map-audios-page .map-app {
	max-width: 480px;
	margin: 0 auto;
	background: #fff;
	min-height: 100vh;
	padding-bottom: 8px;
}

/* ---------- 1. Cabecera ---------- */
.map-header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px var(--map-side);
	margin: 0 !important;
	background: #fff;
}
.map-header__logo { display: flex; align-items: center; flex: none; text-decoration: none; color: var(--map-primary); }
.map-header__logo-img { display: block; height: 52px; width: auto; max-width: 150px; object-fit: contain; }
.map-header { position: relative; }
.map-logo { display: flex; align-items: center; gap: 6px; }
.map-logo__icon { width: 46px; height: 46px; }
.map-logo__text { display: flex; flex-direction: column; line-height: .95; }
.map-logo__text strong { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; color: var(--map-primary); }
.map-logo__text small { font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: #c8963e; margin-top: 4px; font-weight: 700; }

/* Menú hamburguesa */
.map-menu { margin-left: auto; position: static; }
.map-menu__btn {
	list-style: none; cursor: pointer;
	width: 44px; height: 44px; border-radius: 10px;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
	-webkit-tap-highlight-color: transparent;
}
.map-menu__btn::-webkit-details-marker { display: none; }
.map-menu__btn span { display: block; width: 26px; height: 2.5px; border-radius: 2px; background: var(--map-primary); transition: transform .2s, opacity .2s; }
.map-menu[open] .map-menu__btn span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.map-menu[open] .map-menu__btn span:nth-child(2) { opacity: 0; }
.map-menu[open] .map-menu__btn span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.map-menu__btn:focus-visible { outline: 3px solid var(--map-primary); outline-offset: 2px; }
.map-menu__panel {
	position: absolute; top: 100%; right: 12px; z-index: 50;
	min-width: 240px; background: #fff; border-radius: 14px;
	box-shadow: 0 12px 36px rgba(14, 42, 77, .18); padding: 8px;
}
.map-menu__panel ul { list-style: none; margin: 0; padding: 0; }
.map-menu__panel a {
	display: block; padding: 12px 14px; border-radius: 10px;
	color: var(--map-primary); font-weight: 600; text-decoration: none;
}
.map-menu__panel a:hover, .map-menu__panel a:focus-visible { background: var(--map-soft); }
.map-header__punto {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	padding-left: 14px;
	border-left: 1px solid #e3e6eb;
}
.map-header__pin svg { width: 22px; height: 22px; fill: var(--map-accent); margin-top: 2px; }
.map-header__nombre {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.2;
	font-weight: 700;
	color: var(--map-primary);
	font-family: inherit;
}
.map-header__numero { margin: 2px 0 0; font-size: .9rem; color: var(--map-primary); opacity: .85; }

/* ---------- 2. Vídeo (proporción real del archivo, sin recortes) ---------- */
.map-video-wrap {
	margin-left: 0 !important;
	margin-right: 0 !important;
	aspect-ratio: 2 / 3; /* respaldo: el shortcode pone la proporción real en línea */
	background: #0b1a2e;
	overflow: hidden;
}
.map-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none; /* sin interacción: nada puede pausarlo */
}
/* Oculta cualquier botón de play nativo (iOS/Android) */
.map-video::-webkit-media-controls,
.map-video::-webkit-media-controls-start-playback-button,
.map-video::-webkit-media-controls-overlay-play-button { display: none !important; -webkit-appearance: none; }

/* ---------- Tarjeta base ---------- */
.map-card {
	background: #fff;
	border-radius: var(--map-radius);
	padding: 16px;
	box-shadow: 0 4px 18px rgba(14, 42, 77, .1);
}

/* ---------- 3. Reproductor ---------- */
.map-video-wrap + .map-player { margin-top: -28px; position: relative; }
.map-player__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.map-player__title {
	display: flex; align-items: center; gap: 8px;
	margin: 0; font-family: inherit;
	font-size: 1.15rem; line-height: 1.2; font-weight: 700; color: var(--map-primary);
}
.map-player__title svg { width: 24px; height: 24px; fill: currentColor; }
.map-player__hint { font-size: .85rem; color: var(--map-text); opacity: .75; }
.map-player__langs { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin-bottom: 14px; }
.map-player__lang {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; border: 0; border-radius: 12px; padding: 8px 10px;
	background: var(--map-soft); color: var(--map-primary);
	font-family: inherit; font-size: 1rem; font-weight: 600; line-height: 1; cursor: pointer;
	transition: background-color .2s, color .2s;
	-webkit-tap-highlight-color: transparent;
}
.map-player__lang svg { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.map-player__lang.is-active { background: var(--map-accent); color: #fff; }
.map-player__lang:focus-visible,
.map-player__play:focus-visible,
.map-player__bar:focus-visible,
.map-btn:focus-visible { outline: 3px solid var(--map-primary); outline-offset: 2px; }
.map-player__lang.is-active:focus-visible { outline-color: var(--map-accent); }
.map-player__controls { display: flex; align-items: center; gap: 10px; }
.map-player__play {
	flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0;
	background: var(--map-primary); color: #fff; display: grid; place-items: center; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.map-player__play svg { width: 26px; height: 26px; fill: currentColor; }
/* El tema Hello pinta los <button> en rosa al pasar/enfocar: lo neutralizamos aquí */
.map-audios-page .map-player__play:hover,
.map-audios-page .map-player__play:focus,
.map-audios-page .map-player__play:active { background: var(--map-primary); color: #fff; border: 0; }
.map-audios-page .map-player__lang:hover,
.map-audios-page .map-player__lang:focus { background: #e6eaf0; color: var(--map-primary); border: 0; }
.map-audios-page .map-player__lang.is-active:hover,
.map-audios-page .map-player__lang.is-active:focus { background: var(--map-accent); color: #fff; }
.map-audios-page .map-menu__btn:hover, .map-audios-page .map-menu__btn:focus { background: var(--map-soft); }
.map-audios-page .map-player__play .map-icon-pause,
.map-audios-page .map-player.is-playing .map-icon-play { display: none; }
.map-audios-page .map-player.is-playing .map-icon-pause { display: block; }
.map-player.is-loading .map-player__play { opacity: .7; }
.map-player__time { font-size: .9rem; min-width: 40px; font-variant-numeric: tabular-nums; color: var(--map-primary); }
.map-player__time[data-remaining] { text-align: right; }
/* Barra de progreso: pista gris con relleno azul (--p lo actualiza el JS) */
.map-player__bar {
	--p: 0%;
	flex: 1; min-width: 0; margin: 0; height: 28px; cursor: pointer;
	-webkit-appearance: none; appearance: none; background: transparent;
}
.map-player__bar::-webkit-slider-runnable-track {
	height: 6px; border-radius: 6px;
	background: linear-gradient(to right, #1f78d1 var(--p), #e3e7ee var(--p));
}
.map-player__bar::-moz-range-track { height: 6px; border-radius: 6px; background: #e3e7ee; }
.map-player__bar::-moz-range-progress { height: 6px; border-radius: 6px; background: #1f78d1; }
.map-player__bar::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; margin-top: -5px; border-radius: 50%;
	background: #1f78d1; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(14, 42, 77, .35);
}
.map-player__bar::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%;
	background: #1f78d1; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(14, 42, 77, .35);
}

/* ---------- Botones ---------- */
.map-btn {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 56px; padding: 12px 22px; border-radius: 999px;
	font-family: inherit; font-size: 1.05rem; font-weight: 600; line-height: 1.2;
	text-decoration: none !important; text-align: center;
	transition: filter .2s, transform .1s;
	-webkit-tap-highlight-color: transparent;
}
.map-btn:active { transform: scale(.98); }
.map-btn:hover { filter: brightness(1.08); }
.map-btn svg { width: 24px; height: 24px; }
.map-btn span { flex: 1; }
.map-btn--primary, .map-btn--primary:hover, .map-btn--primary:visited { background: var(--map-primary); color: #fff; }
.map-btn--accent, .map-btn--accent:hover, .map-btn--accent:visited { background: var(--map-accent); color: #fff; border-radius: 14px; min-height: 64px; font-size: 1.15rem; box-shadow: 0 6px 18px rgba(224, 75, 60, .3); }

/* ---------- 4. Botón mapa (fondo tipo plano, solo CSS) ---------- */
.map-mapa {
	padding: 34px 22px;
	border-radius: var(--map-radius);
	background-color: #eceff3;
	/* Plano decorativo en SVG: calles, un parque y pines rojos (sin peticiones extra) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 140' preserveAspectRatio='xMidYMid slice'%3E%3Crect width='400' height='140' fill='%23eceff3'/%3E%3Cpath d='M250 0c10 30 50 40 70 30s30-30 80-20v40c-40 0-60 20-90 10s-60-20-60-60z' fill='%23dfe9d8'/%3E%3Cg fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath stroke-width='7' d='M-10 95 Q120 70 220 100T410 80M60-10 L110 150M300-10 L260 150'/%3E%3Cpath stroke-width='4' d='M-10 40 L180 55 L410 30M150-10 L170 150M0 125 L400 115M350 0 L380 150M20 0 L40 140'/%3E%3C/g%3E%3Cdefs%3E%3Cpath id='p' d='M0 0c-6 0-10 4-10 10 0 7 10 18 10 18s10-11 10-18c0-6-4-10-10-10zm0 14a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/defs%3E%3Cg fill='%23e03a2f'%3E%3Cuse href='%23p' transform='translate(70 32)'/%3E%3Cuse href='%23p' transform='translate(30 84)'/%3E%3Cuse href='%23p' transform='translate(205 28)'/%3E%3Cuse href='%23p' transform='translate(335 36)'/%3E%3Cuse href='%23p' transform='translate(365 92)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(14, 42, 77, .06);
}

/* ---------- 5. Banner 3:1 ---------- */
.map-banner a, .map-banner img { display: block; }
.map-banner img {
	width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover;
	border-radius: 12px;
}

/* ---------- 6. Reserva ---------- */
.map-reserva__texto { margin: 12px 4px 0; text-align: center; font-size: .95rem; line-height: 1.45; color: var(--map-text); }
.map-reserva__texto strong { color: var(--map-primary); }

/* Teléfonos pequeños (360 px) */
@media (max-width: 380px) {
	body.map-audios-page { --map-side: 12px; }
	.map-header { gap: 10px; }
	.map-header__logo-img { height: 44px; }
	.map-header__punto { padding-left: 10px; }
	.map-header__nombre { font-size: 1.05rem; }
	.map-btn { font-size: 1rem; padding: 12px 16px; }
}

/* Tablet: columna de 480 px centrada con sombra */
@media (min-width: 520px) and (max-width: 1024px) {
	.map-audios-page .map-app { box-shadow: 0 0 40px rgba(14, 42, 77, .08); }
}

/* ---------- Versión PC (≥ 1025 px): dos columnas ----------
   Arriba la cabecera; a la izquierda el vídeo; a la derecha reproductor, mapa y reserva;
   el banner debajo, centrado. Las áreas se asignan por clase (map-w-*), que llevan
   los widgets de la plantilla de Elementor y los envoltorios de [map_audios]. */
@media (min-width: 1025px) {
	body.map-audios-page { --map-side: 0px; --map-gap: 0px; }

	.map-audios-page .map-app {
		max-width: 1180px;
		margin: 40px auto;
		min-height: 0;
		--content-width: 100%; /* el contenedor de Elementor es de 480 px en móvil/tablet */
		--min-height: 0px;
		border-radius: 28px;
		overflow: hidden;
		box-shadow: 0 20px 60px rgba(14, 42, 77, .12);
		padding-bottom: 36px !important;
	}

	.map-audios-page .map-app > .e-con-inner,
	.map-audios-page .map-app__grid {
		display: grid !important;
		grid-template-columns: minmax(0, 1.55fr) minmax(360px, 1fr);
		grid-template-rows: auto auto auto 1fr auto;
		grid-template-areas:
			"header header"
			"video  player"
			"video  mapa"
			"video  reserva"
			"banner banner";
		column-gap: 36px;
		row-gap: 20px;
		padding: 0 36px;
		align-items: start;
		max-width: none;
	}
	.map-audios-page .map-app .map-w-header  { grid-area: header; margin: 0 -36px 12px; }
	.map-audios-page .map-app .map-w-video   { grid-area: video; }
	.map-audios-page .map-app .map-w-player  { grid-area: player; }
	.map-audios-page .map-app .map-w-mapa    { grid-area: mapa; }
	.map-audios-page .map-app .map-w-reserva { grid-area: reserva; }
	.map-audios-page .map-app .map-w-banner  { grid-area: banner; justify-self: center; width: 100%; max-width: 760px; margin-top: 16px; }
	.map-audios-page .map-app [class*="map-w-"] { width: 100% !important; max-width: 100%; margin-bottom: 0 !important; }
	.map-audios-page .map-app .map-w-header { width: calc(100% + 72px) !important; max-width: none !important; margin-bottom: 12px !important; }
	.map-audios-page .map-app .map-w-banner { max-width: 760px !important; }

	.map-audios-page .map-block { margin: 0; }

	/* Cabecera a todo el ancho */
	.map-header { padding: 22px 36px; border-bottom: 1px solid #e8ebf0; gap: 24px; }
	.map-header__logo-img { height: 60px; max-width: 200px; }
	.map-header__logo-text strong { font-size: 1.6rem; }
	.map-header__punto { padding-left: 24px; }
	.map-header__nombre { font-size: 1.6rem; }
	.map-header__numero { font-size: 1rem; }

	/* Vídeo: esquinas redondeadas; si es vertical no supera el alto de la pantalla */
	.map-video-wrap { border-radius: 20px; }
	.map-video-wrap--vertical {
		height: min(74vh, 780px);
		width: auto;
		max-width: 100%;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Columna derecha */
	.map-video-wrap + .map-player,
	.map-player { margin-top: 0; }
	.map-player { padding: 22px; }
	.map-player__title { font-size: 1.3rem; }
	.map-mapa { padding: 26px 22px; }
	.map-btn { min-height: 58px; }
	.map-btn--accent { min-height: 66px; }
	.map-reserva__texto { font-size: 1rem; }
	.map-banner img { border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.map-btn, .map-player__lang { transition: none; }
}