/**
 * Estructura de los widgets públicos.
 *
 * CONTRATO CON EL TEMA: aquí no hay ni un color literal. Todo sale de tokens
 * `--mrc-*` que define el tema, con un valor de reserva por si el plugin se
 * activa sobre otro tema. Así el plugin es reutilizable y el tema sigue
 * mandando en la presentación.
 *
 *   --mrc-bg          fondo de página
 *   --mrc-surface     tarjeta
 *   --mrc-surface-2   tarjeta hundida / campo
 *   --mrc-ink         texto principal
 *   --mrc-muted       texto secundario
 *   --mrc-accent      acento (botón)
 *   --mrc-accent-ink  texto sobre el acento
 *   --mrc-accent-2    acento secundario
 *   --mrc-accent-text acento como TEXTO (sobre claro el tema pone turquesa; sobre oscuro, el amarillo)
 *   --mrc-line        borde
 *   --mrc-ring        color del foco
 */

/* `[hidden]` tiene que ganar siempre.
   El atributo lo aplica el navegador con `[hidden]{display:none}`, que es una
   regla de especificidad (0,1,0): cualquier clase nuestra que fije `display`
   la pisa. Pasó con `.mrc-done{display:flex}` — el «Request sent» del
   formulario de eventos salía pintado en la portada antes de enviar nada. */
[hidden] {
	display: none !important;
}

/* `box-sizing` explícito en todo lo nuestro.
   No se hereda del tema: un `<dialog>` es su propio subárbol y los campos con
   `width:100%` + padding + borde se salían de la caja, dejando una barra de
   desplazamiento horizontal dentro del diálogo. */
.mrc-nights,
.mrc-classes,
.mrc-venues,
.mrc-dialog,
.mrc-status,
.mrc-form,
.mrc-done,
.mrc-nights *,
.mrc-classes *,
.mrc-venues *,
.mrc-dialog *,
.mrc-status *,
.mrc-form *,
.mrc-done * {
	box-sizing: border-box;
}

.mrc-nights,
.mrc-classes__grid,
.mrc-venues {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- noches */

.mrc-nights {
	display: grid;
	/* Medido, no estimado: la columna útil son 1200 px. Con 5 tarjetas hay 4
	   huecos, así que 5·ancho + 4·hueco ≤ 1200. Con hueco de 1.25rem (20 px)
	   quedan 1120 px para cinco → 224 px cada una, y el mínimo se pone en
	   13rem (208 px) para que quepan con margen. Con 14rem y hueco de 1.75rem
	   sumaban 1232 y la quinta noche caía sola a una segunda fila. */
	gap: clamp( 1rem, 1.6vw, 1.25rem );
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 13rem ), 1fr ) );
}

