/* ===== Base ===== */

:root {
	--bg: #f6f4ef;
	--bg-panel: #ffffff;
	--text: #201d18;
	--muted: #6f6a60;
	--border: #e3ddd0;
	--dark: #17140f;
	--serie-color: #201d18; /* pisado inline por pagina cuando aplica */

	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-display: 'Big Shoulders Display', 'Inter', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	line-height: 1.5;
}

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

a { color: inherit; }

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.eyebrow {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
}

/* ===== Header / nav ===== */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	background: var(--bg);
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--border);
}

.site-logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-decoration: none;
	color: var(--text);
}

.site-nav {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.site-nav a {
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--muted);
	padding-bottom: 1px;
	border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a.activo {
	color: var(--text);
	border-bottom-color: var(--serie-color);
}

/* Selector de idioma.

   Va al final de la barra y separado con una linea: son links, si, pero no son
   secciones del sitio. Puestos al mismo nivel que "Inicio" o "Exposiciones" se
   leen como una seccion mas, y ademas empujan el menu a lo ancho.

   Los dos idiomas se muestran SIEMPRE, tambien el que ya se esta viendo. Un
   boton solo que dice "EN" obliga a adivinar si es el estado actual o el
   destino; con los dos a la vista y el actual marcado, no hay nada que deducir. */
.site-nav-idiomas {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-left: 20px;
	border-left: 1px solid var(--border);
}

.site-nav a.site-nav-idioma {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.site-nav a.site-nav-idioma.activo {
	color: var(--text);
	border-bottom-color: var(--serie-color);
}

.menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.menu-toggle span {
	display: block;
	height: 2px;
	background: var(--text);
	transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle.abierto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.abierto span:nth-child(2) { opacity: 0; }
.menu-toggle.abierto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===== Footer ===== */

.site-footer {
	text-align: center;
	padding: 48px 24px 32px;
	color: var(--muted);
	font-size: 14px;
	border-top: 1px solid var(--border);
	margin-top: 80px;
}

.site-footer p { margin: 4px 0; }
.site-footer-año { font-size: 12px; }

.site-footer-contacto {
	font-size: 13px;
}

.site-footer-contacto a {
	color: var(--muted);
	text-decoration: none;
}

.site-footer-contacto a:hover {
	color: var(--text);
	text-decoration: underline;
}

.site-footer-separador {
	margin: 0 8px;
	color: var(--border);
}

/* ===== Home: hero ===== */

.hero-home {
	position: relative;
	height: 78vh;
	min-height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--dark);
}

.hero-home video,
.hero-home .hero-home-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero-home .hero-home-fallback {
	background:
		radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 60%),
		linear-gradient(160deg, #201d18, #0f0d0a);
}

/* fondo de video compartido por los heroes de home, serie y obra */
.hero-video-fondo {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.hero-video-fondo iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh; /* alto x 16/9 */
	height: 56.25vw; /* ancho x 9/16 */
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
}

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

.hero-home::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.5));
}

.hero-home-texto {
	position: relative;
	z-index: 1;
	text-align: center;
	color: #fff;
	padding: 0 24px;
}

.hero-home-texto h1 {
	font-family: var(--font-display);
	font-size: clamp(52px, 10vw, 130px);
	line-height: 0.92;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.hero-home-texto p {
	font-family: var(--font-display);
	font-size: clamp(16px, 2.2vw, 22px);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin: 14px 0 0;
	color: rgba(255,255,255,0.85);
}

/* ===== Home: obras destacadas ===== */

.seccion { padding-top: 72px; padding-bottom: 72px; }
.seccion-titulo {
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 44px);
	text-transform: uppercase;
	margin: 0 0 32px;
}

.grilla-obras {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 24px;
}

