/* ==========================================================================
   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);
}

/* 404 de service.isola.tv (09/11): el logo arriba a la izquierda, como en las pestañas de
   service, fuera del flujo (así el 404 se centra igual que en la web pública). */
.error-404-service {
	position: absolute;
	top: calc(var(--borde) * 2);
	left: 0;
	z-index: 2;
}

.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;
}

/* 05/11 (service con menú): las dos líneas ya no son enlaces (todo va en una parrilla):
   la misma letra que tenían, sin franja. */
.service-destacado {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.035em;
	letter-spacing: -0.035em;
}

/* 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;
	visibility: hidden; /* oculto, tampoco se llega con el tabulador (02/11) */
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.35s var(--curva), transform 0.35s var(--curva), visibility 0s 0.35s;
}

.service-arriba.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
}

/* Al pulsar, se hunde un poco: confirma el toque (02/11). */
.service-arriba.is-visible:active {
	transform: scale(0.94);
	transition-duration: 0.1s;
}

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

@media (hover: hover) and (pointer: fine) {
	.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);
}

/* En táctil, la zona que se puede tocar crece por arriba y por abajo (≈ 44 px), sin mover
   nada (02/11): las palabras miden unos 18 px de alto. */
@media (pointer: coarse) {
	.service-vista {
		position: relative;
	}

	.service-vista::after {
		content: "";
		position: absolute;
		inset: -0.8rem -0.4rem;
	}
}

/* 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;
	/* La posición (transform) la pone el JS, que la sigue con un poco de inercia. */
	transition: opacity 0.2s var(--curva);
	will-change: transform;
}

.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. Al pulsarla, se
   encoge un poco (02/11). */
@media (hover: hover) and (pointer: fine) {
	.page-template-page-service .visor-x:hover svg {
		transform: rotate(90deg);
	}
}

.page-template-page-service .visor-x {
	transition: opacity 0.4s var(--curva) 0.4s, transform 0.12s ease-out; /* el fundido, el de .visor-cerrar */
}

.page-template-page-service .visor-x:active {
	transform: scale(0.9);
}

@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; }
}

/* --------------------------------------------------------------------------
   Intro del logo (09/11; ver functions.php e iniciarIntro en main.js). Capa a pantalla
   completa del color del fondo; en el centro, la franja amarilla se dibuja de izquierda a
   derecha y las letras aparecen una a una (i, S, O, L, A y la ®). Luego el JS lleva el logo a
   su sitio. Mientras, las animaciones de entrada de la página esperan (en pausa).
   -------------------------------------------------------------------------- */
.intro {
	display: none;
}

html.con-intro .intro {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--fondo);
	/* Por si el JS no llegara: a los 5 s, la capa se va sola. */
	animation: intro-salida 0.4s ease-out 5s forwards;
}

.intro-logo {
	display: inline-block;
	padding: 0.07em 0.12em; /* el mismo recuadro que .service-logo */
	font-size: clamp(3.5rem, 2rem + 12vw, 13rem);
	line-height: 0;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-size: 0 100%;
	transform-origin: 0 0;
	overflow: hidden; /* la franja hace de máscara: las letras suben desde debajo de ella */
	animation: intro-franja 0.6s cubic-bezier(0.76, 0, 0.24, 1) 0.2s forwards;
}

.intro-logo svg {
	display: block;
	width: auto;
	height: 0.72em;
	overflow: visible;
}

/* Las letras: en el dibujo van S, O, L, A, ® e i; salen en el orden de lectura. No se funden:
   suben desde fuera de la franja, que las recorta como una máscara (09/11, David). El 115 % es
   del alto del dibujo entero (transform-box: view-box): así todas, también la ®, empiezan por
   debajo del borde de la franja. */
.intro-logo path {
	transform-box: view-box;
	/* Más despacio y con más ease (09/11, David; antes 0,4 s, 0,09 s entre letras y una curva
	   que salía de golpe): arranca suave y se asienta con cola larga. */
	animation: intro-letra 0.85s cubic-bezier(0.45, 0, 0.15, 1) both; /* «both»: escondidas mientras esperan su turno */
	animation-delay: calc(0.62s + var(--l, 0) * 0.14s);
}

.intro-logo path:nth-child(6) { --l: 0; } /* i */
.intro-logo path:nth-child(1) { --l: 1; } /* S */
.intro-logo path:nth-child(2) { --l: 2; } /* O */
.intro-logo path:nth-child(3) { --l: 3; } /* L */
.intro-logo path:nth-child(4) { --l: 4; } /* A */
.intro-logo path:nth-child(5) { --l: 5.5; } /* ® */

@keyframes intro-franja {
	to { background-size: 100% 100%; }
}

@keyframes intro-letra {
	from { transform: translateY(115%); }
	to { transform: none; }
}

@keyframes intro-salida {
	to { opacity: 0; visibility: hidden; }
}

/* Mientras dura, las animaciones de entrada de la página esperan y el logo de la página no se
   ve (el de la intro aterriza encima de él). */
/* («intro-suelta»: en service, la página arranca cuando el logo aún se está asentando.) */
html.con-intro:not(.intro-suelta) .cabecera,
html.con-intro:not(.intro-suelta) .cabecera *,
html.con-intro:not(.intro-suelta) .contenido,
html.con-intro:not(.intro-suelta) .contenido * {
	animation-play-state: paused !important;
}

html.con-intro .cabecera-logo,
html.con-intro .service-frase .service-logo {
	visibility: hidden;
}

/* Al aterrizar, el logo de la página ya está en su sitio, quieto (sin su animación de
   entrada): así el de la intro se puede medir y sustituir sin salto. */
html.intro-aterriza .cabecera-logo,
html.intro-aterriza .service-frase .service-logo {
	opacity: 1;
	animation: none !important;
}

html.intro-aterriza .service-frase .service-logo {
	top: 0; /* la palabra de la frase, ya en su línea */
}

.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;
	text-wrap: balance;
}

/* Al seleccionar texto en service, el amarillo de la marca en vez del azul del sistema (02/11). */
body:has(.service, .loc, .prod, .contacto-service) ::selection {
	background: var(--amarillo);
	color: var(--tinta);
}

.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, .prod) {
	padding-top: 0;
}

/* 1. Cabecera sobre blanco (05/11; antes, el vídeo a pantalla completa, que no encajaba con la
   web; la D, elegida por David entre varias): el logo arriba a la izquierda, como en la
   landing, y el título enorme, con fotos al pasar el ratón por sus palabras clave. */
.loc-portada {
	padding: calc(var(--borde) * 2) var(--borde) 0;
}

.admin-bar .loc-portada {
	padding-top: calc(var(--borde) * 2 + 32px);
}

.loc-titulo {
	max-width: 90%;
	margin: clamp(2rem, 1rem + 4vw, 5rem) 0 0;
	font-size: clamp(1.9rem, 0.6rem + 3.9vw, 5.4rem);
	font-weight: 500;
	letter-spacing: -0.055em;
	line-height: 1.02;
	text-wrap: balance;
	animation: aparecer 0.45s ease-out 0.1s both;
}

/* Cada trozo del título («Every Era.»), sin partir (salvo en el móvil). */
@media (min-width: 768px) {
	.loc-trozo {
		white-space: nowrap;
	}
}

/* Ventanita con fotos que se funden una en otra, a la altura de las mayúsculas y apoyada en
   la línea de base (como el logo en la frase de la landing). */
.loc-ventanita {
	position: relative;
	display: inline-block;
	width: 1.5em;
	height: 0.74em;
	margin: 0 0.06em;
	vertical-align: -0.02em;
	overflow: hidden;
	background: #e4e4e0;
}

.loc-ventanita img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.loc-ventanita img.is-activo {
	opacity: 1;
}

/* El título en dos líneas, una por frase. «Landscape» y «Era» en Playfair cursiva; al pasar
   el ratón, la franja amarilla detrás (como los enlaces de la landing). */
.loc-portada .loc-trozo {
	display: block;
}

