/**
 * 05-pages.css — Home, equipo, vídeo, contacto, legales, footer.
 */

/* ========================================================================
   HOME — Hero
   ===================================================================== */

.pjv-hero {
	position: relative;
	padding-block: var(--pjv-hero-top) var(--pjv-hero-bottom);
	background:
		radial-gradient(120% 80% at 88% -10%, var(--pjv-blue-100) 0%, transparent 58%),
		var(--pjv-white);
	overflow: hidden;
}

.pjv-hero__inner {
	display: grid;
	gap: var(--pjv-s6);
	max-width: 1100px;
}

.pjv-hero__title {
	font-size: var(--pjv-fs-hero);
	line-height: var(--pjv-lh-tight);
	color: var(--pjv-blue-900);
	max-width: 14ch;
}

.pjv-hero__line {
	display: block;
}

.pjv-hero__title em {
	font-style: normal;
	color: var(--pjv-gold-500);
	position: relative;
}

.pjv-hero__lead {
	font-size: var(--pjv-fs-lead);
	color: var(--pjv-muted);
	max-width: 48ch;
}

.pjv-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pjv-s3);
}

.pjv-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--pjv-s5);
	margin: var(--pjv-s5) 0 0;
	padding-top: var(--pjv-s6);
	border-top: 1px solid var(--pjv-line);
	max-width: 640px;
}

.pjv-stats__value {
	font-family: var(--pjv-font-display);
	font-size: var(--pjv-fs-stat);
	font-weight: 700;
	color: var(--pjv-blue-800);
	font-variant-numeric: tabular-nums;
}

.pjv-stats__label {
	margin: var(--pjv-s1) 0 0;
	font-size: var(--pjv-fs-sm);
	color: var(--pjv-ink-50);
}

/* ========================================================================
   HOME — Equipo (la foto SIEMPRE completa)
   ===================================================================== */

.pjv-team {
	padding-block: var(--pjv-section);
	background: var(--pjv-mist);
}

/*
 * Bleed intencional, en TODOS los tamaños: la foto rompe el contenedor a
 * propósito para poder mostrarse a ancho completo (borde a borde) sin
 * recortar a nadie. Misma técnica que la utilidad .pjv-bleed de
 * 02-layout.css, repetida aquí para que quede documentada junto al resto
 * de reglas de esta sección. body ya lleva overflow-x:hidden (01-base.css),
 * así que el margen negativo no genera scroll horizontal.
 */
.pjv-team__figure {
	margin: 0;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

.pjv-team__viewport {
	width: 100%;
	overflow: hidden;
	background: var(--pjv-blue-900);
}

.pjv-team__img {
	display: block;
	width: 100%;
	height: auto; /* Ratio natural 1600x826. Nunca se recorta. */
}

.pjv-team__controls {
	display: none;
}

.pjv-team__caption {
	margin-top: var(--pjv-s4);
	font-size: var(--pjv-fs-sm);
	color: var(--pjv-ink-50);
}

/*
 * Móvil: modo panorámica. La imagen crece en altura y se desplaza en
 * horizontal, así las caras son reconocibles. El botón "Ver completa"
 * cambia a modo ajustado (100% del ancho, foto entera de un vistazo).
 * En los DOS modos se puede ver a todos los integrantes.
 */
@media (max-width: 900px) {
	.pjv-team__viewport {
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		cursor: grab;
		-webkit-overflow-scrolling: touch;
	}

	.pjv-team__viewport::-webkit-scrollbar {
		display: none;
	}

	.pjv-team__viewport[data-dragging] {
		cursor: grabbing;
	}

	/*
	 * 236vw = 920 px en un móvil de 390: exactamente el encuadre del
	 * artboard. Al ser relativo al ancho, el recorte visible es el mismo
	 * en cualquier teléfono.
	 */
	[data-team-mode='pan'] .pjv-team__img {
		width: 236vw;
		height: auto;
		max-width: none;
	}

	[data-team-mode='fit'] .pjv-team__img {
		width: 100%;
		height: auto;
	}

	.pjv-team__controls {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pjv-s4);
		margin-top: var(--pjv-s4);
		padding-inline: var(--pjv-gutter);
	}

	.pjv-team__hint {
		display: flex;
		align-items: center;
		gap: var(--pjv-s2);
		font-size: var(--pjv-fs-xs);
		color: var(--pjv-ink-50);
	}

	.pjv-team__caption {
		padding-inline: var(--pjv-gutter);
	}
}

