/*
Theme Name: Marela
Theme URI: https://marela.example
Author: Marela
Description: Tema a medida para el catálogo de Marela. Catálogo con retícula de huecos, página About, cabecera fija en modo difference e intro de vídeo a pantalla completa.
Version: 1.5.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: marela
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	--marela-ink: #30302e;
	--marela-black: #000000;
	--marela-muted: #333333;
	--marela-bg: #ffffff;

	--marela-font: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;

	/* ------------------------------------------------------------------
	   Escala proporcional.

	   El diseño está hecho para 1368 px de ancho. --marela-k vale
	   exactamente 1px a ese ancho, así que cualquier medida de Figma se
	   escribe tal cual: calc(25 * var(--marela-k)) son "los 25 px del
	   diseño". Al cambiar el ancho de la ventana, textos, separaciones y
	   márgenes crecen o menguan todos a la vez y las proporciones del
	   diseño se mantienen intactas.

	   Los topes de clamp() evitan los dos extremos: que en una pantalla
	   pequeña el texto quede ilegible y que en un monitor grande se vuelva
	   descomunal.

	   --marela-zoom es el ajuste fino (1 = tal cual el diseño). Se controla
	   desde Personalizar → Marela → Catálogo.
	   ------------------------------------------------------------------ */
	--marela-zoom: 1;
	--marela-k: calc(clamp(0.62px, 100vw / 1368, 1.25px) * var(--marela-zoom));

	/* Gutter lateral de la página (8 px en Figma). */
	--marela-gutter: calc(8 * var(--marela-k));

	/* Retícula del catálogo. */
	--marela-columns: 9;
	--marela-gap-x: calc(40 * var(--marela-k));
	--marela-gap-y: calc(96 * var(--marela-k));
	--marela-card-ratio: 216 / 320;

	/* Tipografía. */
	--marela-size-ui: calc(16 * var(--marela-k));

	/* Enlaces de la cabecera y del footer. Van aparte del tamaño base para
	   poder afinarlos sin tocar el resto del tema: cambia solo este número. */
	--marela-size-nav: calc(14 * var(--marela-k));
	--marela-size-meta: calc(14 * var(--marela-k));

	/* Nombre y precio de las piezas, en la tarjeta y en la modal: 12 px en
	   escritorio. El texto de About sigue con --marela-size-meta (14 px). */
	--marela-size-card: calc(12 * var(--marela-k));

	/* Modal: proporción del encuadre de la foto principal, medida del diseño
	   (445 x 604 = 14/19). Toda foto se recorta a esta forma, suba como suba. */
	--marela-lightbox-ratio: 14 / 19;

	/* Lo que ocupan el hueco superior, el pie de foto y los márgenes: se
	   descuenta de la altura de la ventana para que el encuadre nunca desborde. */
	--marela-lightbox-chrome: calc(106 * var(--marela-k));
	--marela-size-claim: calc(25 * var(--marela-k));
	--marela-icon: calc(24 * var(--marela-k));

	/* Motion. */
	--marela-ease: cubic-bezier(0.76, 0, 0.24, 1);
	--marela-reveal: 1150ms;
}

/* ==========================================================================
   2. Reset mínimo
   ========================================================================== */

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

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

body {
	margin: 0;
	background: var(--marela-bg);
	color: var(--marela-black);
	font-family: var(--marela-font);
	font-size: var(--marela-size-ui);
	line-height: 1.3;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

/* WordPress imprime width y height como atributos del <img>, y esos atributos
   valen como CSS de especificidad cero. Con las dos dimensiones fijadas,
   aspect-ratio deja de tener efecto, así que se libera la altura por defecto.
   Quien necesite una altura concreta la declara en su propia regla. */
img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

p {
	margin: 0;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   3. Cabecera fija en modo difference
   --------------------------------------------------------------------------
   El texto se pinta en blanco y se mezcla con `difference`:
   sobre fondo blanco se ve negro, sobre una foto oscura se ve blanco.
   IMPORTANTE: ningún ancestro de .site-header puede tener transform, filter,
   opacity < 1 ni isolation, o la mezcla dejaría de ver el contenido de debajo.
   ========================================================================== */

.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	display: flex;
	align-items: center;
	padding-left: var(--marela-gutter);
	color: #ffffff;
	mix-blend-mode: difference;
	font-size: var(--marela-size-nav);
	font-weight: 700;
	pointer-events: none;
}

/* La barra de administración de WordPress también es fija: le cedemos el sitio. */
body.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .site-header {
		top: 46px;
	}
}

