/* Umore theme styles — los tokens y las fuentes viven en tokens.css / fonts.css */

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

body {
	margin: 0;
	overflow-x: hidden;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Titulares con la display: en la marca siempre van en mayúsculas */
h1, h2, h3, h4,
.site-title,
.font-display {
	font-family: var(--font-heading);
	color: var(--color-heading);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	margin-block: 0 var(--space-sm);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Animación de entrada palabra por palabra (ver umoreInitTitleReveal en
   main.js). El span exterior recorta una línea de alto (overflow: hidden)
   para el efecto de "cortina"; el interior es el que de verdad se anima en
   Y. El título mantiene su texto real en aria-label, así que las palabras
   deben quedar ocultas para lectores de pantalla.

   El padding-top ensancha la zona visible por arriba para que las tildes de
   las mayúsculas (Á, Ó, É...) no queden cortadas por el overflow: hidden —
   sobresalen por encima de la altura de línea. El margin-top negativo, del
   mismo valor, devuelve la caja a su sitio: el título ocupa y se ve
   exactamente igual que sin este arreglo. El recorte por abajo, que es el
   que crea el efecto cortina mientras la palabra sube, no se toca. */
.word-reveal__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-top: 0.22em;
	margin-top: -0.22em;
}

.word-reveal__word {
	display: inline-block;
	will-change: transform, opacity;
}

a {
	color: inherit;
}

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

.container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* --- Header --- */

.site-header {
	position: relative;
	z-index: 20;
	margin-top: var(--space-md);
	padding-block: var(--space-md);
}

/* Fija la cabecera arriba de la ventana una vez que el hero sale de vista
   (clase añadida por main.js con IntersectionObserver). */
.site-header--stuck {
	position: fixed;
	inset-inline: 0;
	top: 0;
	padding-block: var(--space-xs);
	transition: padding-block var(--transition);
}

/* Reserva el alto de la cabecera fija en páginas internas (no home), donde
   no hay un IntersectionObserver que la cree dinámicamente al hacer scroll. */
.site-header-placeholder {
	height: calc(3rem + 2 * var(--space-xs));
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.site-branding {
	flex: 0 0 auto;
}

.site-title {
	display: inline-flex;
	text-decoration: none;
	margin: 0;
}

.site-title svg {
	height: 2.7rem;
	width: auto;
	display: block;
}

.site-nav {
	flex: 1 1 0;
	display: flex;
}

.site-nav--start {
	justify-content: flex-start;
}

.site-nav--end {
	justify-content: flex-end;
}

.footer-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-nav__list a {
	text-decoration: none;
	font-weight: 500;
}

.footer-nav__list a:hover {
	text-decoration: underline;
}

/*
 * Liquid glass (kube.io/blog/liquid-glass-css-svg): cada enlace es su propio
 * botón de vidrio (mismo padding que .btn, la pastilla genérica de la web),
 * no una cápsula compartida. El canto convexo se simula en capas:
 *
 *  1. .site-nav__link — el cristal: saturate+brightness de lo que hay detrás
 *     más la distorsión de refracción real vía #glass-distort (site-header.php),
 *     que ya incluye su propio specular highlight compuesto. Solo Chrome/Edge
 *     soportan hoy backdrop-filter: url(), por eso va detrás de un @supports;
 *     el resto de navegadores cae a un blur/saturate liso sin distorsión.
 *  2. ::before — tinte del cristal + halo especular CSS (mejora progresiva
 *     encima del specular del SVG, y único highlight donde no hay soporte).
 *  3. ::after — refracción del canto: aro claro arriba, sombra tenue abajo,
 *     como la luz entrando y saliendo por el borde curvo del vidrio.
 */
.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__item {
	position: relative;
}

.site-nav__link {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.85em 1.35em;
	border-radius: var(--radius);
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px) saturate(180%) brightness(1.08);
	-webkit-backdrop-filter: blur(4px) saturate(180%) brightness(1.08);
	box-shadow:
		0 10px 30px rgba(72, 43, 21, 0.035),
		0 2px 8px rgba(72, 43, 21, 0.015),
		inset 0 1px 1px rgba(255, 255, 255, 0.45),
		inset 0 -1.5px 2px -1px rgba(72, 43, 21, 0.08),
		inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
	white-space: nowrap;
	transition: transform var(--transition);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	transform: translateY(-2px);
}

@supports (backdrop-filter: url(#a)) or (-webkit-backdrop-filter: url(#a)) {
	.site-nav__link {
		backdrop-filter: url(#glass-distort) blur(3px) saturate(180%) brightness(1.06);
		-webkit-backdrop-filter: blur(3px) saturate(180%) brightness(1.06);
	}
}

.site-nav__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background:
		radial-gradient(200% 220% at 30% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.03) 100%);
	mix-blend-mode: overlay;
}

/* --- Botón flotante de WhatsApp --- */

/* right usa --container-padding (mismo margen lateral que el resto del
   contenido del sitio) en vez de un valor fijo, para que respete el ancho
   de página en cualquier breakpoint en vez de quedar pegado al borde. */
.whatsapp-float {
	position: fixed;
	z-index: 30;
	right: var(--container-padding);
	bottom: var(--space-md);
	width: 3.5rem;
	height: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--umore-green);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	transition: background-color var(--transition), transform var(--transition);
}

.whatsapp-float:hover {
	background-color: var(--umore-green-hover);
	transform: scale(1.06);
}

.whatsapp-float img {
	width: 1.75rem;
	height: 1.75rem;
}

/* Botón flotante de ajustes de cookies (plugin GDPR Cookie Compliance):
   mismo margen lateral que el resto del contenido, en la esquina opuesta al
   de WhatsApp y centrado verticalmente con él (el botón del plugin mide
   40px y el de WhatsApp 3.5rem). El body + :not() supera la especificidad
   de la regla del plugin (bottom/left: 20px). */
body #moove_gdpr_save_popup_settings_button:not(.gdpr-floating-button-custom-position) {
	left: var(--container-padding);
	bottom: calc(var(--space-md) + (3.5rem - 40px) / 2);
}

/* --- Footer --- */

.site-footer {
	position: relative;
	background-color: var(--color-bg);
	margin-top: 10rem;
	padding-top: var(--space-xl);
	padding-bottom: 1rem;
	overflow: hidden;
}

.site-footer__icon {
	position: absolute;
	top: var(--space-xl);
	right: var(--container-padding);
	width: auto;
	height: 11.8rem;
}

.site-footer__icon img {
	width: auto;
	height: 100%;
}

.site-footer__logo {
	padding-inline: var(--container-padding);
	margin-bottom: 8rem;
}

.site-footer__logo img {
	width: 100%;
	max-width: 38rem;
	height: auto;
}

.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
}

.site-footer__locations {
	display: flex;
	gap: var(--space-lg);
}

.footer-location {
	flex: 0 0 auto;
}

.footer-location__title {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	margin-bottom: var(--space-sm);
}

.footer-location__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	margin: 0 0 var(--space-md);
}

.footer-location__text a {
	color: inherit;
	text-decoration: none;
}

.footer-location__text a {
	transition: opacity var(--transition);
}

.footer-location__text a:hover {
	opacity: 0.6;
}

/* Fila de iconos de redes sociales: solo se muestra en móvil (sustituye
   a la columna "Social" de texto, que sigue viéndose en desktop/tablet). */
.site-footer__social {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity var(--transition);
}

.site-footer__social a:hover {
	opacity: 0.6;
}

.site-footer__social img {
	width: 32px;
	height: 32px;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: end;
	gap: var(--space-xl);
}

.footer-column__title {
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: normal;
	font-size: 14px;
	font-weight: 700;
	line-height: normal;
	margin-bottom: var(--space-sm);
}

.footer-column__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-column__list a {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	color: inherit;
	text-decoration: none;
	transition: opacity var(--transition);
}

.footer-column__list a:hover {
	opacity: 0.6;
}

.site-footer__divider {
	margin: var(--space-xl) 0 1rem;
	border: none;
	border-top: 1px solid var(--umore-brown-dark);
}

.site-footer__copy {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	text-align: center;
	margin: 0;
}

.site-footer__copy a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--transition);
}

.site-footer__copy a:hover {
	opacity: 0.6;
}

/* --- Botones --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	padding: 0.75em 1.75em;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background-color: var(--color-primary);
	color: var(--color-on-primary);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
	background-color: var(--umore-primary-hover);
	color: var(--color-on-primary);
}

.btn--secondary {
	background-color: var(--color-secondary);
	color: var(--color-on-secondary);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	background-color: var(--umore-secondary-hover);
	color: var(--color-on-secondary);
}

.btn--green {
	background-color: var(--color-accent);
	color: var(--color-on-accent);
}

.btn--green:hover,
.btn--green:focus-visible {
	background-color: var(--umore-green-hover);
	color: var(--color-on-accent);
}

/* Variante de contorno, sobre el fondo crema */
.btn--outline {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-on-primary);
}

/* Foco visible y accesible en toda la web */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* --- Hero (home) --- */

.hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	padding-top: 18rem;
}

.hero__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: absolute;
	inset-inline: 0;
	top: var(--space-md);
	z-index: 3;
	pointer-events: none;
}

.hero__bar .btn {
	pointer-events: auto;
}

.btn--hero {
	padding: 0.85em 1.35em;
	font-size: 14px;
	font-weight: 400;
}

.btn--hero-primary {
	background-color: var(--umore-primary);
	color: var(--umore-bg);
	border: 1px solid var(--umore-primary);
}

.btn--hero-primary:hover,
.btn--hero-primary:focus-visible {
	background-color: var(--umore-bg);
	color: var(--umore-primary);
	border-color: var(--umore-primary);
}

.btn--hero-secondary {
	background-color: var(--umore-secondary);
	color: var(--umore-bg);
	border: 1px solid var(--umore-secondary);
}

.btn--hero-secondary:hover,
.btn--hero-secondary:focus-visible {
	background-color: var(--umore-bg);
	color: var(--umore-secondary);
	border-color: var(--umore-secondary);
}

.btn--hero-green {
	background-color: var(--umore-green);
	color: var(--umore-bg);
	border: 1px solid var(--umore-green);
}

.btn--hero-green:hover,
.btn--hero-green:focus-visible {
	background-color: var(--umore-bg);
	color: var(--umore-green);
	border-color: var(--umore-green);
}

.hero__media {
	position: relative;
	display: flex;
	justify-content: center;
	/* La foto se desborda contra el borde superior de la ventana */
	margin-top: -33vw;
}

.hero__photo-wrap {
	position: relative;
	width: min(72vw, 1450px);
}

.draggable-icon {
	cursor: grab;
	touch-action: none;
	-webkit-user-drag: none;
	user-select: none;
	/* Fuerza la capa de composición desde el inicio: sin esto, el primer
	   transform que aplica GSAP (aunque sea translate(0,0)) la crea recién al
	   tocar el icono, y ese cambio de capa se percibe como un pequeño salto. */
	will-change: transform;
}

.draggable-icon.is-dragging {
	cursor: grabbing;
}

.hero__icon {
	position: absolute;
	z-index: 2;
	height: auto;
}

/* Posiciones en % del tamaño de la foto, no del viewport, para que la
   relación visual se mantenga aunque la foto toque su tope de min(). */
.hero__icon--cocinero {
	left: -5.5%;
	top: 50%;
	width: 15.5%;
}

.hero__icon--cartel {
	left: 15%;
	top: 84%;
	width: 15.5%;
}

.hero__icon--circulo {
	right: -1%;
	top: 66%;
	width: 13.5%;
}

.hero__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	transform: rotate(165deg); /* estado inicial; el scroll lo anima vía GSAP (main.js) */
}

.hero__content {
	padding-block: 0 var(--space-lg);
	margin-top: 1rem;
}

.hero__title {
	max-width: 1200px;
	margin-inline: auto;
	font-size: 96px;
	line-height: 0.95;
	margin-bottom: var(--space-sm);
}

.hero__subtitle {
	max-width: 580px;
	margin-inline: auto;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: normal;
	color: var(--color-text);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.hero__subtitle.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* El hero (padding-top, -33vw de .hero__media y min(72vw, 1450px) de
   .hero__photo-wrap) está calibrado para pantallas QHD (2560px), donde el
   alto de viewport sobra de sobra para esa foto tan grande. En portátiles
   Full HD y menores, el alto de viewport es mucho más ajustado: la foto
   (basada en vw, no en vh) sigue midiendo casi lo mismo en px pero ya no
   cabe holgada, y tapa el título y la barra de arriba. Se reduce en dos
   escalones el padding del hero, el tamaño de la foto y cuánto sube. */
@media (max-width: 1920px) {
	.hero {
		padding-top: 10rem;
	}

	.hero__photo-wrap {
		width: min(52vw, 1000px);
	}

	.hero__media {
		margin-top: -14vw;
	}
}

/* Portátiles Full HD (1920x1080 y resoluciones de alto similar o menor):
   el ancho ya activa el escalón de arriba, pero el alto de viewport es el
   cuello de botella real, no el ancho. Con solo 1080px de alto la foto
   (mismo tamaño que el escalón de arriba) sigue sin caber y empuja el
   título fuera de vista. Se sube más la foto, sin tocar su tamaño. */
@media (max-width: 1920px) and (max-height: 1100px) {
	.hero {
		padding-top: 6rem;
	}

	.hero__media {
		margin-top: -27vw;
	}
}

/* Hasta 1728px: además de portátiles Windows (1366/1440), cubre los
   MacBook grandes en puntos CSS Retina (Pro 14"=1512, Air 15"=1470,
   Pro 16"=1728). */
@media (max-width: 1728px) {
	.hero {
		padding-top: 8rem;
	}

	.hero__photo-wrap {
		width: min(46vw, 780px);
	}

	.hero__media {
		margin-top: -10vw;
	}

	.hero__title {
		font-size: clamp(48px, -21.82px + 6.818vw, 96px);
	}
}

@media (max-width: 900px) {
	.hero__title {
		font-size: var(--fs-h1);
	}

	.hero__photo-wrap {
		width: min(80vw, 500px);
	}

	.hero__media {
		margin-top: -3rem;
	}
}

/* --- Sobre nosotros --- */

.about {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-xl);
	padding-block: var(--space-xl);
	margin-bottom: 24rem;
}

