/*
 * Inprodi Booking — multi-step booking wizard on the dark contact hero.
 * A background photo fades to black (home-CTA style) under an eyebrow + 2-row
 * title (Geist uppercase + Angelface script accent — the brand heading system
 * shared with the CTA / band / about sections). Below: a numbered stepper,
 * three panels (destination /
 * dates / details) and prev–next navigation. Submits over AJAX. On-brand.
 */

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

.inprodi-booking {
	width: 100%;
	background-color: #f8eee7; /* cream seam so it melts into the (cream) footer */
}

/* ---- Hero ---- */
.inprodi-booking__hero {
	position: relative;
	width: 100%;
	padding: 96px 0 120px;
	background-color: #f8eee7;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}

/* Lighter up top so the photo keeps its real colors, still dark enough behind the
   centered form, then fades to the cream footer at the bottom (one seamless section). */
.inprodi-booking__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.30) 0%,
		rgba(0, 0, 0, 0.50) 38%,
		rgba(0, 0, 0, 0.66) 70%,
		rgba(0, 0, 0, 0.58) 86%,
		#f8eee7 100%
	);
}

.inprodi-booking__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.125rem;
	color: #ffffff;
}

.inprodi-booking__eyebrow {
	color: #ffffff;
	opacity: 0.85;
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Brand heading system (Geist uppercase statement + Angelface script accent),
   matching the CTA / band / about sections. Replaces the retired Playfair. */
.inprodi-booking__title {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: #ffffff;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); /* legible over the lighter scrim */
	font-family: 'Playfair Display', serif;
	font-weight: 500;
	font-size: 2.375rem; /* 38px mobile */
	line-height: 1.1;
}

.inprodi-booking__title-reg {
	text-transform: none;
	letter-spacing: normal;
	text-indent: 0;
}

.inprodi-booking__title-it {
	font-family: 'Playfair Display', serif;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-size: 1em;
	line-height: 1.05;
	margin-top: 0.08em;
}

.inprodi-booking__subtitle {
	margin: 0;
	max-width: 32rem;
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	font-family: var(--nk-font-sans);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

/* ---- Form shell ---- */
.inprodi-booking__form {
	position: relative;
	width: 100%;
	max-width: 560px;
	margin-top: 1rem;
	text-align: left;
}

/* Honeypot */
.inprodi-booking__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ---- Numbered stepper ---- */
.inprodi-booking__steps {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.inprodi-booking__step {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

/* connector line between step numbers */
.inprodi-booking__step::before {
	content: '';
	position: absolute;
	top: 19px; /* half of the 38px circle */
	left: -50%;
	width: 100%;
	height: 2px;
	background-color: rgba(255, 255, 255, 0.22);
	transition: background-color 0.35s ease;
}

.inprodi-booking__step:first-child::before {
	display: none;
}

.inprodi-booking__step.is-done::before {
	background-color: rgba(255, 255, 255, 0.85);
}

.inprodi-booking__step-num {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	background-color: rgba(0, 0, 0, 0.35);
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--nk-font-sans);
	font-size: 15px;
	font-weight: 600;
	transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.inprodi-booking__step-num svg {
	display: none;
}

.inprodi-booking__step.is-active .inprodi-booking__step-num {
	border-color: #ffffff;
	background-color: #ffffff;
	color: #000000;
}

.inprodi-booking__step.is-done .inprodi-booking__step-num {
	border-color: #ffffff;
	background-color: #ffffff;
	color: #000000;
}

.inprodi-booking__step.is-done .inprodi-booking__step-digit {
	display: none;
}

.inprodi-booking__step.is-done .inprodi-booking__step-num svg {
	display: block;
}

.inprodi-booking__step-label {
	font-family: var(--nk-font-sans);
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.65);
	transition: color 0.35s ease;
}

.inprodi-booking__step.is-active .inprodi-booking__step-label,
.inprodi-booking__step.is-done .inprodi-booking__step-label {
	color: #ffffff;
}

/* ---- Panels ---- */
.inprodi-booking__panel {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0; /* allow fieldset to shrink */
	display: none;
	flex-direction: column;
	gap: 1rem;
	animation: inprodi-booking-fade 0.4s ease both;
}

.inprodi-booking__panel.is-active {
	display: flex;
}

@keyframes inprodi-booking-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

.inprodi-booking__panel-title {
	margin: 0;
	padding: 0;
	color: #ffffff;
	font-family: 'Geist', sans-serif;
	font-weight: 400;
	letter-spacing: 0.02em;
	font-size: 1.5rem; /* 24px */
	line-height: 1.2;
}

.inprodi-booking__panel-hint {
	margin: 0.5rem 0 0;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--nk-font-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
}

/* ---- Step 1: destination boxes ----
   Sin fotos pequeñas: cada destino es un recuadro limpio (marco + nombre), en la
   línea de las tarjetas del resto del sitio. La foto del destino sigue viva: al
   elegirlo, el fondo de la sección hace crossfade a ella (data-bg + JS). */
.inprodi-booking__dest-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.625rem;
}

.inprodi-booking__dest {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	background-color: rgba(255, 255, 255, 0.08);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

.inprodi-booking__dest:hover {
	border-color: rgba(255, 255, 255, 0.7);
	background-color: rgba(255, 255, 255, 0.16);
}

.inprodi-booking__dest-input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* El scrim y el check redondo eran para las tarjetas-foto; ya no aplican. */
.inprodi-booking__dest-scrim,
.inprodi-booking__dest-check {
	display: none;
}

.inprodi-booking__dest-name {
	color: #ffffff;
	font-family: var(--nk-font-sans);
	font-size: 0.9375rem; /* 15px */
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1.25;
}

/* Seleccionado: se rellena en blanco, sin color extra. */
.inprodi-booking__dest:has(.inprodi-booking__dest-input:checked) {
	border-color: #ffffff;
	background-color: #ffffff;
}

.inprodi-booking__dest:has(.inprodi-booking__dest-input:checked) .inprodi-booking__dest-name {
	color: #1c3f58;
	font-weight: 500;
}

.inprodi-booking__dest:has(.inprodi-booking__dest-input:focus-visible) {
	outline: 2px solid rgba(255, 255, 255, 0.7);
	outline-offset: 2px;
}

/* ---- Step 2: fields + calendario de rango (inicio → regreso) ---- */
.inprodi-booking__field-group {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.inprodi-booking__label {
	color: rgba(255, 255, 255, 0.9);
	font-family: var(--nk-font-sans);
	font-size: 0.9375rem;
	font-weight: 500;
}

.inprodi-booking__field {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-family: var(--nk-font-sans);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}

/* Campo abierto. `font: inherit` no es adorno: los <textarea> NO heredan la
   tipografía del documento, se quedan con la monoespaciada del navegador, y
   junto a los <input> de al lado el contraste canta. El resto es que crezca solo
   hacia abajo (nunca a lo ancho, que rompería la caja de cristal). */
.inprodi-booking__field--area {
	display: block;
	min-height: 108px;
	resize: vertical;
	font: inherit;
	font-size: 1rem; /* 16px: por debajo de esto iOS hace zoom al enfocar */
	line-height: 1.5;
}

.inprodi-booking__field::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.inprodi-booking__field:focus {
	outline: none;
	border-color: #ffffff;
	background-color: rgba(255, 255, 255, 0.16);
}

/* Inline mini-calendar (custom date picker) */
.inprodi-booking__cal {
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.08);
	font-family: var(--nk-font-sans);
	color: #ffffff;
}

.inprodi-booking__cal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.inprodi-booking__cal-title {
	font-size: 1rem;
	font-weight: 600;
	text-transform: capitalize;
}

.inprodi-booking__cal-nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.inprodi-booking__cal-nav:hover {
	background-color: rgba(255, 255, 255, 0.18);
	border-color: #ffffff;
}

.inprodi-booking__cal-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* Sin hueco entre columnas: el rango pinta una banda continua de lunes a
   domingo. El aire entre días lo dan el radio y el propio ancho de la celda. */
.inprodi-booking__cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px 0;
}

.inprodi-booking__cal-wd {
	margin-bottom: 6px;
}

.inprodi-booking__cal-wdname {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	padding: 2px 0;
}

.inprodi-booking__cal-day {
	aspect-ratio: 1 / 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 9px;
	background-color: transparent;
	color: #ffffff;
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.inprodi-booking__cal-day:hover {
	background-color: rgba(255, 255, 255, 0.16);
}

.inprodi-booking__cal-day:disabled {
	color: rgba(255, 255, 255, 0.28);
	cursor: default;
}

.inprodi-booking__cal-day:disabled:hover {
	background-color: transparent;
}

.inprodi-booking__cal-day.is-today {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45) inset;
}

/* Rango: los dos extremos van sólidos y los días de en medio, en una banda
   tenue. Los radios se recortan hacia dentro para que inicio y fin cierren la
   banda por fuera. */
.inprodi-booking__cal-day.is-selected {
	background-color: #ffffff;
	color: #000000;
	font-weight: 600;
}

.inprodi-booking__cal-day.is-in-range {
	background-color: rgba(255, 255, 255, 0.16);
	border-radius: 0;
}

.inprodi-booking__cal-day.is-in-range:hover {
	background-color: rgba(255, 255, 255, 0.26);
}

.inprodi-booking__cal-day.is-start {
	border-radius: 9px 0 0 9px;
}

.inprodi-booking__cal-day.is-end {
	border-radius: 0 9px 9px 0;
}

.inprodi-booking__cal-empty {
	aspect-ratio: 1 / 1;
}

/* Lectura del rango elegido (sustituye al viejo contador de días) */
.inprodi-booking__range {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 12px;
	background-color: rgba(255, 255, 255, 0.08);
	font-family: var(--nk-font-sans);
	color: #ffffff;
}

.inprodi-booking__range-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.inprodi-booking__range-key {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.inprodi-booking__range-val {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
}

.inprodi-booking__range-arrow {
	display: inline-flex;
	color: rgba(255, 255, 255, 0.5);
}

.inprodi-booking__range-len {
	margin-left: auto;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.8);
	white-space: nowrap;
}

.inprodi-booking__range-len:empty {
	display: none;
}

/* ---- Step 3: recap ---- */
.inprodi-booking__recap {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.05);
}

.inprodi-booking__recap-label {
	font-family: var(--nk-font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.inprodi-booking__recap-row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	color: #ffffff;
	font-family: var(--nk-font-sans);
	font-size: 0.9375rem;
}

.inprodi-booking__recap-row svg {
	flex: 0 0 auto;
	opacity: 0.7;
}

/* ---- Navigation ---- */
.inprodi-booking__nav {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.inprodi-booking__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 12px;
	font-family: var(--nk-font-sans);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.02em;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.inprodi-booking__btn--back {
	border: 1px solid rgba(255, 255, 255, 0.3);
	background-color: transparent;
	color: rgba(255, 255, 255, 0.85);
}

.inprodi-booking__btn--back:hover {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.6);
}

.inprodi-booking__btn--next,
.inprodi-booking__btn--submit {
	flex: 1 1 auto;
	border: 1px solid #ffffff;
	background-color: #ffffff;
	color: #000000;
}

.inprodi-booking__btn--next:hover,
.inprodi-booking__btn--submit:hover {
	background-color: rgba(255, 255, 255, 0.88);
}

.inprodi-booking__btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.inprodi-booking__chev {
	transition: transform 0.3s ease;
}

.inprodi-booking__btn--next:hover .inprodi-booking__chev,
.inprodi-booking__btn--submit:hover .inprodi-booking__chev {
	transform: translateX(3px);
}

/* Nav visibility is state-driven (data-step on the form) */
.inprodi-booking__btn--back { display: none; }
.inprodi-booking__btn--submit { display: none; }

.inprodi-booking__form[data-step="1"] .inprodi-booking__btn--back { display: none; }
.inprodi-booking__form[data-step="2"] .inprodi-booking__btn--back,
.inprodi-booking__form[data-step="3"] .inprodi-booking__btn--back { display: inline-flex; }

.inprodi-booking__form[data-step="3"] .inprodi-booking__btn--next { display: none; }
.inprodi-booking__form[data-step="3"] .inprodi-booking__btn--submit { display: inline-flex; }

/* ---- Feedback ---- */
.inprodi-booking__feedback {
	margin: 0.85rem 0 0;
	text-align: center;
	font-family: var(--nk-font-sans);
	font-size: 0.9375rem;
	line-height: 1.5;
	min-height: 1.25rem;
}

.inprodi-booking__feedback.is-ok { color: #86efac; }
.inprodi-booking__feedback.is-err { color: #fca5a5; }

/* ---- Success state ---- */
.inprodi-booking__success {
	display: none;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding: 2rem 1rem;
}

.inprodi-booking__form.is-sent .inprodi-booking__steps,
.inprodi-booking__form.is-sent .inprodi-booking__panels,
.inprodi-booking__form.is-sent .inprodi-booking__nav,
.inprodi-booking__form.is-sent .inprodi-booking__feedback {
	display: none;
}

.inprodi-booking__form.is-sent .inprodi-booking__success {
	display: flex;
	animation: inprodi-booking-fade 0.45s ease both;
}

.inprodi-booking__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	color: #ffffff;
}

.inprodi-booking__success-text {
	margin: 0;
	max-width: 26rem;
	color: #ffffff;
	font-family: var(--nk-font-sans);
	font-size: 1.0625rem;
	line-height: 1.55;
}

/* ---- Social ---- */
.inprodi-booking__social {
	display: flex;
	gap: 0.625rem;
	margin-top: 0.75rem;
}

.inprodi-booking__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	color: #ffffff;
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

.inprodi-booking__social a:hover {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #ffffff;
}

/* ---- Responsive ---- */
@media (min-width: 768px) {
	.inprodi-booking__hero {
		padding: 150px 0 170px;
	}
	.inprodi-booking__title {
		font-size: 3.5rem; /* 56px */
	}
	.inprodi-booking__dest-grid {
		grid-template-columns: repeat(4, 1fr);
	}
	.inprodi-booking__dest {
		min-height: 62px;
	}
	.inprodi-booking__panel-title {
		font-size: 1.75rem; /* 28px */
	}
}

@media (prefers-reduced-motion: reduce) {
	.inprodi-booking__panel,
	.inprodi-booking__form.is-sent .inprodi-booking__success {
		animation: none;
	}
	.inprodi-booking__field,
	.inprodi-booking__btn,
	.inprodi-booking__dest,
	.inprodi-booking__step-num,
	.inprodi-booking__chev,
	.inprodi-booking__social a {
		transition: none;
	}
}

/* =========================================================================
 * Light (cream) theme — Contacto. Overrides the dark defaults above so the
 * booking section matches the cream home (#f8eee7 bg, navy #1c3f58 text, white
 * inputs, navy buttons, terracotta accent). The destination photo tiles keep
 * their dark scrim + white labels — they sit on real photos.
 * ====================================================================== */
.inprodi-booking { background-color: #f8eee7; }
.inprodi-booking__hero { background-color: #f8eee7; }
.inprodi-booking__scrim {
	background: linear-gradient(
		180deg,
		rgba(248, 238, 231, 0.70) 0%,
		rgba(248, 238, 231, 0.84) 45%,
		rgba(248, 238, 231, 0.92) 100%
	);
}
.inprodi-booking__inner { color: #1c3f58; }
.inprodi-booking__eyebrow { color: #cf8a44; opacity: 1; }
.inprodi-booking__title { color: #3e2618; }
.inprodi-booking__subtitle { color: rgba(28, 63, 88, 0.78); }

/* Stepper */
.inprodi-booking__step::before { background-color: rgba(28, 63, 88, 0.2); }
.inprodi-booking__step.is-done::before { background-color: #1c3f58; }
.inprodi-booking__step-num {
	border-color: rgba(28, 63, 88, 0.3);
	background-color: #ffffff;
	color: rgba(28, 63, 88, 0.7);
}
.inprodi-booking__step.is-active .inprodi-booking__step-num,
.inprodi-booking__step.is-done .inprodi-booking__step-num {
	border-color: #1c3f58;
	background-color: #1c3f58;
	color: #ffffff;
}
.inprodi-booking__step-label { color: rgba(28, 63, 88, 0.6); }
.inprodi-booking__step.is-active .inprodi-booking__step-label,
.inprodi-booking__step.is-done .inprodi-booking__step-label { color: #1c3f58; }

/* Panels */
.inprodi-booking__panel-title { color: #3e2618; }
.inprodi-booking__panel-hint { color: rgba(28, 63, 88, 0.7); }

/* Fields (white inputs on cream) */
.inprodi-booking__label { color: rgba(28, 63, 88, 0.9); }
.inprodi-booking__field {
	border-color: rgba(28, 63, 88, 0.22);
	background-color: #fbf4ea;
	color: #1c3f58;
}
.inprodi-booking__field::placeholder { color: rgba(28, 63, 88, 0.45); }
.inprodi-booking__field:focus { border-color: #1c3f58; background-color: #fbf4ea; }

/* Calendar */
.inprodi-booking__cal {
	border-color: rgba(28, 63, 88, 0.22);
	background-color: #fbf4ea;
	color: #1c3f58;
}
.inprodi-booking__cal-nav {
	border-color: rgba(28, 63, 88, 0.22);
	background-color: rgba(28, 63, 88, 0.04);
	color: #1c3f58;
}
.inprodi-booking__cal-nav:hover { background-color: rgba(28, 63, 88, 0.1); border-color: #1c3f58; }
.inprodi-booking__cal-wdname { color: rgba(28, 63, 88, 0.5); }
.inprodi-booking__cal-day { color: #1c3f58; }
.inprodi-booking__cal-day:hover { background-color: rgba(28, 63, 88, 0.08); }
.inprodi-booking__cal-day:disabled { color: rgba(28, 63, 88, 0.3); }
.inprodi-booking__cal-day.is-today { box-shadow: 0 0 0 1px rgba(28, 63, 88, 0.4) inset; }
.inprodi-booking__cal-day.is-selected { background-color: #1c3f58; color: #ffffff; }
.inprodi-booking__cal-day.is-in-range { background-color: rgba(28, 63, 88, 0.12); }
.inprodi-booking__cal-day.is-in-range:hover { background-color: rgba(28, 63, 88, 0.2); }

/* Range readout */
.inprodi-booking__range {
	border-color: rgba(28, 63, 88, 0.22);
	background-color: #fbf4ea;
	color: #1c3f58;
}
.inprodi-booking__range-key { color: rgba(28, 63, 88, 0.55); }
.inprodi-booking__range-arrow { color: rgba(28, 63, 88, 0.45); }
.inprodi-booking__range-len { color: rgba(28, 63, 88, 0.7); }

/* Recap */
.inprodi-booking__recap { border-color: rgba(28, 63, 88, 0.16); background-color: #ffffff; }
.inprodi-booking__recap-label { color: rgba(28, 63, 88, 0.6); }
.inprodi-booking__recap-row { color: #1c3f58; }

/* Navigation buttons */
.inprodi-booking__btn--back {
	border-color: rgba(28, 63, 88, 0.3);
	background-color: transparent;
	color: rgba(28, 63, 88, 0.85);
}
.inprodi-booking__btn--back:hover { background-color: rgba(28, 63, 88, 0.06); border-color: #1c3f58; }
.inprodi-booking__btn--next,
.inprodi-booking__btn--submit {
	border-color: #1c3f58;
	background-color: #1c3f58;
	color: #ffffff;
}
.inprodi-booking__btn--next:hover,
.inprodi-booking__btn--submit:hover { background-color: #163150; }

/* Feedback (darker shades for legibility on cream) */
.inprodi-booking__feedback.is-ok { color: #16a34a; }
.inprodi-booking__feedback.is-err { color: #b91c1c; }

/* Success + social */
.inprodi-booking__success-icon { border-color: rgba(28, 63, 88, 0.5); color: #1c3f58; }
.inprodi-booking__success-text { color: #1c3f58; }
.inprodi-booking__social a { border-color: rgba(28, 63, 88, 0.3); color: #1c3f58; }
.inprodi-booking__social a:hover { background-color: rgba(28, 63, 88, 0.08); border-color: #1c3f58; }

/* ==========================================================================
 * Liquid glass (client-approved V5, contacto-v5.html preview).
 * The photo is the protagonist: minimal dark scrim (still fading to the cream
 * footer), white hero text, and the wizard inside a subtle frosted-glass panel
 * with glassy controls. Appended last so it wins the cascade over the light
 * re-theme above. The destination picker also swaps the section background
 * (see the bg-swap block in inprodi-contact.js).
 * ======================================================================== */

/* Aire bajo el formulario: las paradas del degradado son porcentajes de la
   altura de la sección, así que este colchón le da al tramo foto → crema una
   banda de píxeles bastante más alta y el degradado se lee sobre la foto en vez
   de resolverse de golpe justo debajo del panel. Esta capa va después del
   bloque responsive de arriba, así que gana también en desktop. */
.inprodi-booking__hero { padding-bottom: 150px; }

/* El scrim se queda solo con el velo oscuro sobre la foto; ya no aterriza en
   crema. El aterrizaje vive ahora en ::after, una capa propia anclada al fondo
   con ALTURA EN PÍXELES — así el degradado no depende de lo alta que sea la
   sección y se regula con un solo número (antes eran las paradas 86%→100% del
   scrim, unos 170px en desktop). Va en z-index 1, por debajo de
   .inprodi-booking__inner (z-index 2), así que nunca lava el formulario. */
.inprodi-booking__scrim {
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.24) 0%,
		rgba(0, 0, 0, 0.28) 55%,
		rgba(0, 0, 0, 0.32) 100%
	);
}

.inprodi-booking__hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	height: 280px;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(248, 238, 231, 0) 0%,
		rgba(248, 238, 231, 0.32) 40%,
		rgba(248, 238, 231, 0.74) 72%,
		#f8eee7 100%
	);
}

@media (min-width: 768px) {
	.inprodi-booking__hero { padding-bottom: 230px; }
	.inprodi-booking__hero::after { height: 440px; }
}

/* Crossfade layer used by the destination background swap (JS). */
.nk-bgfade { position: absolute; inset: 0; z-index: 0; background: center/cover no-repeat; opacity: 0; transition: opacity 0.6s ease; }
.nk-bgfade.is-in { opacity: 1; }

/* Hero text back to white over the visible photo. */
.inprodi-booking__inner { color: #ffffff; }
.inprodi-booking__eyebrow { color: rgba(255, 255, 255, 0.88); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.inprodi-booking__title { color: #ffffff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }
.inprodi-booking__subtitle { color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5); }

/* The frosted panel. */
.inprodi-booking__form {
	position: relative;
	background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 55%, rgba(255,255,255,0.09) 100%);
	border-radius: 26px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(16px) saturate(1.25);
	-webkit-backdrop-filter: blur(16px) saturate(1.25);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(255,255,255,0.06), 0 18px 44px rgba(0,0,0,0.26);
	padding: 26px 24px 30px;
	overflow: hidden;
}
.inprodi-booking__form::before { content: ""; position: absolute; top: -40%; left: -20%; width: 85%; height: 85%; background: radial-gradient(closest-side, rgba(255,255,255,0.13), transparent 70%); pointer-events: none; }

/* Wizard text on glass. */
.inprodi-booking__panel-title, .inprodi-booking__label,
.inprodi-booking__panel-hint { color: #f8eee7; }

/* Stepper labels on the dark glass — all white-based so they stay legible over
   the photo. Future steps dim, the current step full white, done steps bright.
   (The light-theme block above turns active/done labels navy #1c3f58; these
   later, equal-specificity rules override that for the glass look.) */
.inprodi-booking__step-label { color: rgba(255, 255, 255, 0.55); }
.inprodi-booking__step.is-active .inprodi-booking__step-label { color: #ffffff; }
.inprodi-booking__step.is-done .inprodi-booking__step-label { color: rgba(255, 255, 255, 0.9); }
.inprodi-booking__step::before { background-color: rgba(248, 238, 231, 0.25); }
.inprodi-booking__step.is-done::before { background-color: rgba(255, 255, 255, 0.85); }

/* Step circles: dark glass + white digit; active/done invert to solid white. */
.inprodi-booking__step-num { background-color: rgba(0, 0, 0, 0.30); border-color: rgba(255, 255, 255, 0.55); color: #ffffff; }
.inprodi-booking__step.is-active .inprodi-booking__step-num,
.inprodi-booking__step.is-done .inprodi-booking__step-num { background-color: #ffffff; border-color: #ffffff; color: #2a1a10; }

/* Glassy fields. */
.inprodi-booking__field { background-color: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.32); color: #ffffff; }
.inprodi-booking__field::placeholder { color: rgba(255, 255, 255, 0.65); }
.inprodi-booking__field:focus { background-color: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.55); }

/* Calendar on glass. */
.inprodi-booking__cal { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; }
.inprodi-booking__cal-title { color: #ffffff; }
.inprodi-booking__cal-nav { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; }
.inprodi-booking__cal-nav:hover { background-color: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.7); }
.inprodi-booking__cal-nav:disabled { opacity: 0.4; }
.inprodi-booking__cal-wdname { color: rgba(255, 255, 255, 0.6); }
.inprodi-booking__cal-day { color: #ffffff; }
.inprodi-booking__cal-day:hover { background-color: rgba(255, 255, 255, 0.18); }
.inprodi-booking__cal-day:disabled { color: rgba(255, 255, 255, 0.3); }
.inprodi-booking__cal-day:disabled:hover { background-color: transparent; }
.inprodi-booking__cal-day.is-today { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset; }
.inprodi-booking__cal-day.is-selected { background-color: #ffffff; color: #2a1a10; font-weight: 600; }
.inprodi-booking__cal-day.is-in-range { background-color: rgba(255, 255, 255, 0.2); }
.inprodi-booking__cal-day.is-in-range:hover { background-color: rgba(255, 255, 255, 0.3); }

/* Range readout on glass. */
.inprodi-booking__range { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; }
.inprodi-booking__range-key { color: rgba(255, 255, 255, 0.6); }
.inprodi-booking__range-arrow { color: rgba(255, 255, 255, 0.5); }
.inprodi-booking__range-len { color: rgba(255, 255, 255, 0.8); }

/* Recap, success and feedback on glass. */
.inprodi-booking__recap { background-color: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); }
.inprodi-booking__recap-label { color: rgba(255, 255, 255, 0.65); }
.inprodi-booking__recap-row { color: #ffffff; }
.inprodi-booking__success-icon { border-color: rgba(255, 255, 255, 0.7); color: #ffffff; }
.inprodi-booking__success-text { color: #ffffff; }
.inprodi-booking__feedback.is-ok { color: #a7f3c0; }
.inprodi-booking__feedback.is-err { color: #ffb4a8; }
/* The empty status line no longer reserves height. */
.inprodi-booking__feedback { min-height: 0; margin: 0; }
.inprodi-booking__feedback.is-ok, .inprodi-booking__feedback.is-err { margin-top: 0.85rem; }

/* Navegación: los tres botones son transparentes, solo marco (petición del
   cliente — el "Siguiente"/"Enviar" ya no es una placa blanca sólida). Se
   distinguen por jerarquía de marco, no por relleno: back con marco tenue,
   next/submit con marco blanco pleno y texto blanco. */
.inprodi-booking__btn--back { background-color: transparent; border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.8); }
.inprodi-booking__btn--back:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.65); color: #ffffff; }
.inprodi-booking__btn--next, .inprodi-booking__btn--submit { background-color: transparent; border-color: rgba(255, 255, 255, 0.85); color: #ffffff; }
.inprodi-booking__btn--next:hover, .inprodi-booking__btn--submit:hover { background-color: rgba(255, 255, 255, 0.14); border-color: #ffffff; }

/* Old browsers without backdrop-filter: the glass panel would be nearly
   transparent (13% white) and the cream wizard text unreadable over the photo —
   fall back to a solid espresso panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.inprodi-booking__form { background: rgba(42, 26, 16, 0.72); }
}

/* =========================================================================
 * Pantallas táctiles — el :hover se queda pegado
 * -------------------------------------------------------------------------
 * En móvil no hay puntero: el navegador deja el último elemento tocado en estado
 * :hover hasta que se toca otra cosa. En el calendario eso dejaba un día
 * cualquiera medio iluminado, que se confunde con el resaltado del rango — que es
 * justo lo que hay que leer de un vistazo. Se apagan solo los :hover del
 * calendario; el estado de verdad lo dan las clases .is-selected / .is-in-range,
 * que no se tocan aquí.
 * ====================================================================== */
@media (hover: none) {
	.inprodi-booking__cal-day:hover {
		background-color: transparent;
	}
	.inprodi-booking__cal-day.is-in-range:hover {
		background-color: rgba(255, 255, 255, 0.2);
	}
	.inprodi-booking__cal-day.is-selected:hover {
		background-color: #ffffff;
	}
	.inprodi-booking__cal-nav:hover {
		background-color: rgba(255, 255, 255, 0.06);
		border-color: rgba(255, 255, 255, 0.3);
	}
	/* El chevron del botón tampoco se adelanta solo. */
	.inprodi-booking__btn--next:hover .inprodi-booking__chev,
	.inprodi-booking__btn--submit:hover .inprodi-booking__chev {
		transform: none;
	}
}