.grilla-obras--home {
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

.grilla-obras--home .tarjeta-obra-titulo { font-size: 19px; }
.grilla-obras--home .tarjeta-obra-meta { font-size: 15px; }

.tarjeta-obra {
	text-decoration: none;
	color: var(--text);
	display: block;
}

.tarjeta-obra-img {
	aspect-ratio: 4/3;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tarjeta-obra-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.tarjeta-obra:hover .tarjeta-obra-img img { transform: scale(1.04); }

.tarjeta-obra-sin-foto {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .08em;
	color: var(--muted);
	text-align: center;
	padding: 20px;
}

.tarjeta-obra-titulo {
	font-weight: 700;
	margin-top: 12px;
	font-size: 16px;
}

.tarjeta-obra-meta {
	color: var(--muted);
	font-size: 14px;
	margin-top: 2px;
}

/* ===== Home: botones de serie ===== */

.series-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.serie-boton {
	position: relative;
	height: 340px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	text-decoration: none;
	background-size: cover;
	background-position: center;
}

.serie-boton::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.05) 55%);
}

.serie-boton-nombre {
	position: relative;
	z-index: 1;
	font-family: var(--font-display);
	color: #fff;
	font-size: clamp(30px, 3.6vw, 46px);
	text-transform: uppercase;
	padding: 28px;
	letter-spacing: 0.01em;
}

.serie-boton:hover .serie-boton-nombre { text-decoration: underline; }

/* ===== Pagina de serie ===== */

.serie-hero {
	position: relative;
	height: 60vh;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	background-color: var(--serie-color);
}

.serie-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45));
}

.serie-hero-texto {
	position: relative;
	z-index: 1;
	color: #fff;
	text-align: center;
}

.serie-hero-texto h1 {
	font-family: var(--font-display);
	font-size: clamp(56px, 12vw, 150px);
	text-transform: uppercase;
	margin: 0;
	line-height: 0.9;
}

/* ===== Pagina de obra: hero de video (solo si la obra tiene video cargado) ===== */

.obra-hero {
	position: relative;
	height: 60vh;
	min-height: 380px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--dark);
}

.obra-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5));
}

.obra-hero-texto {
	position: relative;
	z-index: 1;
	color: #fff;
	text-align: center;
	padding: 0 24px;
}

.obra-hero-texto h1 {
	font-family: var(--font-display);
	font-size: clamp(40px, 8vw, 90px);
	text-transform: uppercase;
	margin: 0;
	line-height: 0.95;
}

/* ===== Biografia en la home ===== */

.bio-home {
	max-width: 920px;
	margin: 0 auto;
	padding: 72px 24px;
}

.bio-home-eyebrow {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
	margin: 0;
}

.bio-home-nombre {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 40px);
	text-transform: uppercase;
	text-align: center;
	margin: 8px 0 0;
}

.bio-home-nombre::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	background: var(--dark);
	margin: 22px auto 0;
}

.bio-home-texto {
	margin-top: 36px;
	font-size: 19px;
	line-height: 1.85;
	color: var(--text);
}

.bio-home-texto p {
	margin: 0 0 22px;
}

.bio-home-texto p:last-child {
	margin-bottom: 0;
}

.bio-home-texto p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 4.4em;
	font-weight: 600;
	float: left;
	line-height: 0.78;
	padding: 4px 10px 0 0;
	color: var(--dark);
}

@media (max-width: 640px) {
	.bio-home { padding: 56px 24px; }
	.bio-home-texto { font-size: 17px; }
}

.serie-intro {
	max-width: 700px;
	margin: 0 auto;
	padding: 56px 24px;
	text-align: center;
	font-size: 19px;
	line-height: 1.7;
}

.serie-intro::before {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	background: var(--serie-color);
	margin: 0 auto 28px;
}

/* ===== Pagina de obra ===== */

.obra-header {
	padding: 56px 0 32px;
	border-bottom: 1px solid var(--border);
}

.obra-header h1 {
	font-family: var(--font-display);
	font-size: clamp(38px, 6vw, 64px);
	text-transform: uppercase;
	margin: 0 0 12px;
}

.obra-header-grid {
	display: flex;
	gap: 48px;
	margin-top: 24px;
	align-items: flex-start;
}

.obra-descripcion {
	flex: 1;
	max-width: 640px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--text);
}

.obra-descripcion p { margin: 0 0 1em; }
.obra-descripcion p:last-child { margin-bottom: 0; }