.about__gallery {
	position: relative;
	margin-inline: 8%;
}

/* El parallax mueve el frame completo (ver data-parallax-speed en JS), no
   solo la foto dentro de él, así que cada recuadro se desplaza entero. */
.about__frame {
	border-radius: 30px;
	will-change: transform;
}

.about__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.about__frame--main {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
}

.about__frame--top {
	position: absolute;
	top: 8%;
	left: -9%;
	width: 30%;
	aspect-ratio: 3 / 4;
	z-index: 2;
}

.about__frame--bottom {
	position: absolute;
	right: -9%;
	top: 66%;
	width: 38%;
	aspect-ratio: 3 / 4;
	z-index: 2;
}

.about__title {
	font-size: 74px;
	line-height: 0.93;
	max-width: 760px;
}

.about__text {
	font-family: var(--font-body);
	font-size: 24px;
	line-height: normal;
	max-width: 520px;
}

.about__text a {
	text-decoration: underline;
}

.about__text {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.about__text.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.about__actions {
	display: flex;
	gap: var(--space-sm);
	margin-top: var(--space-md);
}

@media (max-width: 560px) {
	.hero__bar {
		gap: var(--space-xs);
	}

	.btn--hero {
		padding: 0.7em 1.1em;
		font-size: 13px;
	}
}

/* --- Nuestros destacados --- */

.destacados {
	position: relative;
	background-color: #E5D6C9;
	padding-block: var(--space-xl);
	margin-bottom: 24rem;
}

/* overflow-x (no overflow a secas) en el .container interno, NO en
   .destacados: recorta solo el desborde horizontal de las fotos de pizza
   al rotar durante su animación de entrada (ver
   umoreInitDestacadosPhotosReveal), que en móvil generaba scroll
   horizontal en toda la página. destacados__top-edge/bottom-edge son
   hermanos de este .container (viven fuera, pegados a .destacados) y
   sobresalen A PROPÓSITO por arriba y por abajo (translateY ±99%) para
   simular el borde ondulado de la sección — poniendo esto en .destacados
   los afectaba también. Nota: NO alcanza con overflow-x:hidden +
   overflow-y:visible en el mismo elemento — la spec de CSS fuerza que un
   overflow-y "visible" se compute como "auto" en cuanto el otro eje es
   hidden/scroll/auto, así que igual aparecía una barra de scroll vertical
   interna aquí si se aplicaba sobre .destacados (que si tiene overflow
   vertical real por los edges). Al recortar solo el .container (que no
   tiene ningún contenido que se salga verticalmente) el problema no se
   presenta. */
.destacados > .container {
	overflow-x: hidden;
}

.destacados__top-edge {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(-99%);
}

.destacados__bottom-edge {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
	transform: translateY(99%);
}

.destacados__heading {
	text-align: center;
}

.destacados__title {
	font-size: 96px;
	line-height: 0.837;
	color: var(--color-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
}

.destacados__dash {
	color: var(--color-accent);
}

.destacados__subtitle {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-top: 2.5rem;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.destacados__subtitle.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.destacados__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}

.destacado-card {
	text-align: center;
}

.destacado-card__photo-wrap {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: var(--space-md);
}

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

.destacado-card__title {
	font-size: 40px;
	font-weight: 400;
	margin-bottom: 0;
}

.destacado-card__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	max-width: 300px;
	margin: 0.25rem auto 0;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.destacado-card__text.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.destacados__closing {
	text-align: center;
	margin-top: var(--space-xl);
}

.destacados__closing-text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	max-width: 550px;
	margin-inline: auto;
}

.destacados__closing-text + .destacados__closing-text {
	margin-top: var(--space-sm);
}

.destacados__closing .btn {
	margin-top: 0.85rem;
}

@media (max-width: 900px) {
	.destacados__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Menús de grupos y empresas --- */

.menus {
	padding-block: var(--space-xl);
	margin-bottom: 20rem;
	/* overflow-x (no overflow a secas): mismo motivo que en .destacados de
	   arriba — recorta solo el desborde horizontal de las cards rotadas
	   (menus-card--left/right), sin arriesgarse a cortar nada que dependa
	   de sobresalir verticalmente. overflow-y:visible explícito por el
	   mismo motivo que en .destacados: sin él, el navegador aplica
	   overflow-y:auto por defecto y puede meter una barra de scroll interna
	   no deseada. */
	overflow-x: hidden;
	overflow-y: visible;
}

.menus__deck {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2.5rem;
	padding-block: var(--space-lg);
}

.menus-card {
	border-radius: 30px;
	overflow: hidden;
	transition: transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.menus-card--photo {
	flex: 0 0 auto;
	width: 30%;
	max-width: 480px;
	aspect-ratio: 3 / 4;
}

.menus-card--left {
	transform: rotate(-11deg) translateY(8.5rem);
	z-index: 1;
	margin-right: 1rem;
}

.menus-card--left:hover {
	transform: rotate(-11deg) translateY(8.5rem) scale(1.11);
}

.menus-card--right {
	transform: rotate(11deg) translateY(8.5rem);
	z-index: 3;
	margin-left: 2rem;
}

.menus-card--right:hover {
	transform: rotate(11deg) translateY(8.5rem) scale(1.11);
}

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

.menus-card--content {
	flex: 0 0 auto;
	width: 33%;
	max-width: 520px;
	aspect-ratio: 3 / 4;
	background-color: var(--color-accent);
	color: #EBDFD4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--space-lg);
	z-index: 2;
	margin-inline: -3rem;
}

.menus-card--content:hover {
	transform: scale(1.11);
}

.menus-card__title {
	color: #EBDFD4;
	font-size: 70.45px;
	line-height: 1.05;
	margin-bottom: var(--space-md);
}

.menus-card__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
}

.menus-card__text + .menus-card__text {
	margin-top: var(--space-sm);
}

.menus__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

/* --- Umore (significado) --- */

.significado {
	position: relative;
}

/* Fijada con ScrollTrigger (pin: true, ver umoreInitSignificadoStack en
   main.js) en vez de position: sticky — sticky se despega en cuanto quedan
   menos de 100vh de .significado por debajo, mucho antes de que termine el
   recorrido reservado por __spacer y __cover-spacer; pin: true la mantiene
   fija (position: fixed) durante todo ese recorrido sin ese límite. */
.significado__pin {
	/* Fallback si JS no corre; umoreInitSignificadoStack (main.js) fija este
	   height inline con un valor estable en px, por el mismo motivo que el
	   top de .significado__stack-frame más abajo (ver su comentario).
	   dvh y no vh: en móvil el pin es fixed y la barra del navegador se retrae
	   al bajar, así que la altura que rige durante la animación es la de la
	   pantalla completa. */
	height: 100dvh;
	overflow: hidden;
	display: flex;
	align-items: center;
	padding-block: var(--space-xl);
	text-align: center;
}

.significado__inner {
	position: relative;
	z-index: 1;
}

/* Recorrido de scroll extra dentro de la sección: mientras dura, el stack
   de fotos sube y pasa por delante del texto (ver main.js). */
.significado__spacer {
	height: 240vh;
}

/* Pausa entre que la última foto del stack termina de subir y que .proceso
   empieza a asomar por abajo: nada se anima durante este tramo, solo pasa
   scroll, para que la última foto se quede quieta en pantalla un momento
   antes de que arranque el siguiente efecto. */
.significado__pause-spacer {
	height: 60vh;
}

/* Tramo de scroll dedicado a que .proceso suba y cubra por completo esta
   sección (pineada) antes de despegarse — ver umoreInitProcesoCover en
   main.js. */
.significado__cover-spacer {
	height: 100vh;
}

.significado__stack {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.significado__stack-frame {
	position: absolute;
	left: 50%;
	/* Fallback si JS no corre; umoreInitSignificadoStack (main.js) fija este
	   top inline con el mismo px que la altura del pin. dvh y no vh por el
	   mismo motivo que el height del pin: la foto parte de su filo inferior,
	   y si ese filo se mide con la barra del navegador desplegada, la foto
	   queda cortada con un hueco debajo al retraerse la barra. */
	top: 100dvh;
	width: min(26vw, 380px);
	aspect-ratio: 3 / 4;
	/* Antes: margin-left: min(-13vw, -190px) — con dos negativos, min() se
	   queda con el más negativo (-13vw en pantallas anchas), no con el de
	   menor magnitud, así que el margen crecía sin tope y descentraba el
	   frame hacia la izquierda en vez de topar en -190px como el width topa
	   en 380px. calc() referenciando el mismo min() de la línea de arriba
	   asegura que el margen sea siempre exactamente la mitad negativa del
	   ancho real, cualquiera que sea. No se puede centrar con
	   transform: translateX(-50%) porque main.js anima translate/rotate por
	   GSAP sobre el transform de este mismo elemento y lo pisaría. */
	margin-left: calc( -1 * min(26vw, 380px) / 2 );
	border-radius: 30px;
	overflow: hidden;
	will-change: transform;
}

.significado__stack-frame[data-stack-index="0"] {
	z-index: 1;
}

.significado__stack-frame[data-stack-index="1"] {
	z-index: 2;
}

.significado__stack-frame[data-stack-index="2"] {
	z-index: 3;
}

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

.significado__wordmark-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5rem;
}

.significado__wordmark {
	width: min(50vw, 763px);
	height: auto;
	flex: 0 0 auto;
}

.significado__label {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.021;
	text-transform: uppercase;
	color: var(--color-heading);
	flex: 0 0 auto;
	max-width: 220px;
}

.significado__text {
	max-width: 630px;
	margin-inline: auto;
	margin-top: 5rem;
}

.significado__paragraph {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.significado__paragraph.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.significado__paragraph + .significado__paragraph {
	margin-top: var(--space-md);
}

/* --- Proceso (masa, ingredientes, técnica) --- */

/* Durante .significado__cover-spacer (ver main.js) esta sección se anima con
   translateY desde fuera del viewport hasta cubrir la pantalla por completo,
   mientras .significado__pin sigue pineada debajo. Fondo opaco + esquinas
   redondeadas arriba para que se lea como un panel que sube y tapa. Una vez
   cubre el 100vh, main.js quita el transform y el scroll pasa a ser el
   recorrido normal (no pineado) de esta sección. */
.proceso {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: 50% 50%;
	align-items: start;
	background-color: var(--color-bg);
	border-radius: 40px 40px 0 0;
}

/* La foto queda fija (sticky) durante todo el recorrido de los 3 bloques
   de la derecha, no se repone por bloque — de ahí vivir a nivel de sección
   y no dentro de cada .proceso__row. */
.proceso__photo-fixed {
	height: 100vh;
	position: sticky;
	top: 0;
}

.proceso__photo-fixed-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 30px 30px 0;
}

.proceso__photo-cta {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
}

.proceso__right {
	display: flex;
	flex-direction: column;
}

.proceso__row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	min-height: 100vh;
}

.proceso__content {
	padding: var(--space-xl) 0 var(--space-xl) var(--space-lg);
	margin-top: 8rem;
}

.proceso__title {
	font-size: 64px;
	font-weight: 400;
	line-height: 0.834;
	max-width: 480px;
	margin-bottom: var(--space-md);
}

/* "A la derecha del todo": anclado al borde derecho de .proceso__row, que
   ya coincide con el borde derecho de la pantalla (la mitad izquierda de
   la sección la ocupa la foto fija). */
.proceso__icon {
	position: absolute;
	top: 14.5rem;
	right: var(--space-lg);
	width: auto;
	height: 32px;
}

.proceso__icon--grande {
	height: 48px;
}

.proceso__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	max-width: 340px;
}

/* Último bloque ("Tiempo, temperatura y muchas pruebas"): un poco más
   ancho que los otros dos, que comparten .proceso__text sin distinguirse
   por clase propia. */
.proceso__row:last-of-type .proceso__text {
	max-width: 460px;
}

.proceso__text + .proceso__text {
	margin-top: var(--space-sm);
}

.proceso__photo-secondary-wrap {
	align-self: start;
	padding-right: var(--space-lg);
	/* Alinea el tope de la foto con el pie del bloque de texto (título +
	   párrafos) del mismo .proceso__row; ver .proceso__content de abajo. */
	margin-top: calc(8rem + 30.3rem + 1rem);
}

.proceso__photo-secondary {
	width: 100%;
	height: auto;
	border-radius: 30px;
}

/* --- Umore (espacio) --- */

.espacio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	gap: var(--space-lg);
	padding-inline: var(--container-padding);
	padding-top: var(--space-xl);
}

.espacio__gallery {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.espacio__frame {
	width: 100%;
}

.espacio__photo {
	width: 100%;
	height: auto;
	border-radius: 30px;
}

.espacio__content {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: var(--space-xl);
	padding-left: var(--space-lg);
}

.espacio__icon {
	align-self: flex-start;
	width: auto;
	height: 105px;
	margin-bottom: var(--space-md);
}

.espacio__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 70.45px;
	line-height: 0.94;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	max-width: 620px;
	margin-bottom: 0.6rem;
}

