/* =========================================================
   ILWA — design system
   Tokens first: when the client's brand arrives, change here.
   ========================================================= */

/* ---- Fonts (BDO Grotesk, self-hosted — la tipografía elegida por la clienta) ---- */
@font-face {
	font-family: 'BDO Grotesk';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/bdogrotesk-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'BDO Grotesk';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/bdogrotesk-demibold.woff2') format('woff2');
}
@font-face {
	font-family: 'BDO Grotesk';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/bdogrotesk-extrabold.woff2') format('woff2');
}

/* Fallback with adjusted metrics: minimises CLS while the font loads. */
@font-face {
	font-family: 'BDO Grotesk Fallback';
	src: local('Arial');
	size-adjust: 102%;
	ascent-override: 92%;
	descent-override: 23%;
	line-gap-override: 0%;
}

/* ---- Tokens (paleta de la clienta: rojo #CD5C5C, crema #F4E7D7, gris #323232) ---- */
:root {
	--paper: #F4E7D7;
	--paper-deep: #ECDCC4;
	--ink: #323232;
	--ink-soft: #6B6156;
	--line: #DCC9AE;
	/* Rojo de marca en dos voces: --brand para texto grande y gráficos
	   (3.3:1), --clay para texto pequeño y enlaces (4.8:1 AA). */
	--brand: #CD5C5C;
	--clay: #A84444;
	/* Cuarto color de marca (PPT v1): solo en dosis mínimas. */
	--sage: #67736A;

	--font: 'BDO Grotesk', 'BDO Grotesk Fallback', system-ui, sans-serif;

	--text-sm: 0.8125rem;
	--text-base: 1.0625rem;
	--text-lg: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	/* BDO Grotesk ExtraBold es más ancha que una condensada: escala
	   ajustada para que «INTERIORISMO» quepa entero en 390px. */
	--text-display: clamp(2.4rem, 1rem + 6vw, 7rem);

	--space: clamp(1.25rem, 2.5vw, 2.5rem);
	--space-lg: clamp(3rem, 7vw, 7rem);
	--wrap: 1360px;
}

@media (prefers-contrast: more) {
	:root {
		--ink-soft: #453F37;
		--line: #8F8474;
	}
}

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--clay); }

:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
	border-radius: 0;
}

::selection { background: var(--brand); color: #fff; }

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -100vw;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--paper);
}
.skip-link:focus {
	left: 0;
	color: var(--paper);
}

.flow > * + * { margin-block-start: 1em; }
.flow h2, .flow h3 {
	font-weight: 600;

	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 1rem;
	margin-block-start: 2em;
}

/* ---- Buttons & links ---- */
.ilwa-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.ilwa-btn:hover { background: var(--clay); border-color: var(--clay); color: #fff; }

.ilwa-btn--solid { background: var(--clay); border-color: var(--clay); color: #fff; }
.ilwa-btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.text-link {
	color: var(--clay);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-sm);

}

/* ---- Header ---- */
.site-header {
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--paper) 92%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
/* ---- Barra de carga (la línea roja de marca, ahora con función) ----
   Crece sola por CSS desde el primer pintado hasta el 85 %; al evento
   load, JS la completa y la funde. Sin JS, se funde igual a los 4 s.
   Con reduced-motion no aparece. */
.loadbar {
	position: fixed;
	top: 0; left: 0;
	height: 3px;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left;
	background: var(--brand);
	z-index: 80;
	pointer-events: none;
	animation: ilwa-loadbar-grow 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards, ilwa-loadbar-fade 0.4s ease 4s forwards;
}
.loadbar.is-done {
	animation: none;
	transform: scaleX(1);
	opacity: 0;
	transition: transform 0.25s ease-out, opacity 0.4s ease 0.3s;
}
@keyframes ilwa-loadbar-grow { from { transform: scaleX(0); } to { transform: scaleX(0.85); } }
@keyframes ilwa-loadbar-fade { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .loadbar { display: none; } }

.site-brand__logo { display: block; height: 58px; width: auto; }
.site-footer__logo { display: block; height: 45px; width: auto; margin-bottom: 0.5rem; }
.site-header__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 1.1rem var(--space);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.site-brand { text-decoration: none; display: flex; flex-direction: column; }
.site-brand__name {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 1.05rem;
}
.site-brand__claim {
	font-size: var(--text-sm);
	color: var(--ink-soft);

	letter-spacing: 0.04em;
}
.site-nav__list {
	list-style: none;
	display: flex;
	gap: clamp(1rem, 3vw, 2.5rem);
	margin: 0;
	padding: 0;
}
.site-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.95rem;
	font-weight: 600;
}
.site-nav__list a:hover,
.site-nav__list .current-menu-item a { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--brand); text-decoration-thickness: 2px; color: var(--clay); }

