/* ============================================================
   Casa Bora — hoja de estilos (home PHP, autónoma)
   Layout basado en el mockup aprobado (15 jul 2026)
   ============================================================ */

:root {
	--terracotta: #E1633E;
	--terracotta-dark: #C24E2C;
	--navy: #2E3A44;
	--mist: #A6B0B7;
	--sand: #C7B49C;
	--cream: #F6F1E7;
	--cream-deep: #EFE7D8;
	--white: #FEFBF6;
	--bone: #F3EEE4;
	--ink: #33302B;
	--muted: #6B655D;
}

/* ---- Fuentes ---- */
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fonts/cormorant-garamond-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---- Base ---- */
* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ink);
	background: var(--white);
	overflow-x: hidden;
}
h1, h2, h3 {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 300;
	line-height: 1.1;
	color: var(--navy);
	margin: 0 0 0.5rem;
}
h1 { font-size: clamp(2.75rem, 1.6rem + 5vw, 5rem); }
h2 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
h3 { font-size: 1.4rem; font-weight: 400; }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

.cb-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1.5rem; }
.cb-center { text-align: center; }
.cb-rounded { border-radius: 12px; width: 100%; height: auto; object-fit: cover; display: block; }

.cb-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.75rem;
	font-weight: 600;
	margin: 0 0 0.6rem;
}
.cb-eyebrow--terra { color: var(--terracotta); }

.cb-btn {
	display: inline-block;
	margin-top: 0.5rem;
	padding: 0.85rem 1.75rem;
	background: var(--terracotta);
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	transition: background 0.2s ease, transform 0.2s ease;
}
.cb-btn:hover { background: var(--terracotta-dark); }
.cb-btn--pill { border-radius: 999px; }

/* ---- Logo real (imagen) ---- */
.cb-logo { text-decoration: none; display: inline-flex; }
.cb-logo__img { width: 92px; height: auto; display: block; }
/* sobre el hero: leve sombra para legibilidad */
.cb-header--overlay .cb-logo__img { filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35)); }
.cb-logo__img--footer { width: 110px; margin-bottom: 0.5rem; }
.cb-logo__img--map { width: 84px; margin-bottom: 0.75rem; }

/* ---- Cabecera transparente sobre el hero ---- */
.cb-header--overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: linear-gradient(to bottom, rgba(20, 32, 42, 0.45), rgba(20, 32, 42, 0));
}
.cb-header__inner {
	display: flex;
	align-items: center;
	gap: 2rem;
	max-width: 1240px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
}
.cb-nav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 2rem;
	font-size: 0.9rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cb-nav--right { justify-content: flex-end; }
.cb-header--overlay .cb-nav a { position: relative; color: #fff; text-decoration: none; }
/* subrayado animado en hover (estilo Lakeland) */
.cb-header--overlay .cb-nav a:not(.cb-nav__cta)::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	background: var(--terracotta);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease-out;
}
.cb-header--overlay .cb-nav a:not(.cb-nav__cta):hover::after,
.cb-header--overlay .cb-nav a:not(.cb-nav__cta):focus-visible::after { transform: scaleX(1); }
.cb-nav__cta { color: #fff !important; padding: 0.55rem 1.35rem; margin-top: 0; }
.cb-nav__cta:hover { background: var(--terracotta-dark); }

/* ---- Menú hamburguesa (se muestra solo en móvil) ---- */
.cb-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.cb-burger span {
	display: block;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: #fff;
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.cb-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cb-burger.is-open span:nth-child(2) { opacity: 0; }
.cb-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cb-mnav {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 120;
	flex-direction: column;
	padding: 0.5rem 1.5rem 1.4rem;
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 22px 44px rgba(20, 32, 42, 0.25);
}
.cb-mnav.is-open { display: flex; animation: cbMnavIn 0.22s ease; }
@keyframes cbMnavIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cb-mnav > a {
	color: #1a1a1a;
	text-decoration: none;
	padding: 0.9rem 0.2rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.95rem;
	font-weight: 600;
}
.cb-mnav > a:hover { color: var(--terracotta); }
.cb-mnav .cb-btn {
	margin-top: 1.1rem;
	width: 100%;
	text-align: center;
	color: #fff !important;
	border: 0;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* ---- Hero (centrado, estilo mockup) ---- */
.cb-hero {
	position: relative;
	min-height: 100vh;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: 70px; /* espacio para la barra de confianza */
}
.cb-hero__dim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(20, 32, 42, 0.35), rgba(20, 32, 42, 0.15) 40%, rgba(20, 32, 42, 0.45));
}
.cb-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	padding: 6rem 1.5rem 0;
	text-align: center;
}
.cb-hero__title {
	color: #fff;
	font-weight: 400;
	margin: 0 0 2rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* Barra de reserva horizontal (formulario real de MotoPress) */
.cb-booking {
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 14px;
	padding: 1rem 1.15rem;
	box-shadow: 0 24px 60px rgba(20, 32, 42, 0.28);
	max-width: 900px;
	margin: 0 auto;
}
.cb-booking .mphb_sc_search-wrapper { margin: 0; }
.cb-booking .mphb_sc_search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin: 0;
}
/* MotoPress muestra un aviso de campos obligatorios: lo ocultamos */
.cb-booking .mphb-required-fields-tip { display: none !important; }
/* cada campo es un <p> en MotoPress: reset de márgenes + flex */
.cb-booking .mphb_sc_search-form > p {
	margin: 0;
	text-align: left;
	flex: 1 1 170px;
	min-width: 140px;
}
.cb-booking .mphb_sc_search-check-in-date,
.cb-booking .mphb_sc_search-check-out-date { flex: 1 1 150px; }
.cb-booking .mphb_sc_search-adults,
.cb-booking .mphb_sc_search-children { flex: 0 0 84px; min-width: 0; }
.cb-booking .mphb_sc_search-submit-button-wrapper { flex: 0 0 auto; align-self: flex-end; }
.cb-booking .mphb_sc_search-form label {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	text-shadow: 0 1px 6px rgba(20, 32, 42, 0.45);
	margin: 0 0 0.3rem;
	white-space: nowrap;
}
/* El asterisco de campo obligatorio de MotoPress. Estaba pintado de blanco para
   disimularlo, pero sobre el cristal del buscador quedaba como una mota suelta.
   Se oculta: los cuatro campos se rellenan siempre, asi que no informa de nada.
   Solo se quita lo visual; el <input required> sigue validando y anunciandose. */
.cb-booking .mphb_sc_search-form label abbr { display: none; }
.cb-booking .mphb-datepick,
.cb-booking .mphb_sc_search-form select {
	width: 100%;
	padding: 0.75rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 8px;
	font-size: 0.95rem;
	/* Cristal, igual que el panel que los contiene.
	   El blur propio NO es adorno: sin el, el texto se apoya en la foto
	   y el contraste baja segun donde caiga el campo (roca al sol vs.
	   acantilado en sombra). Con el, el fondo se aplana y el negro se
	   lee siempre. */
	background: rgba(255, 255, 255, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--ink);
	font-weight: 500;
	line-height: 1.3;
	box-sizing: border-box;
}
/* El placeholder por defecto del navegador es gris claro: sobre cristal
   se evapora. */
.cb-booking .mphb-datepick::placeholder {
	color: var(--muted);
	opacity: 1;
}
.cb-booking .mphb-datepick:focus,
.cb-booking .mphb_sc_search-form select:focus {
	outline: 2px solid var(--terracotta);
	outline-offset: 1px;
	background: rgba(255, 255, 255, 0.55);
}

/* ---- La lista desplegable de Adultos / Ninos ----
   Esa lista la pinta el SISTEMA OPERATIVO, no la pagina: el CSS de toda
   la vida no la toca. Chrome 135+ deja tomar el control con
   appearance: base-select, y entonces el <option> ya es HTML normal.
   Va dentro de @supports aposta: Safari y Firefox lo ignoran entero y se
   quedan con la lista nativa de siempre, que funciona perfectamente.
   Mejora progresiva: quien pueda la ve bonita, quien no, la ve como hoy.
   Nadie la ve rota. */