.espacio__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	max-width: 620px;
}

.espacio__text p + p {
	margin-top: var(--space-md);
}

.espacio__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: 1.4rem;
}

/* --- Umore Deli --- */

.deli {
	position: relative;
	height: 100vh;
	margin-top: 10rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	overflow: hidden;
}

.deli__bg {
	position: absolute;
	top: -10%;
	left: 0;
	width: 100%;
	height: 120%;
	object-fit: cover;
}

.deli__overlay {
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0.2;
}

.deli__seal {
	position: relative;
	z-index: 1;
	width: min(42vw, 812px);
	aspect-ratio: 812 / 839;
	margin-right: clamp( var(--space-lg), 6vw, 8rem );
}

.deli__seal-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.deli__seal-content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 3.5rem;
}

.deli__title {
	font-size: 64px;
	font-weight: 400;
	line-height: 0.86;
	margin-bottom: var(--space-md);
}

.deli__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	width: 22rem;
	margin-left: auto;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.deli__text.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.deli__text + .deli__text {
	margin-top: var(--space-sm);
}

/* El texto queda anclado abajo del sello, el título+botón arriba. */
.deli__text:first-of-type {
	margin-top: auto;
}

/* --- Umore Deli Murcia (page-deli.php) --- */

.deli-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	margin-top: calc(-1 * (3rem + 2 * var(--space-xs)));
}

.deli-hero__content {
	position: sticky;
	top: calc(3rem + 2 * var(--space-xs));
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--space-xl);
	padding-bottom: var(--space-lg);
	padding-inline: var(--container-padding);
}

.deli-hero__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 128px;
	line-height: 0.91;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	max-width: 620px;
	margin-top: clamp(0px, 8vh, calc(var(--space-lg) * 4));
	margin-bottom: var(--space-lg);
}

.deli-hero__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	max-width: 560px;
	margin-top: auto;
}

.deli-hero__text p + p {
	margin-top: var(--space-md);
}

.deli-hero__text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.deli-hero__text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.deli-hero__media {
	position: sticky;
	top: 0;
	height: 100vh;
}

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

.deli-hero__icon {
	position: absolute;
	left: 2.5rem;
	bottom: 11rem;
	width: auto;
	height: 80px;
}

.deli-hero__seal {
	position: absolute;
	left: -8rem;
	bottom: 3.5rem;
	width: auto;
	height: 111px;
}

/* --- Testimonios --- */

.testimonios {
	padding-top: 12rem;
	padding-bottom: var(--space-xl);
}

.testimonios__heading {
	text-align: center;
}

.testimonios__title {
	font-size: 64px;
	line-height: normal;
	max-width: none;
}

.testimonios__subtitle {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-text);
	max-width: 26rem;
	margin-inline: auto;
	margin-top: var(--space-md);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.testimonios__subtitle.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.testimonios__widget {
	display: grid;
	grid-template-columns: 15rem minmax(0, 1fr);
	align-items: start;
	gap: var(--space-md);
	max-width: 88rem;
	margin-inline: auto;
	margin-top: var(--space-xl);
}

/* min-height = alto de una card sin expandir, para que el resumen quede
   centrado con ellas y no se mueva cuando una card se abre con "Leer más". */
.testimonios__resumen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 253px;
	gap: 0.5rem;
	text-align: center;
	color: var(--color-heading);
	text-decoration: none;
}

.testimonios__resumen-label {
	font-family: var(--font-heading);
	font-size: 32px;
	line-height: 1;
	text-transform: uppercase;
}

.testimonios__resumen-total {
	font-size: 14px;
	color: var(--color-text);
}

.testimonios__resumen-google {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 14px;
	color: var(--color-text);
}

.testimonios__resumen-google svg {
	width: 18px;
	height: 18px;
}

.testimonios__estrellas {
	display: inline-flex;
	gap: 2px;
	color: #F6BB06;
}

.testimonios__estrellas svg {
	width: 18px;
	height: 18px;
}

.testimonios__estrellas--grande svg {
	width: 32px;
	height: 32px;
}

.testimonios__carrusel {
	position: relative;
}

.testimonios__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 2 * var(--space-sm)) / 3);
	align-items: start;
	gap: var(--space-sm);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.testimonios__track::-webkit-scrollbar {
	display: none;
}

.testimonio-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-height: 15rem;
	padding: 1.5rem;
	background: var(--umore-white);
	border-radius: 12px;
	scroll-snap-align: start;
	color: var(--color-text);
}

.testimonio-card__header {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.testimonio-card__avatar {
	display: grid;
	place-items: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 18px;
	color: var(--umore-white);
	background: var(--color-primary);
}

.testimonio-card--color-1 .testimonio-card__avatar {
	background: var(--color-secondary);
}

.testimonio-card--color-2 .testimonio-card__avatar {
	background: var(--color-accent);
}

.testimonio-card__autor {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1;
}

.testimonio-card__nombre {
	font-weight: 500;
	font-size: 15px;
	color: var(--color-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.testimonio-card__fecha {
	font-size: 13px;
	opacity: 0.7;
}

.testimonio-card__google svg {
	display: block;
	width: 20px;
	height: 20px;
}

.testimonio-card__texto {
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}

.testimonio-card__texto p {
	margin: 0;
}

.testimonio-card__texto p + p {
	margin-top: 0.75em;
}

.testimonio-card.is-expanded .testimonio-card__texto {
	display: block;
	-webkit-line-clamp: unset;
}

.testimonio-card__mas {
	align-self: flex-start;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--color-text);
	opacity: 0.7;
	text-decoration: underline;
	cursor: pointer;
}

.testimonio-card__mas[hidden] {
	display: none;
}

.testimonios__flecha {
	position: absolute;
	top: 7.5rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--umore-white);
	color: var(--color-heading);
	box-shadow: 0 2px 10px rgba(72, 43, 21, 0.15);
	cursor: pointer;
	transform: translateY(-50%);
	transition: opacity 0.2s ease;
}

.testimonios__flecha svg {
	width: 20px;
	height: 20px;
}

.testimonios__flecha--prev {
	left: -20px;
}

.testimonios__flecha--next {
	right: -20px;
}

.testimonios__flecha:disabled {
	opacity: 0;
	pointer-events: none;
}

/* --- Contacto --- */

.contacto {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	margin-top: calc(-1 * (3rem + 2 * var(--space-xs)));
}

.contacto__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding-inline: var(--container-padding);
	padding-top: calc(var(--space-xl) + 3rem + 2 * var(--space-xs));
}

.contacto__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 96px;
	line-height: 0.96;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	max-width: 620px;
	margin-bottom: var(--space-md);
}

.contacto__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	max-width: 600px;
}

.contacto__text p + p {
	margin-top: var(--space-md);
}

.contacto__text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.contacto__text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.contacto__ubicaciones {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	max-width: 95%;
	margin-top: 11rem;
}

.contacto__form-card {
	max-width: 95%;
	margin-top: 2.5rem;
	padding: var(--space-md);
	border-radius: 30px;
	background-color: var(--umore-white);
}

.contacto__form-title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 0.92;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	max-width: 240px;
	margin-bottom: var(--space-md);
}

.contacto__form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-sm);
}

.contacto__form-row + .contacto__form-row {
	margin-top: 1.5rem;
}

.contacto__field {
	display: flex;
	flex-direction: column;
}

.contacto__field--full {
	grid-column: 1 / -1;
}

.contacto__field label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
}

.contacto__field input,
.contacto__field textarea {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--color-heading);
	background: transparent;
	padding-block: 0.25rem;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--color-text);
	resize: none;
}

.contacto__field textarea {
	min-height: 1.6em;
}

.contacto__field input::placeholder,
.contacto__field textarea::placeholder {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--color-text);
	opacity: 1;
}

.contacto__field input:focus,
.contacto__field textarea:focus {
	outline: none;
}

.contacto__form-consent {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	margin-top: var(--space-md);
}

.contacto__form-consent input[type="checkbox"] {
	appearance: none;
	width: 1.1rem;
	height: 1.1rem;
	border: 1px solid var(--color-primary);
	border-radius: 6px;
	background-color: var(--umore-white);
	cursor: pointer;
}

.contacto__form-consent input[type="checkbox"]:checked {
	background-color: var(--color-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l3.5 3.5L13 5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 70%;
}

.contacto__form-consent label {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-text);
}

.contacto__form-consent label a {
	color: inherit;
	text-decoration: underline;
}

.contacto__form-submit {
	margin-top: var(--space-md);
}

.contacto__form-submit:hover,
.contacto__form-submit:focus-visible {
	background-color: var(--umore-white);
}

.ubicacion-card--stack {
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

.contacto__media {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

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

.contacto__photo {
	position: absolute;
	inset: 0;
	margin: auto;
	max-width: 48%;
	border-radius: 30px;
	box-shadow: 0 2rem 4rem rgba( 0, 0, 0, 0.25 );
}

/* --- Ubicaciones --- */

.ubicaciones {
	padding-top: 16rem;
	padding-bottom: 0;
	margin-bottom: -8rem;
}

.ubicaciones__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-md);
	padding-inline: clamp( var(--space-lg), 6vw, 8rem );
}

/* display: block + margin-inline: auto para que el 85% de ancho quede
   centrado dentro de su columna: como inline, la ilustración se pegaba a la
   izquierda y todo el hueco sobrante caía a la derecha, que es lo que la
   hacía verse descentrada (se nota sobre todo en móvil, donde el contenedor
   ya va centrado con max-width). */
.ubicaciones__illustration img {
	display: block;
	width: 85%;
	height: auto;
	margin-inline: auto;
}

.ubicaciones__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	max-width: 95%;
}

.ubicacion-card {
	display: grid;
	grid-template-columns: 16rem 1fr;
	gap: 12rem;
	padding: var(--space-md);
	border-radius: 30px;
	color: var(--umore-bg);
}

.ubicacion-card:not(.ubicacion-card--stack) {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}

.ubicacion-card:not(.ubicacion-card--stack).is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ubicacion-card--oliva {
	background-color: var(--umore-green);
}

.ubicacion-card--burdeos {
	background-color: var(--umore-secondary);
}

.ubicacion-card__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	height: 100%;
}

.ubicacion-card__title {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--space-sm);
	color: var(--umore-bg);
	font-size: 40px;
	font-weight: 400;
	line-height: normal;
	white-space: nowrap;
	margin-bottom: var(--space-sm);
}

/* Salto de línea forzado tras "Umore" (ver markup en section-contacto.php)
   que solo hace falta en el rango de portátil — aquí, en el resto de
   resoluciones (escritorio grande, tablet, móvil), se anula para que el
   título vuelva a su única línea. */
.ubicacion-card__title-break {
	display: none;
}

/* El pin es una gota alta y estrecha (viewBox 25x36, sin margen interno),
   así que con align-items: center los centros coinciden pero el icono
   sobresale por arriba y por abajo de las mayúsculas y se lee como
   desalineado. Se escala con em para que su alto siga al del texto y se
   baja el borde inferior al de las letras: así queda ópticamente centrado
   sobre la palabra en lugar de sobre la caja de línea. */
.ubicacion-card__pin {
	width: auto;
	height: 1em;
	align-self: center;
	position: relative;
	top: -0.02em;
}

.ubicacion-card__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.4;
	margin: 0;
}

.ubicacion-card__text a {
	color: inherit;
	text-decoration: none;
	transition: opacity var(--transition);
}

.ubicacion-card__text a:hover {
	opacity: 0.6;
}

.btn--ubicacion {
	margin-top: auto;
	background-color: var(--umore-bg);
	border: 1px solid var(--umore-bg);
}

.ubicacion-card--oliva .btn--ubicacion {
	color: var(--umore-green);
}

.ubicacion-card--burdeos .btn--ubicacion {
	color: var(--umore-secondary);
}

.btn--ubicacion:hover,
.btn--ubicacion:focus-visible {
	background-color: transparent;
	color: var(--umore-bg);
	border-color: var(--umore-bg);
}

/* --- Instagram --- */

.instagram {
	padding-top: 32rem;
	padding-bottom: var(--space-xl);
}

.instagram__title {
	font-size: 64px;
	line-height: normal;
	text-align: center;
}

.instagram__feed {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	margin-top: var(--space-lg);
}

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

/* --- Carta --- */

.page-template-page-carta-php {
	background-color: #E5D6C9;
}

.carta {
	padding-bottom: var(--space-xl);
}

.page-template-page-carta-php .site-footer {
	margin-top: 0;
}

.carta__intro {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-md);
	text-align: center;
}

.carta-card {
	display: flex;
	align-items: stretch;
	height: 60rem;
}

/* Por debajo de esto .carta-card ya ocupa naturalmente menos de 1900px (es
   el 100% de .container, que no tiene max-width propio), así que el límite
   solo debe activarse en pantallas realmente grandes (QHD, 2560px, y
   mayores) — Full HD (1920px, la más común) tiene que quedar fuera y verse
   exactamente igual que antes, ocupando todo el ancho del container. Con
   clamp en vez de un valor fijo, el ancho sigue creciendo (más lento) en
   vez de quedar topeado de golpe al cruzar el breakpoint. */
@media (min-width: 2200px) {
	.carta-card {
		max-width: clamp(1900px, 74vw, 2200px);
		margin-inline: auto;
	}
}

.carta-card__tabs {
	display: flex;
	flex-direction: column;
	flex: 0 0 16.5rem;
}