/* La palabra y su ventanita (en táctil), siempre juntas. */
.loc-clave {
	white-space: nowrap;
}

.loc-clave .loc-ventanita {
	margin-left: 0.18em; /* la cursiva se echa encima */
}

.loc-palabra {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	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;
	transition: background-size 0.45s var(--curva);
}

.loc-palabra.is-activa {
	background-size: 100% 0.95em;
}

/* Con ratón: al pasar por una palabra, el puntero se convierte en una foto grande que va
   cambiando; nace del cursor y lo sigue (con algo de inercia, desde el JS). */
.loc-cursor-foto {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 30;
	width: clamp(16rem, 9rem + 16vw, 28rem);
	aspect-ratio: 3 / 2;
	overflow: hidden;
	pointer-events: none;
	opacity: 0;
	transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) scale(0.3);
	transition: opacity 0.2s ease, transform 0.35s var(--curva);
}

.loc-cursor-foto.is-visible {
	opacity: 1;
	transform: translate(var(--x, 0), var(--y, 0)) translate(-50%, -50%) scale(1);
}

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

/* La de la entradilla (05/11): más grande y por detrás del texto (de todo el texto: si asoma
   por debajo del párrafo, tampoco tapa «Spain at a glance»). */
.loc-cursor-fondo {
	z-index: -1;
	width: clamp(22rem, 12rem + 26vw, 44rem);
}

/* Para que el texto se lea encima, cambia el texto y no la foto (05/11; probados antes un velo
   sobre la foto, el texto en «diferencia» como el menú, que se leía peor, y franjas del color
   del fondo): detrás de cada línea se dibuja una franja amarilla, de izquierda a derecha, una
   línea tras otra y deprisa, con solape (cada una empieza antes de que acabe la anterior). Al
   salir, se recogen todas a la vez. Las líneas (un span cada una) las parte el JS. */
.loc-entradilla-linea {
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-size: 0 100%;
	transition: background-size 0.2s var(--curva);
}

.loc-entradilla.is-activa .loc-entradilla-linea {
	background-size: 100% 100%;
	/* 05/11: más solape entre líneas y más ease (antes, 0,32 s y 0,07 s entre líneas). */
	transition: background-size 0.55s cubic-bezier(0.76, 0, 0.24, 1) calc(var(--l, 0) * 0.045s);
}

.loc-entradilla {
	position: relative;
	z-index: 1;
}

@media (hover: hover) and (pointer: fine) {
	/* 09/11: solo en la entradilla (el titular ya no lleva foto en el puntero). */
	.loc-entradilla {
		cursor: none;
	}

	/* Con ratón, sin ventanitas: las fotos salen en el puntero. */
	.loc-portada .loc-ventanita {
		display: none;
	}
}

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

@media (max-width: 767px) {
	.loc-titulo {
		max-width: none;
	}
}

/* Párrafos sin una palabra sola en la última línea (02/11). */
.loc-intro p,
.loc-bloque-cuerpo > ul li span,
.loc-hubs-texto {
	text-wrap: pretty;
}

/* 2. Sobre una rejilla de 4 columnas (29/10): la entradilla (primer párrafo, grande) en las tres
   primeras columnas y debajo los bloques (02/11). 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. */
.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);
}

.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; /* tres columnas (02/11, variante A; antes, dos) */
	grid-row: 1;
	margin-bottom: 0;
	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;
}

/* Bloques (02/11): el título encima, en Playfair cursiva, y a todo el ancho. «Spain at a glance»
   va debajo de la entradilla, con sus tres puntos en fila, en tres columnas como las de las
   ciudades (variante A, elegida por David el 02/11; antes, al lado de la entradilla, en las
   columnas 3 y 4, quedaba como una nota lateral, ligera y más corta que el párrafo). */
.loc-bloque {
	grid-column: 1 / -1;
}

.loc-bloque:not(.loc-bloque-hubs) {
	margin-top: clamp(3rem, 2rem + 3vw, 5.5rem);
}

.loc-bloque:not(.loc-bloque-hubs) .loc-bloque-cuerpo > ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem); /* el de .loc-intro */
}

.loc-bloque-hubs {
	margin-top: clamp(4rem, 2.5rem + 4.5vw, 8rem);
}

.loc-intro .loc-bloque h3 {
	margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2.25rem);
	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-bloque-cuerpo > ul {
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.loc-bloque-cuerpo > ul li {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.loc-bloque-cuerpo > ul li strong {
	font-size: clamp(1.15rem, 0.8rem + 0.9vw, 1.8rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.loc-bloque-cuerpo > ul li span {
	color: var(--tinta); /* en negro, como los textos de las ciudades (02/11; antes, gris) */
	font-size: clamp(1rem, 0.85rem + 0.35vw, 1.25rem);
	letter-spacing: -0.01em;
	line-height: 1.35;
}

/* Las ciudades (02/11): pestañas. Los nombres en una línea, en Playfair cursiva (la elegida, con
   la franja amarilla, que se dibuja de izquierda a derecha como en el resto de la web; las
   demás en gris; con ratón se eligen al pasar por encima) y debajo sus datos, en una frase.
   Sin líneas: solo el pie lleva una. */
.loc-hubs {
	grid-column: 1 / -1;
}

.loc-hubs-pestanas {
	display: flex;
	flex-wrap: wrap;
	gap: 0.1em 0.5em;
	margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem) -0.12em; /* el texto, alineado con el título */
	/* 05/11: menos peso que «Spain at a glance» (antes, hasta 3rem): como su título. */
	font-size: clamp(1.35rem, 1rem + 1vw, 2.1rem);
}

.loc-hubs-pestana {
	padding: 0 0.12em;
	border: 0;
	background: none;
	color: var(--tinta-suave);
	font-family: var(--serif);
	font-size: inherit;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1.15;
	cursor: pointer;
	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), color 0.3s var(--curva);
	-webkit-tap-highlight-color: transparent;
}

.loc-hubs-pestana:hover {
	color: var(--tinta);
}

.loc-hubs-pestana[aria-selected="true"] {
	color: var(--tinta);
	background-size: 100% 0.95em;
}

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

/* Los datos de la ciudad elegida, en tres bloques, uno por columna (05/11, petición del cliente;
   antes, una sola frase con las etiquetas dentro, y antes del 02/11 tres columnas con etiquetas
   pequeñas en mayúsculas): la etiqueta en Playfair cursiva y debajo su texto en Inter normal,
   con menos peso que «Spain at a glance». Las tres ciudades, una encima de otra en la misma
   celda: el hueco mide lo que la más larga y no salta al cambiar. */
.loc-hubs-frases {
	display: grid;
}

.loc-hubs-texto {
	grid-area: 1 / 1;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem); /* el de .loc-intro */
	visibility: hidden;
}

.loc-hubs-texto.is-activo,
.loc-hubs-texto.is-saliendo {
	visibility: visible;
}

.loc-hubs-texto.is-saliendo {
	pointer-events: none;
}

.loc-hubs-dato p {
	margin: 0;
	font-size: clamp(1rem, 0.85rem + 0.35vw, 1.25rem); /* la de las descripciones de «Spain at a glance» */
	letter-spacing: -0.01em;
	line-height: 1.35;
	text-wrap: pretty;
}

.loc-intro .loc-hubs-dato .loc-hubs-etiqueta {
	margin-bottom: 0.4rem;
	font-family: var(--serif);
	font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.55rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

/* Con fotos (02/11): la frase en las columnas 1 a 3 y, en la 4.ª, la foto de la ciudad elegida,
   pequeña (3:2, esquinas rectas), arriba a la altura de la frase. Las tres fotos, una encima de
   otra: al cambiar de ciudad, la nueva aparece con un fundido y se asienta (del 103 % al 100 %). */
.loc-hubs-con-fotos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem); /* el de .loc-intro */
	align-items: start;
}

.loc-hubs-con-fotos .loc-hubs-pestanas {
	grid-column: 1 / -1;
}

