/* ==========================================================================
   Reemplazos de MDB / Bootstrap 4 sobre Bootstrap 5.
   Replican los valores originales para que el diseño se vea igual que
   antes de la migración. Van al inicio para que las reglas propias de más
   abajo sigan teniendo prioridad.
   ========================================================================== */

a {
	text-decoration: none;
	transition: all .2s ease-in-out;
}

hr {
	box-sizing: content-box;
	overflow: visible;
	opacity: 1;
}

label {
	margin-bottom: .5rem;
}

/* Bootstrap 5 usa un espacio entre columnas de 24px; Bootstrap 4 usaba 30px */
.container,
.container-fluid,
.row {
	--bs-gutter-x: 30px;
}

.btn {
	border: 0;
	margin: .375rem;
	padding: .84rem 2.14rem;
	font-size: .81rem;
	text-transform: uppercase;
	border-radius: .125rem;
}

/* Bootstrap 5 agrega el breakpoint xxl (container de 1320px); se mantiene
   el ancho máximo de Bootstrap 4 para no cambiar el diseño */
@media (min-width: 1400px) {
	.container {
		max-width: 1140px;
	}
}

/* Tamaños de título fluidos: ver la sección "Tipografía" */
.h1-responsive {
	font-size: var(--fs-h1);
}

.h2-responsive {
	font-size: var(--fs-h2);
}

/* Contenedor de imagen con capa (mask) encima */
.view {
	position: relative;
	overflow: hidden;
	cursor: default;
}

.view .mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-attachment: fixed;
}

.view img {
	position: relative;
	display: block;
}

.overlay .mask {
	opacity: 0;
	transition: all .4s ease-in-out;
}

.overlay .mask:hover {
	opacity: 1;
}

.rgba-black-light {
	background-color: rgba(0, 0, 0, .3);
}

.rgba-white-slight {
	background-color: rgba(255, 255, 255, .1);
}

/* Indicadores de los carruseles sobre fotos: líneas finas blancas; la
   activa es más larga. Los bordes transparentes agrandan la zona táctil
   sin cambiar lo que se ve (background-clip: padding-box). */
.carousel .carousel-indicators {
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.carousel .carousel-indicators [data-bs-target] {
	width: 24px;
	height: 2px;
	margin: 0;
	border-style: solid;
	border-color: transparent;
	border-width: 12px 4px;
	border-radius: 0;
	background-color: #fff;
	background-clip: padding-box;
	opacity: 0.5;
	transition: width .4s ease, opacity .4s ease;
}

.carousel .carousel-indicators .active {
	width: 40px;
	opacity: 1;
}

.carousel .carousel-indicators [data-bs-target]:focus-visible {
	outline: 1px solid #fff;
	outline-offset: -8px;
}

/* Menú lateral: submenú con el Collapse de Bootstrap 5 */
.collapsible-accordion,
.collapsible-accordion ul {
	list-style: none;
}

.sidenav .dropdown-item {
	padding-top: .25rem;
	padding-bottom: .25rem;
	color: #fff;
	white-space: nowrap;
}

.sidenav .dropdown-item:hover,
.sidenav .dropdown-item:focus {
	color: #fff;
	background: transparent;
}

.rotate-icon {
	transition: transform 150ms ease-in;
}

.collapsible-accordion [aria-expanded="true"] {
	background: rgba(255, 255, 255, 0.2);
}

.collapsible-accordion [aria-expanded="true"] .rotate-icon {
	transform: rotate(180deg);
}

/* ==========================================================================
   Tipografía (mobile-first)
   Títulos en serif (Playfair Display), texto en sans (Jost). Los tamaños
   usan clamp(): crecen con el ancho de pantalla entre un mínimo pensado
   para teléfono y un máximo para escritorio.
   ========================================================================== */

:root {
	--font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Paleta monocromática: fondo blanco roto y carbón. El acento es el mismo
	   carbón de los títulos: la única nota de color del sitio es el logo. */
	--color-fondo: #faf8f5;
	--color-heading: #2b2b2b;
	--color-text: #4a4a4a;
	--color-acento: #2b2b2b;
	--color-linea: #e4ded6;
	--color-suave: #d6d0c8;

	/* Radio de esquinas: solo en elementos flotantes (menú lateral, aviso)
	   y en lo que va dentro de ellos. Los botones se mantienen rectos. */
	--radio-flotante: 6px;
	--radio-interior: 4px;

	--bs-body-bg: var(--color-fondo);

	--fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	--fs-h1: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
	--fs-h2: clamp(1.75rem, 1.45rem + 1.2vw, 2.25rem);
	--fs-label: 0.75rem;

	--bs-body-font-family: var(--font-sans);
}

body {
	background-color: var(--color-fondo);
	font-family: var(--font-sans);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
	font-family: var(--font-serif);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--color-heading);
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

p {
	color: var(--color-text);
}

/* Rótulos: menú, botones y etiquetas en mayúsculas pequeñas y espaciadas */
.btn,
label,
.collapsible-header,
.sidenav .dropdown-item {
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ==========================================================================
   Botones de acción ("Reservar", "Enviar"): contorno fino, esquinas rectas, sin sombra.
   .btn-contorno        sobre fondo claro (carbón)
   .btn-contorno-claro  sobre fotos oscuras (blanco)
   Usa las variables de Bootstrap para que hover, foco y toque (active)
   se vean igual.
   ========================================================================== */

.btn-contorno {
	--contorno-color: var(--color-heading);
	--contorno-contraste: #fff;

	--bs-btn-color: var(--contorno-color);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: var(--contorno-color);
	/* sin relleno al pasar el cursor por defecto: en pantallas táctiles el
	   hover queda "pegado" tras tocar; ver @media (hover: hover) */
	--bs-btn-hover-color: var(--contorno-color);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: var(--contorno-color);
	--bs-btn-active-color: var(--contorno-contraste);
	--bs-btn-active-bg: var(--contorno-color);
	--bs-btn-active-border-color: var(--contorno-color);
	--bs-btn-focus-box-shadow: none;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 0.85rem 2rem;
	border: 1px solid var(--bs-btn-border-color);
	/* esquinas apenas redondeadas, como las fotos dentro de las tarjetas (2026-10-08;
	   antes rectas: eran lo único con esquinas duras junto a tarjetas y avisos) */
	border-radius: var(--radio-interior);
	letter-spacing: 0.2em;
	transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.btn-contorno::after {
	content: "\2192";
	margin-left: 0.75rem;
	letter-spacing: 0;
	transition: transform .3s ease;
}

@media (hover: hover) {
	.btn-contorno {
		--bs-btn-hover-color: var(--contorno-contraste);
		--bs-btn-hover-bg: var(--contorno-color);
	}

	.btn-contorno:hover::after {
		transform: translateX(4px);
	}
}

.btn-contorno:focus-visible::after {
	transform: translateX(4px);
}

.btn-contorno:focus-visible {
	outline: 1px solid var(--contorno-color);
	outline-offset: 4px;
}

.btn-contorno-claro {
	--contorno-color: #fff;
	--contorno-contraste: var(--color-heading);
}

@media (prefers-reduced-motion: reduce) {
	.btn-contorno,
	.btn-contorno::after {
		transition: none;
	}
}

/* ==========================================================================
   Redes sociales: solo íconos, sin círculos. Cada enlace tiene un área
   táctil de 48x48px aunque el ícono sea pequeño.
   ========================================================================== */

.redes {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	/* compensa el espacio del área táctil para que los íconos queden
	   alineados con el borde del texto */
	margin: 0 -13px;
	padding: 0;
}

/* Teléfonos muy angostos: sin espacio extra, para que los 6 íconos
   quepan en una fila (el área táctil de 48px ya los separa) */
@media (max-width: 360px) {
	.redes {
		gap: 0;
	}
}

.redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 1.375rem;
	color: var(--color-heading);
	opacity: 0.7;
	transition: opacity .3s ease, transform .3s ease;
}

.redes a:hover,
.redes a:focus-visible {
	color: var(--color-heading);
	opacity: 1;
}

@media (hover: hover) {
	.redes a:hover {
		transform: translateY(-2px);
	}
}

.redes a:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.redes a {
		transition: none;
	}
}

/* Cada ícono toma el color de su marca al pasar el cursor. Solo en
   dispositivos con ratón; en teléfono se mantienen monocromáticos. */
.redes i {
	transition: color .3s ease, text-shadow .3s ease;
}

@media (hover: hover) {
	.redes a:hover .fa-instagram {
		background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.redes a:hover .fa-tiktok {
		color: #000;
		text-shadow: -1.5px -1.5px 0 #25f4ee, 1.5px 1.5px 0 #fe2c55;
	}

	.redes a:hover .fa-youtube {
		color: #ff0000;
	}

	.redes a:hover .fa-x-twitter {
		color: #000;
	}

	.redes a:hover .fa-whatsapp {
		color: #25d366;
	}
}

/* ==========================================================================
   Flechas de los carruseles: círculo blanco con un chevrón carbón fino.
   Es el mismo botón en todos los carruseles (Bootstrap sobre las fotos y la
   galería Owl de la portada). El chevrón es un SVG usado como máscara, así
   toma currentColor; el de "anterior" es el mismo, reflejado.
   ========================================================================== */

:root {
	--chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5 11.5 8 6 13.5'/%3E%3C/svg%3E");
	--flecha-circulo: 48px;
}

@media (max-width: 576px) {
	:root {
		--flecha-circulo: 44px;
	}
}

/* Zona clicable de Bootstrap: franja lateral de la foto */
.carousel-control-prev,
.carousel-control-next,
.carousel-control-prev:hover,
.carousel-control-next:hover,
.carousel-control-prev:focus,
.carousel-control-next:focus {
	opacity: 1;
}

/* El botón tiene exactamente el tamaño del círculo (Bootstrap usa por
   defecto una franja de toda la altura, que se activaba antes de llegar
   al círculo), centrado verticalmente y separado del borde de la foto */
.carousel-control-prev,
.carousel-control-next {
	top: 50%;
	bottom: auto;
	width: var(--flecha-circulo);
	height: var(--flecha-circulo);
	margin: 0;
	/* zona activa redonda, igual al círculo */
	border-radius: 50%;
	transform: translateY(-50%);
}

.carousel-control-prev {
	left: max(0.75rem, 3%);
}

.carousel-control-next {
	right: max(0.75rem, 3%);
}

/* El círculo */
.carousel-control-prev-icon,
.carousel-control-next-icon,
.owl-prev span,
.owl-next span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--flecha-circulo);
	height: var(--flecha-circulo);
	border-radius: 50%;
	background-image: none;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
	color: var(--color-heading);
	/* oculta el carácter que Owl pone por defecto */
	font-size: 0;
	transition: background-color .3s ease, box-shadow .3s ease;
}

/* Variante sobre las fotos (carruseles de Bootstrap): círculo translúcido
   con borde blanco fino y chevrón blanco, para no tapar la imagen */
.carousel-control-prev-icon,
.carousel-control-next-icon {
	border: 1px solid rgba(255, 255, 255, 0.85);
	background-color: rgba(0, 0, 0, 0.18);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: none;
	color: #fff;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* El chevrón */
.carousel-control-prev-icon::before,
.carousel-control-next-icon::before,
.owl-prev span::before,
.owl-next span::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
	transition: transform .3s ease;
}

.carousel-control-prev-icon::before,
.owl-prev span::before {
	transform: scaleX(-1);
}

/* Al pasar el cursor: el círculo se vuelve blanco sólido (con chevrón
   carbón). En la galería Owl además el chevrón avanza un poco; sobre las
   fotos no, porque el cambio a blanco ya es suficiente */