/* ========================================================================
   HOME — Quiénes somos
   ===================================================================== */

.pjv-about {
	padding-block: var(--pjv-section);
}

.pjv-about__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--pjv-gap-cols);
	align-items: start;
}

.pjv-about__col {
	display: grid;
	gap: var(--pjv-s4);
	align-content: start;
}

.pjv-about__text {
	font-size: var(--pjv-fs-body-lg);
	color: var(--pjv-muted);
}

.pjv-quote {
	margin: 0;
	padding-left: var(--pjv-s5);
	border-left: 3px solid var(--pjv-gold-500);
	font-family: var(--pjv-font-display);
	font-size: var(--pjv-fs-quote);
	line-height: var(--pjv-lh-snug);
	color: var(--pjv-blue-800);
}

@media (max-width: 780px) {
	.pjv-about__inner {
		grid-template-columns: 1fr;
	}
}

/* ========================================================================
   HOME — Pilares
   ===================================================================== */

.pjv-pillars {
	padding-block: var(--pjv-section);
	background: var(--pjv-mist);
}

.pjv-pillars__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--pjv-s5);
}

/* ========================================================================
   HOME — CTA
   ===================================================================== */

.pjv-cta {
	padding-block: var(--pjv-section);
	background: var(--pjv-blue-900);
	color: var(--pjv-white);
}

.pjv-cta__inner {
	display: grid;
	gap: var(--pjv-s4);
	justify-items: center;
	text-align: center;
	max-width: 620px;
}

.pjv-cta__title {
	font-size: var(--pjv-fs-title);
}

.pjv-cta__text {
	color: color-mix(in srgb, var(--pjv-white) 78%, transparent);
}

.pjv-cta__inner .pjv-btn {
	margin-top: var(--pjv-s3);
}

/* ========================================================================
   DESCÚBRENOS — Reproductor
   ===================================================================== */

.pjv-player {
	background: var(--pjv-blue-900);
}

.pjv-player__stage {
	position: relative;
	width: 100%;
	min-height: calc(100svh - var(--pjv-header-h));
	display: grid;
	place-items: center;
	overflow: hidden;
	background: #000;
}

.pjv-player__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* Nunca recorta el encuadre del vídeo. */
	background: #000;
}

.pjv-player__overlay {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: var(--pjv-s4);
	padding: var(--pjv-gutter);
	text-align: center;
	color: var(--pjv-white);
	background: linear-gradient(
		to bottom,
		color-mix(in srgb, var(--pjv-blue-900) 55%, transparent),
		color-mix(in srgb, var(--pjv-blue-900) 78%, transparent)
	);
	width: 100%;
	height: 100%;
	place-content: center;
	transition:
		opacity var(--pjv-t-base) var(--pjv-ease),
		visibility 0s linear var(--pjv-t-base);
}

.pjv-player__title {
	font-size: var(--pjv-fs-player);
	max-width: 16ch;
}

[data-state='playing'] .pjv-player__overlay,
[data-state='paused'] .pjv-player__overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pjv-play {
	position: relative;
	display: grid;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 0;
	border-radius: var(--pjv-r-pill);
	background: var(--pjv-gold-500);
	color: var(--pjv-blue-900);
	cursor: pointer;
	transition: transform var(--pjv-t-base) var(--pjv-ease);
}

.pjv-play::before {
	content: '';
	position: absolute;
	width: 84px;
	height: 84px;
	border-radius: var(--pjv-r-pill);
	border: 2px solid var(--pjv-gold-500);
	animation: pjv-pulse 2.4s var(--pjv-ease) infinite;
}

@keyframes pjv-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pjv-play::before {
		animation: none;
	}
}

.pjv-play:hover {
	transform: scale(1.06);
}

.pjv-player__meta {
	font-size: var(--pjv-fs-sm);
	color: color-mix(in srgb, var(--pjv-white) 70%, transparent);
	font-variant-numeric: tabular-nums;
}

/* Barra de controles: cerrar + volver. Siempre accesible. */
.pjv-player__ui {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	padding: var(--pjv-s5);
}