/* Solo lo clicable recupera el ratón: así el resto de la franja no bloquea. */
.site-header a,
.site-header button {
	pointer-events: auto;
}

.site-header__group {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-header__brand {
	display: flex;
	align-items: center;
	white-space: nowrap;
}

/* Hueco reservado en el diseño (148 x 37) que mantiene la marca a la izquierda. */
.site-header__spacer {
	width: calc(148 * var(--marela-k));
	height: calc(37 * var(--marela-k));
	flex: none;
}

.site-nav {
	display: flex;
	align-items: center;
	gap: calc(24 * var(--marela-k));
	white-space: nowrap;
}

.site-nav a[aria-current="page"] {
	text-decoration: underline;
	text-underline-position: from-font;
}

.site-header__mail {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--marela-gutter);
	white-space: nowrap;
}

/* ==========================================================================
   4. Contenedor de página
   ========================================================================== */

.site {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: var(--marela-bg);
}

.site-main {
	flex: 1 0 auto;
}

/* ==========================================================================
   5. Catálogo
   ========================================================================== */

.claim {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: calc(427 * var(--marela-k));
	padding: calc(24 * var(--marela-k)) var(--marela-gutter);
	color: var(--marela-ink);
	font-size: var(--marela-size-claim);
	font-weight: 700;
	line-height: 1.2;
	text-wrap: balance;
}

.claim p + p {
	margin-top: 0;
}

.catalog {
	display: grid;
	grid-template-columns: repeat(var(--marela-columns), minmax(0, 1fr));
	column-gap: var(--marela-gap-x);
	row-gap: var(--marela-gap-y);
	padding: 0 var(--marela-gutter) calc(24 * var(--marela-k));
}

/* Celda vacía: ocupa sitio en la retícula y crea el hueco en blanco. */
.catalog__gap {
	aspect-ratio: var(--marela-card-ratio);
}

.product {
	display: flex;
	flex-direction: column;
	gap: calc(4 * var(--marela-k));
	aspect-ratio: var(--marela-card-ratio);
}

.product__media {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;
	background: #f2f2f0;
}

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

/* Todas las fotos ocupan el mismo hueco; solo se ve la activa. */
/* Capa clicable sobre la portada: abre la modal con la galería. */
.product__trigger {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
	appearance: none;
}

.product__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--marela-gutter);
	font-size: var(--marela-size-card);
	color: var(--marela-black);
	word-break: break-word;
}

.product__name {
	flex: 1 1 0;
	min-width: 0;
	font-weight: 400;
}

.product__price {
	flex: 0 0 auto;
	font-weight: 700;
	letter-spacing: calc(0.6 * var(--marela-k));
	text-align: right;
}

.catalog-empty {
	padding: 0 var(--marela-gutter) calc(96 * var(--marela-k));
	font-size: var(--marela-size-meta);
	color: var(--marela-muted);
}

/* ==========================================================================
   6. About
   --------------------------------------------------------------------------
   4 columnas: imagen en la 1, texto en la 3 (columnas 2 y 4 vacías).
   ========================================================================== */

.about {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--marela-gutter);
	align-items: start;
	min-height: calc(696 * var(--marela-k));
	padding: calc(48 * var(--marela-k)) var(--marela-gutter) calc(24 * var(--marela-k));
}