.carta-tab {
	appearance: none;
	-webkit-appearance: none;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--umore-bg);
	text-align: left;
	border: 0;
	cursor: pointer;
	padding: var(--space-md) var(--space-sm) var(--space-md) var(--space-md);
	flex: 1 1 0;
	display: flex;
	align-items: center;
}

.carta-tab--primera {
	border-radius: 30px 0 0 0;
}

.carta-tab--ultima {
	border-radius: 0 0 0 30px;
}

.carta-tab--texto-oscuro {
	color: var(--color-heading);
}

.carta-card__panels {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 1;
	overflow: hidden;
	margin-left: -1.5rem;
	background-color: #EBDFD4;
	border-radius: 30px;
	/* El padding inferior reserva sitio para .carta-card__alergias, que va
	   posicionada abajo y fuera del flujo: así el panel se centra contra la
	   caja entera y no sólo contra el hueco que dejaba la nota, que era lo
	   que descolgaba el contenido hacia arriba. */
	padding: var(--space-md) var(--space-lg) calc(var(--space-md) * 2);
}

.carta-panel {
	display: none;
	margin: auto 0;
	width: 100%;
}

.carta-panel--active:has(.carta-panel__info) {
	display: flex;
	flex-direction: column;
	margin: 0;
	height: 100%;
}


.carta-panel:has(.carta-panel__info) .carta-panel__columns {
	margin-top: auto;
	margin-bottom: auto;
}

.carta-panel--active {
	display: block;
}

.carta-panel--texto-claro {
	color: var(--umore-bg);
}

.carta-panel--texto-claro .carta-info__titulo {
	color: var(--umore-bg);
}

.carta-panel__columns {
	display: flex;
	position: relative;
	align-items: center;
	gap: var(--space-lg);
	max-width: 68rem;
	min-height: 38rem;
	margin-inline: auto;
}

.carta-panel:has(.carta-panel__info) .carta-panel__columns {
	min-height: 29rem;
}

.carta-panel__column {
	flex: 1 1 0;
	min-width: 0;
}

.carta-panel__column:first-child {
	padding-right: 6rem;
}

.carta-panel__column:last-child {
	padding-left: 18rem;
}

.carta-panel__columns:has(.carta-panel__column:only-child) {
	justify-content: center;
}

.carta-panel__columns:has(.carta-panel__column:only-child) .carta-panel__column {
	flex: 0 1 auto;
	padding-right: 0;
	padding-left: 0;
}

.carta-panel__columns:has(.carta-panel__column:only-child) {
	max-width: max-content;
}

.carta-panel__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 0;
	border-left: 0.5px dashed #A57E5B;
}

.carta-panel--texto-claro .carta-panel__divider {
	border-left-color: #EBDFD4;
}

.carta-panel__empty {
	text-align: center;
	padding-block: var(--space-lg);
}

.carta-panel__imagenes {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	height: 100%;
}

.carta-panel__imagen {
	width: auto;
	height: 100%;
	max-height: 34rem;
	object-fit: cover;
	border-radius: 30px;
}

.carta-grupo {
	position: relative;
	margin-bottom: var(--space-lg);
}

.carta-grupo__separador {
	height: 0;
	width: calc(100% + 16rem);
	margin-left: -8rem;
	border-top: 1px dashed #A57E5B;
	margin-bottom: var(--space-lg);
}

.carta-grupo__icono {
	position: absolute;
	width: auto;
}

.carta-grupo__icono--carta-icono-copa {
	top: 100%;
	left: 21rem;
	height: 6.25rem;
}

.carta-grupo__icono--carta-icono-coctel {
	top: -1.5rem;
	right: -4.5rem;
	height: 6rem;
}

.carta-grupo__icono--carta-icono-botella {
	top: 65%;
	right: -4.5rem;
	height: 6.5rem;
	transform: translateY(-50%);
}

.carta-grupo__icono--carta-icono-chef {
	top: 3.5rem;
	left: 100%;
	width: 81px;
	height: 33px;
	margin-left: 4rem;
}

.carta-grupo__icono--carta-icono-hojas {
	top: 1rem;
	left: 100%;
	width: 102px;
	height: 93px;
	margin-left: 4rem;
}

.carta-grupo__icono--carta-icono-panuozzi {
	top: -5rem;
	right: 100%;
	width: 109px;
	height: 71px;
	margin-right: 4rem;
}

.carta-grupo__icono--carta-icono-panuozzi-dulce {
	top: -3.5rem;
	left: 100%;
	width: 129px;
	height: 74px;
	margin-left: 7rem;
}

.carta-grupo__icono--carta-icono-tarta {
	bottom: 0;
	right: 100%;
	width: 111px;
	height: 70px;
	margin-right: 7rem;
}

.carta-item__sugerencia-extra {
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	margin-left: var(--space-sm);
	font-size: 11px;
	font-weight: 400;
	white-space: nowrap;
}

.carta-grupo:last-child {
	margin-bottom: 0;
}

.carta-grupo__titulo {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: underline;
	letter-spacing: normal;
	margin-bottom: var(--space-sm);
}

.carta-grupo__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 16rem;
}

.carta-panel--dolci .carta-grupo__lista {
	max-width: 22rem;
}

.carta-grupo__lista:has(.carta-item--con-descripcion) {
	max-width: 22rem;
}

.carta-panel--panuozzi-napoletani .carta-grupo__lista:has(.carta-item--con-descripcion) {
	max-width: 15rem;
}

.carta-item {
	position: relative;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
}

.carta-panel--dolci .carta-item {
	margin-bottom: 2.5rem;
}

/* Tipografía más grande en todas las categorías MENOS bebidas: ahí la lista
   es mucho más larga (refrescos + aguas + zumos + cocktails + cervezas +
   sangrías) y con el cuerpo subido no cabría sin recortar la card. Se aplica
   por :not() sobre el panel para no duplicar cada regla. La altura de
   .carta-card se subió a la vez (45.5rem → 52rem) para dar sitio al texto
   mayor: las pestañas de pizzas ya iban al límite antes de esto. */
