/*! BaseBlue — Home · 00 Hero. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* Una pantalla que se entiende sola (cliente, octubre): vídeo de la planta a
   sangre, el titular en dos tiempos, las dos acciones y una franja de cuatro
   datos al pie. Sin pista fijada ni JS propio: el vídeo lo lleva bb-video.js
   y la entrada es CSS. */

.sec.hero {
	position: relative;
	min-height: 100svh;
	padding: 0;
	display: flex;
	align-items: flex-end;
	overflow: clip;
	isolation: isolate;
	color: #fff;
}
.hero__bg { position: absolute; inset: 0; z-index: -1; background: #1b1f24 url("/wp-content/themes/baseblue/assets/video/plant-250mw-poster.webp") 50% 50% / cover no-repeat; }
.hero__video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
/* Velo: arriba lo justo para la cabecera; abajo, denso para el texto. */
.hero__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(8, 12, 18, 0.5) 0%, rgba(8, 12, 18, 0) 22%),
		linear-gradient(0deg, rgba(8, 12, 18, 0.86) 0%, rgba(8, 12, 18, 0.5) 38%, rgba(8, 12, 18, 0) 64%),
		linear-gradient(90deg, rgba(8, 12, 18, 0.42) 0%, rgba(8, 12, 18, 0) 56%);
}

.hero__inner {
	width: 100%;
	padding-top: calc(var(--header-h, 8rem) + 4rem);
	padding-bottom: clamp(2.4rem, 5svh, 5.6rem);
	display: grid;
	gap: clamp(3.2rem, 5svh, 6.4rem);
}
.hero__copy { display: grid; gap: clamp(1.4rem, 2.2svh, 2.4rem); max-width: 160rem; }
.hero__eyebrow { color: rgba(255, 255, 255, 0.72); --idx-n: #fff; }
/* V4: el titular sube un escalón (hasta 9,6 svh) y se cierra más: es la
   única frase que tiene que leerse en un segundo. */
.hero__title {
	margin: 0;
	font-size: clamp(3.8rem, min(1.2rem + 5vw, 9.6svh), 11.2rem);
	/* 350, como los titulares del sistema: el 300 se deshilacha a este tamaño. */
	font-weight: 350;
	line-height: 0.96;
	letter-spacing: -0.042em;
	text-wrap: balance;
}
.hero__line { display: block; }
.hero__line--2 { color: var(--bb-sky); }
.hero__lead { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, 0.86); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem 3.2rem; margin-top: 0.8rem; }
.hero__film .filmbtn__disc { width: 4.8rem; height: 4.8rem; }
/* QA (oct.): sobre el vídeo, a 0,6 se perdía en las zonas claras; 0,78. */
.hero__time { margin-left: 0.4rem; color: rgba(255, 255, 255, 0.78); font-family: var(--mono); font-size: 0.82em; font-variant-numeric: tabular-nums; }

/* La lectura de la esquina: arriba a la derecha, bajo la cabecera, en la
   voz técnica. Un punto azul delante del estado (sin latido: es un dato). */
.hero__tag {
	position: absolute;
	top: calc(var(--header-h, 8rem) + 2.4rem);
	right: max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
	z-index: 1;
	display: grid;
	justify-items: end;
	gap: 0.4rem;
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	animation: hero-in 1.1s var(--ease-out) 0.7s backwards;
}
/* Las dos piezas son `.spec` del sistema; el estado lleva su piloto
   (`.spec--signal`, en el cielo de la tinta) y la tinta plena. */
.hero__tag .spec { color: rgba(255, 255, 255, 0.72); }
.hero__tag .spec--signal { color: #fff; }

/* Los cuatro datos como ficha técnica: un filete con cuatro marcas de cota,
   índice y rótulo en monoespaciada y el valor grande. La capacidad, la
   única cifra, va mayor y con su unidad pegada. */
.hero__facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gutter);
	margin: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.hero__fact { position: relative; padding-top: 1.6rem; min-width: 0; }
.hero__fact::before {
	content: "";
	position: absolute;
	top: -4px;
	left: 0;
	width: 1px;
	height: 7px;
	background: #fff;
}
.hero__fact dt {
	display: flex;
	gap: 1rem;
	font-family: var(--mono);
	font-size: var(--t-mono);
	letter-spacing: var(--track-spec, 0.08em);
	text-transform: none;
	color: rgba(255, 255, 255, 0.64);
}
.hero__fact dt span { color: #fff; font-variant-numeric: tabular-nums; }
.hero__fact dd {
	margin: 1rem 0 0;
	max-width: 22ch;
	text-wrap: balance;
	font-size: clamp(1.7rem, calc(var(--w) * 0.0125), 2.2rem);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.hero__fact:first-child dd {
	font-size: clamp(3.2rem, calc(var(--w) * 0.033), 6.4rem);
	line-height: 0.9;
	letter-spacing: -0.04em;
}
.hero__fact:first-child .u { font-size: 0.32em; letter-spacing: var(--track-spec, 0.08em); color: var(--bb-sky); }

/* Entrada: el titular por líneas, luego el resto (una vez, al cargar). */
.hero__eyebrow, .hero__line, .hero__lead, .hero__actions, .hero__facts {
	animation: hero-in 1.1s var(--ease-out) backwards;
}
.hero__line { animation-delay: 0.1s; }
.hero__line--2 { animation-delay: 0.22s; }
.hero__lead { animation-delay: 0.36s; }
.hero__actions { animation-delay: 0.48s; }
.hero__facts { animation-delay: 0.62s; }
@keyframes hero-in { from { opacity: 0; transform: translateY(2.4rem); } }

@media (orientation: portrait), (max-width: 899px) {
	.hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; }
	.hero__fact { padding-block: 1.2rem 1.6rem; }
	/* En dos columnas, la segunda fila abre con su propio filete. */
	.hero__fact:nth-child(n + 3) { border-top: 1px solid rgba(255, 255, 255, 0.28); }
	.hero__fact dd { margin-top: 0.6rem; font-size: clamp(1.5rem, 4vw, 1.8rem); }
	.hero__fact:first-child dd { font-size: clamp(2.8rem, 8vw, 4rem); }
	.hero__tag { display: none; }
	.hero__shade {
		background:
			linear-gradient(180deg, rgba(8, 12, 18, 0.55) 0%, rgba(8, 12, 18, 0) 20%),
			linear-gradient(0deg, rgba(8, 12, 18, 0.92) 0%, rgba(8, 12, 18, 0.6) 48%, rgba(8, 12, 18, 0.1) 72%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.hero__eyebrow, .hero__line, .hero__lead, .hero__actions, .hero__facts, .hero__tag { animation: none; }
}