.about__media {
	grid-column: 1;
	position: relative;
	aspect-ratio: 332 / 322;
	overflow: hidden;
	background: #f2f2f0;
}

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

.about__text {
	grid-column: 3;
	color: var(--marela-ink);
	font-size: var(--marela-size-meta);
	/* Medium. Ojo: si el sistema no tiene Helvetica Neue Medium, el navegador
	   cae a Regular o lo simula. Ver el apartado de Tipografía del README. */
	font-weight: 500;
	line-height: 1.2;
}

.about__text p {
	margin: 0 0 1.2em;
}

.about__text p:last-child {
	margin-bottom: 0;
}

.about__text a {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: calc(16 * var(--marela-k));
	padding: calc(80 * var(--marela-k)) var(--marela-gutter) calc(16 * var(--marela-k));
	background: var(--marela-bg);
	font-size: var(--marela-size-nav);
	font-weight: 700;
	white-space: nowrap;
}

.site-footer__rights {
	flex: 1 1 0;
	min-width: 0;
}

.site-footer__logo {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
}

.site-footer__logo img {
	height: calc(32 * var(--marela-k));
	width: auto;
}

/* Respaldo cuando todavía no se ha subido el logotipo. */
.site-footer__logo-text {
	font-size: calc(34 * var(--marela-k));
	line-height: 1;
	letter-spacing: -0.01em;
}

.site-footer__follow {
	flex: 1 1 0;
	min-width: 0;
	text-align: right;
}

.site-footer__follow-label {
	color: var(--marela-muted);
	font-weight: 700;
}

.site-footer__follow a {
	font-weight: 700;
}

.site-footer__follow a:hover {
	text-decoration: underline;
	text-underline-position: from-font;
}

/* ==========================================================================
   8. Intro de vídeo + revelado de abajo arriba
   ========================================================================== */

.intro {
	position: fixed;
	inset: 0;
	z-index: 1;
	display: none;
	background: var(--marela-bg);
	overflow: hidden;
}

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

.intro__skip {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: transparent;
	cursor: pointer;
	font: inherit;
}

/* Estado activo: lo pone el script inline del <head>, antes del primer pintado. */
.marela-intro-active {
	overflow: hidden;
}

.marela-intro-active body {
	overflow: hidden;
}

.marela-intro-active .intro {
	display: block;
}

/* La web arranca fuera de pantalla, por debajo, y sube sobre el vídeo. */
.marela-intro-active .site {
	transform: translate3d(0, 100vh, 0);
	will-change: transform;
}

.marela-intro-active .site-header {
	opacity: 0;
}

.marela-intro-revealing .site {
	transform: translate3d(0, 0, 0);
	transition: transform var(--marela-reveal) var(--marela-ease);
}

.marela-intro-revealing .site-header {
	opacity: 1;
	transition: opacity 600ms ease 550ms;
}

/* Ligero desplazamiento del vídeo para que la subida no se sienta plana. */
.marela-intro-revealing .intro__video {
	transform: translate3d(0, -8vh, 0);
	transition: transform var(--marela-reveal) var(--marela-ease);
}

@media (prefers-reduced-motion: reduce) {
	.marela-intro-active .site,
	.marela-intro-revealing .site,
	.marela-intro-revealing .intro__video {
		transform: none;
		transition: none;
	}

	.marela-intro-active .intro {
		display: none;
	}

	.marela-intro-active,
	.marela-intro-active body {
		overflow: visible;
	}

	.marela-intro-active .site-header {
		opacity: 1;
	}
}

/* ==========================================================================
   9. Modal de galería
   --------------------------------------------------------------------------
   Pantalla completa sobre la web. En escritorio son tres columnas iguales: la
   foto activa en la del medio y las vecinas asomando al 50 % pegadas a los
   bordes. En móvil pasa a columna: la foto arriba y las dos vecinas debajo.
   ========================================================================== */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	flex-direction: column;
	gap: var(--marela-gutter);
	background: var(--marela-bg);
	opacity: 0;
	transition: opacity 300ms ease;
}