@media (hover: hover) {
	.owl-prev:hover span,
	.owl-next:hover span {
		background-color: #fff;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	}

	.carousel-control-prev:hover .carousel-control-prev-icon,
	.carousel-control-next:hover .carousel-control-next-icon {
		border-color: #fff;
		background-color: #fff;
		color: var(--color-heading);
	}

	.owl-next:hover span::before {
		transform: translateX(2px);
	}

	.owl-prev:hover span::before {
		transform: scaleX(-1) translateX(2px);
	}
}

.owl-prev:focus-visible span,
.owl-next:focus-visible span {
	outline: 2px solid var(--color-heading);
	outline-offset: 2px;
}

.carousel-control-prev:focus-visible .carousel-control-prev-icon,
.carousel-control-next:focus-visible .carousel-control-next-icon {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.carousel-control-prev-icon,
	.carousel-control-next-icon,
	.owl-prev span,
	.owl-next span,
	.carousel-control-prev-icon::before,
	.carousel-control-next-icon::before,
	.owl-prev span::before,
	.owl-next span::before {
		transition: none;
	}
}

/* ==========================================================================
   Menú lateral (#mySidenav): el panel que se abre con el botón de tres
   líneas (el botón no cambia). Panel marfil con borde fino y sombra suave,
   enlaces en carbón y la página actual en cobrizo. Se muestra al tener la
   clase .mystyle (la pone myFunction() en utility.js). Los selectores usan
   #mySidenav para ganarle a las reglas viejas del recuadro negro.
   ========================================================================== */

/* Botón del menú (tres líneas): sin el borde ni la sombra de foco que
   Bootstrap le pone dentro de .navbar. En las páginas interiores aparecía
   un cuadrado negro al tocarlo; así se ve igual que en index.html. */
.navbar-toggler,
.navbar-toggler:hover,
.navbar-toggler:focus,
.navbar-toggler:active {
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none !important;
}

/* Solo al navegar con el teclado (Tab), nunca al tocar o hacer clic:
   una línea blanca fina para saber dónde está el foco */
.navbar-toggler:focus-visible {
	outline: 1px solid rgba(255, 255, 255, 0.8);
	outline-offset: 4px;
}

#mySidenav.sidenav {
	width: max-content;
	min-width: 260px;
	/* tope de ancho: los nombres más largos se parten en dos renglones */
	max-width: min(calc(100vw - 40px), 340px);
	/* En las páginas interiores el panel vive dentro de la portada (700px,
	   overflow: hidden): con "Habitaciones y Suites" abierto no cabía y se
	   cortaba. Con este tope siempre cabe y se desplaza por dentro. */
	max-height: min(calc(100vh - 100px), 600px);
	max-height: min(calc(100svh - 100px), 600px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0.5rem 0;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	background-color: var(--color-fondo) !important;
	box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
	text-align: left;
	/* cerrado */
	visibility: hidden;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s !important;
}

/* En las páginas cuya primera foto se monta sobre la portada
   (.carouselAbsolute: 150px desde 1201px, 100px entre 993 y 1200px) esa foto
   queda por encima del menú; el panel termina antes de donde empieza la foto
   (portada de 700px - posición del panel 72px - margen) */
@media (min-width: 993px) {
	body:has(.carouselAbsolute) #mySidenav.sidenav {
		max-height: min(calc(100vh - 100px), 510px);
		max-height: min(calc(100svh - 100px), 510px);
	}
}

@media (min-width: 1201px) {
	body:has(.carouselAbsolute) #mySidenav.sidenav {
		max-height: min(calc(100vh - 100px), 460px);
		max-height: min(calc(100svh - 100px), 460px);
	}
}

#mySidenav.sidenav.mystyle {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: opacity .25s ease, transform .25s ease, visibility 0s !important;
}

#mySidenav .collapsible-accordion {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

#mySidenav .collapsible-accordion li,
#mySidenav .collapsible-accordion li:hover,
#mySidenav .collapsible-accordion .active,
#mySidenav .collapsible-accordion [aria-expanded="true"] {
	background: none;
}

/* Enlaces principales */
#mySidenav a.collapsible-header {
	position: relative;
	width: auto !important;
	margin: 0 0.5rem;
	padding: 0.8rem 1.25rem !important;
	border-radius: var(--radio-interior);
	color: var(--color-text);
	transition: background-color .2s ease, color .2s ease;
}

#mySidenav a.collapsible-header:hover,
#mySidenav a.collapsible-header:focus-visible {
	background-color: #f4f0ea;
	color: var(--color-heading);
}

/* página actual: sombreado de fondo permanente (más marcado que el del
   cursor) y texto en carbón pleno; los demás enlaces van en el gris del texto */
#mySidenav a.collapsible-header.active,
#mySidenav a.collapsible-header.active:hover {
	background-color: #ebe5dd;
	color: var(--color-acento);
}

#mySidenav .rotate-icon {
	font-size: 0.7rem;
}

/* Submenú de Habitaciones: dos grupos que se despliegan por separado,
   Ejecutivas (habitaciones.html) y Suites temáticas (express/suites.html) */
#mySidenav .menu-grupos {
	margin: 0 0 0.25rem;
	padding: 0;
	list-style: none;
}

#mySidenav .menu-grupo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0.5rem;
	padding: 0.6rem 1.25rem 0.6rem 2rem;
	border-radius: var(--radio-interior);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-heading);
	transition: background-color .2s ease;
}

/* "+" que pasa a "−" al abrir el grupo */
#mySidenav .menu-grupo::after {
	content: "+";
	font-size: 0.95rem;
	font-weight: 400;
	letter-spacing: 0;
}

#mySidenav .menu-grupo[aria-expanded="true"]::after {
	content: "\2212";
}

#mySidenav .collapsible-accordion .menu-grupo:hover,
#mySidenav .collapsible-accordion .menu-grupo:focus-visible {
	background-color: #f1ede7;
	color: var(--color-heading);
}

/* Opciones finales dentro de un grupo (Reservar > Estadía / Eventos): sin el "+"
   y la página actual con el mismo sombreado que los enlaces principales */
#mySidenav .menu-grupo.menu-hoja::after {
	content: none;
}

#mySidenav .menu-grupo.menu-hoja.active {
	background-color: #ebe5dd;
	color: var(--color-acento);
}

#mySidenav .menu-grupos ul {
	margin: 0.25rem 1.75rem 0.5rem 2.5rem;
	padding: 0 0 0 1rem;
	border-left: 1px solid var(--color-linea);
	list-style: none;
}

#mySidenav .dropdown-item {
	padding: 0.45rem 0 !important;
	color: var(--color-text);
	font-size: 0.7rem;
	/* nombres largos ("Doble Remodelada (Matrimonial + Matrimonial)") pasan a un segundo
	   renglón en vez de salirse del panel (2026-10-13) */
	white-space: normal;
	line-height: 1.45;
	transition: color .2s ease;
}

#mySidenav .dropdown-item:hover,
#mySidenav .dropdown-item:focus-visible {
	background: none;
	color: var(--color-acento);
}

/* Logo del hotel al final del menú (el logo es blanco: se muestra en carbón) */
#mySidenav .menu-logo {
	margin: 0.5rem 1.75rem 0;
	padding: 1.25rem 0 0.75rem;
	border-top: 1px solid var(--color-linea);
	text-align: center;
}

/* #slide-out en el selector: gana a la regla vieja que limitaba las imágenes
   del panel a 100px; display/margin: centrado también cuando el menú está
   dentro de la portada (.view img es display: block) */
#mySidenav #slide-out .menu-logo img {
	display: block;
	width: 130px;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	filter: brightness(0) opacity(0.8);
	transition: filter .2s ease;
}

#mySidenav .menu-logo a:hover img,
#mySidenav .menu-logo a:focus-visible img {
	filter: brightness(0) opacity(1);
}

/* El logo del menú es la versión a color (logoOriginal.png), sin el filtro
   carbón. La imagen tiene márgenes transparentes, por eso es algo más ancha. */
#mySidenav #slide-out .menu-logo img.logo-color,
#mySidenav .menu-logo a:hover img.logo-color,
#mySidenav .menu-logo a:focus-visible img.logo-color {
	width: 150px;
	filter: none;
}

@media (prefers-reduced-motion: reduce) {
	#mySidenav.sidenav,
	#mySidenav.sidenav.mystyle {
		transform: none;
		transition: none !important;
	}
}

/* ==========================================================================
   Aviso flotante (lo crea resources/js/utility.js), p. ej. "Copiamos el
   correo". Abajo al centro, respetando el área segura del teléfono.
   ========================================================================== */

.aviso {
	position: fixed;
	left: 50%;
	bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
	z-index: 2147483647;
	width: max-content;
	max-width: calc(100% - 2rem);
	padding: 1rem 1.25rem;
	border-radius: var(--radio-flotante);
	background-color: var(--color-heading);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #fff;
	overflow-wrap: anywhere;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 10px);
	transition: opacity .3s ease, transform .3s ease;
}

