/* San Marco · /reservar
   CSS específico de la página de motor de reservas.
   Se carga condicionalmente solo cuando body.sm-page-reservar existe.

   Estrategia:
   - Header del sitio fixed en top, motor de reservas debajo ocupando todo el espacio restante.
   - --sm-reservar-nav-h se establece dinámicamente vía JS midiendo el header real.
   - Fallback CSS: 120px desktop, 90px tablet, 80px mobile (valores reales del sm-header__bar). */

:root {
	--sm-reservar-nav-h: 120px;
}

@media (max-width: 1100px) {
	:root { --sm-reservar-nav-h: 100px; }
}
@media (max-width: 760px) {
	:root { --sm-reservar-nav-h: 80px; }
}

body.sm-page-reservar {
	background: var(--sm-bg);
	margin: 0;
}

/* Header fixed en /reservar/ para que el iframe quede debajo siempre */
body.sm-page-reservar .sm-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 50;
	background: rgba(248, 245, 242, 0.96);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 0.5px solid var(--sm-line-soft);
	box-shadow: 0 1px 0 rgba(26, 26, 26, 0.02);
	min-height: auto;
}

/* Esconder la curva SVG decorativa en /reservar/ — la página debe ser limpia */
body.sm-page-reservar .sm-header__bg {
	display: none;
}
body.sm-page-reservar .sm-header__bar {
	min-height: var(--sm-reservar-nav-h);
}

/* Logo en /reservar/ se reduce para no ocupar tanto */
body.sm-page-reservar .sm-header__logo-img {
	max-height: 60px;
	max-width: 110px;
	margin: 0;
}
body.sm-page-reservar .sm-header__logo {
	margin-top: 0;
	margin-bottom: 0;
}

body.sm-page-reservar .sm-whatsapp {
	z-index: 20;
}

/* Container del motor: altura razonable que permite ver el footer al hacer scroll.
   75vh deja espacio claro para el header arriba y el footer abajo.
   El postMessage con altura dinámica del motor puede expandir esto si el motor lo solicita. */
.sm-reservar {
	position: relative;
	width: 100%;
	height: 75vh;
	min-height: 600px;
	margin-top: var(--sm-reservar-nav-h);
	background: var(--sm-bg);
	overflow: hidden;
}

body.sm-reservar-dynamic-height .sm-reservar {
	height: auto;
	min-height: 75vh;
	overflow: visible;
}

.sm-reservar__shell {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 2;
	background: var(--sm-bg);
}

.sm-reservar__iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: var(--sm-bg);
}

body.sm-reservar-dynamic-height .sm-reservar__iframe {
	height: auto;
	min-height: 100%;
}

.sm-reservar__loader {
	position: absolute;
	inset: 0;
	z-index: 5;
	background: var(--sm-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.5s var(--sm-ease);
	pointer-events: none;
}

.sm-reservar__loader.is-hidden {
	opacity: 0;
}

.sm-reservar__loader-inner {
	text-align: center;
	max-width: 440px;
	padding: 0 32px;
}

.sm-reservar__eyebrow {
	font-family: var(--sm-font-sans);
	font-size: 11px;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	color: var(--sm-olive);
	font-weight: 400;
	margin-bottom: 24px;
}

.sm-reservar__brand {
	font-family: var(--sm-font-serif);
	font-size: clamp(32px, 4vw, 48px);
	font-weight: 300;
	letter-spacing: 0.18em;
	color: var(--sm-ink);
	line-height: 1;
}

.sm-reservar__rule {
	width: 40px;
	height: 1px;
	background: var(--sm-olive);
	margin: 32px auto;
}

.sm-reservar__loading-text {
	font-family: var(--sm-font-serif);
	font-style: italic;
	font-size: 16px;
	color: var(--sm-ink-mute);
	font-weight: 300;
}

.sm-reservar__dots {
	display: inline-block;
	margin-left: 2px;
	letter-spacing: 0;
}

.sm-reservar__dots i {
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 2px;
	border-radius: 50%;
	background: var(--sm-olive);
	opacity: 0.3;
	animation: sm-reservar-dot 1.4s infinite ease-in-out;
	vertical-align: middle;
}

.sm-reservar__dots i:nth-child(2) { animation-delay: 0.2s; }
.sm-reservar__dots i:nth-child(3) { animation-delay: 0.4s; }

@keyframes sm-reservar-dot {
	0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
	40%           { opacity: 1;   transform: scale(1.3); }
}

.sm-reservar__fallback {
	position: absolute;
	inset: 0;
	z-index: 4;
	background: var(--sm-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s var(--sm-ease);
}

.sm-reservar__fallback.is-visible {
	opacity: 1;
	pointer-events: auto;
}

.sm-reservar__fallback-inner {
	text-align: center;
	max-width: 520px;
	padding: 40px 32px;
}

.sm-reservar__fallback-title {
	font-family: var(--sm-font-serif);
	font-weight: 300;
	font-size: clamp(24px, 3.2vw, 34px);
	line-height: 1.25;
	margin: 18px 0 20px;
	color: var(--sm-ink);
	letter-spacing: 0.005em;
}

.sm-reservar__fallback-text {
	font-size: 15px;
	line-height: 1.9;
	color: var(--sm-ink-soft);
	font-weight: 300;
	margin-bottom: 32px;
}

.sm-reservar__fallback-actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

.sm-reservar__noscript {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px;
	text-align: center;
	background: var(--sm-bg);
	z-index: 6;
}

.sm-reservar__noscript p {
	font-size: 15px;
	line-height: 1.9;
	color: var(--sm-ink-soft);
	margin-bottom: 16px;
	max-width: 480px;
}

.sm-reservar__noscript a {
	color: var(--sm-olive);
	border-bottom: 0.5px solid currentColor;
	padding-bottom: 2px;
	transition: color 0.3s var(--sm-ease);
}

.sm-reservar__noscript a:hover {
	color: var(--sm-ink);
}

@media (max-width: 768px) {
	:root {
		--sm-reservar-nav-h: 60px;
	}
	.sm-reservar__brand {
		font-size: 28px;
		letter-spacing: 0.14em;
	}
	.sm-reservar__loader-inner {
		padding: 0 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sm-reservar__dots i { animation: none; opacity: 0.6; }
	.sm-reservar__loader,
	.sm-reservar__fallback { transition: none; }
}