.loc-hubs-con-fotos .loc-hubs-frases {
	grid-column: 1 / 4;
}

.loc-hubs-fotos {
	display: grid;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	margin-top: 0.35rem; /* la parte de arriba de la foto, a la altura de las mayúsculas de la frase */
	background: #e4e4e0;
}

.loc-hubs-foto {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	visibility: hidden;
}

.loc-hubs-foto.is-activo,
.loc-hubs-foto.is-saliendo {
	visibility: visible;
}

.loc-hubs-foto.is-activo {
	z-index: 1; /* la que entra, encima de la que sale */
}

/* Animación al cambiar de ciudad: cascada (05/11, elegida por David entre cuatro, más lenta y
   con más ease que la primera prueba). Lo que se va se desvanece; los tres bloques nuevos
   aparecen uno detrás de otro subiendo, con una curva que frena mucho al final, y la foto
   cambia con un fundido. La primera ciudad, al cargar, sale quieta (solo animan los cambios). */
.loc-hubs .is-saliendo .loc-hubs-dato,
.loc-hubs .loc-hubs-foto.is-saliendo {
	animation: hub-fuera 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.loc-hubs.is-cambiada .is-activo .loc-hubs-dato {
	animation: hub-sube 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(0.2s + var(--i, 0) * 0.13s) both;
}

.loc-hubs.is-cambiada .loc-hubs-foto.is-activo {
	animation: hub-dentro 0.8s cubic-bezier(0.45, 0, 0.55, 1) 0.15s both;
}

@keyframes hub-fuera {
	to { opacity: 0; transform: translateY(1.1rem); } /* sale bajando (09/11) */
}

@keyframes hub-dentro {
	from { opacity: 0; }
}

@keyframes hub-sube {
	from { opacity: 0; transform: translateY(1.1rem); }
}

@media (prefers-reduced-motion: reduce) {
	.loc-hubs .loc-hubs-dato,
	.loc-hubs .loc-hubs-foto {
		animation: none !important;
	}

	.loc-hubs .is-saliendo {
		visibility: hidden;
	}
}

/* En móvil, la foto encima de la frase, a dos tercios del ancho. */
@media (max-width: 767px) {
	.loc-hubs-con-fotos {
		grid-template-columns: minmax(0, 1fr);
	}

	.loc-hubs-con-fotos .loc-hubs-frases {
		grid-column: 1;
	}

	.loc-hubs-fotos {
		grid-row: 2;
		width: 70%;
		margin: 0 0 1.25rem;
	}

	.loc-hubs-texto {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;
	}
}


/* Tablet: la entradilla a todo el ancho; los puntos de «Spain at a glance» siguen en tres
   columnas. Móvil, todo en una. */
@media (max-width: 1024px) {
	.loc-intro > p,
	.loc-intro > p:first-of-type {
		grid-column: 1 / -1;
	}
}

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

	.loc-bloque-cuerpo > ul,
	.loc-bloque:not(.loc-bloque-hubs) .loc-bloque-cuerpo > ul {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}
}

/* 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;
		/* Aire arriba y abajo, compensado con el margen, para que la línea que se desliza no
		   recorte la zona de toque de cada tipo. */
		margin: -0.6rem calc(var(--borde) * -1) -0.3rem;
		padding: 0.6rem var(--borde) 0.6rem calc(var(--borde) + 0.28em);
		overflow-x: auto;
		scrollbar-width: none;
	}

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

	/* Zona que se puede tocar más alta que la palabra (02/11). */
	.loc-tipo {
		position: relative;
		flex: none;
	}

	.loc-tipo::after {
		content: "";
		position: absolute;
		inset: -0.6rem -0.3rem;
	}

	.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;
	transition: transform 0.16s ease-out;
}

/* Al pulsar, la foto se hunde apenas: el visor se abre como respuesta al gesto (02/11). */
.loc-foto:active {
	transform: scale(0.985);
}

.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;
	/* Se cierra más deprisa de lo que se abre (02/11): al cerrar, el visitante ya ha decidido. */
	transition: opacity 0.2s ease-out;
}

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

.loc-visor.is-abierto {
	opacity: 1;
	transition: opacity 0.35s var(--curva);
}

/* Al abrir, la foto crece apenas (del 97 %) mientras aparece. Al pasar a otra, la que se va
   sale hacia el lado contrario a la flecha y la nueva entra desde el lado de la flecha, con un
   ligero desenfoque que funde las dos (--dir: 1 la siguiente, -1 la anterior; lo pone el JS). */
.loc-visor-foto {
	max-width: 100%;
	max-height: calc(100svh - 2 * clamp(3.5rem, 2rem + 4vw, 6rem));
	object-fit: contain;
	transform: scale(0.97);
	transition: opacity 0.3s var(--curva), transform 0.45s var(--curva), filter 0.3s var(--curva);
}

.loc-visor.is-abierto .loc-visor-foto {
	transform: none;
}

.loc-visor.is-abierto .loc-visor-foto.is-cambiando {
	opacity: 0;
	filter: blur(2px);
	transform: translateX(calc(var(--dir, 0) * -2%));
	transition: opacity 0.14s ease-out, transform 0.14s ease-out, filter 0.14s ease-out;
}

.loc-visor.is-abierto .loc-visor-foto.is-entrando {
	opacity: 0;
	filter: blur(2px);
	transform: translateX(calc(var(--dir, 0) * 2%));
	transition: none;
}

.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);
}

@media (hover: hover) and (pointer: fine) {
	.loc-visor-antes:hover {
		transform: translate(-0.25rem, -50%);
	}

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

/* Al pulsar una flecha o la X, se encogen un poco: confirma el clic (02/11). */
.loc-visor-paso svg,
.loc-visor-cerrar {
	transition: transform 0.12s ease-out;
}

.loc-visor-paso:active svg,
.loc-visor-cerrar:active {
	transform: scale(0.9);
}

.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;
}

@media (hover: hover) and (pointer: fine) {
	.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-titulo,
	.loc.is-lista .loc-sitio {
		animation: none;
		opacity: 1;
	}

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

	/* Con «reducir movimiento», la foto cambia sin desplazarse. */
	.loc-visor .loc-visor-foto,
	.loc-visor.is-abierto .loc-visor-foto.is-cambiando,
	.loc-visor.is-abierto .loc-visor-foto.is-entrando {
		transform: none;
		filter: none;
	}
}

/* --------------------------------------------------------------------------
   Service › Production services (09/11). Mismo sistema que Locations: rejilla de 4 columnas,
   títulos en Playfair cursiva, la franja amarilla al pasar el ratón y sin líneas divisorias.
   -------------------------------------------------------------------------- */
.prod {
	--hueco: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem); /* el de .loc-intro */
	--fondo-tarjeta: #ebebe6;
}

.prod-titulo em {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.035em;
}

.prod-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.prod-cuerpo {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--hueco);
	padding: clamp(3rem, 1.5rem + 4vw, 6rem) var(--borde) clamp(4rem, 2rem + 6vw, 8rem);
}

.prod-cuerpo > * {
	grid-column: 1 / -1;
}

.prod-cuerpo p {
	margin: 0;
	text-wrap: pretty;
}

/* Entradilla: como la de Locations, en las tres primeras columnas. */
.prod-cuerpo > .prod-entradilla {
	grid-column: 1 / 4;
	font-size: clamp(1.35rem, 0.75rem + 1.6vw, 2.6rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.12;
	animation: aparecer 0.45s ease-out 0.25s both;
}

/* Títulos de bloque: como «Spain at a glance». */
.prod-bloque-titulo {
	margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 3rem);
	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;
}

/* Animación al llegar con el scroll (el JS pone .is-visible al bloque): cada elemento sube y
   aparece, uno detrás de otro (--i). Sin JS o con «reducir movimiento», todo quieto. */
.prod.is-lista .prod-tarjeta,
.prod.is-lista .prod-servicio,
.prod.is-lista .prod-persona,
.prod.is-lista .prod-contacto-titulo,
.prod.is-lista .prod-contacto-sub {
	opacity: 0;
}