.aviso.visible {
	opacity: 1;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.aviso strong {
	display: block;
	font-weight: 500;
}

.aviso span {
	opacity: 0.8;
}

.aviso.con-icono {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.aviso.con-icono i {
	flex: none;
	font-size: 1.15rem;
}

@media (prefers-reduced-motion: reduce) {
	.aviso {
		transition: none;
	}
}

/* ==========================================================================
   Pie de página: logo y redes, ubicación y contacto. Apilado y centrado en
   teléfono; dos columnas en tablet; tres en escritorio.
   ========================================================================== */

.pie-logo {
	max-width: 14rem;
}

.pie-rotulo {
	margin-bottom: 0.75rem;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-heading);
}

.pie-texto {
	margin: 0;
	font-size: 0.9375rem;
	font-style: normal;
	line-height: 1.8;
	color: var(--color-text);
	overflow-wrap: anywhere;
}

.pie-texto a {
	color: var(--color-text);
	text-decoration: none;
}

.pie-texto a:hover,
.pie-texto a:focus-visible {
	color: var(--color-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pie-legal {
	margin: 0;
	padding: 1.5rem 0 2rem;
	border-top: 1px solid var(--color-linea);
	font-size: 0.8125rem;
	text-align: center;
	color: var(--color-text);
}

/* ========================================================================== */

/* Required for full background image */

/* HEADER */
html,
body,
header,
.view {
	height: 100%;
}

html {
	scroll-behavior: smooth;
}

.logo_index_express {
	z-index: 1000000000;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 740px) {

	html,
	body,
	header,
	.main-index header .view {
		height: 100vh;
	}
}

/* Portada de index.html: video en bucle, sin sonido, que llena la pantalla.
   En teléfono vertical carga una versión recortada y más liviana
   (resources/video/portada-movil.mp4). */
.portada-video {
	height: 100vh;
	height: 100svh;
	background: #2b2b2b url('./../img/page/home_carousel/portada-video.jpg') center / cover no-repeat;
	background-image: image-set(url('./../img/page/home_carousel/portada-video.webp') type('image/webp'), url('./../img/page/home_carousel/portada-video.jpg') type('image/jpeg'));
}

.portada-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* "Descubre más" al pie de la portada de todas las páginas con portada de foto (como en rolex.com): rótulo
   pequeño y, debajo, un chevron blanco y fino que "cae" en bucle: aparece arriba,
   baja el doble de su alto y se desvanece abajo, cada 1,5 s. Todo es un solo
   enlace a "Bienvenidos"; el chevron queda quieto si el usuario pidió reducir el
   movimiento */
.portada-flecha {
	position: absolute;
	left: 50%;
	bottom: 0.75rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 1rem 0;
	transform: translateX(-50%);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}

.portada-flecha:hover {
	color: #fff;
}

.portada-flecha-texto {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.portada-flecha-icono {
	/* el margen de abajo deja sitio para la caída */
	margin: 0.4rem 0 1.6rem;
	width: 18px;
	height: 18px;
	background-color: #fff;
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
	transform: rotate(90deg);
	opacity: 0;
	animation: portada-flecha-cae 1.5s ease 1s infinite;
}

.portada-flecha:focus-visible {
	outline: 1px solid #fff;
	outline-offset: -6px;
}

/* En computadora, las páginas cuya primera foto se monta sobre la portada
   (.carouselAbsolute: restaurante, eventos, piscina) ya muestran que hay más
   abajo, y esa foto taparía el enlace: se oculta. En teléfonos la foto va debajo */
@media (min-width: 993px) {
	body:has(.carouselAbsolute) .portada-flecha {
		display: none;
	}
}

/* el chevron está girado 90°: su eje X apunta hacia abajo */
@keyframes portada-flecha-cae {
	0% { opacity: 0; transform: rotate(90deg) translateX(-100%); }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 0; transform: rotate(90deg) translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
	.portada-flecha-icono {
		opacity: 1;
		animation: none;
	}
}

.portada-video-pausa {
	position: absolute;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	font-size: 0.8rem;
	transition: background-color .3s ease, color .3s ease;
}

.portada-video-pausa:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 4px;
}

@media (hover: hover) {
	.portada-video-pausa:hover {
		background-color: #fff;
		color: var(--color-heading);
	}
}

hr {
	border-top: 1px solid var(--color-linea);
}

::selection {
	background-color: var(--color-acento);
	color: #fff;
}


.rgba-black-strong,
.rgba-black-strong:after {
	background-color: rgba(0, 0, 0, .6) !important;
}

@media (max-width:992px) {
	.sidenav {
		background-color: rgba(0, 0, 0) !important;
	}
}

a {
	color: #fff;
}

a:hover {
	color: #f2f2f2;
}

ul {
	padding: 0px;
}

/* li {
	list-style: none;
} */

input[type=search],
input[type=text],
input[type=number],
input[type=email],
textarea {
	border: none !important;
	color: #000;
	padding-left: 0.4rem;
	padding-right: 0.4rem;
}

/* SCROLL BAR: gris carbón semitransparente, discreto; un poco más marcado
   al pasar el cursor. scrollbar-color solo para Firefox: si Chrome la ve,
   ignora ::-webkit-scrollbar y muestra su barra estándar con flechas. */
@supports (-moz-appearance: none) {
	html {
		scrollbar-color: rgba(43, 43, 43, 0.35) transparent;
		scrollbar-width: thin;
	}
}

::-webkit-scrollbar {
	width: 8px;
	background-color: transparent;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: rgba(43, 43, 43, 0.35) !important;
}

::-webkit-scrollbar-thumb:hover {
	background: rgba(43, 43, 43, 0.55) !important;
}

.w-10 {
	width: 10%;
}


/* La línea decorativa ocupa su propio espacio, así no se encima con la
   segunda línea cuando el título se parte en dos */
.border-title {
	border-bottom: 2px solid var(--color-acento);
	display: inline-block;
	line-height: 1.2;
	margin-bottom: 0 !important;
	padding-bottom: .4rem !important;
}

.opacity-0 {
	opacity: 0;
}

.opacity-10 {
	opacity: 0.1;
}

.opacity-20 {
	opacity: 0.2;
}

.opacity-30 {
	opacity: 0.3;
}

.opacity-40 {
	opacity: 0.4;
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-60 {
	opacity: 0.6;
}

.opacity-70 {
	opacity: 0.7;
}

.opacity-80 {
	opacity: 0.8;
}

.opacity-90 {
	opacity: 0.9;
}

.opacity-100 {
	opacity: 1;
}

.main-index .jarallax {
	min-height: 100vh;
}

.top-nav-collapse {
	background-color: #78909c !important;
}

.navbar:not(.top-nav-collapse) {
	background: transparent !important;
}

@media (max-width: 991px) {
	.navbar:not(.top-nav-collapse) {
		background: transparent !important;
	}
}

.hr-light {
	border-top: 3px solid #fff;
	width: 80px;
}

.jarallax {
	min-height: 700px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}

/* BACKGROUNDS */

/* hotel */

.jarallax.contacto {
	background-image: url('./../img/page/cover_images/DSC01504.jpg');
	background-image: image-set(url('./../img/page/cover_images/DSC01504.webp') type('image/webp'), url('./../img/page/cover_images/DSC01504.jpg') type('image/jpeg'));
}

/* Portada con video en vez de foto (piscina.html): el video llena la portada
   detrás de la capa oscura; mientras carga se ve su primer cuadro como fondo */
.portada-con-video video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portada-piscina {
	background: #2b2b2b url('./../img/piscina/portada-video-piscina.jpg') center / cover no-repeat;
	background-image: image-set(url('./../img/piscina/portada-video-piscina.webp') type('image/webp'), url('./../img/piscina/portada-video-piscina.jpg') type('image/jpeg'));
}

/* capa oscura suave (rgba-black-light) para que el video conserve sus colores;
   la sombra mantiene el texto legible cuando pasa sobre las nubes */
.portada-piscina h1,
.portada-piscina p {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

@media (orientation: portrait) {
	.portada-piscina {
		background-image: url('./../img/piscina/portada-video-piscina-movil.jpg');
		background-image: image-set(url('./../img/piscina/portada-video-piscina-movil.webp') type('image/webp'), url('./../img/piscina/portada-video-piscina-movil.jpg') type('image/jpeg'));
	}
}

.jarallax.piscina {
	background-image: url('./../img/page/cover_images/DSC01547.jpg');
	background-image: image-set(url('./../img/page/cover_images/DSC01547.webp') type('image/webp'), url('./../img/page/cover_images/DSC01547.jpg') type('image/jpeg'));
}

.jarallax.meeting_events {
	background-image: url('./../img/page/cover_images/DSC01790.jpg');
	background-image: image-set(url('./../img/page/cover_images/DSC01790.webp') type('image/webp'), url('./../img/page/cover_images/DSC01790.jpg') type('image/jpeg'));
}

.jarallax.restaurant_terraza {
	background-image: url('./../img/page/cover_images/DSC01642.jpg');
	background-image: image-set(url('./../img/page/cover_images/DSC01642.webp') type('image/webp'), url('./../img/page/cover_images/DSC01642.jpg') type('image/jpeg'));
}

/* portada de reservar.php: una habitación (DSC01384, ampliada con Real-ESRGAN; 2026-10-07; la piscina se probó y no convenció: no parecía de reservas) */
.jarallax.reservar-portada {
	background-image: url('./../img/page/cover_images/reservar-habitacion-1920.jpg');
	background-image: image-set(url('./../img/page/cover_images/reservar-habitacion-1920.webp') type('image/webp'), url('./../img/page/cover_images/reservar-habitacion-1920.jpg') type('image/jpeg'));
}

/* Portada de habitaciones.php: foto vertical del pasillo (IMG_0200). En computadora
   una franja horizontal centrada en el fondo del pasillo; con la pantalla vertical,
   la foto completa. */
.jarallax.habitaciones-pasillo {
	background-image: url('./../img/page/cover_images/pasillo-1920.jpg');
	background-image: image-set(url('./../img/page/cover_images/pasillo-1920.webp') type('image/webp'), url('./../img/page/cover_images/pasillo-1920.jpg') type('image/jpeg'));
}

@media (orientation: portrait) {
	.jarallax.habitaciones-pasillo {
		background-image: url('./../img/page/cover_images/pasillo-movil.jpg');
		background-image: image-set(url('./../img/page/cover_images/pasillo-movil.webp') type('image/webp'), url('./../img/page/cover_images/pasillo-movil.jpg') type('image/jpeg'));
	}
}

.jarallax.services {
	background-image: url('./../img/page/cover_images/DSC01815.jpg');
	background-image: image-set(url('./../img/page/cover_images/DSC01815.webp') type('image/webp'), url('./../img/page/cover_images/DSC01815.jpg') type('image/jpeg'));
	/* encuadre más abajo: los sillones y la mesa, sin perder El Ávila en las ventanas
	   (jarallax usa data-img-position="50% 62%" del HTML; esto es por si no carga) */
	background-position: 50% 62%;
}

.jarallax.hotel {
	background-image: url('./../img/page/cover_images/nh-fachada-aerea.jpg');
	background-image: image-set(url('./../img/page/cover_images/nh-fachada-aerea.webp') type('image/webp'), url('./../img/page/cover_images/nh-fachada-aerea.jpg') type('image/jpeg'));
}

.jarallax.home_1 {
	background-image: url('./../img/page/home_carousel/hotel.jpg');
	background-image: image-set(url('./../img/page/home_carousel/hotel.webp') type('image/webp'), url('./../img/page/home_carousel/hotel.jpg') type('image/jpeg'));
}

.jarallax.home_2 {
	background-image: url('./../img/page/home_carousel/DSC01590.jpg');
	background-image: image-set(url('./../img/page/home_carousel/DSC01590.webp') type('image/webp'), url('./../img/page/home_carousel/DSC01590.jpg') type('image/jpeg'));
}

.jarallax.home_3 {
	background-image: url('./../img/page/home_carousel/DSC01824-Pano.png');
	background-image: image-set(url('./../img/page/home_carousel/DSC01824-Pano.webp') type('image/webp'), url('./../img/page/home_carousel/DSC01824-Pano.png') type('image/png'));
}

/* express */

.jarallax.suites {
	background-image: url('./../../express/img/page/cover_image/IMG_6426_1.jpg');
	background-image: image-set(url('./../../express/img/page/cover_image/IMG_6426_1.webp') type('image/webp'), url('./../../express/img/page/cover_image/IMG_6426_1.jpg') type('image/jpeg'));
}

/* NAVBAR */

nav {
	z-index: 1000000;
}

.navbar {
	box-shadow: none !important;
	font-weight: 300;
}

.navbar .navbar-brand img {
	height: 70px !important;
	transition: ease 0.5s;
}

@media (max-width: 500px) {
	.navbar .navbar-brand img {
		height: 55px !important;
		transition: ease 0.5s;
	}

}

/* The side navigation menu */
.sidenav {
	border-radius: 5px;
	height: auto;
	/* 100% Full-height */
	width: 0;
	/* 0 width - change this with JavaScript */
	position: absolute;
	/* Stay in place */
	z-index: 10000000000;

	/* Stay on top */
	top: 80px;
	/* Stay at the top */
	right: 20px;
	/*background-color: rgba(255, 255, 255, 0.3);*/
	background-color: rgba(0, 0, 0);
	/* Black*/
	overflow-x: hidden;
	/* Disable horizontal scroll */
	transition: 0.5s;
	/* 0.5 second transition effect to slide in the sidenav */
	text-align: right;

	/* Add the blur effect */

}

.blur {
	/* Add the blur effect */
	filter: blur(8px);
	-webkit-filter: blur(8px);
}

.btn {
	box-shadow: none !important;
}

li a.waves-effect,
li a.waves-light {
	display: block;
}

.mystyle {
	width: auto;
	transition: 0.5s !important;
}

.collapsible-accordion li:hover {
	background: rgba(255, 255, 255, 0.2);

}

.collapsible-accordion .active {
	background: rgba(255, 255, 255, 0.2);
}

.dropdown-item.active,
.dropdown-item:active {
	color: #fff;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.2);
}

.collapsible-header a {
	color: #fff;
}


/* button navbar */
.block {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 1s ease;
	background-image:
		transparent;
	/*color de fondo*/
}

.cta {
	height: 3rem;
	/*tamano del boton completo*/
	width: 3rem;
	/*tamano del boton completo*/
	cursor: pointer;
}

.toggle-btn {
	height: 0.3rem;
	width: 2rem;
	background-color: #fff;
	/*color de las rayitas*/
	position: relative;
	top: 50%;
	left: 0;
	margin: auto;
	transition: all 0.3s ease-in-out;
}

.toggle-btn:before {
	content: "";
	height: 0.3rem;
	width: 2rem;
	box-shadow: 0 -0.6rem 0 0 #fff;
	/*color de las rayitas*/
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s ease-in-out;
}

.toggle-btn:after {
	content: "";
	height: 0.3rem;
	width: 2rem;
	box-shadow: 0 0.6rem 0 0 #fff;
	/*color de las rayitas*/
	position: absolute;
	top: 0;
	left: 0;
	transition: all 0.3s ease-in-out;
}

.active .toggle-btn {
	background-color: transparent;
	transition: all 0.2s ease-in-out;
}

.active .toggle-btn:before {
	top: 0;
	transition: all 0.3s ease-in-out;
}

.active .toggle-btn:after {
	top: 0;
	transition: all 0.3s ease-in-out;
}

.active .type1:before {
	left: 0.5rem;
	transform: translateY(0.5rem) rotate(-45deg);
}

.active .type1:after {
	top: 0;
	left: 0.5rem;
	transform: translateY(-0.4rem) rotate(45deg);
}

.sidenav #slide-out div button {
	border-radius: 5px;
	background: rgba(255, 255, 255, 0.1);
}

.sidenav #slide-out div a img {
	max-width: 100px;
}


/* carousel */

.carousel {
	width: 100%;
	height: 100%;
}

.carousel-inner {
	height: 100%;
}

.item {
	opacity: 0.4;
	transition: .4s ease all;
	margin: 0 20px;
	transform: scale(.8);
}

@media(max-width:1000px) {
	.item {
		margin: 0;
		transform: scale(.9)
	}
}

.active .item {
	opacity: 1;
	transform: scale(1);
}

.owl-item {
	-webkit-backface-visibility: hidden;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);
}

.inner {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	text-align: center;
}

.inner a {
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	transition: .3s ease border-color
}

.inner a:hover {
	border-color: #fff;
}

.black .inner a {
	color: #000;
	border-color: rgba(0, 0, 0, 0.4)
}

.black .inner a:hover {
	border-color: #000;
}

.owl-controls {
	position: absolute;
	margin-top: 300px;
}

/* Flechas de la galería Owl: la altura la fija centrarFlechasOwl() en
   index.html (mitad de la foto); 50% es el respaldo */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
	position: absolute;
	top: 50%;
	/* zona activa redonda, igual al círculo */
	border-radius: 50%;
	transform: translateY(-50%);
}

.owl-carousel .owl-nav button.owl-prev {
	left: 15%;
}

.owl-carousel .owl-nav button.owl-next {
	right: 15%;
}

@media (max-width: 1000px) {
	.owl-carousel .owl-nav button.owl-prev {
		left: 3%;
	}

	.owl-carousel .owl-nav button.owl-next {
		right: 3%;
	}
}

/* Indicadores de la galería Owl: las mismas líneas finas que en las fotos,
   en gris claro con la activa en carbón. El padding del botón es la zona
   táctil; la línea visible es el <span> que Owl pone dentro. */
.owl-carousel .owl-dots {
	display: flex;
	justify-content: center;
	margin-top: 0.75rem;
}

.owl-carousel button.owl-dot {
	margin: 0;
	padding: 12px 4px !important;
	border: 0;
	background: none;
}

.owl-dot span {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--color-suave);
	transition: width .4s ease, background-color .4s ease;
}