.pjv-player__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: var(--pjv-s2);
	padding: var(--pjv-s3) var(--pjv-s4);
	border: 1px solid color-mix(in srgb, var(--pjv-white) 30%, transparent);
	border-radius: var(--pjv-r-pill);
	background: color-mix(in srgb, var(--pjv-blue-900) 55%, transparent);
	backdrop-filter: blur(8px);
	color: var(--pjv-white);
	font-size: var(--pjv-fs-sm);
	font-weight: 600;
	cursor: pointer;
	pointer-events: auto;
	transition:
		background var(--pjv-t-fast) var(--pjv-ease),
		opacity var(--pjv-t-base) var(--pjv-ease);
}

.pjv-player__btn:hover {
	background: var(--pjv-gold-500);
	border-color: var(--pjv-gold-500);
	color: var(--pjv-blue-900);
}

.pjv-player__btn--close {
	top: var(--pjv-s5);
	right: var(--pjv-s5);
}

.pjv-player__btn--home {
	top: var(--pjv-s5);
	left: var(--pjv-s5);
}

/* El botón de cerrar solo tiene sentido con el vídeo en marcha. */
[data-state='idle'] .pjv-player__btn--close {
	opacity: 0;
	pointer-events: none;
}

.pjv-player__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: color-mix(in srgb, var(--pjv-white) 20%, transparent);
}

.pjv-player__bar {
	display: block;
	height: 100%;
	background: var(--pjv-gold-500);
	transform: scaleX(0);
	transform-origin: left;
}

[data-state='idle'] .pjv-player__progress {
	opacity: 0;
}

@media (max-width: 600px) {
	.pjv-player__btn span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.pjv-player__btn {
		padding: var(--pjv-s3);
	}
}

/* ========================================================================
   CONTACTO
   ===================================================================== */

.pjv-contact {
	padding-block: var(--pjv-section);
}

.pjv-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.pjv-contact__intro {
	display: grid;
	gap: var(--pjv-s4);
	position: sticky;
	top: calc(var(--pjv-header-h) + var(--pjv-s6));
}

.pjv-contact__data {
	display: grid;
	gap: var(--pjv-s3);
	margin-top: var(--pjv-s3);
}

.pjv-contact__data li {
	display: flex;
	align-items: center;
	gap: var(--pjv-s3);
	color: var(--pjv-muted);
}

.pjv-contact__data a:hover {
	color: var(--pjv-blue-800);
	text-decoration: underline;
}

@media (max-width: 860px) {
	.pjv-contact__inner {
		grid-template-columns: 1fr;
	}

	.pjv-contact__intro {
		position: static;
	}

	.pjv-form {
		padding: var(--pjv-s5);
	}
}

/* ========================================================================
   PÁGINAS LEGALES
   ===================================================================== */

.pjv-legal {
	padding-block: var(--pjv-section);
}

.pjv-legal__head {
	display: grid;
	gap: var(--pjv-s3);
	max-width: 46ch;
	margin-bottom: var(--pjv-s8);
}

.pjv-legal__title {
	font-size: var(--pjv-fs-title);
	color: var(--pjv-blue-900);
}

.pjv-legal__meta {
	font-size: var(--pjv-fs-sm);
	color: var(--pjv-ink-50);
}

.pjv-legal__grid {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	gap: clamp(2rem, 6vw, 5rem);
	align-items: start;
}

.pjv-legal__aside {
	position: sticky;
	top: calc(var(--pjv-header-h) + var(--pjv-s6));
	display: grid;
	gap: var(--pjv-s6);
}

.pjv-toc__title,
.pjv-footer__title {
	font-family: var(--pjv-font-text);
	font-size: var(--pjv-fs-xs);
	font-weight: 700;
	letter-spacing: var(--pjv-track-wide);
	text-transform: uppercase;
	color: var(--pjv-ink-50);
	margin-bottom: var(--pjv-s3);
}

.pjv-toc__list {
	display: grid;
	gap: var(--pjv-s2);
	counter-reset: toc;
}

.pjv-toc__list a {
	display: block;
	padding: var(--pjv-s1) 0 var(--pjv-s1) var(--pjv-s4);
	border-left: 2px solid var(--pjv-line);
	font-size: var(--pjv-fs-sm);
	color: var(--pjv-ink-50);
	transition:
		color var(--pjv-t-fast) var(--pjv-ease),
		border-color var(--pjv-t-fast) var(--pjv-ease);
}