.carta-panel:not(.carta-panel--bebidas) .carta-item {
	font-size: 17px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-item__precio {
	font-size: 17px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-item__descripcion {
	font-size: 13px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-item__tamano {
	font-size: 13px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-item__sugerencia {
	font-size: 13px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-grupo__titulo {
	font-size: 23px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-info__titulo {
	font-size: 16px;
}

.carta-panel:not(.carta-panel--bebidas) .carta-info__texto p {
	font-size: 13px;
}

.carta-panel--dolci .carta-item:last-child {
	margin-bottom: 0;
}

.carta-item__cabecera {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
}

.carta-item__icono {
	position: absolute;
	top: 50%;
	left: 100%;
	width: auto;
	transform: translateY(-50%);
}

.carta-item__icono--carta-icono-tabla-antipasti {
	width: 128px;
	height: 83px;
	margin-left: 2rem;
}

.carta-item__icono--carta-icono-queso {
	width: 76px;
	height: 55px;
	margin-left: 4rem;
}

.carta-item__icono--carta-icono-chile {
	width: 99px;
	height: 53px;
	margin-left: 2rem;
}

.carta-item__icono--carta-icono-rama {
	width: 86px;
	height: 76px;
	margin-left: 4rem;
}

.carta-item--con-descripcion {
	margin-bottom: var(--space-md);
}

.carta-item--con-descripcion:last-child {
	margin-bottom: 0;
}

.carta-panel--texto-claro .carta-item--con-descripcion {
	margin-bottom: 1.5rem;
}

.carta-panel--pizzas-clasicas .carta-item--con-descripcion,
.carta-panel--pizzas-especiales .carta-item--con-descripcion {
	margin-bottom: 2.25rem;
}

.carta-panel--panuozzi-napoletani .carta-item--con-descripcion {
	margin-bottom: 3.5rem;
}

.carta-item__info {
	min-width: 0;
}

.carta-item__nombre {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: nowrap;
}

.carta-item--con-descripcion .carta-item__nombre,
.carta-panel--dolci .carta-item__nombre {
	font-weight: 500;
	text-transform: uppercase;
}

.carta-item__tamano {
	margin-left: 0.35rem;
	font-size: 10px;
}

.carta-item__descripcion {
	margin: 0.25rem 0 0;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.15;
}

.carta-item__precio {
	flex: 0 0 auto;
	font-size: 14px;
	white-space: nowrap;
}

.carta-item__icono-nombre {
	margin-left: 0.35rem;
	vertical-align: middle;
}

.carta-item__icono-nombre--carta-icono-gluten {
	width: 7px;
	height: 16px;
}

.carta-item__icono-nombre--carta-icono-best-seller {
	width: 57px;
	height: 28px;
}

.carta-item__sugerencia {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 11px;
	font-weight: 400;
	background-color: #9B7450;
	border-radius: 10px;
	padding: 0.3rem 0.75rem;
	margin: 0.35rem 0 0;
}

.carta-grupo:last-child .carta-item:last-child .carta-item__sugerencia {
	max-width: 100%;
	white-space: normal;
}

.carta-panel__info {
	display: flex;
	width: 100%;
	max-width: 84rem;
	margin: var(--space-sm) auto 1.5rem;
	background-color: #9B7450;
	border-radius: 10px;
}

.carta-panel--pizzas-especiales .carta-item__sugerencia,
.carta-panel--pizzas-especiales .carta-panel__info {
	background-color: #6B4C35;
}

.carta-panel__info-inner {
	display: flex;
	width: 100%;
	max-width: 68rem;
	margin-inline: auto;
}

.carta-panel__info-inner .carta-info:first-child {
	flex: 0 0 44rem;
}

.carta-panel__info-inner .carta-info:last-child {
	flex: 1 1 auto;
}

.carta-info {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm) var(--space-lg);
}

.carta-info:first-child {
	padding-left: 0;
}

.carta-info:last-child {
	padding-right: 0;
}

.carta-info__icono {
	flex: 0 0 auto;
	height: auto;
}

.carta-info__icono--carta-icono-pizza-opciones {
	width: 111px;
	height: 75px;
}

.carta-info__icono--carta-icono-dip {
	width: 56px;
	height: 75px;
}

.carta-info__titulo {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	margin: 0 0 0.25rem;
}

.carta-info__texto p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 10px;
	line-height: 1.3;
	margin: 0;
}

.carta-info__linea {
	margin-top: 0.15rem;
}

.carta-info:nth-child(2) .carta-info__texto > p:first-of-type {
	max-width: 14rem;
}

/* Fuera del flujo, anclada al fondo del panel: si ocupa altura, el
   margin: auto del panel sólo puede centrar el contenido en el hueco que
   queda por encima de ella, y el contenido se ve subido con más aire abajo
   que arriba. El sitio se reserva con el padding-bottom de
   .carta-card__panels. En tablet/móvil vuelve al flujo normal. */
.carta-card__alergias {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	text-align: center;
	padding: 0 var(--space-lg);
	margin: 0;
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--space-md);
}

.carta-card__alergias--claro {
	color: var(--umore-bg);
}

/* --- Tablet (≤1024px) --- */

@media (max-width: 1024px) {
	.carta {
		padding-bottom: var(--space-lg);
	}

	.carta__intro {
		padding-top: var(--space-lg);
	}

	/* Card ya no tiene altura fija: en desktop 45.5rem la usa para centrar
	   el panel activo verticalmente, pero aquí el contenido se apila y
	   necesita el alto que le pida (si no, se corta o deja hueco vacío). */
	.carta-card {
		flex-direction: column;
		height: auto;
	}

	/* Tabs horizontales con scroll (patrón típico de carta de restaurante
	   en móvil) en vez de la columna vertical de desktop. Se quita el
	   redondeado especial de primera/última tab (pensado para una esquina
	   de card vertical) y se le da uno uniforme a todas. */
	.carta-card__tabs {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.carta-card__tabs::-webkit-scrollbar {
		display: none;
	}

	.carta-tab {
		flex: 0 0 auto;
		font-size: 16px;
		min-height: 3.5rem;
		padding: var(--space-sm) var(--space-md);
		white-space: nowrap;
		border-radius: 14px 14px 0 0;
	}

	.carta-tab--primera,
	.carta-tab--ultima {
		border-radius: 14px 14px 0 0;
	}

	.carta-card__panels {
		margin-left: 0;
		padding: var(--space-md) var(--space-md) var(--space-md);
		border-radius: 0 0 20px 20px;
	}

	.carta-panel {
		margin: 0;
	}

	/* En vertical el panel ya no se centra (margin: 0), así que la nota
	   vuelve al flujo normal debajo del contenido. */
	.carta-card__alergias {
		position: static;
		margin-top: var(--space-md);
	}

	.carta-panel--active:has(.carta-panel__info) {
		height: auto;
	}

/* Una sola columna apilada en vez de las 2 columnas + divisor
	   diagonal de desktop — con el ancho de tablet/móvil, 2 columnas de
	   productos dejan cada una demasiado estrecha para el texto/precio. */
	.carta-panel__columns {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
		max-width: none;
		min-height: 0;
		margin-inline: 0;
	}

	.carta-panel:has(.carta-panel__info) .carta-panel__columns {
		min-height: 0;
	}

	.carta-panel__column:first-child,
	.carta-panel__column:last-child {
		padding-right: 0;
		padding-left: 0;
	}

	.carta-panel__divider {
		display: none;
	}

	.carta-grupo__separador {
		width: 100%;
		margin-left: 0;
	}

	/* Los iconos ilustrativos de grupo (copa, chef, hojas, panuozzi...) se
	   posicionan en desktop con left/right: 100% asumiendo mucho aire
	   alrededor de una columna estrecha dentro de una card ancha; apilada a
	   ancho completo ya no hay ese margen y se solapan con el texto. Se
	   ocultan aquí; los iconos pequeños junto a nombre/precio (gluten,
	   best-seller, tabla-antipasti...) no se tocan. */
	.carta-grupo__icono,
	.carta-item__icono,
	.carta-item__sugerencia-extra {
		display: none;
	}

	.carta-grupo__lista {
		max-width: none;
	}

	.carta-panel--dolci .carta-grupo__lista,
	.carta-grupo__lista:has(.carta-item--con-descripcion),
	.carta-panel--panuozzi-napoletani .carta-grupo__lista:has(.carta-item--con-descripcion) {
		max-width: none;
	}

	.carta-panel__imagenes {
		flex-direction: column;
		height: auto;
	}

	.carta-panel__imagen {
		width: 100%;
		height: auto;
		max-height: none;
	}

	.carta-panel__info {
		max-width: none;
		margin-top: var(--space-md);
	}

	.carta-panel__info-inner {
		flex-direction: column;
		max-width: none;
	}

	.carta-panel__info-inner .carta-info:first-child {
		flex: 1 1 auto;
	}

	.carta-info {
		padding: var(--space-sm) var(--space-md);
	}

	.carta-info:first-child {
		padding-left: var(--space-md);
	}

	.carta-info:last-child {
		padding-right: var(--space-md);
	}

	.carta-info:nth-child(2) .carta-info__texto > p:first-of-type {
		max-width: none;
	}
}

/* --- Móvil (≤600px) --- */

@media (max-width: 600px) {
	.carta-tab {
		font-size: 14px;
		min-height: 3rem;
		padding: var(--space-xs) var(--space-sm);
	}

	/* .container (regla base, arriba del archivo) trae padding-inline en
	   ambos lados. Aquí se anula el derecho para que .carta-card (tabs +
	   panels) llegue hasta el borde real de la pantalla, conservando el
	   padding solo en el lado izquierdo — sin usar margin-right negativo
	   en .carta-card (eso lo saca de su caja y desborda
	   .documentElement.scrollWidth, aunque body:overflow-x:hidden lo
	   oculte visualmente: mejor que ningún elemento desborde su
	   contenedor). .carta__intro (el título, mismo .container) recupera
	   el padding-right que pierde el container para no verse afectado. */
	.carta .container {
		padding-right: 0;
	}

	.carta__intro {
		padding-right: var(--container-padding);
	}

	.carta-card__tabs {
		padding-right: var(--container-padding);
	}

	.carta-card__panels {
		padding-inline: var(--space-sm) calc(var(--space-sm) + var(--container-padding));
	}

	.carta-item__cabecera {
		flex-wrap: wrap;
		gap: var(--space-xs) var(--space-md);
	}

	.carta-panel__info-inner .carta-info:first-child {
		padding-right: 0;
	}

	.carta-card__alergias {
		line-height: 1.1;
	}

	/* El badge de sugerencia del pizzaiolo lleva white-space:nowrap en
	   desktop (regla base) para que se vea como una píldora de una línea;
	   en móvil los textos más largos ("Sugerencia del pizzaiolo: Añade...
	   +3,5€") no caben en el ancho disponible y se cortan contra el borde
	   — se permite wrap en todos los casos, no solo en el ítem :last-child
	   que ya lo tenía cubierto. */
	.carta-item__sugerencia {
		max-width: 100%;
		white-space: normal;
	}
}

/* --- Nosotros --- */

.nosotros {
	padding-bottom: var(--space-xl);
}

.nosotros__intro {
	padding-top: var(--space-xl);
	padding-bottom: var(--space-md);
	text-align: center;
}

.nosotros__title {
	font-size: 96px;
	font-weight: 400;
}

.nosotros__hero-photo {
	width: 100%;
	height: 120%;
	object-fit: cover;
	position: absolute;
	top: -20%;
	left: 0;
}

.nosotros__hero {
	text-align: center;
}

.nosotros__hero-wrap {
	position: relative;
	width: 100%;
	max-width: 1150px;
	height: 960px;
	margin-inline: auto;
	border-radius: 30px;
	overflow: hidden;
}

.nosotros__intro-text {
	max-width: 760px;
	margin-inline: auto;
	margin-top: var(--space-xl);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	text-align: center;
}

.nosotros__intro-text p + p {
	margin-top: var(--space-md);
}

.nosotros__intro-text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.nosotros__intro-text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Origen (nosotros) --- */

.origen {
	position: relative;
	padding-top: calc(var(--space-xl) * 4);
	padding-bottom: var(--space-xl);
	overflow: hidden;
}

.origen__marquee {
	position: absolute;
	z-index: 2;
	top: calc(50% + 4px);
	left: 50%;
	width: 100vw;
	margin: 0;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	overflow: hidden;
	pointer-events: none;
}

.origen__marquee-track {
	display: inline-flex;
	align-items: center;
	animation: origen-marquee 30s linear infinite;
	will-change: transform;
}

.origen__marquee-item {
	flex: none;
	display: inline-flex;
	align-items: center;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 140px;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--umore-primary);
	padding-left: var(--space-md);
}

.origen__marquee-sep {
	margin-left: var(--space-md);
	margin-right: var(--space-sm);
}


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

.origen__media {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: clamp(560px, 29vw, 900px);
	margin-inline: auto;
}

.origen__slider {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
}

.origen__slider-photos {
	position: absolute;
	inset: 0;
	border-radius: 30px;
	overflow: hidden;
}

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

.origen__slide--active {
	opacity: 1;
}

.origen__card {
	position: relative;
	width: 74%;
	margin-inline: auto;
	margin-top: -80px;
	padding: 2.5rem;
	border-radius: 30px;
	background-color: var(--umore-green);
	color: var(--umore-white);
	opacity: 0;
	transform: translateY(24px) rotate(0deg);
	transition: opacity 1s ease-out 0.2s, transform 1s ease-out 0.2s;
}

.origen__card.is-visible {
	opacity: 1;
	transform: translateY(0) rotate(4deg);
}

.origen__card-text {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: normal;
	text-align: center;
}

.origen__card-text + .origen__card-text {
	margin-top: var(--space-sm);
}

/* --- Entender (scroll horizontal) --- */

.entender {
	position: relative;
}

.entender__pin {
	display: flex;
	align-items: center;
	height: 100vh;
	overflow: hidden;
}

.entender__track {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: max-content;
	padding-inline: var(--container-padding);
	will-change: transform;
}

.entender__intro {
	flex: none;
	width: min(32vw, 360px);
	margin-right: calc(var(--space-xl) + var(--space-md));
}

.entender__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 64px;
	line-height: 0.91;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	margin-block: 0 var(--space-md);
	width: min(40vw, 460px);
	max-width: none;
}

.entender__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	max-width: 320px;
}

.entender__text p + p {
	margin-top: var(--space-sm);
}

.entender__text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.entender__text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* display: contents en desktop: las fotos siguen actuando como hijas
   directas de .entender__track (flex) para el pin + scroll horizontal; el
   wrapper solo se activa como contenedor de scroll propio en tablet/móvil
   (ver breakpoint 1024px), donde .entender__track deja de ser una fila
   continua con .entender__intro. */
.entender__frames {
	display: contents;
}

.entender__frame {
	flex: none;
	width: clamp(360px, 32vw, 1000px);
}

.entender__photo {
	width: 100%;
	height: auto;
	border-radius: 30px;
}

/* --- "La pizza de mañana empieza hoy" (página Nosotros) --- */

.masa {
	margin-top: var(--space-xl);
}

.masa__card {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	gap: var(--space-md);
	background-color: #DFCDBC;
	border-radius: 30px;
	padding: var(--container-padding);
}

.masa__content {
	grid-column: 1;
	grid-row: 1;
}

.masa__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 70px;
	line-height: 0.95;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	margin-block: 0 var(--space-md);
	max-width: 420px;
}

.masa__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 28px;
	line-height: normal;
	color: var(--color-heading);
	max-width: 400px;
}

.masa__text + .masa__text {
	margin-top: var(--space-sm);
}

.masa__video-wrap {
	grid-column: 2;
	grid-row: 1 / span 1;
	position: relative;
	width: min(40vw, 520px);
	padding: var(--space-sm);
}

.masa__video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 30px;
}

.masa__badges {
	position: absolute;
	left: calc(var(--space-sm) + var(--space-sm));
	right: calc(var(--space-sm) + var(--space-sm));
	bottom: calc(var(--space-sm) + var(--space-sm));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xs);
}

.masa__badges-row {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: var(--space-xs);
}

.masa__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: clamp(22px, -39.09px + 5.966vw, 64px);
}

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

.masa__badge-text {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: clamp(11px, -23.62px + 3.381vw, 34.8px);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #EBDFD4;
	padding-inline: 14px;
	white-space: nowrap;
}

.masa__aside {
	grid-column: 3;
	grid-row: 1;
	align-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	width: 400px;
	margin-left: auto;
}

.masa__aside-icon {
	width: 130px;
	height: auto;
	margin-bottom: 0;
}

.deli-producto {
	position: relative;
	z-index: 1;
	padding-top: calc(3 * var(--space-xl) + 3rem + 2 * var(--space-xs));
	padding-bottom: var(--space-xl);
	background-color: var(--color-bg);
}

.deli-producto__heading {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	align-items: center;
	padding-inline: var(--container-padding);
	margin-bottom: var(--space-lg);
}

.deli-producto__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 70.45px;
	line-height: 83.4%;
	text-transform: uppercase;
	letter-spacing: normal;
	color: var(--color-heading);
	max-width: 9em;
	margin: 0;
}

.deli-producto__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: normal;
	max-width: 30em;
	margin-left: auto;
}

.deli-producto__text p + p {
	margin-top: 1em;
}

.deli-producto__text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.deli-producto__text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.deli-producto__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.75rem;
	padding-inline: var(--container-padding);
}

.deli-producto__card {
	position: relative;
	min-width: 0;
	aspect-ratio: 440 / 457;
}

.deli-producto__marco {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: fill;
}

.deli-producto__foto {
	position: absolute;
	inset: 14%;
	width: 72%;
	height: 72%;
	object-fit: contain;
}

@media (max-width: 1024px) {
	/* padding-top de desktop (calc(3 * --space-xl) + 3rem + 2 * --space-xs)
	   compensa el header fijo + .deli-hero de 100vh sticky que va justo
	   antes; aquí .deli-hero ya no ocupa el viewport completo (ver
	   breakpoint de .deli-hero más abajo), así que ese hueco sobra. */
	.deli-producto {
		padding-top: var(--space-xl);
	}

	.deli-producto__heading {
		grid-template-columns: 1fr;
	}

	.deli-producto__title {
		font-size: clamp(2.5rem, 7vw, 70.45px);
	}

	.deli-producto__text {
		margin-left: 0;
	}

	.deli-producto__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Deli: pizzería artesanal --- */

.deli-pizzeria {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--space-lg);
	padding-inline: var(--container-padding);
	padding-top: calc(var(--space-xl) * 2);
	padding-bottom: var(--space-xl);
}

.deli-pizzeria__media {
	width: 100%;
}

.deli-pizzeria__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 30px;
}

.deli-pizzeria__content {
	display: flex;
	flex-direction: column;
	padding-left: var(--space-sm);
}

.deli-pizzeria__icon {
	align-self: flex-start;
	width: auto;
	height: 57px;
	margin-bottom: var(--space-md);
}

.deli-pizzeria__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 70.45px;
	line-height: 96%;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-heading);
	max-width: 620px;
	margin-bottom: var(--space-xs);
}

.deli-pizzeria__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	max-width: 620px;
}

.deli-pizzeria__text p + p {
	margin-top: var(--space-md);
}

.deli-pizzeria__text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.deli-pizzeria__text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.deli-pizzeria__actions {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: 1.4rem;
}

@media (max-width: 1024px) {
	.deli-pizzeria {
		grid-template-columns: 1fr;
	}

	.deli-pizzeria__content {
		padding-left: 0;
		padding-top: var(--space-lg);
	}

	.deli-pizzeria__title {
		font-size: clamp(2.5rem, 7vw, 70.45px);
		max-width: none;
	}

	.deli-pizzeria__text {
		max-width: none;
	}
}

/* --- Deli: Umore Bites --- */

.deli-bites {
	padding-inline: var(--container-padding);
	padding-top: calc(var(--space-xl) * 2);
	padding-bottom: var(--space-xl);
}

.deli-page .ubicaciones {
	padding-top: calc(var(--space-xl) * 1.5);
	margin-bottom: -2rem;
}

.deli-bites__media {
	position: relative;
	height: 90vh;
	border-radius: 30px;
	overflow: hidden;
}

.deli-bites__photo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.deli-bites__overlay {
	position: absolute;
	inset: 0;
	width: 50%;
	background: linear-gradient(
		to right,
		rgba(49, 32, 20, 0.7) 0%,
		rgba(49, 32, 20, 0) 100%
	);
}

.deli-bites__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: calc(var(--space-xl) * 1.5) calc(var(--space-lg) * 1.5);
}

.deli-bites__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 70.45px;
	line-height: 95%;
	text-transform: none;
	letter-spacing: normal;
	color: var(--color-bg);
	max-width: 460px;
	margin-bottom: var(--space-xs);
}

.deli-bites__subtitle {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 24px;
	line-height: normal;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-bg);
	margin-bottom: var(--space-xs);
}