.owl-dot.active span {
	width: 40px;
	background-color: var(--color-heading);
}

@media (hover: hover) {
	.owl-dot:not(.active):hover span {
		background-color: #9a9a9a;
	}
}

.owl-dot:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: -4px;
}

@media (prefers-reduced-motion: reduce) {
	.owl-dot span,
	.carousel .carousel-indicators [data-bs-target] {
		transition: none;
	}
}

/* ==========================================================================
   Ubicación: mapa de Google con una tarjeta de "Cómo llegar".
   Teléfono: texto arriba y mapa debajo. Escritorio: texto a la izquierda y
   mapa a la derecha, sin taparse (el recuadro de Google con el nombre y las
   estrellas queda arriba a la izquierda del mapa).
   ========================================================================== */

.ubicacion {
	padding-block: 3rem;
}

.ubicacion-marco {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.ubicacion-mapa {
	order: 2;
	position: relative;
	aspect-ratio: 4 / 3;
	background-color: var(--color-linea);
}

.ubicacion-mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ubicacion-tarjeta {
	text-align: center;
}

.ubicacion-rotulo {
	margin-bottom: 0.5rem;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.ubicacion-tarjeta h2 {
	margin-bottom: 1.25rem;
}

.ubicacion-direccion {
	margin-bottom: 1.75rem;
	font-style: normal;
	line-height: 1.8;
	color: var(--color-text);
}

.ubicacion-acciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.ubicacion-acciones .btn-contorno {
	flex: 1 1 12rem;
	padding-inline: 1.25rem;
}

.ubicacion-acciones .btn-contorno i {
	margin-right: 0.6rem;
	font-size: 1rem;
	letter-spacing: 0;
}

.ubicacion-ayuda {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-linea);
	font-size: 0.9375rem;
}

.ubicacion-ayuda a {
	color: var(--color-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (min-width: 768px) {
	.ubicacion-mapa {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 992px) {
	.ubicacion {
		padding-block: 5rem;
	}

	.ubicacion-marco {
		display: grid;
		grid-template-columns: 22rem 1fr;
		align-items: center;
		gap: 4rem;
	}

	.ubicacion-mapa {
		aspect-ratio: auto;
		height: 520px;
	}

	.ubicacion-tarjeta {
		text-align: left;
	}

	.ubicacion-acciones {
		justify-content: flex-start;
	}
}

/* footer hr */
footer div hr {
	border-top-color: var(--color-linea);
}


/* nuestro hotel */
/* ==========================================================================
   Nuestro hotel (nuestro_hotel.html): presentación, cifras, espacios
   (tarjetas con foto que llevan a cada página), misión y visión, y cierre
   con reserva sobre la foto del lobby.
   ========================================================================== */

.nh-portada-lema {
	max-width: 30rem;
	text-wrap: balance;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
}

.nh-rotulo {
	margin-bottom: 0.75rem;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.nh-intro {
	padding-block: 4rem 3rem;
}

.nh-lema {
	margin: 0;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
	line-height: 1.2;
}

.nh-intro p:not(.nh-rotulo) {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.8;
}

@media (min-width: 992px) {
	.nh-intro {
		padding-block: 6rem 4rem;
	}

	.nh-intro .col-lg-6 {
		padding-top: 2.25rem;
	}
}

/* Cifras: una franja con líneas finas arriba y abajo, tres columnas */
.nh-cifras-lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--color-linea);
}

.nh-cifras-lista li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1.75rem 0.5rem;
	text-align: center;
}

.nh-cifras-lista li:not(:last-child) {
	border-right: 1px solid var(--color-linea);
}

.nh-cifras-lista strong {
	font-family: var(--font-serif);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	color: var(--color-heading);
}

.nh-cifras-lista span {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text);
}

/* Qué encontrarás */
/* "Qué encontrarás": carrusel como el de rolex.com. Franja oscura con una foto
   difuminada de fondo, tarjetas verticales (2:3) con la foto completa, degradado
   abajo y, centrados, un rótulo y el título. Se desliza con scroll-snap (dedo,
   trackpad o las flechas, que solo aparecen en pantallas grandes); en teléfonos
   la tarjeta siguiente asoma para invitar a deslizar */
.nh-espacios {
	position: relative;
	overflow: hidden;
	margin-block: 2.5rem;
	padding-block: 3.5rem;
	background-color: var(--color-heading);
	color: #fff;
}

.nh-espacios::before {
	content: "";
	position: absolute;
	inset: -40px;
	background: url('./../img/hotel/nh-v-piscina.jpg') center / cover no-repeat;
	background-image: image-set(url('./../img/hotel/nh-v-piscina.webp') type('image/webp'), url('./../img/hotel/nh-v-piscina.jpg') type('image/jpeg'));
	filter: blur(28px) brightness(0.45);
}

.nh-espacios .container {
	position: relative;
}

.nh-espacios-cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.nh-espacios .nh-rotulo,
.nh-espacios h2 {
	color: #fff;
}

.nh-espacios h2 {
	margin-bottom: 0;
}

.nh-carrusel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	column-gap: 0.75rem;
	margin: 0 calc(var(--bs-gutter-x) * -0.5);
	padding: 0 calc(var(--bs-gutter-x) * 0.5) 0.25rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: calc(var(--bs-gutter-x) * 0.5);
	scroll-behavior: smooth;
	scrollbar-width: none;
	list-style: none;
}

.nh-carrusel::-webkit-scrollbar {
	display: none;
}

.nh-carrusel li {
	scroll-snap-align: start;
}

/* Teléfonos: cada tarjeta se centra sola al soltar el dedo (con la anterior y la
   siguiente asomando a los lados) y un deslizamiento avanza una sola tarjeta. La
   lista ocupa todo el ancho de la pantalla, así que tarjetas de 78vw con un
   relleno lateral de 11vw permiten centrar también la primera y la última */
@media (max-width: 575.98px) {
	.nh-carrusel {
		grid-auto-columns: 78vw;
		padding-inline: 11vw;
		scroll-padding-inline: 0;
	}

	.nh-carrusel li {
		scroll-snap-align: center;
		scroll-snap-stop: always;
	}
}

/* desde tablet, sin salirse del contenedor: 2 o 3 tarjetas justas (el % es
   del ancho interior de la lista) */
@media (min-width: 576px) {
	.nh-carrusel {
		margin: 0;
		padding: 0 0 0.25rem;
		scroll-padding-inline: 0;
		grid-auto-columns: calc((100% - 0.75rem) / 2);
	}
}

@media (min-width: 992px) {
	.nh-carrusel {
		grid-auto-columns: calc((100% - 1.5rem) / 3);
	}
}

.nh-tarjeta {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 2 / 3;
	border-radius: var(--radio-flotante);
	background: #3a3a3a;
	color: #fff;
	text-decoration: none;
}

/* las fotos van en <picture> (WebP con JPG de respaldo, 2026-10-09): el envoltorio no
   cuenta para el diseño, así las reglas de "img" siguen igual que antes */
picture {
	display: contents;
}

.nh-tarjeta img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s ease;
}

.nh-tarjeta::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0, 0, 0, 0) 60%);
}

.nh-tarjeta-texto {
	position: absolute;
	left: 1rem;
	right: 1rem;
	bottom: 2rem;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
}

.nh-tarjeta-rotulo {
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
}

.nh-tarjeta-titulo {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	line-height: 1.15;
	color: #fff;
}

a.nh-tarjeta:hover,
a.nh-tarjeta:focus {
	color: #fff;
}

@media (hover: hover) {
	.nh-tarjeta:hover img {
		transform: scale(1.05);
	}
}

.nh-tarjeta:focus-visible {
	outline: 1px solid #fff;
	outline-offset: -6px;
}

/* Flechas: círculos de vidrio como las de los carruseles sobre fotos; solo en
   pantallas grandes (en teléfonos se desliza con el dedo) */
.nh-carrusel-flechas {
	display: none;
	gap: 0.5rem;
}

@media (min-width: 992px) {
	.nh-carrusel-flechas {
		display: flex;
	}
}

.nh-carrusel-flecha {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color .3s ease, opacity .3s ease;
}

.nh-carrusel-flecha::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	background-color: #fff;
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
	transition: background-color .3s ease;
}

.nh-carrusel-anterior::before {
	transform: scaleX(-1);
}

.nh-carrusel-flecha:disabled {
	opacity: 0.35;
}

@media (hover: hover) {
	.nh-carrusel-flecha:not(:disabled):hover {
		background-color: #fff;
	}

	.nh-carrusel-flecha:not(:disabled):hover::before {
		background-color: var(--color-heading);
	}
}

.nh-carrusel-flecha:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.nh-carrusel {
		scroll-behavior: auto;
	}
}

/* Misión y visión */
.nh-proposito {
	padding-block: 3.5rem 4.5rem;
}

.nh-proposito .col-md-6 > p:first-child {
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-linea);
}

.nh-cita {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
	line-height: 1.45;
	color: var(--color-heading);
}

/* Cierre con reserva */
.nh-reserva-fondo {
	padding-block: 5rem;
	background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
		url('./../img/hotel/DSC01504.jpg') center / cover no-repeat;
	text-align: center;
	color: #fff;
}

.nh-reserva .nh-rotulo,
.nh-reserva h2,
.nh-reserva p {
	color: #fff;
}

.nh-reserva h2 {
	margin-bottom: 1rem;
	font-size: clamp(2rem, 1.6rem + 1.8vw, 2.9rem);
}

.nh-reserva-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

@media (prefers-reduced-motion: reduce) {
	.nh-tarjeta img {
		transition: none;
	}
}

@media (max-width:740px) {
	.jarallax {
		min-height: auto !important;
	}

	/* Portadas de las páginas interiores: en teléfono crecen con su contenido
	   (antes tenían altura fija y en contacto.html el formulario quedaba oculto) */
	header:has(> .view.jarallax) {
		height: auto;
	}

	header > .view.jarallax,
	main > .view.jarallax {
		height: auto;
		min-height: 100vh !important;
	}

	header > .view.jarallax > .mask,
	main > .view.jarallax > .mask {
		position: relative;
		min-height: 100vh;
		padding-bottom: 3rem;
	}
}

/* Habitaciones (habitaciones.php, datos de la base): precio bajo la
   descripción y aviso si la base no responde */
.habitacion-precio {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0.6rem;
	margin: 1.5rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--color-linea);
}

.habitacion-precio-monto {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
	line-height: 1.2;
	color: var(--color-heading);
}

.habitacion-precio-nota {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

/* Tarifas por número de personas (Doble, Triple): una fila por ocupación */
.habitacion-tarifas {
	margin: 1rem 0 1.5rem;
	padding: 0;
	list-style: none;
	max-width: 22rem;
}

.habitacion-tarifas li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.45rem 0;
	border-bottom: 1px solid var(--color-linea);
	font-size: 0.9375rem;
	color: var(--color-text);
}

.habitacion-tarifas li span:last-child {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	color: var(--color-heading);
}

/* ==========================================================================
   Contacto por áreas (contacto.html): Lobby · Hotel, Express, Delivery y
   Banquetes, cada una con sus teléfonos y WhatsApp. Una columna en
   teléfono, dos desde tablet.
   ========================================================================== */

.contactos {
	padding-block: 3.5rem 1rem;
}

.contactos-rotulo {
	margin-bottom: 0.5rem;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.contactos h2 {
	margin-bottom: 0.75rem;
}

.contactos-intro {
	max-width: 40rem;
	margin-bottom: 2rem;
}

.contactos-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.contactos-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.5rem;
	}
}

