/* ==========================================================================
   08 — Detalle de Habitación (/habitaciones/{slug})
   Portada hero (titlebar) + galería de fotos + calendario + servicios.
   Tokens del tema: --pbmit-global-color (#780005), --pbmit-blackish-color
   (#0a132e), --pbmit-secondary-color (#f6f3ed).
   ========================================================================== */

/* ── Cinta de título (reemplaza al hero) ─────────────────────────────────── */
.deville-room-ribbon {
	background: #f1f0ec;
	border-top: 1px solid rgba(10,19,46,.06);
	border-bottom: 1px solid rgba(10,19,46,.06);
	padding: 34px 0;
}
.deville-room-ribbon-title {
	margin: 0 0 8px;
	font-size: 34px;
	line-height: 1.2;
	color: var(--pbmit-blackish-color);
}
.deville-room-ribbon-crumbs {
	font-size: 13px;
	color: #8990a3;
}
.deville-room-ribbon-crumbs a {
	color: var(--pbmit-global-color);
	font-weight: 600;
	transition: color .25s ease;
}
.deville-room-ribbon-crumbs a:hover { color: var(--pbmit-blackish-color); }
.deville-room-ribbon-crumbs .sep { margin: 0 8px; opacity: .6; }
.deville-room-ribbon-crumbs .active { color: #8990a3; }
@media (max-width: 767px) {
	.deville-room-ribbon-title { font-size: 26px; }
}

/* ── Contenedor centrado ─────────────────────────────────────────────────── */
.deville-detail-wrap {
	max-width: 980px;
	margin: 0 auto;
}
.deville-detail-block { margin-top: 44px; }
.deville-block-title {
	font-size: 24px;
	font-weight: 700;
	color: var(--pbmit-blackish-color);
	margin: 0 0 22px;
}
.deville-room-detail-text {
	font-size: 16px;
	line-height: 1.8;
	color: #5b6072;
	margin: 0 0 16px;
}

/* ── Imagen de la habitación (tamaño contenido) ──────────────────────────── */
.deville-room-photo {
	margin: 0 0 26px;
}
.deville-room-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid rgba(10,19,46,.06);
	box-shadow: 0 18px 45px rgba(10,19,46,.12);
}

.deville-room-gallery {
	display: grid;
	gap: 10px;
	margin: 0 0 26px;
}
.deville-room-gallery.has-thumbs {
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.deville-room-gallery.has-thumbs {
		grid-template-columns: 1.7fr 1fr;
		min-height: 420px;
	}
}
.deville-room-gallery-main,
.deville-room-gallery-thumbs a {
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(10,19,46,.06);
	background: #eceae4;
	box-shadow: 0 18px 45px rgba(10,19,46,.12);
}
.deville-room-gallery-main { min-height: 280px; }
.deville-room-gallery-main img,
.deville-room-gallery-thumbs img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .45s ease;
}
.deville-room-gallery-thumbs {
	display: grid;
	gap: 10px;
	grid-auto-rows: minmax(120px, 1fr);
}
@media (min-width: 768px) {
	.deville-room-gallery-main,
	.deville-room-gallery-thumbs a {
		height: 100%;
		min-height: 0;
	}
}
.deville-room-gallery a:hover img { transform: scale(1.04); }

