/*
 * MESA Restaurant — isolated styles
 * Loaded only on pages using the page-mesa template. The mesa- prefix and
 * scoped custom properties keep this fully separate from the V&J studio
 * theme, NEXO and HORMA.
 */

/* =====================================================================
   TOKENS + BASE
   ===================================================================== */
.mesa-shell,
.mesa-header,
.mesa-main,
.mesa-footer {
	--mesa-paper: #F5EFE6;
	--mesa-ink: #2A231B;
	--mesa-terracotta: #BC5E32;
	--mesa-terracotta-deep: #9C4A22;
	--mesa-olive: #6E6A45;
	--mesa-sand: #C8B79F;
	--mesa-clay: #5B4A37;
	--mesa-hair: #E5D9C6;
	--mesa-font-display: var( --wp--preset--font-family--fraunces );
	--mesa-font-body: var( --wp--preset--font-family--archivo );
}
.mesa-main .is-layout-constrained {
	max-width: 1240px;
}
/* The content cap applies to inner reading columns, never to the
   full-bleed bands themselves — let alignfull span the whole viewport
   at any width (no left-anchored 1240px strip, no horizontal overflow). */
.mesa-main .alignfull.is-layout-constrained {
	max-width: none;
}
.mesa-main .wp-block-post-content.is-layout-constrained,
.mesa-main > .entry-content.is-layout-constrained {
	max-width: 100%;
}
.mesa-main .wp-block-post-content > .alignfull + .alignfull {
	margin-block-start: 0;
}
.mesa-main {
	background: var(--mesa-paper);
	color: var(--mesa-ink);
	font-family: var(--mesa-font-body);
}
.mesa-main ::selection {
	background: var(--mesa-terracotta);
	color: var(--mesa-paper);
}
.mesa-main p {
	margin: 0 0 1.1rem;
}
.mesa-main h1,
.mesa-main h2,
.mesa-main h3,
.mesa-main h4 {
	font-family: var(--mesa-font-display);
	font-weight: 400;
	color: var(--mesa-ink);
}
.mesa-main a {
	color: inherit;
}
.mesa-main img {
	display: block;
}

/* === header === */
.mesa-shell {
	background: var(--mesa-paper);
	border-bottom: 1px solid var(--mesa-hair);
}
.mesa-header {
	padding-block: 1.1rem;
}
.mesa-header-inner {
	gap: 2rem;
}
.mesa-brand {
	gap: 0.9rem;
}
.mesa-logo {
	font-family: var(--mesa-font-display);
	font-size: 1.72rem;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1;
}
.mesa-logo a {
	text-decoration: none;
}
.mesa-logo-tag {
	font-size: 0.62rem;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--mesa-olive);
	margin: 0;
}
.mesa-header-right {
	gap: 1.7rem;
}
.mesa-nav {
	gap: 1.5rem;
}
.mesa-nav .wp-block-navigation-item a {
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mesa-ink);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: border-color .2s;
}
.mesa-nav .wp-block-navigation-item a:hover {
	border-bottom-color: var(--mesa-terracotta);
}
.mesa-cta .wp-element-button {
	background: var(--mesa-terracotta-deep);
	color: var(--mesa-paper);
	border: 1px solid var(--mesa-terracotta-deep);
	border-radius: 999px;
	padding: 0.68rem 1.4rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	transition: background-color .2s, color .2s;
}
.mesa-cta .wp-element-button:hover {
	background: #7F3C1C;
	border-color: #7F3C1C;
}
.mesa-cta-invert .wp-element-button {
	background: var(--mesa-paper);
	color: var(--mesa-terracotta-deep);
	border-color: var(--mesa-paper);
}
.mesa-cta-invert .wp-element-button:hover {
	background: #EADFCA;
}
.mesa-catalog {
	margin: 0;
}
.mesa-catalog a {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mesa-olive);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* === topbar + backlink === */
.mesa-shell > * + * {
	margin-block-start: 0;
}
.mesa-topbar {
	background: var(--mesa-paper);
	border-bottom: 1px solid var(--mesa-hair);
}
.mesa-topbar-inner {
	padding-block: 0.55rem;
	gap: 1.25rem;
}
.mesa-backlink {
	margin: 0;
}
.mesa-backlink a {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--mesa-clay);
	text-decoration: none;
	border: 1px solid var(--mesa-hair);
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	line-height: 1;
	transition: border-color .2s, color .2s, background-color .2s;
}
.mesa-backlink a span {
	color: var(--mesa-terracotta-deep);
	margin-right: 0.35rem;
	font-weight: 700;
}
.mesa-backlink a:hover {
	border-color: var(--mesa-terracotta-deep);
	color: var(--mesa-terracotta-deep);
	background: #FBF7EE;
}
.mesa-topbar .mesa-backlink a:focus-visible {
	outline: 2px solid var(--mesa-terracotta-deep);
	outline-offset: 2px;
}
.mesa-topbar-note {
	margin: 0;
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mesa-olive);
}

/* === footer === */
.mesa-footer-cta {
	background: var(--mesa-clay);
	color: var(--mesa-paper);
}
.mesa-footer-cta-row {
	padding-block: clamp(3rem, 6vw, 4.6rem);
	gap: 2.5rem;
}
.mesa-footer-title {
	color: var(--mesa-paper);
	font-size: clamp(1.9rem, 4.4vw, 2.9rem);
	line-height: 1.14;
	margin: 0;
	max-width: 20ch;
}
.mesa-footer-main {
	background: var(--mesa-ink);
	color: #D9CEBA;
	padding-block: clamp(3rem, 6vw, 4.6rem) 2rem;
}
.mesa-footer-cols {
	gap: 2rem;
	margin: 0;
}
.mesa-footer-brand {
	font-family: var(--mesa-font-display);
	font-size: 1.55rem;
	color: var(--mesa-paper);
	margin: 0 0 0.6rem;
}
.mesa-footer-blurb {
	color: #B7AA95;
	font-size: 0.9rem;
	margin: 0;
	max-width: 27rem;
}
.mesa-footer-h {
	color: var(--mesa-sand);
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}
.mesa-footer-line {
	color: #D9CEBA;
	font-size: 0.92rem;
	line-height: 1.7;
	margin: 0 0 0.9rem;
}
.mesa-footer-rule {
	background-color: #3F362B;
	margin-block: 2rem;
}
.mesa-footer-bottom {
	gap: 1rem;
	color: #9B8F7D;
	font-size: 0.8rem;
}
.mesa-footer-bottom p {
	margin: 0;
}
.mesa-footer-back {
	margin: 0;
}
.mesa-footer-back a {
	display: inline-block;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--mesa-sand);
	text-decoration: none;
	border: 1px solid #3F362B;
	border-radius: 999px;
	padding: 0.4rem 0.9rem;
	line-height: 1;
	transition: border-color .2s, color .2s;
}
.mesa-footer-back a span {
	color: var(--mesa-terracotta);
	margin-right: 0.35rem;
	font-weight: 700;
}
.mesa-footer-back a:hover {
	border-color: var(--mesa-sand);
	color: var(--mesa-paper);
}
.mesa-footer .mesa-footer-back a:focus-visible {
	outline: 2px solid var(--mesa-sand);
	outline-offset: 2px;
}

