/*! BaseBlue — Home · 70 El cierre. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* La última frase de la página, como el último plano de la película: el
   isotipo, «You need baseload. You have BaseBlue.» en grande y centrado, y
   el botón de la película. Sin borde inferior: el pie sigue en el mismo azul. */

.close { padding-block: clamp(12rem, 20svh, 24rem) clamp(9.6rem, 16svh, 19.2rem); text-align: center; }
.close__body {
	display: grid;
	justify-items: center;
	gap: clamp(3.2rem, 5svh, 5.6rem);
}
.close__mark {
	width: clamp(5.6rem, 6vw, 9.6rem);
	height: auto;
	fill: #fff;
}
.close__title {
	margin: 0;
	font-size: var(--t-mega, clamp(4.4rem, 1.2rem + 9vw, 15rem));
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.035em;
	text-wrap: balance;
}
/* La segunda línea en el azul claro de la marca: la respuesta a la primera. */
.close__title .rv-line + .rv-line { color: var(--bb-sky); }
/* V4: la línea técnica bajo el titular: cuatro datos separados por cotas. */
.close__specs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem 0;
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
}
.close__specs span { padding-inline: clamp(1.2rem, 1.6vw, 2.4rem); border-left: 1px solid rgba(255, 255, 255, 0.36); }
.close__specs span:first-child { border-left: 0; }
/* En móvil, dos por línea y sin cotas: un filete al principio de línea
   parecería un error. */
@media (max-width: 599px) {
	/* En teléfono, una columna con filete entre datos (QA): legible y sin perder el ritmo. */
	.close__specs { display: grid; grid-template-columns: minmax(0, 18rem); justify-content: center; gap: 0; }
	.close__specs span { padding: 0.9rem 0; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
	.close__specs span:first-child { border-top: 0; }
}
/* QA (oct.): a 0,64 sobre el azul daba 3,8:1; a 0,8 pasa AA (≈5,3:1). */
.close__time { margin-left: 0.6rem; color: rgba(255, 255, 255, 0.8); font-variant-numeric: tabular-nums; }

/* V4: el pie es ahora tinta (dirección de arte global), así que el azul
   es una banda completa con su propio aire abajo y el pie conserva su
   relleno normal: el corte azul → tinta es un cambio de superficie limpio,
   como cualquier otro del sitio. */

/* ====================================================== Añadidos de la V2 */

/* 20 · La pila: sus reglas viven ahora en 20-fuelcell.css (V4). */
.process .eyebrow { grid-column: 1 / -1; margin-bottom: var(--head-gap); color: var(--muted); }

/* 30 · Los dos tiempos en vídeo, sobre tinta: el negro del vídeo se funde. */
.process__media video { display: block; width: 100%; height: 100%; }
.process__media--atr { aspect-ratio: 16 / 9; }
.process__atr { object-fit: cover; }
.process__rack { object-fit: cover; }
.process__body { margin: var(--head-gap) 0 0; max-width: 36ch; color: var(--text2); }
.is-pinned .process__media--atr {
	/* El vídeo del ATR tiene fondo negro: se desvanece en los bordes para que
	   no se lea una caja sobre la tinta. */
	-webkit-mask-image: radial-gradient(ellipse 58% 60% at 52% 50%, #000 48%, transparent 100%);
	mask-image: radial-gradient(ellipse 58% 60% at 52% 50%, #000 48%, transparent 100%);
}
.is-pinned .process__atr { padding-right: 0; object-fit: cover; object-position: 50% 50%; }

/* 40 · El dato lleva al proyecto. */
.adv__link { margin-top: var(--head-gap); align-self: flex-start; }
/* Sus antetítulos y frases los releva el JS con el scroll: sin transición. */
.is-pinned .process__text :is(.eyebrow, .process__body) { transition: none; }