/*
 * Mostrador Salón · diseño
 * Colores con nombre de tinte: espejo (fondo), castaño (texto), berenjena (citas) y dorado (detalles).
 */

@font-face {
	font-family: "Fraunces";
	src: url("../fonts/fraunces.woff2") format("woff2");
	font-weight: 300 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Fraunces Marca";
	src: url("../fonts/fraunces-italica.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Figtree";
	src: url("../fonts/figtree.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}

:root {
	--espejo: #f1f2ee;
	--blanco: #fff;
	--castano: #2b1e18;
	--ceniza: #615751;
	--linea: #dad6ce;
	--berenjena: #4a1f42;
	--berenjena-osc: #36152f;
	--berenjena-suave: #e9dfe7;
	--dorado: #d8b67c;
	--hueco: rgba(216, 182, 124, 0.45);
	--error: #9b2c1f;
	--serif: "Fraunces", "Iowan Old Style", Georgia, serif;
	--marca: "Fraunces Marca", "Fraunces", Georgia, serif;
	--sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ancho: 1240px;
	--margen: clamp(20px, 5vw, 56px);
	--cabecera: 72px;
	--facil: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Base ------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--cabecera) + 24px);
}

body {
	margin: 0;
	background: var(--espejo);
	color: var(--castano);
	font: 400 1.0625rem/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

@media (min-width: 900px) {
	body {
		font-size: 1.125rem;
	}
}

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

a {
	color: inherit;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

p {
	margin: 0 0 1em;
}

h1,
h2,
h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 380;
	font-optical-sizing: auto;
	line-height: 1.04;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

::selection {
	background: var(--dorado);
	color: var(--castano);
}

:focus-visible {
	outline: 3px solid var(--berenjena);
	outline-offset: 3px;
	border-radius: 6px;
}

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

.ms-envoltorio {
	width: min(100% - 2 * var(--margen), var(--ancho));
	margin-inline: auto;
}

.ms-saltar {
	position: absolute;
	left: 12px;
	top: -100px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--castano);
	color: var(--blanco);
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
}

.ms-saltar:focus {
	top: 12px;
}

/* Huecos por rellenar: marcados como con un rotulador. */
.ms-hueco {
	background: linear-gradient(transparent 52%, var(--hueco) 52%);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	padding: 0 0.12em;
}

/* Botones --------------------------------------------------------- */

.ms-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 52px;
	padding: 0 1.6em;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font: 600 1rem/1.1 var(--sans);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.ms-boton--sm {
	min-height: 44px;
	padding: 0 1.25em;
	font-size: 0.9375rem;
}

.ms-boton--cita {
	background: var(--berenjena);
	color: var(--blanco);
}

.ms-boton--cita:hover {
	background: var(--berenjena-osc);
}

.ms-boton--linea {
	border-color: currentColor;
	background: transparent;
	color: var(--castano);
}

.ms-boton--linea:hover {
	background: var(--castano);
	border-color: var(--castano);
	color: var(--espejo);
}

.ms-boton--claro {
	background: var(--espejo);
	color: var(--berenjena);
}

.ms-boton--claro:hover {
	background: var(--blanco);
}

.ms-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Aviso de propuesta ---------------------------------------------- */

.ms-demo {
	background: var(--castano);
	color: #e8e1d9;
	font-size: 0.875rem;
	line-height: 1.45;
}

.ms-demo a {
	color: var(--blanco);
}

.ms-demo p {
	margin: 0;
}

.ms-demo__in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 10px;
}

@media (max-width: 599px) {
	.ms-demo {
		font-size: 0.8125rem;
	}
}

.ms-demo__boton {
	flex: none;
	padding: 7px 14px;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: transparent;
	color: var(--blanco);
	font: 600 0.8125rem/1 var(--sans);
	cursor: pointer;
}

.ms-demo__boton:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ms-demo__boton[aria-expanded="true"] {
	background: var(--blanco);
	color: var(--castano);
}

.ms-demo__info {
	display: grid;
	gap: 8px;
	max-width: 76ch;
	margin-left: max(var(--margen), (100% - var(--ancho)) / 2);
	padding: 4px 0 16px;
}

.ms-demo__info[hidden] {
	display: none;
}

.ms-demo .ms-hueco {
	color: var(--blanco);
	background: linear-gradient(transparent 52%, rgba(216, 182, 124, 0.55) 52%);
}

.ms-demo :focus-visible,
.ms-reserva :focus-visible,
.ms-pie :focus-visible {
	outline-color: var(--dorado);
}

/* Cabecera -------------------------------------------------------- */

.ms-cabecera {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(241, 242, 238, 0.92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.25s;
}

.admin-bar .ms-cabecera {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .ms-cabecera {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .ms-cabecera {
		top: 0;
	}
}

.ms-cabecera.is-pegada {
	border-bottom-color: var(--linea);
}

.ms-cabecera__in {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: var(--cabecera);
}

.ms-marca {
	display: flex;
	flex-direction: column;
	margin-right: auto;
	color: var(--castano);
	text-decoration: none;
	line-height: 1;
}

.ms-marca__tipo {
	font: 500 0.75rem/1 var(--sans);
	letter-spacing: 0.01em;
	color: var(--ceniza);
}

.ms-marca__nombre {
	margin-top: 1px;
	font: italic 400 2.125rem/0.85 var(--marca);
	letter-spacing: -0.01em;
}

.ms-nav {
	display: none;
	gap: 28px;
}

.ms-nav a {
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.ms-nav a:hover {
	text-decoration: underline;
}

@media (min-width: 960px) {
	.ms-nav {
		display: flex;
	}
}

/* Portada --------------------------------------------------------- */

.ms-portada {
	padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 7vw, 96px);
	overflow: hidden;
}

.ms-portada__in {
	display: grid;
	gap: 48px;
}

@media (min-width: 900px) {
	.ms-portada__in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		align-items: center;
		gap: clamp(40px, 5vw, 88px);
	}
}

.ms-portada__titulo {
	font-size: clamp(3.25rem, 1.1rem + 7vw, 7.5rem);
	font-weight: 340;
	line-height: 0.9;
	letter-spacing: -0.035em;
}

.ms-portada__lema {
	max-width: 32ch;
	margin: 28px 0 0;
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
	line-height: 1.5;
}

.ms-portada .ms-acciones {
	margin-top: 32px;
}

.ms-valoracion {
	margin: 28px 0 0;
	font-size: 0.9375rem;
	color: var(--ceniza);
}

.ms-valoracion a {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	text-decoration: none;
}

.ms-valoracion a:hover > span:last-child {
	text-decoration: underline;
}

.ms-valoracion strong {
	color: var(--castano);
	font-weight: 700;
}

.ms-estrellas {
	display: inline-flex;
	gap: 2px;
	color: var(--berenjena);
}

/* Carta de colores ------------------------------------------------- */

.ms-carta {
	position: relative;
	--alto-mechon: clamp(250px, 29vw, 430px);
}

.ms-carta__titulo {
	margin: 0 0 12px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--ceniza);
}

.ms-carta__barra {
	position: relative;
	z-index: 0;
	height: 12px;
	margin: 0 -10px;
	border-radius: 6px;
	background: linear-gradient(180deg, #5a463d 0%, #2b1e18 60%, #1f1511 100%);
	box-shadow: 0 6px 12px -6px rgba(43, 30, 24, 0.55);
}

.ms-carta__lista {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(var(--n, 10), minmax(0, 1fr));
	gap: clamp(4px, 0.8vw, 12px);
	margin: -9px 0 0;
	padding: 0;
	list-style: none;
}

.ms-carta__lista li {
	transform-origin: 50% 6px;
	animation: ms-caida 1.8s var(--facil) both;
	animation-delay: calc(var(--i) * 75ms + 150ms);
}

.ms-mecha {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.5s var(--facil);
}

.ms-mecha:focus-visible {
	outline: none;
}

.ms-mecha__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: center;
	transform-origin: 50% 6px;
}

.ms-mecha__etiqueta {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: end center;
	width: 100%;
	max-width: 58px;
	aspect-ratio: 5 / 6;
	padding-bottom: 9%;
	border-radius: 7px 7px 5px 5px;
	background: linear-gradient(180deg, #fff 0%, #f6f5f1 100%);
	box-shadow: 0 0 0 1px rgba(43, 30, 24, 0.08), 0 10px 18px -12px rgba(43, 30, 24, 0.55);
	font: 650 clamp(0.6875rem, 0.55rem + 0.3vw, 0.875rem)/1 var(--sans);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--castano);
	transition: box-shadow 0.25s;
}

/* El aro por donde pasa la barra. */
.ms-mecha__etiqueta::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 50%;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	border-radius: 50%;
	background: #2b1e18;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(43, 30, 24, 0.18);
}

