/* ==========================================================================
   Isola TV
   ========================================================================== */

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-var.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-var.woff2") format("woff2");
	font-weight: 400 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-var-italic.woff2") format("woff2");
	font-weight: 400 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Marca: blanco, negro y amarillo Isola. */
	--fondo: #f6f6f4;
	--tinta: #0a0a0a;
	--tinta-suave: #6e6e6a;
	--amarillo: #ffcc33;

	--sans: "Inter", system-ui, sans-serif;
	--serif: "Playfair Display", Georgia, serif;

	/* Escala fluida: de móvil (360px) a pantalla grande (1920px). */
	--texto-xs: clamp(0.6875rem, 0.66rem + 0.12vw, 0.8125rem);
	--texto-s: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem);
	--texto-m: clamp(1rem, 0.94rem + 0.3vw, 1.3125rem);

	--margen: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
	--radio: clamp(0.75rem, 0.5rem + 0.9vw, 1.5rem);

	--curva: cubic-bezier(0.22, 1, 0.36, 1);

	/* Cabecera fija: margen a las esquinas y altura que se reserva arriba. */
	--borde: clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
	--alto-cabecera: clamp(3rem, 2.6rem + 1.4vw, 4.25rem);
	--logo-ancho: clamp(96px, 70px + 3.5vw, 150px);
	--alto-contador: 3.1rem; /* contador del carrusel con sus márgenes (1,1 + 1 + 1 rem) */
	--fin-cabecera: calc(var(--borde) + var(--logo-alto)); /* parte baja del logo y el menú */
	--logo-alto: calc(var(--logo-ancho) * 89 / 300); /* proporción del PNG del logo */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--fondo);
	color: var(--tinta);
	font-family: var(--sans);
	font-size: var(--texto-s);
	line-height: 1.4;
	letter-spacing: -0.01em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
video {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
}

button {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: 2px solid var(--tinta);
	outline-offset: 3px;
}

/* Texto solo para lectores de pantalla. */
.solo-lectores {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

/* Logo y menú van cada uno por su cuenta (no dentro de una caja): así el menú puede
   fundirse con lo que pasa por debajo. Desde el 20/10 no son fijos: se van con el scroll. */
.cabecera-logo {
	position: absolute;
	top: var(--borde);
	left: var(--borde);
	z-index: 60;
	line-height: 0;
}

.cabecera-logo img {
	width: var(--logo-ancho);
	height: auto;
}

.cabecera-menu {
	position: absolute;
	top: var(--borde);
	right: var(--borde);
	z-index: 60;
	/* Misma altura que el logo y el texto centrado: los dos quedan en la misma línea. */
	display: flex;
	align-items: center;
	height: var(--logo-alto);
	color: #fff;
	/* Blanco en «diferencia»: negro sobre el fondo claro, invertido sobre los vídeos. */
	mix-blend-mode: difference;
}

.cabecera-menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.35rem clamp(1rem, 0.5rem + 1.4vw, 2rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cabecera-menu a {
	display: inline-block;
	/* Playfair cursiva (20/10; antes Inter en mayúsculas con el «rodillo»). */
	font-family: var(--serif);
	font-size: var(--texto-m);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-decoration: none;
}

/* Al pasar el ratón se dibuja detrás una franja amarilla de izquierda a derecha (como en los
   enlaces de service). En «diferencia» el amarillo saldría azul, así
   que mientras hay un enlace con el ratón encima el menú pasa a negro normal. */
@media (hover: hover) {
	.cabecera-menu a {
		background-image: linear-gradient(var(--amarillo), var(--amarillo));
		background-repeat: no-repeat;
		background-position: 0 55%;
		background-size: 0 0.95em;
		transition: background-size 0.45s var(--curva);
	}

	.cabecera-menu a:hover,
	.cabecera-menu a:focus-visible {
		background-size: 100% 0.95em;
	}

	/* «is-franja» lo pone el JS al entrar en un enlace y lo quita cuando la franja ya se ha
	   recogido: si el menú volviera a «diferencia» antes, la franja se vería azul al irse. */
	.cabecera-menu.is-franja,
	.cabecera-menu:has(a:focus-visible) {
		color: var(--tinta);
		mix-blend-mode: normal;
	}
}

/* Botón «Menú» (solo móvil) y menú a pantalla completa. */
.menu-boton {
	display: none;
}

@media (max-width: 767px) {
	.menu-boton {
		position: absolute;
		top: var(--borde);
		right: var(--borde);
		z-index: 90;
		display: flex;
		align-items: center;
		height: var(--logo-alto);
		padding: 0;
		border: 0;
		background: none;
		color: #fff;
		mix-blend-mode: difference;
		font-size: var(--texto-s);
		font-weight: 500;
		letter-spacing: -0.01em;
		text-transform: uppercase;
		cursor: pointer;
	}

	.is-menu-abierto .menu-boton {
		color: var(--tinta);
		mix-blend-mode: normal;
	}

	.cabecera-menu {
		position: fixed; /* el menú abierto sí cubre la pantalla */
		inset: 0;
		top: 0;
		right: 0;
		height: auto;
		z-index: 80;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--borde);
		background: var(--amarillo);
		color: var(--tinta);
		mix-blend-mode: normal;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s var(--curva), visibility 0s 0.4s;
	}

	.is-menu-abierto .cabecera-menu {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.4s var(--curva);
	}

	.cabecera-menu ul {
		flex-direction: column;
		align-items: center;
		gap: 0.6rem;
	}

	.cabecera-menu a {
		font-size: clamp(2rem, 1.2rem + 5vw, 3rem);
		letter-spacing: -0.03em;
		transform: translateY(1rem);
		opacity: 0;
		transition: transform 0.5s var(--curva), opacity 0.5s var(--curva);
	}

	.is-menu-abierto .cabecera-menu a {
		transform: none;
		opacity: 1;
	}

	.is-menu-abierto .cabecera-menu li:nth-child(2) a { transition-delay: 0.05s; }
	.is-menu-abierto .cabecera-menu li:nth-child(3) a { transition-delay: 0.1s; }

	/* El logo queda por encima del menú abierto. */
	.cabecera-logo {
		z-index: 90;
	}

	.is-menu-abierto {
		overflow: hidden;
	}
}

/* Con la sesión de WordPress abierta, la barra negra de arriba tapaba la cabecera. */
.admin-bar .cabecera-logo,
.admin-bar .cabecera-menu,
.admin-bar .menu-boton {
	margin-top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .cabecera-logo,
	.admin-bar .menu-boton {
		margin-top: 46px;
	}

	.admin-bar .cabecera-menu {
		margin-top: 0;
	}
}

main.contenido {
	padding-top: calc(var(--alto-cabecera) + 1rem);
}

/* «Rodillo» (enlaces de la 404): la palabra en Inter sube y entra desde abajo la misma en
   Playfair cursiva. */
.rodillo {
	position: relative;
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.rodillo-a,
.rodillo-b {
	display: block;
	padding: 0.2em 0; /* aire para los trazos altos y bajos de la Playfair */
	transition: transform 0.5s var(--curva);
}

.rodillo-b {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	/* Algo más grande que la Inter; la altura de línea y el aire se compensan para
	   que ocupe lo mismo que la palabra en Inter y el rodillo encaje. */
	font-size: 1.18em;
	line-height: calc(1.3 / 1.18);
	padding-block: calc(0.2em / 1.18);
	white-space: nowrap;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
}

a:hover .rodillo-a,
a:hover .rodillo-b,
a:focus-visible .rodillo-a,
a:focus-visible .rodillo-b {
	transform: translateY(-100%);
}

/* --------------------------------------------------------------------------
   Pieza (home y Works)
   -------------------------------------------------------------------------- */

.pieza {
	margin: 0;
}

.pieza-marco {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	position: relative;
	overflow: hidden;
	background: #e4e4e0;
	/* Cursor: el símbolo de Isola (el «iS» sobre amarillo), con el punto activo en el centro. */
	cursor: url("../svg/cursor-isola.svg") 16 16, pointer;
}

/* Placeholder de carga: mientras la pieza no ha cargado, un brillo cruza el marco gris en
   bucle; al cargar («is-cargada», lo pone el JS), se desvanece. */
.pieza-marco::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%) no-repeat;
	background-size: 250% 100%;
	animation: cargando 1.4s ease-in-out infinite;
	pointer-events: none;
	transition: opacity 0.5s var(--curva);
}

.pieza-marco.is-cargada::after {
	opacity: 0;
	animation: none;
}

@keyframes cargando {
	from { background-position: 130% 0; }
	to { background-position: -30% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pieza-marco::after {
		animation: none;
	}
}

.pieza-loop {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--curva), opacity 0.6s var(--curva);
}

/* Fondo del marco: el póster (lo pone la plantilla), para que nunca se vea un hueco. */
.pieza-marco {
	background-position: center;
	background-size: cover;
}