@supports (appearance: base-select) {
	.cb-booking .mphb_sc_search-form select,
	.cb-booking .mphb_sc_search-form select::picker(select) {
		appearance: base-select;
	}
	.cb-booking .mphb_sc_search-form select::picker(select) {
		background: var(--white);
		border: 1px solid var(--cream-deep);
		border-radius: 12px;
		box-shadow: 0 18px 44px rgba(20, 32, 42, 0.24);
		padding: 0.3rem;
		margin-top: 0.3rem;
	}
	/* Aqui la lista NO es cristal: flota sobre la foto sin nada detras que
	   la aplane, y el numero se apoyaria en el acantilado. Solida. */
	.cb-booking .mphb_sc_search-form select option {
		padding: 0.5rem 0.75rem;
		border-radius: 7px;
		color: var(--ink);
		font-size: 0.95rem;
	}
	.cb-booking .mphb_sc_search-form select option:hover {
		background: var(--cream);
	}
	.cb-booking .mphb_sc_search-form select option:checked {
		background: var(--terracotta);
		color: #fff;
	}
	/* El check que Chrome mete de serie: sobra, el fondo terracota ya dice
	   cual esta elegido. */
	.cb-booking .mphb_sc_search-form select option::checkmark { display: none; }

	.cb-booking .mphb_sc_search-form select::picker-icon {
		color: var(--muted);
		transition: transform 0.2s ease;
	}
	.cb-booking .mphb_sc_search-form select:open::picker-icon {
		transform: rotate(180deg);
	}
}

/* EXCEPCION del modal: ahi NO hay foto detras. El panel es crema solido
   (.cb-booking--modal, linea ~1017), asi que un campo al 35% de blanco
   sobre crema es crema y los campos desaparecen. Se quedan blancos.
   Va justo aqui y no mas abajo a proposito: mismo peso que la regla de
   arriba (dos clases), asi que manda el orden del archivo. */
