/* Home page layout. Card styles live in components.css. */

/* Scroll-driven sections: tall wrapper holding a pinned full-height stage */
.hero,
.banner-cta {
	position: relative;
	background: var(--c-white);
}

.hero__stage,
.banner-cta__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
	background: var(--c-white);
}


/* --- Hero ----------------------------------------------------------------
   At rest the wordmark sits at the top over white, with only the edge of
   the photo showing at the bottom. On scroll the photo rises and widens to
   fill the screen while the wordmark travels down to the bottom edge; they
   cross halfway, and the wordmark turns white wherever the photo is behind
   it (difference blend). --hero-open (0–1, set by home.js) drives all of
   it. Once open, the section holds: the header drops in from the top and
   the strapline appears across the middle, both on .is-open. */

.hero {
	/* 100vh de escenario + 60vh de margen: lo que se recorre bajando a toda
	   prisa mientras dura la apertura (0,8 s), para que no se vaya la foto a
	   medio abrir. Pasado eso el scroll sigue, sin pausa muerta. */
	height: 160vh;
	height: 160dvh;
	color: var(--c-white);
	--hero-open: 0;
}

/* Abierta la foto, el margen de más ya no pinta nada: si se queda, al seguir
   bajando la sección aguanta clavada media pantalla. Lo quita home.js. */
.hero.sin-ancla {
	height: 100vh;
	height: 100dvh;
}

.hero__media {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(60vw + 40vw * var(--hero-open));
	height: calc(64vh + 36vh * var(--hero-open));
	height: calc(64dvh + 36dvh * var(--hero-open));
	/* asoma por abajo, con su borde superior a 70vh: cuanto más arriba
	   arranque, menos recorrido tiene que hacer la apertura */
	transform: translate(-50%, calc(-50% + 52vh * (1 - var(--hero-open))));
	transform: translate(-50%, calc(-50% + 52dvh * (1 - var(--hero-open))));
	overflow: hidden;
	will-change: width, height, transform;
}

/* El fondo del hero es un pase de fotos: van apiladas y se funden una sobre
   otra (home.js va pasando .is-current). Con una sola foto, se queda fija. */
.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.hero__slide.is-current { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.catalogo-cta__name,
	.catalogo-cta__relevo { transition: none; }

	.hero__slide { transition: none; }
}

.hero__media img,
.banner-cta__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__wordmark {
	position: absolute;
	top: 0;
	left: var(--edge);
	right: var(--edge);
	/* from just under the top edge down to sitting on the bottom one */
	transform: translateY( calc( 4vh * ( 1 - var(--hero-open) ) + ( 100vh - 100% ) * var(--hero-open) ) );
	transform: translateY( calc( 4dvh * ( 1 - var(--hero-open) ) + ( 100dvh - 100% ) * var(--hero-open) ) );
	/* Pasa de negro a blanco según la foto le va pasando por detrás
	   (--wordmark-photo, de 0 a 1, lo lleva home.js), en vez de leerse en
	   negativo sobre ella. */
	color: var(--c-dark);
	color: color-mix( in srgb, var(--c-white) calc( var(--wordmark-photo, 0) * 100% ), var(--c-dark) );
	pointer-events: none;
	will-change: transform, color;
}

/* El SVG mide 1350 px de ancho: sin esto se quedaría a la izquierda de la
   columna en pantallas más anchas, en vez de centrado. */
.hero__wordmark svg { width: 100%; }

.hero.is-open .hero__wordmark { color: var(--c-white); }