.contacto-area {
	padding: 1.75rem 1.5rem 1.25rem;
	border: 1px solid var(--color-linea);
	background: #fff;
}

.contacto-area-encabezado {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.contacto-area-encabezado > i {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-linea);
	font-size: 1.1rem;
	color: var(--color-heading);
}

.contacto-area h3 {
	margin: 0.1rem 0 0.25rem;
	font-size: 1.5rem;
}

.contacto-area-encabezado p {
	margin: 0;
	font-size: 0.9375rem;
}

.contacto-lineas {
	margin: 0;
	padding: 0;
	list-style: none;
}

.contacto-lineas li {
	border-top: 1px solid var(--color-linea);
}

.contacto-lineas a,
.contacto-lineas li > span {
	display: grid;
	grid-template-columns: 1.5rem 6.5rem 1fr;
	align-items: center;
	gap: 0.5rem;
	min-height: 52px;
	padding: 0.5rem 0;
	color: var(--color-text);
	text-decoration: none;
}

.contacto-lineas i {
	font-size: 1rem;
	color: var(--color-heading);
}

.contacto-tipo {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.contacto-numero {
	min-width: 0;
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--color-heading);
	overflow-wrap: break-word;
}

/* Correo (largo): en teléfono va en su propia línea, debajo de "Correo" */
@media (max-width: 575.98px) {
	.contacto-lineas .largo a {
		grid-template-columns: 1.5rem 1fr;
		row-gap: 0.1rem;
	}

	.contacto-lineas .largo .contacto-numero {
		grid-column: 2;
	}
}

@media (hover: hover) {
	.contacto-lineas a:hover .contacto-numero {
		text-decoration: underline;
		text-underline-offset: 3px;
	}
}

.contacto-lineas a:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 2px;
}

.contacto-lineas .pendiente .contacto-numero {
	font-weight: 400;
	font-style: italic;
	color: var(--color-text);
	opacity: 0.7;
}

/* ==========================================================================
   Reservar (reservar.php + resources/js/reservar.js): asistente de 3 pasos que
   se ven de a uno (pedido del dueño, 2026-10-07), con la guía de los 3 arriba:
   1 habitación, 2 fecha, personas y noches, 3 la reserva, los datos y el botón
   de WhatsApp.
   ========================================================================== */

.reserva {
	padding-block: 3rem 4rem;
}

.reserva-asistente {
	max-width: 960px;
	margin-inline: auto;
}

/* Guía de pasos: círculo con el número y el nombre debajo, unidos por una línea
   fina. Actual: círculo lleno; hecho: contorno carbón (se puede volver a él);
   todavía no disponible: apagado */
.reserva-pasos {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0 0 2.5rem;
	padding: 0 0 1.75rem;
	border-bottom: 1px solid var(--color-linea);
	list-style: none;
}

.reserva-pasos li {
	position: relative;
}

/* línea entre círculos: de la mitad del paso anterior a la mitad de este */
.reserva-pasos li + li::before {
	content: "";
	position: absolute;
	top: 1.1rem;
	right: 50%;
	width: 100%;
	height: 1px;
	background: var(--color-linea);
}

.reserva-pasos-boton {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0 0.25rem;
	border: 0;
	background: none;
	text-align: center;
	color: var(--color-heading);
}

.reserva-pasos-numero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2rem;
	height: 2.2rem;
	border: 1px solid var(--color-heading);
	border-radius: 50%;
	background: var(--color-fondo);
	font-family: var(--font-serif);
	font-size: 1rem;
	line-height: 1;
	transition: background-color .2s ease, color .2s ease;
}

.reserva-pasos-texto {
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1.35;
	text-transform: uppercase;
}

.reserva-pasos-boton[aria-current="step"] .reserva-pasos-numero {
	background: var(--color-heading);
	color: #fff;
}

.reserva-pasos-boton:disabled {
	color: var(--color-suave);
	cursor: default;
}

.reserva-pasos-boton:disabled .reserva-pasos-numero {
	border-color: var(--color-suave);
}

.reserva-pasos-boton.hecho:disabled {
	color: var(--color-heading);
}

.reserva-pasos-boton.hecho:disabled .reserva-pasos-numero {
	border-color: var(--color-heading);
}

/* el foco pasa al título de cada paso al cambiar (lectores de pantalla), sin recuadro */
.reserva-paso h2[tabindex="-1"]:focus {
	outline: none;
}

@media (hover: hover) {
	.reserva-pasos-boton.hecho:hover .reserva-pasos-numero {
		background: var(--color-linea);
	}
}

.reserva-pasos-boton:focus-visible {
	outline: none;
}

.reserva-pasos-boton:focus-visible .reserva-pasos-numero {
	outline: 1px solid var(--color-heading);
	outline-offset: 3px;
}

@media (max-width: 575.98px) {
	.reserva-pasos {
		margin-bottom: 2rem;
		padding-bottom: 1.25rem;
	}

	.reserva-pasos-texto {
		font-size: 0.6875rem;
		letter-spacing: 0.08em;
	}
}

/* Enlaces de texto del asistente ("← Cambiar habitación", "Ver tu reserva →") */
.reserva-enlace {
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.9375rem;
	color: var(--color-heading);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.reserva-volver {
	display: inline-flex;
	gap: 0.4rem;
	margin-bottom: 1.25rem;
	text-decoration: none;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

@media (hover: hover) {
	.reserva-volver:hover {
		text-decoration: underline;
	}
}

.reserva-enlace:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 4px;
}

.reserva-pendiente {
	margin: -0.75rem 0 1.5rem;
}

#paso-1 .reserva-pendiente {
	margin: 1.25rem 0 0;
}

/* Línea con la estadía elegida (pasos 2 y 3): "jue 12 nov al dom 15 nov · 3 noches…" + Cambiar */
.reserva-estadia {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin: -0.5rem 0 1.5rem;
	color: var(--color-heading);
}

/* Paso 1 con una habitación ya elegida (llegó desde su botón "Reservar") */
.reserva-preelegida {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin: -0.5rem 0 1.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-interior);
	background: #fff;
}

.reserva-preelegida strong {
	font-weight: 500;
	color: var(--color-heading);
}

/* Paso 2: ninguna habitación de ese tipo es para esas personas */
.reserva-sin-opciones {
	margin-bottom: 1rem;
	color: var(--color-heading);
}

.reserva-otra {
	width: 100%;
}

.reserva-numero,
.reserva-rotulo {
	margin: 0 0 0.35rem;
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.reserva-paso h2 {
	margin-bottom: 1.5rem;
}

/* Pestañas Ejecutivas / Suites temáticas */
.reserva-tipos {
	display: flex;
	gap: 1.75rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--color-linea);
}

.reserva-tipo {
	margin-bottom: -1px;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.reserva-tipo[aria-pressed="true"] {
	border-bottom-color: var(--color-acento);
	color: var(--color-heading);
}

.reserva-tipo:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 4px;
}

/* Tarjetas de habitación */
.reserva-opciones {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 1rem;
}

.reserva-opcion {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	background: #fff;
	text-align: left;
	color: var(--color-text);
	transition: border-color .2s ease, box-shadow .2s ease;
}

.reserva-opcion img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	background: var(--color-linea);
}

/* habitación todavía sin fotos: el mismo espacio, gris con una cámara */
.reserva-opcion-sinfoto {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 3 / 2;
	background: repeating-linear-gradient(-45deg, #d9d6d1 0 14px, #cfcbc5 14px 28px);
	font-size: 1.6rem;
	color: var(--color-heading);
	opacity: 0.85;
}

.reserva-opcion-texto {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	padding: 0.85rem 1rem 1rem;
}

.reserva-opcion-nombre {
	font-family: var(--font-serif);
	font-size: 1.125rem;
	color: var(--color-heading);
}

.reserva-opcion-precio {
	font-size: 0.9375rem;
	color: var(--color-heading);
}

/* total de la estadía elegida en el paso 1 (2026-11-09) */
.reserva-opcion-total {
	font-size: 0.875rem;
	color: var(--color-heading);
}

.reserva-opcion-total:empty {
	display: none;
}

.reserva-opcion-capacidad {
	margin-top: 0.15rem;
	font-size: 0.8125rem;
}

.reserva-opcion[aria-pressed="true"] {
	border-color: var(--color-acento);
	box-shadow: inset 0 0 0 1px var(--color-acento);
}

@media (hover: hover) {
	.reserva-opcion:hover {
		border-color: var(--color-suave);
	}

	.reserva-opcion[aria-pressed="true"]:hover {
		border-color: var(--color-acento);
	}
}

.reserva-opcion:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 3px;
}

.reserva-opcion.reserva-opcion-no {
	opacity: 0.5;
	cursor: not-allowed;
}

@media (hover: hover) {
	.reserva-opcion.reserva-opcion-no:hover {
		border-color: var(--color-linea);
	}
}

/* Portada baja (reservar.php): en teléfonos y tablets la foto de portada no ocupa
   toda la pantalla, para que la guía y las primeras habitaciones se vean al entrar */
@media (max-width: 991.98px) {
	/* vence a la regla que pone las portadas a pantalla completa en teléfonos */
	header.portada-baja > .view.jarallax,
	header.portada-baja > .view.jarallax > .mask {
		min-height: 0 !important;
		padding-bottom: 0;
	}

	/* el menú lateral es más alto que la portada: que no quede recortado
	   (la foto de jarallax tiene su propio recorte) y que quede por encima */
	header.portada-baja,
	header.portada-baja > .view.jarallax,
	header.portada-baja > .view.jarallax > .mask {
		overflow: visible;
	}

	header.portada-baja {
		position: relative;
		z-index: 1040;
	}

	.portada-baja .portada-baja-texto {
		margin: 0 !important;
		/* abajo deja sitio para "Arma tu reserva" con su flecha */
		padding: 0.25rem 0 5.5rem !important;
	}

	.portada-baja .portada-baja-texto h1 {
		margin-top: 0.75rem !important;
		margin-bottom: 0.35rem;
	}

	.portada-baja .portada-baja-texto p {
		margin-bottom: 0;
	}

	.portada-baja + .reserva {
		padding-top: 2rem;
	}
}

/* Teléfonos y tablets: tarjetas compactas (foto chica a la izquierda) y, en los
   pasos 1 y 2, una barra fija con la reserva y un atajo al paso 3 */
@media (max-width: 991.98px) {
	.reserva-opciones {
		grid-template-columns: 1fr;
		gap: 0.6rem;
	}

	.reserva-opcion {
		flex-direction: row;
		align-items: stretch;
	}

	.reserva-opcion img {
		flex: none;
		width: 104px;
		height: auto;
		min-height: 96px;
		aspect-ratio: auto;
	}

	.reserva-opcion-sinfoto {
		flex: none;
		width: 104px;
		min-height: 96px;
		aspect-ratio: auto;
		font-size: 1.3rem;
	}

	.reserva-opcion-texto {
		justify-content: center;
		padding: 0.7rem 1rem;
	}

	.reserva-opcion-nombre {
		font-size: 1.0625rem;
	}

	.reserva-barra:not([hidden]) {
		position: fixed;
		width: 100%;
		border: 0;
		text-align: left;
		font: inherit;
		z-index: 1030;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--color-linea);
		background: var(--color-fondo);
		box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
		color: var(--color-heading);
		text-decoration: none;
	}

	.reserva-barra-texto {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.reserva-barra-texto strong {
		font-family: var(--font-serif);
		font-weight: 400;
		font-size: 1.0625rem;
	}

	.reserva-barra-accion {
		flex: none;
		padding: 0.6rem 0.9rem;
		border: 1px solid var(--color-heading);
		border-radius: var(--radio-interior);
		font-size: 0.75rem;
		letter-spacing: 0.12em;
		text-transform: uppercase;
	}

	body.con-barra-reserva {
		padding-bottom: 76px;
	}
}

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

/* Paso 1 (2026-11-09): llegada y salida a todo el ancho; debajo, personas y
   habitaciones lado a lado (también en teléfonos); en computadora, los tres en una fila */
.reserva-campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem 2rem;
	max-width: 560px;
	margin-bottom: 1.75rem;
}

.reserva-campos .reserva-fechas {
	grid-column: 1 / -1;
}

@media (max-width: 575.98px) {
	.reserva-campos {
		gap: 1.25rem 1rem;
	}
}