.site-header__tools {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
/* Above the mobile overlay menu (a positioned sibling inside the header). */
.site-brand,
.site-header__tools { position: relative; z-index: 60; }

/* Hamburger: mobile only, morphs into an X when open. */
/* Círculo rojo de marca con las tres rayas dentro (propuesta de la
   clienta + pista de que es un menú). Abierto: círculo gris con la X. */
.nav-toggle {
	display: none;
	position: relative;
	align-items: center;
	justify-content: center;
	width: 44px;  /* área táctil completa… */
	height: 44px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: #fff;
}
/* …y el círculo dibujado algo más pequeño dentro. */
.nav-toggle::before {
	content: '';
	position: absolute;
	inset: 4px;
	border-radius: 50%;
	background: var(--brand);
	transition: background 0.25s ease;
}
.nav-toggle__bars {
	position: relative;
	display: block;
	width: 16px;
	height: 2px;
	background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
	width: 16px;
	height: 2px;
	background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
@media (prefers-reduced-motion: no-preference) {
	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after { transition: transform 0.25s ease, background 0.25s ease, top 0.25s ease; }
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 767px) {
	/* One compact row: brand left, language + burger right. */
	.site-header__inner {
		flex-wrap: nowrap;
		padding-block: 0.5rem;
	}
	.site-brand__claim { display: none; }
	.site-brand__name { font-size: 0.95rem; white-space: nowrap; }
	.site-header__tools { gap: 1.1rem; flex-shrink: 0; }
	.nav-toggle { display: inline-flex; }

	/* Full-screen overlay menu under the bar, oversized editorial type. */
	.site-nav {
		position: fixed;
		inset: 0;
		z-index: 40; /* under the sticky header (50): brand + X stay usable */
		display: none;
		background: var(--clay);
		padding: 7rem var(--space) var(--space);
		overflow-y: auto;
	}
	.site-nav.is-open { display: block; }
	.site-nav__list {
		flex-direction: column;
		gap: 0;
	}
	.site-nav__list a {
		width: 100%;
		min-height: 64px;
		color: var(--paper);
		font-size: clamp(2rem, 9vw, 2.75rem);
		font-weight: 800;

		letter-spacing: 0;
	}
	.site-nav__list a:hover,
	.site-nav__list .current-menu-item a { color: #fff; text-decoration-color: #fff; }
	.site-nav :focus-visible { outline-color: var(--paper); }

	/* When the menu is open the bar sits on ink: flip it dark. The blur
	   must go too — backdrop-filter turns the header into the containing
	   block of the fixed overlay and would clip it to the bar. */
	html.nav-open .site-header {
		background: var(--clay);
		border-bottom-color: rgb(245 242 236 / 0.2);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
	html.nav-open .site-brand__name,
	html.nav-open .nav-toggle { color: #fff; }
	html.nav-open .nav-toggle::before { background: var(--ink); }
	html.nav-open .lang-switch a { color: rgb(245 242 236 / 0.7); }
	html.nav-open .lang-switch .current-lang a { color: var(--paper); }
	html.nav-open { overflow: hidden; }

	@media (prefers-reduced-motion: no-preference) {
		.site-nav.is-open .site-nav__list li {
			animation: ilwa-rise 0.45s ease both;
		}
		.site-nav.is-open .site-nav__list li:nth-child(2) { animation-delay: 70ms; }
		.site-nav.is-open .site-nav__list li:nth-child(3) { animation-delay: 140ms; }
		.site-nav.is-open .site-nav__list li:nth-child(4) { animation-delay: 210ms; }
		.site-nav.is-open .site-nav__list li:nth-child(5) { animation-delay: 280ms; }
	}
}
@media (min-width: 768px) {
	.site-nav { order: 2; }
	.site-header__tools { order: 3; }
}

.lang-switch {
	list-style: none;
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}
.lang-switch a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--text-sm);
	color: var(--ink-soft);
}
.lang-switch .current-lang a {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-color: var(--clay);
}

/* ---- Sections shared ---- */
main { display: block; }
.home > section,
.projects-archive,
.page-simple {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: var(--space-lg) var(--space);
}
/* Las secciones de la home se separan por color de fondo, no por líneas
   (petición de la clienta). */
.home > section { position: relative; }

/* Bloque 03 en el crema de la paleta, título en gris oscuro. */
.home > section.featured {
	max-width: none;
	padding-inline: max(var(--space), calc((100% - var(--wrap)) / 2));
	background: #F4E7D7;
}
.featured .section-title { color: var(--ink); }
.featured .project-card__media { border-color: #DCC9AE; }

.section-title {
	display: flex;
	align-items: baseline;
	margin: 0 0 clamp(1.5rem, 4vw, 3rem);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--clay);

	text-transform: uppercase;
	letter-spacing: 0.08em;
}
/* Margin column: 2.5rem number + 1rem gap = the 3.5rem content indent. */
/* Número más grande que el título (petición de la clienta): 1.5× en
   ExtraBold, dentro de la misma columna de 2.5rem. */
.section-num {
	flex: 0 0 2.5rem;
	margin-right: 1rem;
	font-size: 1.5em;
	line-height: 1;
	font-weight: 800;
	color: var(--clay);
	letter-spacing: 0.02em;
}

/* ---- Hero ---- */
.hero__text { margin-bottom: var(--space); }

/* Full-bleed cinematic hero: video/photo cover + dimming gradient,
   text and menu float above. */
.home > section.hero--full {
	max-width: none;
	position: relative;
	min-height: calc(100svh - 5.5rem);
	display: flex;
	align-items: flex-end;
	padding-inline: max(var(--space), calc((100% - var(--wrap)) / 2));
	color: var(--paper);
	border-bottom: 0;
}
.hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.hero__bg img,
.hero__bg video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* El degradado sube más oscuro: el kicker se apoya en él aunque la
   imagen sea clara en esa zona. */
/* Slideshow ambiental: fotos apiladas que se funden lentamente.
   Sin controles — es respiración de fondo, no un carrusel. */
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
	.hero__slide { transition: none; }
}

/* Tinte neutro (gris) por defecto; Personalizar → "Tinte de las fotos"
   recupera el rojo de marca. */
.hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(24 24 24 / 0.9) 0%, rgb(45 45 45 / 0.62) 45%, rgb(90 90 90 / 0.3) 75%, rgb(40 40 40 / 0.35) 100%);
}
body.ilwa-tint-red .hero__bg::after {
	background: linear-gradient(to top, rgb(84 28 28 / 0.9) 0%, rgb(120 45 45 / 0.62) 45%, rgb(205 92 92 / 0.3) 75%, rgb(110 40 40 / 0.35) 100%);
}
.hero--full .hero__text {
	position: relative;
	width: 100%;
	margin-bottom: 0;
}
.hero--full .hero__kicker { color: #fff; }
.hero--full :focus-visible { outline-color: var(--paper); }

.hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	margin-top: 0.5rem;
	border: 1px solid currentColor;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-sm);

}
/* Al hover, el borde toma el color del fondo: cambio de color limpio,
   sin marco (petición de la clienta). */
.hero--full .hero__cta:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.hero:not(.hero--full) .hero__cta:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- Full-bleed photo section (Estudio) ---- */
.home > section.about--bg {
	max-width: none;
	position: relative;
	padding-inline: max(var(--space), calc((100% - var(--wrap)) / 2));
	color: var(--paper);
}
.section-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.section-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Bloque 01 = zona roja (código de color: botón rojo → sección roja). */
.section-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(84 28 28 / 0.85);
}
.about--bg .section-title,
.about--bg .about__content { position: relative; }
.about--bg .section-num { color: rgb(245 242 236 / 0.7); }
.about--bg a { color: var(--paper); }
.about--bg :focus-visible { outline-color: var(--paper); }
/* El kicker anuncia la marca: peso real (el 500 anterior era sintetizado)
   y tamaño con presencia, sin robarle nada al titular. */
.hero__kicker {
	display: block;
	margin: 0 0 1rem;
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: clamp(0.95rem, 1.6vw, 1.15rem);
	font-weight: 800;
}
.hero__title {
	margin: 0 0 2rem;
	font-size: var(--text-display);
	line-height: 0.95;
	font-weight: 800;

	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.hero__video-toggle {
	/* Bottom-left: the WhatsApp FAB owns the bottom-right corner. */
	position: absolute;
	left: max(1rem, env(safe-area-inset-left));
	bottom: 1rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ink);
	color: var(--paper);
	border: 1px solid var(--ink);
	cursor: pointer;
}
.hero__video-toggle:hover { background: var(--clay); border-color: var(--clay); }
.hero__video-toggle .icon-play { display: none; }
.hero__video-toggle[aria-pressed='true'] .icon-pause { display: none; }
.hero__video-toggle[aria-pressed='true'] .icon-play { display: block; }

/* ---- About ---- */
.about__content {
	max-width: 68ch;
	padding-left: 3.5rem;
}
.about__content p:first-child { font-size: var(--text-lg); line-height: 1.35; font-weight: 400; }

/* ---- Project grids ---- */
.featured__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
}
.project-grid {
	display: grid;
	gap: var(--space);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
/* Portadas de categoría en la home: 5 en una fila en escritorio, 3 en tableta. */
@media (min-width: 768px) { .project-grid--featured { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .project-grid--featured { grid-template-columns: repeat(5, 1fr); gap: calc(var(--space) / 1.5); } }
.project-grid--featured .project-card__meta { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.9rem 1rem; }
.project-grid--featured .project-card__num { font-size: 1.25em; }
.project-grid--featured .project-card__cat { margin-left: 0; font-size: 0.75rem; }

/* Cards read as image tiles: the meta lives on the photo, over a
   bottom gradient (the House of Honey treatment). */
.project-card__link { display: block; position: relative; text-decoration: none; }
.project-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--paper-deep);
	/* Uniform cards: same ratio everywhere; the full shots live on the
	   project page, where ratios stay natural. */
	aspect-ratio: 4 / 5;
}
/* Portadas en gris que recuperan el color al pasar el ratón o al
   recibir foco (petición de la clienta, estilo Atelier Zero). */