.hero__inner {
	/* across the middle of the screen, with the wordmark below it */
	position: absolute;
	top: 46vh;
	top: 46dvh;
	left: 0;
	right: 0;
	padding: 24px clamp(16px, 2.2vw, 42px) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	/* waits just below its place and slides up when the photo is open,
	   mirroring the header dropping in from the top */
	transform: translateY(40%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease, visibility 0s 0.7s;
	will-change: transform, opacity;
}

/* Esperan a que la foto termine de abrirse y entonces entran, con calma. */
.hero.is-open .hero__inner {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s, opacity 0.7s ease 0.35s;
}

/* 20,7px a 1920 y columna de 240px: la F mide 15px de caja en el diseno y el
   texto parte en dos lineas tras "muebles". */
.hero__title {
	/* es un h1: sin esto saldria en negrita y el diseno lo lleva en redonda */
	font-weight: 400;
	font-size: clamp(14px, 1.08vw, 20.7px);
	line-height: 1.21;
	letter-spacing: -0.02em;
	max-width: clamp(150px, 12.5vw, 240px);
	order: 1;
}

/* "_nosotros" se mete en la primera linea del parrafo, no en una columna
   aparte: el resto de lineas vuelven al margen izquierdo del bloque, como en
   el diseno. 717px de columna a 1920. */
.hero__about {
	max-width: clamp(380px, 37.3vw, 717px);
	order: 3;
}

.hero__about p {
	font-size: clamp(22px, 1.528vw, 29.3px);
	/* 39px de paso sobre 30,3px de cuerpo, medido en el diseno */
	line-height: 1.29;
}

/* Sin subrayado: el guion ya va en el propio texto. */
.hero__about-link {
	float: left;
	margin-right: clamp(16px, 2.4vw, 46px);
	padding-top: 0.35em;
	font-family: var(--font-mono);
	font-size: clamp(11px, 0.755vw, 14.5px);
	letter-spacing: -0.04em;
}

.hero__about-link:hover { opacity: 0.7; }

.hero__tag {
	font-family: var(--font-display);
	font-size: clamp(14px, 1.08vw, 20.7px);
	letter-spacing: -0.02em;
	order: 2;
}

/* --- Intro editorial ----------------------------------------------------- */

/* Medidas del diseño: el titular ocupa dos tercios y parte en dos líneas; el
   párrafo va debajo, en la mitad derecha, no en una columna a su lado. */
.intro {
	/* Medido en Systemtronic_HOME.png: el titular arranca 27px bajo la foto del
	   hero y el párrafo deja 105px hasta la banda de "Desde 1988". */
	padding: clamp(14px, 1.39vw, 27px) var(--edge) clamp(56px, 6.94vw, 133px);
}

.intro__title {
	/* Sitio para que parta en dos líneas, como el diseño, ahora que mide lo
	   mismo que los demás titulares. */
	max-width: 82%;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--titular);
	line-height: 1;
	letter-spacing: -0.04em;
}

.intro__copy {
	width: 45.5%;
	margin-left: auto;
	margin-top: clamp(32px, 5.8vw, 117px);
	font-size: clamp(15px, 1.25vw, 24px);
	line-height: 1.28;
}

/* --- "Desde 1988" banner -------------------------------------------------
   The photo grows to full height on scroll and then holds for a moment;
   the tickers only fade in once it fills the viewport. */

.banner-cta { height: 170vh; }

/* Ya desplegada no necesita el alto de más: sin él la página pasa de largo
   sin el frenazo. Lo quita home.js cuando la banda ya no se ve. */
.banner-cta.sin-ancla {
	height: 100vh;
	height: 100dvh;
}

.banner-cta__stage {
	display: flex;
	align-items: center;
	justify-content: center;
}

.banner-cta__media {
	position: relative;
	width: 100%;
	/* en reposo deja poco blanco arriba y abajo: con 60vh la banda se perdía
	   en medio de la página */
	height: calc(78vh + 22vh * var(--banner-open, 0));
	height: calc(78dvh + 22dvh * var(--banner-open, 0));
	overflow: hidden;
	color: var(--c-white);
	text-align: center;
	will-change: height;
}

.banner-cta__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 0 var(--edge);
}

.banner-cta__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(24px, 4vw, 40px);
	/* en una línea; solo parte cuando no cabe */
	max-width: 100%;
	text-wrap: balance;
}

.banner-cta__link {
	font-size: clamp(20px, 1.389vw, 26.7px);
}