@media (min-width: 992px) {
	.reserva-campos {
		grid-template-columns: minmax(300px, 340px) repeat(2, max-content);
		gap: 1.5rem 2.25rem;
		max-width: none;
	}

	.reserva-campos .reserva-fechas {
		grid-column: auto;
	}

	.reserva-campo .reserva-ayuda {
		max-width: 180px;
	}

	.reserva-campo.reserva-fechas .reserva-ayuda {
		max-width: none;
	}
}

.reserva-campo {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0; /* que la columna no crezca por el contenido (fecha en iPhone) */
}

.reserva-ayuda {
	font-size: 0.8125rem;
	color: var(--color-text);
}

/* Llegada y salida: mismo alto y borde que los contadores (si el calendario no
   carga, son dos campos de fecha del navegador) */
.reserva-fechas input:not(.cur-year) {
	width: 100%;
	max-width: 340px;
	cursor: pointer;
	min-height: 50px;
	padding: 0.65rem 0.9rem !important;
	border: 1px solid var(--color-linea) !important;
	border-radius: var(--radio-interior);
	background: #fff;
	font-size: 1rem;
	color: var(--color-heading);
}

/* Safari de iPhone/iPad dibuja el campo de fecha con su propio ancho mínimo e ignora
   width: 100%, así que se salía de su columna y chocaba con "Noches" (2026-10-11).
   Solo en iOS (-webkit-touch-callout): sin el estilo nativo, el campo respeta su
   columna y la fecha queda alineada a la izquierda, como en los demás navegadores */
@supports (-webkit-touch-callout: none) {
	.reserva-fechas input:not(.cur-year) {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		min-width: 0;
		max-width: 100%;
		box-sizing: border-box;
		line-height: 1.4;
	}

	.reserva-fechas input:not(.cur-year)::-webkit-date-and-time-value {
		min-height: 1.4em;
		text-align: left;
	}
}

/* el ícono del calendario (abre el selector de fecha) con la manito */
.reserva-fechas input:not(.cur-year)::-webkit-calendar-picker-indicator {
	cursor: pointer;
}

.reserva-fechas input:not(.cur-year):focus {
	outline: none;
	border-color: var(--color-heading) !important;
	box-shadow: 0 0 0 3px var(--color-linea);
}

.reserva-fechas input:not(.cur-year)[aria-invalid="true"] {
	border-color: var(--color-heading) !important;
}

.contador {
	display: inline-flex;
	align-items: stretch;
	width: max-content;
	overflow: hidden;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-interior);
	background: #fff;
}

.contador button {
	width: 48px;
	height: 48px;
	border: 0;
	background: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-heading);
}

.contador button:disabled {
	color: var(--color-suave);
}

@media (max-width: 359.98px) {
	.contador button {
		width: 40px;
	}

	.reserva-fechas input:not(.cur-year) {
		padding-inline: 0.6rem !important;
	}
}

@media (hover: hover) {
	.contador button:not(:disabled):hover {
		background: var(--color-fondo);
	}
}

.contador button:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: -4px;
}

.contador output {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	border-inline: 1px solid var(--color-linea);
	font-family: var(--font-serif);
	font-size: 1.25rem;
	color: var(--color-heading);
}

/* Calendario de la reserva (flatpickr 2026-11-09, con static: dentro de .reserva-fechas):
   monocromo del sitio; .reserva-fechas delante para ganarle al CSS de la librería,
   que se carga después */
.reserva-fechas .flatpickr-wrapper {
	display: block;
	width: 100%;
	max-width: 340px;
}

.reserva-fechas .flatpickr-calendar {
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	box-shadow: 0 12px 32px rgba(43, 43, 43, 0.12);
	font-family: var(--font-sans);
}

.reserva-fechas .flatpickr-calendar.static {
	top: calc(100% + 6px);
}

.reserva-fechas .flatpickr-calendar::before,
.reserva-fechas .flatpickr-calendar::after {
	display: none;
}

.reserva-fechas .flatpickr-months .flatpickr-month,
.reserva-fechas .flatpickr-current-month .flatpickr-monthDropdown-months,
.reserva-fechas .flatpickr-current-month input.cur-year {
	font-family: var(--font-serif);
	font-weight: 400;
	color: var(--color-heading);
	fill: var(--color-heading);
}

.reserva-fechas .flatpickr-current-month span.cur-month {
	font-weight: 400;
}

.reserva-fechas .flatpickr-months .flatpickr-prev-month,
.reserva-fechas .flatpickr-months .flatpickr-next-month {
	color: var(--color-heading);
	fill: var(--color-heading);
}

.reserva-fechas .flatpickr-months .flatpickr-prev-month:hover svg,
.reserva-fechas .flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--color-text);
}

.reserva-fechas span.flatpickr-weekday {
	font-weight: 500;
	color: var(--color-text);
}

.reserva-fechas .flatpickr-day {
	border-radius: var(--radio-interior);
	color: var(--color-heading);
}

.reserva-fechas .flatpickr-day.today {
	border-color: var(--color-suave);
}

.reserva-fechas .flatpickr-day:hover,
.reserva-fechas .flatpickr-day:focus,
.reserva-fechas .flatpickr-day.today:hover {
	border-color: #f4f0ea;
	background: #f4f0ea;
	color: var(--color-heading);
}

.reserva-fechas .flatpickr-day.inRange,
.reserva-fechas .flatpickr-day.inRange:hover {
	border-color: #ebe5dd;
	background: #ebe5dd;
	box-shadow: -5px 0 0 #ebe5dd, 5px 0 0 #ebe5dd;
}

.reserva-fechas .flatpickr-day.selected,
.reserva-fechas .flatpickr-day.startRange,
.reserva-fechas .flatpickr-day.endRange,
.reserva-fechas .flatpickr-day.selected:hover,
.reserva-fechas .flatpickr-day.startRange:hover,
.reserva-fechas .flatpickr-day.endRange:hover {
	border-color: var(--color-acento);
	background: var(--color-acento);
	color: #fff;
}

.reserva-fechas .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.reserva-fechas .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.reserva-fechas .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
	box-shadow: -10px 0 0 var(--color-acento);
}

.reserva-fechas .flatpickr-day.flatpickr-disabled,
.reserva-fechas .flatpickr-day.flatpickr-disabled:hover,
.reserva-fechas .flatpickr-day.prevMonthDay,
.reserva-fechas .flatpickr-day.nextMonthDay {
	color: var(--color-suave);
}

.reserva-fechas .flatpickr-day.flatpickr-disabled:hover {
	border-color: transparent;
	background: none;
}

/* Resumen */
.reserva-resumen {
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	background: #fff;
}

@media (min-width: 992px) {
	.reserva-resumen {
		padding: 2rem;
	}
}

.reserva-vacia {
	margin-bottom: 1.5rem;
	font-size: 0.9375rem;
	font-style: italic;
}

.reserva-lista {
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}

.reserva-lista li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--color-linea);
}

.reserva-lista li:first-child {
	border-top: 1px solid var(--color-linea);
}

.reserva-lista strong {
	display: block;
	font-weight: 500;
	color: var(--color-heading);
}

.reserva-lista li div span {
	font-size: 0.8125rem;
}

.reserva-lista-precio {
	font-family: var(--font-serif);
	color: var(--color-heading);
}

.reserva-quitar {
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-interior);
	background: none;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--color-text);
}

@media (hover: hover) {
	.reserva-quitar:hover {
		border-color: var(--color-heading);
		color: var(--color-heading);
	}
}

.reserva-total {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
}

.reserva-total strong {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	font-weight: 400;
	line-height: 1.2;
	color: var(--color-heading);
}

.reserva-total-nota {
	font-size: 0.8125rem;
}

.reserva-datos {
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	background: #fff;
}

@media (min-width: 992px) {
	.reserva-datos {
		padding: 2rem;
	}
}

.reserva-datos h3 {
	margin-bottom: 1rem;
}

.reserva-dato {
	margin-bottom: 1.25rem;
}

.reserva-dato label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--color-heading);
}

/* Campos con borde completo: sobre el blanco del resumen una sola línea
   inferior casi no se distinguía. Los !important vencen a la regla antigua
   "input[type=text] { border: none !important }" del formulario de contacto */
.reserva-dato input,
.reserva-dato select {
	width: 100%;
	min-height: 50px;
	padding: 0.65rem 0.9rem !important;
	border: 1px solid var(--color-suave) !important;
	border-radius: var(--radio-interior);
	background-color: var(--color-fondo);
	font-size: 1rem;
	color: var(--color-heading);
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.reserva-dato select {
	padding-right: 2rem;
}

.reserva-dato input::placeholder {
	color: var(--color-text);
	opacity: 0.55;
}

.reserva-dato input:hover,
.reserva-dato select:hover {
	border-color: var(--color-text) !important;
}

.reserva-dato input:focus,
.reserva-dato select:focus {
	outline: none;
	border-color: var(--color-heading) !important;
	background-color: #fff;
	box-shadow: 0 0 0 3px var(--color-linea);
}

.reserva-dato .reserva-ayuda {
	display: block;
	margin-top: 0.35rem;
}

.reserva-cedula {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: 0.6rem;
}

/* campo que falta o está mal (el detalle lo dice el aviso flotante) */
.reserva-dato input[aria-invalid="true"] {
	border-color: var(--color-heading) !important;
	box-shadow: inset 0 0 0 1px var(--color-heading);
}

.reserva-whatsapp {
	width: 100%;
}

.reserva-whatsapp i {
	margin-right: 0.6rem;
	font-size: 1.1rem;
	letter-spacing: 0;
}

.reserva-nota {
	margin: 1rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
	.reserva-opcion {
		transition: none;
	}
}

.habitaciones-aviso p {
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   Restaurante y terraza (restaurant_y_terraza.html): franja de Delivery y
   cierre "Reserva tu mesa" (reutiliza .nh-reserva con la foto del comedor)
   ========================================================================== */

.rt-delivery {
	padding-block: 2rem 4.5rem;
}

.rt-delivery-caja {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 3rem;
	padding-block: 2.5rem;
	border-block: 1px solid var(--color-linea);
}

.rt-delivery-caja h2 {
	margin-bottom: 0.5rem;
}

.rt-delivery-caja p:last-child {
	margin: 0;
}

.rt-delivery-botones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.rt-delivery-botones .btn i {
	margin-right: 0.6rem;
	font-size: 1rem;
	letter-spacing: 0;
}

.nh-reserva-fondo.rt-reserva-fondo {
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
		url('./../img/page/cover_images/DSC01642.jpg');
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), image-set(url('./../img/page/cover_images/DSC01642.webp') type('image/webp'), url('./../img/page/cover_images/DSC01642.jpg') type('image/jpeg'));
}

/* ==========================================================================
   Reuniones y eventos (reuniones_y_eventos.html): datos del Salón Ávila
   (reutiliza .nh-cifras en 4 columnas, también en teléfono) y cierre
   "Organiza tu evento" con banquetes sobre la foto del salón
   ========================================================================== */

.ev-cifras {
	padding-block: 1rem 4.5rem;
}

/* las 4 cifras en una sola fila también en teléfonos (antes 2 × 2): cada
   columna crece según su palabra más larga ("estacionamiento"), y en pantallas
   chicas los números y rótulos se achican */
.ev-cifras .nh-cifras-lista {
	grid-template-columns: repeat(4, minmax(min-content, 1fr));
}

@media (max-width: 767.98px) {
	.ev-cifras .nh-cifras-lista li {
		padding: 1.25rem 0.3rem;
	}

	.ev-cifras .nh-cifras-lista strong {
		font-size: clamp(1.4rem, 7vw, 2rem);
	}

	.ev-cifras .nh-cifras-lista span {
		font-size: clamp(0.5625rem, 2.6vw, 0.75rem);
		letter-spacing: 0.06em;
		line-height: 1.35;
	}
}

.ev-cifras .nh-cifras-lista strong i {
	font-size: 0.8em;
}

.nh-reserva-fondo.ev-reserva-fondo {
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
		url('./../img/page/cover_images/DSC01790.jpg');
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), image-set(url('./../img/page/cover_images/DSC01790.webp') type('image/webp'), url('./../img/page/cover_images/DSC01790.jpg') type('image/jpeg'));
}

/* Piscina (piscina.html): cierre "Reserva la piscina" con banquetes sobre la foto de la piscina */
/* foto distinta a la portada y al carrusel (las tres eran la misma vista de la
   piscina y en teléfonos se veían repetidas una tras otra): el brindis junto a la
   piscina, a tono con "celebraciones" */
.nh-reserva-fondo.pi-reserva-fondo {
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
		url('./../img/piscina/DSC01582.jpg');
	background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), image-set(url('./../img/piscina/DSC01582.webp') type('image/webp'), url('./../img/piscina/DSC01582.jpg') type('image/jpeg'));
	background-position: center 60%;
}