.project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1);
	transition: transform 0.6s ease, filter 0.5s ease;
}
.project-card__link:hover .project-card__media img,
.project-card__link:focus-visible .project-card__media img { filter: grayscale(0); }
@media (prefers-reduced-motion: reduce) { .project-card__media img { transition: none; } }
.project-card__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(23 20 16 / 0.72) 0%, rgb(23 20 16 / 0.25) 32%, rgb(23 20 16 / 0) 55%);
}
.project-card__meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 1rem 1.1rem;
	color: var(--paper);
}
/* Número más grande que el título de la tarjeta (petición de la clienta). */
.project-card__num { color: rgb(245 242 236 / 0.85); font-size: 1.5em; line-height: 1; font-weight: 800; letter-spacing: 0.02em; }
.project-card__title { font-weight: 600; font-size: var(--text-base); margin: 0; color: var(--paper); }
.project-card__cat { color: rgb(245 242 236 / 0.8); font-size: var(--text-sm); margin-left: auto; }

/* Hover: slow zoom + an arrow answers the cursor. */
.project-card__link::after {
	content: '→';
	position: absolute;
	top: 0.9rem;
	right: 1rem;
	z-index: 1;
	color: var(--paper);
	font-size: 1.35rem;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
}
@media (prefers-reduced-motion: no-preference) {
	.project-card__link:hover .project-card__media img,
	.project-card__link:focus-visible .project-card__media img { transform: scale(1.04); }
}
.project-card__link:hover::after,
.project-card__link:focus-visible::after {
	opacity: 1;
	transform: none;
}
.project-card.is-hidden { display: none; }

/* ---- Filters ---- */
.archive-head__title {
	color: var(--brand);
	font-size: var(--text-display);
	line-height: 0.95;
	font-weight: 800;

	text-transform: uppercase;
	margin: 0 0 0.75rem;
}
.archive-head__intro {
	max-width: 52ch;
	color: var(--ink-soft);
	font-size: var(--text-lg);
	line-height: 1.4;
	margin: 0 0 2rem;
}
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.75rem;
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
	border-bottom: 1px solid var(--line);
	padding-bottom: 1rem;
}
.filters__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-sm);
	font-weight: 600;

	color: var(--ink-soft);
}
.filters__item:hover { color: var(--clay); }
.filters__item.is-active {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 8px;
	text-decoration-color: var(--clay);
}
.filters__count { margin-left: 0.35rem; color: var(--ink-soft); }
.archive-empty { color: var(--ink-soft); }

/* ---- Single project ---- */
.project { padding-bottom: var(--space-lg); }

.breadcrumb {
	display: flex;
	gap: 0.5rem;
	font-size: var(--text-sm);
	color: var(--ink-soft);
	margin-bottom: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;

}

.project-hero {
	position: relative;
	max-width: var(--wrap);
	margin-inline: auto;
	/* Aire entre la metadata y la foto de portada. */
	padding: var(--space-lg) var(--space) var(--space);
}
.project-hero--media {
	max-width: none;
	min-height: 72svh;
	display: flex;
	align-items: flex-end;
	padding: var(--space-lg) max(var(--space), calc((100% - var(--wrap)) / 2));
	color: var(--paper);
}
.project-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.project-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.project-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(84 28 28 / 0.88) 0%, rgb(205 92 92 / 0.22) 60%, rgb(110 40 40 / 0.28) 100%);
}
.project-hero__text { position: relative; width: 100%; }
.project-hero--media .breadcrumb { color: rgb(245 242 236 / 0.8); }
.project-hero--media :focus-visible { outline-color: var(--paper); }

/* Menos peso que el título de Proyectos: es un subapartado (clienta 01-09). */
.project__title {
	font-size: clamp(1.9rem, 1rem + 3.4vw, 3.6rem);
	line-height: 0.98;
	font-weight: 800;

	text-transform: uppercase;
	margin: 0;
}
/* Metadata: cada dato lleva su punto detrás (nunca huérfano al inicio
   de línea en móvil) y todos los espacios miden lo mismo. */
.project__meta {
	display: flex;
	gap: 0.4rem 0;
	align-items: center;
	flex-wrap: wrap;
	margin: 1.25rem 0 0;
}
.project__meta > * { white-space: nowrap; }
.project__cat {
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
	text-decoration: none;
	border: 1px solid var(--line);
	padding: 0.35rem 0.8rem;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.project__cat:hover { border-color: var(--clay); color: var(--clay); }
.project-hero--media .project__cat {
	color: var(--paper);
	border-color: rgb(245 242 236 / 0.5);
}
.project-hero--media .project__cat:hover { border-color: var(--paper); color: var(--paper); }
.project__year,
.project__fact {
	font-size: var(--text-sm);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.8;
}
.project__meta > :not(:last-child)::after { content: '·'; margin: 0 0.45em; opacity: 0.6; }

/* Bloques del case study: solo ocupan el espacio que necesitan, así el
   proyecto mínimo (solo foto) no deja desiertos en blanco. */
.project__block {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: calc(var(--space-lg) / 2) var(--space);
}
.project__heading {
	margin: 0 0 1.25rem;
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--clay);
}
/* 68ch ≈ 560–600px: línea cómoda sin perder aire editorial. */
.project__desc { max-width: 68ch; }
/* El primer párrafo entra en grande (entradilla). Desde el editor se puede
   cambiar: «Grande» (.is-lead) en cualquier párrafo, «Normal» (.is-normal)
   para que el primero no lo sea. */
.project__desc p:first-child:not(.is-normal),
.project__desc p.is-lead {
	font-size: var(--text-lg);
	line-height: 1.4;
}

/* Ritmo editorial: "La solución" se alinea al margen derecho del
   contenido (el mismo de "ES EN" en la cabecera) y su texto se
   justifica a la derecha (petición de la clienta 01-09). */
@media (min-width: 1000px) {
	.project__block--offset > .project__heading,
	.project__block--offset > .project__desc {
		max-width: 68ch;
		margin-left: auto;
		margin-right: 0;
		text-align: right;
	}
}

/* "Materialidad y luz": texto editorial a la izquierda, datos cortos
   a la derecha. En móvil, una sola columna. */
@media (min-width: 1000px) {
	.project__block--material {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, 320px);
		column-gap: var(--space-lg);
	}
	.project__block--material > .project__heading { grid-column: 1 / -1; }
	.project__block--material > .project-facts {
		grid-template-columns: 1fr;
		margin-top: 0.35rem;
		align-content: start;
	}
}

/* Ficha técnica: labels pequeños, valores con cuerpo, línea fina arriba. */
.project__block--sheet {
	border-top: 1px solid var(--line);
	margin-top: calc(var(--space-lg) / 2);
}
/* Columnas de igual ancho y misma separación entre ellas. */
.project-facts--sheet { gap: 1.75rem var(--space); }
@media (min-width: 1000px) { .project-facts--sheet > div { min-width: 0; } }
.project-facts--sheet dd { font-size: var(--text-base); font-weight: 600; }

