/* 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. */
.word-reveal__mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}

.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;
}

/* --- 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;
}

.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;
	}
}

@media (max-width: 1440px) {
	.hero {
		padding-top: 8rem;
	}

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

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

@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: 640px;
}

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

.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). */
	height: 100vh;
	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 un valor estable en px en vez de 100vh — en Safari
	   móvil 100vh se recalcula en vivo con la barra de direcciones, y ese
	   desajuste entre el top real y lo que main.js midió para calcular el
	   recorrido es lo que dejaba la foto descuadrada/cortada de forma
	   permanente al hacer scroll. */
	top: 100vh;
	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;
}

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

.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: calc(var(--space-xl) * 3);
}

.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;
	max-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 {
	max-width: 88rem;
	margin-inline: auto;
	margin-top: var(--space-xl);
}

/* --- 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 );
}

.ubicaciones__illustration img {
	width: 85%;
	height: 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);
}

.ubicacion-card__pin {
	width: auto;
	height: 40px;
}

.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: 45.5rem;
}

/* 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);
	min-height: 6.5rem;
	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;
	padding: var(--space-md) var(--space-lg) 1.5rem;
}

.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--menus-grupo.carta-panel--active {
	display: flex;
	justify-content: center;
	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__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;
}

.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;
}

.carta-card__alergias {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 10px;
	text-align: center;
	padding: 0 var(--space-lg);
	margin: auto 0 0;
}

.carta-card__panels:has(.carta-panel--active .carta-panel__info) .carta-card__alergias {
	margin-top: 0;
}

.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;
	}

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

	.carta-panel--menus-grupo.carta-panel--active {
		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);
	}

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

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

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

/* --- 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: 640px;
	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;
}

/* --- 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);
}

.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;
}

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

.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__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) --- */

@media (max-width: 1440px) {
	.about {
		gap: var(--space-lg);
	}

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

	.menus-card--content {
		width: 30%;
	}

	.destacados__title {
		font-size: 72px;
	}

	.proceso__title {
		font-size: 52px;
	}
}

/* --- 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-lg);
	}

	.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-direction: column;
		align-items: stretch;
	}

	/* --- 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;
		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 {
		max-width: none;
		margin-left: 0;
		font-size: 12px;
	}

	/* --- Testimonios --- */

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

	/* --- Ubicaciones --- */

	.ubicaciones {
		padding-top: var(--space-xl);
		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;
	}

	.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-lg);
	}

	.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-lg);
		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-lg);
		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;
	}

	/* --- 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;
	}

	.hero__subtitle {
		font-size: 13px;
	}

	/* --- About --- */

	.about {
		margin-bottom: 3rem;
	}

	.about__gallery {
		margin-inline: 14%;
	}

	.about__actions {
		flex-direction: column;
		align-items: stretch;
	}

	/* --- 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-sm);
	}

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

	.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: center;
	}

	.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-direction: column;
		align-items: stretch;
	}

	/* --- 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 {
		max-width: 15rem;
		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-direction: column;
		align-items: stretch;
		width: 100%;
	}

	/* 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);
	}

	/* --- Instagram --- */

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

	/* --- Footer --- */

	.site-footer__columns {
		grid-template-columns: repeat(2, auto);
	}

	.site-footer__locations {
		flex-direction: column;
		gap: var(--space-md);
	}
}