/* en teléfonos, aire entre la última foto de la página y la franja de cierre */
@media (max-width: 991.98px) {
	.container + .nh-reserva {
		margin-top: 3rem;
	}
}

/* ==========================================================================
   Servicios (servicios.html): franja "Incluido en tu tarifa" y tres grupos
   de servicios con íconos finos. Minimalista: sin tarjetas, solo líneas.
   El cierre reutiliza .nh-reserva de "Nuestro hotel".
   ========================================================================== */

.sv-rotulo {
	margin-bottom: 1rem;
	font-family: var(--font-sans);
	font-size: var(--fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text);
}

.sv-incluido {
	padding-block: 4rem 0;
	text-align: center;
}

.sv-incluido-lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0;
	margin: 0;
	padding: 1.5rem 0;
	list-style: none;
	border-block: 1px solid var(--color-linea);
}

.sv-incluido-lista li {
	padding-inline: 1.25rem;
	font-family: var(--font-serif);
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	color: var(--color-heading);
}

.sv-incluido-lista li:not(:last-child) {
	border-right: 1px solid var(--color-linea);
}

/* en teléfonos y tablets pequeñas, las 4 cosas incluidas en una sola fila de 4
   columnas (como los grupos de abajo; antes iban una debajo de la otra): cada
   columna mide lo que su palabra, sin cortarla; solo "Acceso a la piscina" pasa
   a dos renglones. La letra se achica con el ancho de la pantalla */
@media (max-width: 767.98px) {
	.sv-incluido-lista {
		display: grid;
		grid-template-columns: repeat(4, auto);
		justify-content: center;
		align-items: center;
		gap: 0;
		padding: 1.25rem 0;
	}

	.sv-incluido-lista li {
		padding-inline: clamp(0.4rem, 2.2vw, 1rem);
		font-size: clamp(0.8rem, 3.9vw, 1.2rem);
		line-height: 1.25;
	}

	/* ninguna palabra se corta (Wi-Fi tampoco en el guion); solo la piscina baja de renglón */
	.sv-incluido-lista li:not(:nth-child(2)) {
		white-space: nowrap;
	}
}

.sv-grupos {
	padding-block: 4rem 5rem;
}

.sv-grupo-titulo {
	margin-bottom: 1.25rem;
	font-size: 1.5rem;
}

.sv-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sv-lista li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--color-linea);
	font-size: 1.0625rem;
	color: var(--color-text);
}

.sv-lista li:last-child {
	border-bottom: 1px solid var(--color-linea);
}

.sv-lista i {
	flex: none;
	width: 1.5rem;
	text-align: center;
	font-size: 1.05rem;
	color: var(--color-heading);
}

/* En teléfonos y tablets los 3 grupos van en 3 columnas angostas (pedido del
   dueño, 2026-10-06): ícono arriba, texto centrado y más pequeño. Con subgrid
   cada fila (título y los 4 servicios) mide lo mismo en las 3 columnas, así las
   líneas quedan parejas aunque un texto ocupe más renglones; sin subgrid cada
   columna simplemente toma su propio alto */
@media (max-width: 991.98px) {
	.sv-grupos .row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 0.75rem;
		row-gap: 0;
		margin: 0;
	}

	.sv-grupos .row > * {
		display: grid;
		grid-row: span 5;
		grid-template-rows: subgrid;
		width: auto;
		margin: 0;
		padding: 0;
	}

	.sv-grupo-titulo {
		align-self: end;
		margin-bottom: 0.75rem;
		font-size: 1.05rem;
		text-align: center;
	}

	.sv-lista {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
	}

	.sv-lista li {
		flex-direction: column;
		justify-content: flex-start;
		gap: 0.5rem;
		padding: 0.85rem 0.1rem;
		font-size: 0.8125rem;
		line-height: 1.3;
		text-align: center;
		hyphens: auto;
		overflow-wrap: break-word;
	}

	.sv-lista i {
		width: auto;
	}
}



/* carousel */
.carouselAbsolute {
	right: 0;
	top: -150px;
}

/* Fotos de las habitaciones en marco 4:3: muchas son verticales (teléfono) y
   en 3:2 perdían la mitad del alto; las horizontales 3:2 pierden solo un poco
   de los lados */
.carousel-habitacion .carousel-item img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Inicio: la foto de la piscina junto a "Bienvenidos" con las esquinas suaves de
   las tarjetas (2026-10-08) */
#bienvenidos .view.overlay {
	overflow: hidden;
	border-radius: var(--radio-flotante);
}

/* menos vertical (4:5 en vez de la foto 3:4) y nunca más alta que la pantalla bajo
   la barra, para que se vea entera sin deslizar (2026-11-08, pedido del dueño);
   el recorte quita sobre todo cielo: la piscina y El Ávila se mantienen */
#bienvenidos .view.overlay img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	/* 4.5rem = el margen de la sección sobre la foto (3rem, al llegar con "Descubre más") + aire abajo */
	max-height: calc(100svh - var(--alto-barra) - 4.5rem);
	object-fit: cover;
	object-position: 50% 70%;
}

/* Habitación en construcción (room.under_construction, 2026-10-15): en lugar del precio
   y del botón de reservar */
.habitacion-proximamente {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 1.25rem 0 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--color-linea);
	font-size: 0.9375rem;
	color: var(--color-text);
}

.habitacion-proximamente span {
	padding: 0.3rem 0.65rem;
	border: 1px solid var(--color-heading);
	border-radius: var(--radio-interior);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-heading);
}

/* En lugar de las fotos, mientras está en construcción y no tiene fotos: recuadro gris
   con rayas diagonales suaves (como una cinta de obra, en grises) y un casco */
.habitacion-obra {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.9rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
		repeating-linear-gradient(-45deg, #d9d6d1 0 22px, #cfcbc5 22px 44px);
	color: var(--color-heading);
}

.habitacion-obra i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5.5rem;
	height: 5.5rem;
	border: 1px solid rgba(43, 43, 43, 0.25);
	border-radius: 50%;
	background: rgba(250, 248, 245, 0.85);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	font-size: 2.3rem;
}

.habitacion-obra span {
	padding: 0.35rem 0.8rem;
	border-radius: var(--radio-interior);
	background: rgba(250, 248, 245, 0.85);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* mismas esquinas que las fotos dentro de las tarjetas */
@media (min-width: 992px) {
	.habitaciones-tarjetas .habitacion-obra {
		border-radius: var(--radio-interior);
	}
}

/* Lo que incluye una habitación (Netflix, Alexa), debajo de su nombre en las tarjetas y en
   Reservar (2026-10-13): los logos a color del PDF de precios del hotel (el dueño los
   prefirió a unas etiquetas en carbón). Misma altura visual para los dos */
.hab-incluye {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem;
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.hab-incluye li,
.hab-incluye span {
	display: inline-flex;
	align-items: center;
}

.hab-incluye img {
	display: block;
	width: auto;
	height: 15px;
}

/* el de Alexa tiene la sonrisa debajo: un poco más alto para que la palabra mida igual */
.hab-incluye-alexa img {
	height: 21px;
}

/* en Reservar, dentro de las tarjetas compactas y del paso 2 */
.reserva-opcion .hab-incluye,
#detalle-extras .hab-incluye {
	gap: 0.6rem;
	margin: 0.4rem 0 0;
}

/* la regla de la foto de la tarjeta (.reserva-opcion img) no aplica a los logos */
.reserva-opcion .hab-incluye img,
#detalle-extras .hab-incluye img {
	flex: none;
	width: auto;
	min-height: 0;
	height: 12px;
	aspect-ratio: auto;
	object-fit: contain;
	background: none;
}

.reserva-opcion .hab-incluye-alexa img,
#detalle-extras .hab-incluye-alexa img {
	height: 17px;
}

/* Galerías en tarjeta (piscina, restaurante y terraza, reuniones y eventos; 2026-10-08): el texto y el carrusel
   dentro de una tarjeta blanca como las de habitaciones (borde fino, esquinas
   --radio-flotante; la foto con --radio-interior en computadora). En teléfonos la
   foto va arriba y toca los bordes de la tarjeta */
.galeria-tarjeta {
	overflow: hidden;
	margin: 2.5rem 0 1rem;
	padding: 0 0 1.25rem;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	background-color: #fff;
}

.galeria-tarjeta > [class*="col-lg"]:has(.carousel) {
	padding-inline: 0;
}

.galeria-tarjeta > [class*="col-lg"]:not(:has(.carousel)) {
	padding-inline: 1.25rem;
}

@media (min-width: 992px) {
	.galeria-tarjeta {
		max-width: 960px;
		margin: 4rem auto 2rem;
		padding: 1.5rem 1rem;
	}

	.galeria-tarjeta > [class*="col-lg"]:has(.carousel) {
		padding-inline: 15px;
	}

	.galeria-tarjeta > [class*="col-lg"]:not(:has(.carousel)) {
		padding-inline: 15px;
	}

	.galeria-tarjeta .carousel-galeria {
		overflow: hidden;
		border-radius: var(--radio-interior);
	}
}

/* Prototipo "según las fotos" (room_block(..., true)): cada habitación usa
   el formato de sus fotos. Vertical: marco 4:5 en una columna angosta;
   horizontal: el 4:3 de arriba en una columna ancha. En teléfonos, foto y
   debajo el texto, con una línea fina entre habitaciones */
.carousel-vertical .carousel-item img {
	aspect-ratio: 4 / 5;
}

.habitacion-bloque {
	padding-block: 2.5rem;
}

/* el texto alineado con el borde de la foto */
.habitacion-bloque .container {
	padding-inline: 0;
}

/* en teléfonos, línea entre habitaciones del ancho de las fotos (la fila tiene
   márgenes negativos, por eso no sirve un border-top en la fila) */
@media (max-width: 991.98px) {
	.habitacion-bloque + .habitacion-bloque {
		padding-top: 0;
	}

	.habitacion-bloque + .habitacion-bloque::before {
		content: "";
		order: -2; /* antes de la foto, que lleva order-first */
		width: calc(100% - var(--bs-gutter-x));
		margin: 0 auto 2.5rem;
		border-top: 1px solid var(--color-linea);
	}
}

@media (min-width: 992px) {
	.habitacion-bloque {
		padding-block: 4.5rem;
	}
}

hr {
	transition: ease 0.5s;
}

.sidenav {
	transition: ease 0.5s !important;
}

@media (max-width: 1200px) {
	.carouselAbsolute {
		top: -100px;
	}
}

@media (max-width: 992px) {
	.carouselAbsolute {
		position: initial !important;
	}
}

/* ==========================================================================
   Barra superior (como rolex.com; en todas las páginas, 2026-10-03)
   El logo a color (a la izquierda; se probó centrado y el dueño lo prefirió a
   la izquierda) y el botón del menú lateral (a la derecha, como siempre) van en
   una barra crema fija arriba, fuera de la foto de portada. El menú lateral es
   el mismo de siempre.
   ========================================================================== */

:root {
	--alto-barra: 64px;
}

@media (min-width: 768px) {
	:root {
		--alto-barra: 76px;
	}
}

.barra-superior {
	position: sticky;
	top: 0;
	z-index: 1050;
	background-color: var(--color-fondo);
	border-bottom: 1px solid var(--color-linea);
}

.barra-superior .navbar {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	min-height: var(--alto-barra);
	padding: 0;
}

/* el botón siempre a la derecha (el logo va centrado y fuera del flujo) */
.barra-superior .navbar-nav {
	margin: 0 0 0 auto !important;
}

.barra-superior .navbar-toggler {
	margin-right: -0.5rem !important;
	border: 0;
}

.barra-superior .navbar-toggler:focus {
	box-shadow: none;
}

.barra-superior .navbar-toggler:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 2px;
}

/* rayitas del botón en carbón (sobre la foto eran blancas) */
.barra-superior .toggle-btn {
	height: 2px;
	background-color: var(--color-heading);
}

.barra-superior .toggle-btn:before {
	height: 2px;
	box-shadow: 0 -0.55rem 0 0 var(--color-heading);
}

.barra-superior .toggle-btn:after {
	height: 2px;
	box-shadow: 0 0.55rem 0 0 var(--color-heading);
}

.barra-superior .active .toggle-btn {
	background-color: transparent;
}

.barra-logo {
	margin: 0;
	padding: 0;
}