.obra-ficha {
	width: 260px;
	flex-shrink: 0;
	padding: 20px 24px;
	background: var(--bg-panel);
	border: 1px solid var(--border);
}

.obra-ficha h2 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 18px;
	margin: 0 0 14px;
}

.obra-ficha dl { margin: 0; }

.obra-ficha dt {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted);
	margin-top: 14px;
}

.obra-ficha dt:first-child { margin-top: 0; }

.obra-ficha dd {
	margin: 2px 0 0;
	font-size: 15px;
}

.obra-series {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.obra-serie-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 20px;
	border: 1px solid var(--border);
	color: var(--text);
}

.obra-serie-tag-punto {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
}

.obra-galeria {
	padding: 56px 0 40px;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

.obra-galeria-item {
	width: 68%;
	cursor: zoom-in;
}

.obra-galeria-item:nth-child(even) { align-self: flex-end; }
.obra-galeria-item:nth-child(3n) { width: 52%; }

.obra-galeria-item img {
	width: 100%;
	border: 1px solid var(--border);
}

.obra-sin-fotos {
	padding: 40px 0 60px;
	color: var(--muted);
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.volver-listado {
	display: inline-block;
	margin: 32px 0 0;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	color: var(--muted);
}

.volver-listado:hover { color: var(--text); }

.volver-listado-final { margin: 8px 0 48px; }

/* ===== Lightbox ===== */

.lightbox {
	position: fixed;
	inset: 0;
	background: rgba(10,9,7,0.92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100;
	padding: 24px;
	cursor: zoom-out;
}

.lightbox.abierto { display: flex; }

.lightbox img {
	max-width: 100%;
	max-height: 100%;
}

/* ===== Exposiciones ===== */

.expo-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 40px;
	margin: 32px 0 80px;
	align-items: start;
}

.expo-lista {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--border);
	position: sticky;
	top: 90px;
}

.expo-lista-item {
	all: unset;
	cursor: pointer;
	padding: 14px 4px;
	border-bottom: 1px solid var(--border);
	font-size: 15px;
	font-weight: 600;
	color: var(--muted);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.expo-lista-item span {
	font-weight: 400;
	font-size: 13px;
	color: var(--muted);
}

.expo-lista-item:hover { color: var(--text); }

.expo-lista-item.activo {
	color: var(--text);
	border-bottom-color: var(--text);
}

.expo-medios { display: none; }
.expo-medios.activo { display: block; }

.expo-grilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 16px;
}

.expo-media-item {
	all: unset;
	cursor: zoom-in;
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--bg-panel);
	border: 1px solid var(--border);
	overflow: hidden;
}

.expo-media-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.expo-media-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 22px;
	background: rgba(0,0,0,0.25);
}

.expo-media-video-generico {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 14px;
	background: #24211d;
}

.expo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
}

.expo-lightbox.abierto { display: flex; }

.expo-lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10,9,7,0.94);
}

.expo-lightbox-contenido {
	position: relative;
	z-index: 1;
	max-width: 88vw;
	max-height: 85vh;
	display: flex;
}

.expo-lightbox-contenido img {
	max-width: 88vw;
	max-height: 85vh;
	object-fit: contain;
}

.expo-lightbox-contenido iframe {
	width: min(88vw, 1100px);
	height: min(62vw, 620px);
	border: 0;
}

.expo-lightbox-contenido video {
	max-width: 88vw;
	max-height: 85vh;
}

.expo-lightbox-cerrar,
.expo-lightbox-flecha {
	position: absolute;
	z-index: 2;
	all: unset;
	cursor: pointer;
	color: #fff;
	font-size: 28px;
	padding: 12px;
}

.expo-lightbox-cerrar { top: 12px; right: 20px; }
.expo-lightbox-flecha-izq { left: 12px; top: 50%; transform: translateY(-50%); }
.expo-lightbox-flecha-der { right: 12px; top: 50%; transform: translateY(-50%); }