.banner-cta__ticker {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	overflow: hidden;
	white-space: nowrap;
	padding: 14px 0;
	border-bottom: 1px solid var(--c-white);
	font-family: var(--font-mono);
	font-size: clamp(15px, 1.042vw, 20px);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.banner-cta__media.is-full .banner-cta__ticker { opacity: 1; }

.banner-cta__ticker--bottom {
	top: auto;
	bottom: 0;
	border-bottom: 0;
	border-top: 1px solid var(--c-white);
}

.banner-cta__ticker-track {
	display: flex;
	/* tan ancha como sus dos vueltas: el -50% de la animación tiene que
	   equivaler justo a una de ellas */
	width: max-content;
	animation: banner-ticker 28s linear infinite;
}

/* Cada vuelta ocupa como mínimo la pantalla, así la cinta nunca deja un
   hueco por muy ancho que sea el monitor; al desplazarse media pista
   (-50%) la siguiente cae exactamente en su sitio. */
.banner-cta__ticker-group {
	flex: none;
	display: flex;
	justify-content: space-evenly;
	min-width: 100vw;
}

.banner-cta__ticker--bottom .banner-cta__ticker-track { animation-direction: reverse; }
.banner-cta__ticker-track span { padding: 0 10px; }

.banner-cta__ticker-track span:not(:last-child)::after {
	content: '>>';
	margin-left: 10px;
}

@keyframes banner-ticker {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* --- Catálogo CTA -------------------------------------------------------- */

.catalogo-cta {
	background: var(--c-cream);
	padding: clamp(40px, 6vw, 64px) var(--edge);
	text-align: center;
}

.catalogo-cta__label {
	font-family: var(--font-mono);
	font-size: clamp(20px, 1.389vw, 26.7px);
	letter-spacing: -0.02em;
	margin-bottom: clamp(32px, 5vw, 64px);
}

.catalogo-cta__body {
	display: grid;
	/* la foto mide 459 x 688 a 1920 en el diseno */
	grid-template-columns: 1fr clamp(180px, 24.5%, 470px);
	gap: clamp(24px, 4vw, 56px);
	text-align: left;
}

/* The categories run together as one block of text, each preceded by its
   product count */
.catalogo-cta__list {
	/* 106px a 1920: la C de "Carros" mide 80px de caja en el diseno */
	--catalogo-cta-size: clamp(32px, 5.52vw, 106px);
	font-weight: 500;
	font-size: var(--catalogo-cta-size);
	line-height: 0.95;
	letter-spacing: -0.04em;
}

.catalogo-cta__list li { display: inline; }

/* El enlace toma la métrica del número (mono a 20px) y el nombre recupera el
   cuerpo del listado: así el filete que crece en el hover se apoya en el mismo
   sitio que el del número sin depender del descendente de la fuente grande. */
.catalogo-cta__list a {
	/* el número no se separa de su nombre */
	white-space: nowrap;
	font-family: var(--font-mono);
	font-size: clamp(20px, 1.389vw, 26.7px);
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0 0.15em;
	background-position: 0 100%;
	padding-bottom: 0.15em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.4s ease;
}

/* El filete de la izquierda crece hasta subrayar el nombre entero y el
   nombre pasa a negrita; el numero se queda como esta, como en el diseno. */
.catalogo-cta__list a:hover { background-size: 100% 0.15em; }

/* El nombre engorda sin dar el salto de peso: engrosar el trazo se puede
   animar y, sobre todo, no recoloca el resto del listado. */
.catalogo-cta__list a:hover .catalogo-cta__name { -webkit-text-stroke-width: 0.013em; }

/* La caja de la letra de la Suisse mide casi el doble que el interlineado
   (0,95) y se mete en la línea de arriba: al pasar por la parte baja de
   "Librerías" respondía "Paragüeros", que va después. Así que las letras no
   responden al ratón y lo hace una capa que mide justo la línea. */
.catalogo-cta__name {
	position: relative;
	display: inline-block;
	pointer-events: none;
	font-family: var(--font-display);
	font-size: var(--catalogo-cta-size);
	-webkit-text-stroke: 0 currentColor;
	transition: -webkit-text-stroke-width 0.4s ease;
}

/* En reposo el filete es el borde del número; el del hover se pinta como fondo
   del enlace con box-decoration-break: clone, para que se reparta por líneas si
   el nombre cae partido. */
.catalogo-cta__name::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: auto;
}

.catalogo-cta__count {
	font-weight: 400;
	letter-spacing: -0.02em;
	margin-right: 0.1em;
	border-bottom: 0.15em solid currentColor;
}

.catalogo-cta__foto {
	position: relative;
	aspect-ratio: 2 / 3;
	overflow: hidden;
}

.catalogo-cta__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* La foto de la categoría por la que pasa el ratón se funde encima. */
.catalogo-cta__relevo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.45s ease;
}