/* La portada, protagonista: ancho de contenido, sin recorte. */
.project__cover {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: 0 var(--space);
}
.project__cover img {
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
}

/* Datos pequeños (materiales, iluminación…) y ficha técnica. */
.project-facts {
	margin: 1.75rem 0 0;
	display: grid;
	gap: 1.25rem;
	max-width: 60ch;
}
@media (min-width: 700px) { .project-facts { grid-template-columns: repeat(2, 1fr); } }
.project-facts--sheet { max-width: none; }
@media (min-width: 1000px) {
	/* Cada dato ocupa lo que necesita y la separación entre uno y el
	   siguiente es siempre la misma (petición de la clienta 01-09):
	   con columnas de rejilla el hueco variaba según lo largo del texto. */
	.project-facts--flex {
		display: flex;
		flex-wrap: wrap;
		column-gap: 3rem;
		row-gap: 1.75rem;
	}
	.project-facts--flex > div { flex: 0 0 auto; max-width: 22rem; }
}
.project-facts dt {
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink-soft);
	margin-bottom: 0.25rem;
}
.project-facts dd { margin: 0; }

/* Línea de contacto discreta: portfolio primero, venta después. */
/* La invitación vive en el centro del bloque de navegación. */
/* Invitación con cuerpo, alineada al margen del contenido (clienta 01-09). */
.project__cta {
	max-width: var(--wrap);
	margin: 0 auto;
	padding: calc(var(--space-lg) / 2) var(--space) 0;
	font-size: var(--text-lg);
	line-height: 1.3;
	color: var(--ink);
}
.project__cta .text-link { margin-left: 0.75rem; font-size: inherit; }

/* Móvil: anterior y siguiente lado a lado; "todos los proyectos" arriba. */
@media (max-width: 767px) {
	.project-nav { grid-template-columns: 1fr 1fr; column-gap: var(--space); align-items: start; }
	.project-nav > .project-nav__all { grid-column: 1 / -1; grid-row: 1; }
	.project-nav__card--prev { grid-column: 1; grid-row: 2; }
	.project-nav__card--next { grid-column: 2; grid-row: 2; text-align: left; justify-self: stretch; }
	.project-nav__card--next img { margin-left: 0; }
	.project-nav__card { max-width: none; }
	.project-nav__card img { width: 100%; }
}

/* Gallery rhythm: one full-width image, then a pair, and repeat. */
.project__gallery {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--space) calc(var(--space-lg) / 2);
	display: grid;
	gap: var(--space);
	grid-template-columns: repeat(2, 1fr);
}
.project__figure { margin: 0; grid-column: span 2; }
.project__figure img { width: 100%; border: 1px solid var(--line); }
@media (min-width: 768px) {
	.project__figure { grid-column: span 1; }
	.project__figure:nth-child(3n + 1) { grid-column: span 2; }
	/* An orphan half (odd count) widens to full row instead of leaving a gap. */
	.project__figure:nth-child(3n + 2):last-child { grid-column: span 2; }
	/* Paired shots share a ratio so the row reads as one gesture. */
	.project__figure:not(:nth-child(3n + 1)):not(:last-child) img,
	.project__figure:nth-child(3n):last-child img {
		aspect-ratio: 4 / 5;
		height: 100%;
		object-fit: cover;
	}
	/* Exactamente dos fotos → lado a lado, misma proporción. */
	.project__gallery:has(> :nth-child(2):last-child) > .project__figure { grid-column: span 1; }
	.project__gallery:has(> :nth-child(2):last-child) > .project__figure img {
		aspect-ratio: 4 / 5;
		height: 100%;
		object-fit: cover;
	}
	/* Modificador explícito de ancho completo (foto intercalada). */
	.project__figure--full,
	.project__gallery > .project__figure--full { grid-column: span 2; }
	/* Sin `aspect-ratio: auto`: eso borra la proporción real de la foto (la de sus atributos width/height) y, con la carga diferida de WordPress, el navegador la estira a un tamaño provisional. */
	.project__figure--full img { height: auto; object-fit: initial; }
	/* La foto detalle cierra contenida y hacia la derecha. */
	.project__gallery--detail > .project__figure {
		grid-column: 2;
		max-width: 480px;
		justify-self: end;
	}
	.project__gallery--detail > .project__figure img { height: auto; object-fit: initial; }
}
.project__caption {
	font-size: var(--text-sm);
	color: var(--ink-soft);
	padding-top: 0.5rem;
}

/* Prev/next as visual cards. */
/* Anterior a la izquierda, siguiente a la derecha, "todos" en medio.
   Miniaturas contenidas: la navegación no compite con el proyecto. */
.project-nav {
	max-width: var(--wrap);
	margin: var(--space) auto 0;
	padding: var(--space) var(--space) 0;
	border-top: 1px solid var(--line);
	display: grid;
	gap: var(--space);
}
/* "Todos los proyectos" encima de la miniatura de "anterior". */
.project-nav > .project-nav__all { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) {
	.project-nav { grid-template-columns: 1fr 1fr; align-items: start; row-gap: 0.75rem; }
	.project-nav > .project-nav__all { grid-column: 1; grid-row: 1; justify-self: start; }
	.project-nav__card--prev { grid-column: 1; grid-row: 2; }
	.project-nav__card--next { grid-column: 2; grid-row: 2; justify-self: end; text-align: right; }
	.project-nav__card--next img { margin-left: auto; }
}
.project-nav__card { display: block; text-decoration: none; max-width: 260px; }
.project-nav__card img {
	display: block;
	width: 220px;
	max-width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid var(--line);
}
.project-nav__label {
	display: block;
	margin-top: 0.6rem;
	font-size: var(--text-sm);
	color: var(--ink-soft);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.project-nav__title { font-weight: 600; }

/* ---- Reviews ---- */
.reviews { background: var(--clay); color: var(--paper); }
.reviews .section-title { color: var(--paper); }
.reviews .section-num { color: rgb(244 231 215 / 0.7); }
.reviews :focus-visible { outline-color: var(--paper); }
.reviews__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 3.5rem;
	display: grid;
	gap: var(--space);
}
/* Una reseña protagonista a lo ancho, el resto secundarias: un
   testimonio necesita aire para parecer real e importante. */