.prod.is-lista .is-visible .prod-tarjeta,
.prod.is-lista .prod-servicio.is-visible,
.prod.is-lista .is-visible .prod-persona,
.prod.is-lista .is-visible .prod-contacto-titulo,
.prod.is-lista .is-visible .prod-contacto-sub {
	animation: prod-sube 0.95s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 0.08s) both;
}

@keyframes prod-sube {
	from { opacity: 0; transform: translateY(1.1rem); }
	to { opacity: 1; transform: none; }
}

.prod.is-lista .is-visible .prod-contacto-sub {
	animation-delay: 0.1s;
}

.prod.is-lista .prod-servicio.is-visible {
	animation-delay: 0s;
}

.prod.is-lista .is-visible .prod-persona {
	animation-delay: calc(0.2s + var(--i, 0) * 0.1s);
}

/* El logo de la entradilla, sin el recuadro amarillo (09/11, petición de David). */
.prod-logo-texto {
	padding: 0;
	background: none;
	/* Alineado con el texto (09/11, David): sin el recuadro, el -0,07em de .service-logo lo
	   hundía 2,8 px bajo la línea. Las letras rectas del logo (L, A) acaban a 240,4 de 243,8
	   (la S y la O bajan un poco más, como en cualquier letra): se baja solo esa diferencia. */
	vertical-align: -0.0105em;
}

/* Las letras rectas del logo, del alto de las mayúsculas de Inter (0,727em; medido): con 0,72em
   para todo el dibujo, quedaban en 0,70em. */
.prod-logo-texto svg {
	height: 0.748em;
}

/* 1. Datos rápidos: cinco tarjetas en fila, con la cifra enorme en Playfair cursiva arriba y
   el texto abajo. Al pasar el ratón, el amarillo las llena de izquierda a derecha (la franja). */
.prod-datos {
	margin-top: clamp(3rem, 2rem + 3vw, 5.5rem);
}