/* === shared type === */
.mesa-eyebrow {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--mesa-terracotta);
	margin: 0 0 1rem;
}
.mesa-title {
	font-family: var(--mesa-font-display);
	font-size: clamp(2.2rem, 4.6vw, 3.6rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 1.2rem;
	max-width: 16ch;
}
.mesa-lede {
	color: #6E6251;
	font-size: 1.05rem;
	line-height: 1.7;
	max-width: 40rem;
	margin: 0;
}
.mesa-section {
	padding-block: clamp(3.2rem, 7vw, 5.6rem);
}
.mesa-section-head {
	gap: 1rem;
	margin-bottom: 2.6rem;
}
.mesa-note {
	font-size: 0.82rem;
	color: var(--mesa-olive);
}
.mesa-band {
	background: var(--mesa-paper);
}
.mesa-rule {
	background-color: var(--mesa-hair);
	margin-block: 0;
}

/* === hero === */
.mesa-hero {
	background: var(--mesa-paper);
}
.mesa-hero-grid {
	align-items: stretch;
}
/* Asymmetric editorial split: narrower intro column with room to wrap,
   fuller photography column — closes the empty gap to the right. */
@media (min-width: 782px) {
	.mesa-main .mesa-hero-grid > .mesa-hero-copy { flex: 1 1 46%; min-width: 0; }
	.mesa-main .mesa-hero-grid > .mesa-hero-media { flex: 1 1 54%; }
}
.mesa-hero-copy {
	align-self: center;
}
.mesa-hero-inner {
	padding-block: clamp(4.5rem, 9vw, 8rem);
}
.mesa-hero-kicker {
	font-size: 0.7rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mesa-terracotta);
	margin: 0 0 1.4rem;
}
.mesa-hero-title {
	font-family: var(--mesa-font-display);
	font-size: clamp(3rem, 8.5vw, 6.4rem);
	letter-spacing: -0.025em;
	line-height: 0.98;
	margin: 0 0 1.6rem;
	max-width: 12ch;
}
.mesa-hero-sub {
	font-size: 1.12rem;
	line-height: 1.65;
	color: #5F5342;
	max-width: 34rem;
	margin: 0 0 2rem;
}
.mesa-hero-actions {
	gap: 1rem;
	flex-wrap: wrap;
}
.mesa-hero-meta {
	gap: clamp(1.5rem, 4vw, 3rem);
	flex-wrap: wrap;
	margin-top: 3rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--mesa-hair);
}
.mesa-hero-meta p {
	margin: 0;
	font-size: 0.85rem;
	color: #5F5342;
}
.mesa-hero-meta b {
	display: block;
	font-family: var(--mesa-font-display);
	font-size: 1.02rem;
	font-weight: 400;
	color: var(--mesa-ink);
}
.mesa-hero-media {
	width: 100%;
}
.mesa-hero-media figure {
	margin: 0;
	height: 100%;
}
.mesa-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* === statement / philosophy === */
.mesa-statement {
	background: var(--mesa-clay);
	color: var(--mesa-paper);
}
.mesa-statement-inner {
	padding-block: clamp(4rem, 8vw, 6.5rem);
}
.mesa-statement-eyebrow {
	font-size: 0.7rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--mesa-sand);
	margin: 0 0 1.6rem;
}
.mesa-statement-quote {
	font-family: var(--mesa-font-display);
	font-size: clamp(1.9rem, 4.2vw, 3.2rem);
	letter-spacing: -0.015em;
	line-height: 1.22;
	color: var(--mesa-paper);
	margin: 0 0 1.8rem;
	max-width: 22ch;
}
.mesa-statement-cite {
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mesa-sand);
	margin: 0;
}

/* === discover === */
.mesa-discover-grid {
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: center;
}
.mesa-discover-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mesa-discover-copy p {
	color: #5F5342;
	max-width: 34rem;
}
.mesa-discover-points {
	gap: 0.5rem;
	margin-top: 1.8rem;
}
.mesa-discover-points p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--mesa-ink);
}
.mesa-discover-points b {
	color: var(--mesa-terracotta);
	font-weight: 600;
}

/* === dishes === */
.mesa-dishes-grid {
	gap: clamp(1.2rem, 3vw, 2rem);
	margin: 0;
}
.mesa-dish-card {
	margin: 0;
}
.mesa-dish-card figure {
	margin: 0 0 1.1rem;
}
.mesa-dish-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.mesa-dish-head {
	gap: 0.75rem;
	align-items: baseline;
}
.mesa-dish-name {
	font-family: var(--mesa-font-display);
	font-size: 1.28rem;
	letter-spacing: -0.01em;
	margin: 0;
}
.mesa-dish-price {
	font-family: var(--mesa-font-display);
	font-size: 1.1rem;
	color: var(--mesa-terracotta);
	margin-left: auto;
}
.mesa-dish-desc {
	color: #6E6251;
	font-size: 0.92rem;
	margin: 0;
	max-width: 32ch;
}

/* === experience === */
.mesa-experience-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mesa-experience-copy h2 {
	font-size: clamp(1.9rem, 4vw, 2.8rem);
	letter-spacing: -0.02em;
	margin: 0 0 1.2rem;
}
.mesa-experience-copy p {
	color: #5F5342;
	max-width: 34rem;
}
.mesa-experience-features {
	gap: 0.5rem;
	margin-top: 1.4rem;
}
.mesa-experience-features p {
	margin: 0;
	font-size: 0.9rem;
}
.mesa-experience-features b {
	color: var(--mesa-terracotta);
	font-weight: 600;
}