.deli-bites__text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: normal;
	color: var(--color-bg);
	max-width: 430px;
}

.deli-bites__text p {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 1.4s ease-out, transform 1.4s ease-out;
}

.deli-bites__text p.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 1024px) {
	.deli-bites__title {
		font-size: clamp(2.5rem, 7vw, 70.45px);
	}
}

/* --- Páginas legales (aviso legal, cookies, privacidad) --- */
/* Texto largo tipo editor: se le da una columna cómoda de lectura y
   tipografía de párrafo normal (no mayúsculas) en vez del tratamiento
   display que llevan los títulos de sección del resto del sitio. */

.legal-page {
	padding-block: var(--space-xl) var(--space-lg);
}

.legal-page__intro {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: var(--space-lg);
	text-align: center;
}

.legal-page__title {
	font-size: var(--fs-h2);
}

.legal-page__content {
	max-width: 760px;
	margin-inline: auto;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: 1.7;
}

.legal-page__content h2 {
	font-size: var(--fs-h3);
	margin-top: var(--space-lg);
}

.legal-page__content h3 {
	font-size: 1.25rem;
	text-transform: none;
	letter-spacing: normal;
	margin-top: var(--space-md);
}

.legal-page__content p {
	margin-block: 0 var(--space-sm);
}

.legal-page__content ul,
.legal-page__content ol {
	margin-block: 0 var(--space-sm);
	padding-inline-start: 1.25em;
}

.legal-page__content li {
	margin-bottom: 0.4em;
}

.legal-page__content a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.legal-page__content table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--space-sm);
	font-size: 0.95em;
}

.legal-page__content th,
.legal-page__content td {
	text-align: left;
	padding: 0.6em 0.8em;
	border: 1px solid var(--umore-brown-dark);
}

/* =========================================================================
   Responsive — móvil, tablet y portátil (home)
   =========================================================================
   El sitio se construyó desktop-first (ver CONTEXT.md); todo lo de arriba
   de este bloque es la versión de escritorio y no se toca. Breakpoints:
     - Portátil:  ≤1440px (desktop más pequeño, no QHD)
     - Tablet:    ≤1024px
     - Móvil:     ≤600px
   Cada breakpoint es acumulativo (mobile-last dentro del bloque: hereda lo
   de portátil/tablet y sobrescribe solo lo que cambia). Las animaciones de
   scroll con columna fija/sticky (.proceso) se convierten en flujo normal
   de fila (foto + texto apilados) en tablet/móvil; el resto de animaciones
   (rotación del hero, parallax de about, pin+stack de significado) se
   mantienen igual, solo se reajustan tamaños/posiciones.
   ========================================================================= */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/* --- Menú hamburguesa (oculto en desktop, se activa por breakpoint) --- */

.site-nav-toggle {
	display: none;
	position: relative;
	/* Encima de .site-nav-mobile (z-index: 30): sin esto, al abrir el panel
	   a pantalla completa (mismo z-index:auto que cualquier hermano no
	   posicionado) tapa al botón y el icono de cerrar queda inaccesible. */
	z-index: 31;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px) saturate(180%) brightness(1.08);
	-webkit-backdrop-filter: blur(4px) saturate(180%) brightness(1.08);
	cursor: pointer;
}

.site-nav-toggle__bar {
	display: block;
	width: 1.3rem;
	height: 2px;
	border-radius: 2px;
	background-color: var(--color-heading);
	transition: transform var(--transition), opacity var(--transition);
}

.site-nav-mobile-open .site-nav-toggle__bar:first-child {
	transform: translateY(4px) rotate(45deg);
}

.site-nav-mobile-open .site-nav-toggle__bar:nth-child(2) {
	transform: translateY(-4px) rotate(-45deg);
}

.site-nav-mobile {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 30;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: var(--color-bg);
}

/* display: none no se puede animar (el navegador lo aplica sin frame
   intermedio), así que el panel pasa a flex desde que se abre el menú y es
   opacity + translateY + visibility (con delay solo al cerrar) lo que hace
   la entrada/salida — visibility evita que el panel oculto capture clics o
   quede alcanzable por teclado mientras "cerrado" solo significa opacity: 0. */
.site-nav-mobile {
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-1.5rem);
	transition: opacity 380ms ease, transform 380ms ease, visibility 0s linear 380ms;
}

.site-nav-mobile-open .site-nav-mobile {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 380ms ease, transform 380ms ease, visibility 0s linear 0s;
}

.site-nav-mobile__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav-mobile__link {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-heading);
}

.has-mobile-nav-open {
	overflow: hidden;
}

/* --- Portátil (≤1440px, no QHD) --- */

/* Portátil (1025-1728px): además de portátiles Windows (1366/1440), cubre
   los MacBook grandes en puntos CSS Retina (Pro 14"=1512, Air 15"=1470,
   Pro 16"=1728). min-width:1025px acota el rango por abajo — sin él, este
   bloque también aplica en tablet/móvil (ej. 390px ≤ 1728px es cierto), y
   selectores con :not() de más especificidad que hay aquí dentro (p.ej.
   .ubicacion-card:not(.ubicacion-card--stack)) le ganaban por cascada a
   las reglas de @media max-width:1024px/900px/600px pensadas para esos
   anchos, aunque esas aparezcan después en el archivo. */