/* logoOriginal.png tiene margen transparente (el dibujo es ~65% del alto) */
.barra-superior .navbar .navbar-brand img {
	display: block;
	height: 56px !important;
	width: auto;
}

@media (min-width: 768px) {
	.barra-superior .navbar .navbar-brand img {
		height: 66px !important;
	}
}

/* "Reservar" en la barra, a la izquierda del botón del menú: el mismo botón de
   contorno del sitio, más bajo y compacto (sin la flecha en teléfonos) */
.barra-reservar {
	margin: 0 1rem 0 auto;
	min-height: 40px;
	padding: 0.55rem 1.1rem;
	font-size: 0.75rem;
	line-height: 1.2;
	white-space: nowrap;
}

.barra-reservar + .navbar-nav {
	margin-left: 0 !important;
}

@media (max-width: 575.98px) {
	.barra-reservar {
		margin-right: 0.75rem;
		padding: 0.5rem 0.85rem;
	}

	.barra-reservar::after {
		display: none;
	}
}

/* el panel se abre bajo la barra, alineado con el botón (a la derecha); "body"
   le gana a los topes de altura pensados para cuando el panel vivía en la portada */
body .barra-superior #mySidenav.sidenav {
	top: calc(100% + 8px);
	left: auto;
	right: 0;
	max-height: min(calc(100vh - var(--alto-barra) - 24px), 640px);
	max-height: min(calc(100svh - var(--alto-barra) - 24px), 640px);
}

/* la portada ocupa la pantalla menos la barra (contacto.html no tiene <header>;
   el inicio usa el video) */
.barra-superior + header > .view.jarallax,
.barra-superior + header > .view.jarallax > .mask,
.barra-superior + .view.jarallax,
.barra-superior + .view.jarallax > .mask {
	min-height: calc(100vh - var(--alto-barra)) !important;
	min-height: calc(100svh - var(--alto-barra)) !important;
}

.main-index .barra-superior + header,
.main-index .barra-superior + header .view.portada-video {
	height: calc(100vh - var(--alto-barra));
	height: calc(100svh - var(--alto-barra));
}

/* Portada media (2026-10-08, todas las páginas menos el inicio): la foto ocupa ~60 % de
   la pantalla y abajo se asoma el contenido, para que se entienda que hay que
   bajar (a pantalla completa la gente no se daba cuenta). Vence a las reglas de
   arriba y a las de teléfono ("header > .view.jarallax" a 100vh) */
.barra-superior + header.portada-media,
.barra-superior + header.portada-media > .view.jarallax {
	height: auto;
}

.barra-superior + header.portada-media > .view.jarallax,
.barra-superior + header.portada-media > .view.jarallax > .mask,
.barra-superior + .view.jarallax.portada-media,
.barra-superior + .view.jarallax.portada-media > .mask {
	min-height: clamp(360px, 60vh, 620px) !important;
	min-height: clamp(360px, 60svh, 620px) !important;
}

/* la capa con el texto crece con su contenido (botones incluidos) y siempre deja
   abajo el sitio de "Descubre más": así nunca se encima con el texto o el botón */
.barra-superior + header.portada-media > .view.jarallax > .mask,
.barra-superior + .view.jarallax.portada-media > .mask {
	position: relative;
	padding-bottom: 6rem;
}

/* el texto más arriba (los py-5 my-5 de la portada eran para la pantalla completa) */
.portada-media .mask .py-5.my-5 {
	margin-block: 1.5rem !important;
	padding-block: 1.5rem 3.5rem !important;
}

/* los enlaces a una sección (#bienvenidos, #Doble, #reserva-resumen…) no
   quedan tapados por la barra fija */
html {
	scroll-padding-top: var(--alto-barra);
}

.barra-superior + header .container > .row:first-child {
	padding-top: 2rem;
}

/* ==========================================================================
   Suites temáticas en tarjetas (express/suites.php, .habitaciones-tarjetas)
   Cada habitación va en una tarjeta blanca con borde fino que encierra sus
   fotos y toda su información; conserva el bloque alto o ancho según sus
   fotos (room_has_vertical_photos). Esquinas levemente redondeadas (pedido del
   dueño): la tarjeta con --radio-flotante y, en computadora, la foto interior
   con --radio-interior.
   ========================================================================== */

.habitaciones-tarjetas {
	padding-block: 2rem 1rem;
}

.habitaciones-tarjetas .habitacion-bloque {
	overflow: hidden; /* la foto de arriba (en teléfonos) sigue la esquina redondeada */
	margin: 0 0 1.25rem;
	padding: 0.75rem 0.25rem 1.5rem;
	border: 1px solid var(--color-linea);
	border-radius: var(--radio-flotante);
	background-color: #fff;
}

/* entre tarjetas ya no hace falta la línea separadora de los teléfonos */
.habitaciones-tarjetas .habitacion-bloque + .habitacion-bloque {
	padding-top: 0.75rem;
}

.habitaciones-tarjetas .habitacion-bloque + .habitacion-bloque::before {
	content: none;
}

/* la foto toca el borde de arriba y los lados de la tarjeta en teléfonos */
@media (max-width: 991.98px) {
	.habitaciones-tarjetas .habitacion-bloque,
	.habitaciones-tarjetas .habitacion-bloque + .habitacion-bloque {
		padding: 0 0 1.5rem;
	}

	.habitaciones-tarjetas .habitacion-bloque > [class*="col-lg"]:has(.carousel),
	.habitaciones-tarjetas .habitacion-bloque > [class*="col-lg"]:has(.habitacion-obra) {
		padding-inline: 0;
	}

	.habitaciones-tarjetas .habitacion-bloque > [class*="col-lg"]:not(:has(.carousel)):not(:has(.habitacion-obra)) {
		padding-inline: 1.25rem;
	}
}

@media (min-width: 992px) {
	.habitaciones-tarjetas {
		padding-block: 3.5rem 1.5rem;
	}

	.habitaciones-tarjetas .habitacion-bloque,
	.habitaciones-tarjetas .habitacion-bloque + .habitacion-bloque {
		margin-bottom: 2rem;
		padding: 2rem 1.25rem;
	}

	.habitaciones-tarjetas .carousel-habitacion {
		overflow: hidden;
		border-radius: var(--radio-interior);
	}
}

/* Tarjetas un poco más pequeñas (pedido del dueño): en computadora no ocupan todo
   el ancho del contenedor sino 960px centrados, con menos relleno; en teléfonos
   la foto vertical se acorta a 5:5.5 (antes 4:5) y el texto tiene menos aire */
@media (min-width: 992px) {
	.habitaciones-tarjetas .habitacion-bloque,
	.habitaciones-tarjetas .habitacion-bloque + .habitacion-bloque {
		max-width: 960px;
		margin-inline: auto;
		padding: 1.5rem 1rem;
	}
}

@media (max-width: 991.98px) {
	.habitaciones-tarjetas .carousel-vertical .carousel-item img {
		aspect-ratio: 10 / 11;
	}

	.habitaciones-tarjetas .habitacion-bloque,
	.habitaciones-tarjetas .habitacion-bloque + .habitacion-bloque {
		padding-bottom: 1rem;
	}

	.habitaciones-tarjetas .habitacion-bloque .col-12.my-4 {
		margin-block: 1.25rem 0.5rem !important;
	}
}

/* "Descripción" desplegable en las tarjetas de habitaciones (solo teléfonos; en
   computadora la descripción y los precios por personas se ven siempre, como en
   las tarjetas altas): rótulo con un chevron que gira */
.habitacion-desc-boton {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-height: 44px;
	margin: 0 0 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-heading);
}

.habitacion-desc-boton::after {
	content: "";
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
	transform: rotate(90deg);
	transition: transform .3s ease;
}

.habitacion-desc-boton[aria-expanded="true"]::after {
	transform: rotate(-90deg);
}

.habitacion-desc-boton:focus-visible {
	outline: 1px solid var(--color-heading);
	outline-offset: 4px;
}

.habitacion-desc p {
	margin-top: 0.25rem !important; /* las ejecutivas traen mt-4 */
	margin-bottom: 0.5rem;
}

@media (max-width: 991.98px) {
	.habitaciones-tarjetas h2 {
		margin-bottom: 0.75rem !important;
	}

	/* con la descripción cerrada, la línea del precio va justo debajo */
	.habitaciones-tarjetas .habitacion-precio {
		margin-top: 0.5rem;
	}
}

/* ==========================================================================
   Visor de fotos de las habitaciones (utility.js): manito sobre las fotos y,
   al hacer clic, la foto en grande sobre fondo oscuro en la misma página
   ========================================================================== */

.carousel-habitacion .carousel-item img,
.carousel-galeria .carousel-item img {
	cursor: pointer;
}

.carousel-habitacion .carousel-item img:focus-visible,
.carousel-galeria .carousel-item img:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -6px;
}

html.visor-abierto {
	overflow: hidden;
}

.visor-fotos {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc(3.5rem + env(safe-area-inset-top, 0px)) 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
	background-color: rgba(20, 20, 20, 0.94);
	opacity: 0;
	transition: opacity .25s ease;
}

.visor-fotos.visible {
	opacity: 1;
}

.visor-figura {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	width: 100%;
	height: 100%;
	margin: 0;
}

.visor-figura img {
	max-width: 100%;
	max-height: calc(100% - 2.5rem);
	object-fit: contain;
	border-radius: var(--radio-interior);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.visor-figura figcaption {
	max-width: 46rem;
	text-align: center;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.85);
}

.visor-cerrar,
.visor-flecha {
	position: absolute;
	z-index: 1;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	color: #fff;
	transition: background-color .3s ease, color .3s ease;
}

.visor-cerrar {
	top: calc(0.75rem + env(safe-area-inset-top, 0px));
	right: 0.75rem;
}

/* X dibujada con dos líneas (el carácter × de la fuente no quedaba centrado) */
.visor-cerrar::before,
.visor-cerrar::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 1.5px;
	background-color: currentColor;
	border-radius: 1px;
}

.visor-cerrar::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.visor-cerrar::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.visor-flecha {
	top: 50%;
	transform: translateY(-50%);
}

.visor-anterior {
	left: 0.75rem;
}

.visor-siguiente {
	right: 0.75rem;
}

.visor-flecha::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: var(--chevron) center / contain no-repeat;
	mask: var(--chevron) center / contain no-repeat;
}

.visor-anterior::before {
	transform: scaleX(-1);
}

@media (hover: hover) {
	.visor-cerrar:hover,
	.visor-flecha:hover {
		background-color: #fff;
		color: var(--color-heading);
	}
}

.visor-cerrar:focus-visible,
.visor-flecha:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 3px;
}

/* en teléfonos las flechas van abajo, para no tapar la foto */
@media (max-width: 767.98px) {
	.visor-flecha {
		top: auto;
		bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
		transform: none;
	}

	.visor-fotos {
		padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
	}
}

@media (min-width: 768px) {
	.visor-fotos {
		padding-inline: 5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.visor-fotos {
		transition: none;
	}
}

/* Reservar: en teléfonos la portada sigue siendo baja también con la barra
   superior (la regla de la barra, "pantalla menos la barra", le ganaba) */
@media (max-width: 991.98px) {
	.barra-superior + header.portada-baja > .view.jarallax,
	.barra-superior + header.portada-baja > .view.jarallax > .mask {
		min-height: 0 !important;
	}
}

/* ==========================================================================
   Página de error 404 (404.shtml): barra con el logo, mensaje amable y
   accesos a inicio, reservar y las secciones principales
   ========================================================================== */

.error-404 {
	min-height: 100vh;
	min-height: 100svh;
	background-color: var(--color-fondo);
}

.error-404-inicio {
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-heading);
	text-decoration: none;
}

.error-404-inicio:hover {
	color: var(--color-heading);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.error-404-contenido {
	padding-block: 4rem 3rem;
	text-align: center;
}

@media (min-width: 992px) {
	.error-404-contenido {
		padding-block: 7rem 5rem;
	}
}

.error-404-contenido h1 {
	margin-bottom: 1rem;
	font-family: var(--font-serif);
	font-size: var(--fs-h1);
	color: var(--color-heading);
}

.error-404-contenido > .container > p {
	max-width: 34rem;
	margin-inline: auto;
}

.error-404-botones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-top: 2rem;
}

.error-404-enlaces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.5rem;
	margin: 2.5rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--color-linea);
	list-style: none;
}

.error-404-enlaces a,
.error-404-ayuda a {
	color: var(--color-heading);
	text-underline-offset: 4px;
}

.error-404-ayuda {
	margin-top: 1.5rem;
	font-size: 0.9375rem;
}