.lightbox.is-open {
	opacity: 1;
}

/* El atributo hidden del HTML no puede con un display explícito: hay que
   apagarlo aquí o la modal se quedaría siempre visible. */
.lightbox[hidden],
.lightbox__side[hidden] {
	display: none;
}

.marela-lightbox-open,
.marela-lightbox-open body {
	overflow: hidden;
}

/* Mientras la modal está abierta, la cabecera del sitio estorba. */
.marela-lightbox-open .site-header {
	opacity: 0;
	pointer-events: none;
}

/* --- Cabecera propia de la modal --- */

.lightbox__bar {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-left: var(--marela-gutter);
	color: #ffffff;
	mix-blend-mode: difference;
	font-size: var(--marela-size-nav);
	font-weight: 700;
	pointer-events: none;
}

.lightbox__close {
	padding: var(--marela-gutter);
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	pointer-events: auto;
}

/* --- Zonas de media pantalla --- */

.lightbox__zone {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 2;
	width: 50%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.lightbox__zone--prev {
	left: 0;
}

.lightbox__zone--next {
	right: 0;
}

/* Con una sola foto no hay nada que pasar. */
.lightbox--single .lightbox__zone {
	display: none;
}

/* --- Escenario --- */

.lightbox__stage {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: var(--marela-gutter);
	min-height: 0;
	padding: calc(75 * var(--marela-k)) var(--marela-gutter) var(--marela-gutter);
}

.lightbox__main {
	position: relative;
	z-index: 1;
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--marela-gutter);
	height: 100%;
	order: 2;
	pointer-events: none;
}

/* El ancho se toma del menor de dos límites: el de la columna (100%) y el que
   permite la altura de la ventana. Así la proporción se respeta siempre, sin
   depender de lo alta que sea la pantalla, y nunca hay desbordes. */
.lightbox__frame {
	flex: 0 1 auto;
	align-self: center;
	width: min(100%, calc((100vh - var(--marela-lightbox-chrome)) * 14 / 19));
	aspect-ratio: var(--marela-lightbox-ratio);
	overflow: hidden;
}

@supports (height: 100dvh) {
	.lightbox__frame {
		width: min(100%, calc((100dvh - var(--marela-lightbox-chrome)) * 14 / 19));
	}
}

/* `cover`: la foto llena el encuadre del diseño y se recorta lo que sobre, de
   modo que todas las piezas se ven con la misma forma. */
.lightbox__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lightbox__meta {
	flex: none;
	align-self: center;
	width: min(100%, calc((100vh - var(--marela-lightbox-chrome)) * 14 / 19));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--marela-gutter);
	font-size: var(--marela-size-card);
	color: var(--marela-black);
	word-break: break-word;
}

.lightbox__price {
	flex: none;
	font-weight: 700;
	letter-spacing: calc(0.6 * var(--marela-k));
	text-align: right;
}

/* --- Etiqueta NEXT / PREVIOUS pegada al cursor --- */

.lightbox__cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 4;
	padding: var(--marela-gutter);
	background: var(--marela-bg);
	color: var(--marela-black);
	font-size: var(--marela-size-card);
	font-weight: 400;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 160ms ease;
	pointer-events: none;
	will-change: transform;
}

.lightbox__cursor.is-visible {
	opacity: 1;
}

/* Con una sola foto, o sin ratón, la etiqueta no tiene sentido. */
.lightbox--single .lightbox__cursor {
	display: none;
}

@media (hover: none) {
	.lightbox__cursor {
		display: none;
	}
}

/* El puntero del sistema se esconde: la etiqueta pasa a ser el cursor. */
@media (hover: hover) {
	.lightbox:not(.lightbox--single) .lightbox__zone,
	.lightbox:not(.lightbox--single) .lightbox__side {
		cursor: none;
	}
}

/* --- Fotos vecinas --- */