@media (min-width: 1025px) and (max-width: 1728px) {
	.about {
		gap: var(--space-lg);
		margin-bottom: 16rem;
	}

	.about__title {
		font-size: clamp(44px, 0.36px + 4.261vw, 74px);
	}

	.about__text {
		font-size: clamp(18px, 9.27px + 0.852vw, 24px);
	}

	.menus-card--photo {
		width: 26%;
	}

	/* La card central tiene aspect-ratio 3/4 (alto derivado del ancho, no
	   del contenido) y overflow:hidden en .menus-card — si título+texto no
	   caben dentro de esa altura fija, se cortan. Se reduce el padding
	   interno y el tamaño de fuente más agresivamente que en otras cards
	   con título grande, que sí pueden crecer en alto libremente. */
	.menus-card--content {
		width: 30%;
		padding: var(--space-md);
	}

	.menus-card__title {
		font-size: clamp(24px, -43.56px + 6.598vw, 70.45px);
		margin-bottom: var(--space-sm);
	}

	.menus-card__text {
		font-size: 13px;
	}

	.destacados {
		margin-bottom: 16rem;
	}

	.destacados__title {
		font-size: 72px;
	}

	/* 4 columnas se mantienen (no se apilan) en todo el rango de portátil;
	   solo se reduce el gap para que no aprieten en los anchos más chicos
	   de este bloque. */
	.destacados__grid {
		gap: var(--space-md);
	}

	.destacado-card__title {
		font-size: clamp(28px, 10.55px + 1.705vw, 40px);
	}

	.proceso__title {
		font-size: 52px;
	}

	/* --- Masa: portátil, se reducen tamaños y anchos fijos para que las
	   3 columnas quepan sin apretarse antes de apilar en tablet --- */
	.masa__card {
		gap: var(--space-sm);
	}

	.masa__title {
		font-size: clamp(36px, -13.45px + 4.830vw, 70px);
		max-width: 320px;
	}

	.masa__text {
		font-size: clamp(18px, 3.45px + 1.420vw, 28px);
		max-width: 320px;
	}

	.masa__video-wrap {
		width: clamp(280px, -69.09px + 34.091vw, 520px);
	}

	.masa__aside {
		width: clamp(220px, -41.82px + 25.568vw, 400px);
	}

	.masa__aside-icon {
		width: clamp(80px, 7.27px + 7.102vw, 130px);
	}

	/* --- Carta: mismo layout de 2 columnas que desktop, pero sin la altura
	   fija de 60rem (calibrada para pantallas con mucho alto de sobra) ni el
	   padding-left de 18rem de la última columna, que en portátil dejaban
	   muy poco margen real. El breakpoint de tablet (≤1024px) ya cambia a
	   layout apilado con height:auto; aquí se mantiene el flex de desktop
	   pero con una altura que se ajusta al contenido. */
	.carta-card {
		height: auto;
		min-height: 45rem;
	}

	.carta-panel__columns {
		max-width: none;
		min-height: 0;
		gap: var(--space-md);
	}

	.carta-panel:has(.carta-panel__info) .carta-panel__columns {
		min-height: 0;
	}

	.carta-panel__column:first-child {
		padding-right: var(--space-lg);
	}

	.carta-panel__column:last-child {
		padding-left: var(--space-lg);
	}

	.carta-panel__imagen {
		max-height: 26rem;
	}

	/* --- Nosotros: misma altura fija de 960px que la carta, mismo fix. --- */
	.nosotros__title {
		font-size: clamp(48px, -21.82px + 6.818vw, 96px);
	}

	.nosotros__hero-wrap {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.nosotros__intro-text {
		font-size: clamp(18px, 9.27px + 0.852vw, 24px);
	}

	/* --- Origen --- */
	.origen {
		padding-top: calc(var(--space-xl) * 2.5);
	}

	.origen__marquee-item {
		font-size: clamp(56px, -66.18px + 11.932vw, 140px);
	}

	/* --- Instagram: el padding-top de 32rem era el mayor salto de scroll
	   vacío de toda la hoja de estilos; se reduce sin tocar el grid. --- */
	.instagram {
		padding-top: 10rem;
	}

	.instagram__title {
		font-size: clamp(40px, 5.09px + 3.409vw, 64px);
	}

	/* --- Testimonios --- */
	.testimonios {
		padding-top: 6rem;
	}

	.testimonios__title {
		font-size: clamp(40px, 5.09px + 3.409vw, 64px);
	}

	/* --- Ubicaciones --- */
	.ubicaciones {
		padding-top: 8rem;
	}

	/* Solo la card de Ubicaciones (home, sin --stack) — la de Contacto es
	   independiente y se ajusta aparte, en su propio bloque, para no
	   acoplar el estilo de una página al de la otra. */
	.ubicacion-card:not(.ubicacion-card--stack) {
		grid-template-columns: 12rem 1fr;
		gap: var(--space-lg);
	}

	.ubicacion-card:not(.ubicacion-card--stack) .ubicacion-card__title {
		font-size: clamp(28px, 10.55px + 1.705vw, 40px);
		flex-wrap: wrap;
		align-items: flex-start;
		white-space: normal;
		line-height: 1.05;
	}

	.ubicacion-card:not(.ubicacion-card--stack) .ubicacion-card__pin {
		margin-top: 0.15em;
	}

	/* margin-top:auto (regla base) empuja el botón al fondo aprovechando
	   el height:100% de .ubicacion-card__info; aquí el título ocupa 2
	   líneas y deja menos alto sobrante para repartir, así que auto casi
	   no separa el botón de los datos de contacto — se fija un mínimo. */
	.ubicacion-card:not(.ubicacion-card--stack) .btn--ubicacion {
		margin-top: var(--space-md);
	}

	/* Solo la card de Contacto (--stack) — independiente de la de
	   Ubicaciones (home), que ya tiene su propio ajuste más arriba. El
	   grid 16rem/12rem de gap de desktop dejaba la columna de título muy
	   angosta frente al hueco de gap; se pasa a proporción ~45/55 con un
	   gap moderado — la izquierda ya no necesita tanto ancho porque el
	   nombre se parte en 2 líneas cortas, así que se le da más aire al
	   horario, que es la lista de días más larga de las dos columnas. */
	.ubicacion-card--stack {
		grid-template-columns: 9fr 11fr;
		gap: var(--space-lg);
	}

	/* Mismo tamaño para "Umore Torrevieja"/"Umore Murcia" y para "Horario",
	   que comparten la clase base .ubicacion-card__title. */
	.ubicacion-card--stack .ubicacion-card__title {
		font-size: clamp(26px, 5.64px + 1.989vw, 40px);
		line-height: 1.05;
	}

	/* El título con pin (el de Horario no tiene <br> en el markup, así que
	   esto no lo afecta) fuerza el salto de línea tras "Umore" desde PHP
	   (section-contacto.php) en vez de dejarlo al wrap del navegador — se
	   pasa de flex a flow normal para que el pin actúe como un carácter
	   más al inicio del texto (float en vez de flex item): así "Umore"
	   queda en su misma línea y "Torrevieja"/"Murcia", debajo, arranca
	   alineado con el propio pin en vez de con el texto. */
	.ubicacion-card--stack .ubicacion-card__title:not(.ubicacion-card__title--horario) {
		display: block;
	}

	.ubicacion-card__title-break {
		display: inline;
	}

	.ubicacion-card--stack .ubicacion-card__pin {
		float: left;
		height: 0.85em;
		margin-right: var(--space-xs);
		margin-top: 0.1em;
	}

	/* margin-top:auto (regla base) empuja el botón al fondo aprovechando
	   el height:100% de .ubicacion-card__info; aquí queda poco alto
	   sobrante para repartir y el botón se ve pegado al email de arriba
	   — se fija un mínimo. */
	.ubicacion-card--stack .btn--ubicacion {
		margin-top: var(--space-md);
	}

	/* --- Footer --- */
	.site-footer {
		margin-top: 6rem;
	}

	.site-footer__logo {
		margin-bottom: 4rem;
	}

	/* --- Secciones con foto/texto pineado a pantalla completa (deli,
	   deli-hero, contacto, espacio, proceso, significado, entender): se
	   mantiene el sticky/pin de GSAP tal cual, solo se reduce el tamaño de
	   fuente de los títulos más grandes para que quepan mejor dentro de un
	   100vh real de portátil (bastante menos alto que las pantallas QHD/Full
	   HD para las que están calibrados). --- */
	.deli__title {
		font-size: clamp(40px, 5.09px + 3.409vw, 64px);
	}

	.deli-hero__title {
		font-size: clamp(56px, -48.73px + 10.227vw, 128px);
	}

	.contacto__title {
		font-size: clamp(48px, -21.82px + 6.818vw, 96px);
	}

	.contacto__text {
		font-size: clamp(18px, 9.27px + 0.852vw, 24px);
	}

	.espacio__title {
		font-size: clamp(44px, 5.53px + 3.757vw, 70.45px);
	}

	.espacio__text {
		font-size: clamp(18px, 9.27px + 0.852vw, 24px);
	}

	.significado__label {
		font-size: clamp(24px, 0.73px + 2.273vw, 40px);
	}

	.significado__paragraph {
		font-size: clamp(18px, 9.27px + 0.852vw, 24px);
	}

	.entender__title {
		font-size: clamp(36px, -4.73px + 3.977vw, 64px);
	}

	.deli-bites__title {
		font-size: clamp(44px, 5.53px + 3.757vw, 70.45px);
	}

	.deli-producto__title {
		font-size: clamp(44px, 5.53px + 3.757vw, 70.45px);
	}

	.deli-pizzeria__title {
		font-size: clamp(44px, 5.53px + 3.757vw, 70.45px);
	}

	.deli-pizzeria__text {
		font-size: clamp(18px, 9.27px + 0.852vw, 24px);
	}
}

/* --- Tablet (≤1024px) --- */

@media (max-width: 1024px) {
	.site-nav--start,
	.site-nav--end {
		display: none;
	}

	.site-nav-toggle {
		display: inline-flex;
	}

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

	.site-header__inner {
		justify-content: space-between;
	}

	.site-title svg {
		height: 2.3rem;
	}

	/* Mismo margen superior que los botones del hero (.hero__bar top),
	   para que header y botones queden alineados en su borde superior. */
	.site-header {
		margin-top: var(--space-md);
	}

	/* .site-header trae margin-top: var(--space-md) aquí arriba para su
	   posición normal en el flujo, pero ese margen no desaparece solo
	   porque pase a position: fixed (--stuck) — sin resetearlo a 0, el
	   header fijo queda var(--space-md) por debajo de top:0. Solo hace
	   falta en este breakpoint: en desktop .site-header no tiene margin-top
	   propio en --stuck porque ahí SÍ se quiere conservar ese espacio. */
	.site-header--stuck {
		margin-top: 0;
		padding-block: var(--space-sm);
	}

	/* --- Hero --- */

	.hero__bar {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.hero__content {
		margin-top: var(--space-md);
	}

	.hero__title {
		max-width: none;
	}

	/* --- About --- */

	.about {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		margin-bottom: 14rem;
	}

	.about__gallery {
		margin-inline: 12%;
		margin-bottom: 4rem;
	}

	.about__content {
		text-align: center;
	}

	.about__title {
		font-size: clamp(2.5rem, 6vw, 74px);
		max-width: none;
	}

	.about__text {
		max-width: none;
		font-size: 16px;
		margin-inline: auto;
	}

	.about__actions {
		justify-content: center;
	}

	/* --- Destacados --- */

	.destacados {
		padding-block: var(--space-md);
		margin-bottom: 3rem;
	}

	.destacados__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md) var(--space-sm);
	}

	.destacados__title {
		font-size: clamp(2.5rem, 8vw, 72px);
	}

	.destacado-card__title {
		font-size: clamp(1.5rem, 4vw, 32px);
		margin-bottom: var(--space-xs);
	}

	/* --- Menús de grupos y empresas --- */

	.menus {
		padding-block: var(--space-md);
		margin-bottom: 3rem;
	}

	.menus__deck {
		flex-direction: column;
		gap: var(--space-md);
		padding-block: var(--space-md);
	}

	.menus-card--photo,
	.menus-card--content {
		width: 70%;
		max-width: 420px;
	}

	/* Apiladas en columna (no en fila como en desktop), pero cada una
	   rotada levemente hacia un lado distinto para conservar algo de ese
	   aire "cartas desordenadas" del deck de escritorio. */
	.menus-card--left {
		transform: rotate(-4deg);
		margin: 0;
	}

	.menus-card--left:hover {
		transform: rotate(-4deg) scale(1.08);
	}

	.menus-card--right {
		transform: rotate(4deg);
		margin: 0;
	}

	.menus-card--right:hover {
		transform: rotate(4deg) scale(1.08);
	}

	.menus-card--content {
		order: -1;
		padding: var(--space-md);
	}

	.menus__actions {
		flex-wrap: wrap;
	}

	/* --- Significado --- */

	.significado__wordmark-row {
		gap: var(--space-md);
	}

	.significado__wordmark {
		width: min(60vw, 420px);
	}

	.significado__label {
		font-size: 22px;
		max-width: 140px;
	}

	.significado__text {
		margin-top: 9rem;
	}

	.significado__paragraph {
		font-size: 16px;
	}

	.significado__stack-frame {
		width: min(46vw, 340px);
		margin-left: calc( -1 * min(46vw, 340px) / 2 );
	}

	/* --- Proceso: se quita el sticky de la foto, pasa a fila normal
	   (foto + texto apilados) por bloque, sin pin ni sección fija. Se le da
	   el mismo padding lateral que el resto de la home (--container-padding)
	   porque, a diferencia de desktop, la foto ya no llega al borde de la
	   ventana — sin este padding la sección quedaba pegada a los lados,
	   rompiendo el margen consistente del resto de secciones. */
	.proceso {
		grid-template-columns: 1fr;
		padding-inline: var(--container-padding);
	}

	.proceso__photo-fixed {
		position: static;
		height: auto;
	}

	.proceso__photo-fixed-img {
		border-radius: 30px;
		/* En desktop es 0 30px 30px 0 porque la foto llega hasta el borde
		   izquierdo de la ventana; aquí ya tiene margen a ambos lados
		   (--container-padding en .proceso), así que se redondea entera. */
	}

	.proceso__photo-cta {
		position: static;
		display: inline-flex;
		margin-top: var(--space-md);
		margin-bottom: var(--space-md);
	}

	.proceso__row {
		grid-template-columns: 1fr;
		min-height: 0;
		padding-top: var(--space-xl);
	}

	.proceso__content {
		padding: 0;
		margin-top: var(--space-md);
	}

	.proceso__title {
		font-size: clamp(2rem, 6vw, 52px);
		max-width: none;
	}

	.proceso__icon {
		position: static;
		margin-bottom: var(--space-sm);
	}

	.proceso__text {
		max-width: none;
	}

	.proceso__photo-secondary-wrap {
		padding-right: 0;
		margin-top: var(--space-md);
	}

	/* --- Umore Deli (banner con sello) --- */

	.deli {
		height: auto;
		min-height: 100vh;
		margin-top: 5rem;
		padding-block: var(--space-xl) var(--space-lg);
		justify-content: center;
	}

	.deli__seal {
		width: min(85vw, 460px);
		margin-right: 0;
	}

	.deli__seal-content {
		padding: 2rem 1.75rem;
	}

	/* Los <br class="deli__title-break"> del título están pensados para el
	   ancho del sello en desktop; en un sello más angosto fuerzan líneas
	   extra por wrap y desbordan el sello (ver section-deli.php). Se ocultan
	   y se deja que el texto haga su propio wrap natural según el espacio
	   disponible. */
	.deli__title-break {
		display: none;
	}

	.deli__title {
		font-size: clamp(1.25rem, 4.5vw, 32px);
		line-height: 1;
		margin-bottom: var(--space-sm);
	}

	.deli__text {
		width: auto;
		max-width: none;
		margin-left: 0;
		font-size: 12px;
	}

	/* --- Testimonios --- */

	.testimonios {
		padding-bottom: var(--space-lg);
	}

	.testimonios__title {
		font-size: clamp(2rem, 6vw, 64px);
	}

	/* Resumen de valoración encima del carrusel y 2 cards por vista. */
	.testimonios__widget {
		grid-template-columns: minmax(0, 1fr);
		margin-top: var(--space-lg);
	}

	.testimonios__track {
		grid-auto-columns: calc((100% - var(--space-sm)) / 2);
	}

	/* --- Ubicaciones --- */

	.ubicaciones,
	.deli-page .ubicaciones {
		padding-top: var(--space-lg);
		padding-bottom: var(--space-lg);
		margin-bottom: 0;
	}

	.ubicaciones__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		padding-inline: var(--space-sm);
	}

	.ubicaciones__illustration {
		max-width: 320px;
		margin-inline: auto;
	}

	/* El 85% de la regla base dejaba un 15% de hueco a un lado dentro del
	   contenedor ya centrado: en móvil la ilustración ocupa el ancho entero. */
	.ubicaciones__illustration img {
		width: 100%;
	}

	.ubicaciones__list {
		max-width: none;
	}

	.ubicacion-card {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	/* --- Contacto --- */

	/* Mismo patrón que .deli-hero y .espacio: se quita el sticky de ambas
	   columnas y se apilan en flujo normal, con la foto primero. El
	   margin-top negativo de desktop compensaba el header fijo para que la
	   columna sticky llegara hasta arriba del todo; aquí ya no hace falta. */
	/* .contacto vive fuera de .container en el markup, así que no hereda su
	   padding lateral — se le da aquí para que la foto respete el ancho del
	   resto de la página en vez de ir a borde a borde de pantalla. */
	.contacto {
		grid-template-columns: 1fr;
		margin-top: 0;
		padding-inline: var(--container-padding);
	}

	.contacto__content {
		order: 2;
		min-height: 0;
		padding-inline: 0;
		padding-top: var(--space-lg);
		padding-bottom: var(--space-lg);
	}

	.contacto__title {
		font-size: clamp(2.5rem, 7vw, 96px);
		max-width: none;
	}

	.contacto__text {
		max-width: none;
		font-size: 16px;
	}

	.contacto__ubicaciones {
		max-width: none;
		margin-top: var(--space-md);
	}

	.contacto__form-card {
		max-width: none;
	}

	.contacto__form-row {
		grid-template-columns: 1fr;
	}

	.contacto__media {
		order: 1;
		position: relative;
		top: 0;
		height: auto;
		margin-top: var(--space-md);
		aspect-ratio: 4 / 5;
		border-radius: 30px;
		overflow: hidden;
	}

	.contacto__bg {
		height: 100%;
	}

	/* --- Deli: hero --- */

	/* Se quita el sticky de ambas columnas (en desktop cada una ocupa
	   100vh fija mientras la otra hace scroll por dentro/encima) y pasan a
	   apilarse en flujo normal: foto arriba con alto propio, título+texto
	   debajo. El margin-top negativo de desktop compensaba el header fijo
	   para que la foto llegara hasta arriba del todo; aquí ya no hace falta
	   porque la columna de foto no ocupa el viewport completo. */
	/* .deli-hero vive directamente dentro de <main>, sin .container que le
	   dé padding lateral (en desktop la foto llega a borde de pantalla a
	   propósito); aquí se le da el mismo padding que .deli-hero__content
	   para que la foto respete el ancho del resto de la página. */
	.deli-hero {
		grid-template-columns: 1fr;
		margin-top: 0;
		padding-inline: var(--container-padding);
	}

	/* .deli-hero__content (título+texto) va primero en el markup, pero
	   visualmente aquí debe ir la foto arriba y el texto debajo. */
	.deli-hero__content {
		order: 2;
		position: static;
		min-height: 0;
		padding-block: var(--space-lg) var(--space-md);
		padding-inline: 0;
	}

	.deli-hero__title {
		font-size: clamp(2.5rem, 9vw, 128px);
		max-width: none;
		margin-top: 0;
		margin-bottom: 0;
	}

	.deli-hero__text {
		max-width: none;
		margin-top: 0;
	}

	.deli-hero__media {
		order: 1;
		position: relative;
		top: 0;
		height: auto;
		margin-top: var(--space-md);
		aspect-ratio: 4 / 5;
		border-radius: 30px;
		overflow: hidden;
	}

	/* El sello sobresalía por la izquierda del viewport en desktop
	   (left: -8rem, pensado para una columna que ocupa medio escritorio);
	   aquí la columna es tan ancha como la pantalla, así que se reposiciona
	   dentro de los límites de la foto en vez de salirse. */
	.deli-hero__icon {
		left: var(--space-md);
		bottom: var(--space-lg);
		height: 56px;
	}

	.deli-hero__seal {
		left: auto;
		right: var(--space-md);
		bottom: var(--space-lg);
		height: 78px;
	}

	/* --- Nosotros: intro + hero --- */

	.nosotros {
		padding-bottom: var(--space-lg);
	}

	.nosotros__intro {
		padding-top: var(--space-lg);
	}

	.nosotros__title {
		font-size: clamp(2.5rem, 8vw, 96px);
	}

	.nosotros__hero-wrap {
		height: auto;
		aspect-ratio: 4 / 5;
	}

	.nosotros__intro-text {
		max-width: none;
		font-size: 16px;
	}

	/* --- Origen (nosotros) --- */

	.origen {
		padding-top: calc(var(--space-xl) * 2);
	}

	.origen__marquee-item {
		font-size: clamp(2.5rem, 10vw, 90px);
	}

	.origen__card {
		width: 86%;
		padding: 1.75rem;
	}

	/* --- Entender: pin + scroll horizontal sustituido por swipe nativo
	   (ver umoreInitEntenderScroll en main.js, que no crea el ScrollTrigger
	   aquí) — título/texto pasan a ir arriba en flujo normal y las fotos
	   debajo en una fila con overflow-x: auto, deslizable con el dedo. */
	.entender__pin {
		display: block;
		height: auto;
		overflow: visible;
	}

	.entender__track {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		padding-inline: var(--container-padding);
	}

	.entender__intro {
		width: auto;
		margin-right: 0;
		margin-bottom: var(--space-md);
	}

	.entender__title {
		font-size: clamp(2rem, 6vw, 64px);
	}

	.entender__text {
		max-width: none;
	}

	.entender__frames {
		display: flex;
		gap: var(--space-sm);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		margin-inline: calc(-1 * var(--container-padding));
		padding-inline: var(--container-padding);
	}

	.entender__frame {
		width: min(80vw, 460px);
		scroll-snap-align: start;
	}

	/* --- Masa: la card de 3 columnas se apila (texto, video, aside) --- */
	.masa__card {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: var(--space-lg);
	}

	.masa__content,
	.masa__video-wrap,
	.masa__aside {
		grid-column: 1;
		grid-row: auto;
	}

	.masa__title {
		font-size: clamp(2.25rem, 6vw, 70px);
		max-width: none;
	}

	.masa__text {
		max-width: 480px;
	}

	.masa__video-wrap {
		width: min(80vw, 400px);
	}

	.masa__aside {
		align-items: center;
		text-align: center;
		width: auto;
		max-width: 480px;
		margin-left: 0;
	}

	/* --- Espacio: sticky de desktop se quita, columnas se apilan (texto
	   primero, fotos debajo) igual que el resto de columnas 2-col del sitio
	   en este breakpoint. */
	.espacio {
		grid-template-columns: 1fr;
		gap: var(--space-md);
		padding-top: var(--space-lg);
	}

	.espacio__content {
		position: static;
		height: auto;
		order: -1;
		padding-block: 0;
		padding-left: 0;
	}

	.espacio__title {
		font-size: clamp(2.5rem, 6vw, 70.45px);
		max-width: none;
	}

	.espacio__text {
		max-width: none;
		font-size: 16px;
	}

	.espacio__actions {
		flex-wrap: wrap;
	}

	/* --- Instagram --- */

	.instagram {
		padding-top: var(--space-lg);
	}

	.instagram__title {
		font-size: clamp(2rem, 6vw, 64px);
		line-height: 1.1;
	}

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

	/* Solo 2 fotos en una fila (de las 3 que trae el feed) — la tercera se
	   oculta en vez de quitarla del markup para no afectar al feed real de
	   Instagram que sustituirá a estas de ejemplo. */
	.instagram__feed-item:nth-child(3) {
		display: none;
	}

	/* --- Footer --- */

	.nosotros + .site-footer {
		margin-top: var(--space-md);
	}

	.site-footer {
		margin-top: var(--space-xl);
	}

	/* El icono de marca (esquina superior derecha) se quita en móvil/tablet
	   a petición: con el resto del footer centrado queda descolocado, sin
	   nada a lo que anclarse visualmente. */
	.site-footer__icon {
		display: none;
	}

	.site-footer__logo {
		margin-bottom: var(--space-lg);
		text-align: center;
	}

	.site-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
		text-align: center;
	}

	.site-footer__locations {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-md);
	}

	.site-footer__columns {
		grid-template-columns: repeat(3, auto);
		justify-content: center;
		gap: var(--space-md);
	}
}

