/* ==========================================================================
   Galería de materiales del caso — "hoja de contactos" de la agencia.

   La estructura (qué pieza va con cuál, en qué banda) la decide PHP en
   inc/galeria-caso.php; esta hoja define CÓMO se ve cada forma de banda.

   Principio: el material de Vale es el gráfico. El cromo del sitio se retira —
   sin tarjetas, sin sombras, sin bordes redondeados de app — y lo único que
   enmarca cada pieza es una línea de cabello y su número de hoja de contactos.
   Todo el movimiento es transform/opacity (§7.5).
   ========================================================================== */

.vgal {
	--vgal-gap: clamp(0.9rem, 2vw, 2rem); /* aire ENTRE piezas de una misma banda */
	--vgal-aire: clamp(3rem, 6vw, 7rem); /* aire ENTRE bandas */
	--vgal-desfase: clamp(2rem, 7vw, 8rem); /* caída de la pieza secundaria */
	--vgal-hair: rgb(255 255 255 / 0.09);
}

.vgal__lienzo {
	display: flex;
	flex-direction: column;
	gap: var(--vgal-aire);
}

/* --------------------------------------------------------------------------
   Cabecera: misma firma editorial que .vsec__h2 (regla fina + tick de acento),
   pero con la cuenta de material alineada a la derecha, como el encabezado de
   una hoja de contactos.
   -------------------------------------------------------------------------- */