/* ── Fila de características clave ─────────────────────────────────────────── */
.deville-keyfacts {
	list-style: none;
	margin: 0 0 22px;
	padding: 20px 6px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	border-top: 1px solid rgba(10,19,46,.08);
	border-bottom: 1px solid rgba(10,19,46,.08);
}
.deville-keyfacts li {
	display: flex;
	align-items: center;
	gap: 12px;
}
.deville-keyfacts li i {
	font-size: 22px;
	color: var(--pbmit-global-color);
	flex: 0 0 auto;
}
.deville-keyfacts-txt { display: flex; flex-direction: column; }
.deville-keyfacts-lbl {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #8990a3;
}
.deville-keyfacts-val {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--pbmit-blackish-color);
	line-height: 1.3;
}
@media (max-width: 767px) {
	.deville-keyfacts { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 420px) {
	.deville-keyfacts { grid-template-columns: 1fr; }
}

/* ── Leyenda / caption ───────────────────────────────────────────────────── */
.deville-room-caption {
	font-size: 16px;
	font-weight: 700;
	color: var(--pbmit-global-color);
	margin: 0 0 22px;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.deville-room-cta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}
.deville-room-cta-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 22px;
	border-radius: 30px;
	border: 1px solid #128c7e;
	color: #128c7e;
	font-weight: 700;
	font-size: 14px;
	transition: background .3s ease, color .3s ease;
}
.deville-room-cta-wa:hover { background: #128c7e; color: #fff; }

/* ── Servicios de la habitación ──────────────────────────────────────────── */
.deville-room-services {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.deville-room-services li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: var(--pbmit-secondary-color);
	border-radius: 14px;
	transition: transform .3s ease, box-shadow .3s ease;
}
.deville-room-services li:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(10,19,46,.10);
}
.deville-serv-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--pbmit-white-color);
	color: var(--pbmit-global-color);
	font-size: 18px;
	box-shadow: 0 6px 14px rgba(10,19,46,.08);
	overflow: hidden;
}
.deville-serv-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.deville-serv-text { font-size: 15px; font-weight: 600; color: var(--pbmit-blackish-color); }
@media (max-width: 991px) { .deville-room-services { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .deville-room-services { grid-template-columns: 1fr; } }

/* ── Servicios adicionales (cajas con borde punteado) ────────────────────── */
.deville-additional {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.deville-additional-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border: 1.5px dashed rgba(10,19,46,.22);
	border-radius: 12px;
	background: var(--pbmit-white-color);
	color: var(--pbmit-blackish-color);
	font-weight: 600;
	font-size: 15px;
	transition: border-color .3s ease, background .3s ease, transform .3s ease;
}
.deville-additional-item i {
	font-size: 20px;
	color: var(--pbmit-global-color);
	flex: 0 0 auto;
}
.deville-additional-item:hover {
	border-color: var(--pbmit-global-color);
	background: var(--pbmit-secondary-color);
	transform: translateY(-2px);
}
@media (max-width: 767px) { .deville-additional { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .deville-additional { grid-template-columns: 1fr; } }

/* ── Volver ──────────────────────────────────────────────────────────────── */
.deville-detail-back { margin-top: 34px; }
.deville-detail-back a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	color: #6b7185;
	transition: color .3s ease;
}
.deville-detail-back a:hover { color: var(--pbmit-global-color); }

/* ══════════════════════════════════════════════════════════════════════════
   Calendario de disponibilidad (estilo rayado, como el modelo)
   ══════════════════════════════════════════════════════════════════════════ */
.deville-availability {
	background: var(--pbmit-white-color);
	border: 1px solid rgba(10,19,46,.12);
	border-radius: 8px;
	padding: 22px 24px 24px;
}
.deville-cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.deville-cal-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--pbmit-blackish-color);
	margin: 0;
	text-transform: capitalize;
	text-align: center;
	flex: 1 1 auto;
}
.deville-cal-nav {
	width: 34px;
	height: 34px;
	border-radius: 6px;
	border: 1px solid rgba(10,19,46,.14);
	background: var(--pbmit-white-color);
	color: var(--pbmit-blackish-color);
	font-size: 15px;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.deville-cal-nav:hover:not(:disabled) { background: var(--pbmit-global-color); color: #fff; border-color: var(--pbmit-global-color); }
.deville-cal-nav:disabled { opacity: .3; cursor: not-allowed; }

.deville-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.deville-cal-weekdays span {
	text-align: center;
	padding: 8px 0;
	font-size: 12.5px;
	font-weight: 700;
	color: #8990a3;
}

.deville-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	border-left: 1px solid rgba(10,19,46,.08);
	border-top: 1px solid rgba(10,19,46,.08);
}
.deville-cal-cell {
	position: relative;
	min-height: 60px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 8px 10px;
	border-right: 1px solid rgba(10,19,46,.08);
	border-bottom: 1px solid rgba(10,19,46,.08);
	background: var(--pbmit-white-color);
	font-size: 13px;
	font-weight: 600;
	color: #4a5169;
	cursor: pointer;
	transition: filter .2s ease;
}
.deville-cal-num { position: relative; z-index: 1; }
.deville-cal-cell.is-empty { cursor: default; background: #fbfbfa; }

/* Disponible: rayado azul claro (como el modelo) */
.deville-cal-cell.is-available {
	background-color: #eef6fd;
	background-image: repeating-linear-gradient(135deg, transparent 0, transparent 7px, rgba(56,132,214,.20) 7px, rgba(56,132,214,.20) 9px);
}
.deville-cal-cell.is-available:hover { filter: brightness(.96); }

/* No disponible / pasado: rayado gris */
.deville-cal-cell.is-off {
	background-color: #f4f4f2;
	background-image: repeating-linear-gradient(135deg, transparent 0, transparent 7px, rgba(10,19,46,.12) 7px, rgba(10,19,46,.12) 9px);
	color: #b7bbc6;
	cursor: not-allowed;
}
.deville-cal-cell.is-booked {
	background-color: #fff4e5;
	background-image: repeating-linear-gradient(135deg, transparent 0, transparent 7px, rgba(245,158,11,.32) 7px, rgba(245,158,11,.32) 9px);
	color: #b45309;
	cursor: not-allowed;
}

/* Rango seleccionado */
.deville-cal-cell.is-range {
	background: rgba(120,0,5,.12);
	background-image: none;
	color: var(--pbmit-global-color);
}
/* Llegada / salida */
.deville-cal-cell.is-selected {
	background: var(--pbmit-global-color);
	background-image: none;
	color: #fff;
	box-shadow: inset 0 0 0 2px rgba(255,255,255,.25);
}

.deville-cal-foot { margin-top: 18px; }
.deville-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 12px;
	font-size: 12.5px;
	color: #6b7185;
}
.deville-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.deville-dot { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(10,19,46,.08); }
.deville-dot--available {
	background-color: #eef6fd;
	background-image: repeating-linear-gradient(135deg, transparent 0, transparent 3px, rgba(56,132,214,.35) 3px, rgba(56,132,214,.35) 5px);
}
.deville-dot--in { background: var(--pbmit-global-color); border-color: var(--pbmit-global-color); }
.deville-dot--off {
	background-color: #f4f4f2;
	background-image: repeating-linear-gradient(135deg, transparent 0, transparent 3px, rgba(10,19,46,.22) 3px, rgba(10,19,46,.22) 5px);
}
.deville-dot--booked {
	background-color: #fff4e5;
	background-image: repeating-linear-gradient(135deg, transparent 0, transparent 3px, rgba(245,158,11,.45) 3px, rgba(245,158,11,.45) 5px);
}
.deville-cal-selection {
	font-size: 15px;
	font-weight: 700;
	color: var(--pbmit-blackish-color);
	margin: 4px 0 0;
}
.deville-cal-cta { margin-top: 14px; display: inline-block; }
.deville-cal-cta.pbmit-btn { padding: 13px 26px; font-size: 14px; }
.deville-cal-note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8990a3;
}
.deville-cal-note i { color: var(--pbmit-global-color); margin-top: 2px; }