.prod-tarjetas {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.prod-tarjeta {
	display: flex;
	flex-direction: column;
	min-height: clamp(16rem, 12rem + 8vw, 23rem);
	padding: clamp(1rem, 0.7rem + 0.8vw, 1.6rem);
	background-color: var(--fondo-tarjeta);
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-size: 0 100%;
	transition: background-size 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

@media (hover: hover) and (pointer: fine) {
	.prod-tarjeta:hover {
		background-size: 100% 100%;
	}
}

.prod-cuerpo .prod-cifra {
	margin-bottom: auto;
	padding-bottom: 1.5rem;
	font-family: var(--serif);
	font-size: clamp(2.6rem, 1.6rem + 2.6vw, 5.2rem);
	font-style: italic;
	letter-spacing: -0.04em;
	line-height: 0.95;
}

.prod-cuerpo .prod-tarjeta-titulo {
	margin-bottom: 0.5rem;
	font-size: clamp(1rem, 0.9rem + 0.3vw, 1.25rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

.prod-grado {
	font-family: var(--sans);
	font-style: normal;
	font-weight: 300;
	font-size: 0.8em;
}

.prod-tarjeta-texto {
	font-size: clamp(0.875rem, 0.82rem + 0.18vw, 1rem);
	line-height: 1.4;
}

/* 2. Servicios (09/11, v2: David vio la v1 «muy dispersa»; antes, una fila por servicio a todo
   el ancho con el título enorme). Compacto y para leer: el título de la sección a la izquierda
   (columna 1, como «Location library») y los ocho servicios en dos columnas a la derecha. Cada
   uno: número pequeño, título en Playfair cursiva (franja amarilla al pasar el ratón) y la
   descripción justo debajo, con un ancho de línea cómodo. */
.prod-servicios {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--hueco);
	align-items: start;
	margin-top: clamp(5rem, 3rem + 6vw, 10rem);
}

.prod-servicios .prod-bloque-titulo {
	grid-column: 1;
	position: sticky;
	top: calc(var(--borde) * 2);
}

.prod-indice {
	grid-column: 2 / 5;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(2rem, 1.5rem + 1.5vw, 3rem) var(--hueco);
	margin: 0;
	padding: 0;
	list-style: none;
}

.prod-servicio {
	position: relative;
	max-width: 34rem;
	padding-left: 2rem; /* sitio para el número */
}

.prod-numero {
	position: absolute;
	top: 0.55em;
	left: 0;
	font-size: var(--texto-xs);
	font-variant-numeric: tabular-nums;
	color: var(--tinta-suave);
}

.prod-servicio-titulo {
	margin: 0 0 0.5rem;
	font-family: var(--serif);
	font-size: clamp(1.3rem, 1.05rem + 0.6vw, 1.75rem);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}

.prod-servicio-titulo span {
	padding: 0 0.08em;
	margin-left: -0.08em;
	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);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

@media (hover: hover) and (pointer: fine) {
	.prod-servicio:hover .prod-servicio-titulo span {
		background-size: 100% 0.95em;
	}
}

.prod-servicio-texto {
	font-size: clamp(0.95rem, 0.88rem + 0.2vw, 1.075rem);
	line-height: 1.5;
	letter-spacing: -0.005em;
}

/* Tablet: el título de la sección encima y los servicios en dos columnas a todo el ancho. */
@media (max-width: 1024px) {
	.prod-servicios .prod-bloque-titulo {
		grid-column: 1 / -1;
		position: static;
	}

	.prod-indice {
		grid-column: 1 / -1;
	}
}

/* 3. Frase de cierre sobre fotos que pasan (09/11, ref. nafta.ee/production-services, pero más
   baja): a sangre, una tira de fotogramas de las piezas de service, de varios tamaños, alturas y
   proporciones, que se solapan y se deslizan solos de derecha a izquierda (la tira va repetida dos
   veces: al llegar a la mitad vuelve al principio sin que se note). Encima, la frase centrada con
   una franja amarilla detrás de cada línea para que se lea; las franjas se dibujan al llegar. */
.prod-cierre-bloque {
	--escala: clamp(0.7rem, 0.4rem + 0.9vw, 1.5rem); /* 1 «unidad» de ancho de las fotos */
	position: relative;
	display: grid;
	place-items: center;
	height: clamp(24rem, 14rem + 24vw, 40rem);
	margin: clamp(5rem, 3rem + 6vw, 10rem) calc(-1 * var(--borde)) 0;
	overflow: hidden;
}

.prod-collage,
.prod-collage-capa {
	position: absolute;
	inset: 0;
}

.prod-collage-pista {
	display: flex;
	width: max-content;
	height: 100%;
	animation: prod-collage var(--duracion, 70s) linear infinite;
}

.prod-collage.is-parada .prod-collage-pista {
	animation-play-state: paused;
}

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

/* Profundidad (09/11): solo por tamaño y velocidad (sin desenfoque ni desvaído, David). */
.prod-collage-cerca {
	z-index: 1;
}

.prod-collage-foto {
	position: relative;
	top: calc(var(--alto) * 0.75);
	flex: none;
	width: calc(var(--ancho) * var(--escala) * var(--factor, 1));
	aspect-ratio: var(--forma);
	margin-right: calc(var(--sep) * var(--escala) * var(--factor, 1));
	align-self: flex-start;
	background: var(--fondo-tarjeta);
}

.prod-collage-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prod-cuerpo .prod-cierre {
	position: relative;
	z-index: 2;
	max-width: min(92%, 16.5em);
	font-size: clamp(1.5rem, 0.6rem + 2.6vw, 3.6rem);
	font-weight: 500;
	letter-spacing: -0.05em;
	line-height: 1.08;
	text-align: center;
	text-wrap: balance;
}

.prod-cierre > span {
	padding: 0 0.12em;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-size: 100% 100%;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.prod.is-lista .prod-cierre > span {
	background-size: 0 100%;
}

.prod.is-lista .is-visible .prod-cierre > span {
	background-size: 100% 100%;
	transition: background-size 0.75s cubic-bezier(0.76, 0, 0.24, 1) 0.15s;
}

.prod-cierre em {
	font-family: var(--serif);
	font-size: 1.035em;
	font-weight: 400;
	letter-spacing: -0.035em;
}

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

/* 4. Contacto: la pregunta, el subtítulo en gris y una columna por persona (el idioma en
   Playfair cursiva, el nombre enorme con la franja y una flecha, y el correo y el teléfono). */
.prod-contacto {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--hueco);
	margin-top: clamp(5rem, 3rem + 6vw, 10rem);
}

.prod-contacto-titulo {
	grid-column: 1 / 4;
	margin: 0;
	font-size: clamp(1.35rem, 0.75rem + 1.6vw, 2.6rem); /* como la entradilla */
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.12;
	text-wrap: balance;
}

.prod-contacto-sub {
	grid-column: 1 / 4;
	margin-top: 0.6rem !important;
	color: var(--tinta-suave);
	font-size: clamp(1rem, 0.85rem + 0.35vw, 1.25rem);
}

.prod-personas {
	display: contents;
	list-style: none;
}

.prod-persona {
	grid-column: span 2;
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.prod-idioma {
	margin-bottom: 0.4rem !important;
	font-family: var(--serif);
	font-size: clamp(1.1rem, 0.9rem + 0.5vw, 1.5rem);
	font-style: italic;
	color: var(--tinta-suave);
}

.prod-persona-enlace {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
	color: var(--tinta);
	text-decoration: none;
	font-size: clamp(2.2rem, 1rem + 3.6vw, 5.4rem);
	font-weight: 500;
	letter-spacing: -0.055em;
	line-height: 1.02;
}

.prod-persona-enlace span {
	padding: 0 0.06em;
	margin-left: -0.06em;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 70%;
	background-size: 0 0.8em;
	transition: background-size 0.45s var(--curva);
}

.prod-persona-enlace svg {
	width: 0.55em;
	height: 0.55em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	transition: transform 0.45s var(--curva);
}

.prod-persona-enlace:hover span,
.prod-persona-enlace:focus-visible span {
	background-size: 100% 0.8em;
}

.prod-persona-enlace:hover svg {
	transform: translate(0.08em, -0.08em);
}

.prod-persona-enlace:focus-visible {
	outline: 2px solid var(--tinta);
	outline-offset: 4px;
}

.prod-persona-datos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 1.25rem;
	margin-top: 0.9rem !important;
	font-size: var(--texto-m);
}

.prod-persona-datos a {
	color: var(--tinta);
	text-decoration: none;
	background-image: linear-gradient(var(--amarillo), var(--amarillo));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 2px;
	transition: background-size 0.35s var(--curva);
}

.prod-persona-datos a:hover {
	background-size: 100% 2px;
}

/* Tablet: tarjetas en tres columnas (3 + 2) y entradilla a todo el ancho. */
@media (max-width: 1100px) {
	.prod-tarjetas {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.prod-tarjeta {
		grid-column: span 2;
	}

	.prod-tarjeta:nth-child(4),
	.prod-tarjeta:nth-child(5) {
		grid-column: span 3;
	}
}

@media (max-width: 1024px) {
	.prod-cuerpo > .prod-entradilla,
	.prod-contacto-titulo,
	.prod-contacto-sub {
		grid-column: 1 / -1;
	}
}

/* Móvil: tarjetas en dos columnas (la última, a todo el ancho) y servicios en una. */
@media (max-width: 767px) {
	.prod-cuerpo,
	.prod-contacto,
	.prod-servicios,
	.prod-indice {
		grid-template-columns: minmax(0, 1fr);
	}

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

	.prod-tarjeta,
	.prod-tarjeta:nth-child(4) {
		grid-column: span 1;
		min-height: 14rem;
	}

	.prod-tarjeta:nth-child(5) {
		grid-column: 1 / -1;
		min-height: 0;
	}

	.prod-persona {
		grid-column: 1;
	}

	.prod-cierre-bloque {
		--escala: 0.8rem;
		height: 19rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.prod-tarjeta,
	.prod-servicio-titulo span,
	.prod-persona-enlace span,
	.prod-persona-enlace svg {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Service › Contact (09/11). Recicla «Equipo & contacto» (el muñeco a la izquierda y el fondo
   amarillo al pasar el ratón por él) con una frase y tres columnas, una por ciudad. Textos algo
   más grandes que en Nosotros (09/11: la primera versión, mucho más grande, se veía excesiva).
   -------------------------------------------------------------------------- */
.contacto-service {
	position: relative;
}

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

/* El logo, arriba a la izquierda como en las otras pestañas, encima de la escena. */
.contacto-logo {
	position: absolute;
	top: calc(var(--borde) * 2);
	left: var(--borde);
	z-index: 2;
}

.admin-bar .contacto-logo {
	top: calc(var(--borde) * 2 + 32px);
}

.contacto-service .nosotros-escena {
	grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
	padding-top: calc(var(--borde) * 2 + var(--logo-alto) + clamp(2rem, 1rem + 3vw, 4rem));
}

/* El titular, al tamaño de .loc-titulo (como en las otras pestañas), sobre las columnas. */
.contacto-cuerpo .contacto-titulo {
	max-width: none;
	margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.contacto-service .nosotros-figura {
	width: 85%;
	max-width: 56svh;
}

.contacto-cuerpo p {
	margin: 0;
}

.contacto-titulo em {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.035em;
}

.contacto-oficinas {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 clamp(1.5rem, 0.75rem + 2vw, 3.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(0.95rem, 0.88rem + 0.2vw, 1.075rem); /* como los servicios de Production services */
	line-height: 1.45;
}

.contacto-ciudad {
	margin: 0 0 0.6rem;
	font-family: var(--serif);
	font-size: clamp(1.2rem, 0.95rem + 0.6vw, 1.65rem); /* 09/11: más pequeña (antes, como los títulos de bloque de Locations) */
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.035em;
	line-height: 1;
}

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

/* Las tres columnas comparten filas (subgrid): aunque una dirección ocupe más líneas, los
   nombres, idiomas y datos quedan alineados. */
.contacto-oficina {
	display: grid;
	grid-row: span 5;
	grid-template-rows: subgrid;
	row-gap: 0;
	align-content: start;
}

.contacto-nombre {
	margin-top: 1.25rem !important;
	font-size: 1.1em;
	font-weight: 500;
	letter-spacing: -0.02em;
}

.contacto-idiomas {
	font-family: var(--serif);
	font-style: italic;
	color: var(--tinta-suave);
}

.contacto-datos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 0.8rem !important;
}

.contacto-datos a {
	color: var(--tinta);
	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);
}

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

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

	.contacto-service .nosotros-escena {
		min-height: 0;
		align-content: start;
	}

	.contacto-service .nosotros-figura {
		width: min(40%, 30svh);
	}
}

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

	.contacto-oficina + .contacto-oficina {
		margin-top: 2.5rem;
	}
}

/* --------------------------------------------------------------------------
   Locations › «Our strategic hubs», variantes en prueba (09/11; ?hubs=indice y ?hubs=mapa).
   A la izquierda, lo visual (foto grande o mapa), en las columnas 1 y 2; a la derecha, los
   nombres en grande, uno debajo de otro, y debajo los datos de la elegida, apilados.
   -------------------------------------------------------------------------- */
.loc-hubs-v2 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: clamp(1.5rem, 0.5rem + 2.5vw, 3.5rem);
	align-items: start;
}

.loc-hubs-v2 .loc-hubs-visual {
	grid-column: 1 / 3;
}

.loc-hubs-v2 .loc-hubs-lado {
	grid-column: 3 / 5;
}

.loc-hubs-v2 .loc-hubs-pestanas {
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.75rem);
	font-size: clamp(2rem, 1rem + 2.6vw, 3.8rem);
}

.loc-hubs-v2 .loc-hubs-pestana {
	line-height: 1.08;
}

/* Los datos, apilados (etiqueta en cursiva y su texto). */
.loc-hubs-v2 .loc-hubs-texto {
	grid-template-columns: minmax(0, 1fr);
	row-gap: 1.25rem;
	max-width: 32rem;
}

/* Variante 1: foto grande, 3:2, que cambia con un fundido. */
.loc-hubs-indice .loc-hubs-fotos {
	margin-top: 0;
	aspect-ratio: 3 / 2;
}

/* Variante 2: mapa (09/11, 4.ª versión, ideas de David). Una caja gris (como las tarjetas de
   Production services), 3:2, con el mapa a líneas negras finas y ampliado: nunca se ve España
   entera. Al cambiar de ciudad, el mapa se aleja un poco a mitad de camino y se acerca a la
   nueva (lo anima el JS, cambiando --x, --y y --zoom). En la elegida, al llegar: su término
   municipal en amarillo con borde negro, algún elemento geográfico (zonas en gris oscuro con
   trama, ríos y sierras con línea) con su nombre y el círculo discontinuo que se abre. */
.loc-mapa-caja {
	position: relative;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--fondo-tarjeta, #ebebe6);
}

/* El recuadro del mapa, tan alto como la columna de las ciudades (09/11, David: más corto
   que el texto descolocaba). La caja tiene 3:2 como mínimo y se estira con la fila de la
   rejilla; el mapa se recorta para llenarla (preserveAspectRatio «slice»), sin deformarse.
   El 3:2 mínimo lo da un relleno invisible (::before) y no «aspect-ratio» en el bloque: con
   «aspect-ratio», al estirarse en alto también se ensanchaba y se metía bajo el texto. */
@media (min-width: 768px) {
	.loc-hubs-v2.loc-hubs-mapa {
		align-items: stretch;
	}
}

/* El mapa, más ancho (09/11, David): ya no va a media página (columnas 1–2 de 4) sino a unos
   tres quintos, y la columna de las ciudades se va a la derecha (cabe de sobra: sus textos
   miden como mucho 32 rem). */
@media (min-width: 1024px) {
	.loc-hubs-v2.loc-hubs-mapa {
		grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	}

	.loc-hubs-v2.loc-hubs-mapa .loc-hubs-visual {
		grid-column: 1;
	}

	.loc-hubs-v2.loc-hubs-mapa .loc-hubs-lado {
		grid-column: 2;
	}
}

@media (min-width: 768px) {

	.loc-hubs-mapa .loc-hubs-visual {
		position: relative;
	}

	.loc-hubs-mapa .loc-hubs-visual::before {
		content: "";
		display: block;
		aspect-ratio: 3 / 2;
	}

	.loc-hubs-mapa .loc-hubs-visual .loc-mapa-caja {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}
}

/* Se puede arrastrar con el ratón (09/11). */
@media (hover: hover) and (pointer: fine) {
	.loc-mapa-caja {
		cursor: grab;
		user-select: none;
	}

	.loc-mapa-caja.is-arrastrando {
		cursor: grabbing;
	}
}



.loc-mapa {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

.loc-mapa-mundo {
	transform: translate(300px, 200px) scale(var(--zoom)) translate(calc(var(--x) * -1px), calc(var(--y) * -1px));
}

/* Las costas de los países vecinos, en gris claro (09/11). */
.loc-mapa-vecino {
	fill: none;
	stroke: #b9b9b3;
	stroke-width: 1;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.loc-mapa-tierra {
	fill: none;
	stroke: var(--tinta);
	stroke-width: 1.2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.loc-mapa-punto {
	cursor: pointer;
}

/* Lo de cada ciudad aparece cuando el mapa ya ha llegado y se va enseguida al salir. */
.loc-mapa-nombre {
	opacity: 0;
	transition: opacity 0.3s var(--curva);
}

.loc-mapa-punto.is-activo .loc-mapa-nombre {
	opacity: 1;
	transition: opacity 0.6s var(--curva) 1.1s;
}

.loc-mapa-limite {
	fill: var(--amarillo);
	stroke: var(--tinta);
	stroke-width: 1.4;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.loc-mapa-area {
	fill: rgba(10, 10, 10, 0.14);
	stroke: var(--tinta);
	stroke-width: 0.8;
	vector-effect: non-scaling-stroke;
}

.loc-mapa-linea {
	fill: none;
	stroke: var(--tinta);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 5 3;
	vector-effect: non-scaling-stroke;
}

.loc-mapa-geo {
	fill: var(--tinta-suave);
	font-family: var(--serif);
	font-style: italic;
	letter-spacing: -0.01em;
}

.loc-mapa-radio {
	fill: var(--amarillo);
	stroke: none;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.4);
	transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}

/* El círculo amarillo de la elegida (09/11): se abre cuando el mapa ha llegado, por debajo de
   las líneas del mapa; en su centro no hay punto. */
.loc-mapa-radio.is-activo {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--curva) 1.1s, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.1s;
}

.loc-mapa-centro {
	fill: var(--tinta);
}

/* Las otras ciudades se ven siempre (punto negro); la elegida, sin punto (tiene el círculo). */
.loc-mapa-centro {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.7);
	transition: transform 0.5s var(--curva);
}

.loc-mapa-punto.is-activo .loc-mapa-centro {
	transform: scale(0);
}

.loc-mapa-nombre {
	fill: var(--tinta);
	font-family: var(--serif);
	font-style: italic;
	letter-spacing: -0.02em;
}

/* Los nombres de la derecha, como antes (uno debajo de otro), y los no elegidos en gris claro. */
.loc-hubs-mapa .loc-hubs-pestana[aria-selected="false"] {
	color: #b9b9b3;
}

.loc-hubs-mapa .loc-hubs-pestana[aria-selected="false"]:hover {
	color: var(--tinta);
}

@media (prefers-reduced-motion: reduce) {
	.loc-mapa-detalle,
	.loc-mapa-radio,
	.loc-mapa-nombre {
		transition: none !important;
	}
}

.loc { --fondo-tarjeta: #ebebe6; }

@media (prefers-reduced-motion: reduce) {
	.loc-mapa-radio {
		transition: none;
	}
}

/* Móvil: lo visual encima, los nombres en una línea y los datos debajo. */
@media (max-width: 767px) {
	.loc-hubs-v2 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 1.5rem;
	}

	.loc-hubs-v2 .loc-hubs-visual,
	.loc-hubs-v2 .loc-hubs-lado {
		grid-column: 1;
	}

	.loc-hubs-v2 .loc-hubs-fotos {
		width: 100%;
		margin: 0;
	}

	.loc-hubs-v2 .loc-hubs-pestanas {
		flex-direction: row;
		gap: 0.1em 0.5em;
		font-size: clamp(1.5rem, 1rem + 2vw, 2rem);
	}
}

/* Móvil, con el mapa (09/11, David): toda la sección tiene que caber en la pantalla, con los
   tres apartados enteros (para que se entienda): letra más pequeña y menos aire. */
@media (max-width: 767px) {
	.loc-hubs-mapa.loc-hubs-v2 {
		row-gap: 1rem;
	}

	.loc-hubs-mapa .loc-hubs-pestanas {
		margin-bottom: 0.9rem;
	}

	/* El mapa cede altura en pantallas bajas (el texto, en cambio, siempre entero): 3:2 como
	   máximo y lo que deje la pantalla quitando los ≈ 25 rem del título, las ciudades y los
	   apartados (mínimo 9,5 rem). */
	.loc-hubs-mapa .loc-mapa-caja {
		aspect-ratio: auto;
		height: min(calc((100vw - 2 * var(--borde)) * 2 / 3), max(9.5rem, calc(100svh - 25rem)));
	}

	.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-hubs-texto {
		row-gap: 0.75rem;
	}

	.loc-intro .loc-hubs-mapa .loc-hubs-dato .loc-hubs-etiqueta {
		margin-bottom: 0.15rem;
		font-size: 1.05rem;
	}

	.loc-hubs-mapa .loc-hubs-dato p {
		font-size: 0.875rem; /* 14 px */
		line-height: 1.32;
	}

	/* El marcado se desplaza menos: en el móvil no hay sitio a la derecha. */
	.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-hubs-texto.is-activo .loc-hubs-dato.is-elegido {
		translate: 0.6rem 0;
	}
}

/* Mapa, 6.ª versión (09/11): los puntos y los nombres de las ciudades no encogen con el zoom
   (se dividen entre --zoom, que heredan del mapa). Sin ciudad elegida se ven los tres nombres. */
.loc-mapa-centro {
	r: calc(4px / var(--zoom, 1));
}

.loc-mapa-nombre {
	font-size: calc(17px / var(--zoom, 1)) !important;
}

.loc-hubs.sin-ciudad .loc-mapa-nombre {
	opacity: 1;
	transition: opacity 0.6s var(--curva) 0.8s;
}

/* Las fotos de la ciudad elegida, dentro del recuadro del mapa (09/11): cuando el mapa llega a
   la ciudad, la sustituyen; al cambiar de ciudad se van y vuelve el mapa. Las del reel se
   funden una en otra. */
.loc-hubs-mapa .loc-mapa-fotos {
	position: absolute;
	inset: 0;
	z-index: 1;
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1), transform 0.3s cubic-bezier(0.4, 0, 1, 1);
	pointer-events: none;
}

/* Entran subiendo y salen bajando, como los textos de cada ciudad (09/11, David; antes, un
   círculo que se abría desde el punto de la ciudad). */
.loc-mapa-caja.con-fotos .loc-mapa-fotos {
	opacity: 1;
	transform: none;
	transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1), transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-mapa-reel {
	position: absolute;
	inset: 0;
	overflow: hidden;
	visibility: visible !important;
	opacity: 0;
	transition: opacity 0.3s var(--curva);
	animation: none !important;
}

.loc-mapa-reel.is-activo {
	opacity: 1;
	transition: none;
}

.loc-mapa-reel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.5s var(--curva);
}

.loc-mapa-reel img.is-visible {
	z-index: 2;
	opacity: 1;
}

/* La foto que se va se queda debajo, entera, mientras entra la nueva (09/11). */
.loc-mapa-reel img.is-anterior {
	z-index: 1;
	opacity: 1;
	transition: none;
}

/* Sin ciudad elegida, en el hueco de los datos, una línea que invita a elegir. */
.loc-intro .loc-hubs-pista {
	grid-area: 1 / 1;
	margin: 0;
	color: var(--tinta-suave);
	font-family: var(--serif);
	font-size: clamp(1.15rem, 0.9rem + 0.6vw, 1.55rem);
	font-style: italic;
	opacity: 0;
	transition: opacity 0.3s var(--curva);
}

.loc-hubs.sin-ciudad .loc-hubs-pista {
	opacity: 1;
	transition: opacity 0.6s var(--curva) 0.3s;
}


/* Mapa (09/11, David): las ciudades son siempre un círculo amarillo pequeño (por debajo de las
   líneas, sin punto negro) que crece al elegirla y encoge al dejarla; los nombres de las tres
   se ven siempre. El tamaño pequeño no cambia con el zoom; el grande, sí (va con el mapa). */
.loc-hubs-mapa .loc-mapa-radio {
	opacity: 1;
	transform: none;
	r: calc(7px / var(--zoom, 1));
	cursor: pointer;
	transition: r 0.5s var(--curva);
}

.loc-hubs-mapa .loc-mapa-radio.is-activo {
	r: 70px;
	transition: r 1s cubic-bezier(0.16, 1, 0.3, 1); /* el JS lo lanza durante el acercamiento */
}

.loc-hubs-mapa .loc-mapa-centro {
	display: none;
}

.loc-hubs-mapa .loc-mapa-nombre {
	opacity: 1;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	.loc-hubs-mapa .loc-mapa-radio {
		transition: none !important;
	}
}

/* Locations, animaciones de entrada (09/11, como en Production services): la entradilla aparece
   tras el titular y, al llegar con el scroll, cada bloque sube y se funde (los puntos de «Spain
   at a glance», uno detrás de otro). Sin JS o con «reducir movimiento», todo quieto. */
.loc-intro > p:first-of-type {
	animation: aparecer 0.45s ease-out 0.25s both;
}

.loc.is-revela .loc-bloque > h3,
.loc.is-revela .loc-bloque-cuerpo > ul > li,
.loc.is-revela .loc-hubs-visual,
.loc.is-revela .loc-hubs-lado,
.loc.is-revela .loc-lateral {
	opacity: 0;
}

.loc.is-revela .is-visible > h3,
.loc.is-revela .is-visible .loc-bloque-cuerpo > ul > li,
.loc.is-revela .is-visible .loc-hubs-visual,
.loc.is-revela .is-visible .loc-hubs-lado,
.loc.is-revela .loc-lateral.is-visible {
	animation: prod-sube 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.loc.is-revela .is-visible .loc-bloque-cuerpo > ul > li {
	animation-delay: calc(0.1s + var(--i, 0) * 0.08s);
}

.loc.is-revela .is-visible .loc-hubs-visual {
	animation-delay: 0.1s;
}

.loc.is-revela .is-visible .loc-hubs-lado {
	animation-delay: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
	.loc-intro > p:first-of-type {
		animation: none;
	}
}

/* Con las fotos a la vista, el mapa no se arrastra (09/11). */
.loc-mapa-caja.con-fotos {
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.loc-hubs-mapa .loc-mapa-fotos {
		transition: none !important;
	}
}

/* Variante «dividido» (09/11, en prueba; ?hubs=dividido): al elegir una ciudad, el recuadro se
   parte en dos mitades horizontales. Arriba, el mapa con la ciudad centrada (el JS lo desplaza)
   y su círculo, más pequeño para que quepa; abajo, el reel de fotos, que sube desde el borde de
   abajo y baja al irse, a la vez que se mueve el mapa. Una línea fina separa las dos mitades. */
.loc-hubs-dividido .loc-mapa-fotos {
	top: 50%;
	opacity: 1;
	transform: translateY(100%);
	transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
	border-top: 1px solid var(--tinta);
}

.loc-hubs-dividido .loc-mapa-caja.con-fotos .loc-mapa-fotos {
	opacity: 1;
	transform: none;
	transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.loc-hubs-dividido .loc-mapa-radio.is-activo {
	r: 42px;
}

/* Apartados de la ciudad (09/11): el que tiene el ratón encima, con la franja amarilla en su
   etiqueta; se marca que se pueden señalar (cursor). */
@media (hover: hover) and (pointer: fine) {
	.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-hubs-texto.is-activo .loc-hubs-dato {
		cursor: default;
	}
}

.loc-hubs-mapa .loc-hubs-etiqueta {
	display: inline;
	padding: 0 0.1em;
	margin-left: -0.1em;
	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);
}

.loc-hubs-mapa .loc-hubs-etiqueta + p {
	margin-top: 0.4rem;
}

.loc-hubs-mapa .loc-hubs-dato.is-elegido .loc-hubs-etiqueta {
	background-size: 100% 0.95em;
}

/* «Proximity» en el mapa (09/11): oculto hasta que se pasa por ese apartado; entonces, cuando
   el mapa se ha alejado, las zonas se rellenan de amarillo, el anillo del alcance se abre, las
   líneas se trazan y aparecen los nombres, unos detrás de otros. Los grosores y los textos no
   cambian con el zoom. */
.loc-mapa-prox {
	pointer-events: none;
}

.loc-mapa-prox .prox-linea {
	fill: none;
	stroke: var(--amarillo);
	stroke-width: calc(2px / var(--zoom, 1)); /* todas las líneas amarillas, del mismo grosor (09/11) */
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Cordilleras (zigzag) y costas (remarcadas, más gruesas): se trazan de principio a fin. */
.loc-mapa-prox .prox-sierra,
.loc-mapa-prox .prox-costa {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s var(--curva);
}

.loc-mapa-prox .prox-sierra {
	stroke-linejoin: miter;
}

/* La costa remarcada, más ancha que las demás líneas (09/11, David): con 2 px y por debajo de
   la línea negra casi no se veía; así queda una franja amarilla con la costa negra en medio. */
.loc-mapa-prox .prox-costa {
	stroke-width: calc(7px / var(--zoom, 1));
}



/* Rutas (tren, carreteras) y la flecha del radio: guiones amarillos que avanzan (09/11; antes,
   puntos; la flecha, quieta). */
.loc-mapa-prox .prox-ruta,
.loc-mapa-prox .prox-flecha {
	stroke-linecap: butt;
	stroke-dasharray: calc(7px / var(--zoom, 1)) calc(5px / var(--zoom, 1));
	opacity: 0;
	transition: opacity 0.3s var(--curva);
}

@keyframes prox-marcha {
	to { stroke-dashoffset: calc(-12px / var(--zoom, 1)); }
}

/* El círculo del radio (Barcelona, 1–2 h en coche): negro discontinuo, se abre desde la ciudad. */
.loc-mapa-prox .prox-anillo {
	fill: none;
	stroke: #b9b9b3; /* gris clarito, como las costas vecinas (09/11) */
	stroke-width: calc(1px / var(--zoom, 1));
	stroke-dasharray: calc(7px / var(--zoom, 1)) calc(5px / var(--zoom, 1));
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.4);
	opacity: 0;
	transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}

.loc-mapa-prox.is-prox .prox-anillo {
	opacity: 1;
	transform: none;
	transition: opacity 0.5s var(--curva) 0.6s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}

/* Zonas (la Albufera): solo el contorno amarillo, sin relleno (09/11, David: relleno se
   confundía con el círculo de la ciudad). Mismo grosor que las demás líneas. */
.loc-mapa-prox .prox-area {
	fill: none;
	stroke: var(--amarillo);
	stroke-width: calc(2px / var(--zoom, 1));
	stroke-linejoin: round;
	opacity: 0;
	transition: opacity 0.3s var(--curva);
}

.loc-mapa-prox .prox-etiqueta {
	fill: var(--tinta);
	font-family: var(--sans); /* solo las ciudades en Playfair (09/11) */
	font-size: calc(10.5px / var(--zoom, 1));
	font-weight: 500;
	letter-spacing: 0.01em;
	opacity: 0;
	transition: opacity 0.25s var(--curva);
}

.loc-mapa-prox.is-prox .prox-sierra,
.loc-mapa-prox.is-prox .prox-costa {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(0.6s + var(--i, 0) * 0.1s);
}

.loc-mapa-prox.is-prox .prox-ruta,
.loc-mapa-prox.is-prox .prox-flecha {
	opacity: 1;
	transition: opacity 0.5s var(--curva) calc(0.6s + var(--i, 0) * 0.08s);
}

.loc-mapa-prox.is-prox .prox-ruta,
.loc-mapa-prox.is-prox .prox-flecha {
	animation: prox-marcha 1.5s linear infinite; /* más despacio (09/11; antes, 0,6 s) */
}

.loc-mapa-prox.is-prox .prox-area {
	opacity: 1;
	transition: opacity 0.6s var(--curva) calc(0.6s + var(--i, 0) * 0.1s);
}

.loc-mapa-prox.is-prox .prox-etiqueta {
	opacity: 1;
	transition: opacity 0.5s var(--curva) calc(1s + var(--i, 0) * 0.08s);
}

@media (prefers-reduced-motion: reduce) {
	.loc-mapa-prox * {
		transition: none !important;
		animation: none !important;
	}
}

/* En «Proximity», el círculo de la ciudad encoge a un punto para que se vea lo que se dibuja. */
.loc-hubs-mapa.en-proximidad .loc-mapa-radio.is-activo {
	r: calc(8px / var(--zoom, 1));
	transition: r 0.6s var(--curva);
}

/* «The look» (09/11, David): las fotos entran deslizándose de abajo arriba hasta cubrir el
   recuadro, sin fundido, y salen bajando igual. */
.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-mapa-fotos {
	opacity: 1;
	transform: translateY(100%);
	transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-mapa-caja.con-fotos .loc-mapa-fotos {
	opacity: 1;
	transform: none;
	transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}

/* La flecha del radio se dibuja de principio a fin (09/11): su máscara se traza como las
   cordilleras y, debajo, los guiones siguen avanzando. */
.loc-mapa-prox .prox-revela {
	fill: none;
	stroke: #fff;
	stroke-width: calc(24px / var(--zoom, 1));
	stroke-linecap: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.3s var(--curva);
}

.loc-mapa-prox.is-prox .prox-revela {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.1s cubic-bezier(0.65, 0, 0.35, 1) calc(0.6s + var(--i, 0) * 0.1s);
}

.loc-mapa-prox.is-prox .prox-flecha {
	opacity: 1;
	transition: none;
}

/* Ciudades en las etiquetas de «Proximity» (Madrid: los destinos del tren), en Playfair. */
.loc-mapa-prox .prox-ciudad {
	font-family: var(--serif);
	font-size: calc(14px / var(--zoom, 1));
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.02em;
}

/* El círculo del radio gira despacio (09/11); el texto «1–2 h drive» va por fuera, siguiendo la
   curva. */
.loc-mapa-prox .prox-giro {
	transform-box: fill-box;
	transform-origin: center;
}

.loc-mapa-prox.is-prox .prox-giro {
	animation: prox-giro 40s linear infinite;
}

@keyframes prox-giro {
	to { transform: rotate(360deg); }
}

/* Los ramales (las rutas que no salen de la ciudad) se dibujan un poco después. */
.loc-mapa-prox.is-prox .prox-revela {
	transition-delay: 0.6s;
}

.loc-mapa-prox.is-prox .prox-ramal {
	transition-delay: 1.2s;
}

.loc-mapa-prox.is-prox .prox-ruta {
	opacity: 1;
	transition: none;
}

/* El apartado marcado (09/11): además de la franja, se desplaza un poco a la derecha y los otros
   dos pasan a gris, como los nombres de las ciudades que no están elegidas. */
.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-hubs-texto.is-activo .loc-hubs-dato {
	/* Desplazamiento suave y orgánico (09/11, David): arranca despacio y se asienta con una cola
	   larga (antes, 0,5 s con una curva que salía de golpe). La franja va a su ritmo de siempre. */
	/* Va en «translate» y no en «transform»: «transform» lo usa la animación de entrada de los
	   bloques (hub-sube, que se queda puesta), y mientras manda ella, la transición no se ve y el
	   bloque salta de golpe. */
	transition: translate 0.85s cubic-bezier(0.37, 0, 0.18, 1), color 0.7s cubic-bezier(0.45, 0, 0.25, 1);
}

.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-hubs-texto.is-activo:has(.is-elegido) .loc-hubs-dato:not(.is-elegido) {
	color: var(--tinta-suave);
}

.loc-hubs-mapa:not(.loc-hubs-dividido) .loc-hubs-texto.is-activo .loc-hubs-dato.is-elegido {
	translate: 1.4rem 0; /* ≈ 22 px (antes, 10) */
}

@media (prefers-reduced-motion: reduce) {
	.loc-hubs-mapa .loc-hubs-texto.is-activo .loc-hubs-dato {
		transition: none;
	}
}

/* La tierra a 1–2 h de Barcelona (09/11): rayas diagonales finas en gris claro dentro del radio
   (David: sin alterar los colores; antes, amarillo suave), recortadas por la costa como el
   círculo; se abren con él. */
.loc-mapa-prox .prox-zona {
	fill: url(#loc-rayas);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.4);
	transition: opacity 0.3s var(--curva), transform 0.3s var(--curva);
}

.loc-mapa-prox.is-prox .prox-zona {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s var(--curva) 0.6s, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}