.ms-mechon {
	width: 72%;
	height: var(--alto-mechon);
	margin-top: -4px;
	overflow: visible;
	filter: drop-shadow(0 14px 12px rgba(43, 30, 24, 0.16));
}

.ms-mechon path {
	vector-effect: non-scaling-stroke;
}

.ms-brillo {
	transform-box: fill-box;
	transition: transform 1.4s var(--facil);
}

.ms-mecha:hover .ms-mecha__cuerpo,
.ms-mecha:focus-visible .ms-mecha__cuerpo {
	animation: ms-balanceo 1.1s ease-out;
}

.ms-mecha:hover .ms-brillo,
.ms-mecha:focus-visible .ms-brillo,
.ms-mecha[aria-pressed="true"] .ms-brillo {
	transform: translateY(150%);
}

.ms-mecha:focus-visible .ms-mecha__etiqueta,
.ms-mecha[aria-pressed="true"] .ms-mecha__etiqueta {
	box-shadow: 0 0 0 2.5px var(--berenjena), 0 12px 20px -12px rgba(43, 30, 24, 0.6);
}

.ms-mecha[aria-pressed="true"] {
	transform: translateY(18px);
}

.ms-carta__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	min-height: 52px;
	margin-top: 22px;
	font-size: 0.9375rem;
	color: var(--ceniza);
}