.catalogo-cta__relevo.is-visible { opacity: 1; }

/* Medido en Systemtronic_HOME.png: caja de 347 x 42 y letra de 19px a 1440. */
.catalogo-cta__button {
	margin-top: clamp(32px, 5vw, 56px);
	padding: 0.53em 0.79em;
	font-size: clamp(15px, 1.32vw, 25.3px);
}

/* --- Proyectos destacados ------------------------------------------------ */

.proyectos {
	position: relative;
	display: grid;
	gap: 2px;
}

.proyectos__title {
	position: absolute;
	top: 20px;
	left: var(--edge);
	z-index: 1;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--titular);
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--c-white);
	pointer-events: none;
}

/* Each project is a full-width band: photo behind, name and location over
   it, and the products used listed down the right. */
.project-row {
	position: relative;
	aspect-ratio: 16 / 9;
	color: var(--c-white);
	display: grid;
	padding: clamp(24px, 4vw, 56px) var(--edge);
}

/* La raya cruza la banda entera, y el texto y los productos arrancan los dos
   justo debajo: por eso cuelgan del mismo bloque. Se queda clavado a media
   altura mientras pasa su banda y se suelta al acabar la foto. */
.project-row__body {
	position: sticky;
	/* a media pantalla, descontando su propia mitad (home.js publica --mitad).
	   Sin transform: así el bloque llega de verdad hasta abajo de su banda, en
	   vez de soltarse media altura antes. */
	top: calc(50% - var(--mitad, 0px));
	align-self: center;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.6);
	padding-top: 12px;
}

.project-row__media {
	position: absolute;
	inset: 0;
}

/* La copia del titular solo existe en móvil. */
.project-row__titular { display: none; }

.project-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Como en el diseño: el nombre ocupa su línea, y debajo el estudio en Light
   con la ubicación al lado, las dos apoyadas en la misma línea base. */
.project-row__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: clamp(12px, 1.4vw, 24px);
	font-weight: 700;
	font-size: clamp(26px, 3.9vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.03em;
}

.project-row__name > a { flex: 0 0 100%; }

.project-row__studio { font-weight: 300; }

.project-row__location {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: clamp(15px, 1.9vw, 27px);
	letter-spacing: -0.04em;
}

/* Tres columnas pegadas al borde derecho: con un flex que se parte solo cuando
   no cabe, el número de columnas cambiaba con el ancho de la pantalla. */
.project-row__products {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: end;
	gap: clamp(12px, 2vw, 32px);
}

.project-row__products a {
	display: block;
	font-family: var(--font-mono);
	font-weight: 300;
	font-size: clamp(11px, 1.2vw, 18px);
	text-align: center;
}

/* La medida la marca la miniatura; el nombre puede ser más ancho y por eso no
   se le fija el ancho al enlace: se salía de su columna y pisaba al de al lado. */
.project-row__products img {
	display: block;
	width: clamp(48px, 5vw, 72px);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin-bottom: 4px;
}

/* El panel es gris liso con el texto en negro; al pasar el ratón entra la foto
   y el texto se vuelve blanco, salvo los nombres de proyecto, que se quedan en
   gris hasta que señalas uno. */
.proyectos__archive {
	position: relative;
	background: var(--c-grey-warm);
	color: var(--c-dark);
	padding: clamp(24px, 4vw, 56px) var(--edge);
	transition: color 0.4s ease;
	/* El titular y el enlace comparten la primera línea, bajo el mismo filete. */
	display: grid;
	grid-template-columns: 1fr auto;
}

.proyectos__archive:hover { color: var(--c-white); }

.proyectos__archive-col a { transition: color 0.3s ease; }