@media (max-width: 860px) {
	.expo-layout { grid-template-columns: 1fr; }
	.expo-lista { position: static; flex-direction: row; flex-wrap: wrap; border-top: none; }
	.expo-lista-item { border-bottom: none; padding: 8px 12px; border: 1px solid var(--border); border-radius: 20px; }
}

/* ===== Responsive ===== */

@media (max-width: 860px) {
	.site-header { position: relative; }
	.menu-toggle { display: flex; }

	.site-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--border);
		box-shadow: 0 8px 16px rgba(0,0,0,0.06);
	}

	.site-nav.abierto { display: flex; }

	.site-nav a {
		padding: 14px 24px;
		border-bottom: 1px solid var(--border);
	}

	.site-nav a.activo { border-left: 3px solid var(--serie-color); }

	/* En el menu desplegable cada link ocupa una fila entera. Los dos idiomas
	   comparten una sola: son una eleccion entre dos, no dos destinos sueltos. */
	.site-nav-idiomas {
		gap: 0;
		padding-left: 0;
		border-left: 0;
		border-bottom: 1px solid var(--border);
	}

	.site-nav a.site-nav-idioma {
		flex: 1;
		text-align: center;
		border-bottom: 0;
	}

	.site-nav a.site-nav-idioma.activo {
		border-left: 0;
		background: var(--bg-panel);
	}

	.hero-home,
	.serie-hero,
	.obra-hero {
		height: auto;
		aspect-ratio: 16/9;
		min-height: 0;
	}

	.series-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
	.serie-boton { height: 220px; }
	.grilla-obras--home { grid-template-columns: repeat(2, 1fr); gap: 20px; }
	.grilla-obras { grid-template-columns: repeat(2, 1fr); }
	.obra-galeria-item,
	.obra-galeria-item:nth-child(even),
	.obra-galeria-item:nth-child(3n) { width: 100%; align-self: center; }
	.obra-header-grid { flex-direction: column; }
	.obra-ficha { width: 100%; }
}

@media (max-width: 520px) {
	.series-grid,
	.grilla-obras--home,
	.grilla-obras { gap: 14px; }
	.serie-boton { height: 180px; }
	.serie-boton-nombre { padding: 16px; font-size: clamp(20px, 6vw, 28px); }
	.tarjeta-obra-titulo { font-size: 15px; margin-top: 8px; }
	.tarjeta-obra-meta { font-size: 13px; }
	.grilla-obras--home .tarjeta-obra-titulo { font-size: 15px; }
	.grilla-obras--home .tarjeta-obra-meta { font-size: 13px; }
}

/* ===== Consulta por una obra ===== */

.consulta {
	max-width: 640px;
	margin: 0 auto;
	padding: 64px 0 8px;
	border-top: 1px solid var(--border);
}

.consulta .seccion-titulo { text-align: center; }

.consulta-intro {
	text-align: center;
	color: var(--muted);
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 32px;
}

/* La miniatura vive en el margen izquierdo, FUERA del bloque de 640px, para que
   el titulo y los textos sigan centrados y con todo el ancho, como estaban antes.
   Necesita lugar a los costados: abajo de 1100px no entra y vuelve arriba,
   centrada sobre el titulo. */
.consulta { position: relative; }

.consulta-mini {
	width: 150px;
	margin: 0 auto 30px;
}

@media (min-width: 1100px) {
	.consulta-mini {
		position: absolute;
		top: 64px; /* mismo padding-top que .consulta, para alinearla con el titulo */
		right: 100%; /* el borde derecho de la miniatura toca el izquierdo del bloque */
		margin: 0 44px 0 0;
	}
}

.consulta-mini img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--border);
	background: var(--bg-panel);
}

.consulta-mini figcaption {
	margin-top: 10px;
	font-family: var(--font-display);
	font-size: 17px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.25;
	text-align: center;
	color: var(--muted);
}

/* El punto rojo es la convencion de las galerias presenciales: obra marcada,
   obra que ya no se vende. Disponible = circulo vacio; el relleno es del color
   del panel y lleva borde, porque un punto blanco sobre fondo claro no se ve. */