.ms-carta__pie p {
	margin: 0;
}

.ms-carta__pie strong {
	color: var(--castano);
	font-weight: 650;
}

.ms-carta__cita {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1.5px solid var(--berenjena);
	border-radius: 999px;
	color: var(--berenjena);
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
}

.ms-carta__cita:hover {
	background: var(--berenjena);
	color: var(--blanco);
}

.ms-carta__cita[hidden] {
	display: none;
}

@keyframes ms-caida {
	0% {
		opacity: 0;
		transform: translateY(-28px) rotate(-8deg);
	}
	16% {
		opacity: 1;
		transform: translateY(0) rotate(6deg);
	}
	34% {
		transform: rotate(-4deg);
	}
	52% {
		transform: rotate(2.5deg);
	}
	70% {
		transform: rotate(-1.2deg);
	}
	86% {
		transform: rotate(0.5deg);
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes ms-balanceo {
	0% {
		transform: rotate(0);
	}
	22% {
		transform: rotate(3.5deg);
	}
	48% {
		transform: rotate(-2.2deg);
	}
	72% {
		transform: rotate(1deg);
	}
	100% {
		transform: rotate(0);
	}
}

@media (max-width: 599px) {
	.ms-carta {
		--alto-mechon: clamp(180px, 56vw, 280px);
	}

	.ms-carta__lista {
		--n: 7 !important;
	}

	.ms-carta__lista li.is-extra {
		display: none;
	}
}

/* Datos prácticos -------------------------------------------------- */

.ms-datos {
	border-block: 1px solid var(--linea);
}

.ms-datos__in {
	display: grid;
	margin-block: 0;
}

.ms-dato {
	padding: 20px 0;
}

.ms-dato + .ms-dato {
	border-top: 1px solid var(--linea);
}

.ms-dato dt {
	margin-bottom: 4px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ceniza);
}

.ms-dato dd {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

.ms-estado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ms-estado::before {
	content: "";
	width: 9px;
	height: 9px;
	flex: none;
	border-radius: 50%;
	background: #a8a19b;
}

.ms-estado--abierto::before {
	background: #2f7a4f;
	box-shadow: 0 0 0 4px rgba(47, 122, 79, 0.16);
}

@media (min-width: 760px) {
	.ms-datos__in {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ms-dato {
		padding: 26px 32px;
	}

	.ms-dato:first-child {
		padding-left: 0;
	}

	.ms-dato + .ms-dato {
		border-top: 0;
		border-left: 1px solid var(--linea);
	}
}

/* Secciones -------------------------------------------------------- */

.ms-seccion {
	padding-block: clamp(72px, 10vw, 136px);
}

.ms-seccion h2,
.ms-reserva h2 {
	font-size: clamp(2.375rem, 1.5rem + 3vw, 4rem);
	letter-spacing: -0.025em;
}

/* Servicios -------------------------------------------------------- */

.ms-servicios__in {
	display: grid;
	gap: 40px;
}

.ms-servicios__cabeza p {
	max-width: 30ch;
	margin: 20px 0 0;
	color: var(--ceniza);
}

@media (min-width: 900px) {
	.ms-servicios__in {
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		gap: clamp(48px, 7vw, 128px);
	}

	.ms-servicios__cabeza {
		position: sticky;
		top: calc(var(--cabecera) + 40px);
		align-self: start;
	}
}

.ms-grupo + .ms-grupo {
	margin-top: 48px;
}

.ms-grupo h3 {
	margin-bottom: 8px;
	font-size: 1.75rem;
	font-weight: 400;
}

.ms-menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ms-menu li {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 13px 0;
	font-size: 1.0625rem;
}

.ms-menu__nombre {
	font-weight: 500;
}

.ms-menu__puntos {
	flex: 1;
	min-width: 32px;
	height: 0.25em;
	background-image: radial-gradient(circle, var(--ceniza) 0.9px, transparent 1.3px);
	background-size: 7px 4px;
	background-repeat: repeat-x;
	background-position: left center;
	opacity: 0.55;
}

.ms-menu__precio {
	flex: none;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Cita (banda) ----------------------------------------------------- */

.ms-reserva {
	padding-block: clamp(72px, 10vw, 128px);
	background: var(--berenjena);
	color: #ebe1e9;
	overflow: hidden;
}

.ms-reserva__in {
	display: grid;
	gap: 56px;
	align-items: center;
}

@media (min-width: 900px) {
	.ms-reserva__in {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	}
}

.ms-reserva h2 {
	max-width: 12ch;
	color: var(--blanco);
}

.ms-reserva__texto > p {
	max-width: 40ch;
	margin: 24px 0 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.ms-reserva .ms-acciones {
	margin-top: 32px;
}

.ms-reserva__tel {
	font-size: 0.9375rem;
}

.ms-reserva__tel a {
	color: var(--blanco);
}

.ms-billete {
	justify-self: center;
	width: min(100%, 330px);
	padding: 28px 28px 20px;
	border-radius: 20px;
	background: #fbfaf7;
	color: var(--castano);
	box-shadow: 0 40px 70px -35px rgba(0, 0, 0, 0.7);
	transform: rotate(-4deg);
}

.ms-billete p {
	margin: 0;
}

.ms-billete__t {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ceniza);
}

.ms-billete__dia {
	margin-top: 14px !important;
	font: 400 2.25rem/1 var(--serif);
}

.ms-billete__hora {
	font: 300 5rem/0.95 var(--serif);
	letter-spacing: -0.04em;
}

.ms-billete__servicio {
	margin-top: 10px !important;
	font-weight: 500;
}

.ms-billete__pie {
	position: relative;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin: 26px -28px 0 !important;
	padding: 16px 28px 0;
	border-top: 2px dashed #d9d3cb;
	font-size: 0.8125rem;
	color: var(--ceniza);
}

.ms-billete__pie::before,
.ms-billete__pie::after {
	content: "";
	position: absolute;
	top: -12px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--berenjena);
}

.ms-billete__pie::before {
	left: -11px;
}

.ms-billete__pie::after {
	right: -11px;
}

@media (max-width: 599px) {
	.ms-billete {
		display: none;
	}
}

/* El salón --------------------------------------------------------- */

.ms-salon__in {
	display: grid;
	gap: 56px;
}

@media (min-width: 900px) {
	.ms-salon__in {
		grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
		gap: clamp(48px, 7vw, 120px);
		align-items: start;
	}
}

.ms-salon__historia {
	max-width: 48ch;
	margin: 28px 0 0;
	font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem);
	line-height: 1.55;
}

.ms-utiles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.ms-utiles li {
	padding: 8px 16px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	background: var(--blanco);
	font-size: 0.9375rem;
}

.ms-opiniones {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--linea);
}

.ms-opiniones__nota {
	margin: 0;
	font: 300 clamp(5.5rem, 3rem + 7vw, 9rem)/0.8 var(--serif);
	letter-spacing: -0.05em;
}

.ms-opiniones__texto p {
	margin: 8px 0 6px;
}

.ms-opiniones__texto a {
	font-weight: 600;
}

.ms-foto {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 8px;
	background: #4a3023;
}

@media (max-width: 599px) {
	.ms-foto {
		aspect-ratio: 4 / 3;
	}
}

.ms-foto__pelo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ms-foto__pelo path {
	vector-effect: non-scaling-stroke;
}

.ms-foto figcaption {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
	font-size: 0.9375rem;
	color: var(--castano);
}

.ms-foto figcaption .ms-hueco {
	display: inline;
	padding: 6px 10px;
	border-radius: 6px;
	background: var(--espejo);
	line-height: 2.2;
}

/* Horario y cómo llegar -------------------------------------------- */

.ms-visita {
	padding-top: 0;
}

.ms-visita__in {
	display: grid;
	gap: 64px;
	padding-top: clamp(64px, 8vw, 112px);
	border-top: 1px solid var(--linea);
}

@media (min-width: 900px) {
	.ms-visita__in {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(48px, 7vw, 120px);
	}
}

.ms-horario {
	width: 100%;
	margin-top: 28px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

.ms-horario th,
.ms-horario td {
	padding: 13px 0;
	border-bottom: 1px solid var(--linea);
	font-weight: 400;
	text-align: left;
	vertical-align: baseline;
}

.ms-horario th {
	white-space: nowrap;
}

.ms-horario td {
	padding-left: 16px;
	text-align: right;
}

@media (max-width: 599px) {
	.ms-tramo {
		display: block;
	}

	.ms-tramo__y {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}
}

.ms-horario .is-cerrado td {
	color: var(--ceniza);
}

.ms-horario .is-hoy th,
.ms-horario .is-hoy td {
	font-weight: 650;
}

.ms-horario .is-hoy th::after {
	content: "Hoy";
	display: inline-block;
	margin-left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--berenjena);
	color: var(--blanco);
	font-size: 0.75rem;
	font-weight: 600;
	vertical-align: 2px;
}

.ms-direccion {
	margin: 28px 0 32px;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	font-style: normal;
	line-height: 1.45;
}

/* Páginas de texto -------------------------------------------------- */

.ms-texto {
	padding-block: clamp(48px, 8vw, 104px);
}

.ms-texto__in {
	max-width: 760px;
}

.ms-texto__volver {
	margin-bottom: 28px;
	font-size: 0.9375rem;
}

.ms-texto__titulo {
	font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem);
	letter-spacing: -0.03em;
}