.proyectos__archive:hover .proyectos__archive-col a { color: #bcbcbc; }

/* El que se señala pasa a blanco y engorda con un trazo, no con el peso: así
   no se mueve la línea. */
.proyectos__archive:hover .proyectos__archive-col a:hover {
	color: var(--c-white);
	-webkit-text-stroke: 0.4px currentColor;
}

.proyectos__archive::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--archive-image);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.proyectos__archive > * { position: relative; }

.proyectos__archive:hover::before { opacity: 1; }

.proyectos__archive-title {
	grid-area: 1 / 1 / 2 / -1;
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 32px);
	letter-spacing: -0.02em;
	border-top: 1px solid currentColor;
	padding-top: 12px;
	margin-bottom: clamp(20px, 3vw, 40px);
}

.proyectos__archive-cols {
	grid-area: 2 / 1 / 3 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 3vw, 40px);
	font-size: clamp(13px, 1.4vw, 20px);
	line-height: 1.25;
	margin-bottom: clamp(20px, 3vw, 40px);
}

/* Solo el epígrafe va en mono; los nombres, en la de texto, como el diseño. */
.proyectos__archive-cat {
	font-family: var(--font-mono);
	font-size: 0.9em;
	text-transform: uppercase;
	margin-bottom: 0.3em;
}

.proyectos__archive-link {
	grid-area: 1 / 2 / 2 / 3;
	justify-self: end;
	align-self: start;
	padding-top: 12px;
	font-size: clamp(16px, 1.6vw, 22px);
}

/* --- Noticias ------------------------------------------------------------ */

/* Medido en el diseño: 26px sobre el titular y 100px bajo las tarjetas. */
.noticias { padding: clamp(14px, 1.32vw, 25px) var(--edge) clamp(56px, 6.6vw, 127px); }

.noticias__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 44px);
}

.noticias__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--titular);
	line-height: 1;
	letter-spacing: -0.04em;
}

.noticias__link {
	font-size: clamp(16px, 1.53vw, 28px);
}

.noticias__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Medidas del bloque de portada, tomadas de su PNG: la foto casi cuadrada, el
   titular en Book y más grande, y la fecha en mono a su tamaño. */
.noticias .news-card__media { aspect-ratio: 33 / 34; }

.noticias .news-card__title {
	font-weight: 400;
	font-size: clamp(19px, 1.74vw, 33px);
	line-height: 1;
	letter-spacing: -0.02em;
	margin-bottom: clamp(12px, 1.1vw, 20px);
}

.noticias .news-card__excerpt {
	font-size: clamp(14px, 1.08vw, 21px);
	line-height: 1.16;
	margin-bottom: clamp(16px, 1.8vw, 32px);
}

/* Las fechas se apoyan en la misma línea en las cuatro tarjetas, aunque los
   titulares ocupen una o tres líneas. */
.noticias .news-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.noticias .news-card__date {
	margin-top: auto;
	font-size: clamp(12px, 0.95vw, 18px);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
	.catalogo-cta__body { grid-template-columns: 1fr; }

	/* Sin sitio para el reparto del diseño: todo a una columna. */
	.intro__title { max-width: none; }

	.intro__copy {
		width: auto;
		margin-top: clamp(24px, 5vw, 40px);
	}

	.noticias__grid { grid-template-columns: repeat(2, 1fr); }
	.proyectos__archive-cols { grid-template-columns: 1fr; }

	/* Sin las dos columnas, la altura la marcaba el texto y la foto quedaba
	   en una tira: la banda pide alto propio, con el nombre arriba y los
	   productos abajo para que la foto respire entre medias. */
	.project-row {
		aspect-ratio: auto;
		min-height: 112vw;
	}

	/* En una pantalla de móvil la banda da para poco recorrido: el texto se
	   queda quieto arriba y los productos abajo. */
	.project-row__body {
		position: static;
		align-self: stretch;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.project-row__products {
		align-self: end;
		justify-content: start;
	}

	/* Los nombres van en blanco sobre la foto: sin este velo, en las fotos
	   claras no se leían ni el titular ni los pies de los productos. */
	.project-row__media::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(
			180deg,
			rgba(27, 27, 26, 0.45) 0%,
			rgba(27, 27, 26, 0) 32%,
			rgba(27, 27, 26, 0) 58%,
			rgba(27, 27, 26, 0.45) 100%
		);
	}
}