.mrc-night {
	display: flex;
	flex-direction: column;
	background: var( --mrc-surface, #16121f );
	border: 0;
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	border-radius: var( --mrc-radius-lg, 24px );
	overflow: hidden;
	transition: transform 180ms ease, border-color 180ms ease;
}

@media ( prefers-reduced-motion: no-preference ) {
	.mrc-night:hover {
		transform: translateY( -4px );
	}
}

.mrc-night__art {
	aspect-ratio: 4 / 5;
	background: var( --mrc-surface-2, #0e0b16 );
}

.mrc-night__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mrc-night__body {
	padding: 1.15rem 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	flex: 1;
}

.mrc-night__date {
	margin: 0;
	font-size: .84rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-weight: 700;
}

.mrc-night__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: clamp( 1.8rem, 3.6vw, 2.3rem );
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
}

.mrc-night__djs {
	margin: 0;
	font-size: .95rem;
	color: var( --mrc-ink, #fff );
	font-weight: 700;
}

.mrc-night__blurb {
	margin: 0;
	font-size: .9rem;
	line-height: 1.5;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-night__meta {
	margin: auto 0 0;
	padding-top: .75rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.mrc-tag {
	font-size: .68rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-weight: 700;
	padding: .3rem .6rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	background: var( --mrc-surface-2, #0e0b16 );
	color: var( --mrc-muted, #a9a3b8 );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-tag--free {
	color: var( --mrc-accent-ink, #12121a );
	background: var( --mrc-accent, #FFD400 );
	border-color: transparent;
}

/* ---------------------------------------------------------------- clases */

.mrc-classes__grid {
	display: grid;
	gap: clamp( .9rem, 2vw, 1.25rem );
	grid-template-columns: repeat( auto-fill, minmax( min( 100%, 16rem ), 1fr ) );
}

.mrc-class {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	padding: 1.25rem 1.3rem 1.4rem;
	background: var( --mrc-surface, #16121f );
	border: 0;
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	border-radius: var( --mrc-radius-md, 16px );
}

.mrc-class.is-full {
	opacity: .82;
}

.mrc-class__when {
	margin: 0;
	font-size: .82rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-class__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: 2rem;
	line-height: 1.05;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
}

.mrc-class__title span {
	display: block;
	font-family: var( --mrc-font-body, inherit );
	font-size: .82rem;
	letter-spacing: .1em;
	font-weight: 500;
	text-transform: uppercase;
	color: var( --mrc-muted, #a9a3b8 );
	margin-top: .25rem;
}

.mrc-class__where,
.mrc-class__price {
	margin: 0;
	font-size: .88rem;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-class__price {
	font-weight: 700;
	font-size: .95rem;
	color: var( --mrc-ink, #fff );
}

.mrc-class__price span {
	font-weight: 400;
	color: var( --mrc-muted, #a9a3b8 );
}

/* El cupo es el dato que vende: se lee antes que nada. */
.mrc-class__seats {
	margin: .35rem 0 .1rem;
	font-size: .92rem;
	color: var( --mrc-ink, #fff );
}

.mrc-class__seats strong {
	font-family: var( --mrc-font-display, inherit );
	font-size: 1.9rem;
	line-height: 1;
	vertical-align: -.05em;
}

.mrc-class__seats.is-tight {
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-weight: 700;
}

.mrc-class__seats.is-full {
	color: var( --mrc-muted, #a9a3b8 );
	font-weight: 700;
}

.mrc-class .mrc-btn {
	margin-top: auto;
}

/* --------------------------------------------------------------- botones */

.mrc-btn {
	appearance: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	/* 44px de alto mínimo: por debajo, el dedo falla. */
	min-height: 44px;
	padding: .7rem 1.4rem;
	margin-top: .75rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	font: inherit;
	font-weight: 700;
	letter-spacing: .03em;
	text-decoration: none;
	transition: filter 150ms ease, transform 150ms ease;
}

.mrc-btn:hover {
	filter: brightness( 1.08 );
}

.mrc-btn:active {
	transform: translateY( 1px );
}

.mrc-btn:focus-visible {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

.mrc-btn[disabled] {
	opacity: .6;
	cursor: progress;
}

.mrc-btn--ghost {
	background: transparent;
	color: var( --mrc-ink, #fff );
	box-shadow: inset 0 0 0 1px var( --mrc-line, rgba( 255, 255, 255, .25 ) );
}

.mrc-btn--lg {
	width: 100%;
	padding: .95rem 1.4rem;
	font-size: 1.02rem;
}

.mrc-btn--sm {
	padding: .45rem 1rem;
	font-size: .86rem;
	margin-top: .35rem;
}

/* ------------------------------------------------------ noche destacada */

/* La próxima noche, en grande: flyer a un lado, ficha al otro. Es la pieza
   que cambia sola cada semana. */
.mrc-feat {
	display: grid;
	grid-template-columns: minmax( 0, 5fr ) minmax( 0, 7fr );
	gap: clamp( 1.25rem, 3vw, 2.5rem );
	align-items: center;
	margin: 0 0 clamp( 1.5rem, 4vw, 2.75rem );
	padding: clamp( 1rem, 2.5vw, 1.75rem );
	background: var( --mrc-surface, #16121f );
	border-radius: var( --mrc-radius-lg, 24px );
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	box-sizing: border-box;
}

.mrc-feat * {
	box-sizing: border-box;
}

.mrc-feat__art {
	aspect-ratio: 4 / 5;
	border-radius: var( --mrc-radius-md, 16px );
	overflow: hidden;
	background: var( --mrc-surface-2, #0e0b16 );
	box-shadow: 0 10px 26px rgba( 0, 0, 0, .25 );
}

.mrc-feat__art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mrc-feat__body {
	display: flex;
	flex-direction: column;
	gap: .55rem;
	min-width: 0;
}

.mrc-feat__when {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: .86rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-feat__badge {
	display: inline-flex;
	align-items: center;
	padding: .3rem .7rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	font-size: .74rem;
	letter-spacing: .2em;
}

.mrc-feat.is-tonight .mrc-feat__badge {
	animation: mrc-pulse 1.6s ease-in-out infinite;
}

@keyframes mrc-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba( 255, 212, 0, .55 ); }
	60%      { box-shadow: 0 0 0 10px rgba( 255, 212, 0, 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.mrc-feat.is-tonight .mrc-feat__badge {
		animation: none;
	}
}

.mrc-feat__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: clamp( 2.4rem, 6vw, 4.4rem );
	line-height: .95;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
	overflow-wrap: anywhere;
}

.mrc-feat__djs {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --mrc-ink, #fff );
}

.mrc-feat__blurb {
	margin: 0;
	font-size: 1rem;
	line-height: 1.55;
	color: var( --mrc-muted, #a9a3b8 );
	max-width: 52ch;
}

.mrc-feat .mrc-night__meta {
	margin-top: .2rem;
	padding-top: 0;
}

.mrc-feat__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .4rem;
}

.mrc-feat__actions .mrc-btn {
	margin-top: 0;
}

/* Sin flyer: la bola de discoteca del tema, calada sobre la superficie. */
.mrc-night__noart {
	display: block;
	width: 100%;
	height: 100%;
	background:
		var( --mrc-noart, none ) center / 46% no-repeat,
		linear-gradient( 160deg, var( --mrc-surface-2, #0e0b16 ), var( --mrc-surface, #16121f ) );
}

/* ---------------------------------------------------------- carrusel */

.mrc-carousel {
	position: relative;
}

.mrc-carousel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .8rem;
}

.mrc-carousel__title {
	margin: 0;
	font-size: .84rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-carousel__nav {
	display: flex;
	gap: .4rem;
}

.mrc-carousel.is-static .mrc-carousel__nav,
.mrc-carousel.is-static .mrc-carousel__dots {
	display: none;
}

.mrc-carousel__btn {
	appearance: none;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var( --mrc-surface, #16121f );
	color: var( --mrc-ink, #fff );
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	transition: transform 120ms ease, opacity 120ms ease;
}

.mrc-carousel__btn svg {
	width: 22px;
	height: 22px;
}

.mrc-carousel__btn:hover {
	transform: translateY( -1px );
}

.mrc-carousel__btn:focus-visible {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

.mrc-carousel__btn[disabled] {
	opacity: .35;
	cursor: default;
	transform: none;
}

/* La pista: las tarjetas de siempre, en fila, con parada en cada una. La
   rejilla de .mrc-nights se anula aquí a propósito. */
.mrc-nights.mrc-carousel__track {
	display: flex;
	grid-template-columns: none;
	gap: clamp( .9rem, 1.6vw, 1.25rem );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding: .35rem .25rem 1rem;
	margin: 0 -.25rem;
	-webkit-overflow-scrolling: touch;
}

.mrc-nights.mrc-carousel__track::-webkit-scrollbar {
	display: none;
}

.mrc-nights.mrc-carousel__track:focus-visible {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
	border-radius: var( --mrc-radius-lg, 24px );
}

.mrc-carousel__track > .mrc-night {
	flex: 0 0 clamp( 14rem, 22vw, 17rem );
	scroll-snap-align: start;
}

@media ( prefers-reduced-motion: reduce ) {
	.mrc-nights.mrc-carousel__track {
		scroll-behavior: auto;
	}
}

.mrc-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-top: -.4rem;
}

/* Zona de toque de 44 px; el círculo de 10 px va dentro. */
.mrc-carousel__dot {
	appearance: none;
	border: 0;
	padding: 0;
	width: 44px;
	height: 44px;
	margin: 0 -8px;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mrc-carousel__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --mrc-line, rgba( 255, 255, 255, .25 ) );
	transition: transform 120ms ease, background 120ms ease;
}

.mrc-carousel__dot.is-current::before {
	background: var( --mrc-accent, #FFD400 );
	transform: scale( 1.3 );
}

/* La oferta de una noche en la tarjeta y la nota en el formulario de vale. */
.mrc-night__offer {
	margin: 0;
}

.mrc-voucher-night {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .8rem;
	margin: .2rem 0 .8rem;
	padding: .6rem .9rem;
	border-radius: var( --mrc-radius-md, 16px );
	background: var( --mrc-surface-2, #0e0b16 );
	color: var( --mrc-ink, #fff );
	font-size: .9rem;
	font-weight: 700;
}

.mrc-voucher-night .mrc-link {
	font-weight: 400;
}

.mrc-voucher__night {
	margin: .3rem 0 0;
	font-size: .82rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

/* El aviso de datos, sin casilla: una línea pequeña junto al botón. */
.mrc-notice {
	margin: .2rem 0 .9rem;
	font-size: .8rem;
	line-height: 1.5;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-notice a {
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

/* La valoración de Google, junto al nombre del local. */
.mrc-venue__rating {
	margin: .2rem 0 .8rem;
	font-size: .9rem;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-venue__rating strong {
	color: var( --mrc-ink, #fff );
}

.mrc-venue__stars {
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

/* Las ofertas a elegir: tarjetas-radio, la elegida con el borde amarillo. */
.mrc-offers {
	margin: 0 0 1.1rem;
	padding: 0;
	border: 0;
	display: grid;
	gap: .6rem;
}

.mrc-offers legend {
	margin-bottom: .5rem;
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-offer {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	padding: .85rem 1rem;
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
	border-radius: var( --mrc-radius-md, 16px );
	background: var( --mrc-surface-2, #0E0B16 );
	cursor: pointer;
}

.mrc-offer input {
	margin-top: .3rem;
	accent-color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	width: 18px;
	height: 18px;
	flex: none;
}

.mrc-offer:has( input:checked ) {
	border-color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	box-shadow: inset 0 0 0 1px var( --mrc-accent, #FFD400 );
}

.mrc-offer:has( input:focus-visible ) {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

.mrc-offer__body {
	display: block;
}

.mrc-offer__title {
	display: block;
	font-weight: 700;
	color: var( --mrc-ink, #fff );
}

.mrc-offer__line {
	display: block;
	margin-top: .15rem;
	font-size: .9rem;
	color: var( --mrc-muted, #a9a3b8 );
}

/* ------------------------------------------------------------- vale de copa
   La tarjeta de papel (90×50, borde de puntos, la oferta arriba, el código
   enorme, «show this at the bar») en pantalla. La bebida va calada en el
   fondo con la misma máscara que las marcas de agua: regla del dueño, toda
   pieza lleva copa. */

.mrc-voucher {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin: 0;
	padding: 1.5rem 1.4rem 1.3rem;
	text-align: center;
	background: var( --mrc-surface, #16121f );
	border: 2px dashed var( --mrc-accent, #FFD400 );
	border-radius: var( --mrc-radius-lg, 24px );
	color: var( --mrc-ink, #fff );
}

.mrc-voucher__drink {
	position: absolute;
	z-index: -1;
	right: -30px;
	bottom: -30px;
	width: 180px;
	height: 180px;
	opacity: .1;
	background-color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	/* La silueta la da el tema (`--mrc-wm-drink`): el plugin no conoce sus rutas. */
	mask: var( --mrc-wm-drink, none ) center / contain no-repeat;
	-webkit-mask: var( --mrc-wm-drink, none ) center / contain no-repeat;
	pointer-events: none;
}

.mrc-voucher__kicker {
	margin: 0;
	font-size: .72rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-voucher__title {
	margin: .4rem 0 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: clamp( 1.7rem, 5vw, 2.3rem );
	line-height: 1;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
}

.mrc-voucher__line {
	margin: .5rem 0 0;
	color: var( --mrc-muted, #a9a3b8 );
	font-size: .98rem;
}

/* El código: lo lee la persona en voz alta o lo enseña; a 6 letras espaciadas
   se lee desde el otro lado de la barra. */
.mrc-voucher__code {
	margin: 1rem 0 .2rem;
	font-family: var( --mrc-font-display, inherit );
	font-size: clamp( 2.6rem, 11vw, 4rem );
	line-height: 1;
	letter-spacing: .22em;
	padding-left: .22em; /* compensa el espaciado de la última letra */
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-variant-numeric: tabular-nums;
}

.mrc-voucher.is-redeemed .mrc-voucher__code,
.mrc-voucher.is-void .mrc-voucher__code,
.mrc-voucher.is-expired .mrc-voucher__code {
	color: var( --mrc-muted, #a9a3b8 );
	text-decoration: line-through;
	text-decoration-thickness: .08em;
}

.mrc-voucher.is-redeemed,
.mrc-voucher.is-void,
.mrc-voucher.is-expired {
	border-style: solid;
	border-color: var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-voucher__status {
	margin: 0;
	font-size: .85rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-voucher__how {
	margin: 1rem 0 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --mrc-ink, #fff );
}

.mrc-voucher__terms {
	margin: .5rem 0 0;
	font-size: .8rem;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-status--voucher {
	max-width: 30rem;
}

.mrc-voucher-done .mrc-form__fine {
	margin-bottom: .8rem;
	text-align: center;
}

/* La plaza en espera de un «sí»: se ve antes que el botón de cancelar. */
.mrc-status__offer {
	margin: 1rem 0 .6rem;
	padding: .8rem 1rem;
	border-radius: var( --mrc-radius-md, 16px );
	background: rgba( 255, 212, 0, .12 );
	border: 1px solid rgba( 255, 212, 0, .35 );
	color: var( --mrc-ink, #fff );
	font-size: 1rem;
}

.mrc-status__offer strong {
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-status [data-mrc-claim] {
	margin: 0 0 1rem;
}

.mrc-link {
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-weight: 600;
	text-underline-offset: .2em;
	/* Objetivo de toque de la casa (44 px) a cualquier ancho, no sólo en
	   móvil: en escritorio medía 30 y también se pulsa con el dedo en una
	   tableta. El margen negativo evita que la línea crezca. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-block: -.45rem;
}

/* --------------------------------------------------------------- locales */

.mrc-venues {
	display: grid;
	gap: clamp( 1rem, 3vw, 2rem );
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 20rem ), 1fr ) );
}

.mrc-venue {
	padding: 1.6rem 1.7rem 1.8rem;
	background: var( --mrc-surface, #16121f );
	border: 0;
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	border-radius: var( --mrc-radius-lg, 24px );
	overflow: hidden;
}

/* La foto del local, a sangre por arriba: sale de los directorios y no es
   grande (≈480 px), así que se recorta a 3:2 y no se estira más de 260 px. */
.mrc-venue__art {
	margin: -1.6rem -1.7rem 1.3rem;
	/* Alto fijo, no `aspect-ratio` + `max-height`: esa pareja deriva el ANCHO
	   del alto y la foto salía a 390 px en una tarjeta de 584. */
	height: clamp( 180px, 22vw, 260px );
	overflow: hidden;
	background: #0E0B16;
}

.mrc-venue__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mrc-venue__links {
	margin: 1rem 0 0;
	display: flex;
	flex-wrap: wrap;
	/* Los enlaces miden 44 px con margen negativo de -.45rem arriba y abajo:
	   al partir en dos filas (320 px) las zonas de toque se pisaban 11 px.
	   El hueco de fila compensa ese margen. */
	gap: 1rem 1.4rem;
}

.mrc-venue__name {
	margin: 0 0 .3rem;
	font-family: var( --mrc-font-display, inherit );
	font-size: 1.6rem;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
}

.mrc-venue__note {
	margin: 0 0 1rem;
	font-family: var( --mrc-font-script, inherit );
	font-size: 1.25rem;
	color: var( --mrc-accent-2, #FF99FF );
}

.mrc-venue__address {
	margin: 0 0 1rem;
	color: var( --mrc-ink, #fff );
	line-height: 1.5;
}

/* Un dato que falta se ve como que falta. No se disfraza de dato. */
.mrc-venue__address.is-pending,
.mrc-venue__hours.is-pending {
	color: var( --mrc-muted, #a9a3b8 );
	font-style: italic;
}

.mrc-venue__hours {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .2rem 1.2rem;
	margin: 0 0 1.1rem;
	font-size: .92rem;
}

.mrc-venue__hours dt {
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-venue__hours dd {
	margin: 0;
	color: var( --mrc-ink, #fff );
	font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------- formularios */

.mrc-form {
	display: flex;
	flex-direction: column;
	gap: .95rem;
}

.mrc-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	flex: 1;
	min-width: 0;
}

.mrc-field-row {
	display: flex;
	flex-wrap: wrap;
	gap: .95rem;
}

.mrc-field label,
.mrc-consent {
	font-size: .86rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var( --mrc-ink, #fff );
}

.mrc-field label span {
	font-weight: 400;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-field small {
	font-size: .78rem;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-field input,
.mrc-field select,
.mrc-field textarea {
	width: 100%;
	/* 16px exactos: por debajo, iOS hace zoom al enfocar y descoloca la página. */
	font-size: 16px;
	font-family: inherit;
	padding: .7rem .85rem;
	border-radius: var( --mrc-radius-sm, 12px );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .18 ) );
	background: var( --mrc-surface-2, #0e0b16 );
	color: var( --mrc-ink, #fff );
}

.mrc-field textarea {
	resize: vertical;
}

.mrc-field input:focus-visible,
.mrc-field select:focus-visible,
.mrc-field textarea:focus-visible {
	outline: 2px solid var( --mrc-accent, #FFD400 );
	outline-offset: 1px;
}

/* «Spots» es un 1–6: no necesita la mitad de la fila. */
.mrc-field--narrow {
	flex: 0 1 7.5rem;
}

.mrc-consent {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	/* La etiqueta ENTERA es el objetivo (el input va dentro), y medía 40 px.
	   Con este relleno pasa de 44, que es el mínimo de la casa. */
	padding-block: .3rem;
	font-weight: 400;
	font-size: .84rem;
	line-height: 1.5;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-consent input {
	margin-top: .15rem;
	width: 20px;
	height: 20px;
	flex: none;
	accent-color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-consent a {
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-form__fine {
	margin: 0;
	font-size: .8rem;
	color: var( --mrc-muted, #a9a3b8 );
	text-align: center;
}

.mrc-form__error {
	margin: 0;
	padding: .7rem .9rem;
	border-radius: var( --mrc-radius-sm, 12px );
	background: rgba( 220, 38, 38, .14 );
	border: 1px solid rgba( 248, 113, 113, .55 );
	color: #FFC9C9;
	font-size: .88rem;
}

/* Honeypot: se saca de la vista SIN `display:none` ni `hidden`, que es lo
   primero que un bot decente comprueba antes de rellenar. */
.mrc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------------------------------------------------------------- diálogo */

/* Mismas medidas que el modal de la casa (`.qw-modal__dialog` del ERP y
   `.qw-consent-card` del CMP): ancho `min(<tope>, 96vw)` y alto `88vh` con
   `88dvh` justo detrás. Las DOS líneas de altura son a propósito: `vh` es el
   respaldo para quien no entiende `dvh`, y `dvh` la pisa donde sí — en iOS la
   barra del navegador se recoge y `vh` se queda largo. */
.mrc-dialog {
	width: min( 30rem, 96vw );
	/* La hoja del navegador le pone a `<dialog>` un
	   `max-width: calc(100% - 6px - 2em)` propio, que gana al `width` y dejaba
	   la tarjeta en 341 px donde pedíamos 360. Hay que declararlo. */
	max-width: min( 30rem, 96vw );
	max-height: 88vh;
	max-height: 88dvh;

	/* Columna con cabecera y pie fijos: el scroll vive SOLO en el cuerpo. */
	display: flex;
	flex-direction: column;
	overflow: hidden;

	padding: 0;
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .14 ) );
	border-radius: var( --mrc-radius-lg, 24px );
	background: var( --mrc-surface, #16121f );
	color: var( --mrc-ink, #fff );
	box-shadow: 0 24px 60px rgba( 0, 0, 0, .55 );
}

/* Un `<dialog>` cerrado sigue siendo `display:flex` por la regla de arriba, y
   eso lo deja visible. La regla del navegador es `display:none` y pierde. */
.mrc-dialog:not( [open] ) {
	display: none;
}

/* El fondo se vuelve TRANSLÚCIDO, no negro.
   Estaba en `rgba(6,4,10,.72)` y sobre un sitio ya oscuro eso es un telón
   negro: no se intuía que hubiera página detrás. La casa tampoco lo hace así
   — el CMP usa `rgba(0,0,0,.35)` y el ERP `rgba(15,23,42,.55)`. Aquí baja a
   .38 y el trabajo de separar lo hace el DESENFOQUE, que es lo que funciona
   sobre fondo oscuro: la página sigue viéndose, pero fuera de foco. */
.mrc-dialog::backdrop {
	background: rgba( 8, 5, 14, .38 );
	/* Con prefijo, que Safari lo necesita. Aquí no hay riesgo de atrapar
	   ningún `position:fixed` porque `::backdrop` no contiene nada. */
	backdrop-filter: blur( 12px ) saturate( .85 );
	-webkit-backdrop-filter: blur( 12px ) saturate( .85 );
}

/* Sin `backdrop-filter` no hay desenfoque que separe, así que el telón tiene
   que oscurecer por sí solo o el modal flota sobre un fondo legible. */
@supports not ( ( backdrop-filter: blur( 1px ) ) or ( -webkit-backdrop-filter: blur( 1px ) ) ) {
	.mrc-dialog::backdrop {
		background: rgba( 8, 5, 14, .74 );
	}
}

/* ------------------------------------------- la página no se mueve detrás */

/*
 * El bloqueo real lo hace el JS fijando el `body` (es lo único que respeta
 * iOS). Esto es la defensa en profundidad, igual que `html.qw-wiz-open` en
 * el wizard de la casa.
 */
html.mrc-modal-open,
body.mrc-modal-open {
	overflow: hidden;
	overscroll-behavior: contain;
	touch-action: none;
}

/* ⚠️ …pero el diálogo SÍ tiene que poder desplazarse con el dedo.
   `touch-action` se resuelve subiendo por la cadena de ancestros, y el
   `<dialog>` cuelga del `body` aunque se pinte en la capa superior: sin
   devolvérselo, el `touch-action:none` de arriba deja el cuerpo del modal
   inmóvil en un móvil — que es justo la pantalla que se quería arreglar. */
body.mrc-modal-open .mrc-dialog,
body.mrc-modal-open .mrc-dialog__body,
body.mrc-modal-open .mrc-done {
	touch-action: auto;
}

/* -------------------------------------------------------------- cabecera */

.mrc-dialog__head {
	flex: none;
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: 1.4rem 1.4rem 1rem;
	border-bottom: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-dialog__heading {
	flex: 1;
	min-width: 0;
}

.mrc-dialog__close-form {
	margin: 0;
	flex: none;
}

.mrc-dialog__close {
	appearance: none;
	border: 0;
	background: transparent;
	color: var( --mrc-muted, #a9a3b8 );
	font-size: 1.9rem;
	line-height: 1;
	width: 44px;
	height: 44px;
	margin: -.55rem -.5rem 0 0;
	cursor: pointer;
	border-radius: 50%;
}

.mrc-dialog__close:hover {
	color: var( --mrc-ink, #fff );
}

.mrc-dialog__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: 1.55rem;
	text-transform: uppercase;
	line-height: 1.05;
}

.mrc-dialog__sub {
	margin: .3rem 0 0;
	font-size: .86rem;
	line-height: 1.35;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-weight: 600;
}

/* ------------------------------------------------------- cuerpo y pie */

.mrc-dialog__form {
	/* `min-height:0` es obligatorio: sin él un hijo flexible no encoge por
	   debajo de su contenido y el cuerpo nunca llega a hacer scroll — el
	   diálogo crece y se sale de la pantalla, que es justo lo que se quería
	   evitar. */
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.mrc-dialog__body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.2rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .95rem;
}

.mrc-dialog__foot {
	flex: none;
	padding: 1rem 1.4rem 1.2rem;
	border-top: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
	background: var( --mrc-surface, #16121f );
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

/* --------------------------------------------------------------- resultado */

.mrc-done {
	text-align: center;
	/* El diálogo ya no lleva relleno propio (lo ponen cabecera, cuerpo y pie),
	   así que la pantalla de éxito pone el suyo. */
	padding: 2rem 1.4rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Dentro del pie manda el `gap`; el margen suelto del botón se sumaría. */
.mrc-dialog__foot .mrc-btn,
.mrc-done .mrc-btn {
	margin-top: 0;
}

.mrc-done__icon {
	margin: 0;
	width: 58px;
	height: 58px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	font-size: 1.8rem;
	font-weight: 700;
}

.mrc-done h3 {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	font-size: 1.4rem;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
}

.mrc-done p {
	margin: 0;
	color: var( --mrc-muted, #a9a3b8 );
	max-width: 32ch;
	line-height: 1.5;
}

.mrc-done--event {
	background: var( --mrc-surface, #16121f );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
	border-radius: var( --mrc-radius-lg, 24px );
	padding: 2.2rem 1.5rem;
}

/* ------------------------------------------------------- estado / cancelar */

.mrc-status {
	max-width: 30rem;
	margin: 0 auto;
	padding: 1.8rem;
	text-align: center;
	background: var( --mrc-surface, #16121f );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
	border-radius: var( --mrc-radius-lg, 24px );
}

.mrc-status h2 {
	margin: 0 0 .8rem;
	font-family: var( --mrc-font-display, inherit );
	text-transform: uppercase;
}

.mrc-status__line {
	margin: 0 0 1rem;
	line-height: 1.6;
	color: var( --mrc-ink, #fff );
}

.mrc-status__badge {
	/* En bloque y centrada: siendo `inline-block` se quedaba en la misma línea
	   que el botón de cancelar, y la etiqueta de estado parecía parte del
	   botón. */
	display: block;
	width: fit-content;
	margin: 0 auto 1.2rem;
	padding: .35rem .9rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	font-size: .76rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 700;
	background: var( --mrc-surface-2, #0e0b16 );
	color: var( --mrc-muted, #a9a3b8 );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .14 ) );
}

.mrc-status__badge.is-confirmed {
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	border-color: transparent;
}

.mrc-empty {
	color: var( --mrc-muted, #a9a3b8 );
	font-style: italic;
}

@media ( max-width: 768px ) {
	.mrc-feat {
		grid-template-columns: 1fr;
	}
	.mrc-feat__art {
		max-width: 360px;
		margin: 0 auto;
		width: 100%;
	}
	.mrc-carousel__track > .mrc-night {
		flex-basis: min( 78vw, 17rem );
	}
}

@media ( max-width: 480px ) {
	.mrc-feat__actions .mrc-btn {
		width: 100%;
	}
}

/* ==========================================================================
   RESPONSIVE

   Misma escalera que quewood-core y qwood-core, que usan las mismas cuatro
   paradas una y otra vez: 900 (ancho) · 768 (tabla/móvil) · 640 (teléfono) ·
   480 (teléfono pequeño). Antes había un 860 suelto aquí que no existía en
   ninguno de los dos.
   ========================================================================== */

/* Filas de dos campos: en un teléfono no caben dos a la vez.
   Medido en un iPhone SE (375): quedaban en 143 px cada uno y los desplegables
   cortaban «La Mezcalería» y «Company party». Es el mismo corte que hace
   `.qw-enc-form__grid` del ERP. */
@media ( max-width: 560px ) {
	.mrc-field-row {
		flex-direction: column;
		gap: .95rem;
	}

	.mrc-field--narrow {
		max-width: none;
	}
}

/* Teléfono: el modal se acerca al borde y baja el radio, como hace
   `.qw-modal` de la casa por debajo de 640. */
@media ( max-width: 640px ) {
	.mrc-dialog {
		width: min( 30rem, 96vw );
		max-width: min( 30rem, 96vw );
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: var( --mrc-radius-md, 16px );
	}

	.mrc-dialog__head {
		padding: 1.1rem 1.1rem .85rem;
	}

	.mrc-dialog__body {
		padding: 1rem 1.1rem;
	}

	.mrc-dialog__foot {
		padding: .85rem 1.1rem 1.05rem;
	}

	.mrc-dialog__title {
		font-size: 1.35rem;
	}

}

/* Pantalla BAJA (móvil apaisado, 667×375): con cabecera y pie fijos el
   cuerpo del formulario se quedaba en 49 px de alto (medido) — un campo y
   medio a la vista y todo lo demás a base de arrastrar dentro de una rendija.
   Aquí el diálogo entero hace scroll y cabecera y pie viajan con él. */
@media ( max-height: 520px ) {
	.mrc-dialog[open] {
		display: block;
		overflow-y: auto;
		overscroll-behavior: contain;
		max-height: 94vh;
		max-height: 94dvh;
	}

	.mrc-dialog__head {
		padding: .8rem 1.1rem .6rem;
	}

	.mrc-dialog__body {
		flex: none;
		overflow: visible;
		padding: .8rem 1.1rem;
	}

	.mrc-dialog__foot {
		padding: .7rem 1.1rem .9rem;
	}

	.mrc-dialog__title {
		font-size: 1.2rem;
	}
}

/* Teléfono pequeño (iPhone SE de 1.ª, 320 px): sólo lo imprescindible. */
@media ( max-width: 480px ) {
	.mrc-night__body,
	.mrc-class,
	.mrc-venue {
		padding-left: 1.1rem;
		padding-right: 1.1rem;
	}

	.mrc-done {
		padding: 1.5rem 1.1rem 1.2rem;
	}
}

/* ==========================================================================
   CUENTA DEL CLIENTE (/account/)

   Misma piel que el resto de la web: tarjetas `--mrc-surface`, filete
   `--mrc-line`, acento amarillo. Reutiliza `.mrc-status__badge` para los
   estados y `.mrc-voucher` para los vales; aquí sólo va la maqueta.
   ========================================================================== */

.mrc-account-login {
	text-align: left;
}

.mrc-account-login h2 {
	text-align: center;
}

.mrc-account-login__lead {
	margin: 0 0 1.2rem;
	text-align: center;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-account-form {
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.mrc-account-form .mrc-notice,
.mrc-account-form .mrc-form__fine {
	margin: 0;
}

.mrc-account-remember {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 44px;
	cursor: pointer;
}

.mrc-account-remember input {
	width: 22px;
	height: 22px;
	accent-color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	margin: 0;
}

.mrc-account-sent {
	text-align: center;
}

.mrc-account-alt {
	margin-top: 1.4rem;
	padding-top: 1rem;
	border-top: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-account-alt summary {
	cursor: pointer;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-weight: 600;
}

.mrc-account-alt[open] summary {
	margin-bottom: .8rem;
}

.mrc-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	text-decoration: underline;
	cursor: pointer;
	min-height: 44px;
}

.mrc-account {
	max-width: 40rem;
	margin: 0 auto;
	display: grid;
	gap: 1.4rem;
}

.mrc-account * {
	box-sizing: border-box;
}

.mrc-account__head {
	text-align: center;
}

.mrc-account__kicker {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-account__title {
	margin: .2rem 0 0;
	font-family: var( --mrc-font-display, inherit );
	text-transform: uppercase;
	font-size: clamp( 2rem, 6vw, 3rem );
	line-height: 1;
}

.mrc-account__email {
	margin: .4rem 0 0;
	color: var( --mrc-muted, #a9a3b8 );
	word-break: break-all;
}

.mrc-account__section {
	padding: 1.4rem;
	background: var( --mrc-surface, #16121f );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
	border-radius: var( --mrc-radius-lg, 24px );
}

.mrc-account__section > h3 {
	margin: 0 0 1rem;
	font-family: var( --mrc-font-display, inherit );
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 1.3rem;
}

.mrc-account__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .8rem;
}

.mrc-account__booking {
	display: grid;
	gap: .6rem;
	padding: 1rem;
	border-radius: var( --mrc-radius-sm, 12px );
	background: var( --mrc-surface-2, #0e0b16 );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-account__booking-main {
	display: grid;
	gap: .2rem;
}

.mrc-account__booking-main span {
	color: var( --mrc-muted, #a9a3b8 );
	font-size: .92rem;
}

.mrc-account__chip {
	margin: 0;
}

.mrc-account__booking .mrc-status__offer {
	margin: 0;
}

.mrc-account__booking .mrc-btn {
	justify-self: start;
}

.mrc-account__list--past .mrc-account__booking {
	opacity: .78;
}

.mrc-account__vouchers {
	display: grid;
	gap: 1rem;
}

.mrc-account__section .mrc-account-form + .mrc-account-form {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-account__actions {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.4rem;
}

.mrc-account__delete {
	color: var( --mrc-muted, #a9a3b8 );
}

@media ( max-width: 560px ) {
	.mrc-account__section {
		padding: 1.1rem;
	}
}

/* Pasada de fricción (21/09): dirección enviada + editar, «book another», vales de un toque. */
.mrc-account-sent__email {
	margin: 0 0 .6rem;
	word-break: break-all;
}

.mrc-account-sent__email .mrc-link {
	display: inline;
	min-height: 0;
	margin-left: .4rem;
	font-size: .9em;
}

.mrc-account__more {
	margin: 1rem 0 0;
}

.mrc-account__offers {
	margin-top: 1rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
}

.mrc-account__offers .mrc-form__fine {
	flex-basis: 100%;
	margin: 0;
}

/* ==========================================================================
   LA CARTA (/menu/) — [maracas_menu]

   Cuatro secciones, cada una con sus grupos plegables. Línea de carta
   clásica: nombre a la izquierda, puntos, precio a la derecha, nota en
   pequeño debajo. Todo con la piel de la web.
   ========================================================================== */

.mrc-menu {
	max-width: 44rem;
	margin: 0 auto;
	display: grid;
	gap: 1.6rem;
}

.mrc-menu * {
	box-sizing: border-box;
}

.mrc-menu__hh {
	margin: 0;
	padding: .9rem 1.2rem;
	border-radius: var( --mrc-radius-md, 16px );
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
	font-size: 1rem;
}

.mrc-menu__jump {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.mrc-menu__jump a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 1rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .18 ) );
	color: var( --mrc-ink, #fff );
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.mrc-menu__jump a:hover,
.mrc-menu__jump a:focus-visible {
	border-color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-menu__section {
	scroll-margin-top: 90px;
}

.mrc-menu__title {
	margin: 0 0 .6rem;
	font-family: var( --mrc-font-display, inherit );
	text-transform: uppercase;
	font-size: clamp( 1.8rem, 5vw, 2.6rem );
	line-height: 1;
}

.mrc-menu__group {
	border-top: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-menu__group:last-child {
	border-bottom: 1px solid var( --mrc-line, rgba( 255, 255, 255, .1 ) );
}

.mrc-menu__group summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 52px;
	padding: .4rem 0;
	font-weight: 600;
	font-size: 1.05rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --mrc-ink, #fff );
}

.mrc-menu__group summary::-webkit-details-marker {
	display: none;
}

.mrc-menu__group summary::after {
	content: "";
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var( --mrc-accent, #FFD400 );
	border-bottom: 2px solid var( --mrc-accent, #FFD400 );
	transform: rotate( 45deg );
	transition: transform 160ms ease;
	flex: none;
}

.mrc-menu__group[open] summary::after {
	transform: rotate( -135deg );
}

.mrc-menu__group summary:focus-visible {
	outline: 2px solid var( --mrc-accent, #FFD400 );
	outline-offset: 2px;
}

.mrc-menu__count {
	font-size: .78rem;
	font-weight: 400;
	color: var( --mrc-muted, #a9a3b8 );
	letter-spacing: 0;
}

.mrc-menu__list {
	list-style: none;
	margin: 0;
	padding: 0 0 1rem;
	display: grid;
	gap: .55rem;
}

.mrc-menu__item {
	display: flex;
	align-items: baseline;
	gap: .5rem;
}

/* El icono del cóctel en su línea (sólo los que tienen el suyo). */
.mrc-menu__item > .mrc-menu__icon {
	width: 22px;
	height: 22px;
	flex: none;
	align-self: flex-start;
	margin-top: .05em;
}

.mrc-menu__name {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
}

.mrc-menu__size {
	font-size: .78rem;
	color: var( --mrc-muted, #a9a3b8 );
	letter-spacing: .04em;
}

.mrc-menu__note {
	font-size: .82rem;
	color: var( --mrc-muted, #a9a3b8 );
	line-height: 1.35;
}

.mrc-menu__dots {
	flex: 1;
	min-width: 1.2rem;
	border-bottom: 1px dotted var( --mrc-line, rgba( 255, 255, 255, .25 ) );
	transform: translateY( -.35em );
}

.mrc-menu__price {
	white-space: nowrap;
	font-weight: 700;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-variant-numeric: tabular-nums;
}

.mrc-menu__fine {
	margin: 0;
	font-size: .82rem;
	color: var( --mrc-muted, #a9a3b8 );
}

/* ---------------------------------------------- carta: herramientas y QR */

.mrc-menu__tools {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.mrc-menu__tools .mrc-btn {
	margin-top: 0;
}

/* El QR: el SVG escala al ancho del contenedor. Sobre blanco SIEMPRE: un
   QR claro sobre oscuro no lo leen todos los móviles. */
.mrc-qr {
	display: block;
	width: min( 62vw, 260px );
	aspect-ratio: 1;
	padding: 12px;
	background: #fff;
	border-radius: 12px;
	color: #000;
	font-size: .7rem;
	word-break: break-all;
}

.mrc-qr svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* La tarjeta de las mesas: A6 en pantalla y en papel. */
.mrc-qrcard-wrap {
	display: grid;
	gap: 1.2rem;
	justify-items: center;
}

.mrc-qrcard__tools {
	margin: 0;
	display: flex;
	gap: .6rem;
}

.mrc-qrcard__tools .mrc-btn {
	margin-top: 0;
}

.mrc-qrcard {
	width: 105mm;
	min-height: 148mm;
	padding: 10mm 9mm;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5mm;
	text-align: center;
	background: var( --mrc-bg, #0B0710 );
	color: var( --mrc-ink, #fff );
	border: 1px solid var( --mrc-line, rgba( 255, 255, 255, .18 ) );
	border-radius: 6mm;
}

.mrc-qrcard__logo {
	width: 48mm;
	height: auto;
	display: block;
}

.mrc-qrcard__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	text-transform: uppercase;
	font-size: 8.5mm;
	line-height: 1;
	letter-spacing: .02em;
}

.mrc-qrcard .mrc-qr {
	width: 58mm;
	padding: 3mm;
	border-radius: 3mm;
}

.mrc-qrcard__sub {
	margin: -3mm 0 0;
	font-size: 3.4mm;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-qrcard__url {
	margin: 0;
	font-size: 3.6mm;
	color: var( --mrc-muted, #a9a3b8 );
	letter-spacing: .04em;
}

.mrc-qrcard__hh {
	margin: 0;
	font-size: 3.6mm;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}

/* La vista de imprimir: todo abierto, a dos columnas desde 640 px. */
.mrc-menu--print {
	max-width: 52rem;
}

.mrc-menu__printhead {
	display: grid;
	gap: 1rem;
	justify-items: start;
}

.mrc-menu__printlogo {
	width: 180px;
	height: auto;
}

.mrc-menu__cols {
	columns: 2 18rem;
	column-gap: 2.4rem;
}

.mrc-menu__block {
	break-inside: avoid;
	margin-bottom: 1.2rem;
}

.mrc-menu__group-title {
	margin: 0 0 .5rem;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
}

.mrc-menu--print .mrc-menu__list {
	padding: 0;
	gap: .4rem;
}

.mrc-menu--print .mrc-menu__section {
	break-inside: avoid-page;
}

.mrc-menu__printfoot {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: .82rem;
	color: var( --mrc-muted, #a9a3b8 );
}

.mrc-menu__printfoot .mrc-qr {
	width: 72px;
	padding: 5px;
	border-radius: 6px;
	flex: none;
}

.mrc-menu__printfoot p {
	margin: 0;
}

/* Papel: tinta oscura sobre blanco (el PDF también sale así), sin botones,
   A4 con márgenes cortos; la tarjeta del QR en A6. */
@media print {
	.mrc-print-hide,
	.mrc-menu__tools,
	.mrc-qrcard__tools {
		display: none !important;
	}

	.mrc-menu--print,
	.mrc-menu--print * {
		color: #111 !important;
		background: transparent !important;
	}

	.mrc-menu--print .mrc-menu__group-title,
	.mrc-menu--print .mrc-menu__price {
		color: #8a0000 !important;
	}

	.mrc-menu--print .mrc-menu__hh {
		background: #FFD400 !important;
		color: #111 !important;
	}

	.mrc-menu--print .mrc-qr {
		background: #fff !important;
	}

	.mrc-menu__title {
		font-size: 20pt;
		margin-top: 6mm;
	}

	.mrc-menu__cols {
		columns: 2;
		column-gap: 8mm;
	}

	.mrc-menu__item {
		font-size: 9.5pt;
	}

	.mrc-menu__note {
		font-size: 7.5pt;
	}

	.mrc-qrcard-wrap {
		display: block;
	}

	.mrc-qrcard {
		border: 0;
		border-radius: 0;
		page-break-after: always;
	}
}

/* ---------------------------------------------- carta en corto (portada)
   La tira de cócteles que se desplaza, con el icono del grupo y el precio.
   Misma fuente que /menu/ y que el PDF: Mrc_Carta::sections(). */

.mrc-strip {
	margin-top: clamp( 1.8rem, 4vw, 2.8rem );
}

.mrc-strip__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	margin: 0 0 .7rem;
}

.mrc-strip__title {
	margin: 0;
	font-family: var( --mrc-font-display, inherit );
	text-transform: uppercase;
	letter-spacing: .02em;
	font-size: clamp( 1.3rem, 2.6vw, 1.8rem );
	line-height: 1;
	color: var( --mrc-ink, #fff );
}

.mrc-strip__hint {
	margin: 0 0 .8rem;
	font-size: .9rem;
	color: var( --mrc-muted, #a9a3b8 );
}

/* Las pestañas: píldoras; la activa en amarillo. Teclado ←/→ (widgets.js). */
.mrc-strip__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.mrc-strip__tab {
	appearance: none;
	border: 0;
	cursor: pointer;
	min-height: 44px;
	padding: .5rem 1rem;
	border-radius: var( --mrc-radius-pill, 9999px );
	background: var( --mrc-surface, #16121f );
	color: var( --mrc-ink, #fff );
	font: inherit;
	font-size: .86rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	transition: background 140ms ease, color 140ms ease;
}

.mrc-strip__tab[aria-selected="true"] {
	background: var( --mrc-accent, #FFD400 );
	color: var( --mrc-accent-ink, #12121a );
}

.mrc-strip__tab:focus-visible {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 2px;
}

.mrc-strip__panel:focus-visible {
	outline: 3px solid var( --mrc-ring, #fff );
	outline-offset: 4px;
	border-radius: var( --mrc-radius-md, 16px );
}

/* Seis líneas en dos columnas; a ≤640, una. Sin scroll lateral. */
.mrc-strip__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: .6rem .8rem;
}

.mrc-strip__item {
	display: flex;
	align-items: center;
	gap: .8rem;
	min-width: 0;
	padding: .7rem .9rem;
	background: var( --mrc-surface, #16121f );
	border: 0;
	box-shadow: var( --mrc-shadow, 0 12px 30px rgba( 0, 0, 0, .35 ) );
	border-radius: var( --mrc-radius-md, 16px );
}

.mrc-strip__icon {
	width: 40px;
	height: 40px;
	flex: none;
}

.mrc-strip__text {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	min-width: 0;
	flex: 1;
}

.mrc-strip__name {
	font-weight: 600;
	line-height: 1.2;
	color: var( --mrc-ink, #fff );
}

.mrc-strip__size {
	font-size: .78rem;
	font-weight: 400;
	color: var( --mrc-muted, #a9a3b8 );
	letter-spacing: .04em;
}

.mrc-strip__note {
	font-size: .78rem;
	line-height: 1.3;
	color: var( --mrc-muted, #a9a3b8 );
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mrc-strip__price {
	flex: none;
	font-family: var( --mrc-font-display, inherit );
	font-size: 1.25rem;
	line-height: 1;
	color: var( --mrc-accent-text, var( --mrc-accent, #FFD400 ) );
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 640px ) {
	.mrc-strip__head {
		flex-direction: column;
		align-items: flex-start;
	}
	.mrc-strip__grid {
		grid-template-columns: 1fr;
	}
}

.mrc-strip__tools {
	margin: .2rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.mrc-strip__tools .mrc-btn {
	margin-top: 0;
}

/* Al final de la carta, el camino de vuelta a lo que se reserva. */
.mrc-menu__tools--back {
	margin-top: 1.4rem;
}