/* === gallery grid === */
.mesa-gallery-grid {
	gap: clamp(0.75rem, 1.6vw, 1.1rem);
	margin: 0;
}
.mesa-gallery-grid figure {
	margin: 0;
}
.mesa-gallery-grid img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* === menu === */
.mesa-menu-hero-inner {
	padding-block: clamp(4rem, 8vw, 6.5rem) 2rem;
}
.mesa-menu-cat {
	margin: 0 0 clamp(2.5rem, 5vw, 3.6rem);
}
.mesa-menu-cat-head {
	gap: 0.6rem;
	align-items: baseline;
	padding-bottom: 0.8rem;
	border-bottom: 1px solid var(--mesa-hair);
	margin-bottom: 1.4rem;
}
.mesa-menu-cat-title {
	font-family: var(--mesa-font-display);
	font-size: 1.5rem;
	letter-spacing: -0.01em;
	margin: 0;
}
.mesa-menu-cat-note {
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--mesa-olive);
	margin: 0 0 0 auto;
	white-space: nowrap;
}
.mesa-menu-item {
	gap: 1rem;
	align-items: baseline;
	padding: 0.85rem 0;
}
.mesa-menu-item + .mesa-menu-item {
	border-top: 1px dashed var(--mesa-hair);
}
.mesa-menu-item-name {
	font-family: var(--mesa-font-display);
	font-size: 1.12rem;
	margin: 0;
}
.mesa-menu-item-desc {
	color: #6E6251;
	font-size: 0.88rem;
	margin: 0;
}
.mesa-menu-item-price {
	font-family: var(--mesa-font-display);
	font-size: 1.05rem;
	color: var(--mesa-terracotta);
	margin-left: auto;
	white-space: nowrap;
}
.mesa-menu-note-band {
	background: var(--mesa-paper);
}
.mesa-menu-note {
	color: #6E6251;
	font-size: 0.9rem;
	max-width: 38rem;
}

/* === about === */
.mesa-about-grid {
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
.mesa-about-media figure {
	margin: 0;
}
.mesa-about-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.mesa-about-copy p {
	color: #5F5342;
}
.mesa-about-value {
	padding-block: 1.3rem;
}
.mesa-about-value + .mesa-about-value {
	border-top: 1px solid var(--mesa-hair);
}
.mesa-about-value-title {
	font-family: var(--mesa-font-display);
	font-size: 1.15rem;
	margin: 0 0 0.4rem;
}
.mesa-about-value p {
	margin: 0;
	color: #6E6251;
}
.mesa-about-values-col .mesa-about-value p {
	max-width: 34rem;
}

/* === booking form === */
.mesa-booking-hero-inner {
	padding-block: clamp(4rem, 8vw, 6.5rem) 2rem;
}
.mesa-form-shell {
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
.mesa-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 1.4rem;
}
.mesa-field {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}
.mesa-field label {
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mesa-olive);
}
.mesa-field input,
.mesa-field select,
.mesa-field textarea {
	border: 1px solid var(--mesa-hair);
	background: #FBF7EE;
	color: var(--mesa-ink);
	font-family: var(--mesa-font-body);
	font-size: 1rem;
	padding: 0.75rem 0.9rem;
	border-radius: 8px;
	outline: none;
	transition: border-color .2s;
}
.mesa-field input:focus,
.mesa-field select:focus,
.mesa-field textarea:focus {
	border-color: var(--mesa-terracotta);
}
.mesa-field input:focus-visible,
.mesa-field select:focus-visible,
.mesa-field textarea:focus-visible {
	box-shadow: 0 0 0 3px rgba(188, 94, 50, 0.25);
}
.mesa-field.is-full {
	grid-column: 1 / -1;
}
.mesa-field.is-actions {
	grid-column: 1 / -1;
	align-items: flex-start;
}
.mesa-form .mesa-cta .wp-element-button {
	font-size: 0.78rem;
	padding: 0.85rem 1.8rem;
}
.mesa-form-note {
	font-size: 0.78rem;
	color: var(--mesa-olive);
}
.mesa-demo-note {
	border: 1px solid var(--mesa-hair);
	background: #FBF7EE;
	border-radius: 10px;
	padding: 1.1rem 1.3rem;
	margin-top: 2rem;
}
.mesa-demo-note b {
	font-family: var(--mesa-font-display);
	font-weight: 400;
	color: var(--mesa-terracotta-deep);
}
.mesa-demo-note p {
	margin: 0;
	color: #5F5342;
	font-size: 0.92rem;
}
.mesa-form-ok {
	border: 1px solid rgba(110, 106, 69, 0.4);
	background: #EFE9DB;
	color: var(--mesa-olive);
	border-radius: 10px;
	padding: 1rem 1.2rem;
	font-size: 0.92rem;
	margin-top: 1.4rem;
}
.mesa-booking-mount {
	min-height: 2rem;
}
.mesa-booking-fallback {
	color: #6E6251;
	font-size: 0.9rem;
	margin: 0;
}
.mesa-submit {
	background: var(--mesa-terracotta-deep);
	color: var(--mesa-paper);
	border: 1px solid var(--mesa-terracotta-deep);
	border-radius: 999px;
	padding: 0.9rem 1.6rem;
	font-family: var(--mesa-font-body);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.mesa-submit:hover {
	background: var(--mesa-terracotta);
	border-color: var(--mesa-terracotta);
}
.mesa-submit:focus-visible,
.mesa-field input:focus-visible,
.mesa-field select:focus-visible,
.mesa-field textarea:focus-visible {
	outline: 2px solid var(--mesa-terracotta-deep);
	outline-offset: 2px;
}
.mesa-submit.is-done {
	opacity: 0.55;
	cursor: default;
}
.mesa-field label {
	color: var(--mesa-clay);
}
.mesa-field [aria-invalid="true"] {
	border-color: #B3372B;
	box-shadow: 0 0 0 3px rgba(179, 55, 43, 0.18);
}
.mesa-side-head {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mesa-terracotta);
	margin: 2rem 0 0.8rem;
}
.mesa-side-line {
	font-size: 0.95rem;
	color: #5F5342;
	margin: 0 0 0.6rem;
}
.mesa-side {
	border-left: 1px solid var(--mesa-hair);
	padding-left: 2rem;
}
.mesa-demo-panel {
	border: 1px solid var(--mesa-hair);
	border-radius: 16px;
	background: #FBF7EE;
	padding: 1.6rem 1.6rem 1.2rem;
}

/* === contact === */
.mesa-contact-grid {
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
}
.mesa-contact-list p {
	margin: 0 0 0.9rem;
	color: #5F5342;
}
.mesa-contact-list b {
	font-family: var(--mesa-font-display);
	font-weight: 400;
	color: var(--mesa-ink);
	font-size: 1.02rem;
}
.mesa-contact-card {
	border: 1px solid var(--mesa-hair);
	border-radius: 14px;
	padding: 1.4rem 1.6rem;
	margin: 0;
}
.mesa-contact-card h3 {
	font-size: 1.2rem;
	margin: 0 0 0.6rem;
}
.mesa-contact-card p {
	margin: 0;
	font-size: 0.92rem;
	color: #6E6251;
}
.mesa-contact-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* === responsive === */
@media (max-width: 900px) {
	.mesa-form {
		grid-template-columns: 1fr;
	}
	.mesa-field.is-actions {
		grid-column: 1;
	}
	.mesa-side {
		border-left: 0;
		padding-left: 0;
	}
}

