/* Video tours por zona.
 *
 * ⛔⛔ LA PÁGINA DE ZONA TIENE FONDO BLANCO. NO ES UNA FRANJA OSCURA.
 * La primera versión de esta hoja dio por hecho lo contrario y pintó los
 * títulos en #F5F2EC: **1.12:1 sobre blanco, texto invisible**, desplegado y
 * todo. Se vio en una captura, no en las comprobaciones — que daban verde
 * porque medían que el elemento existiera, no que se leyera.
 * Los colores de aquí abajo son los que ya usa `ml-zonas.css` (#37342F y
 * #4A4740), a propósito: una sola familia de grises para toda la página.
 * **Si algún día esta sección se mueve a una franja oscura, hay que invertir
 * estos colores — y volver a medir el contraste componiendo el alfa.**
 *
 * ⛔ El tamaño de letra mínimo es 16px en cualquier cosa enfocable: por debajo
 * de eso Safari de iOS hace zoom solo al enfocar.
 */

.ml-videos {
	margin: 3rem 0 1rem;
	padding-top: 2rem;
	border-top: 1px solid #E3E0DA;
}

.ml-videos__titulo {
	color: #1C1A17;
	font-size: clamp(1.35rem, 2.4cqi, 1.75rem);
	line-height: 1.2;
	margin: 0 0 .5rem;
}

/* El aviso de que esto no es inventario. Legible de verdad: 16px y 8.6:1
 * sobre el blanco de la página, no un gris decorativo. */
.ml-videos__nota {
	color: #4A4740;
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 0 1.5rem;
	max-width: 62ch;
}

.ml-videos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.ml-videos__item { margin: 0; }

/* La fachada es un <button> de verdad, no un div con onclick: así llega el
 * teclado y el lector de pantalla sin inventar roles. */
.ml-videos__fachada {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	cursor: pointer;
	background: #14161A;
}

.ml-videos__fachada:focus-visible {
	outline: 3px solid #0E0E55;
	outline-offset: 3px;
}

.ml-videos__miniatura {
	width: 100%;
	height: 100%;
	/* La miniatura de YouTube viene en 4:3 con franjas; el recorte las quita. */
	object-fit: cover;
	display: block;
	transition: transform .35s ease;
}

@media (hover: hover) {
	.ml-videos__fachada:hover .ml-videos__miniatura { transform: scale(1.035); }
}

.ml-videos__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	background: rgba(14, 14, 85, .82);
	border: 2px solid rgba(245, 242, 236, .9);
}

.ml-videos__play::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #F5F2EC;
	transform: translateX(3px);
}

.ml-videos__reloj {
	position: absolute;
	right: .5rem;
	bottom: .5rem;
	background: rgba(0, 0, 0, .82);
	color: #F5F2EC;
	font-size: .8125rem;
	line-height: 1;
	padding: .25rem .4rem;
	border-radius: 4px;
}

.ml-videos__nombre {
	color: #1C1A17;
	font-size: 1rem;
	line-height: 1.4;
	margin: .6rem 0 0;
}

/* El iframe que sustituye a la fachada hereda su hueco exacto para que no
 * salte nada al cambiarlo — el CLS de esta sección tiene que ser cero. */
.ml-videos__item iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 10px;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.ml-videos__miniatura { transition: none; }
	.ml-videos__fachada:hover .ml-videos__miniatura { transform: none; }
}