.lightbox__sides {
	display: contents;
}

.lightbox__side {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 160ms ease;
}

.lightbox__side--prev {
	order: 1;
	justify-content: flex-start;
}

.lightbox__side--next {
	order: 3;
	justify-content: flex-end;
}

.lightbox__side:hover {
	opacity: 0.8;
}

/* Un tercio de su columna, que es un noveno de la pantalla: el tamaño al que
   las vecinas apenas se insinúan en los bordes, como en el diseño. */
.lightbox__side > *:not(.screen-reader-text) {
	flex: none;
	align-self: center;
	width: calc((100% - 2 * var(--marela-gutter)) / 3);
	height: auto;
	aspect-ratio: 450.67 / 691.5;
	object-fit: cover;
}

/* ==========================================================================
   10. Botón de menú y panel móvil
   ========================================================================== */

.site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--marela-gutter);
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	line-height: 0;
}

.site-header__toggle svg {
	width: var(--marela-icon);
	height: var(--marela-icon);
}

/* Con el panel abierto, la hamburguesa deja paso a la X. */
.site-header__toggle .icon-close,
.marela-menu-open .site-header__toggle .icon-menu {
	display: none;
}

.marela-menu-open .site-header__toggle .icon-close {
	display: block;
}

/* Panel a pantalla completa. Va por debajo de la cabecera (z-index 100) para
   que la marca y el icono sigan visibles y en modo difference sobre el panel. */
.menu-panel {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: none;
	flex-direction: column;
	padding: 0 var(--marela-gutter) calc(16 * var(--marela-k));
	background: var(--marela-bg);
	opacity: 0;
	visibility: hidden;
	transition: opacity 350ms ease, visibility 0s linear 350ms;
}

.menu-panel__nav {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: calc(24 * var(--marela-k));
	text-align: center;
	font-size: calc(20 * var(--marela-k));
	font-weight: 700;
	line-height: 1.3;
}

.menu-panel__nav a {
	display: block;
	transform: translateY(12px);
	opacity: 0;
	transition: transform 500ms var(--marela-ease), opacity 500ms ease;
}

.menu-panel__logo {
	flex: none;
	display: flex;
	justify-content: center;
}

.menu-panel__logo img {
	height: calc(48 * var(--marela-k));
	width: auto;
}

.menu-panel__logo-text {
	font-size: calc(34 * var(--marela-k));
	font-weight: 700;
	line-height: 1;
}

.marela-menu-open {
	overflow: hidden;
}

.marela-menu-open body {
	overflow: hidden;
}

.marela-menu-open .menu-panel {
	opacity: 1;
	visibility: visible;
	transition: opacity 350ms ease;
}

.marela-menu-open .menu-panel__nav a {
	transform: translateY(0);
	opacity: 1;
}

.marela-menu-open .menu-panel__nav a:nth-child(1) { transition-delay: 90ms; }
.marela-menu-open .menu-panel__nav a:nth-child(2) { transition-delay: 150ms; }
.marela-menu-open .menu-panel__nav a:nth-child(3) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
	.menu-panel,
	.menu-panel__nav a {
		transition: none;
	}

	.menu-panel__nav a {
		transform: none;
		opacity: 1;
	}
}

/* ==========================================================================
   11. Responsive
   --------------------------------------------------------------------------
   Con la escala proporcional, las separaciones ya se ajustan solas: aquí solo
   se decide CUÁNTAS columnas caben. La lógica es que 9 columnas es el diseño a
   su ancho natural (1368 px); por debajo de ahí se van quitando columnas para
   que las piezas no se queden diminutas.
   ========================================================================== */

@media (max-width: 1367px) {
	:root {
		--marela-columns: 7;
	}
}

@media (max-width: 1151px) {
	:root {
		--marela-columns: 5;
	}
}

@media (max-width: 1023px) {
	:root {
		--marela-columns: 4;
	}

	.about {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 0;
	}

	.about__text {
		grid-column: 2;
	}
}