.consulta-estado {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 11px;
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--muted);
	text-wrap: pretty;
}

.consulta-punto {
	flex: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--bg-panel);
	border: 1px solid var(--muted);
}

.consulta-estado-no { color: var(--text); }

.consulta-estado-no .consulta-punto,
.obra-ficha-estado-no .consulta-punto {
	background: #c0392b;
	border-color: #c0392b;
}

/* Lo mismo en la ficha tecnica de arriba, en chico. Va suelta abajo de la lista
   y sin titulo propio: el punto ya dice de que se trata, y un <dt>Disponibilidad</dt>
   arriba de un <dd>Disponible</dd> repetia la palabra dos veces seguidas. */
.obra-ficha-estado {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	text-wrap: pretty;
}

.obra-ficha-estado-no { color: var(--text); }

.obra-ficha-estado .consulta-punto {
	position: relative;
	top: 1px; /* baseline deja el circulo un pelin alto respecto del texto */
	width: 9px;
	height: 9px;
}

.consulta-form label {
	display: block;
	margin-bottom: 18px;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.consulta-fila {
	display: flex;
	gap: 18px;
}

.consulta-fila label { flex: 1; }

/* ojo: si se agrega un input de otro type hay que sumarlo aca, si no queda
   con el estilo crudo del navegador */
.consulta-form input[type="text"],
.consulta-form input[type="email"],
.consulta-form textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 11px 13px;
	border: 1px solid var(--border);
	border-radius: 3px;
	background: var(--bg-panel);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--text);
	text-transform: none;
	letter-spacing: normal;
	transition: border-color 0.25s ease;
}

.consulta-form input[type="text"]:focus,
.consulta-form input[type="email"]:focus,
.consulta-form textarea:focus {
	outline: none;
	border-color: var(--text);
}

.consulta-form textarea { resize: vertical; }

.consulta-nota {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted);
}

.consulta-form button {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 14px 20px;
	border: 0;
	border-radius: 3px;
	background: var(--dark);
	color: #fff;
	font-family: var(--font-display);
	font-size: 19px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity 0.25s ease;
}

.consulta-form button:hover { opacity: 0.85; }

/* el campo trampa no lo tiene que ver nadie, pero tampoco display:none —
   algunos bots detectan eso y lo saltean */
.consulta-trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.consulta-ok, .consulta-error {
	text-align: center;
	padding: 16px 18px;
	border-radius: 3px;
	font-size: 16px;
	text-wrap: pretty;
}