/* La protagonista también en móvil (la clienta lo pidió igual que en web). */
.reviews__list > .review:first-child .review__quote {
	border: 0;
	padding: 0;
	max-width: 30ch;
	font-size: clamp(1.35rem, 2.6vw, 1.9rem);
	line-height: 1.35;
	font-weight: 600;
}
.reviews__list > .review:first-child .review__author { font-size: var(--text-sm); font-weight: 400; }
@media (min-width: 768px) {
	.reviews__list { grid-template-columns: repeat(2, 1fr); }
	.reviews__list > .review:first-child { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
	/* Las secundarias en fila: con 4 reseñas queda 1 grande + 3. */
	.reviews__list { grid-template-columns: repeat(3, 1fr); }
}
.review__quote {
	margin: 0;
	border: 1px solid rgb(244 231 215 / 0.45);
	background: transparent;
	color: var(--paper);
	padding: 1.5rem;
	height: 100%;
}
.review__quote p { margin: 0 0 1rem; }
.review__author {
	font-style: normal;
	font-weight: 600;

	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: var(--text-sm);
}
.review__author::before { content: '— '; color: var(--paper); }

/* ---- Contact ---- */
/* Bloque de contacto editorial: pregunta grande, una línea de contexto
   y las dos vías directas antes del formulario. */
.contact__headline {
	margin: 0 0 1rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(1.9rem, 4vw, 3.2rem);
	line-height: 1.1;
}
.contact__lead {
	margin: 0 0 2rem;
	max-width: 34ch;
	font-size: var(--text-lg);
	line-height: 1.45;
	color: var(--ink-soft);
}
.contact__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.contact__cols {
	display: grid;
	gap: var(--space-lg);
	padding-left: 3.5rem;
}
@media (min-width: 900px) { .contact__cols { grid-template-columns: 1fr 1.2fr; } }

.contact-form { display: grid; gap: 1.75rem; }
.contact-form__field { display: grid; gap: 0.55rem; }
/* Formulario de líneas (petición de la clienta, estilo Moreno Muñoz):
   etiquetas en gris oscuro, campos sin caja, solo la raya inferior.
   El rojo queda para el título, WhatsApp y Enviar. */
.contact-form__field label {
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ink);
}
.contact-form__field input[type='text'],
.contact-form__field input[type='email'],
.contact-form__field input[type='tel'],
.contact-form__field textarea {
	font: inherit;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--ink);
	padding: 0.55rem 0;
	min-height: 44px;
	border-radius: 0;
	/* Los inputs tienen ancho intrínseco (size=20): en móvil desbordaban
	   la columna en algunos navegadores (DuckDuckGo). */
	width: 100%;
	min-width: 0;
	max-width: 100%;
}
.contact-form, .contact__cols > * { min-width: 0; }
.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
	outline: none;
	border-bottom-color: var(--clay);
	box-shadow: 0 1px 0 var(--clay);
}
.contact-form__field textarea { resize: vertical; }
.contact-form__field--check {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
}
.contact-form__field--check input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--clay); }
/* Campo trampa anti-spam: oculto con la técnica de recorte (left:-100vw
   asomaba en Firefox Android), sin display:none para que los bots lo vean. */
.contact-form__hp {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
}
.contact-form__status { border: 1px solid var(--ink); padding: 0.75rem 1rem; margin: 0; font-weight: 500; }
.contact-form__status--ok { border-color: #2E5E3A; color: #2E5E3A; }
.contact-form__status--error { border-color: var(--clay); color: var(--clay); }

/* ---- Marquesina de marca (frases que van pasando, estilo Moreno Muñoz) ---- */
.marquee {
	overflow: hidden;
	background: var(--brand);
	color: #fff;
	padding: 1.1rem 0;
}
.marquee__track {
	display: flex;
	width: max-content;
	gap: 3rem;
	padding-left: 3rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: clamp(0.95rem, 1.5vw, 1.2rem);
	white-space: nowrap;
}
.marquee__item::after { content: '·'; margin-left: 3rem; opacity: 0.6; }
@media (prefers-reduced-motion: no-preference) {
	/* Dos copias del contenido: al llegar al 50 % el bucle reinicia sin salto. */
	.marquee__track { animation: ilwa-marquee 32s linear infinite; }
	@keyframes ilwa-marquee { to { transform: translateX(-50%); } }
}

/* ---- Footer: crema, texto oscuro, lo justo (sin dos rojos seguidos) ---- */
.site-footer { background: #F4E7D7; color: var(--ink); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--clay); }
.site-footer__inner {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: calc(var(--space-lg) / 1.5) var(--space);
	display: grid;
	gap: var(--space);
	align-items: start;
}
/* Tres bloques alineados con los márgenes de la cabecera: copyright a
   la izquierda, correo y redes en el centro, legales a la derecha
   (petición de la clienta 01-09). */
@media (min-width: 768px) {
	.site-footer__inner { grid-template-columns: repeat(3, 1fr); align-items: start; }
	.site-footer__inner > .site-footer__col:not(.site-footer__legal) { justify-self: center; text-align: center; }
	.site-footer__inner > .site-footer__col:not(.site-footer__legal) .social-list { justify-content: center; }
	.site-footer__inner > .site-footer__legal { justify-self: end; text-align: right; }
	.site-footer__legal .legal-list a,
	.site-footer__legal .site-footer__cookies { justify-content: flex-end; }
}
.site-footer__link { display: inline-flex; align-items: center; min-height: 44px; }
.social-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.social-list a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border: 1px solid var(--ink);
}
.social-list a:hover { background: var(--ink); color: #F4E7D7; }
.legal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.legal-list a, .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-sm); }
.site-footer__copy { font-size: var(--text-sm); margin: 0; min-height: 44px; display: flex; align-items: center; text-transform: lowercase; }

/* ---- WhatsApp FAB (thumb-zone, always visible) ---- */
.whatsapp-fab {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom)); /* misma línea que la galleta */
	z-index: 60;
	/* Redondo y del mismo tamaño que la galleta de cookies (petición de la clienta). */
	width: 44px; height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	color: #fff;
	border: 1px solid var(--brand);
}
.whatsapp-fab svg { width: 20px; height: 20px; }
.whatsapp-fab:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---- Cookie banner ---- */
/* ---- Aviso de cookies: tarjeta en el lenguaje de la web (crema, línea
   fina, etiqueta roja, botones de marca), abajo a la izquierda. ---- */
.ilwa-cookies {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 70;
	max-width: 420px;
	background: #F4E7D7;
	color: var(--ink);
	border: 1px solid var(--ink);
	padding: 1.25rem 1.5rem;
	display: grid;
	gap: 0.75rem;
}
/* display:grid vence al atributo [hidden]: hay que reafirmarlo. */
.ilwa-cookies[hidden] { display: none; }
.ilwa-cookies__label {
	margin: 0;
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--clay);
}
.ilwa-cookies__text { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.ilwa-cookies a { color: var(--ink); }
.ilwa-cookies__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.25rem; }

/* La galleta para reabrir el aviso: espejo del botón de WhatsApp, al
   otro lado. Solo aparece tras haber elegido. */
.ilwa-cookies-reopen {
	position: fixed;
	left: max(1rem, env(safe-area-inset-left));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 65;
	width: 44px; height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: #F4E7D7;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}
.ilwa-cookies-reopen:hover { background: var(--ink); color: #F4E7D7; }
.ilwa-cookies-reopen[hidden] { display: none; }
/* El enlace del pie que también reabre el aviso. */
.site-footer__cookies {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--text-sm);
	color: var(--ink);
	cursor: pointer;
}
.site-footer__cookies:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--clay); }

/* ---- Tablas de las páginas legales: líneas finas, nada de cajas ---- */
main table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: var(--text-sm);
	line-height: 1.5;
}
main th,
main td {
	text-align: left;
	vertical-align: top;
	padding: 0.7rem 0.75rem 0.7rem 0;
	border-bottom: 1px solid var(--line);
}
main th {
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.72rem;
	color: var(--ink-soft);
	border-bottom-color: var(--ink);
}
main td code { font-size: 0.85em; }
@media (max-width: 640px) {
	main table { display: block; overflow-x: auto; }
}

