/* Reproductor con facade — C1.
   Mientras nadie pulsa play esto es una imagen y un botón: cero JavaScript de
   terceros, cero cookies de YouTube. */

.scola-video {
	position: relative;
	width: 100%;
	aspect-ratio: var(--scola-video-ratio, 16 / 9);
	background: var(--cream, #E8E4D9);
	overflow: hidden;
	border-radius: 2px;
}

.scola-video--vertical {
	max-width: min(420px, 100%);
	margin-inline: auto;
}

.scola-video__btn {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	font: inherit;
}

.scola-video__poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
	filter: grayscale(35%);
}

.scola-video__btn:hover .scola-video__poster,
.scola-video__btn:focus-visible .scola-video__poster {
	transform: scale(1.03);
	filter: grayscale(0%);
}

/* El foco se ve en el contenedor, no en la imagen: el botón ocupa todo. */
.scola-video__btn:focus-visible {
	outline: 2px solid var(--orange, #FD8E25);
	outline-offset: -4px;
}

.scola-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	border-radius: 50%;
	background: var(--orange, #FD8E25);
	color: #140A02;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
	/* el triángulo pide un pelín de aire a la izquierda para verse centrado */
	padding-left: 4px;
}

.scola-video__btn:hover .scola-video__play,
.scola-video__btn:focus-visible .scola-video__play {
	transform: translate(-50%, -50%) scale(1.09);
}

.scola-video__title {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 56px 24px 20px;
	text-align: left;
	font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #F2F0EA;
	background: linear-gradient(transparent, rgba(10, 8, 6, 0.82));
}

.scola-video__frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (prefers-reduced-motion: reduce) {
	.scola-video__poster,
	.scola-video__play { transition: none; }
	.scola-video__btn:hover .scola-video__poster { transform: none; }
	.scola-video__btn:hover .scola-video__play { transform: translate(-50%, -50%); }
}

@media (max-width: 640px) {
	.scola-video__play { width: 62px; height: 62px; }
	.scola-video__title { padding: 44px 16px 14px; font-size: 11px; }
}

/* ── FILM DESTACADO (C1) ──────────────────────────────────────────────
   Un estudio de vídeo enseñando vídeo. La facade lo hace sin coste: hasta
   que alguien pulsa play esto pesa una imagen. */
.scola-eh__film {
	padding: clamp(48px, 7vw, 96px) 0;
	background: var(--bg);
}

.scola-eh__film-inner {
	width: min(1100px, 92vw);
	margin-inline: auto;
}

.scola-eh__film .scola-eh__work-year {
	display: block;
	margin-bottom: clamp(16px, 2vw, 26px);
}