.ms-texto__cuerpo {
	margin-top: 40px;
	max-width: 64ch;
}

.ms-texto__cuerpo h2 {
	margin: 40px 0 10px;
	font-size: 1.5rem;
	font-weight: 450;
}

.ms-texto--404 p {
	max-width: 52ch;
	margin: 24px 0 32px;
}

/* Pie -------------------------------------------------------------- */

.ms-pie {
	padding: clamp(64px, 8vw, 96px) 0 calc(32px + env(safe-area-inset-bottom));
	background: var(--castano);
	color: #d8cfc7;
	font-size: 0.9375rem;
}

.ms-pie a {
	color: var(--blanco);
}

.ms-pie p {
	margin: 0 0 6px;
}

.ms-pie address {
	font-style: normal;
	line-height: 1.6;
}

.ms-pie__in {
	display: grid;
	gap: 36px;
}

@media (min-width: 760px) {
	.ms-pie__in {
		grid-template-columns: 2fr 1fr 1fr 1fr;
	}
}

.ms-pie__tipo {
	font-size: 0.8125rem;
	color: #b9aea6;
}

.ms-pie__nombre {
	font: italic 400 clamp(3rem, 2.4rem + 2.6vw, 4.5rem)/0.85 var(--marca);
	color: var(--blanco);
}