.pjv-toc__list a:hover,
.pjv-toc__list a[data-current='true'] {
	color: var(--pjv-blue-800);
	border-left-color: var(--pjv-gold-500);
	font-weight: 600;
}

.pjv-legal__switch-list {
	display: grid;
	gap: var(--pjv-s2);
	font-size: var(--pjv-fs-sm);
}

.pjv-legal__switch-list a {
	color: var(--pjv-ink-50);
}

.pjv-legal__switch-list .current-menu-item > a {
	color: var(--pjv-blue-800);
	font-weight: 600;
}

/* Tipografía de lectura larga. */
.pjv-prose {
	max-width: 68ch;
	color: var(--pjv-ink-70);
}

.pjv-prose > * + * {
	margin-top: var(--pjv-s4);
}

.pjv-prose h2 {
	margin-top: var(--pjv-s5-5);
	padding-top: var(--pjv-s5);
	border-top: 1px solid var(--pjv-line);
	font-size: var(--pjv-fs-quote);
	color: var(--pjv-blue-900);
}

.pjv-prose h3 {
	margin-top: var(--pjv-s6);
	font-size: var(--pjv-fs-body-lg);
	color: var(--pjv-blue-800);
}

.pjv-prose a {
	color: var(--pjv-blue-600);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pjv-prose ul,
.pjv-prose ol {
	display: grid;
	gap: var(--pjv-s2);
	padding-left: var(--pjv-s5);
	list-style: disc;
}

.pjv-prose ol {
	list-style: decimal;
}

.pjv-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--pjv-fs-sm);
}

.pjv-prose th,
.pjv-prose td {
	padding: var(--pjv-s3);
	border: 1px solid var(--pjv-line);
	text-align: left;
}

.pjv-prose th {
	background: var(--pjv-mist);
	font-weight: 600;
	color: var(--pjv-ink);
}

@media (max-width: 900px) {
	.pjv-legal__grid {
		grid-template-columns: 1fr;
	}

	.pjv-legal__aside {
		position: static;
		padding: var(--pjv-s5);
		background: var(--pjv-mist);
		border-radius: var(--pjv-r-lg);
	}
}

/* ========================================================================
   FOOTER
   ===================================================================== */

.pjv-footer {
	background: var(--pjv-blue-900);
	color: color-mix(in srgb, var(--pjv-white) 80%, transparent);
}

.pjv-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1.4fr;
	gap: var(--pjv-gap-footer);
	padding-block: var(--pjv-footer-pad);
}

.pjv-footer__brand {
	display: grid;
	gap: var(--pjv-s4);
	align-content: start;
	max-width: 32ch;
}

/*
 * El logo del footer es ahora el sello circular real de la asociación
 * (fondo blanco opaco, no transparente). Sin filtro: son sus colores de
 * marca de verdad, no hay que convertirlo a silueta blanca. Se recorta a
 * círculo para que ese fondo blanco se lea como una insignia a propósito
 * y no como un cuadro blanco pegado en el pie oscuro.
 */
.pjv-logo--badge img {
	height: 44px;
	width: 44px;
	border-radius: 50%;
}

.pjv-footer__claim {
	font-family: var(--pjv-font-display);
	font-size: var(--pjv-fs-body-lg);
	color: var(--pjv-white);
}

.pjv-footer__list {
	display: grid;
	gap: var(--pjv-s2);
	font-size: var(--pjv-fs-sm);
}

.pjv-footer__list a:hover {
	color: var(--pjv-gold-500);
}

.pjv-footer__mail {
	font-family: var(--pjv-font-display);
	font-size: var(--pjv-fs-body-lg);
	color: var(--pjv-white);
	border-bottom: 2px solid var(--pjv-gold-500);
}

.pjv-footer__city {
	margin-top: var(--pjv-s2);
	font-size: var(--pjv-fs-sm);
}

.pjv-footer__bar {
	border-top: 1px solid color-mix(in srgb, var(--pjv-white) 12%, transparent);
	padding-block: var(--pjv-s4);
	font-size: var(--pjv-fs-xs);
}

@media (max-width: 860px) {
	.pjv-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 520px) {
	.pjv-footer__inner {
		grid-template-columns: 1fr;
	}
}