/* === header / responsive ===
   The desktop composition (brand + full nav + CTA + catalogue) needs more
   room than a mobile or tablet row gives: at 1040px the content row spans
   944px, but below that the brand (logo + tagline) and the nav overflow.
   Below 900px we compact the row — keep the logotype, tighten gaps, keep
   every element (menu access, CTA, catalogue link) — so it holds a single
   horizontal line with no stacking and no horizontal overflow. The core
   navigation overlay (hamburger < 600px) is left untouched: it works and
   simply gains a cleaner box to sit in. */
@media (max-width: 900px) {
	.mesa-header-inner {
		gap: 1.15rem;
	}
	.mesa-header-right {
		gap: 1rem;
	}
	.mesa-nav {
		gap: 1rem;
	}
	/* The tagline is secondary copy: hide it on small screens so the brand
	   collapses to the legible logotype and stops forcing a 180px column. */
	.mesa-logo-tag {
		display: none;
	}
	.mesa-brand {
		gap: 0.5rem;
	}
	.mesa-header-right .mesa-cta {
		flex: 0 0 auto;
	}
	.mesa-header-right .mesa-cta .wp-element-button,
	.mesa-header-right .mesa-catalog a {
		white-space: nowrap;
	}
	.mesa-header-right .mesa-cta .wp-element-button {
		padding-inline: 1.15rem;
	}
}

@media (max-width: 560px) {
	.mesa-header {
		padding-block: 0.8rem;
	}
	.mesa-header-inner {
		gap: 0.85rem;
	}
	.mesa-header-right {
		gap: 0.8rem;
	}
	.mesa-logo {
		font-size: 1.5rem;
	}
	.mesa-header-right .mesa-cta .wp-element-button {
		padding-inline: 1rem;
		font-size: 0.66rem;
	}
	/* Catalogue/backlink collapses to its text only on the smallest screens. */
	.mesa-catalog a {
		font-size: 0.66rem;
	}
	.mesa-topbar-note {
		display: none;
	}
}

/* === outline button === */
.mesa-main .mesa-outline .wp-element-button {
	background: transparent;
	color: var(--mesa-terracotta-deep);
	border: 1px solid rgba(156, 74, 34, 0.5);
	border-radius: 999px;
	padding: 0.68rem 1.4rem;
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
	transition: border-color .2s, color .2s, background-color .2s;
}
.mesa-main .mesa-outline .wp-element-button:hover {
	border-color: var(--mesa-terracotta-deep);
	color: var(--mesa-terracotta-deep);
	background: rgba(156, 74, 34, 0.06);
}

/* === gallery lightbox === */
.mesa-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(18, 13, 8, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 4rem);
}
.mesa-lightbox[hidden] { display: none; }
.mesa-lightbox img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 6px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.mesa-lightbox-cap {
	position: absolute;
	bottom: clamp(1rem, 4vh, 2rem);
	left: 50%;
	transform: translateX(-50%);
	color: var(--mesa-sand);
	font-size: 0.85rem;
	letter-spacing: 0.06em;
	text-align: center;
	max-width: 80%;
	margin: 0;
}
.mesa-lightbox button {
	position: absolute;
	background: rgba(245, 239, 230, 0.12);
	color: var(--mesa-paper);
	border: 1px solid rgba(245, 239, 230, 0.25);
	border-radius: 999px;
	width: 3rem;
	height: 3rem;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	transition: background-color .2s;
}
.mesa-lightbox button:hover {
	background: rgba(245, 239, 230, 0.24);
}
.mesa-lightbox-close {
	top: clamp(1rem, 4vw, 2rem);
	right: clamp(1rem, 4vw, 2rem);
}
.mesa-lightbox-prev { left: clamp(0.75rem, 3vw, 2rem); }
.mesa-lightbox-next { right: clamp(0.75rem, 3vw, 2rem); }

/* === scroll reveal === */
.mesa-js .mesa-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.mesa-js .mesa-reveal.is-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.mesa-reveal,
	.mesa-js .mesa-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.mesa-shell,
	.mesa-main {
		scroll-behavior: auto;
	}
}

/* === accessibility: contrast + focus ===
   Terracotta #BC5E32 on paper ~3.4:1 fails AA for small text, so text accents
   and interactive fills use the deeper terracotta #9C4A22 (>=4.5:1). The bright
   terracotta stays for the big display accents and decorations. */
.mesa-eyebrow,
.mesa-hero-kicker,
.mesa-side-head,
.mesa-dish-price,
.mesa-menu-item-price,
.mesa-discover-points b,
.mesa-experience-features b {
	color: var(--mesa-terracotta-deep);
}
.mesa-shell a:focus-visible,
.mesa-shell button:focus-visible,
.mesa-main a:focus-visible,
.mesa-main button:focus-visible {
	outline: 2px solid var(--mesa-terracotta-deep);
	outline-offset: 2px;
}

/* ==========================================================================
   REWORK "SERVICIO DE SALA" — cabecera compacta, botones de píldora con relleno,
   asistente de reserva en tres pasos y movimiento cálido y pausado.
   El movimiento solo vive bajo prefers-reduced-motion: no-preference y html.mesa-m.
   ========================================================================== */

/* ---- Cabecera compacta (antes 126–146 px) ---- */
.mesa-topbar-inner { padding-block: 0.25rem; }
.mesa-header { padding-block: 0.7rem; }
.mesa-backlink a { min-height: 36px; display: inline-flex; align-items: center; padding-block: 0.3rem; }
.mesa-nav .wp-block-navigation-item a { display: inline-block; padding-block: 0.6rem 0.5rem; }
@media (max-width: 781px) {
	.mesa-topbar-note { display: none; }
	.mesa-topbar-inner { justify-content: flex-start; }
	.mesa-logo-tag { display: none; }
	.mesa-header-right { gap: 0.8rem; }
	.mesa-header-right .wp-block-buttons { display: none; }
	.wp-block-navigation__responsive-container-open { min-width: 44px; min-height: 44px; }
	.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
	.wp-block-navigation__responsive-container.is-menu-open { background: var(--mesa-paper); color: var(--mesa-ink); }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
		font-family: var(--mesa-font-display); font-size: 2rem; letter-spacing: -0.01em; text-transform: none; padding-block: 0.5rem;
	}
}