.cb-booking--modal .mphb-datepick,
.cb-booking--modal .mphb_sc_search-form select {
	background: #fff;
	border-color: var(--cream-deep);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.cb-booking--modal .mphb-datepick:focus,
.cb-booking--modal .mphb_sc_search-form select:focus { background: #fff; }
.cb-booking .mphb_sc_search-submit-button-wrapper .button,
.cb-booking input[type="submit"] {
	width: auto;
	padding: 0.72rem 1.75rem;
	background: var(--terracotta);
	color: #fff;
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 6px 16px rgba(225, 99, 62, 0.32);
	-webkit-appearance: none;
	appearance: none;
}
.cb-booking input[type="submit"]:hover { background: var(--terracotta-dark); box-shadow: 0 8px 20px rgba(225, 99, 62, 0.4); }

/* La marca partida en dos pesos: "Casa" fuerte + " Bora" normal.
   Peso explicito y no un <b> a secas: el bolder por defecto se calcula
   contra el peso del enlace y saldria distinto en cada menu. */
.cb-nav__b { font-weight: 700; }

/* ---- Barra de confianza (tarjeta blanca sobre el borde del hero) ---- */
.cb-trust {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 0;
	transform: translate(-50%, 50%);
	width: min(1000px, calc(100% - 3rem));
	background: var(--white);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(20, 32, 42, 0.18);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	padding: 1.4rem 1.75rem;
}
.cb-trust__item { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; color: var(--ink); }
.cb-trust__item + .cb-trust__item { border-left: 1px solid var(--cream-deep); padding-left: 1.25rem; }
.cb-trust__item--score { gap: 0.6rem; }
.cb-trust__num { font-family: "Cormorant Garamond", serif; font-size: 2.4rem; font-weight: 500; color: var(--navy); line-height: 1; }
.cb-trust__starmeta { display: flex; flex-direction: column; }
.cb-trust__stars { color: var(--terracotta); letter-spacing: 1px; font-size: 0.85rem; }
.cb-trust__label { color: var(--muted); font-size: 0.8rem; }
/* iconos SVG en círculo terracota suave */
.cb-trust__svg {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	padding: 8px;
	box-sizing: content-box;
	color: var(--terracotta);
	background: rgba(225, 99, 62, 0.1);
	border-radius: 50%;
}
.cb-trust__title { line-height: 1.3; }

/* ============================================================
   Paginas legales (/aviso-legal/, /politica-de-privacidad/,
   /politica-de-cookies/, /condiciones-de-reserva/)
   ------------------------------------------------------------
   El texto lo pinta the_content() desde WordPress, asi que aqui se
   estilan etiquetas sueltas (h2, p, ul...) y no clases propias: el
   cliente escribe en el editor y no va a poner clases.
   La banda navy no es decorativa: .cb-header--overlay va absolute con
   degradado oscuro y enlaces blancos (linea ~88), y sin algo oscuro
   debajo el menu no se leeria sobre el crema.
   ============================================================ */
.cb-legal-head {
	background: var(--navy);
	padding: 9.5rem 0 3.25rem;
}
.cb-legal-head h1 { color: #fff; margin: 0.35rem 0 0.75rem; }
.cb-legal__updated { color: var(--sand); font-size: 0.85rem; margin: 0; }

/* Columna de lectura: el limite de ~68 caracteres manda sobre el ancho
   del .cb-wrap, que esta pensado para rejillas de tarjetas.
   Lleva su propio padding vertical porque NO puede ser .cb-section: esa
   clase se lleva min-height:100vh y justify-content:center en escritorio
   (linea ~434) y centraria el texto legal a lo bruto. */
.cb-legal__body {
	max-width: 46rem;
	padding-top: clamp(3rem, 5vw, 4.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
	color: var(--ink);
}
.cb-legal__body h2 {
	margin: 2.75rem 0 0.85rem;
	font-size: 1.9rem;
	color: var(--navy);
}
.cb-legal__body h2:first-child { margin-top: 0; }
.cb-legal__body h3 {
	margin: 1.85rem 0 0.6rem;
	font-size: 1.35rem;
	color: var(--navy);
}
.cb-legal__body p,
.cb-legal__body li { line-height: 1.75; }
.cb-legal__body ul,
.cb-legal__body ol { padding-left: 1.35rem; }
.cb-legal__body li { margin-bottom: 0.45rem; }
.cb-legal__body a { color: var(--terracotta); }
.cb-legal__body table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
	font-size: 0.95rem;
}
.cb-legal__body th,
.cb-legal__body td {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--cream-deep);
	text-align: left;
	vertical-align: top;
}
.cb-legal__body th { background: var(--cream); font-weight: 600; }

/* Los huecos pendientes de datos del cliente, marcados en amarillo para
   que canten. Se escriben en el editor como <mark>[DATO]</mark>.
   Si queda uno en produccion, se ve a un metro. */
.cb-legal__body mark {
	background: #FFF3B0;
	color: var(--ink);
	padding: 0.1em 0.35em;
	border-radius: 3px;
	font-weight: 600;
}

@media (max-width: 767px) {
	.cb-legal-head { padding: 7.5rem 0 2.25rem; }
	.cb-legal-head h1 { font-size: 2.1rem; }
	.cb-legal__body table { display: block; overflow-x: auto; }
}

/* ============================================================
   Calendario de MotoPress (jQuery Datepick de Keith Wood)
   ------------------------------------------------------------
   REQUIERE que el ajuste "Calendar Theme" de MotoPress este en
   **Minimal Blue** (Alojamiento > Ajustes). Con el ajuste vacio
   —su valor por defecto— el plugin no aplica ningun tema y el
   calendario cae al CSS original de Datepick: barra negra y
   granate #600. De ahi la pinta de 2009.
   Aqui NO se repinta desde cero: se coge Minimal Blue de base
   (es el mas plano de los cuatro) y se le cambia el color. Menos
   CSS y menos que romper.

   Los selectores son largos aposta: replican la forma exacta de
   los suyos (mphb-datepicker-minimal-blue.css). Si se acortan,
   pierden la puja de especificidad y no se aplica nada.

   ⚠️ El color aqui NO es decoracion, es informacion: verde=libre,
   tachado=ocupado/pasado, terracota=lo que has elegido. Al tocarlo
   hay que mantener los tres distinguibles, y nunca solo por color
   (por eso lo ocupado va tachado ademas de gris).
   ============================================================ */

/* ---- El popup del buscador ---- */
.datepick-popup .mphb-datepicker-minimal-blue.datepick {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: var(--white);
	border-radius: 14px;
	box-shadow: 0 24px 60px rgba(20, 32, 42, 0.28);
	overflow: hidden;
}

/* Barra de arriba (Ant / Hoy / Sig) y de abajo (Limpiar / Cerrar) */
.datepick-popup .mphb-datepicker-minimal-blue .datepick-nav,
.datepick-popup .mphb-datepicker-minimal-blue .datepick-ctrl {
	background-color: var(--cream);
	border-color: var(--cream-deep);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-nav a { color: var(--muted); }
.datepick-popup .mphb-datepicker-minimal-blue .datepick-nav a:hover {
	background-color: var(--cream-deep);
	color: var(--ink);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-ctrl a { color: var(--terracotta); }
.datepick-popup .mphb-datepicker-minimal-blue .datepick-ctrl .datepick-cmd:hover {
	background-color: var(--cream-deep);
	color: var(--terracotta-dark);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-ctrl:before {
	border-left-color: var(--cream-deep);
}

/* Cabecera del mes (Julio / 2027) */
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month-header,
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month-header select,
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month-header input {
	background-color: var(--white);
	color: var(--navy);
	font-weight: 600;
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month-header {
	border-bottom-color: var(--cream-deep);
}

/* Rejilla */
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month {
	border-color: var(--cream-deep);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month th,
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month th a {
	background-color: var(--white);
	color: var(--muted);
	border-color: var(--white);
	letter-spacing: 0.04em;
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td {
	background-color: var(--white);
	border-color: var(--white);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td a,
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td span {
	color: var(--ink);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td a:hover {
	background-color: var(--cream);
}
.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td .datepick-other-month {
	background-color: var(--white);
}

/* Hoy: se marca con color Y con negrita, no solo con color. */
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td .datepick-today {
	background-color: var(--white);
	color: var(--terracotta);
	font-weight: 700;
}

/* Lo elegido y el rango al pasar por encima */
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td .datepick-selected,
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td a.datepick-highlight {
	background-color: var(--terracotta);
	color: #fff;
}
/* La entrada, en navy: distinta de la salida sin salirse de la marca. */
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td .mphb-check-in-date {
	background-color: var(--navy);
	color: #fff;
}

/* Lo que no se puede elegir: gris Y tachado. Nunca solo el color. */
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td .mphb-past-date,
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td .mphb-unselectable-date {
	background-color: var(--white);
	color: var(--sand);
}
.datepick-popup .mphb-datepicker-minimal-blue.mphb-datepick-popup .datepick-month td .mphb-selectable-date {
	background-color: var(--white);
	color: var(--ink);
}

/* ---- El calendario incrustado (ficha del alojamiento) ----
   Este si expone variables propias de MotoPress: se tocan ahi y no
   hay que pelear especificidad. */
.mphb-calendar.mphb-datepick .mphb-datepicker-minimal-blue {
	--mphb-available-date-bg: var(--white);
	--mphb-available-date-color: #4A7C59;
	--mphb-not-available-date-bg: var(--white);
	--mphb-not-available-date-color: var(--sand);
	--mphb-booked-date-bg: var(--white);
	--mphb-booked-date-color: var(--sand);
	--mphb-out-of-season-date-bg: var(--white);
	--mphb-out-of-season-date-color: var(--sand);
	--mphb-selected-date-bg: var(--terracotta);
	--mphb-selected-date-color: #fff;
	--mphb-unselectable-date-color: var(--sand);
}

/* Ocupado en arena + tachado (el tachado lo pone MotoPress) en vez del
   rojo suyo: el rojo pelearia con la terracota de "elegido" y el
   huesped no sabria cual es cual. */

@media (max-width: 767px) {
	/* El popup a dos meses no cabe: uno debajo del otro. */
	.datepick-popup .mphb-datepicker-minimal-blue .datepick-month { width: 100%; }
	.datepick-popup .mphb-datepicker-minimal-blue .datepick-month + .datepick-month {
		border-left: 1px solid var(--cream-deep);
	}
	/* 44px de minimo tactil, igual que los campos del buscador. */
	.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td a,
	.datepick-popup .mphb-datepicker-minimal-blue .datepick-month td span {
		min-height: 2.4em;
		line-height: 2.4em;
	}
}

/* ============================================================
   El embudo de MotoPress con la marca puesta
   (ficha del alojamiento, pago, confirmacion)
   ------------------------------------------------------------
   El HTML lo pinta MotoPress via the_content(), asi que aqui se
   estilan SUS clases (.mphb-*). Son las de un plugin: pueden
   cambiar al actualizarlo. Si un dia el checkout sale raro tras
   una actualizacion, mirar aqui primero.
   Banda navy por lo mismo que en las legales: .cb-header--overlay
   va absolute con degradado oscuro y enlaces blancos.
   ============================================================ */
.cb-mphb-head {
	background: var(--navy);
	padding: 9.5rem 0 3.25rem;
}
.cb-mphb-head h1 { color: #fff; margin: 0.35rem 0 0; }

.cb-mphb__body {
	max-width: 60rem;
	padding-top: clamp(2.5rem, 4vw, 3.5rem);
	padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
/* El plugin escupe los parrafos pegados. */
.cb-page-mphb .cb-mphb__body > p { margin: 0 0 1.1rem; }

/* ---- La galeria ----
   Es la [gallery] clasica de WordPress. Twenty Twenty-Five es un tema de
   bloques y no la estila, asi que sin esto los items se apilan en una
   columna. Rejilla propia y a mandar.
   Los !important no son pereza: WordPress imprime un <style> en linea con
   ".gallery-columns-3 .gallery-item { width: 33.33% }" y float, y eso pelea
   con el grid. */
.cb-page-mphb .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
	margin: 1.75rem 0 2.5rem;
}
.cb-page-mphb .gallery .gallery-item {
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
}
.cb-page-mphb .gallery .gallery-icon { margin: 0; }
.cb-page-mphb .gallery img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 0 !important;
	border-radius: 10px;
	display: block;
}
/* La primera manda: es la foto que decide si sigues leyendo. */
.cb-page-mphb .gallery .gallery-item:first-child { grid-column: span 3; }
.cb-page-mphb .gallery .gallery-item:first-child img { aspect-ratio: 16 / 9; }

/* ---- El calendario incrustado de la ficha ----
   Datepick trae los meses a 15em fijos, asi que en una pagina ancha se
   queda de juguete. Se estira a la mitad del ancho cada uno. */
.cb-page-mphb .mphb-calendar,
.cb-page-mphb .mphb-calendar .datepick { width: 100%; }
.cb-page-mphb .mphb-calendar .datepick-month {
	width: 50%;
	float: left;
}
.cb-page-mphb .mphb-calendar .datepick-month td a,
.cb-page-mphb .mphb-calendar .datepick-month td span {
	padding: 0.5rem 0;
	font-size: 0.95rem;
}
@media (max-width: 767px) {
	.cb-page-mphb .mphb-calendar .datepick-month { width: 100%; float: none; }
}

/* ---- La lista de "Detalles" ----
   Las comodidades salen como enlaces al archivo de su termino: paginas
   que no existen con la marca y que nadie quiere visitar. Se quedan, pero
   dejan de gritar: sin subrayado y en color de texto. */
.cb-page-mphb .cb-mphb__body ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}
.cb-page-mphb .cb-mphb__body ul li {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--cream-deep);
	line-height: 1.7;
}
.cb-page-mphb .cb-mphb__body ul li a {
	color: var(--ink);
	text-decoration: none;
}
.cb-page-mphb .cb-mphb__body ul li a:hover {
	color: var(--terracotta);
	text-decoration: underline;
}

/* Titulos y texto que pinta el plugin */
.cb-page-mphb h2,
.cb-page-mphb h3,
.cb-page-mphb .mphb-room-type-title { color: var(--navy); }

/* Precio: es el dato que mas se mira de la pagina. Que se vea. */
.cb-page-mphb .mphb-price,
.cb-page-mphb .mphb-block-price,
.cb-page-mphb .mphb-price-value {
	color: var(--terracotta);
	font-weight: 600;
}

/* ---- Los botones, y CUAL manda ----
   OJO, esto tiene miga. En los resultados hay DOS botones:
     "Hacer reserva"    (.mphb-book-button)      -> solo ANADE el alojamiento
     "Confirmar reserva" (.mphb-confirm-reservation) -> va al pago
   El que cierra la venta es el segundo. Con un solo alojamiento, pulsar
   "Hacer reserva" cuando ya esta anadido no hace nada, y el huesped se
   queda mirando el boton grande sin entender por que no pasa nada.
   Asi que el solido es el de confirmar y el de anadir va en linea. Si se
   igualan, el huesped vuelve a pulsar el que no lleva a ningun sitio. */
.cb-page-mphb .mphb-reserve-btn,
.cb-page-mphb .mphb-confirm-reservation,
.cb-page-mphb button[type="submit"],
.cb-page-mphb input[type="submit"],
.cb-page-mphb .mphb_sc_checkout-form .button {
	background: var(--terracotta);
	border: 0;
	border-radius: 999px;
	padding: 0.85rem 2rem;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.2s ease;
}
.cb-page-mphb .mphb-reserve-btn:hover,
.cb-page-mphb .mphb-confirm-reservation:hover,
.cb-page-mphb button[type="submit"]:hover,
.cb-page-mphb input[type="submit"]:hover { background: var(--terracotta-dark); }

/* "Hacer reserva": secundario. Es un paso intermedio, no la meta. */
.cb-page-mphb .mphb-book-button {
	background: transparent;
	border: 1px solid var(--terracotta);
	border-radius: 999px;
	padding: 0.8rem 1.75rem;
	color: var(--terracotta);
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.cb-page-mphb .mphb-book-button:hover {
	background: var(--terracotta);
	color: #fff;
}

/* Campos del checkout: aqui NO hay foto detras, asi que blancos y
   solidos. El cristal del hero no pinta nada en un formulario donde se
   escriben datos personales. */
.cb-page-mphb input[type="text"],
.cb-page-mphb input[type="email"],
.cb-page-mphb input[type="tel"],
.cb-page-mphb input[type="number"],
.cb-page-mphb select,
.cb-page-mphb textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--cream-deep);
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font-family: "Inter", sans-serif;
	font-size: 0.95rem;
}
.cb-page-mphb input:focus,
.cb-page-mphb select:focus,
.cb-page-mphb textarea:focus {
	outline: 2px solid var(--terracotta);
	outline-offset: 1px;
}
.cb-page-mphb label { font-size: 0.9rem; color: var(--muted); }

/* Tablas de desglose (el resumen de la reserva) */
.cb-page-mphb table { width: 100%; border-collapse: collapse; }
.cb-page-mphb th,
.cb-page-mphb td {
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--cream-deep);
	text-align: left;
}
.cb-page-mphb th { background: var(--cream); font-weight: 600; color: var(--navy); }

/* Avisos del plugin */
.cb-page-mphb .mphb-errors-wrapper,
.cb-page-mphb .mphb-error { color: var(--terracotta-dark); }

@media (max-width: 767px) {
	.cb-mphb-head { padding: 7.5rem 0 2.25rem; }
	.cb-mphb-head h1 { font-size: 2.1rem; }
	/* Las tablas del desglose no caben: que rueden ellas y no la pagina. */
	.cb-page-mphb table { display: block; overflow-x: auto; }
	/* Galeria a dos columnas; la primera sigue mandando a lo ancho. */
	.cb-page-mphb .gallery { grid-template-columns: repeat(2, 1fr); }
	.cb-page-mphb .gallery .gallery-item:first-child { grid-column: span 2; }
}

/* ---- Full-page scroll: cada sección ocupa la pantalla y hace snap ----
   Solo en escritorio; en móvil se deja el flujo natural para no cortar contenido. */
@media (min-width: 768px) {
	html { scroll-snap-type: y proximity; scroll-behavior: smooth; }
	.cb-hero,
	.cb-section {
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}
	.cb-section {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
	html { scroll-snap-type: none; scroll-behavior: auto; }
}

/* ---- Secciones ---- */
.cb-section { padding: clamp(3.5rem, 6vw, 5.5rem) 0; background: var(--white); }
.cb-section:first-of-type { padding-top: clamp(5.5rem, 9vw, 8rem); } /* deja aire para la barra de confianza */
.cb-section--cream { background: var(--cream); }
.cb-section > .cb-wrap > h2.cb-center { margin-bottom: 2.5rem; }
.cb-section__cta { margin-top: 2.5rem; }

/* Intro — imagen protagonista más grande */
.cb-intro { display: grid; grid-template-columns: 0.85fr 1.35fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.cb-intro__img {
	aspect-ratio: 4 / 3;
	min-height: 460px;
	object-fit: cover;
	box-shadow: 0 28px 60px rgba(20, 32, 42, 0.18);
}
.cb-rule { display: block; width: 56px; height: 2px; background: var(--sand); margin: 0 0 1.4rem; }

/* Tarjetas */
.cb-cards { display: grid; gap: clamp(1rem, 2.5vw, 2rem); }
.cb-cards--4 { grid-template-columns: repeat(4, 1fr); }
.cb-cards--3 { grid-template-columns: repeat(3, 1fr); }
.cb-card { transition: transform 0.25s ease; }
.cb-card:hover { transform: translateY(-4px); }
.cb-card .cb-rounded { aspect-ratio: 4 / 3; margin-bottom: 1rem; box-shadow: 0 12px 30px rgba(20, 32, 42, 0.1); }
.cb-card h3 { margin: 0 0 0.4rem; }
.cb-card p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Imágenes ampliables */
.cb-zoom { cursor: zoom-in; }

/* Sección azul con ramas botánicas (estilo referencia) */
.cb-section--sky { background: #E5F0F3; position: relative; overflow: hidden; }
.cb-section--sky > .cb-wrap { position: relative; z-index: 1; }
.cb-leaf { position: absolute; z-index: 0; width: 120px; color: #9FBEB9; opacity: 0.5; pointer-events: none; }
.cb-leaf__svg { width: 100%; height: auto; display: block; }
.cb-leaf--l { top: -6px; left: -12px; transform: rotate(14deg); }
.cb-leaf--r { bottom: -6px; right: -14px; width: 140px; transform: rotate(196deg); }

/* Tarjetas de lugar (imagen redondeada arriba + texto debajo) */
.cb-places { align-items: start; }
.cb-place {
	background: #fff;
	border-radius: 16px;
	padding: 0.6rem;
	box-shadow: 0 16px 36px rgba(20, 32, 42, 0.12);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cb-place:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(20, 32, 42, 0.18); }
.cb-place__img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	display: block;
	border-radius: 12px;
}
.cb-place__body { padding: 1rem 0.9rem 0.75rem; }
.cb-place__body h3 { margin: 0 0 0.5rem; }
.cb-place__body p { margin: 0; color: var(--muted); font-size: 0.93rem; line-height: 1.55; }

/* Reseñas — carrusel multi-tarjeta */
.cb-slider { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 3.25rem; }
.cb-slider__viewport { overflow: hidden; padding: 8px 4px; margin: -8px -4px; }
.cb-slider__track { display: flex; gap: 1.5rem; will-change: transform; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.cb-review {
	position: relative;
	flex: 0 0 calc((100% - 3rem) / 3);
	box-sizing: border-box;
	background: var(--white);
	border: 1px solid var(--cream-deep);
	border-radius: 14px;
	padding: 1.75rem 1.6rem;
	margin: 0;
	text-align: left;
	box-shadow: 0 10px 28px rgba(20, 32, 42, 0.06);
}
.cb-section--cream .cb-review { background: #fff; }
.cb-review__mark { display: block; font-family: "Cormorant Garamond", serif; font-size: 3rem; color: var(--terracotta); opacity: 0.4; line-height: 0.4; margin-bottom: 0.9rem; }
.cb-review p { margin: 0 0 1.4rem; font-size: 0.97rem; color: var(--ink); line-height: 1.6; }
.cb-review__by { display: flex; align-items: center; gap: 0.75rem; }
.cb-review__avatar { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.02em; }
.cb-review__who { display: flex; flex-direction: column; line-height: 1.3; }
.cb-review cite { font-style: normal; font-weight: 600; font-size: 0.92rem; color: var(--navy); }
.cb-review__date { font-size: 0.8rem; color: var(--muted); }

.cb-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--cream-deep);
	background: var(--white);
	color: var(--navy);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(20, 32, 42, 0.12);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.cb-slider__nav:hover { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.cb-slider__nav--prev { left: 0; }
.cb-slider__nav--next { right: 0; }
.cb-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; }
.cb-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--sand); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; }
.cb-dots button.is-active { background: var(--terracotta); transform: scale(1.25); }

/* Lightbox de imágenes */
.cb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
	background: rgba(20, 32, 42, 0.88);
	opacity: 0;
	transition: opacity 0.25s ease;
}
.cb-lightbox.is-open { display: flex; opacity: 1; }
.cb-lightbox__fig { margin: 0; max-width: 1000px; max-height: 90vh; text-align: center; }
.cb-lightbox__img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
	transform: scale(0.96);
	transition: transform 0.25s ease;
}
.cb-lightbox.is-open .cb-lightbox__img { transform: scale(1); }
.cb-lightbox__cap { margin-top: 1rem; color: #fff; font-family: "Cormorant Garamond", serif; font-size: 1.3rem; }
.cb-lightbox__close {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}
.cb-lightbox__close:hover { background: rgba(255, 255, 255, 0.28); }

/* Mapa: Google Maps real (izq) + panel de marca (der) */
.cb-locmap {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	border: 1px solid var(--cream-deep);
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(20, 32, 42, 0.14);
	background: #fff;
}
.cb-locmap__map { position: relative; min-height: 470px; }
.cb-locmap__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.cb-locmap__map::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(20, 32, 42, 0.06);
}
.cb-locmap__card {
	background: #fff;
	color: var(--ink);
	padding: clamp(2.25rem, 4vw, 3.25rem) clamp(1.75rem, 3vw, 2.75rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.cb-locmap__card .cb-logo__img--map { width: 84px; margin: 0 0 1.35rem; }
.cb-locmap__card .cb-rule { margin: 0 auto 1.4rem; }
.cb-locmap__tag {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 1.55rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--navy);
	max-width: 24ch;
	margin: 0 0 0.9rem;
}
.cb-locmap__addr {
	color: var(--muted);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0 0 1.75rem;
}
.cb-locmap__social { display: flex; gap: 0.75rem; margin-bottom: 1.9rem; }
.cb-locmap__social a {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1.5px solid var(--terracotta);
	color: var(--terracotta);
	display: grid;
	place-items: center;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.cb-locmap__social a:hover { background: var(--terracotta); color: #fff; transform: translateY(-2px); }
.cb-locmap__social svg { width: 18px; height: 18px; }
.cb-locmap__cta {
	margin: 0;
	padding: 0.85rem 2.4rem;
	box-shadow: 0 8px 20px rgba(225, 99, 62, 0.28);
}
.cb-locmap__cta:hover { box-shadow: 0 10px 24px rgba(225, 99, 62, 0.38); }

/* ---- Pie (hueso, texto oscuro) ---- */
.cb-footer { background: var(--bone); color: var(--ink); padding: 3.5rem 0 2rem; border-top: 1px solid var(--cream-deep); }
.cb-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; gap: 2rem; }
.cb-footer a { color: var(--muted); text-decoration: none; transition: color 0.2s ease; }
.cb-footer a:hover { color: var(--terracotta); }
.cb-footer__brand-col p { color: var(--muted); font-size: 0.9rem; margin: 1rem 0; }
.cb-footer__social { display: flex; gap: 1rem; font-size: 0.85rem; font-weight: 600; }
.cb-footer__social a { color: var(--navy); }
.cb-footer__title { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; font-size: 0.8rem; color: var(--navy); margin: 0 0 0.75rem; }
.cb-footer ul { list-style: none; margin: 0; padding: 0; line-height: 2; font-size: 0.9rem; }
.cb-footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--cream-deep); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--muted); }
.cb-footer__legal p { margin: 0; }

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet */
@media (max-width: 1023px) {
	.cb-cards--4 { grid-template-columns: repeat(2, 1fr); }
	.cb-trust { grid-template-columns: repeat(2, 1fr); }
	.cb-trust__item:nth-child(3) { border-left: 0; padding-left: 0; }
	.cb-trust__item:nth-child(odd):not(.cb-trust__item--score) { border-left: 0; padding-left: 0; }
	.cb-footer__grid { grid-template-columns: 1fr 1fr; }
	.cb-intro { grid-template-columns: 1fr 1.1fr; }
	.cb-intro__img { min-height: 340px; }
	.cb-locmap { grid-template-columns: 1fr; }
	.cb-locmap__map { min-height: 340px; }
	.cb-review { flex: 0 0 calc((100% - 1.5rem) / 2); }
}

/* Móvil */
@media (max-width: 767px) {
	.cb-header__inner { padding: 0.75rem 1rem; gap: 0.75rem; }
	.cb-logo__img { width: 72px; }

	/* menú: solo logo + hamburguesa (los enlaces van en el panel #cb-mnav) */
	.cb-nav--left,
	.cb-nav--right { display: none; }
	.cb-burger { display: flex; margin-left: auto; }

	.cb-hero { min-height: 88vh; padding-bottom: 120px; }
	.cb-hero__inner { padding-top: 5.5rem; }
	.cb-hero__title { margin-bottom: 1.5rem; }

	/* barra de reserva apilada */
	.cb-booking { padding: 1rem; }
	.cb-booking .mphb_sc_search-form { flex-direction: column; align-items: stretch; gap: 0.6rem; }
	.cb-booking .mphb_sc_search-form > p { flex: 1 1 auto; width: 100%; min-width: 0; }
	.cb-booking .mphb_sc_search-adults,
	.cb-booking .mphb_sc_search-children { flex: 1 1 auto; }

	/* barra de confianza apilada */
	.cb-trust {
		grid-template-columns: 1fr;
		gap: 0.75rem;
		padding: 1.1rem 1.25rem;
		width: calc(100% - 2rem);
		text-align: left;
	}
	.cb-trust__item { justify-content: flex-start; }
	.cb-trust__item + .cb-trust__item { border-left: 0; padding-left: 0; padding-top: 0.75rem; border-top: 1px solid var(--cream-deep); }
	.cb-trust__item--score { flex-direction: row; align-items: center; gap: 0.6rem; }

	.cb-section:first-of-type { padding-top: 9rem; } /* aire para la barra de confianza apilada */
	.cb-intro { grid-template-columns: 1fr; }
	.cb-intro__text { order: 2; }
	.cb-intro__img { min-height: 300px; }
	.cb-cards--4,
	.cb-cards--3 { grid-template-columns: 1fr; }
	.cb-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
	.cb-footer__legal { justify-content: flex-start; }
	/* slider: una reseña por vista, flechas pegadas a los bordes */
	.cb-slider { padding: 0 2.5rem; }
	.cb-slider__nav--prev { left: 0; }
	.cb-slider__nav--next { right: 0; }
	.cb-review { flex: 0 0 100%; padding: 1.75rem 1.5rem; }
	.cb-locmap__card { padding: 1.75rem 1.5rem; }
}

/* ============================================================
   Página Casa Bora (/casa-bora/)
   ============================================================ */
.cb-hero--page { padding-bottom: 0; }
.cb-hero--page .cb-hero__inner { max-width: 820px; }
.cb-hero--page .cb-hero__title { margin-bottom: 0.75rem; }
.cb-hero__eyebrow { color: rgba(255, 255, 255, 0.85); }
.cb-hero__sub {
	color: #fff;
	font-size: 1.15rem;
	line-height: 1.5;
	max-width: 46ch;
	margin: 0 auto 1.9rem;
	opacity: 0.95;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Barra de especificaciones */
.cb-specsbar { background: var(--cream); border-top: 1px solid var(--cream-deep); border-bottom: 1px solid var(--cream-deep); }
.cb-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.75rem; padding: 1.6rem 1.5rem; }
.cb-spec { display: flex; align-items: center; gap: 0.6rem; font-size: 0.98rem; font-weight: 500; color: var(--navy); }
.cb-spec svg { width: 26px; height: 26px; color: var(--terracotta); flex-shrink: 0; }

/* Filas alternadas (espacios de la casa) */
.cb-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.cb-feature--reverse .cb-feature__text { order: 2; }
.cb-feature__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; box-shadow: 0 26px 55px rgba(20, 32, 42, 0.16); }
.cb-feature__text h3 { font-size: clamp(1.9rem, 1.2rem + 2vw, 2.7rem); margin: 0 0 0.4rem; }
.cb-feature__text > p { color: var(--muted); }
.cb-feature__list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.cb-feature__list li { position: relative; padding-left: 1.5rem; color: var(--ink); font-size: 0.96rem; }
.cb-feature__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--terracotta); }

/* Galería */
.cb-gallery { columns: 3; column-gap: 1rem; }
.cb-gallery img { width: 100%; margin: 0 0 1rem; border-radius: 12px; break-inside: avoid; box-shadow: 0 10px 26px rgba(20, 32, 42, 0.1); cursor: zoom-in; }

/* Comodidades */
.cb-amenities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.5rem; }
.cb-amenity { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 1.15rem; background: var(--white); border: 1px solid var(--cream-deep); border-radius: 12px; }
.cb-section--cream .cb-amenity { background: #fff; }
.cb-amenity svg { width: 26px; height: 26px; color: var(--terracotta); flex-shrink: 0; }
.cb-amenity span { font-size: 0.95rem; color: var(--ink); }

/* Banda CTA final */
.cb-ctaband { background: var(--navy); color: #fff; text-align: center; padding: clamp(3.5rem, 7vw, 6rem) 1.5rem; }
.cb-ctaband .cb-eyebrow { color: var(--terracotta); }
.cb-ctaband h2 { color: #fff; }
.cb-ctaband p { color: rgba(255, 255, 255, 0.8); max-width: 46ch; margin: 0 auto 1.9rem; }
.cb-ctaband__btn { box-shadow: 0 10px 26px rgba(225, 99, 62, 0.4); }

@media (max-width: 1023px) {
	.cb-amenities { grid-template-columns: repeat(2, 1fr); }
	.cb-gallery { columns: 2; }
}
@media (max-width: 767px) {
	.cb-feature { grid-template-columns: 1fr; }
	.cb-feature__text { order: 2 !important; }
	.cb-feature__img { order: 1; }
	.cb-amenities { grid-template-columns: 1fr; }
	.cb-gallery { columns: 1; }
	.cb-specs { gap: 0.9rem 1.75rem; }
}

/* ---- Ajustes pagina Casa Bora y modal de reserva ---- */
.cb-page-casa .cb-section-heading { margin-bottom: 0; }
.cb-section--feature-stack { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.cb-booking-open { border: 0; cursor: pointer; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.cb-hero__reserve { margin-top: 0.25rem; }
.cb-booking-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.cb-booking-modal.is-open { display: flex; }
.cb-booking-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 32, 42, 0.72);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.cb-booking-modal__panel {
	position: relative;
	z-index: 1;
	width: min(760px, 100%);
	max-height: calc(100vh - 3rem);
	overflow: auto;
	background: var(--white);
	border-radius: 16px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38);
	padding: clamp(1.5rem, 4vw, 2.6rem);
	text-align: center;
}
.cb-booking-modal__panel h2 { margin-bottom: 0.5rem; }
.cb-booking-modal__intro { color: var(--muted); max-width: 42ch; margin: 0 auto 1.5rem; }
.cb-booking-modal__close {
	position: absolute;
	top: 0.85rem;
	right: 0.9rem;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--cream);
	color: var(--navy);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}
.cb-booking-modal__close:hover { background: var(--cream-deep); }
.cb-booking--modal {
	background: var(--cream);
	border-color: var(--cream-deep);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}
.cb-booking--modal .mphb_sc_search-form label {
	color: var(--navy);
	text-shadow: none;
}
.cb-booking--modal .mphb_sc_search-submit-button-wrapper .button,
.cb-booking--modal input[type="submit"] { width: 100%; }
body.cb-modal-open { overflow: hidden; }

@media (max-width: 767px) {
	.cb-booking-modal { padding: 0.75rem; align-items: flex-end; }
	.cb-booking-modal__panel { max-height: calc(100vh - 1.5rem); padding-top: 2.8rem; }
}

/* ---- /casa-bora: reserva visible y galeria ---- */
body.cb-casa-bora-route {
	margin: 0;
	padding: 0;
}
body.cb-casa-bora-route:not(.admin-bar) .cb-header--overlay { top: 0; }
.cb-page-casa { margin: 0; }
.cb-page-casa .cb-hero--page {
	min-height: 100vh;
	padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.cb-page-casa .cb-hero--page .cb-hero__inner {
	max-width: 980px;
	padding-top: clamp(7rem, 12vh, 9rem);
}
.cb-booking--page {
	width: min(940px, 100%);
	margin: 1.25rem auto 1.05rem;
	background: rgba(254, 251, 246, 0.78);
	border-color: rgba(255, 255, 255, 0.58);
	box-shadow: 0 24px 70px rgba(20, 32, 42, 0.34);
}
.cb-booking--page .mphb_sc_search-form label {
	color: var(--navy);
	text-shadow: none;
}
.cb-booking--page .mphb-datepick,
.cb-booking--page .mphb_sc_search-form select {
	border-color: rgba(46, 58, 68, 0.14);
	box-shadow: 0 8px 22px rgba(20, 32, 42, 0.08);
}

.cb-gallery--casa {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 210px;
	gap: 1rem;
	columns: auto;
}
.cb-gallery--casa .cb-gallery__item {
	position: relative;
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	background: var(--cream);
	box-shadow: 0 16px 36px rgba(20, 32, 42, 0.12);
}
.cb-gallery--casa .cb-gallery__item--large {
	grid-column: span 2;
	grid-row: span 2;
}
.cb-gallery--casa .cb-gallery__item:nth-child(6) { grid-column: span 2; }
.cb-gallery--casa img {
	width: 100%;
	height: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	box-shadow: none;
	transition: transform 0.35s ease, filter 0.35s ease;
}
.cb-gallery--casa .cb-gallery__item:hover img {
	transform: scale(1.045);
	filter: saturate(1.04) contrast(1.03);
}
.cb-gallery--casa figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2.8rem 1rem 0.9rem;
	background: linear-gradient(to bottom, transparent, rgba(20, 32, 42, 0.82));
	color: #fff;
	font-size: 0.84rem;
	font-weight: 600;
	text-align: left;
	pointer-events: none;
}

@media (min-width: 783px) {
	body.admin-bar .cb-header--overlay { top: 32px; }
}
@media (max-width: 1023px) {
	.cb-gallery--casa { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 220px; }
}
@media (max-width: 767px) {
	.cb-page-casa .cb-hero--page { min-height: auto; padding-bottom: 2rem; }
	.cb-page-casa .cb-hero--page .cb-hero__inner { padding-top: 6rem; }
	.cb-booking--page { margin: 1rem auto 0.85rem; }

	.cb-gallery--casa { grid-template-columns: 1fr; grid-auto-rows: 260px; }
	.cb-gallery--casa .cb-gallery__item--large,
	.cb-gallery--casa .cb-gallery__item:nth-child(6) { grid-column: auto; grid-row: auto; }
}
/* ---- Galeria navegable y animada ---- */
.cb-gallery--casa.is-enhanced .cb-gallery__item {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity 0.55s ease var(--cb-gallery-delay, 0ms),
		transform 0.55s ease var(--cb-gallery-delay, 0ms),
		box-shadow 0.3s ease;
}
.cb-gallery--casa.is-enhanced .cb-gallery__item.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.cb-gallery--casa .cb-zoom:focus-visible {
	outline: 3px solid var(--terracotta);
	outline-offset: -5px;
}

.cb-lightbox {
	overscroll-behavior: contain;
	touch-action: pan-y;
}
.cb-lightbox__fig {
	position: relative;
	width: min(100%, 1100px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.cb-lightbox__img {
	object-fit: contain;
	opacity: 1;
	user-select: none;
	-webkit-user-drag: none;
	transition: opacity 0.22s ease, transform 0.25s ease;
}
.cb-lightbox.is-changing .cb-lightbox__img {
	opacity: 0;
	transform: scale(0.985);
}
.cb-lightbox__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
	transform: translateY(-50%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.2s ease, transform 0.2s ease;
}
.cb-lightbox__nav:hover,
.cb-lightbox__nav:focus-visible {
	background: var(--terracotta);
	outline: none;
	transform: translateY(-50%) scale(1.05);
}
.cb-lightbox__nav--prev { left: clamp(0.75rem, 3vw, 3rem); }
.cb-lightbox__nav--next { right: clamp(0.75rem, 3vw, 3rem); }
.cb-lightbox__nav[hidden],
.cb-lightbox__counter[hidden] { display: none; }
.cb-lightbox__counter {
	position: absolute;
	left: 50%;
	bottom: 1.15rem;
	z-index: 2;
	margin: 0;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.13);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	transform: translateX(-50%);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

@media (prefers-reduced-motion: reduce) {
	.cb-gallery--casa.is-enhanced .cb-gallery__item,
	.cb-lightbox__img,
	.cb-lightbox__nav {
		transition: none;
	}
}

/* ---- Optimizacion movil, sin alterar la estructura ---- */
@media (max-width: 767px) {
	.cb-wrap { padding-right: 1rem; padding-left: 1rem; }
	.cb-section { padding-top: 3.75rem; padding-bottom: 3.75rem; }
	.cb-header__inner { min-height: 80px; }
	.cb-nav__cta { white-space: nowrap; }

	.cb-booking .mphb-datepick,
	.cb-booking .mphb_sc_search-form select,
	.cb-booking input[type="submit"] { min-height: 46px; }
	.cb-booking .mphb_sc_search-submit-button-wrapper,
	.cb-booking .mphb_sc_search-submit-button-wrapper .button,
	.cb-booking input[type="submit"] { width: 100%; }

	.cb-page-casa .cb-section:first-of-type { padding-top: 3.75rem; }
	.cb-page-casa .cb-hero--page .cb-hero__inner {
		padding: 5.75rem 1rem 1rem;
	}
	.cb-page-casa .cb-hero__sub {
		margin-bottom: 1.2rem;
		font-size: 1rem;
		line-height: 1.45;
	}
	.cb-booking--page {
		width: 100%;
		padding: 0.85rem;
		border-radius: 12px;
	}
	.cb-specs {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.9rem 1rem;
		padding: 1.25rem 1rem;
	}
	.cb-spec {
		align-items: flex-start;
		font-size: 0.84rem;
		line-height: 1.35;
	}
	.cb-spec svg {
		width: 22px;
		height: 22px;
	}
	.cb-feature { gap: 1.4rem; }
	.cb-feature__img {
		border-radius: 10px;
		box-shadow: 0 16px 35px rgba(20, 32, 42, 0.14);
	}
	.cb-intro__img { min-height: 0; }
	.cb-amenity { padding: 0.9rem 1rem; }

	.cb-gallery--casa {
		grid-auto-rows: clamp(230px, 72vw, 300px);
		gap: 0.75rem;
	}
	.cb-gallery--casa .cb-gallery__item { border-radius: 12px; }

	.cb-ctaband { padding: 3.5rem 1rem; }
	.cb-footer { padding-top: 3rem; }

	.cb-booking-modal__panel {
		width: 100%;
		padding-right: 1rem;
		padding-left: 1rem;
		border-radius: 12px 12px 0 0;
	}

	.cb-lightbox { padding: 0.75rem; }
	.cb-lightbox__fig {
		width: 100%;
		max-width: 100%;
		max-height: 100%;
		padding: 3.75rem 0.25rem 3rem;
	}
	.cb-lightbox__img {
		max-width: 100%;
		max-height: calc(100svh - 10rem);
		border-radius: 8px;
	}
	.cb-lightbox__cap {
		max-width: calc(100% - 3rem);
		margin-top: 0.75rem;
		font-size: 1.05rem;
		line-height: 1.25;
	}
	.cb-lightbox__close {
		top: 0.75rem;
		right: 0.75rem;
		width: 44px;
		height: 44px;
	}
	.cb-lightbox__nav {
		width: 44px;
		height: 44px;
		font-size: 2.1rem;
	}
	.cb-lightbox__nav--prev { left: 0.5rem; }
	.cb-lightbox__nav--next { right: 0.5rem; }
	.cb-lightbox__counter { bottom: 0.75rem; }
}
/* ---- Home: ajuste movil aislado ---- */
@media (max-width: 767px) {
	body.home .cb-header__inner {
		width: 100%;
		min-height: 78px;
		justify-content: space-between;
		gap: 0.75rem;
		padding: 0.65rem 1rem;
	}
	body.home .cb-logo { flex: 0 0 auto; }
	body.home .cb-logo__img { width: 64px; }
	body.home .cb-nav--right {
		flex: 0 0 auto;
		width: auto;
		min-width: 0;
		gap: 0;
	}
	body.home .cb-nav__cta {
		margin: 0;
		padding: 0.65rem 1rem;
		font-size: 0.8rem;
		line-height: 1.2;
		white-space: nowrap;
	}

	body.home .cb-hero {
		min-height: auto;
		justify-content: flex-start;
		padding: 0 0 1rem;
		background-position: 55% center;
	}
	body.home .cb-hero__inner {
		padding: 6.5rem 1rem 0;
	}
	body.home .cb-hero__title {
		max-width: 100%;
		margin: 0 auto 1.25rem;
		font-size: 2.55rem;
		line-height: 1.04;
	}
	body.home .cb-booking {
		width: 100%;
		padding: 0.85rem;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.48);
	}
	body.home .cb-booking .mphb_sc_search-form { gap: 0.55rem; }
	body.home .cb-booking .mphb_sc_search-form label {
		margin-bottom: 0.2rem;
		font-size: 0.68rem;
	}

	body.home .cb-trust {
		position: relative;
		left: auto;
		bottom: auto;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
		width: calc(100% - 2rem);
		margin: 1rem auto 0;
		padding: 0.65rem 1rem;
		border-radius: 12px;
		transform: none;
	}
	body.home .cb-trust__item,
	body.home .cb-trust__item + .cb-trust__item {
		min-width: 0;
		justify-content: flex-start;
		gap: 0.55rem;
		padding: 0.75rem 0;
		border: 0;
		font-size: 0.78rem;
		line-height: 1.3;
	}
	body.home .cb-trust__item:nth-child(even) {
		padding-left: 0.75rem;
		border-left: 1px solid var(--cream-deep);
	}
	body.home .cb-trust__item:nth-child(odd) { padding-right: 0.75rem; }
	body.home .cb-trust__item:nth-child(n + 3) {
		border-top: 1px solid var(--cream-deep);
	}
	body.home .cb-trust__svg {
		width: 18px;
		height: 18px;
		padding: 6px;
	}
	body.home .cb-trust__num { font-size: 2rem; }
	body.home .cb-trust__label { font-size: 0.72rem; }
	body.home .cb-trust__title { overflow-wrap: anywhere; }

	body.home .cb-section:first-of-type { padding-top: 3.75rem; }
	body.home .cb-section > .cb-wrap > h2.cb-center { margin-bottom: 1.75rem; }
	body.home .cb-intro { gap: 1.75rem; }
	body.home .cb-cards { gap: 2rem; }
	body.home .cb-card .cb-rounded { margin-bottom: 0.75rem; }
	body.home .cb-leaf { width: 84px; opacity: 0.3; }

	body.home .cb-slider { padding: 0 2rem; }
	body.home .cb-review { padding: 1.5rem 1.25rem; }

	body.home .cb-locmap {
		border-radius: 12px;
		box-shadow: 0 16px 38px rgba(20, 32, 42, 0.12);
	}
	body.home .cb-locmap__map { min-height: 300px; }
	body.home .cb-locmap__card { padding: 1.5rem 1.25rem; }

	body.home .cb-footer__social { flex-wrap: wrap; }
	body.home .cb-footer__legal {
		font-size: 0.75rem;
		line-height: 1.6;
	}
}

@media (max-width: 359px) {
	body.home .cb-header__inner { padding-right: 0.75rem; padding-left: 0.75rem; }
	body.home .cb-logo__img { width: 58px; }
	body.home .cb-nav__cta { padding-right: 0.8rem; padding-left: 0.8rem; }
	body.home .cb-hero__inner { padding-right: 0.75rem; padding-left: 0.75rem; }
	body.home .cb-hero__title { font-size: 2.25rem; }
	body.home .cb-trust {
		grid-template-columns: 1fr;
		width: calc(100% - 1.5rem);
	}
	body.home .cb-trust__item,
	body.home .cb-trust__item + .cb-trust__item {
		padding: 0.7rem 0;
		border: 0;
	}
	body.home .cb-trust__item + .cb-trust__item {
		border-top: 1px solid var(--cream-deep);
	}
}

/* ============================================================
   Experiencias (/experiencias/)
   ============================================================ */

.cb-cards--2 { grid-template-columns: repeat(2, 1fr); }

/* Medida legible: la intro no se estira hasta el borde del contenedor. */
.cb-exp-intro {
	max-width: 62ch;
	margin: 0 auto;
	text-align: center;
}
.cb-exp-intro p {
	margin: 0;
	color: var(--muted);
	font-size: 1.08rem;
}

/* La distancia es el dato que decide la visita: se separa y lleva el acento. */
.cb-place__body .cb-exp__meta {
	margin: 0.8rem 0 0;
	padding-top: 0.7rem;
	border-top: 1px solid var(--cream-deep);
	color: var(--terracotta);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Las calas secundarias respiran despues de la destacada. */
.cb-exp-more { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* ---- BoraEntorno: datos practicos de acceso ---- */
/* Ley de region comun: cada dato es una tarjeta cerrada, para que se escanee
   de un vistazo y no se lea como un parrafo. */
.cb-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(0.75rem, 1.5vw, 1.1rem);
	margin: 2.5rem 0 0;
	padding: 0;
}
.cb-fact {
	padding: 1.15rem 1.25rem;
	background: var(--cream);
	border-radius: 14px;
	border-left: 3px solid var(--terracotta);
}
.cb-fact dt {
	margin-bottom: 0.35rem;
	color: var(--terracotta);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.cb-fact dd {
	margin: 0;
	color: var(--ink);
	font-size: 0.95rem;
	line-height: 1.5;
}
.cb-fact dd a { color: var(--terracotta); }
.cb-facts__note {
	max-width: 70ch;
	margin: 1.75rem auto 0;
	color: var(--muted);
	font-size: 0.8rem;
	line-height: 1.6;
	text-align: center;
}

@media (max-width: 1023px) {
	.cb-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
	.cb-facts { grid-template-columns: 1fr; }
}

/* Creditos CC BY-SA: obligatorios por licencia, pero deben pasar desapercibidos.
   Nota al pie entre la franja CTA y el pie. Sin .cb-section a proposito: esa clase
   entra en el scroll-snap de escritorio con min-height:100vh. */
.cb-credits-bar {
	padding: 0.9rem 1.5rem;
	background: var(--white);
}
.cb-credits {
	max-width: 90ch;
	margin: 0 auto;
	color: var(--muted);
	font-size: 0.68rem;
	line-height: 1.5;
	text-align: center;
	opacity: 0.65;
}
.cb-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cb-credits a:hover { color: var(--terracotta); }

@media (max-width: 767px) {
	.cb-cards--2 { grid-template-columns: 1fr; }
	.cb-exp-intro { text-align: left; }
}

/* ============================================================
   Movil: el buscador cabe en el hero si pregunta menos
   ------------------------------------------------------------
   Encogerlo no bastaba: cuatro campos apilados, cada uno con su
   etiqueta encima, se comian media pantalla (~350px), y apretados
   se quedaban en ~265px. El alto no estaba en el tamano de los
   campos, estaba en el NUMERO de campos.
   Asi que en movil el hero pregunta solo lo imprescindible:
   entrada y salida compartiendo fila, y el boton debajo. Baja a
   ~160px y la foto se queda con el resto de la pantalla.
   Misma jugada que casalakeland.com: dos fechas y a reservar.
   En escritorio no cambia nada: los cuatro campos en horizontal.
   ============================================================ */
@media (max-width: 767px) {
	.cb-hero .cb-booking { padding: 0.85rem; }

	/* Las dos fechas comparten fila. Hay que anular a mano el
	   flex-direction:column de la linea ~632, que apila todo. */
	.cb-hero .cb-booking .mphb_sc_search-form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
		gap: 0.6rem;
	}
	.cb-hero .cb-booking .mphb_sc_search-check-in-date,
	.cb-hero .cb-booking .mphb_sc_search-check-out-date {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	/* Fuera Adultos y Ninos. Son <select>, y display:none NO impide
	   que envien su valor por defecto (eso solo lo hace disabled),
	   asi que la busqueda sigue saliendo valida.
	   Con un solo alojamiento el filtro de ocupacion no descarta
	   nada: el huesped fija los viajeros en el checkout.
	   OJO: esto asume TARIFA PLANA. Si algun dia se cobra por
	   persona, el buscador cotizaria siempre con el minimo y habria
	   que devolver los campos. */
	.cb-hero .cb-booking .mphb_sc_search-adults,
	.cb-hero .cb-booking .mphb_sc_search-children { display: none; }

	/* El boton, fila propia y a todo lo ancho. */
	.cb-hero .cb-booking .mphb_sc_search-submit-button-wrapper {
		flex: 1 1 100%;
		width: 100%;
	}

	/* La foto se lleva el alto que sobra; el buscador se apoya abajo.
	   Ya no hay que reservar sitio para la barra de confianza: en movil
	   baja entera fuera del hero (bloque de las barras que ruedan). */
	body.home .cb-hero {
		min-height: 88vh;
		justify-content: flex-end;
		padding-bottom: 2.5rem;
	}
	body.home .cb-hero__inner { padding-top: 4.5rem; }
	body.home .cb-hero__title {
		margin-bottom: 1.15rem;
		font-size: 2.1rem;
	}

	.cb-page-casa .cb-hero--page {
		min-height: 78vh;
		justify-content: flex-end;
	}
	.cb-page-casa .cb-hero--page .cb-hero__inner { padding-bottom: 1.5rem; }
	.cb-page-casa .cb-hero__title { font-size: 2.1rem; }

	/* Fuera los subtitulos: en un movil son tres lineas de texto tapando la
	   foto justo debajo del titular, que ya dice lo mismo. El texto sigue en
	   el HTML para buscadores y lectores de pantalla; solo se oculta el ruido
	   visual. En escritorio se siguen viendo.
	   Se repite el selector con .cb-page-casa a proposito: esa regla existe mas
	   arriba (linea ~1010) con mas peso y colaria su margin-bottom. */
	.cb-hero__sub,
	.cb-page-casa .cb-hero__sub {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ============================================================
   Movil: las barras de iconos ruedan en horizontal
   ------------------------------------------------------------
   La de confianza (home), las distancias (/casa-bora/) y la ficha
   (/habitaciones/) se apilaban en 2 columnas y empujaban la pagina
   hacia abajo. Ahora ruedan en una sola fila.
   El siguiente item ASOMA a proposito (max-width < 100%): sin ese
   recorte visible nadie adivina que aquello se desliza.
   Sin JS: scroll-snap nativo, asi no toca el carrusel de resenas.
   ============================================================ */
@media (max-width: 767px) {
	body.home .cb-trust,
	.cb-specs {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 0;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	body.home .cb-trust::-webkit-scrollbar,
	.cb-specs::-webkit-scrollbar { display: none; }

	body.home .cb-trust__item,
	body.home .cb-trust__item + .cb-trust__item,
	.cb-spec {
		flex: 0 0 auto;
		max-width: 78%;
		scroll-snap-align: start;
	}

	/* Barra de confianza (home) */
	body.home .cb-trust { padding: 0.45rem 1rem; }

	/* Y baja entera debajo del hero. En escritorio va a caballo del
	   borde (el translate del 50% la deja mitad dentro, mitad fuera);
	   en movil, montada sobre la foto, tapaba el alojamiento justo
	   debajo del buscador. Ahora su borde superior queda al filo del
	   hero y cae sobre la seccion crema, que ya reserva el hueco con
	   su padding-top de 9rem (linea ~649).
	   El hero no lleva overflow, asi que no la recorta.

	   Se pina a los dos bordes en vez de centrarla: el left:50% +
	   translate(-50%) de la linea ~315 depende de que gane su width, y
	   ahi se quedaba a media pantalla. Con left/right a 0 y width:auto
	   la caja mide la pantalla entera y no hay nada que pisar.
	   Va a sangre, de lado a lado: sin carril y sin las esquinas
	   redondeadas de la linea ~320, que solo tienen sentido cuando es
	   una tarjeta flotando sobre la foto. Aqui es una franja. */
	body.home .cb-trust {
		left: 0;
		right: 0;
		width: auto;
		max-width: none;
		border-radius: 0;
		transform: translateY(100%);
	}
	body.home .cb-trust__item,
	body.home .cb-trust__item + .cb-trust__item {
		padding: 0.6rem 1.05rem 0.6rem 0;
		margin-right: 1.05rem;
		border: 0;
		border-right: 1px solid var(--cream-deep);
	}
	body.home .cb-trust__item:last-child {
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
	}

	/* Distancias (/casa-bora/) y ficha (/habitaciones/) */
	.cb-specs { padding: 1rem; }
	.cb-spec {
		align-items: center;
		padding-right: 1.1rem;
		margin-right: 1.1rem;
		border-right: 1px solid var(--cream-deep);
		white-space: nowrap;
	}
	.cb-spec:last-child {
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
	}
}