@media (max-width: 720px) {
	/* --vh lo publica main.js con el alto real de la pantalla: con el zoom de
	   página de Chrome, 100vh se queda corto y la foto no llegaba abajo. */
	/* En móvil la apertura no se come scroll: el bloque mide una pantalla y la
	   animación se reproduce sin moverla (home.js la retiene mientras dura). */
	.hero { height: calc( var(--vh, 1vh) * 100 ); }

	/* Hasta que la foto se abre, la página no se mueve. */
	.hero-retenido,
	.hero-retenido body {
		overflow: hidden;
		touch-action: none;
	}

	.hero-retenido .site-header__nav-block { touch-action: auto; }
	/* En móvil la banda no se abre: sale ya a pantalla completa y ocupa lo
	   que ocupa, sin recorrido de más. */
	.banner-cta {
		height: calc( var(--vh, 1vh) * 100 );
		--banner-open: 1;
	}

	.banner-cta__media { height: 100%; }

	/* El escenario, en lvh: el alto de la pantalla con la barra del navegador
	   recogida. Con dvh se quedaba más corto que la pantalla justo mientras la
	   barra se recoge — que es cuando se abre la foto — y por eso la foto no
	   llegaba abajo. Lo que sobre se esconde tras la barra, que es lo suyo en
	   una foto a sangre. */
	.hero__stage,
	.banner-cta__stage {
		height: calc( var(--vh, 1vh) * 100 );
	}

	/* En móvil la foto es el recorte vertical (el <picture> de la plantilla),
	   así que al abrirse llena la pantalla sin recortar la escena. Se mide en
	   porcentaje del escenario — no en unidades de pantalla — para que al final
	   sea exactamente él, y crece apoyada en el borde de abajo: centrada se
	   quedaba a media pantalla. */
	/* La foto empieza siendo una franja pegada a la derecha y crece hacia la
	   izquierda hasta cubrir la pantalla. */
	.hero__media {
		top: calc( 6% * ( 1 - var(--hero-open) ) );
		bottom: auto;
		left: auto;
		right: 0;
		width: calc(52% + 48% * var(--hero-open));
		height: calc(90% + 10% * var(--hero-open));
		transform: none;
	}

	/* En móvil el logotipo va girado, apoyado en el borde derecho, como en el
	   diseño: se gira 90° sobre su esquina superior derecha, así que su ancho
	   es en realidad el largo de la tira y su alto, el grueso. */
	.hero__wordmark {
		top: calc( var(--vh, 1vh) * 11 );
		/* girado, su borde izquierdo es el derecho de la tira: arranca pegado
		   al margen izquierdo y cruza hasta el derecho mientras se abre */
		left: calc( 106px + ( 100% - 121px ) * var(--hero-open) );
		right: auto;
		width: calc( var(--vh, 1vh) * 68 );
		transform-origin: 0 0;
		transform: rotate(90deg);
	}

	/* En móvil los tres textos se reparten a lo alto de la pantalla, como en el
	   diseño: el titular arriba, el lema abajo centrado y el párrafo al pie,
	   con su filete. El logotipo girado ocupa la derecha, así que el titular y
	   el filete se quedan cortos para no cruzarse con él. */
	.hero__inner {
		top: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: calc( var(--vh, 1vh) * 10.5 ) 20px calc( var(--vh, 1vh) * 5.5 );
		border-top: 0;
	}

	.hero__title {
		order: 1;
		max-width: 56%;
		font-size: 16px;
	}

	.hero__tag {
		order: 2;
		margin-top: auto;
		margin-bottom: clamp(16px, 4.5vw, 24px);
		text-align: center;
		font-size: 13px;
	}

	/* El filete va de borde a borde de la pantalla, como en el diseño: el
	   bloque se sale del margen de .hero__inner (20px) y lo recupera dentro. */
	.hero__about {
		order: 3;
		max-width: none;
		width: auto;
		margin: 0 -20px;
		padding: 10px 20px 0;
		border-top: 1px solid rgba(255, 255, 255, 0.4);
	}

	.hero__about p { font-size: 15px; }

	.hero__about-link {
		padding-top: 0.2em;
		margin-right: 10px;
	}

	/* --- Proyectos en móvil ---------------------------------------------
	   Cada proyecto ocupa la pantalla y se queda quieto mientras el siguiente
	   sube por debajo y lo tapa; con el tercero el scroll vuelve a lo normal.
	   Son tres capas pegajosas apiladas: la que viene va detrás en el DOM, así
	   que se pinta encima de la anterior sin necesidad de JS. */
	.proyectos {
		display: block;
		gap: 0;
	}

	.project-row {
		position: sticky;
		top: 0;
		aspect-ratio: auto;
		height: calc( var(--vh, 1vh) * 100 );
		padding: clamp(72px, 20vw, 120px) var(--edge) clamp(28px, 7vw, 44px);
		/* La banda recorta lo suyo, y «clip-path» recorta también lo que lleva
		   clavado a la pantalla (cosa que «overflow» no hace) sin dejar de
		   medirlo desde la ventana. Esa es la cortina: el texto del proyecto que
		   entra ya está puesto en el centro y la foto lo va descubriendo. */
		clip-path: inset(0);
	}

	/* El texto y los dibujos no se mueven: van clavados al centro de la
	   pantalla desde el principio, los tres a la vez. Solo se ve el de la banda
	   que en ese momento tiene descubierto el centro, porque cada banda recorta
	   el suyo. Lo que se centra es el nombre; los dibujos cuelgan debajo. */
	.project-row__body {
		grid-area: 1 / 1;
		position: sticky;
		top: calc( var(--vh, 1vh) * 50 - var(--mitad, 0px) );
		/* El primero es el que vemos llegar: su texto va en el centro de la
		   banda, sube con la foto y se para en el centro de la pantalla justo
		   cuando la foto acaba de llenarla. */
		margin-top: calc( var(--vh, 1vh) * 50 - var(--mitad, 0px) - clamp(72px, 20vw, 120px) );
		/* El clavado acaba donde acaba la banda menos este hueco, es decir justo
		   en el centro de la pantalla: en cuanto la banda empieza a subir, el
		   texto sube con ella sin quedarse rezagado. */
		margin-bottom: calc( var(--vh, 1vh) * 50 - var(--mitad, 0px) - clamp(28px, 7vw, 44px) );
		align-self: start;
		transform: none;
		display: block;
	}

	/* Los demás no se mueven nunca: su sitio de partida queda una pantalla por
	   encima, o sea siempre por encima del centro, así que están clavados ahí
	   desde antes de asomar y solo los descubre la foto al pasar por encima. */
	.project-row ~ .project-row .project-row__body {
		margin-top: calc( var(--vh, 1vh) * -100 );
	}

	/* 24px a 375, medido en el PNG. */
	.project-row__name { font-size: 20px; }

	/* Los dibujos de los productos, en tres columnas pegadas a la derecha y
	   colgando del nombre. El enlace mide lo que el dibujo: un nombre largo
	   se partía y se salía de la pantalla por la derecha. */
	.project-row__products {
		position: absolute;
		top: calc(100% + clamp(18px, 5vw, 28px));
		right: 0;
		grid-template-columns: repeat(3, 52px);
		justify-content: end;
		gap: 8px clamp(14px, 7vw, 30px);
	}

	.project-row__products a {
		width: 52px;
		overflow-wrap: anywhere;
	}

	.project-row__products img { width: 52px; }

	/* Sobre una foto clara el nombre en blanco no se lee: un velo por abajo,
	   el mismo recurso que en las fichas del archivo. */
	.project-row__media::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(0deg, rgba(27, 27, 26, 0.55) 0%, rgba(27, 27, 26, 0) 40%);
	}

	/* El titular de la sección no puede quedarse clavado por su cuenta: el
	   navegador del móvil lo soltaba. Se esconde (sigue ahí para los lectores
	   de pantalla) y cada banda lleva una copia clavada arriba a la izquierda,
	   con el mismo truco que el nombre del proyecto: la de la primera banda
	   sube con ella y se para arriba; las demás están clavadas desde antes de
	   asomar y las va descubriendo la foto al subir. Así el titular no se mueve
	   nunca de sitio. */
	.proyectos__title {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.project-row__titular {
		display: block;
		position: sticky;
		top: 20px;
		z-index: 1;
		height: 0;
		/* de donde estaría (bajo el relleno de la banda) a 20px de su borde */
		margin-top: calc( 20px - clamp(72px, 20vw, 120px) );
		/* y se suelta en cuanto la banda empieza a irse, para salir con ella en
		   vez de quedarse sobre el nombre del proyecto */
		margin-bottom: calc( var(--vh, 1vh) * 100 - 20px - clamp(28px, 7vw, 44px) );
		/* comparte celda con el bloque del nombre, que tiene los márgenes que
		   mandan: así su margen de abajo no empuja nada */
		grid-area: 1 / 1;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: var(--titular);
		line-height: 1;
		letter-spacing: -0.04em;
		pointer-events: none;
	}

	.project-row ~ .project-row .project-row__titular {
		margin-top: calc( var(--vh, 1vh) * -100 - clamp(72px, 20vw, 120px) );
	}

	/* El velo de arriba va con él, para que se lea sobre cualquier foto. */
	.project-row__titular::before {
		content: '';
		position: absolute;
		top: -20px;
		left: calc( -1 * var(--edge) );
		width: 100vw;
		height: clamp(90px, 24vw, 150px);
		z-index: -1;
		background: linear-gradient(180deg, rgba(27, 27, 26, 0.5) 0%, rgba(27, 27, 26, 0) 100%);
	}

	/* Del panel del archivo solo queda su enlace, fijo al pie de la sección
	   mientras pasan los proyectos. */
	.proyectos__archive {
		position: sticky;
		bottom: 0;
		z-index: 2;
		display: block;
		min-height: 0;
		padding: 0 var(--edge) clamp(20px, 6vw, 32px);
		background: none;
		color: var(--c-white);
	}

	.proyectos__archive::before,
	.proyectos__archive::after,
	.proyectos__archive-title,
	.proyectos__archive-cols { display: none; }

	.proyectos__archive-link {
		position: relative;
		display: block;
		padding-top: 0;
		text-align: center;
		font-size: 15px;
	}

	/* --- Noticias en móvil ----------------------------------------------
	   Solo tres: la primera a todo el ancho con su entradilla, las otras dos a
	   media, y el enlace al blog debajo de todo. */
	.noticias__grid {
		grid-template-columns: 1fr 1fr;
		column-gap: 12px;
		row-gap: clamp(24px, 7vw, 36px);
	}

	.noticias__grid > :first-child { grid-column: 1 / -1; }

	.noticias__grid > :nth-child(n + 4) { display: none; }

	.noticias__grid > :nth-child(n + 2) .news-card__excerpt { display: none; }

	/* El enlace sale de la cabecera y se va al final del bloque. */
	.noticias {
		display: flex;
		flex-direction: column;
	}

	.noticias__head {
		display: contents;
	}

	.noticias__title {
		order: 0;
		margin-bottom: clamp(20px, 6vw, 32px);
	}

	.noticias__grid { order: 1; }

	.noticias__link {
		order: 2;
		margin-top: clamp(24px, 7vw, 36px);
		text-align: center;
		font-size: 15px;
	}

	/* Con la interlínea de escritorio, el filete del número se comía la
	   línea de abajo. */
	.catalogo-cta__list {
		--catalogo-cta-size: 26px;
		line-height: 1.3;
	}

	/* El rótulo de arriba va bastante más pequeño que en escritorio. */
	.catalogo-cta__label {
		font-size: 13px;
		margin-bottom: clamp(20px, 6vw, 28px);
	}

	/* La foto es pequeña y se apoya en el margen derecho. */
	.catalogo-cta__foto {
		width: 47%;
		margin-left: auto;
		aspect-ratio: 175 / 238;
	}

	.catalogo-cta__button {
		padding: 10px 16px;
		font-size: 15px;
	}
}

/* La portada mantiene las dos columnas también en pantallas estrechas: la
   primera noticia ocupa las dos y las otras dos van a media. */