/* ---- Botones: relleno que avanza dentro de la píldora ---- */
.mesa-main .wp-element-button, .mesa-header .wp-element-button, .mesa-footer .wp-element-button, .mesa-submit, .mesa-back {
	min-height: 46px;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	background-repeat: no-repeat; background-position: 0 50%; background-size: 0% 100%;
	transform: none !important;
	transition: background-size 0.55s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.35s ease, border-color 0.35s ease, translate 0.2s ease !important;
}
.mesa-cta .wp-element-button, .mesa-submit { background-color: var(--mesa-terracotta-deep); background-image: linear-gradient(var(--mesa-ink), var(--mesa-ink)); }
.mesa-cta .wp-element-button:hover, .mesa-submit:hover:not(.is-done), .mesa-cta .wp-element-button:focus-visible, .mesa-submit:focus-visible {
	background-color: var(--mesa-terracotta-deep); background-size: 100% 100%; border-color: var(--mesa-ink);
}
.mesa-cta-invert .wp-element-button { background-image: linear-gradient(var(--mesa-terracotta-deep), var(--mesa-terracotta-deep)); background-color: var(--mesa-paper); }
.mesa-cta-invert .wp-element-button:hover { background-color: var(--mesa-paper); background-size: 100% 100%; color: var(--mesa-paper); }
.mesa-outline .wp-element-button, .mesa-back {
	background-color: transparent; background-image: linear-gradient(var(--mesa-ink), var(--mesa-ink));
	color: var(--mesa-ink); border: 1px solid var(--mesa-ink); border-radius: 999px;
	font: 600 0.72rem/1 var(--mesa-font-body); letter-spacing: 0.12em; text-transform: uppercase; padding: 0.85rem 1.5rem; cursor: pointer;
}
.mesa-outline .wp-element-button:hover, .mesa-outline .wp-element-button:focus-visible, .mesa-back:hover, .mesa-back:focus-visible {
	background-color: transparent; background-size: 100% 100%; color: var(--mesa-paper);
}
.wp-element-button:active, .mesa-submit:active, .mesa-back:active { translate: 0 1px; }
.mesa-main .wp-element-button:focus-visible, .mesa-back:focus-visible { outline: 2px solid var(--mesa-terracotta-deep); outline-offset: 3px; }