.ms-pie__t {
	margin-bottom: 10px !important;
	font-size: 0.8125rem;
	font-weight: 600;
	color: #b9aea6;
}

.ms-pie__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 56px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
	color: #b9aea6;
}

.ms-pie__legal p {
	margin: 0;
}

/* Barra de llamada en el móvil ------------------------------------ */

.ms-barra {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 35;
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 10px;
	padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom));
	background: rgba(241, 242, 238, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--linea);
	transform: translateY(110%);
	visibility: hidden;
	transition: transform 0.35s var(--facil), visibility 0s 0.35s;
}

.ms-barra .ms-boton {
	min-height: 48px;
}

.ms-barra.is-visible {
	transform: none;
	visibility: visible;
	transition: transform 0.35s var(--facil);
}

@media (min-width: 900px) {
	.ms-barra {
		display: none;
	}
}

@media (max-width: 899px) {
	.ms-pie {
		padding-bottom: calc(100px + env(safe-area-inset-bottom));
	}
}

/* Ventana de cita -------------------------------------------------- */

.ms-cita {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--castano);
	overflow: hidden;
}

.ms-cita::backdrop {
	background: rgba(31, 21, 17, 0.5);
}

html.ms-sin-scroll {
	overflow: hidden;
}

.ms-cita__caja {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(560px, 100%);
	background: var(--espejo);
	box-shadow: -40px 0 80px -40px rgba(0, 0, 0, 0.45);
}