.vgal__cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgb(255 255 255 / 0.14);
	position: relative;
}
.vgal__cabeza::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: clamp(3rem, 6vw, 5rem);
	height: 3px;
	background: var(--rojo);
}
.vgal__eyebrow {
	margin: 0;
	font-size: var(--fluid-2);
	font-weight: 850;
	letter-spacing: -0.02em;
	line-height: 1;
}
.vgal__meta {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(255 255 255 / 0.42);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Bandas. El ancho lo gobierna la proporción que manda en la banda (is-ancho /
   is-alto / is-cuadro) y el lado alterna para que la columna zigzaguee.
   -------------------------------------------------------------------------- */
.vgal__banda {
	display: grid;
	gap: var(--vgal-gap);
	align-items: start;
	/* El ancho explícito NO es redundante: .vgal__lienzo es un flex en columna y
	   los márgenes `auto` de --izq/--der anulan el `align-self: stretch` que da
	   por defecto. Sin esto, una banda sin ancho propio (el par de horizontales)
	   se encogía al tamaño intrínseco de su contenido — dos videos de 139 px
	   pegados a la derecha. Las variantes de abajo lo estrechan con `min()`. */
	width: 100%;
}
.vgal__banda--izq {
	margin-inline: 0 auto;
}
.vgal__banda--der {
	margin-inline: auto 0;
}

/* Cine — la pieza que abre. A sangre completa: 100vw sin depender del padre.
   `contain` sobre negro, nunca `cover`: los spots traen créditos y aviso legal
   quemados en el cuadro y un recorte se los come (misma razón que .vreel__video). */
.vgal__banda--cine {
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.vgal__banda--cine .vgal__marco {
	background: #000;
	box-shadow: none;
	border-radius: 0;
}
/* Sin tope de altura a propósito. Con `max-height: 88vh` la caja seguía midiendo
   100vw pero se achataba, y `contain` metía 200 px de barras negras a cada lado:
   la banda perdía justo lo que la hace cine. A ancho completo y proporción
   natural no hay barras, y que sobrepase el pliegue en una pantalla baja es
   correcto — el pie de la pieza es la invitación a seguir bajando. */
.vgal__banda--cine :is(.vgal__poster, .vgal__loop) {
	object-fit: contain;
}
.vgal__banda--cine .vgal__pie {
	padding-inline: var(--pad);
}
.vgal__banda--cine .vgal__titulo {
	font-size: 0.95rem;
}

/* Par — díptico ASIMÉTRICO (58/42), nunca a la mitad: dos piezas del mismo
   tamaño se leen como plantilla. La segunda cae para que el ojo baje en diagonal. */
.vgal__banda--par {
	grid-template-columns: 58fr 42fr;
}
.vgal__banda--par.vgal__banda--der {
	grid-template-columns: 42fr 58fr;
}
.vgal__banda--par.vgal__banda--izq > :nth-child(2),
.vgal__banda--par.vgal__banda--der > :nth-child(1) {
	margin-top: var(--vgal-desfase);
}
.vgal__banda--par.is-alto {
	width: min(100%, 42rem);
}
.vgal__banda--par.is-cuadro {
	width: min(100%, 60rem);
}

/* Terna — tres verticales en fila, la de en medio más abajo. Es la forma
   natural de un carrete de stories (Torres 10, Monte de Piedad). */
.vgal__banda--terna {
	grid-template-columns: repeat(3, 1fr);
	width: min(100%, 68rem);
}
.vgal__banda--terna > :nth-child(2) {
	margin-top: var(--vgal-desfase);
}

/* Mix — una vertical junto a una horizontal, alineadas por el pie.
   La columna angosta es SIEMPRE la de la vertical, así que las proporciones se
   deciden por `is-*` (la clase de la primera pieza) y no por el lado: aquí el
   orden del material manda, y en Monte de Piedad la horizontal va primero. */
.vgal__banda--mix {
	width: min(100%, 56rem);
	align-items: end;
}
.vgal__banda--mix.is-alto {
	grid-template-columns: 36fr 54fr;
}
.vgal__banda--mix.is-ancho {
	grid-template-columns: 54fr 36fr;
}

/* Solo — lo que sobra, con el ancho que pide su proporción. */
.vgal__banda--solo.is-ancho {
	width: min(100%, 78%);
}
.vgal__banda--solo.is-cuadro {
	width: min(100%, 34rem);
}
.vgal__banda--solo.is-alto {
	width: min(100%, 20rem);
}

/* Encabezado de campaña dentro de un caso (Torres 10: Contenidos / Mazapán /
   Torres Sessions). Solo aparece cuando el caso tiene más de un grupo. */
.vgal__grupo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.9rem;
	border-top: 1px solid var(--vgal-hair);
	margin-bottom: calc(var(--vgal-aire) * -0.45);
}
.vgal__grupo-nombre {
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.5rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}
.vgal__grupo-cuenta {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--rojo);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Pieza
   -------------------------------------------------------------------------- */
.vgal__pieza {
	margin: 0;
	min-width: 0;
}
.vgal__abrir {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.vgal__marco {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: var(--ink-2, #15151c);
	border-radius: 2px;
	/* Línea de cabello en lugar de borde: define la pieza sobre el negro sin
	   encajonarla. */
	box-shadow: inset 0 0 0 1px var(--vgal-hair);
}
.vgal__poster,
.vgal__loop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* El bucle se cruza con el póster por opacidad; ninguno de los dos se descarta,
   así que al salir del viewport la pieza vuelve al póster sin parpadeo. */
.vgal__loop {
	opacity: 0;
	transition: opacity 0.5s var(--ease-entrada);
}
.vgal__pieza.is-viva .vgal__loop {
	opacity: 1;
}

/* Velo inferior: da piso al pie y al glifo de play sobre imágenes claras. */
.vgal__velo {
	position: absolute;
	inset: auto 0 0 0;
	height: 45%;
	background: linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
	opacity: 0.75;
	transition: opacity 0.5s var(--ease-entrada);
	pointer-events: none;
}

/* Glifo de reproducción: aro fino + triángulo, sin relleno ni sombra. Cuando el
   bucle ya corre se apaga casi del todo — su trabajo era anunciar que hay video,
   y el movimiento ya lo dice mejor. */
.vgal__play {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(2.9rem, 5vw, 4.2rem);
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 0.6);
	border-radius: 999px;
	transform: translate(-50%, -50%) scale(0.88);
	opacity: 0.85;
	transition:
		transform 0.6s var(--ease-entrada),
		opacity 0.4s ease;
	pointer-events: none;
}
.vgal__play::after {
	content: "";
	position: absolute;
	left: 54%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-left: 0.62em solid #fff;
	border-top: 0.38em solid transparent;
	border-bottom: 0.38em solid transparent;
}
.vgal__pieza.is-viva .vgal__play {
	opacity: 0.28;
	transform: translate(-50%, -50%) scale(0.72);
}

/* Pie de pieza: número de hoja de contactos, etiqueta y dato técnico. */
.vgal__pie {
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	padding-top: 0.85rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}
.vgal__n {
	color: rgb(255 255 255 / 0.38);
	transition: color 0.35s ease;
	flex: none;
}
/* La etiqueta ENVUELVE en dos renglones en vez de cortarse con puntos
   suspensivos: los nombres que entrega la agencia son largos ("T10 Parrillamayo
   Videotorres") y una tarjeta que termina en "..." se lee como error, no como
   diseño. El pie se alinea por la primera línea base, así que la duración de la
   derecha no se mueve aunque el título ocupe dos renglones. */
.vgal__titulo {
	position: relative;
	color: rgb(255 255 255 / 0.86);
	letter-spacing: 0.08em;
	line-height: 1.4;
	min-width: 0;
}
/* Subrayado rojo que crece desde la izquierda al hover: el único color que entra
   a la pieza, y solo cuando el usuario la señala. */
.vgal__titulo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.28em;
	height: 1px;
	background: var(--rojo);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.55s var(--ease-entrada);
}
.vgal__dato {
	margin-left: auto;
	flex: none;
	color: rgb(255 255 255 / 0.32);
}

@media (hover: hover) and (pointer: fine) {
	.vgal__abrir:hover .vgal__n,
	.vgal__abrir:focus-visible .vgal__n {
		color: var(--rojo);
	}
	.vgal__abrir:hover .vgal__titulo::after,
	.vgal__abrir:focus-visible .vgal__titulo::after {
		transform: scaleX(1);
	}
	.vgal__abrir:hover .vgal__velo,
	.vgal__abrir:focus-visible .vgal__velo {
		opacity: 1;
	}
	.vgal__abrir:hover .vgal__play,
	.vgal__abrir:focus-visible .vgal__play {
		transform: translate(-50%, -50%) scale(1);
		opacity: 1;
	}
	@media (prefers-reduced-motion: no-preference) {
		.vgal__poster,
		.vgal__loop {
			transition: transform 0.9s var(--ease-entrada);
		}
		.vgal__abrir:hover :is(.vgal__poster, .vgal__loop),
		.vgal__abrir:focus-visible :is(.vgal__poster, .vgal__loop) {
			transform: scale(1.04);
		}
	}
}
.vgal__abrir:focus-visible .vgal__marco {
	box-shadow:
		inset 0 0 0 1px var(--vgal-hair),
		0 0 0 2px var(--rojo);
}

/* --------------------------------------------------------------------------
   Visor (<dialog> nativo: modal, foco atrapado y Esc sin código propio).
   -------------------------------------------------------------------------- */
.vgal__visor {
	width: 100vw;
	max-width: 100vw;
	height: 100dvh;
	max-height: 100dvh;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--paper);
	overflow: hidden;
}
.vgal__visor::backdrop {
	background: rgb(5 5 7 / 0.95);
}
/* Bloqueo del scroll de fondo atado al atributo `open`, no a JavaScript: se
   levanta solo al cerrar el visor, aunque el evento `close` no llegue a correr.
   En un navegador sin `:has()` simplemente no se bloquea el fondo — molesto,
   pero nunca deja al usuario con la página trabada. */