/* Foco accesible */
.deville-cal-cell:focus-visible,
.deville-cal-nav:focus-visible,
.deville-room-cta-wa:focus-visible,
.deville-detail-back a:focus-visible {
	outline: 3px solid rgba(120,0,5,.4);
	outline-offset: 2px;
}

@media (max-width: 575px) {
	.deville-cal-cell { min-height: 46px; padding: 6px; font-size: 12px; }
	.deville-availability { padding: 16px; }
}

/* ============================================================
   Galería de habitación — rediseño mosaico (1 grande + 4 mini)
   ============================================================ */
@media (min-width: 768px) {
	.deville-room-gallery.has-thumbs {
		grid-template-columns: 2fr 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		height: 460px;
		min-height: 0;
	}
	.deville-room-gallery.has-thumbs .deville-room-gallery-main {
		grid-column: 1;
		grid-row: 1 / span 2;
		min-height: 0;
		height: 100%;
	}
	.deville-room-gallery.has-thumbs .deville-room-gallery-thumbs { display: contents; }
	.deville-room-gallery.has-thumbs .deville-room-gallery-thumbs a { height: 100%; min-height: 0; }
	.deville-room-gallery.has-thumbs .deville-room-gallery-thumbs a:nth-child(n+5) { display: none; }
}
@media (max-width: 767px) {
	.deville-room-gallery-main { height: 240px; min-height: 0; }
	.deville-room-gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 92px; gap: 10px; }
	.deville-room-gallery-thumbs a { height: 92px; }
	.deville-room-gallery-thumbs a:nth-child(n+4) { display: none; }
}
.deville-room-gallery-main,
.deville-room-gallery-thumbs a { cursor: pointer; }
.deville-room-gallery-more::after {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(10,19,46,.58);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .02em;
	z-index: 2;
}

#disponibilidad { scroll-margin-top: 120px; }
.deville-cal-alert {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 18px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fdecea;
	border: 1px solid #e8b4b4;
	color: #7a1c1c;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}
.deville-cal-alert i {
	color: #b42318;
	margin-top: 2px;
	flex: 0 0 auto;
}