/* ---- Asistente de reserva ---- */
.mesa-wiz { display: grid; gap: 1.1rem; }
.mesa-wiz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; counter-reset: ws; }
.mesa-wiz-steps li { counter-increment: ws; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7a6d5a; padding-top: 0.6rem; border-top: 2px solid var(--mesa-hair); transition: border-color 0.5s ease, color 0.5s ease; }
.mesa-wiz-steps li::before { content: counter(ws) " · "; }
.mesa-wiz-steps li.is-current { color: var(--mesa-ink); border-top-color: var(--mesa-terracotta-deep); }
.mesa-wiz-steps li.is-done { color: var(--mesa-clay); border-top-color: var(--mesa-olive); }
.mesa-wiz-summary { margin: 0; padding: 0.7rem 1rem; background: #EFE9DB; border-radius: 10px; font-family: var(--mesa-font-display); font-size: 1.05rem; color: var(--mesa-ink); min-height: 2.9rem; }
.mesa-wiz-form { display: grid; gap: 1.2rem; }
.mesa-wiz-pane { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; }
.mesa-wiz-pane[hidden] { display: none; }
.mesa-wiz-pane legend { font-family: var(--mesa-font-display); font-size: 1.35rem; padding: 0; margin-bottom: 0.4rem; }
.mesa-days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(64px, 1fr); gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; }
.mesa-day, .mesa-slot { position: relative; }
.mesa-day input, .mesa-slot input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.mesa-day { display: grid; justify-items: center; gap: 0.1rem; padding: 0.7rem 0.3rem; min-height: 78px; border: 1px solid var(--mesa-hair); border-radius: 12px; background: #FBF7EE; scroll-snap-align: start; transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease; }
.mesa-day-w { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #7a6d5a; }
.mesa-day-n { font-family: var(--mesa-font-display); font-size: 1.5rem; line-height: 1.1; }
.mesa-day-m { font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7a6d5a; }
.mesa-day.is-closed { opacity: 0.45; }
.mesa-day:has(input:checked), .mesa-slot:has(input:checked) { background: var(--mesa-terracotta-deep); border-color: var(--mesa-terracotta-deep); color: var(--mesa-paper); }
.mesa-day:has(input:checked) span { color: var(--mesa-paper); }
.mesa-day:has(input:focus-visible), .mesa-slot:has(input:focus-visible) { outline: 2px solid var(--mesa-terracotta-deep); outline-offset: 3px; }
.mesa-party { display: flex; align-items: center; gap: 1rem; }
.mesa-party-l { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mesa-clay); margin-right: auto; }
.mesa-step-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--mesa-ink); background: transparent; color: var(--mesa-ink); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: background-color 0.35s ease, color 0.35s ease; }
.mesa-step-btn:hover:not(:disabled), .mesa-step-btn:focus-visible { background: var(--mesa-ink); color: var(--mesa-paper); }
.mesa-step-btn:disabled { opacity: 0.35; cursor: default; }
.mesa-step-btn:focus-visible { outline: 2px solid var(--mesa-terracotta-deep); outline-offset: 3px; }
.mesa-party-n { font-family: var(--mesa-font-display); font-size: 1.8rem; min-width: 2ch; text-align: center; }
.mesa-wiz-note { margin: 0; font-size: 0.8rem; color: #6E6251; }
.mesa-slot-group { display: grid; gap: 0.5rem; }
.mesa-slot-title { margin: 0; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mesa-clay); }
.mesa-slot-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mesa-slot { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 1rem; border: 1px solid var(--mesa-ink); border-radius: 999px; font-size: 0.9rem; transition: background-color 0.4s ease, color 0.4s ease; }
.mesa-slot.is-full { border-color: var(--mesa-hair); color: #8a7d69; text-decoration: line-through; }
.mesa-check { display: flex; align-items: center; gap: 0.7rem; min-height: 44px; font-size: 0.92rem; cursor: pointer; }
.mesa-check input { width: 20px; height: 20px; accent-color: var(--mesa-terracotta-deep); }
.mesa-wiz-err { margin: 0; color: #B3372B; font-size: 0.9rem; }
.mesa-wiz-err[hidden] { display: none; }
.mesa-wiz-nav { display: flex; gap: 0.8rem; align-items: center; }
.mesa-wiz-nav [hidden] { display: none; }
.mesa-wiz-done { padding: 1.4rem; background: #EFE9DB; border-radius: 14px; display: grid; gap: 0.6rem; }
.mesa-wiz-done-k { margin: 0; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mesa-olive); }
.mesa-wiz-done-t { margin: 0; font-family: var(--mesa-font-display); font-size: 1.8rem; }
.mesa-wiz-done-s { margin: 0; font-size: 1.05rem; }
.mesa-wiz-done .mesa-back { justify-self: start; margin-top: 0.4rem; }
.mesa-wiz .mesa-form { grid-template-columns: 1fr 1fr; }
.mesa-field input, .mesa-field select, .mesa-field textarea { min-height: 46px; }

@media (max-width: 560px) {
	.mesa-wiz .mesa-form { grid-template-columns: 1fr; }
	.mesa-wiz-steps li { letter-spacing: 0.06em; font-size: 0.62rem; }
}

/* ---- Móvil ---- */
@media (max-width: 781px) {
	.mesa-hero-media img { aspect-ratio: 4 / 3; height: auto; }
	.mesa-hero-actions .wp-block-button, .mesa-hero-actions .wp-block-button__link { width: 100%; }
}

/* ---- Movimiento cálido (solo sin reducción de movimiento) ---- */
@media (prefers-reduced-motion: no-preference) {
	html.mesa-m .mesa-hero-title { opacity: 1; }
	.mesa-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
	html.mesa-m .mesa-wi { display: inline-block; transform: translateY(108%); transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--i, 0) * 100ms + 120ms); }
	html.mesa-m.mesa-in .mesa-wi { transform: none; }
	html.mesa-m .mesa-hero-media figure { overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s; }
	html.mesa-m.mesa-in .mesa-hero-media figure { clip-path: inset(0); }
	html.mesa-m .mesa-hero-media img { scale: 1.12; translate: 0 var(--mesa-py, 0px); transition: scale 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.2s; }
	html.mesa-m.mesa-in .mesa-hero-media img { scale: 1.02; }
	.mesa-main.mesa-js .mesa-reveal { transition-duration: 1s; }
	.mesa-main.mesa-js .mesa-dish-card, .mesa-main.mesa-js .mesa-about-value { opacity: 0; translate: 0 22px; transition: opacity 0.9s ease, translate 1s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: calc(var(--i, 0) * 140ms); }
	.mesa-main.mesa-js .is-in .mesa-dish-card, .mesa-main.mesa-js .is-in .mesa-about-value, .mesa-main.mesa-js .mesa-dish-card.is-in { opacity: 1; translate: 0 0; }
	.mesa-wiz-pane.is-current { animation: mesa-pane 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	@keyframes mesa-pane { from { opacity: 0; translate: 18px 0; } to { opacity: 1; translate: 0 0; } }
	.mesa-wiz-done { animation: mesa-pane 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	.mesa-lightbox img { animation: mesa-zoom 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
	@keyframes mesa-zoom { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
	@media (hover: hover) and (pointer: fine) {
		.mesa-dish-card img { transition: scale 1.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
		.mesa-dish-card figure { overflow: hidden; }
		.mesa-dish-card:hover img { scale: 1.05; }
	}
}
@media (prefers-reduced-motion: reduce) {
	.mesa-wiz-steps li, .mesa-day, .mesa-slot { transition: none; }
}

.mesa-backlink { line-height: 1; }
.mesa-backlink a { min-height: 32px; }
@media (max-width: 781px) { .mesa-backlink a { min-height: 40px; } }

.mesa-shell .mesa-backlink a { min-height: 32px !important; }
@media (max-width: 781px) { .mesa-shell .mesa-backlink a { min-height: 40px !important; } }

.mesa-shell .mesa-backlink a { box-sizing: border-box; }

.mesa-day-m { letter-spacing: 0.04em; font-size: 0.6rem; white-space: nowrap; }
.mesa-wiz-summary { min-height: 0; }

/* Fase 3 — objetivos táctiles: enlaces de cabecera, navegación, pie y títulos de tarjeta (mín. 36–44 px) */
body.page-template-page-mesa header a, body.page-template-page-mesa footer a, body.page-template-page-mesa .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 36px; }
body.page-template-page-mesa header .wp-block-navigation-item__content, body.page-template-page-mesa header nav a { min-height: 44px; }
body.page-template-page-mesa .wp-block-navigation__responsive-container-open, body.page-template-page-mesa .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
body.page-template-page-mesa [class*="-card-name"] a, body.page-template-page-mesa [class*="-card-title"] a, body.page-template-page-mesa [class*="-card"] h3 a { display: inline-block; padding-block: .4rem; }
/* ==========================================================================
   MESA — HERO "MESA PUESTA": arco de fotografía y un ticket de reserva que se rellena
   en la propia portada y precarga el asistente de reservas. Original de MESA.
   ========================================================================== */
.ms-wrap { padding: 0 !important; margin-block: 0 !important; }
.ms, .ms * { box-sizing: border-box; }
.ms { background: var(--mesa-paper, #F5EFE6); color: var(--mesa-ink, #2A231B); overflow: hidden; }
.ms-in { max-width: 1280px; margin-inline: auto; padding: clamp(1.8rem, 5vw, 4rem) clamp(1.1rem, 4vw, 2.5rem) clamp(2.4rem, 6vw, 4.6rem); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
.ms-k { margin: 0 0 1.2rem; font: 600 .72rem/1 var(--mesa-font-body, sans-serif); letter-spacing: .26em; text-transform: uppercase; color: var(--mesa-terracotta, #BC5E32); }
.ms-title { margin: 0 0 1.3rem; font: 400 clamp(2.8rem, 6.4vw, 5.8rem)/.98 var(--mesa-font-display, serif); letter-spacing: -.028em; color: var(--mesa-ink, #2A231B); max-width: 11ch; text-wrap: balance; }
.ms-sub { margin: 0 0 1.6rem; max-width: 30rem; font-size: 1.08rem; line-height: 1.65; color: #5F5342; }
.ms-meta { display: flex; flex-wrap: wrap; gap: .8rem 2rem; margin: 0 0 1.4rem; padding: 1.1rem 0 0; list-style: none; border-top: 1px solid var(--mesa-hair, #E5D9C6); font-size: .86rem; color: #5F5342; }
.ms-meta b { display: block; font: 400 1.02rem/1.2 var(--mesa-font-display, serif); color: var(--mesa-ink, #2A231B); }
.ms-links { display: flex; gap: 1.4rem; margin: 0; }
.ms-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mesa-ink, #2A231B); font: 600 .74rem/1 var(--mesa-font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size .5s ease; }
.ms-links a:hover { background-size: 0 1px; background-position: 100% 100%; }
.ms-stage { position: relative; padding-bottom: 3.4rem; }
.ms-arch { margin: 0; aspect-ratio: 4 / 5; max-height: 640px; width: min(100%, 520px); margin-left: auto; overflow: hidden; border-radius: 999px 999px 28px 28px; background: #d9cbb6; box-shadow: 0 40px 80px -40px rgba(42,35,27,.55); }
.ms-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; display: block; filter: grayscale(.2) saturate(.9); scale: 1.08; }
.ms-ticket { position: absolute; left: 0; bottom: 0; width: min(380px, 78%); padding: 1.3rem 1.3rem 1.1rem; background: #fffaf1; color: var(--mesa-ink, #2A231B); border-radius: 18px; box-shadow: 0 30px 60px -24px rgba(42,35,27,.5), 0 0 0 1px rgba(42,35,27,.08); rotate: -2.2deg; }
.ms-ticket::before, .ms-ticket::after { content: ""; position: absolute; top: 3.1rem; width: 18px; height: 18px; border-radius: 50%; background: var(--mesa-paper, #F5EFE6); box-shadow: inset 0 0 0 1px rgba(42,35,27,.08); }
.ms-ticket::before { left: -9px; } .ms-ticket::after { right: -9px; }
.ms-t-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: .9rem; margin-bottom: .9rem; border-bottom: 1px dashed rgba(42,35,27,.28); }
.ms-t-k { margin: 0; font: 400 1.4rem/1 var(--mesa-font-display, serif); } .ms-t-n { margin: 0; font: 600 .68rem/1 var(--mesa-font-body, sans-serif); letter-spacing: .14em; color: #7a6d5a; text-transform: uppercase; } .ms-t-n b { font-variant-numeric: tabular-nums; color: var(--mesa-ink, #2A231B); }
.ms-f { border: 0; margin: 0 0 .9rem; padding: 0; min-width: 0; }
.ms-f legend { padding: 0; margin-bottom: .45rem; font: 600 .66rem/1 var(--mesa-font-body, sans-serif); letter-spacing: .16em; text-transform: uppercase; color: #7a6d5a; }
.ms-days { display: flex; gap: .4rem; }
.ms-day, .ms-svc label { position: relative; flex: 1 1 0; }
.ms-day input, .ms-svc input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ms-day span, .ms-svc span { display: grid; place-items: center; align-content: center; gap: .05rem; min-height: 56px; border: 1px solid rgba(42,35,27,.3); border-radius: 12px; font-size: .78rem; text-align: center; transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.ms-day span b { font: 400 1.25rem/1 var(--mesa-font-display, serif); }
.ms-day.is-closed { opacity: .4; }
.ms-day:has(input:checked) span, .ms-svc label:has(input:checked) span { background: var(--mesa-terracotta-deep, #9C4A22); border-color: var(--mesa-terracotta-deep, #9C4A22); color: #fff; }
.ms-day:has(input:focus-visible) span, .ms-svc label:has(input:focus-visible) span { outline: 2px solid var(--mesa-ink, #2A231B); outline-offset: 2px; }
.ms-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: end; }
.ms-step { display: flex; align-items: center; gap: .4rem; }
.ms-step button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mesa-ink, #2A231B); background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.ms-step button:hover:not(:disabled), .ms-step button:focus-visible { background: var(--mesa-ink, #2A231B); color: #fff; } .ms-step button:disabled { opacity: .35; cursor: default; }
.ms-step output { min-width: 2ch; text-align: center; font: 400 1.5rem/1 var(--mesa-font-display, serif); }
.ms-svc { display: flex; gap: .4rem; }
.ms-go { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 52px; padding: 0 .5rem 0 1.4rem; border: 0; border-radius: 999px; background: var(--mesa-terracotta-deep, #9C4A22); color: #fff; font: 600 .76rem/1 var(--mesa-font-body, sans-serif); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden; isolation: isolate; transition: color .4s ease; }
.ms-go i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--mesa-terracotta-deep, #9C4A22); font-style: normal; font-size: 1rem; transition: translate .4s cubic-bezier(.22,.61,.36,1); }
.ms-go::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mesa-ink, #2A231B); transform: translateX(-101%); transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.ms-go:hover::before, .ms-go:focus-visible::before { transform: none; } .ms-go:hover i { translate: 3px 0; }
.ms-go:focus-visible, .ms-f input:focus-visible, .ms-step button:focus-visible { outline: 2px solid var(--mesa-ink, #2A231B); outline-offset: 3px; }
.ms-fine { margin: .7rem 0 0; font-size: .72rem; color: #7a6d5a; text-align: center; }
@media (max-width: 960px) {
	.ms-in { grid-template-columns: minmax(0, 1fr); }
	.ms-title { max-width: 14ch; }
	.ms-arch { margin-inline: auto; aspect-ratio: 5 / 4; max-height: 420px; width: 100%; border-radius: 999px 999px 24px 24px; }
	.ms-stage { padding-bottom: 0; }
	.ms-ticket { position: relative; margin: -4.5rem auto 0; width: min(420px, 92%); }
}
@media (prefers-reduced-motion: no-preference) {
	.ms-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
	html.ms-m .ms-wi { display: inline-block; transform: translateY(108%); transition: transform 1.1s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 100ms + 150ms); }
	html.ms-m.ms-ready .ms-wi { transform: none; }
	html.ms-m .ms-k, html.ms-m .ms-sub, html.ms-m .ms-meta, html.ms-m .ms-links { opacity: 0; translate: 0 16px; transition: opacity 1s ease, translate 1.1s cubic-bezier(.22,.61,.36,1); }
	html.ms-m.ms-ready .ms-k { opacity: 1; translate: 0 0; transition-delay: .05s; } html.ms-m.ms-ready .ms-sub { opacity: 1; translate: 0 0; transition-delay: .8s; } html.ms-m.ms-ready .ms-meta { opacity: 1; translate: 0 0; transition-delay: 1s; } html.ms-m.ms-ready .ms-links { opacity: 1; translate: 0 0; transition-delay: 1.15s; }
	html.ms-m .ms-arch { clip-path: inset(100% 0 0 0 round 999px 999px 28px 28px); transition: clip-path 1.4s cubic-bezier(.22,.61,.36,1) .2s; }
	html.ms-m.ms-ready .ms-arch { clip-path: inset(0 0 0 0 round 999px 999px 28px 28px); }
	.ms-arch img { animation: ms-zoom 16s cubic-bezier(.22,.61,.36,1) both; } @keyframes ms-zoom { from { scale: 1.2; } to { scale: 1.04; } }
	html.ms-m .ms-ticket { opacity: 0; translate: 0 40px; rotate: 1.5deg; transition: opacity 1s ease, translate 1.3s cubic-bezier(.22,.61,.36,1), rotate 1.3s cubic-bezier(.22,.61,.36,1); }
	html.ms-m.ms-ready .ms-ticket { opacity: 1; translate: 0 0; rotate: -2.2deg; transition-delay: 1s; }
}

/* ==========================================================================
   MÓVIL — DOCK INFERIOR, PROGRESO DE LECTURA Y FOCO TÁCTIL (Mesa)
   Pensado para el pulgar: navegación a una mano, indicador que se desliza entre
   páginas y tarjetas que se "encienden" al centrarse en pantalla (el equivalente
   táctil del hover). Solo se activa en pantallas estrechas.
   ========================================================================== */
.msm-dock, .msm-prog { display: none; }
@media (max-width: 820px) {
	body.msm-has-dock { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
	.msm-prog { display: block; position: fixed; z-index: 90; top: 0; left: 0; right: 0; height: 3px; background: transparent; pointer-events: none; }
	.msm-prog i { display: block; height: 100%; background: #E08A5E; transform: scaleX(0); transform-origin: left; }
	.msm-dock {
		display: flex; position: fixed; z-index: 90; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		margin: 0; padding: 6px; gap: 2px; background: #2A231B; border: 1px solid rgba(255,255,255,.08); border-radius: 999px;
		box-shadow: 0 14px 34px -10px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.18);
		font-family: var(--mesa-font-body, sans-serif); -webkit-tap-highlight-color: transparent; isolation: isolate;
		transition: transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
	}
	.msm-dock.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; }
	.msm-dock a {
		position: relative; z-index: 1; flex: 1 1 0; min-width: 0; min-height: 52px; display: grid; justify-items: center; align-content: center; gap: 3px;
		padding: 4px 2px; border-radius: calc(999px - 6px); color: #cfc2ae; text-decoration: none; font-size: .64rem; font-weight: 600; letter-spacing: .02em; line-height: 1.1;
		text-transform: none; background: none; border: 0; transition: color .25s ease, scale .2s ease;
	}
	.msm-dock a:active { scale: .92; }
	.msm-dock a svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
	.msm-dock a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.msm-dock a.is-on { color: #2A231B; }
	.msm-dock a.is-on svg { transform: translateY(-1px) scale(1.12); }
	.msm-dock a.is-cta { background: #BC5E32; color: #ffffff; flex: 1.15 1 0; border-radius: calc(999px - 6px); }
	.msm-dock a.is-cta.is-on { color: #ffffff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
	.msm-ind { position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: calc(999px - 6px); background: #F5EFE6; opacity: 0; pointer-events: none; }
	.msm-ind.is-go { opacity: 1; transition: transform .5s cubic-bezier(.34,1.3,.64,1), width .5s cubic-bezier(.34,1.3,.64,1); }
	.msm-dock a:focus-visible { outline: 2px solid #2A231B; outline-offset: -2px; }
	/* Foco táctil: la tarjeta más cercana al centro de la pantalla se enciende. */
	.mesa-dish-card { transition: translate .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s ease; }
	.mesa-dish-card.msm-live { translate: 0 -4px; box-shadow: 0 18px 30px -18px rgba(0,0,0,.45); }
	.mesa-dish-card img { transition: scale 1.2s cubic-bezier(.22,.61,.36,1); }
	.mesa-dish-card.msm-live img { scale: 1.06; }
	@media (prefers-reduced-motion: reduce) { .msm-dock, .msm-ind.is-go, .msm-dock a, .msm-dock a svg { transition: none; } }
}
@media (hover: none) { .wp-element-button:active, [class*="-btn"]:active, [class*="-cta"]:active { scale: .97; } }


/* ==========================================================================
   ENTRADA — pantalla de carga propia de Mesa (motivo: plate)
   ========================================================================== */
html.msm-intro-on { overflow: hidden; }
.msm-intro { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #2A231B; color: #F5EFE6; font-family: var(--mesa-font-body, sans-serif); overflow: hidden; }
.msm-intro-in { position: relative; z-index: 2; display: grid; justify-items: center; gap: .9rem; padding: 2rem; text-align: center; transition: opacity .4s ease, transform .7s cubic-bezier(.76,0,.24,1); }
.msm-intro-g { width: clamp(150px, 42vw, 260px); height: auto; color: #E08A5E; overflow: visible; }
.msm-intro-g path, .msm-intro-g circle[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: msm-draw 1s cubic-bezier(.65,0,.35,1) .1s forwards; }
.msm-intro-g path[stroke-dasharray="6 8"] { stroke-dasharray: 6 8; stroke-dashoffset: 0; animation: none; clip-path: inset(0 100% 0 0); animation: msm-wipe 1s ease .1s forwards; }
@keyframes msm-draw { to { stroke-dashoffset: 0; } }
@keyframes msm-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes msm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.msm-intro-name { display: block; font-family: var(--mesa-font-display, serif); font-size: clamp(2.6rem, 13vw, 5rem); line-height: 1; letter-spacing: -.02em; opacity: 0; animation: msm-in .8s ease .25s forwards; }
.msm-intro-tag { display: block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; opacity: 0; color: #F5EFE6; animation: msm-in .8s ease .45s forwards; }
.msm-intro-tag { opacity: 0; }
.msm-intro-by { display: block; margin-top: 1.4rem; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: msm-in .8s ease .65s forwards; }
.msm-intro.is-out .msm-intro-in { opacity: 0; transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) { .msm-intro { display: none; } html.msm-intro-on { overflow: auto; } }

@property --msm-r { syntax: '<length-percentage>'; inherits: false; initial-value: 0%; }
.msm-intro { -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--msm-r), #000 calc(var(--msm-r) + 1px)); mask: radial-gradient(circle at 50% 50%, transparent var(--msm-r), #000 calc(var(--msm-r) + 1px)); transition: --msm-r .95s cubic-bezier(.65,0,.35,1), opacity .3s ease .7s; }
.msm-intro.is-out { --msm-r: 150%; opacity: 0; }


/* === fix: los botones del asistente de reserva no deben partir palabras («ATRÁ / S») === */
.mesa-wiz-nav { flex-wrap: wrap; row-gap: 10px; }
.mesa-wiz-nav .mesa-back,
.mesa-wiz-nav .mesa-submit { white-space: nowrap; flex: 0 0 auto; }