.ms-cita[open] .ms-cita__caja {
	animation: ms-panel 0.45s var(--facil);
}

@keyframes ms-panel {
	from {
		opacity: 0;
		transform: translateX(48px);
	}
}

@keyframes ms-panel-movil {
	from {
		opacity: 0;
		transform: translateY(56px);
	}
}

@media (max-width: 599px) {
	.ms-cita__caja {
		top: auto;
		left: 0;
		height: calc(100% - 28px);
		border-radius: 22px 22px 0 0;
	}

	.ms-cita[open] .ms-cita__caja {
		animation-name: ms-panel-movil;
	}
}

.ms-cita__cabeza {
	padding: 22px 28px 0;
	border-bottom: 1px solid var(--linea);
}

.ms-cita__fila {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ms-cita__titulo {
	font-size: 2rem;
	font-weight: 400;
	outline: none;
}

.ms-cita__demo {
	margin: 0 auto 0 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--dorado);
	color: var(--castano);
	font-size: 0.75rem;
	font-weight: 700;
}

.ms-cita__cerrar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--castano);
	cursor: pointer;
}

.ms-cita__cerrar:hover {
	background: rgba(43, 30, 24, 0.07);
}

.ms-pasos {
	display: flex;
	gap: 6px 22px;
	margin: 16px 0 0;
	padding: 0 0 16px;
	list-style: none;
	font-size: 0.875rem;
	color: var(--ceniza);
	overflow-x: auto;
}

.ms-pasos li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.ms-pasos__n {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
}

.ms-pasos li[aria-current="step"] {
	color: var(--berenjena);
	font-weight: 650;
}

.ms-pasos li[aria-current="step"] .ms-pasos__n {
	background: var(--berenjena);
	border-color: var(--berenjena);
	color: var(--blanco);
}

.ms-pasos li.is-hecho {
	color: var(--castano);
}

.ms-pasos li.is-hecho .ms-pasos__n {
	background: var(--castano);
	border-color: var(--castano);
	color: var(--blanco);
}

