/*
 * Portada (`/`) — Nivel Vital.
 * Paleta y tipografía: Decisión D4 (documento de arranque, sección 3). Las variables de
 * color (--nv-verde-oscuro, etc.) las define .nv-portada en ficha-biomarcador.css, que
 * se encola siempre antes que este archivo — ver nv_bib_encolar_estilos_publicos() en
 * plantilla-publica.php. La cuadrícula de tarjetas (.nv-biblioteca__grid, .nv-tarjeta)
 * viene de listado-biblioteca.css, reutilizada tal cual en la sección de destacados.
 */

.nv-portada {
	background: var(--nv-blanco);
}

.nv-portada h1,
.nv-portada h2,
.nv-portada h3 {
	font-family: 'Montserrat', 'Open Sans', sans-serif;
}

/* ---------------------------------------------------------------- */
/* 1. Hero — vídeo en loop + posicionamiento                         */
/* ---------------------------------------------------------------- */

.nv-portada__hero {
	position: relative;
	min-height: min(92vh, 780px);
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--nv-verde-oscuro);
	background-size: cover;
	background-position: center;
}

.nv-portada__hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El vídeo está pensado con la mitad izquierda del encuadre despejada para el texto
   (ver prompt-loop-portada.md) — el velo refuerza el contraste ahí sin oscurecer toda
   la escena, y se desvanece hacia la derecha, donde vive la actividad visual. */
.nv-portada__hero-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(19, 28, 16, 0.88) 0%,
		rgba(19, 28, 16, 0.72) 32%,
		rgba(19, 28, 16, 0.32) 58%,
		rgba(19, 28, 16, 0.08) 78%
	);
}

.nv-portada__hero-contenido {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
	padding: 3rem 1.5rem;
	width: 100%;
}

.nv-portada__hero-contenido > * {
	max-width: 560px;
}

/* Logotipo de marca — rectificado a la paleta D4 el 05/09/2026 (antes: PNG con degradado
   azul/naranja, subido por JC el 04/09/2026). Auditoría completa + las dos rondas de
   ajuste en el Proyecto "NIVEL VITAL — Desarrollo Web" (02-construccion/, artefacto de
   auditoría del logotipo). Ahora es SVG inline (`nv_bib_logo_svg()`, plantilla-publica.php)
   en vez de `<img>`, así que hereda directamente `--nv-verde-oscuro`/`--nv-verde-azulado`/
   `--nv-morado`/`--nv-blanco` de aquí abajo — si la paleta D4 cambia, el logotipo cambia
   solo, sin tocar ningún archivo de imagen. Sobre el vídeo oscuro del hero funciona bien
   tal cual, sin caja ni fondo propio, porque sus formas ya son opacas. */
.nv-portada__hero-logo {
	display: inline-block;
	margin: 0 0 1.5rem;
}

.nv-portada__hero-logo-svg {
	display: block;
	/* +20% sobre el tamaño original (56/7vw/84px), a petición de JC (05/09/2026) tras ver
	   el logotipo rectificado ya instalado en real. */
	height: clamp(68px, 8.4vw, 101px);
	width: auto;
}

.nv-portada__hero-kicker {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d9c98a;
	margin: 0 0 1rem;
}

.nv-portada__hero-titulo {
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--nv-blanco);
	margin: 0 0 1.1rem;
}

.nv-portada__hero-entradilla {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.88);
	margin: 0 0 2rem;
}

.nv-portada__hero-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-bottom: 1.25rem;
}

.nv-portada__boton {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	padding: 0.85rem 1.6rem;
	border-radius: 999px;
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.nv-portada__boton--primario {
	background: var(--nv-blanco);
	color: var(--nv-verde-oscuro);
}

.nv-portada__boton--primario:hover,
.nv-portada__boton--primario:focus {
	background: var(--nv-morado);
	color: var(--nv-blanco);
	transform: translateY(-1px);
}

.nv-portada__boton--secundario {
	background: var(--nv-verde-oscuro);
	color: var(--nv-blanco);
}

.nv-portada__boton--secundario:hover,
.nv-portada__boton--secundario:focus {
	background: var(--nv-morado);
	transform: translateY(-1px);
}

.nv-portada__boton--proximamente {
	background: transparent;
	border-color: var(--nv-borde);
	color: var(--nv-texto-suave);
	cursor: default;
}

.nv-portada__buscador {
	display: flex;
	max-width: 480px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 999px;
	padding: 0.3rem 0.3rem 0.3rem 1.1rem;
	backdrop-filter: blur(2px);
}

.nv-portada__buscador-input {
	flex: 1 1 auto;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--nv-blanco);
	font-family: 'Open Sans', sans-serif;
	font-size: 0.95rem;
	padding: 0.5rem 0;
}