/* ---- Simple pages (legales): índice fijo a la izquierda, columna de
   lectura centrada. La página deja de ser una tira pegada al borde. ---- */
.page-simple__head {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-bottom: calc(var(--space-lg) / 2);
	border-bottom: 1px solid var(--line);
	margin-bottom: calc(var(--space-lg) / 2);
}
.page-simple__title {
	font-size: clamp(2rem, 1rem + 4vw, 4rem);
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
.page-simple__body {
	max-width: var(--wrap);
	margin-inline: auto;
	display: grid;
	/* minmax(0, …) + min-width: 0: que la tabla no ensanche la columna en móvil. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-lg);
	align-items: start;
}
.page-simple__body > * { min-width: 0; }
@media (min-width: 1000px) {
	.page-simple__body { grid-template-columns: 240px minmax(0, 68ch); justify-content: center; column-gap: calc(var(--space-lg) * 1.2); }
	.page-simple__toc { position: sticky; top: calc(87px + 1.5rem); }
}
.page-simple__toc-label {
	margin: 0 0 0.75rem;
	font-size: var(--text-sm);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--clay);
}
.page-simple__toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.page-simple__toc li { counter-increment: toc; }
.page-simple__toc a {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	min-height: 40px;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--line);
	font-size: var(--text-sm);
	color: var(--ink);
	text-decoration: none;
}
.page-simple__toc a::before {
	content: counter(toc, decimal-leading-zero);
	font-weight: 800;
	color: var(--clay);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}
.page-simple__toc a:hover { color: var(--clay); }
.page-simple__content { max-width: 68ch; }
.page-simple__content h2 { scroll-margin-top: calc(87px + 1.5rem); }
.page-simple__content > p:first-child em { color: var(--ink-soft); }
@media (max-width: 999px) {
	/* En móvil el índice va arriba, compacto, en dos columnas si cabe. */
	.page-simple__toc ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: var(--space); }
}