/* --- Móvil (≤600px) --- */

@media (max-width: 600px) {
	.container {
		padding-inline: var(--space-sm);
	}

	/* --- Hero --- */

	.hero__bar {
		gap: var(--space-xs);
	}

	.hero__photo-wrap {
		width: min(90vw, 420px);
	}

	.hero__media {
		margin-top: -1rem;
	}

	/* Iconos ~1.5x más grandes que en desktop (en % de la foto), porque
	   aquí la foto es pequeña y se quedaban en ~50px. */
	.hero__icon--cocinero {
		width: 23%;
		top: 46%;
	}

	.hero__icon--cartel {
		left: 12%;
		width: 23%;
	}

	.hero__icon--circulo {
		width: 20%;
		top: 63%;
	}

	.hero__subtitle {
		font-size: 13px;
	}

	/* --- About --- */

	.about {
		margin-bottom: 3rem;
	}

	.about__gallery {
		margin-inline: 14%;
	}

	/* Las dos fotos pequeñas se quedan en ~110px de ancho en móvil, y los
	   30px de la regla base se comen demasiada esquina a ese tamaño. La
	   grande mantiene los 30px. */
	.about__frame--top,
	.about__frame--bottom {
		border-radius: 16px;
	}

	.about__frame--top {
		left: -20%;
	}

	.about__frame--bottom {
		right: -20%;
	}

	.about__actions {
		flex-wrap: wrap;
	}

	/* --- Masa: móvil, card sin padding lateral extra y tamaños compactos --- */
	.masa__card {
		padding: var(--space-md) var(--space-sm);
		border-radius: 20px;
	}

	.masa__title {
		font-size: clamp(2rem, 9vw, 2.5rem);
	}

	.masa__text {
		font-size: 16px;
	}

	.masa__video-wrap {
		width: min(85vw, 320px);
	}

	.masa__aside {
		width: auto;
		max-width: 320px;
	}

	.masa__aside-icon {
		width: 80px;
	}

	/* --- Destacados --- */

	.destacados__grid {
		grid-template-columns: 1fr;
		max-width: 320px;
		margin-inline: auto;
	}

	.destacados__title {
		flex-direction: column;
		gap: var(--space-xs);
	}

	/* --- Menús de grupos y empresas --- */

	.menus-card--content {
		width: 100%;
		max-width: 320px;
	}

	.menus-card--photo {
		width: 100%;
		max-width: 320px;
	}

	/* Sin aspect-ratio fijo aquí: título + 2 párrafos no caben en una caja
	   3/4 a este ancho, y justify-content: center (regla base) los desborda
	   simétricamente arriba y abajo, cortando texto contra las cards vecinas. */
	.menus-card--content {
		aspect-ratio: auto;
		padding: var(--space-md);
	}

	.menus-card__title {
		font-size: 40px;
	}

	/* --- Significado --- */

	.significado__wordmark-row {
		flex-direction: column;
		gap: var(--space-xs);
	}

	.significado__label--left,
	.significado__label--right {
		max-width: none;
	}

	.significado__text {
		margin-top: var(--space-lg);
	}

	.significado__stack-frame {
		width: min(64vw, 260px);
		margin-left: calc( -1 * min(64vw, 260px) / 2 );
	}

	/* --- Proceso --- */

	.proceso {
		border-radius: 24px 24px 0 0;
	}

	.proceso__row {
		padding-top: var(--space-xl);
	}

	/* --- Umore Deli --- */

	.deli__seal {
		width: min(96vw, 380px);
	}

	.deli__seal-content {
		padding: 2rem 2rem 1.5rem;
	}

	.deli__title {
		font-size: clamp(1.1rem, 5.5vw, 26px);
		line-height: 1;
		margin-bottom: var(--space-xs);
	}

	.deli__text {
		font-size: 10.5px;
		line-height: 1.35;
	}

	.deli__text + .deli__text {
		margin-top: 0.5rem;
	}

	/* El botón "Saber más" va antes que los párrafos en el markup (así el
	   texto queda anclado abajo con margin-top: auto en desktop, ver
	   .deli__text:first-of-type), pero aquí se quiere debajo del párrafo:
	   .deli__seal-content ya es flex-column, así que basta reordenar con
	   order en vez of tocar el HTML o el layout de desktop. */
	.deli__seal-content > .btn {
		order: 2;
		margin-top: var(--space-sm);
	}

	.deli__text:first-of-type {
		margin-top: 0;
	}

	/* --- Ubicaciones --- */

	.ubicacion-card {
		padding: var(--space-md);
	}

	.ubicacion-card__title {
		font-size: 28px;
		white-space: normal;
	}

	/* margin-top: auto (regla base) empuja el botón al fondo de la card
	   aprovechando su height: 100% en el grid de 2 columnas de desktop; en
	   móvil la card no tiene esa altura extra que repartir (se ajusta al
	   contenido), así que auto colapsa a un gap mínimo — se fija un valor
	   concreto para separar los datos de contacto del botón. */
	.btn--ubicacion {
		margin-top: var(--space-md);
	}

	/* --- Contacto --- */

	.contacto__title {
		text-align: left;
	}

	.contacto__text {
		font-size: 15px;
	}

	.contacto__form-card {
		padding: var(--space-sm);
	}

	.contacto__form-title {
		max-width: none;
	}

	/* --- Deli: hero --- */

	.deli-hero__content {
		text-align: center;
	}

	.deli-hero__text {
		font-size: 16px;
	}

	.deli-hero__icon {
		height: 44px;
	}

	.deli-hero__seal {
		height: 62px;
	}

	/* --- Deli: producto --- */

	.deli-producto__heading {
		text-align: center;
	}

	/* El gap del grid de 2 columnas de desktop (--space-lg) se queda como
	   espacio vertical grande entre título y texto al apilarse. */
	.deli-producto__heading {
		gap: var(--space-xs);
	}

	.deli-producto__list {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}

	/* --- Deli: pizzería artesanal --- */

	.deli-pizzeria {
		padding-top: var(--space-lg);
	}

	.deli-pizzeria__title {
		font-size: clamp(2rem, 8vw, 70.45px);
	}

	.deli-pizzeria__text {
		font-size: 16px;
	}

	.deli-pizzeria__actions {
		flex-wrap: wrap;
	}

	/* --- Deli: Umore Bites --- */

	.deli-bites {
		padding-top: var(--space-lg);
	}

	.deli-bites__media {
		height: 70vh;
	}

	.deli-bites__photo {
		object-position: 75% center;
	}

	/* El degradado de desktop solo cubre el 50% izquierdo, pensado para un
	   título de max-width: 460px sobre foto ancha; en móvil el bloque de
	   texto ocupa prácticamente todo el ancho, así que el degradado se
	   extiende a toda la foto para que el texto blanco siga siendo legible
	   sobre cualquier zona de la imagen. */
	.deli-bites__overlay {
		width: 100%;
		background: linear-gradient(
			180deg,
			rgba(49, 32, 20, 0.15) 0%,
			rgba(49, 32, 20, 0.75) 100%
		);
	}

	.deli-bites__content {
		justify-content: flex-end;
		padding: var(--space-lg) var(--space-md);
	}

	.deli-bites__title {
		max-width: none;
	}

	.deli-bites__text {
		max-width: none;
		font-size: 16px;
	}

	/* --- Nosotros: intro + hero --- */

	.nosotros__intro-text {
		font-size: 15px;
	}

	/* --- Origen (nosotros) --- */

	/* .origen vive fuera de .container en el markup (section-origen.php),
	   así que no hereda su padding lateral — se le da aquí el mismo
	   (--space-sm, igual que .container en este breakpoint) para que la
	   foto respete el margen del resto de la página en vez de ir a borde
	   a borde de pantalla. */
	.origen {
		padding-top: var(--space-xl);
		padding-inline: var(--space-sm);
	}

	/* Texto marquee mucho más grande (pedido explícito) y la card verde se
	   estrecha para no casi igualar el ancho de la foto que tiene debajo. */
	.origen__marquee-item {
		font-size: 22vw;
	}

	.origen__media {
		max-width: none;
	}

	.origen__card {
		width: 78%;
		padding: 1.5rem;
	}

	.origen__card-text {
		font-size: 14px;
	}

	/* --- Entender --- */

	.entender__intro {
		text-align: center;
	}

	.entender__title {
		width: auto;
		max-width: 22rem;
		margin-inline: auto;
	}

	.entender__frame {
		width: min(84vw, 340px);
	}

	.entender__text {
		font-size: 13px;
	}

	/* --- Espacio --- */

	.espacio__content {
		align-items: center;
		text-align: center;
	}

	.espacio__icon {
		align-self: center;
		height: 80px;
	}

	.espacio__text {
		font-size: 15px;
	}

	.espacio__actions {
		flex-wrap: wrap;
	}

	/* Sin aspect-ratio, cada foto conservaba sus proporciones originales
	   (distintas entre sí) y quedaban de alturas dispares; se fuerza una
	   proporción común + object-fit: cover para que las 3 midan lo mismo. */
	.espacio__photo {
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.espacio__gallery {
		gap: var(--space-sm);
	}

	/* --- Testimonios --- */

	.testimonios {
		padding-bottom: var(--space-xl);
	}

	/* Una card casi entera por vista, asomando la siguiente para invitar a
	   deslizar; las flechas sobran porque se navega con el dedo. */
	.testimonios__track {
		grid-auto-columns: 85%;
	}

	.testimonios__flecha {
		display: none;
	}

	/* --- Ubicaciones --- */

	.ubicaciones,
	.deli-page .ubicaciones {
		padding-top: var(--space-lg);
	}

	/* --- Instagram --- */

	.instagram {
		padding-bottom: var(--space-md);
	}

	.instagram__feed {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-xs);
	}

	/* --- Footer --- */

	.site-footer {
		margin-top: var(--space-md);
	}

	.site-footer__social {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-md);
		margin-top: calc(-1 * var(--space-md));
		margin-bottom: var(--space-md);
	}

	/* En móvil las redes ya salen como iconos en fila (.site-footer__social
	   justo arriba), así que la columna de texto sobra: quedarían duplicadas. */
	.footer-column--social {
		display: none;
	}

	.site-footer__columns {
		grid-template-columns: repeat(2, auto);
	}

	.site-footer__locations {
		flex-direction: column;
		gap: var(--space-md);
	}
}