@media (max-width: 899px) {
	:root {
		--marela-columns: 3;
	}
}

/* --------------------------------------------------------------------------
   Móvil: el diseño de móvil está hecho para 392 px, así que por debajo de
   768 px la escala se reancla a ese ancho en lugar de a 1368.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--marela-k: calc(clamp(0.85px, 100vw / 392, 1.15px) * var(--marela-zoom));
		--marela-columns: 2;

		/* En móvil las piezas respiran más que en escritorio: 40 px entre
		   columnas y 32 px entre filas, tal y como está en Figma. */
		--marela-gap-x: calc(40 * var(--marela-k));
		--marela-gap-y: calc(32 * var(--marela-k));

		/* El bloque de apertura baja de 25 a 24 px en móvil. */
		--marela-size-claim: calc(24 * var(--marela-k));

		/* En móvil el nombre y el precio van a 14, no a los 12 de escritorio. */
		--marela-size-card: calc(14 * var(--marela-k));

		/* El diseño móvil encuadra algo más cuadrado que el de escritorio. */
		--marela-lightbox-ratio: 4 / 5;
	}

	/* Cabecera: marca a la izquierda, icono a la derecha. */
	.site-header {
		padding-left: var(--marela-gutter);
	}

	.site-header__spacer,
	.site-nav,
	.site-header__mail {
		display: none;
	}

	.site-header__toggle {
		display: flex;
	}

	.site-header__group + .site-header__group {
		display: none;
	}

	/* Catálogo: la retícula se llena entera, sin huecos en blanco. */
	.catalog__gap {
		display: none;
	}

	/* About: una sola columna, foto a ancho completo y texto debajo. */
	.about {
		display: flex;
		flex-direction: column;
		/* Los mismos 32 px que separan las filas del catálogo, para que la
		   página respire igual que el resto del móvil. */
		gap: calc(32 * var(--marela-k));
		min-height: 0;
	}

	.about__media {
		width: 100%;
	}

	/* --- Modal en móvil: foto arriba, vecinas debajo --- */

	.lightbox__stage {
		flex-direction: column;
		justify-content: center;
		gap: calc(24 * var(--marela-k));
		padding: calc(104 * var(--marela-k)) var(--marela-gutter) var(--marela-gutter);
	}

	.lightbox__main {
		flex: none;
		order: 1;
		width: 100%;
		height: auto;
	}

	/* Aquí manda el ancho de la pantalla, no su altura. */
	.lightbox__frame,
	.lightbox__meta {
		width: 100%;
	}

	.lightbox__meta {
		font-size: var(--marela-size-meta);
	}

	.lightbox__price {
		letter-spacing: calc(0.7 * var(--marela-k));
	}

	/* Las dos vecinas comparten una fila, cada una en su extremo. */
	.lightbox__sides {
		order: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.lightbox__side {
		flex: none;
		width: 22.3%;
		height: auto;
	}

	.lightbox__side > *:not(.screen-reader-text) {
		width: 100%;
		height: auto;
	}

	/* Sin ratón no hay hover que dispare las etiquetas. */
	.lightbox__hint {
		display: none;
	}

	/* Footer apilado y en orden inverso al de escritorio. */
	.site-footer {
		flex-direction: column;
		align-items: center;
		gap: calc(152 * var(--marela-k));
		padding: var(--marela-gutter) var(--marela-gutter) calc(16 * var(--marela-k));
		text-align: center;
	}

	.site-footer__follow {
		order: 1;
	}

	.site-footer__logo {
		order: 2;
	}

	.site-footer__rights {
		order: 3;
	}

	.site-footer__rights,
	.site-footer__follow {
		flex: none;
		text-align: center;
	}
}

/* El panel de menú solo existe en móvil. */
@media (min-width: 768px) {
	.menu-panel {
		display: none !important;
	}
}

@media (max-width: 767px) {
	.menu-panel {
		display: flex;
	}
}