/*! BaseBlue — vídeos de sección y película. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* El marco de vídeo de sección: 16:9 con las esquinas de la casa. El póster
   pinta lo mismo que el primer fotograma, así no hay salto al empezar. */
.vframe {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--r-media, 0.8rem);
	background: #000;
}
.vframe video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.vframe__cap {
	position: absolute;
	left: 2rem;
	bottom: 1.6rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	pointer-events: none;
}

/* Botón de la película: un disco con el triángulo y la palabra al lado. */
.filmbtn {
	display: inline-flex;
	align-items: center;
	gap: 1.4rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: var(--t-body, 1.7rem);
	cursor: pointer;
}
.filmbtn__disc {
	display: grid;
	place-items: center;
	width: 5.6rem;
	height: 5.6rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	transition: background-color var(--dur-1, 0.3s) var(--ease-out, ease), color var(--dur-1, 0.3s) var(--ease-out, ease);
}
.filmbtn__disc svg { width: 1.4rem; height: 1.4rem; margin-left: 0.2rem; }
@media (hover: hover) and (pointer: fine) {
	.filmbtn:hover .filmbtn__disc { background: #fff; color: var(--bb-flood, #0055b7); }
}
.filmbtn:focus-visible { outline: 2px solid currentColor; outline-offset: 0.6rem; border-radius: 4rem; }

/* El diálogo de la película: a pantalla casi completa sobre negro. */
.bbfilm {
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: clamp(1.6rem, 4vw, 6.4rem);
	border: 0;
	background: rgba(6, 10, 16, 0.96);
	display: none;
	place-items: center;
}
.bbfilm[open] { display: grid; animation: bbfilm-in 0.5s var(--ease-out, ease) both; }
.bbfilm::backdrop { background: transparent; }
.bbfilm__frame { width: min(100%, calc((100dvh - 12rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.bbfilm__video { display: block; width: 100%; height: 100%; border-radius: var(--r-media, 0.8rem); background: #000; }
.bbfilm__close {
	position: absolute;
	top: max(1.6rem, env(safe-area-inset-top));
	right: 1.6rem;
	display: grid;
	place-items: center;
	width: 4.4rem;
	height: 4.4rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
}
.bbfilm__close svg { width: 1.6rem; height: 1.6rem; }
@keyframes bbfilm-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bbfilm[open] { animation: none; } }