/* ---- Pagination ---- */
.pagination { margin-top: var(--space-lg); }
.pagination .nav-links { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px; min-height: 44px;
	border: 1px solid var(--line);
	text-decoration: none;
	padding-inline: 0.75rem;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- Motion & reveals ---- */
@media (prefers-reduced-motion: no-preference) {
	/* Entrance: the hero settles in on load. */
	.hero__text > * { animation: ilwa-rise 0.7s ease both; }
	.hero__cta { animation-delay: 0.15s; }
	.hero__media { animation: ilwa-fade 0.9s ease both; }

	/* Slow settle-in zoom on the hero image (Ken Burns, one-shot).
	   Long and eased so it reads as depth, not as movement. In the
	   slideshow, each photo re-runs the zoom when it becomes active. */
	.hero--full .hero__bg img {
		animation: ilwa-hero-zoom 8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.hero--full .hero__bg--slides .hero__slide img { animation: none; }
	.hero--full .hero__bg--slides .hero__slide.is-active img {
		animation: ilwa-hero-zoom 5.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	@keyframes ilwa-hero-zoom {
		from { transform: scale(1.08); }
		to { transform: scale(1); }
	}

	/* One-shot reveals: JS adds .js-reveal, IntersectionObserver adds
	   .is-visible on first entry and the element stays put. Without JS
	   nothing is ever hidden. */
	.js-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
	.js-reveal.is-visible { opacity: 1; transform: none; }

	@keyframes ilwa-rise {
		from { opacity: 0; transform: translateY(16px); }
		to { opacity: 1; transform: none; }
	}
	@keyframes ilwa-fade {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- Hero tagline ---- */
.hero__tagline {
	margin: 0 0 1.5rem;
	font-size: var(--text-lg);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.hero--full .hero__tagline { color: rgb(244 231 215 / 0.92); }

/* ---- Dos caminos (particulares / profesionales) ---- */
/* En móvil, bandas a sangre pegadas al hero: nada de cajas flotando
   sobre una franja blanca. Aire generoso antes de la siguiente sección
   para que el rojo de la banda no toque el rojo del bloque 01.
   En escritorio, dos columnas solapadas sobre el hero. */
.home > .paths {
	display: grid;
	/* Mismo aire arriba y abajo de los botones (clienta 01-09). */
	margin-bottom: var(--space);
}
/* Los dos bloques arrancan en el blanco bajo la foto, sin superponerse
   a ella (petición de la clienta 01-09). Misma banda blanca en móvil. */
.home > .paths { margin-top: var(--space); }
@media (min-width: 768px) {
	.home > .paths {
		max-width: var(--wrap);
		margin-inline: auto;
		padding: 0 var(--space);
		gap: var(--space);
		grid-template-columns: 1fr 1fr;
		margin-bottom: var(--space);
	}
}
/* Mismo peso visual en las dos (moodboard aprobado): gris + rojo, macizas.
   Padding editorial: estos dos bloques son la decisión principal de la
   home y respiran como tal. */
.path-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: clamp(2rem, 4.5vw, 3rem) clamp(4rem, 7vw, 5.5rem) clamp(2rem, 4.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
	/* Rojo = particulares (alegre), gris = profesionales (serio). */
	background: var(--clay);
	color: #fff;
	border: 1px solid var(--clay);
	text-decoration: none;
	min-height: 44px;
}
.path-card--alt { background: var(--ink); color: #fff; border-color: var(--ink); }
.path-card__title {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: clamp(1.3rem, 2.6vw, 1.75rem);
	line-height: 1.15;
}
.path-card__sub { color: #fff; font-size: var(--text-sm); }
/* Flecha dentro de un círculo crema (propuesta de la clienta + pista de
   que es un enlace). La flecha toma el color del bloque. */
.path-card svg {
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	box-sizing: content-box;
	width: 18px;
	height: 18px;
	padding: 9px;
	border-radius: 50%;
	background: #F4E7D7;
	color: var(--clay);
	transition: transform 0.3s ease;
}
.path-card--alt svg { color: var(--ink); }
.path-card { transition: background 0.3s ease, border-color 0.3s ease; }
.path-card:hover { background: #A84444; border-color: #A84444; color: #fff; }
.path-card--alt:hover { background: #232323; border-color: #232323; }
.path-card:hover svg { transform: translateY(-50%) translateX(4px); }
@media (prefers-reduced-motion: reduce) { .path-card { transition: none; } }
@media (prefers-reduced-motion: reduce) { .path-card svg { transition: none; } }

/* ---- Sección profesionales ---- */
/* Detalle editorial: el número de sección, enorme y casi invisible,
   conecta este bloque blanco con la personalidad del hero. */
/* Bloque 02 = zona gris oscura (botón gris → sección gris). Serio,
   como pide la clienta para el público profesional. */
.home > section.pro {
	max-width: none;
	padding-inline: max(var(--space), calc((100% - var(--wrap)) / 2));
	background: var(--ink);
	color: var(--paper);
}
.pro .section-title { color: var(--paper); }
.pro .section-num { color: rgb(245 242 236 / 0.7); }
.pro :focus-visible { outline-color: var(--paper); }
.pro .ilwa-btn { border-color: var(--paper); color: var(--paper); }
.pro .ilwa-btn:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Con imagen: render a un lado, texto al otro. Sin imagen, solo texto. */
/* Imagen más grande y sin marco (petición de la clienta 01-09). */
.pro__inner { display: grid; gap: var(--space); align-items: center; }
@media (min-width: 900px) {
	.pro__inner:has(.pro__media) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-lg); }
	.pro__inner .pro__content { padding-left: 0; }
}
.pro__media { margin: 0; }
.pro__media img {
	width: 100%;
	height: auto;
	display: block;
}
.pro__content {
	max-width: 68ch;
	padding-left: 3.5rem;
}
.pro__lead {
	font-size: var(--text-lg);
	line-height: 1.35;
	font-weight: 600;
}
.pro__signature {
	font-weight: 600;
	color: var(--paper);
	border-left: 3px solid var(--brand);
	padding-left: 1rem;
}

/* ---- Botón claro para secciones oscuras ---- */
.ilwa-btn--light {
	border-color: var(--paper);
	color: var(--paper);
}
.ilwa-btn--light:hover { background: var(--paper); color: var(--ink); }

.contact-form__field input::placeholder { color: var(--ink-soft); opacity: 0.6; }

/* ---- Banda de marca (logo sobre rojo, como sus tarjetas) ---- */
/* Sobre fondos oscuros/rojos, los títulos de sección vuelven a crema. */
.about--bg .section-title,
.reviews .section-title { color: var(--paper); }

/* ---- Cuarto color de marca: dosis mínimas ---- */
.details li::before,
.flow ul li::marker { color: var(--sage); }
.contact-form__status--ok { border-color: var(--sage); color: var(--sage); }

/* =========================================================
   Versión de fondo blanco (Personalizar → Fondo de la web).
   No es solo cambiar el papel: sobre blanco el sistema pide
   tres ajustes, los mismos que validamos en el moodboard.
   1) El rojo contrasta mejor (#CD5C5C pasa de 3.3 a 4.0), así
      que el rojo de texto se acerca al de marca: #C05252 (4.6 AA).
   2) Gris secundario neutro: el cálido se ve sucio sobre blanco.
   3) Superficies alternas en gris muy claro, no en crema.
   ========================================================= */
body.ilwa-white {
	--paper: #FFFFFF;
	--paper-deep: #F7F7F7;
	--line: #E3E3E3;
	--ink-soft: #666666;
	--clay: #C05252;
}
/* Los campos del formulario necesitan despegarse del fondo blanco. */

/* ---- Móvil: sin columna de número, todo el ancho para el texto ----
   En pantallas estrechas la sangría de 3.5rem (columna del número de
   sección) desplazaba todo el contenido a la derecha. */
@media (max-width: 767px) {
	.about__content,
	.pro__content,
	.contact__cols,
	.reviews__list { padding-left: 0; }
	.section-num { flex-basis: auto; margin-right: 0.6rem; }
}

/* ---- Móvil: el copyright cierra el pie (petición de la clienta) ---- */
@media (max-width: 767px) {
	.site-footer__copy { order: 3; margin-top: var(--space); }
}

/* ---- Proyectos: índice + una tira horizontal por categoría (modelo
   Library de Atelier Zero, petición de la clienta). Scroll nativo con
   snap; las flechas solo desplazan una tarjeta. ---- */
.cat-index { margin-top: var(--space); padding-top: var(--space); border-top: 1px solid var(--line); }
.cat-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1rem, 3vw, 2.5rem); }
.cat-index a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	min-height: 44px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--ink);
}
.cat-index a:hover { color: var(--clay); }
.cat-index__num { font-weight: 800; color: var(--clay); }

.strip { margin-top: var(--space-lg); scroll-margin-top: calc(87px + 1rem); }
.strip__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); }
.strip__head .section-title { margin-bottom: 1rem; }
.strip__nav { display: flex; gap: 0.5rem; flex-shrink: 0; }
.strip__btn {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--ink);
	border-radius: 50%;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.strip__btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.strip__btn:disabled { opacity: 0.3; cursor: default; }
.strip__track {
	list-style: none;
	margin: 0;
	padding: 0 0 0.5rem;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(80vw, 420px);
	column-gap: var(--space);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__track > li { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .strip__btn { transition: none; } }

.strip--static .strip__nav { display: none; }

/* Móvil: el índice de categorías, uno bajo otro. */
@media (max-width: 767px) {
	.cat-index ol { flex-direction: column; gap: 0; }
	.cat-index a { width: 100%; border-bottom: 1px solid var(--line); }
	.cat-index li:last-child a { border-bottom: 0; }
}

/* ---- Flechas sobre la tira (modelo Atelier Zero), en el círculo crema
   de la casa. Una foto entera por pantalla en móvil. ---- */
.strip__body { position: relative; }
.strip__head { justify-content: flex-start; }
.strip__nav {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 0.75rem;
	pointer-events: none;
}
.strip__btn {
	pointer-events: auto;
	width: 48px; height: 48px;
	border: 0;
	background: rgb(244 231 215 / 0.92);
	color: var(--ink);
}
.strip__btn:hover:not(:disabled) { background: var(--ink); color: #F4E7D7; }
.strip__btn:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 639px) {
	.strip__track { grid-auto-columns: 100%; }
}

/* Índice móvil sin líneas entre categorías. */
@media (max-width: 767px) {
	.cat-index a { border-bottom: 0; min-height: 40px; }
}

/* ---- Pie en móvil: compacto y ordenado. Correo + redes en una fila,
   legales en dos columnas, copyright centrado y por encima de los
   botones flotantes (galleta y WhatsApp). ---- */
@media (max-width: 767px) {
	.site-footer__inner {
		gap: var(--space);
		padding-bottom: calc(var(--space) + 64px);
	}
	.site-footer__col:not(.site-footer__legal) {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 0.75rem;
	}
	.site-footer__legal {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: var(--space);
		padding-top: var(--space);
		border-top: 1px solid rgb(50 50 50 / 0.15);
	}
	.legal-list { display: contents; }
	.legal-list a, .site-footer__cookies { min-height: 40px; }
	.site-footer__copy {
		justify-content: center;
		margin-top: 0;
		padding-top: var(--space);
		border-top: 1px solid rgb(50 50 50 / 0.15);
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}
}

/* Anclas (#particulares, #profesionales, #contacto): al saltar, dejar
   sitio para la cabecera fija; si no, tapa el titulo (se notaba en movil). */
/* Altura real de la cabecera medida por JS (--header-h); sin JS, 65px. */
.home > section[id] { scroll-margin-top: calc(var(--header-h, 65px) - 25px); }

/* ---- Móvil: "Todos los proyectos" pasa al final de los destacados,
   como botón centrado (después de ver las fotos es cuando se pulsa). ---- */
@media (max-width: 767px) {
	.home > section.featured { display: grid; }
	.featured__head { display: contents; }
	.featured .section-title { order: 1; }
	.featured .project-grid { order: 2; }
	.featured__head .text-link {
		order: 3;
		justify-self: center;
		margin-top: var(--space);
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 0.6rem 1.4rem;
		border: 1px solid var(--ink);
		color: var(--ink);
		text-decoration: none;
	}
	.featured__head .text-link:hover { background: var(--ink); color: #F4E7D7; }
}

/* ---- Móvil: pie alineado a la derecha (petición de la clienta 01-09) ---- */
@media (max-width: 767px) {
	.site-footer__inner { text-align: right; }
	.site-footer__col:not(.site-footer__legal) { justify-content: flex-end; }
	/* El bloque de legales, pegado a la derecha; dentro, columnas del
	   ancho de su contenido y enlaces alineados entre sí. */
	.site-footer__legal { grid-template-columns: auto auto; justify-content: space-between; justify-items: stretch; }
	/* display:flex (no inline-flex): si no, el text-align:right heredado
	   los empuja y cada enlace empieza en un punto distinto. */
	.legal-list a, .site-footer__cookies { display: flex; width: 100%; justify-content: flex-start; text-align: left; }
	/* Columna izquierda alineada a la izquierda y derecha a la derecha:
	   el bloque queda recto por los dos lados. */
	/* Columna derecha como bloque, no como flex: en Safari un <button>
	   flex centra las líneas cuando el texto se parte en dos («Preferencias
	   de / cookies»). Como bloque, cada línea acaba en el borde derecho. */
	.legal-list li:nth-child(even) a,
	.site-footer__cookies {
		display: block;
		min-height: 0;
		padding: 10px 0;
		line-height: 1.3;
		text-align: right;
	}
	.social-list { justify-content: flex-end; }
	/* Correo a la izquierda y redes a la derecha, en la misma fila; el
	   copyright, centrado (petición de la clienta 08-09). */
	.site-footer__col:not(.site-footer__legal) { justify-content: space-between; }
	.site-footer__col:not(.site-footer__legal) a[href^="mailto"] { text-align: left; }
	.site-footer__copy { justify-content: center; text-align: center; }
}

/* ---- Móvil: índice de categorías de Proyectos a la derecha ---- */
@media (max-width: 767px) {
	.cat-index ol { align-items: flex-end; }
	.cat-index a { justify-content: flex-end; text-align: right; }
}

/* --- Enlaces a PDF dentro del texto del proyecto: botón de descarga ------
   Los pone la clienta con «Añadir medios»; sin esto quedan como un enlace
   perdido en medio del párrafo. Mismo lenguaje que el resto: borde 1px,
   sin radio, etiqueta en mayúscula pequeña. --------------------------- */
.project__desc a[href$=".pdf" i] {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	min-height: 44px;
	margin: 0.25em 0;
	padding: 0.55em 1em 0.55em 0.8em;
	border: 1px solid var(--ink);
	color: var(--ink);
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
}
.project__desc a[href$=".pdf" i]::before {
	content: "PDF";
	padding: 0.15em 0.4em;
	border: 1px solid currentColor;
	font-size: 0.68em;
	font-weight: 700;
	letter-spacing: 0.12em;
}
.project__desc a[href$=".pdf" i]::after {
	content: "↓";
	font-weight: 400;
}
.project__desc a[href$=".pdf" i]:hover,
.project__desc a[href$=".pdf" i]:focus-visible {
	background: var(--ink);
	color: var(--paper, #fff);
}
@media (prefers-reduced-motion: reduce) {
	.project__desc a[href$=".pdf" i] { transition: none; }
}

/* --- Visor de fotos a pantalla completa (página de proyecto) ------------
   <dialog> nativo. Fondo de papel, no negro: la foto sigue en el mismo
   mundo que la página. Borde 1px, sin radio, sin sombras. ------------- */
.project__open {
	display: block;
	cursor: zoom-in;
}
.project__open:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 4px;
}

.viewer {
	position: fixed;
	inset: 0;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--ink); /* gris de marca: la foto manda, sin marco */
	color: var(--paper);
	overflow: hidden;
}
.viewer::backdrop {
	background: transparent; /* el propio dialog cubre toda la pantalla */
}
body:has(.viewer[open]) {
	overflow: hidden;
}

.viewer__bar {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: calc(var(--space) / 2) var(--space);
}
.viewer__count {
	margin: 0;
	padding: 0.35em 0.7em;
	background: var(--ink);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--paper);
}

.viewer__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--ink);
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.viewer__btn:hover,
.viewer__btn:focus-visible {
	background: var(--ink);
	border-color: var(--paper);
	color: var(--paper);
}
.viewer__btn:focus-visible {
	outline: 2px solid var(--clay);
	outline-offset: 3px;
}

.viewer__figure {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	/* Flex, no grid: en una pista auto de grid el max-height en % de la foto
	   no se resuelve y la foto se sale por abajo. */
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	/* Sin márgenes: la foto llena la pantalla y los controles van encima. */
	padding: 0;
	cursor: zoom-out;
}
.viewer__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 0;
	cursor: default;
	transition: opacity 0.25s ease;
}
.viewer.is-loading .viewer__img {
	opacity: 0.35;
}
.viewer__caption {
	position: absolute;
	left: 50%;
	bottom: calc(var(--space) / 2);
	transform: translateX(-50%);
	max-width: min(70ch, calc(100% - 2 * (var(--space) + 56px)));
	margin: 0;
	padding: 0.4em 0.9em;
	border: 1px solid var(--line);
	background: var(--paper);
	text-align: center;
	font-size: 0.9rem;
	color: var(--ink);
}