html:has(.vgal__visor[open]) {
	overflow: hidden;
}
.vgal__visor[open] {
	display: grid;
	place-items: center;
}
/* Posicionada, no como celda de la rejilla del <dialog>: un grid-item tiene
   `min-height: auto` y crecía hasta el tamaño INTRÍNSECO del video (1280x720),
   así que el `max-height: 100%` de la pieza se medía contra una caja más alta
   que la pantalla y el video se salía por arriba y por abajo, tapando el botón
   de cerrar. Con inset:0 la caja mide exactamente el visor. */
.vgal__escena {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	padding: clamp(3.5rem, 8vh, 6rem) clamp(1rem, 6vw, 5rem);
}
/* Los topes van en unidades del viewport, NO en `100%`: como celda de rejilla con
   proporción intrínseca, el `max-height: 100%` no llegaba a aplicarse y un 16:9
   se estiraba al ancho de la escena (1376x774 en una pantalla de 730), saliéndose
   por arriba y por abajo y tapando el botón de cerrar. Con vh/vw el tope es una
   longitud definida y siempre se respeta. */
.vgal__escena :is(video, img) {
	max-width: 92vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	display: block;
	background: #000;
}

.vgal__leyenda {
	position: absolute;
	left: var(--pad);
	bottom: clamp(1rem, 3vh, 2rem);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.85rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}