.consulta-ok { background: #e8f0e8; color: #2f5d3a; }
.consulta-error { background: #f6e6e5; color: #8d3430; }

@media (max-width: 640px) {
	.consulta { padding: 48px 0 8px; }
	.consulta-fila { flex-direction: column; gap: 0; }
	.consulta-mini { width: 130px; }
}

/* ===== Aparicion y parallax de las fotos de la obra =====
   La entrada es un fundido con desplazamiento: se nota, pero sigue siendo
   tranquila. Ademas la foto se mueve despacio dentro de su marco mientras se
   scrollea (parallax), asi la pagina no queda estatica.
   La clase la pone el JS al entrar en pantalla; sin JS las fotos se ven igual. */

.js .obra-galeria-item {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.js .obra-galeria-item.visible {
	opacity: 1;
	transform: none;
}

/* El marco recorta, y la foto va un poco mas grande adentro: ese excedente es
   el que se aprovecha para moverla con el scroll sin que queden bordes vacios. */
/* el borde pasa al marco: la foto va escalada y recortada, asi que su propio
   borde quedaria afuera y no se veria */
.js .obra-galeria-item {
	overflow: hidden;
	background: var(--bg-panel);
	border: 1px solid var(--border);
}

.js .obra-galeria-item img { border: 0; }

.js .obra-galeria-item img {
	transform: scale(1.14);
	will-change: transform;
}

/* El hover no toca transform, que lo maneja el parallax desde JS */
.obra-galeria-item img { transition: filter .5s ease; }
.obra-galeria-item:hover img { filter: brightness(1.04); }

/* Si la persona pidio menos movimiento en su sistema, no animamos nada */
@media (prefers-reduced-motion: reduce) {
	.js .obra-galeria-item,
	.js .obra-galeria-item.visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.js .obra-galeria-item img,
	.obra-galeria-item:hover img {
		transform: none;
		transition: none;
		filter: none;
	}
}


/* ===== Pagina 404 ===== */

.error404 {
	max-width: 640px;
	padding: 88px 0 64px;
}

.error404 h1 {
	font-family: var(--font-display);
	font-size: clamp(34px, 5vw, 56px);
	text-transform: uppercase;
	margin: 10px 0 16px;
	line-height: 1.02;
}

.error404-texto {
	font-size: 18px;
	line-height: 1.7;
	color: var(--muted);
	margin: 0 0 26px;
	text-wrap: pretty;
}

.error404-acciones {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.error404-acciones a {
	color: var(--text);
	text-decoration: none;
	border-bottom: 2px solid var(--border);
	padding-bottom: 1px;
}

.error404-acciones a:hover {
	border-bottom-color: var(--serie-color);
}

@media (max-width: 640px) {
	.error404 { padding: 56px 0 44px; }
	.error404-texto { font-size: 17px; }
}

/* ===== Materiales y buscador ===== */

.materiales-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.material-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	text-decoration: none;
	color: var(--text);
	font-size: 15px;
	font-weight: 600;
	padding: 9px 15px;
	border: 1px solid var(--border);
	background: var(--bg-panel);
	transition: border-color .2s ease, background-color .2s ease;
}

.material-chip:hover {
	border-color: var(--text);
}

/* el numero de obras, en chico y apagado: acompaña, no compite */
.material-chip span {
	font-size: 12px;
	font-weight: 400;
	color: var(--muted);
}

.materiales-otros {
	padding: 48px 0 72px;
	border-top: 1px solid var(--border);
}

/* Etiquetas de material dentro de la ficha tecnica de la obra */
.obra-materiales {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.obra-material-tag {
	font-size: 13px;
	text-decoration: none;
	color: var(--text);
	border-bottom: 1px solid var(--border);
}

.obra-material-tag:hover { border-bottom-color: var(--text); }

/* Bloque propio del buscador en la home. Va centrado y separado del resto: antes
   colgaba abajo de los materiales y parecia parte de esa lista. */
.buscador-bloque {
	padding: 64px 0;
	background: var(--bg-panel);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	text-align: center;
}

.buscador-titulo {
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 36px);
	text-transform: uppercase;
	margin: 0;
}

.buscador-ayuda {
	color: var(--muted);
	font-size: 15px;
	margin: 10px 0 24px;
}

.buscador-bloque .buscador {
	margin: 0 auto;
	max-width: 560px;
}

.buscador {
	display: flex;
	gap: 8px;
	margin-top: 24px;
	max-width: 520px;
}

.buscador--pagina {
	margin: 0 0 32px;
	max-width: 640px;
}

.buscador input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid var(--border);
	background: var(--bg-panel);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--text);
}

.buscador input[type="search"]:focus {
	outline: none;
	border-color: var(--text);
}

.buscador button {
	padding: 11px 20px;
	border: 1px solid var(--dark);
	background: var(--dark);
	color: #fff;
	font-family: var(--font-display);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .06em;
	cursor: pointer;
}

.buscador button:hover { opacity: .85; }

/* Encabezado de las paginas de listado (material, buscador) */
.listado-header {
	padding: 56px 0 28px;
}

.listado-header h1 {
	font-family: var(--font-display);
	font-size: clamp(38px, 6vw, 64px);
	text-transform: uppercase;
	margin: 6px 0 0;
	line-height: 1;
}

.listado-meta {
	color: var(--muted);
	font-size: 15px;
	margin: 12px 0 28px;
}

/* Para texto que tiene que leer un lector de pantalla pero no ocupar lugar */
.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	.buscador { flex-direction: column; }
	.listado-header { padding: 40px 0 20px; }
	.buscador-bloque { padding: 48px 0; }
}