.nv-portada__buscador-input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}

.nv-portada__buscador-input:focus {
	outline: none;
}

.nv-portada__buscador-boton {
	flex: 0 0 auto;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	background: var(--nv-blanco);
	color: var(--nv-verde-oscuro);
	border: none;
	border-radius: 999px;
	padding: 0.55rem 1.15rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nv-portada__buscador-boton:hover,
.nv-portada__buscador-boton:focus {
	background: var(--nv-morado);
	color: var(--nv-blanco);
}

/* Quien tenga "reducir movimiento" activado se queda con el fotograma de reserva (ya
   puesto como fondo de .nv-portada__hero) en vez del vídeo — sin JavaScript. */
@media (prefers-reduced-motion: reduce) {
	.nv-portada__hero-video {
		display: none;
	}
}

@media (max-width: 720px) {
	.nv-portada__hero {
		min-height: auto;
		padding: 5.5rem 0 3rem;
	}
	.nv-portada__hero-velo {
		background: linear-gradient(
			180deg,
			rgba(19, 28, 16, 0.55) 0%,
			rgba(19, 28, 16, 0.82) 55%,
			rgba(19, 28, 16, 0.92) 100%
		);
	}
	.nv-portada__hero-contenido > * {
		max-width: none;
	}
	.nv-portada__buscador {
		max-width: none;
	}
}

/* ---------------------------------------------------------------- */
/* Cuerpo — secciones bajo el hero                                    */
/* ---------------------------------------------------------------- */

.nv-portada__cuerpo {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 1.25rem;
}

.nv-portada__seccion {
	padding: 3.5rem 0;
	border-top: 1px solid var(--nv-borde);
}

.nv-portada__seccion-cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
}

.nv-portada__seccion-titulo {
	font-size: 1.6rem;
	font-weight: 800;
	color: var(--nv-verde-oscuro);
	margin: 0 0 1.5rem;
}

.nv-portada__seccion-cabecera .nv-portada__seccion-titulo {
	margin-bottom: 0;
}

.nv-portada__ver-todos {
	display: flex;
	align-items: baseline;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.nv-portada__ver-todo {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--nv-verde-azulado);
	text-decoration: none;
	white-space: nowrap;
}

.nv-portada__ver-todo:hover,
.nv-portada__ver-todo:focus {
	color: var(--nv-morado);
}

/* ---------------------------------------------------------------- */
/* 2. Categorías — bloque visual                                      */
/* ---------------------------------------------------------------- */

.nv-portada__categorias-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
}

.nv-portada__categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	text-align: center;
	padding: 1.75rem 1rem;
	background: var(--nv-casi-blanco);
	border: 1px solid var(--nv-borde);
	border-radius: 16px;
	text-decoration: none;
	color: var(--nv-verde-oscuro);
	transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.nv-portada__categoria:hover,
.nv-portada__categoria:focus {
	background: var(--nv-blanco);
	border-color: var(--nv-verde-azulado);
	transform: translateY(-2px);
}

.nv-portada__categoria-icono {
	width: 34px;
	height: 34px;
	color: var(--nv-verde-azulado);
}

.nv-portada__categoria:hover .nv-portada__categoria-icono,
.nv-portada__categoria:focus .nv-portada__categoria-icono {
	color: var(--nv-morado);
}

.nv-portada__categoria-nombre {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------- */
/* 4. Quiz — banda secundaria                                         */
/* ---------------------------------------------------------------- */

.nv-portada__quiz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	background: var(--nv-ambar-fondo);
	border: none;
	border-radius: 20px;
	padding: 2.5rem;
	margin: 3.5rem 0;
}

.nv-portada__quiz-texto h2 {
	margin: 0 0 0.4rem;
}

.nv-portada__quiz-texto p {
	margin: 0;
	color: var(--nv-texto-suave);
	max-width: 46ch;
}

/* ---------------------------------------------------------------- */
/* 5. Autoridad                                                       */
/* ---------------------------------------------------------------- */

.nv-portada__autoridad-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.75rem;
	margin-bottom: 1.75rem;
}

.nv-portada__autoridad-item h3 {
	font-size: 1.05rem;
	color: var(--nv-verde-oscuro);
	margin: 0 0 0.5rem;
}

.nv-portada__autoridad-item p {
	margin: 0;
	color: var(--nv-texto-suave);
	font-size: 0.95rem;
	line-height: 1.6;
}

@media (max-width: 560px) {
	.nv-portada__seccion {
		padding: 2.5rem 0;
	}
	.nv-portada__quiz {
		padding: 1.75rem;
	}
}