.viewer__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
}
.viewer__arrow--prev { left: var(--space); }
.viewer__arrow--next { right: var(--space); }

/* Móvil en vertical: la foto ocupa todo el ancho y las flechas bajan a la
   zona del pulgar; deslizar hace el mismo trabajo. */
@media (max-width: 767px) and (orientation: portrait) {
		.viewer__arrow {
		top: auto;
		bottom: calc(var(--space) / 2);
		transform: none;
	}
	.viewer__arrow--prev { left: 50%; transform: translateX(calc(-100% - 6px)); }
	.viewer__arrow--next { right: auto; left: 50%; transform: translateX(6px); }
	.viewer__caption { bottom: calc(var(--space) / 2 + 60px); padding: 0 var(--space); }
}

/* Pantalla baja (móvil girado en horizontal): la foto llena la pantalla y
   los controles se le superponen en los bordes. */
@media (max-height: 520px) {
	.viewer__bar { padding: 8px; }
	.viewer__arrow--prev { left: 8px; }
	.viewer__arrow--next { right: 8px; }
	.viewer__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.viewer__btn,
	.viewer__img { transition: none; }
}

/* ---- Crédito del estudio que hizo la web: segunda línea del copyright,
   pequeña, con el mismo alineado que el copyright en cada pantalla. ---- */
.site-footer__copy { flex-wrap: wrap; }
.site-footer__credit {
	flex-basis: 100%;
	margin-top: 0.15rem;
	font-size: 0.85em;
	color: var(--ink-soft);
	text-align: inherit;
}
.site-footer__credit a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.site-footer__credit a:hover,
.site-footer__credit a:focus-visible { color: var(--ink); }
.site-footer__credit a:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* ---- Contraste AA (auditoría Lighthouse 15-09-2026) ----
   Cinta: texto blanco en negrita de 15 px sobre el rojo de marca daba 3,97;
   con el rojo de texto (--clay) pasa de 4,5. Números de las reseñas: el
   crema al 70 % sobre rojo daba 2,61; entero, 3,78 (texto grande, basta 3).
   Etiqueta del aviso de cookies: su fondo es siempre crema, así que el rojo
   oscuro fijo (4,8) y no --clay, que en la versión blanca es más claro. */
.marquee { background: var(--clay); }
.reviews .section-num { color: #F4E7D7; }
.ilwa-cookies__label { color: #A84444; }