/* El vídeo aparece (fundido de 0,25 s) cuando ya se está reproduciendo («is-reproduciendo», del
   JS); antes se ve el póster del fondo. Así no hay pantallazo blanco en el iPhone ni salto. */
video.pieza-loop {
	opacity: 0;
	transition: transform 1.2s var(--curva), opacity 0.25s ease-out;
}

video.pieza-loop.is-reproduciendo {
	opacity: 1;
}

/* Marca y campaña, una encima de otra, centradas sobre el vídeo. */
.pieza-pie {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.2em;
	margin: 0;
	padding: 1rem;
	color: #fff;
	text-align: center;
	text-shadow: 0 0 1.5em rgba(0, 0, 0, 0.35);
	pointer-events: none;
	transition: color 0.35s var(--curva);
}

.pieza-marco:focus-visible {
	outline: 3px solid var(--amarillo);
	outline-offset: -3px;
}

.carrusel-pieza .pieza-marco {
	transition: transform 0.6s var(--curva);
}

.carrusel-pieza .pieza-marco:hover {
	transform: scale(1.03);
}

.pieza-marco:hover .pieza-pie,
.pieza-marco:focus-visible .pieza-pie {
	color: var(--amarillo);
}

.pieza-marca {
	font-size: clamp(0.75rem, 0.65rem + 0.45vw, 1.125rem);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
}

.pieza-campana {
	font-family: var(--serif);
	letter-spacing: -0.02em;
	font-size: clamp(1.5rem, 1rem + 2.2vw, 3.5rem);
	font-style: italic;
	line-height: 1.05;
}

/* --------------------------------------------------------------------------
   Home: carrusel
   -------------------------------------------------------------------------- */

.home .contenido {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	/* Los vídeos quedan centrados entre la parte baja de la cabecera y la de la pantalla. */
	padding-top: var(--fin-cabecera);
	padding-bottom: 0;
}

.carrusel {
	--proporcion: 16 / 9;
	/* Alto máximo: lo que cabe centrado bajo la cabecera dejando un poco de aire abajo (y, por
	   simetría, arriba). (Hasta el 20/10 dejaba el sitio de la pegatina del reel, ya quitada.) */
	--ancho: min(77vw, calc((100svh - var(--fin-cabecera) - 2 * (var(--borde) + 2.5rem)) * 16 / 9));
	--hueco: clamp(1rem, 0.4rem + 2.4vw, 3rem);
	column-gap: var(--hueco); /* el JS lee de aquí el hueco entre piezas */
	position: relative;
	overflow: hidden;
	/* Arriba, el mismo alto que el contador de abajo: así lo centrado son los vídeos. */
	padding-top: var(--alto-contador);
	padding-bottom: 1rem;
	touch-action: pan-y;
	user-select: none;
	-webkit-user-select: none;
}

.carrusel-pista {
	position: relative;
	height: calc(var(--ancho) / (var(--proporcion)));
}

.carrusel-pieza .pieza-marco {
	aspect-ratio: var(--proporcion);
}

.carrusel-pieza {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--ancho);
	will-change: transform;
}

/* Contador «01 / 05» y barra amarilla que se llena mientras dura cada pieza. */
.carrusel-progreso {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.9em;
	height: 1rem;
	margin-top: 1.1rem;
	font-size: var(--texto-xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.carrusel:not(.is-listo) .carrusel-progreso {
	display: none;
}

.carrusel-barra {
	position: relative;
	width: clamp(4rem, 3rem + 4vw, 7rem);
	height: 2px;
	background: rgba(10, 10, 10, 0.12);
	overflow: hidden;
}

.carrusel-barra::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--amarillo);
	transform: scaleX(var(--progreso, 0));
	transform-origin: left;
}

.carrusel-total {
	color: var(--tinta-suave);
}

/* Sin JavaScript: fila con scroll horizontal normal. */
.carrusel:not(.is-listo) .carrusel-pista {
	display: flex;
	gap: var(--hueco);
	height: auto;
	overflow-x: auto;
	padding: 0 var(--margen);
	scroll-snap-type: x mandatory;
}

.carrusel:not(.is-listo) .carrusel-pieza {
	position: static;
	flex: 0 0 var(--ancho);
	scroll-snap-align: center;
}

.carrusel.is-arrastrando .pieza-marco {
	cursor: grabbing;
}

.carrusel-vacio {
	padding: var(--margen);
	text-align: center;
	color: var(--tinta-suave);
}

/* Tablet en vertical y móvil: piezas verticales (4:5), que llenan mucho más la pantalla.
   El loop se recorta al centro. */
@media (max-width: 1024px) and (orientation: portrait) {
	.carrusel {
		--proporcion: 4 / 5;
		--ancho: min(68vw, calc((100svh - 15rem) * 4 / 5));
	}
}

@media (max-width: 767px) {
	.carrusel {
		--proporcion: 4 / 5;
		--ancho: min(80vw, calc((100svh - 13rem) * 4 / 5));
	}
}

/* --------------------------------------------------------------------------
   Works & Talents: parrilla (ref. Films de The Production Club)
   -------------------------------------------------------------------------- */

.works {
	padding: clamp(1.5rem, 1rem + 2vw, 3rem) var(--borde) 0; /* aire entre la cabecera y la parrilla */
}

.works-parrilla {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	align-items: start;
	gap: clamp(1.75rem, 1.2rem + 1.5vw, 2.75rem) 20px;
}

@media (max-width: 1100px) {
	.works-parrilla {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.works-parrilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 12px;
	}
}

/* Filtro por categoría, encima de la parrilla (23/10; plegado tras «Filtrar» desde el 23/10). Se queda pegado arriba al
   bajar, sobre un fondo translúcido. Categorías en Playfair cursiva con su número pequeño;
   al pasar el ratón, una línea amarilla debajo; al marcarla, la línea sube y llena la franja
   (es un fondo con background-size animado, como la ficha). Se pueden marcar varias. */
.works-filtro {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 2rem;
	margin: 0 calc(-1 * var(--borde)) clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	padding: 0.8rem var(--borde) 0.7rem;
	box-shadow: 0 1px 0 transparent;
	transition: box-shadow 0.3s ease-out, background-color 0.3s ease-out;
	animation: aparecer 0.45s ease-out 0.1s both;
}