.vgal__leyenda-n {
	color: var(--rojo);
}
.vgal__leyenda-t {
	color: rgb(255 255 255 / 0.72);
}

.vgal__ctrl {
	position: absolute;
	width: 3rem;
	height: 3rem;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 999px;
	background: rgb(0 0 0 / 0.35);
	color: var(--paper);
	cursor: pointer;
	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		transform 0.4s var(--ease-entrada);
}
.vgal__ctrl:hover,
.vgal__ctrl:focus-visible {
	background: var(--rojo);
	border-color: var(--rojo);
}
.vgal__ctrl[hidden] {
	display: none;
}
/* Chevrons y aspa dibujados con bordes: sin iconos externos ni SVG inline. */
.vgal__ctrl::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}
.vgal__ctrl--prev {
	left: clamp(0.75rem, 3vw, 2.5rem);
	top: 50%;
	transform: translateY(-50%);
}
.vgal__ctrl--prev::before {
	transform: translateX(2px) rotate(-135deg);
}
.vgal__ctrl--next {
	right: clamp(0.75rem, 3vw, 2.5rem);
	top: 50%;
	transform: translateY(-50%);
}
.vgal__ctrl--next::before {
	transform: translateX(-2px) rotate(45deg);
}
.vgal__ctrl--cerrar {
	top: clamp(0.75rem, 3vh, 2rem);
	right: clamp(0.75rem, 3vw, 2.5rem);
}
.vgal__ctrl--cerrar::before {
	width: 0.85rem;
	height: 0.85rem;
	border: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
	.vgal__visor[open] {
		animation: vgal-visor-in 0.45s var(--ease-entrada);
	}
	.vgal__visor[open]::backdrop {
		animation: vgal-fundido 0.35s ease;
	}
}
@keyframes vgal-visor-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}
@keyframes vgal-fundido {
	from {
		opacity: 0;
	}
}

/* --------------------------------------------------------------------------
   Tablet y móvil: las bandas se apilan. Los desfases y los anchos por
   proporción dejan de tener sentido en una sola columna, pero las verticales
   SÍ conservan un tope: a ancho completo, un 9:16 mide dos pantallas de alto.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.vgal__banda--par.is-alto,
	.vgal__banda--par.is-cuadro,
	.vgal__banda--terna,
	.vgal__banda--mix,
	.vgal__banda--solo.is-ancho,
	.vgal__banda--solo.is-cuadro {
		width: 100%;
	}
	.vgal__banda--terna {
		grid-template-columns: repeat(3, 1fr);
	}
	.vgal__banda--solo.is-alto {
		width: min(100%, 16rem);
	}
}

@media (max-width: 700px) {
	.vgal {
		--vgal-desfase: clamp(1rem, 4vw, 2rem);
	}
	.vgal__banda,
	.vgal__banda--par,
	.vgal__banda--par.vgal__banda--der,
	.vgal__banda--mix,
	.vgal__banda--mix.vgal__banda--der,
	.vgal__banda--terna {
		grid-template-columns: 1fr;
		width: 100%;
	}
	/* Sin desfase vertical en una sola columna: solo dejaría un hueco. */
	.vgal__banda > * {
		margin-top: 0 !important;
	}
	/* Una vertical a ancho completo de móvil llega a 1.7 pantallas de alto: se
	   tapa entera y hay que scrollear dentro de la pieza para verla. El tope del
	   74% la deja en una pantalla y de paso da margen lateral a la columna.
	   Aplica también dentro de las ternas, que aquí ya son una sola columna. */
	.vgal__pieza--alto {
		width: min(100%, 74%);
		margin-inline: auto;
	}
	.vgal__banda--solo.is-alto {
		width: 100%;
	}
	.vgal__ctrl--prev {
		left: clamp(0.75rem, 3vw, 2.5rem);
		top: auto;
		bottom: clamp(0.75rem, 3vh, 2rem);
		transform: none;
	}
	.vgal__ctrl--next {
		right: clamp(0.75rem, 3vw, 2.5rem);
		top: auto;
		bottom: clamp(0.75rem, 3vh, 2rem);
		transform: none;
	}
	.vgal__leyenda {
		left: 50%;
		transform: translateX(-50%);
		bottom: clamp(1.4rem, 4vh, 2.4rem);
		max-width: 60vw;
		justify-content: center;
	}
}