.ms-cita__form,
.ms-cita__hecho {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.ms-cita__hecho[hidden],
.ms-cita__form[hidden] {
	display: none;
}

.ms-cita__cuerpo {
	flex: 1;
	min-height: 0;
	padding: 26px 28px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.ms-paso {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.ms-paso[hidden] {
	display: none;
}

.ms-paso.is-entrando {
	animation: ms-paso 0.35s var(--facil);
}

@keyframes ms-paso {
	from {
		opacity: 0;
		transform: translateX(16px);
	}
}

.ms-paso__t {
	padding: 0;
	font: 400 1.625rem/1.15 var(--serif);
	letter-spacing: -0.01em;
}

.ms-paso__ayuda {
	margin: 6px 0 0;
	font-size: 0.9375rem;
	color: var(--ceniza);
}

.ms-opciones__grupo {
	margin: 24px 0 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ceniza);
}

.ms-opciones {
	display: grid;
	gap: 10px;
}

.ms-opciones--otro {
	margin-top: 22px;
}

.ms-opcion {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 60px;
	padding: 12px 18px;
	border: 1.5px solid var(--linea);
	border-radius: 14px;
	background: var(--blanco);
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.ms-opcion:hover {
	border-color: #b8afa6;
}

.ms-opcion input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ms-opcion__marca {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border: 1.5px solid #b8afa6;
	border-radius: 7px;
	transition: background-color 0.2s, border-color 0.2s;
}

.ms-opcion__marca::after {
	content: "";
	width: 11px;
	height: 6px;
	margin-top: -3px;
	border-left: 2px solid var(--blanco);
	border-bottom: 2px solid var(--blanco);
	transform: rotate(-45deg) scale(0);
	transition: transform 0.2s var(--facil);
}

.ms-opcion__nombre {
	flex: 1;
	font-weight: 500;
}

.ms-opcion__nota {
	font-weight: 400;
	color: var(--ceniza);
	font-size: 0.875rem;
}

.ms-opcion__precio {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.ms-opcion:has(input:checked) {
	border-color: var(--berenjena);
	box-shadow: 0 0 0 1px var(--berenjena);
}

.ms-opcion:has(input:checked) .ms-opcion__marca {
	background: var(--berenjena);
	border-color: var(--berenjena);
}

.ms-opcion:has(input:checked) .ms-opcion__marca::after {
	transform: rotate(-45deg) scale(1);
}

.ms-opcion:has(input:focus-visible) {
	outline: 3px solid var(--berenjena);
	outline-offset: 2px;
}

/* Días y horas */

.ms-dias {
	display: flex;
	gap: 8px;
	margin: 18px -28px 0;
	padding: 4px 28px 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 28px;
	scrollbar-width: thin;
}

.ms-dia {
	position: relative;
	flex: none;
	scroll-snap-align: start;
}

.ms-dia input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ms-dia span.ms-dia__caja {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 84px;
	border: 1.5px solid var(--linea);
	border-radius: 14px;
	background: var(--blanco);
	cursor: pointer;
	line-height: 1.1;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ms-dia__sem,
.ms-dia__mes {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--ceniza);
}

.ms-dia__num {
	margin: 3px 0;
	font: 400 1.625rem/1 var(--serif);
}

.ms-dia:hover span.ms-dia__caja {
	border-color: #b8afa6;
}

.ms-dia input:checked + span.ms-dia__caja {
	background: var(--berenjena);
	border-color: var(--berenjena);
	color: var(--blanco);
}

.ms-dia input:checked + span.ms-dia__caja .ms-dia__sem,
.ms-dia input:checked + span.ms-dia__caja .ms-dia__mes {
	color: #e9dfe7;
}

.ms-dia input:focus-visible + span.ms-dia__caja {
	outline: 3px solid var(--berenjena);
	outline-offset: 2px;
}

.ms-dia input:disabled + span.ms-dia__caja {
	border-style: dashed;
	background: transparent;
	color: #9b928c;
	cursor: not-allowed;
}

.ms-dia input:disabled + span.ms-dia__caja .ms-dia__mes {
	color: #9b928c;
}

.ms-horas__titulo {
	margin: 28px 0 0;
	font: 400 1.25rem/1.2 var(--serif);
}

.ms-horas__grupo {
	margin: 18px 0 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ceniza);
}

.ms-horas__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 8px;
}

.ms-hora {
	position: relative;
}

.ms-hora input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.ms-hora span.ms-hora__caja {
	display: grid;
	place-items: center;
	height: 46px;
	border: 1.5px solid var(--linea);
	border-radius: 12px;
	background: var(--blanco);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.ms-hora:hover span.ms-hora__caja {
	border-color: #b8afa6;
}

.ms-hora input:checked + span.ms-hora__caja {
	background: var(--berenjena);
	border-color: var(--berenjena);
	color: var(--blanco);
}

.ms-hora input:focus-visible + span.ms-hora__caja {
	outline: 3px solid var(--berenjena);
	outline-offset: 2px;
}

.ms-hora input:disabled + span.ms-hora__caja {
	background: transparent;
	border-color: transparent;
	color: #a39a94;
	text-decoration: line-through;
	font-weight: 400;
	cursor: not-allowed;
}

.ms-horas__vacio {
	margin: 20px 0 0;
	color: var(--ceniza);
}

/* Tus datos */

.ms-campo {
	margin-top: 20px;
}

.ms-campo label {
	display: block;
	margin-bottom: 7px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.ms-campo__opcional {
	font-weight: 400;
	color: var(--ceniza);
}

.ms-campo input,
.ms-campo textarea {
	display: block;
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid #c9c2b9;
	border-radius: 12px;
	background: var(--blanco);
	color: var(--castano);
	font: 400 1rem/1.4 var(--sans);
	transition: border-color 0.2s;
}

.ms-campo input {
	min-height: 52px;
}

.ms-campo input:focus,
.ms-campo textarea:focus {
	border-color: var(--berenjena);
	outline: 3px solid rgba(74, 31, 66, 0.22);
	outline-offset: 0;
}

.ms-campo input[aria-invalid="true"] {
	border-color: var(--error);
}

.ms-campo__error,
.ms-error {
	margin: 8px 0 0;
	color: var(--error);
	font-size: 0.9375rem;
	font-weight: 600;
}

.ms-error {
	margin-top: 18px;
}

.ms-campo__error[hidden],
.ms-error[hidden] {
	display: none;
}

.ms-cita__aviso {
	margin: 24px 0 0;
	padding: 12px 14px;
	border-radius: 12px;
	background: rgba(216, 182, 124, 0.28);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* Pie de la ventana */

.ms-cita__pie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--linea);
	background: var(--espejo);
}

.ms-cita__resumen {
	flex: 1 1 200px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--ceniza);
}

.ms-cita__resumen:empty {
	display: none;
}

.ms-cita__botones {
	display: flex;
	gap: 10px;
	margin-left: auto;
}

.ms-cita__botones [hidden] {
	display: none;
}

/* Hecho */

.ms-cita__hecho .ms-cita__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-top: 40px;
}

.ms-hecho__icono {
	color: var(--berenjena);
}

.ms-hecho__icono circle {
	stroke-dasharray: 190;
	stroke-dashoffset: 190;
}

.ms-hecho__icono path {
	stroke-dasharray: 40;
	stroke-dashoffset: 40;
}

.ms-cita__hecho:not([hidden]) .ms-hecho__icono circle {
	animation: ms-trazo 0.7s var(--facil) forwards;
}

.ms-cita__hecho:not([hidden]) .ms-hecho__icono path {
	animation: ms-trazo 0.45s 0.45s var(--facil) forwards;
}

@keyframes ms-trazo {
	to {
		stroke-dashoffset: 0;
	}
}

.ms-hecho__t {
	margin-top: 22px;
	font-size: 2.25rem;
	font-weight: 400;
	outline: none;
}

.ms-hecho__cuando {
	margin: 14px 0 0;
	font: 400 1.5rem/1.25 var(--serif);
}

.ms-hecho__que {
	margin: 8px 0 0;
	font-weight: 500;
}

.ms-hecho__nota {
	margin: 18px 0 0;
	color: var(--ceniza);
}

.ms-hecho__nota:empty {
	display: none;
}

/* Sin movimiento si así lo pide el sistema. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}