/* Pegado arriba (lo marca el JS): fondo translúcido y una línea fina debajo. */
.works-filtro.is-pegado {
	background-color: color-mix(in srgb, var(--fondo) 86%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 rgba(10, 10, 10, 0.08);
}

/* «Filtrar»: abre y cierra el panel de categorías. En Playfair cursiva, como las categorías,
   con un «+» que gira y se convierte en «×» al abrir. Con el panel cerrado y alguna categoría
   marcada, las marcadas salen al lado en gris («— Humor, VFX»). */
.filtro-abrir {
	display: inline-flex;
	align-items: baseline;
	min-width: 0;
	max-width: 70%;
	padding: 0.02em 0.28em 0.08em;
	margin-left: -0.28em; /* el texto alineado con la parrilla */
	border: 0;
	background: none;
	color: var(--tinta);
	font-family: var(--serif);
	font-size: var(--texto-m);
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 1.15;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.filtro-abrir-texto {
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 0.12em;
	transition: background-size 0.45s var(--curva);
}

@media (hover: hover) and (pointer: fine) {
	.filtro-abrir:hover .filtro-abrir-texto {
		background-size: 100% 0.12em;
	}
}

.filtro-abrir:focus-visible {
	outline: 1px solid var(--tinta);
	outline-offset: 2px;
}

/* El «+» con dos trazos finos; al abrir gira 45° y queda una «×». */
.filtro-signo {
	position: relative;
	flex: none;
	width: 0.55em;
	height: 0.55em;
	margin-left: 0.4em;
	transition: transform 0.5s var(--curva);
}

.filtro-signo::before,
.filtro-signo::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 1.5px;
	margin-top: -0.75px;
	background: currentColor;
}

.filtro-signo::after {
	transform: rotate(90deg);
}

.works-filtro.is-abierto .filtro-signo {
	transform: rotate(45deg);
}

.filtro-marcadas {
	overflow: hidden;
	margin-left: 0.5em;
	color: var(--tinta-suave);
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.3s var(--curva);
}

.filtro-marcadas:not(:empty) {
	opacity: 1;
}

.works-filtro.is-abierto .filtro-marcadas {
	opacity: 0;
}

/* Panel: se despliega con la altura animada (filas de 0fr a 1fr) y las categorías aparecen
   en cascada (--i = su orden, desde page-works.php). Al cerrar, se van todas a la vez. */
.filtro-panel {
	display: grid;
	flex-basis: 100%;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s var(--curva);
}

.works-filtro.is-abierto .filtro-panel {
	grid-template-rows: 1fr;
}

.filtro-panel-dentro {
	min-height: 0;
	overflow: hidden;
}

.filtro-panel .filtro-lista {
	padding-top: 0.55rem;
}

.filtro-panel .filtro-cat {
	opacity: 0;
	transform: translateY(0.35em);
}

.works-filtro.is-abierto .filtro-cat {
	opacity: 1;
	transform: none;
	transition-delay: 0s, 0s, calc(0.08s + var(--i, 0) * 0.018s), calc(0.08s + var(--i, 0) * 0.018s);
}

@media (prefers-reduced-motion: reduce) {
	.filtro-panel,
	.filtro-panel .filtro-cat,
	.filtro-signo {
		transition: none;
	}
}

.filtro-lista {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em 0.55em;
	font-family: var(--serif);
	font-size: var(--texto-m); /* como el menú (23/10; antes, clamp(1.05rem, 0.85rem + 0.7vw, 1.6rem)) */
	font-style: italic;
	letter-spacing: -0.02em;
}

.filtro-cat {
	padding: 0.02em 0.28em 0.08em;
	border: 0;
	color: var(--tinta);
	font: inherit;
	line-height: 1.15;
	cursor: pointer;
	background-color: transparent;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 0.12em;
	transition: background-size 0.45s var(--curva), color 0.3s var(--curva), opacity 0.3s ease-out, transform 0.5s var(--curva);
	-webkit-tap-highlight-color: transparent;
}

/* «Todo», en negrita (23/10); con alguna categoría marcada, se apaga a gris como las demás. */
.filtro-todo {
	font-weight: 700;
}

.filtro-cat:focus-visible {
	outline: 1px solid var(--tinta);
	outline-offset: 2px;
}

/* El número de piezas, pequeño y en Inter, arriba a la derecha de la palabra. */
.filtro-cat sup {
	position: relative;
	top: -0.15em;
	margin-left: 0.18em;
	color: var(--tinta-suave);
	font-family: var(--sans);
	font-size: 0.5em;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	transition: color 0.3s var(--curva);
}

@media (hover: hover) and (pointer: fine) {
	.filtro-cat:hover {
		background-size: 100% 0.12em;
	}
}

.filtro-cat[aria-pressed="true"] {
	background-size: 100% 100%;
}

.filtro-cat[aria-pressed="true"] sup {
	color: var(--tinta);
}

/* Con alguna marcada, las demás se apagan (vuelven al negro al pasar el ratón). */
.works-filtro.con-seleccion .filtro-cat[aria-pressed="false"] {
	color: var(--tinta-suave);
}

.works-filtro.con-seleccion .filtro-cat[aria-pressed="false"]:hover {
	color: var(--tinta);
}

/* 5 o 4 columnas: dos iconos pequeños (una barra por columna); el activo en negro. Solo en
   pantallas grandes: en tablet la parrilla va a 3 y en móvil a 2. */
.works-columnas {
	flex: none;
	display: flex;
	align-self: center;
	gap: 0.3rem;
	/* Mismo cuerpo que «Filtrar», para que el icono crezca con él: mide lo que sus mayúsculas
	   (0,72em) y baja 0,03em para que su centro coincida con el de ellas (23/10). */
	font-size: var(--texto-m);
}

.columnas-boton {
	display: grid;
	place-items: center;
	padding: 0.35rem;
	border: 0;
	background: none;
	color: var(--tinta-suave);
	opacity: 0.55;
	transform: translateY(0.03em);
	cursor: pointer;
	transition: color 0.25s var(--curva), opacity 0.25s var(--curva);
}

.columnas-boton svg {
	display: block;
	width: 1.03em;
	height: 0.72em;
	fill: currentColor;
}

.columnas-boton:hover,
.columnas-boton[aria-pressed="true"] {
	color: var(--tinta);
	opacity: 1;
}

.columnas-boton:focus-visible {
	outline: 1px solid var(--tinta);
	outline-offset: 1px;
}

@media (max-width: 1100px) {
	.works-columnas {
		display: none;
	}
}

/* Las categorías ocupan como mucho dos tercios del ancho (aunque salga una línea más). En
   móvil van en una sola línea que se desliza (abajo). */
@media (min-width: 768px) {
	.filtro-lista {
		max-width: 66.667%;
	}
}

@media (min-width: 1101px) {
	.works-parrilla.cuatro-columnas {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* En móvil, las categorías en una sola línea que se desliza con el dedo (con un fundido en el
   borde derecho para que se note que hay más). */
@media (max-width: 767px) {
	.works-filtro {
		padding-right: 0;
	}

	.filtro-abrir {
		max-width: calc(100% - var(--borde));
	}

	.filtro-lista {
		flex-wrap: nowrap;
		width: 100%;
		padding-right: var(--borde);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
		mask-image: linear-gradient(to right, #000 85%, transparent);
	}

	.filtro-lista::-webkit-scrollbar {
		display: none;
	}

	.filtro-cat {
		flex: none;
		white-space: nowrap;
	}
}

/* Mientras se filtra, sin la animación de carga (si no, las piezas que vuelven la repetirían). */
.works-parrilla.is-filtrada .works-pieza {
	animation: none;
}

.works-pieza.is-fuera {
	display: none;
}

.works-pieza .pieza-marco {
	aspect-ratio: var(--proporcion-pieza, 16 / 9);
}

.works-pieza .pieza-loop {
	transition: transform 0.8s var(--curva), opacity 0.25s ease-out;
}

/* Al pasar el ratón: zoom y la imagen se desplaza dentro del marco siguiendo al ratón
   (--mx, --my van de -1 a 1 y los pone el JS). Con zoom de 1,1 sobra un 5 % por cada
   lado, así que el desplazamiento máximo (4 % × 1,1) nunca deja ver el borde. */
.works-pieza .pieza-marco:hover .pieza-loop {
	transform: scale(1.1) translate(calc(var(--mx, 0) * -4%), calc(var(--my, 0) * -4%));
}

/* Al pasar el ratón por la pieza, se dibuja una franja amarilla detrás de la marca y luego
   de la campaña (como en la etiqueta de service). */
.ficha-marca,
.ficha-campana {
	/* La franja ocupa toda la línea y las dos quedan pegadas (sin hueco entre ellas). Un poco
	   de aire a los lados, compensado para que el texto siga alineado con la imagen. */
	margin-left: -0.3em;
	padding: 0.05em 0.3em;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 0 100%;
	transition: background-size 0.4s var(--curva);
}

.ficha-director {
	margin-top: 0.2em;
}

.works-pieza:hover .ficha-marca,
.works-pieza:hover .ficha-campana {
	background-size: 100% 100%;
}

.works-pieza:hover .ficha-campana {
	transition-delay: 0.08s;
}

/* Debajo, todo en Inter con el mismo estilo: marca y campaña en negro, director más claro. */
.pieza-ficha {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin: 0.75em 0 0;
	font-size: var(--texto-xs);
	line-height: 1.3;
	text-transform: uppercase;
}

.ficha-director {
	color: var(--tinta-suave);
}

/* --------------------------------------------------------------------------
   Nosotros: contenedor a sangre, sobre el fondo de la web, con el muñeco-cámara
   y el equipo.
   -------------------------------------------------------------------------- */

/* El contenedor empieza arriba del todo, por debajo de la cabecera (que es fija y
   transparente): así el blanco o el negro llegan hasta el borde de la ventana. */
main.contenido:has(.nosotros) {
	padding-top: 0;
}

.nosotros-escena {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: clamp(2rem, 1rem + 3vw, 5rem);
	min-height: 100svh;
	padding: calc(var(--alto-cabecera) + clamp(3rem, 2rem + 3vw, 5rem)) var(--borde) clamp(3rem, 2rem + 3vw, 5rem);
	background: var(--fondo);
	color: var(--tinta);
	transition: background-color 0.45s var(--curva);
}

/* Con el ratón sobre la animación, el fondo del contenedor pasa al amarillo de la marca.
   El gris del texto se oscurece un poco para leerse bien sobre él. */
.nosotros-escena.is-amarilla {
	--tinta-suave: rgba(10, 10, 10, 0.62);
	background: var(--amarillo);
}

/* Y el menú deja de invertirse (blanco «en diferencia» sobre amarillo sale azul): negro. */
.con-fondo-amarillo .cabecera-menu,
.con-fondo-amarillo .menu-boton {
	color: var(--tinta);
	mix-blend-mode: normal;
}

/* El muñeco, sin recuadro: directamente sobre el fondo, al 70 % de su columna. */
.nosotros-figura {
	position: relative;
	width: 70%;
	max-width: 49svh;
	margin: 0 auto;
}

.nosotros-loop {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

/* Equipo en tres columnas (producción ejecutiva, producción y posproducción). Cada persona:
   cargo en Playfair cursiva (como los títulos del pie), nombre, correo y su frase. */
.equipo-columnas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem clamp(1.5rem, 0.75rem + 2vw, 3.5rem);
}

.equipo-lista {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 1.2vw, 2.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--texto-xs);
	line-height: 1.35;
}

.equipo-persona p {
	margin: 0;
}

.equipo-cargo {
	margin-bottom: 0.35em !important;
	font-family: var(--serif);
	font-size: 1.35em;
	font-style: italic;
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0;
}

.equipo-nombre {
	text-transform: uppercase;
}

.equipo-correo {
	color: var(--tinta-suave);
}

.equipo-correo a {
	color: inherit;
	text-decoration: none;
}

.equipo-correo a:hover {
	color: var(--tinta);
	box-shadow: inset 0 -1px 0 currentColor;
}

.equipo-frase {
	max-width: 24em;
	margin-top: 0.5em !important;
	color: var(--tinta-suave);
}

@media (max-width: 1100px) {
	.nosotros-escena {
		grid-template-columns: 1fr;
	}

	.nosotros-figura {
		width: min(49%, 35svh);
	}
}

@media (max-width: 767px) {
	.equipo-columnas {
		grid-template-columns: 1fr;
	}

	.nosotros-figura {
		width: 60%;
	}
}

/* --------------------------------------------------------------------------
   Página 404
   -------------------------------------------------------------------------- */

.error-404 {
	position: relative; /* los pedazos del 404 caen dentro de esta caja */
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Contenido centrado en la caja, descontando abajo el sitio del montón de pedazos. */
	justify-content: center;
	min-height: calc(100svh - var(--alto-cabecera) - 1rem);
	padding: 2rem var(--borde) clamp(4rem, 2rem + 6vw, 8rem);
	text-align: center;
	overflow: hidden;
}

.error-404-numero {
	margin: 0 0 0.12em; /* la cursiva baja de la línea: aire antes de la frase */
	font-family: var(--serif);
	/* Enorme: lo que permita el ancho o el alto de la pantalla, lo que sea menor. */
	font-size: min(28vw, 34svh);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 0.85;
}

.error-404-numero span {
	display: inline-block;
}

/* Cuando se rompe, el original desaparece y quedan sus pedazos (conserva su sitio). */
.error-404.is-rota .error-404-numero {
	visibility: hidden;
}

.error-404-pedazos {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.error-404-pedazo {
	position: absolute;
	top: 0;
	left: 0;
	will-change: transform;
}

.error-404-pedazo span {
	position: absolute;
	inset: 0;
	display: block;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	line-height: 0.85;
	white-space: pre;
}

.error-404-texto {
	margin: 0 0 0.6em; /* va encima del 404 */
	font-size: var(--texto-m);
}

.error-404-enlaces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem clamp(1.25rem, 0.75rem + 1.5vw, 2.5rem);
	margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* Mismo estilo y mismo efecto «rodillo» que el menú. */
.error-404-enlaces a {
	display: inline-block;
	font-size: var(--texto-s);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: inset 0 -2px 0 var(--amarillo);
}

/* --------------------------------------------------------------------------
   Landing privada de service (ref. little.es y little.es/plaza)
   -------------------------------------------------------------------------- */

.service {
	padding: 0 var(--borde);
}

/* Sin cabecera: la frase empieza arriba del todo. */
/* Aire sobre la frase: el doble del margen de los lados (≈ 34 px en el portátil). */
main.contenido:has(.service) {
	padding-top: calc(var(--borde) * 2);
}

/* Sin ninguna sección abierta, la frase ocupa toda la altura de la pantalla (arriba del
   todo) y el pie queda fuera. Con una abierta, la sección va justo debajo de la frase. */
.service-portada {
	min-height: calc(100svh - var(--borde) * 2);
}

.service.con-seccion .service-portada {
	min-height: 0;
	padding-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Frase enorme, alineada a la izquierda; deja aire a la derecha (no llega al borde).
   Justificada, la última frase estiraba los espacios entre palabras. */
.service-frase {
	max-width: 90%;
	margin: 0;
	font-size: clamp(1.5rem, 0.4rem + 3.1vw, 4.4rem);
	font-weight: 500;
	letter-spacing: -0.055em;
	line-height: 1.02;
	text-align: left;
	hyphens: none;
}

/* Al cargar, la frase se construye línea a línea: cada palabra sube un poco y aparece,
   con un pequeño desfase entre líneas (--linea, lo pone el JS). Hasta que el JS la prepara,
   la frase no se ve; si el JS fallara, aparece sola al segundo y medio. */
.service-frase {
	opacity: 0;
	animation: frase-segura 0s 1.5s forwards;
}

.service-frase.is-lista {
	opacity: 1;
	animation: none;
}

/* Las palabras siguen siendo texto normal (no inline-block), para que las comas no se
   separen de su palabra: se mueven con «top», que sí vale para elementos en línea. */
.frase-palabra {
	position: relative;
}

.service-frase.is-animando .frase-palabra {
	opacity: 0;
	top: 0.45em;
	animation: frase-palabra 0.7s var(--curva) forwards;
	animation-delay: calc(var(--linea, 0) * 0.09s + 0.1s);
}

/* La franja del enlace abierto se dibuja cuando la frase ya está. */
.service-frase.is-animando .service-enlace {
	background-size: 0 0.95em;
}

@keyframes frase-palabra {
	to { opacity: 1; top: 0; }
}

@keyframes frase-segura {
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.service-frase {
		opacity: 1;
		animation: none;
	}
}

/* El logo en lugar de «Isola»: el SVG negro sobre el recuadro amarillo de la marca, con las
   letras a la altura de las mayúsculas de la frase y apoyadas en su línea de base. */
.service-logo {
	display: inline-block;
	padding: 0.07em 0.12em;
	background: var(--amarillo);
	line-height: 0;
	vertical-align: -0.07em;
	letter-spacing: 0;
}

.service-logo svg {
	display: block;
	width: auto;
	height: 0.72em; /* altura de las mayúsculas de Inter */
}

/* Las tres líneas de service: en negro, como el texto, solo cambia la letra (Playfair
   cursiva). Al pasar el ratón (o con su sección abierta), se dibuja detrás una franja
   amarilla de izquierda a derecha, como en la etiqueta de la parrilla. Es un fondo
   (y no un ::before) para que siga al enlace aunque se parta en dos líneas. */
.service-enlace {
	color: inherit;
	text-decoration: none;
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	/* Playfair tiene la «x» un 3,4 % más baja que Inter: así las dos coinciden. */
	font-size: 1.035em;
	letter-spacing: -0.035em;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 60%;
	background-size: 0 0.95em;
	cursor: pointer;
	transition: background-size 0.45s var(--curva);
}

.service-enlace:hover,
.service-enlace:focus-visible,
.service-enlace[aria-expanded="true"] {
	background-size: 100% 0.95em;
}

/* Selector de categoría al final de cada sección: las tres, separadas por «·», con la misma
   franja amarilla que los enlaces de la frase (la de esta sección, marcada). */
.service-categorias {
	margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	text-align: center;
	font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2.25rem);
	line-height: 1.3;
	letter-spacing: -0.035em;
}

.service-categoria {
	color: inherit;
	text-decoration: none;
	font-family: var(--serif);
	font-style: italic;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 60%;
	background-size: 0 0.95em;
	transition: background-size 0.45s var(--curva);
}

.service-categoria:hover,
.service-categoria:focus-visible,
.service-categoria[aria-current="true"] {
	background-size: 100% 0.95em;
}

.service-punto {
	padding: 0 0.15em;
}

/* Botón para volver arriba: cuadrado negro con la flecha amarilla, abajo a la derecha.
   Aparece al bajar más allá de la frase. */
.service-arriba {
	position: fixed;
	right: var(--borde);
	bottom: var(--borde);
	z-index: 60;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: var(--tinta);
	color: var(--amarillo);
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
}

.service-arriba.is-visible {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.service-arriba svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: square;
	transition: transform 0.35s var(--curva);
}

.service-arriba:hover svg {
	transform: translateY(-3px);
}

/* Sección que se abre debajo de la frase. Sus piezas aparecen una a una por opacidad
   (el retardo de cada una, --retardo, lo pone el JS). */
.service-seccion {
	padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.service-seccion .service-pieza {
	opacity: 0;
	transition: opacity 0.7s ease-out var(--retardo, 0s);
}

.service-seccion.is-visible .service-pieza {
	opacity: 1;
}

/* Cambio de vista Grid / Slider, arriba a la derecha de la sección (estilo del menú). */
.service-vistas {
	display: flex;
	justify-content: flex-end;
	gap: 1.25rem;
	margin-bottom: 0.9rem;
}

.service-vista {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tinta-suave);
	font: inherit;
	font-size: var(--texto-s);
	font-weight: 500;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.25s var(--curva);
}

.service-vista:hover,
.service-vista[aria-pressed="true"] {
	color: var(--tinta);
}

.service-vista[aria-pressed="true"] {
	box-shadow: inset 0 -2px 0 var(--amarillo);
}

/* El carrusel dentro de la sección: a sangre, como en la home. */
.service-seccion .carrusel {
	margin: 0 calc(-1 * var(--borde));
	padding-top: 0.5rem;
}

/* Parrilla: filas que alternan 3 y 2 piezas, todas en 16:9, esquinas rectas. */
.service-fila {
	display: flex;
	gap: 15px;
	margin-bottom: 15px;
}

.service-pieza {
	flex: 1 1 0;
	min-width: 0;
}

.service-pieza .pieza-marco {
	aspect-ratio: 16 / 9;
}

.service-vacio {
	color: var(--tinta-suave);
}

/* Ficha bajo cada pieza (marca, campaña y país): solo en táctil, donde no hay etiqueta que
   siga al ratón. Con ratón, oculta. */
.service-ficha {
	display: none;
}

@media (hover: none), (pointer: coarse) {
	.service-ficha {
		display: flex;
		margin-bottom: 0.6em;
	}
}

/* Etiqueta que sigue al cursor: marca / campaña / país, en negro sobre una franja amarilla
   (como el logo). Al entrar en una pieza, los campos aparecen uno a uno: primero se dibuja
   la franja de izquierda a derecha y luego entra el texto (--i = orden del campo, lo pone el JS).
   El rótulo del modo Slider (.service-rotulo) es igual, pero quieto arriba a la izquierda de la
   pieza, y se dibuja cuando la pieza llega al centro (.is-activa). */
.service-etiqueta,
.service-rotulo {
	z-index: 70;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	color: var(--tinta);
	font-size: var(--texto-xs);
	line-height: 1.2;
	text-align: left;
	text-transform: uppercase;
	pointer-events: none;
}

.service-etiqueta {
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translate3d(var(--x, 0), var(--y, 0), 0);
	transition: opacity 0.2s var(--curva);
}

.service-etiqueta.is-visible {
	opacity: 1;
}

.service-rotulo {
	position: absolute;
	top: var(--borde);
	left: var(--borde);
	z-index: 2;
}

/* En la home, el rótulo un poco más grande (se ve sobre la pieza grande del carrusel). */
.home .service-rotulo {
	font-size: var(--texto-s);
}

.service-etiqueta > *,
.service-rotulo > * {
	position: relative;
	isolation: isolate;
	padding: 0.15em 0.4em;
	font-weight: inherit;
	color: transparent;
}

/* La franja amarilla, que se dibuja de izquierda a derecha. */
.service-etiqueta > *::before,
.service-rotulo > *::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--amarillo);
	transform: scaleX(0);
	transform-origin: left center;
}

.service-etiqueta > *,
.carrusel-pieza.is-activa.is-quieta .service-rotulo > * {
	animation: etiqueta-texto 0.3s var(--curva) forwards;
	animation-delay: calc(var(--i, 0) * 0.09s + 0.16s);
}

.service-etiqueta > *::before,
.carrusel-pieza.is-activa.is-quieta .service-rotulo > *::before {
	animation: etiqueta-franja 0.35s var(--curva) forwards;
	animation-delay: calc(var(--i, 0) * 0.09s);
}

/* En el carrusel, el rótulo entra cuando la pieza ya está quieta en el centro («is-quieta»,
   del JS) y, además, con un pequeño margen (0,2 s). */
.carrusel-pieza.is-activa.is-quieta .service-rotulo > * {
	animation-delay: calc(var(--i, 0) * 0.09s + 0.36s);
}

.carrusel-pieza.is-activa.is-quieta .service-rotulo > *::before {
	animation-delay: calc(var(--i, 0) * 0.09s + 0.2s);
}

/* En el carrusel de la landing, el rótulo sustituye a la marca y la campaña sobreimpresas. */
.service .carrusel-pieza .pieza-pie {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.service-etiqueta > *,
	.service-etiqueta > *::before,
	.carrusel-pieza.is-activa.is-quieta .service-rotulo > *,
	.carrusel-pieza.is-activa.is-quieta .service-rotulo > *::before {
		animation: none;
		color: var(--tinta);
		transform: none;
	}
}

@keyframes etiqueta-franja {
	to { transform: scaleX(1); }
}

@keyframes etiqueta-texto {
	to { color: var(--tinta); }
}

/* El país, en Playfair cursiva. */
.service-etiqueta em,
.service-rotulo em {
	font-family: var(--serif);
	font-size: 1.15em;
	font-style: italic;
	text-transform: none;
	letter-spacing: -0.01em;
}

@media (max-width: 767px) {
	/* En móvil, la parrilla pasa a dos columnas iguales (se ignoran las filas de 3 y 2). */
	.service-grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
	}

	.service-fila {
		display: contents;
	}

	/* Que el «display: grid» de arriba no pise el atributo «hidden» (Grid / Slider). */
	.service-grid[hidden] {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Visor del spot (Vimeo a pantalla completa)
   -------------------------------------------------------------------------- */

.visor {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	/* Columna fija al ancho de la pantalla: sin ella, Safari (iPhone) la ensanchaba según el alto
	   del vídeo y todo se salía por los lados (22/10). */
	grid-template-columns: minmax(0, 1fr);
	place-items: center;
	background: #000;
	/* El recorte lo anima el JS desde la pieza pulsada hasta pantalla completa. */
	clip-path: inset(0 round 0);
	transition: clip-path 0.7s var(--curva);
}

.visor[hidden] {
	display: none;
}

.visor-video {
	/* El ancho se calcula directamente (cabe a lo ancho y a lo alto), sin deducirlo del alto. */
	width: min(100%, calc(100vh * 16 / 9));
	width: min(100%, calc(100svh * 16 / 9));
	aspect-ratio: 16 / 9;
	opacity: 0;
	transition: opacity 0.5s var(--curva) 0.35s;
}

.visor.is-abierto .visor-video {
	opacity: 1;
}

.visor-video iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.visor-cerrar {
	position: absolute;
	top: var(--margen);
	right: var(--margen);
	padding: 0.6em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--amarillo);
	color: var(--tinta);
	font-size: var(--texto-xs);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.4s var(--curva) 0.4s;
}

.visor.is-abierto .visor-cerrar {
	opacity: 1;
}

/* Visor de la landing de service (ref. captura de David): fondo negro, título arriba,
   vídeo, cliente y territorio abajo, la especialidad en vertical a la izquierda y una X. */
.visor-con-info {
	grid-template-rows: auto minmax(0, 1fr) auto;
	gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	padding: clamp(1.25rem, 0.75rem + 2vw, 3rem) clamp(3rem, 2rem + 4vw, 7rem);
	color: var(--amarillo);
	text-align: center;
}

.visor-con-info {
	/* Alto que se reserva para el título, el pie y los márgenes. */
	--visor-reserva: 13rem;
}

.visor-con-info .visor-video {
	/* Cabe entre el título y el pie, sin salirse de la pantalla. */
	width: min(100%, calc((100vh - var(--visor-reserva)) * 16 / 9));
	width: min(100%, calc((100svh - var(--visor-reserva)) * 16 / 9));
	align-self: center;
}

.visor-titulo,
.visor-pie {
	max-width: 100%;
	overflow-wrap: break-word;
}

.visor-titulo,
.visor-pie,
.visor-lateral {
	margin: 0;
	opacity: 0;
	transition: opacity 0.5s var(--curva) 0.45s;
}

.visor.is-abierto .visor-titulo,
.visor.is-abierto .visor-pie,
.visor.is-abierto .visor-lateral {
	opacity: 1;
}

.visor-titulo {
	font-size: clamp(1.5rem, 1rem + 2vw, 3.25rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.visor-marca {
	font-weight: 600;
	text-transform: uppercase;
}

.visor-campana {
	font-family: var(--serif);
	font-style: italic;
	letter-spacing: -0.02em;
}

.visor-pie {
	font-size: clamp(1rem, 0.8rem + 0.8vw, 1.6rem);
	letter-spacing: -0.015em;
}

.visor-pie strong {
	font-weight: 600;
}

.visor-pie em {
	font-family: var(--serif);
	font-style: italic;
}

/* La especialidad, en vertical a la izquierda, de abajo arriba. */
.visor-lateral {
	position: absolute;
	top: 50%;
	left: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
	font-size: var(--texto-xs);
	font-weight: 600;
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(-90deg) translateY(50%);
	transform-origin: center;
}

/* X para cerrar, amarilla. */
.visor-x {
	display: grid;
	place-items: center;
	width: clamp(2.25rem, 2rem + 1vw, 3rem);
	aspect-ratio: 1;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--amarillo);
}

.visor-x svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	transition: transform 0.4s var(--curva);
}

/* Solo en service la X gira al pasar el ratón; en la web pública, quieta. */
.page-template-page-service .visor-x:hover svg {
	transform: rotate(90deg);
}

@media (max-width: 767px) {
	.visor-con-info {
		padding-inline: 1rem;
	}

	.visor-lateral {
		display: none;
	}
}

/* Móvil en horizontal (poca altura): márgenes y textos más pequeños para que el vídeo crezca. */
@media (max-height: 500px) {
	.visor-con-info {
		--visor-reserva: 5.5rem;
		gap: 0.5rem;
		padding: 0.75rem 4rem;
	}

	.visor-titulo {
		font-size: 1.1rem;
	}

	.visor-pie {
		font-size: 0.85rem;
	}

	.visor-lateral {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Pie (ref. The Production Club): Oficinas, Contacto y Redes, centrado
   -------------------------------------------------------------------------- */

.pie {
	/* Datos en el centro. */
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 2rem;
	margin-top: clamp(3rem, 2rem + 4vw, 6rem);
	padding: clamp(2.5rem, 2rem + 2vw, 4rem) clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem);
	border-top: 1px solid var(--tinta);
	font-size: var(--texto-xs);
	letter-spacing: 0;
	text-transform: uppercase;
}

.pie-bloques {
	grid-column: 2;
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: center;
	gap: 2.5rem clamp(2.5rem, 1rem + 5vw, 7rem);
}

/* Tablet: datos en dos columnas, con las redes debajo del contacto. */
@media (max-width: 1100px) {
	.pie {
		grid-template-columns: 1fr;
	}

	.pie-bloques {
		grid-column: 1;
	}

	.pie-bloques {
		grid-template-columns: repeat(2, auto);
	}

	.pie-bloque:nth-child(3) {
		grid-column: 2;
	}
}

.pie-bloque {
	display: grid;
	grid-template-columns: auto auto;
	align-items: start;
	gap: 0 clamp(1.25rem, 0.8rem + 1.5vw, 2.5rem);
}

.pie-titulo {
	margin: 0;
	/* Playfair cursiva, como la campaña: en minúsculas y algo más grande que los datos. */
	font-family: var(--serif);
	font-size: 1.35em;
	font-style: italic;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: -0.01em;
}

.pie-lista {
	display: grid;
	gap: 1.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pie-lista p {
	margin: 0;
}

.pie-suave {
	color: var(--tinta-suave);
}

.pie-lista a {
	text-decoration: none;
}

.pie-lista a[href^="mailto:"] {
	text-transform: none;
}

.pie-lista a:hover {
	color: var(--tinta);
	box-shadow: inset 0 -1px 0 currentColor;
}

.pie-redes {
	gap: 0.5em;
}

/* Sin título visible, pero guarda el hueco para que la columna no se mueva. */
.pie-titulo.is-invisible {
	visibility: hidden;
}

@media (max-width: 767px) {
	.pie {
		grid-template-columns: 1fr;
	}

	.pie-bloques {
		grid-column: 1;
	}

	.pie-bloques {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	.pie-bloque:nth-child(3) {
		grid-column: auto;
	}

	.pie-bloque {
		grid-template-columns: 6.5rem 1fr;
	}

	/* En móvil, las redes van justo debajo del contacto, sin hueco de título. */
	.pie-titulo.is-invisible {
		visibility: visible;
		color: transparent;
	}
}

/* Cinta del pie: el logo tipográfico en negro pasando de derecha a izquierda sobre una franja amarilla, a sangre. */
.pie-cinta {
	grid-column: 1 / -1;
	margin: clamp(1.5rem, 1rem + 2vw, 3rem) calc(-1 * clamp(0.75rem, 0.6rem + 0.5vw, 1.25rem)) calc(-1 * clamp(2.5rem, 2rem + 2vw, 4rem));
	padding: clamp(0.6rem, 0.4rem + 0.8vw, 1.25rem) 0;
	background: var(--amarillo);
	overflow: hidden;
}

.pie-cinta-pista {
	display: flex;
	width: max-content;
	animation: cinta 42s linear infinite;
}

.pie-cinta-tanda {
	display: flex;
	flex-shrink: 0;
}

.pie-cinta img {
	display: block;
	height: clamp(0.8rem, 0.4rem + 1.8vw, 2.4rem);
	width: auto;
	margin-right: clamp(1.5rem, 0.75rem + 3vw, 4.5rem);
}

@keyframes cinta {
	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pie-cinta-pista {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Páginas de ciudad (page-ciudad.php): «Productora de publicidad en …»
   -------------------------------------------------------------------------- */

.ciudad {
	padding: clamp(2rem, 1rem + 4vw, 5rem) var(--borde) clamp(3rem, 2rem + 4vw, 6rem);
}

.ciudad .ciudad-intro {
	max-width: 34em;
	margin: 0 0 1.25rem;
	font-size: var(--texto-s);
	color: var(--tinta-suave);
}

.ciudad h1 {
	max-width: 14em;
	margin: 0;
	font-size: clamp(2.25rem, 0.8rem + 5vw, 6rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 0.98;
}

.ciudad .ciudad-lema {
	margin: 0.6rem 0 0;
	font-family: var(--serif);
	font-size: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
	font-style: italic;
	letter-spacing: -0.02em;
}

.ciudad-imagen {
	margin: clamp(2rem, 1rem + 3vw, 4rem) calc(-1 * var(--borde)) 0;
}

.ciudad-imagen img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Cada bloque: el título a la izquierda y el texto a la derecha. */
.ciudad-bloque {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 1.5rem clamp(2rem, 1rem + 4vw, 6rem);
	margin-top: clamp(3rem, 2rem + 4vw, 6.5rem);
	padding-top: 1.25rem;
	border-top: 1px solid rgba(10, 10, 10, 0.15);
}

.ciudad h2 {
	margin: 0;
	font-family: var(--serif);
	font-size: clamp(1.5rem, 1rem + 1.8vw, 2.75rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.05;
}

.ciudad p {
	margin: 0 0 1em;
	max-width: 38em;
	font-size: var(--texto-m);
	line-height: 1.45;
}

.ciudad-servicios {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

.ciudad h3 {
	margin: 0 0 0.5rem;
	font-size: var(--texto-s);
	font-weight: 500;
	text-transform: uppercase;
}

.ciudad .ciudad-servicios p {
	font-size: var(--texto-s);
	color: var(--tinta-suave);
}

.ciudad-trabajos > p {
	margin-bottom: 2rem;
}

.ciudad-parrilla {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 0;
}

.ciudad-mas {
	margin-top: 2rem;
}

/* Enlaces de las páginas de ciudad: Playfair cursiva con la franja amarilla (como el menú). */
.ciudad-enlace {
	color: inherit;
	font-family: var(--serif);
	font-size: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
	font-style: italic;
	text-decoration: none;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 60%;
	background-size: 0 0.95em;
	transition: background-size 0.45s var(--curva);
}

.ciudad-enlace:hover,
.ciudad-enlace:focus-visible {
	background-size: 100% 0.95em;
}

@media (max-width: 767px) {
	.ciudad-bloque,
	.ciudad-servicios {
		grid-template-columns: minmax(0, 1fr);
	}

	.ciudad-parrilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   Menos movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation: none !important;
	}
}

/* --------------------------------------------------------------------------
   Animaciones de carga (20/10): todo aparece por opacidad.
   - Cabecera: el logo y luego el menú.
   - Carrusel: primero la pieza central y luego las de los lados.
   - Works: las piezas una a una (--retardo, lo pone page-works.php).
   - Equipo & contacto: la animación y luego cada persona, subiendo, una a una.
   -------------------------------------------------------------------------- */
@keyframes aparecer {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes subir {
	from { opacity: 0; transform: translateY(0.9em); }
	to { opacity: 1; transform: none; }
}

.cabecera-logo {
	animation: aparecer 0.45s ease-out 0.05s both;
}

@media (min-width: 768px) {
	.cabecera-menu {
		animation: aparecer 0.45s ease-out 0.12s both;
	}
}

.menu-boton {
	animation: aparecer 0.45s ease-out 0.12s both;
}

.carrusel.is-listo .carrusel-pieza {
	animation: aparecer 0.45s ease-out 0.4s both;
}

.carrusel.is-listo .carrusel-pieza.is-activa {
	animation-delay: 0.15s;
}

.carrusel.is-listo .carrusel-progreso {
	animation: aparecer 0.45s ease-out 0.55s both;
}

.works-pieza {
	animation: aparecer 0.4s ease-out var(--retardo, 0s) both;
}

.nosotros-animacion {
	animation: aparecer 0.45s ease-out 0.15s both;
}

/* Equipo: cada persona sube y aparece, una detrás de otra (--i, desde page-nosotros.php). */
.equipo-persona {
	animation: subir 0.5s var(--curva) both;
	animation-delay: calc(0.25s + var(--i, 0) * 0.06s);
}

@media (prefers-reduced-motion: reduce) {
	.cabecera-logo,
	.cabecera-menu,
	.menu-boton,
	.carrusel.is-listo .carrusel-pieza,
	.carrusel.is-listo .carrusel-progreso,
	.works-pieza,
	.nosotros-animacion,
	.equipo-persona {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Service: menú desplegable y pestañas (28/10, de momento solo en local)
   -------------------------------------------------------------------------- */

/* «Menu» arriba a la derecha, como «Filtrar» en Selected works (Playfair cursiva con el «+»
   que gira a «×»). Debajo, las pestañas, alineadas a la derecha, con la franja amarilla. */
.service-menu {
	position: absolute;
	top: calc(var(--borde) * 2);
	right: var(--borde);
	z-index: 60;
	text-align: right;
}

.admin-bar .service-menu {
	margin-top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .service-menu {
		margin-top: 46px;
	}
}

.service-menu-boton {
	display: inline-flex;
	align-items: baseline;
	padding: 0.02em 0 0.08em 0.28em;
	border: 0;
	background: none;
	color: var(--tinta);
	font-family: var(--serif);
	font-size: var(--texto-m);
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 1.15;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.service-menu-boton:focus-visible {
	outline: 1px solid var(--tinta);
	outline-offset: 2px;
}

.service-menu.is-abierto .filtro-signo {
	transform: rotate(45deg);
}

.service-menu-lista {
	/* Sobre la frase: con el fondo de la web, para que no se mezclen las letras. */
	margin: 0.4rem -0.6rem 0 0;
	padding: 0.4rem 0.6rem 0.5rem 1rem;
	background: var(--fondo);
	list-style: none;
	visibility: hidden;
	transition: visibility 0s 0.35s;
}

.service-menu.is-abierto .service-menu-lista {
	visibility: visible;
	transition: none;
}

.service-menu-lista li {
	opacity: 0;
	transform: translateY(-0.35em);
	transition: opacity 0.25s ease-out, transform 0.35s var(--curva);
}

.service-menu.is-abierto .service-menu-lista li {
	opacity: 1;
	transform: none;
	transition-delay: calc(var(--i, 0) * 0.05s);
}

.service-menu-lista a {
	display: inline-block;
	color: var(--tinta);
	font-family: var(--serif);
	font-size: var(--texto-m);
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: 1.45;
	text-decoration: none;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 55%;
	background-size: 0 0.95em;
	transition: background-size 0.45s var(--curva);
}

.service-menu-lista a:hover,
.service-menu-lista a:focus-visible,
.service-menu-lista a[aria-current="page"] {
	background-size: 100% 0.95em;
}

/* En móvil, como el menú de la web: pantalla amarilla con los enlaces grandes, centrados. */
@media (max-width: 767px) {
	.service-menu-boton {
		position: relative;
		z-index: 2;
	}

	/* Abierto, el botón (que pasa a cerrar) se queda a la vista aunque se haya bajado. */
	.service-menu.is-abierto {
		position: fixed;
	}

	.service-menu-lista {
		position: fixed;
		inset: 0;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		margin: 0;
		padding: var(--borde);
		background: var(--amarillo);
		text-align: center;
		opacity: 0;
		transition: opacity 0.4s var(--curva), visibility 0s 0.4s;
	}

	.service-menu.is-abierto .service-menu-lista {
		opacity: 1;
		transition: opacity 0.4s var(--curva);
	}

	.service-menu-lista li {
		transform: translateY(1rem);
	}

	.service-menu-lista a {
		font-size: clamp(2rem, 1.2rem + 5vw, 3rem);
		letter-spacing: -0.03em;
		background-image: none;
	}

	.service-menu-lista a[aria-current="page"] {
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.15em;
	}

	html:has(.service-menu.is-abierto) {
		overflow: hidden;
	}
}

/* Pestaña: el logo arriba a la izquierda (vuelve a la landing) y el título enorme, como la
   frase de la portada. */
.service-inicio {
	display: inline-block;
	font-size: var(--logo-alto);
	line-height: 0;
}

.service-titulo {
	margin: clamp(2rem, 1rem + 4vw, 5rem) 0 0;
	font-size: clamp(1.5rem, 0.4rem + 3.1vw, 4.4rem);
	font-weight: 500;
	letter-spacing: -0.055em;
	line-height: 1.02;
}

.service-texto {
	max-width: 46rem;
	min-height: 40svh;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
	font-size: var(--texto-m);
}

@media (prefers-reduced-motion: reduce) {
	.service-menu-lista li {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Service › Locations (28/10). Refs.: nafta.ee/locations y a-l-t-i-p-l-a.art (en blanco)
   -------------------------------------------------------------------------- */

main.contenido:has(.loc) {
	padding-top: 0;
}

/* El menú, transparente sobre el vídeo: en blanco, sin fondo, con una sombra suave para
   que se lea sobre cualquier plano. Al pasar el ratón, la franja amarilla y el texto negro. */
@media (min-width: 768px) {
	body:has(.loc-cabecera) .service-menu-boton,
	body:has(.loc-cabecera) .service-menu-lista a {
		color: #fff;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	}

	body:has(.loc-cabecera) .service-menu-lista {
		background: none;
	}

	body:has(.loc-cabecera) .service-menu-lista a:hover,
	body:has(.loc-cabecera) .service-menu-lista a:focus-visible,
	body:has(.loc-cabecera) .service-menu-lista a[aria-current="page"] {
		color: var(--tinta);
		text-shadow: none;
	}
}

@media (max-width: 767px) {
	body:has(.loc-cabecera) .service-menu:not(.is-abierto) .service-menu-boton {
		color: #fff;
		text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	}
}

/* 1. Cabecera: el vídeo a pantalla completa y, abajo a la izquierda, el recuadro del color
   del fondo con el título (como si la página asomara por encima del vídeo). */
.loc-cabecera {
	position: relative;
	height: 100svh;
	min-height: 32rem;
	overflow: hidden;
	background: var(--tinta);
}

.loc-fondo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Un poco de sombra arriba, para el logo y el menú. */
.loc-cabecera::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 30%;
	background: linear-gradient(rgba(0, 0, 0, 0.3), transparent);
	pointer-events: none;
}

.loc-logo {
	position: absolute;
	top: calc(var(--borde) * 2);
	left: var(--borde);
	z-index: 2;
}

.admin-bar .loc-logo {
	margin-top: 32px;
}

.loc-caja {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 2;
	width: min(60rem, 68%);
	padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem) var(--borde) 0;
	background: var(--fondo);
	animation: aparecer 0.45s ease-out 0.15s both;
}

/* Como la frase de la portada de service. */
.loc-titulo {
	margin: 0;
	font-size: clamp(1.9rem, 0.6rem + 3.9vw, 5.4rem);
	font-weight: 500;
	letter-spacing: -0.055em;
	line-height: 1.02;
}

/* 2. Sobre una rejilla de 4 columnas (29/10): la entradilla (primer párrafo, grande) y debajo
   los puntos clave, en filas de tres, en las tres primeras columnas; la cuarta queda vacía de
   momento. Cada punto: número, título en Playfair cursiva y descripción, con una línea fina
   encima. Si hubiera más párrafos, van en gris en la columna 1, entre la entradilla y los puntos. */
.loc-intro {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
	align-items: start;
	padding: clamp(3rem, 1.5rem + 4vw, 6rem) var(--borde) clamp(4rem, 2rem + 6vw, 8rem);
	counter-reset: loc;
}

.loc-intro > p {
	grid-column: 1;
	margin: 0;
	padding-top: 1rem;
	color: var(--tinta-suave);
	font-size: var(--texto-s);
	line-height: 1.5;
}

.loc-intro > p:first-of-type {
	grid-column: 1 / 4;
	margin-bottom: clamp(3rem, 1.5rem + 4vw, 5.5rem);
	padding-top: 0;
	color: var(--tinta);
	font-size: clamp(1.35rem, 0.75rem + 1.6vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.12;
}

.loc-intro > ul {
	display: grid;
	grid-column: 1 / 4;
	grid-template-columns: subgrid;
	row-gap: clamp(2rem, 1rem + 2vw, 3rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loc-intro > ul li {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(10, 10, 10, 0.15);
	counter-increment: loc;
	color: var(--tinta-suave);
	font-size: var(--texto-s);
	line-height: 1.45;
}

.loc-intro > ul li::before {
	content: counter(loc, decimal-leading-zero);
	margin-bottom: 0.6rem;
	font-size: var(--texto-xs);
	font-variant-numeric: tabular-nums;
}

.loc-intro > ul li strong {
	color: var(--tinta);
	font-family: var(--serif);
	font-size: clamp(1.2rem, 0.85rem + 0.9vw, 1.9rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

/* Tablet: la entradilla y el párrafo a todo el ancho y los puntos en dos columnas; móvil, en una. */
@media (max-width: 1024px) {
	.loc-intro {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.loc-intro > p,
	.loc-intro > p:first-of-type {
		grid-column: 1 / -1;
	}

	.loc-intro > ul {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.loc-caja {
		width: calc(100% - var(--borde));
	}

	.loc-intro {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 3. Galería (ref. Altipla, pero en blanco; 28/10): a la izquierda, una columna con el
   título y debajo los tipos (se queda pegada al bajar); a la derecha, la cuadrícula de fotos
   3:2. Con el ratón, la foto de encima crece un poco, las demás se aclaran y sale el rótulo
   de service (nombre / zona en franjas amarillas). */
.loc-galeria {
	padding: 0 var(--borde) clamp(3rem, 2rem + 4vw, 6rem);
}

.loc-galeria-titulo {
	margin: 0 0 clamp(1rem, 0.7rem + 1vw, 1.75rem);
	font-family: var(--serif);
	font-size: clamp(1.5rem, 1rem + 1.2vw, 2.4rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1;
}

.loc-tipo sup {
	margin-left: 0.2em;
	color: var(--tinta-suave);
	font-family: var(--sans);
	font-size: 0.5em;
	font-style: normal;
	font-weight: 500;
	letter-spacing: 0;
	vertical-align: super;
}

.loc-galeria-cuerpo {
	display: grid;
	grid-template-columns: clamp(9rem, 6rem + 6vw, 14rem) minmax(0, 1fr);
	gap: clamp(1rem, 0.5rem + 1.5vw, 2.5rem);
	align-items: start;
}

.loc-lateral {
	position: sticky;
	top: var(--borde);
	margin-top: -0.1em; /* el título, a la altura de las fotos */
}

.loc-filtro {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
}

.loc-tipo {
	padding: 0.02em 0.28em 0.08em;
	margin-left: -0.28em; /* el texto alineado con el título */
	border: 0;
	background: none;
	color: var(--tinta);
	font-family: var(--serif);
	font-size: var(--texto-m);
	font-style: italic;
	letter-spacing: -0.01em;
	line-height: 1.15;
	text-align: left;
	cursor: pointer;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 0.12em;
	transition: background-size 0.45s var(--curva), color 0.3s var(--curva);
	-webkit-tap-highlight-color: transparent;
}

.loc-tipo:hover {
	background-size: 100% 0.12em;
}

/* El marcado: la línea sube y llena la franja; los demás, en gris. */
.loc-tipo[aria-pressed="true"] {
	background-size: 100% 100%;
}

.loc-filtro:has([aria-pressed="true"]:not([data-tipo=""])) .loc-tipo[aria-pressed="false"] {
	color: var(--tinta-suave);
}

.loc-tipo:focus-visible {
	outline: 1px solid var(--tinta);
	outline-offset: 2px;
}

/* Siempre 4 columnas en el ordenador (28/10, David), 2 en tablet y móvil: con 16 fotos, la
   cuadrícula queda completa (conviene que el número de fotos sea múltiplo de 4). */
.loc-rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 1100px) {
	.loc-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* En móvil, los tipos en una línea que se desliza (como el filtro de Selected works) y las
   fotos debajo, en dos columnas. */
@media (max-width: 767px) {
	.loc-galeria-cuerpo {
		grid-template-columns: minmax(0, 1fr);
	}

	.loc-lateral {
		position: static;
	}

	.loc-filtro {
		flex-direction: row;
		gap: 0.9rem;
		margin: 0 calc(var(--borde) * -1);
		padding: 0 var(--borde) 0.3rem calc(var(--borde) + 0.28em);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.loc-filtro::-webkit-scrollbar {
		display: none;
	}

	.loc-tipo {
		flex: none;
	}

	.loc-rejilla {
		gap: 8px 6px;
	}
}

/* Aparecen una a una al llegar a la galería y al cambiar de filtro (lo pone el JS). */
.loc.is-lista .loc-sitio {
	opacity: 0;
}

.loc.is-lista .loc-sitio.is-visible {
	animation: aparecer 0.5s ease-out both;
	animation-delay: calc(var(--orden, 0) * 0.05s);
}

.loc-sitio[hidden] {
	display: none;
}

.loc-foto {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	overflow: hidden;
	background: #e4e4e0;
	cursor: url("../svg/cursor-isola.svg") 16 16, pointer;
}

.loc-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s var(--curva), transform 0.8s var(--curva);
}

@media (hover: hover) and (pointer: fine) {
	.loc-foto:hover img {
		transform: scale(1.04);
	}

	.loc-rejilla:has(.loc-foto:hover) .loc-foto:not(:hover) img {
		opacity: 0.45;
	}

	.loc-foto:hover .service-rotulo > * {
		animation: etiqueta-texto 0.3s var(--curva) forwards;
		animation-delay: calc(var(--i, 0) * 0.09s + 0.16s);
	}

	.loc-foto:hover .service-rotulo > *::before {
		animation: etiqueta-franja 0.35s var(--curva) forwards;
		animation-delay: calc(var(--i, 0) * 0.09s);
	}

	.loc-ficha {
		display: none;
	}
}

.loc-foto:focus-visible {
	outline: 1px solid var(--tinta);
	outline-offset: 2px;
}

/* En táctil, sin rótulo: nombre y zona debajo, como la ficha de Selected works. */
.loc-ficha {
	margin: 0.45rem 0 0.4rem;
	font-size: var(--texto-xs);
	line-height: 1.3;
	text-transform: uppercase;
}

.loc-ficha-zona {
	display: block;
	color: var(--tinta-suave);
}

@media (hover: none), (pointer: coarse) {
	.loc-foto .service-rotulo {
		display: none;
	}
}

/* Visor de fotos: a pantalla completa sobre el fondo claro, con flechas, contador y la X. */
.loc-visor {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: center;
	padding: clamp(3.5rem, 2rem + 4vw, 6rem) clamp(1rem, 0.5rem + 4vw, 6rem);
	background: var(--fondo);
	color: var(--tinta);
	opacity: 0;
	transition: opacity 0.35s var(--curva);
}

.loc-visor[hidden] {
	display: none;
}

.loc-visor.is-abierto {
	opacity: 1;
}

.loc-visor-foto {
	max-width: 100%;
	max-height: calc(100svh - 2 * clamp(3.5rem, 2rem + 4vw, 6rem));
	object-fit: contain;
	transition: opacity 0.25s ease-out;
}

.loc-visor-foto.is-cambiando {
	opacity: 0;
}

.loc-visor-pie {
	position: absolute;
	bottom: clamp(1rem, 0.6rem + 1.2vw, 2rem);
	left: 0;
	right: 0;
	margin: 0;
	font-size: var(--texto-s);
	text-align: center;
	text-transform: uppercase;
}

.loc-visor-zona {
	color: var(--tinta-suave);
	font-family: var(--serif);
	font-style: italic;
	text-transform: none;
}

.loc-visor-cuenta {
	margin-left: 1em;
	color: var(--tinta-suave);
	font-variant-numeric: tabular-nums;
}

.loc-visor-paso {
	position: absolute;
	top: 50%;
	width: clamp(2rem, 1.8rem + 1vw, 2.75rem);
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tinta);
	transform: translateY(-50%);
	cursor: pointer;
	transition: transform 0.4s var(--curva);
}

.loc-visor-antes:hover {
	transform: translate(-0.25rem, -50%);
}

.loc-visor-despues:hover {
	transform: translate(0.25rem, -50%);
}

.loc-visor-antes {
	left: clamp(0.5rem, 0.2rem + 1.2vw, 2rem);
}

.loc-visor-despues {
	right: clamp(0.5rem, 0.2rem + 1.2vw, 2rem);
}

.loc-visor-paso svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
}

/* La X, en negro: la amarilla no se ve sobre el fondo claro. */
.loc-visor-cerrar {
	position: absolute;
	top: clamp(0.75rem, 0.5rem + 1vw, 1.75rem);
	right: clamp(0.75rem, 0.5rem + 1vw, 1.75rem);
	border: 0;
	color: var(--tinta);
	cursor: pointer;
}

.loc-visor-cerrar:hover svg {
	transform: rotate(90deg);
}

@media (max-width: 767px) {
	.loc-visor-paso {
		display: none; /* en el móvil se pasa deslizando */
	}
}

@media (prefers-reduced-motion: reduce) {
	.loc-caja,
	.loc.is-lista .loc-sitio {
		animation: none;
		opacity: 1;
	}

	.loc-foto img,
	.loc-visor,
	.loc-visor-foto {
		transition: none;
	}
}