/*
 * Inspiración — single detail page. Kensington-style layout, scoped under .insp:
 * a photo-grid gallery, a title header, a sticky tab bar with panels, and a
 * detailed vertical day-by-day timeline. Uses the theme tokens: Playfair Display
 * for headings, --nk-font-sans for body/UI, navy #204782 as the accent, an 80rem
 * container and the 64/96 rhythm.
 */

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

.insp {
	--insp-navy: #1c3f58;   /* brand navy — buttons / UI / markers (matches home) */
	--insp-deep: #1c3f58;
	--insp-ink: #3e2618;    /* espresso — warm heading ink */
	--insp-terra: #cf8a44;  /* terracotta — warm accent (matches home) */
	--insp-body: #4b5563;
	--insp-cream: #f8eee7;  /* home cream */
	--insp-offwhite: #ffffff;
	--insp-line: #e6ddcf;
	/* Alto de la barra del sitio YA ENCOGIDA (con scroll), que es el estado en el
	   que la barra de tabs se queda pegada. Es el `top` de .insp-tabs__bar: si
	   sobra, se ve una franja de página colándose entre el header y los tabs.
	   ⚠ Va atado a inprodi-header.css. Sale de sumar, en `.is-scrolled`, el
	   padding del __inner por dos más el max-height del logo:
	     móvil (<1024px) : 11 + 38 + 11 = 60px
	     escritorio      : 15 + 50 + 15 = 80px
	   Si se toca cualquiera de esos tres números allí, hay que rehacer la suma
	   aquí — el hueco de 20px en móvil salió justo de olvidarlo. */
	--insp-headh: 60px;
	--insp-tabh: 57px;    /* tab bar height, for day-marker stickiness */
	font-family: var(--nk-font-sans);
	color: var(--insp-body);
	background: #f8eee7;  /* cream — match the home */
	/* Clear the fixed site header only. The full-bleed gallery sits snug right
	   below it — a large gap here left a big empty cream band above the gallery.
	   Aquí la barra está SIN encoger (estamos arriba del todo), que es más alta
	   que el `--insp-headh` de arriba: 72px en móvil y ~134px en escritorio.
	   Se le suman ~14px de aire y nada más. */
	padding-top: 86px;
}

@media (min-width: 1024px) {
	.insp {
		/* La barra encogida es más alta en escritorio: 15 + 50 + 15. */
		--insp-headh: 80px;
		padding-top: 140px;
	}
}

/* The site header uses its light variant here (dark logo + navy nav on the
   cream top) — see .inprodi-header--light in inprodi-header.css, applied by the
   header widget on is_singular('programa'). */

/* Shared container + typography ------------------------------------------- */

.insp-container {
	width: 100%;
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

.insp-h2 {
	margin: 0 0 24px;
	color: var(--insp-ink);
	font-family: 'Playfair Display', serif !important;
	font-weight: 400;
	font-size: 2rem; /* 32px mobile */
	line-height: 1.15;
}

/* Título de sección con una acción a la derecha (hoy: "Descargar programa" en el
   tab Itinerario). El h2 pierde aquí su margen inferior porque el que separa de
   la sección lo pone la fila, si no el botón queda descolgado del título. */
.insp-h2row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin: 0 0 24px;
}
.insp-h2row .insp-h2 { margin: 0; }
/* Más compacto que el CTA principal: es una acción secundaria, no la del final.
   Y en azul marino de marca, no en el ocre del CTA, para que no compitan. */
.insp-h2row__btn { padding: 12px 22px; font-size: 14px; }
.insp-btn--solid.insp-h2row__btn {
	background-color: #09374f;
	border-color: #09374f;
	color: #fff;
}
.insp-btn--solid.insp-h2row__btn:hover {
	background-color: #06283a;
	border-color: #06283a;
}
.insp-btn__ico { flex-shrink: 0; }

@media (max-width: 600px) {
	/* En móvil el botón cae debajo y ocupa el ancho: partido en dos columnas
	   estrechas, "Descargar programa" se rompe en dos líneas. */
	.insp-h2row { gap: 14px; }
	.insp-h2row__btn { width: 100%; }
}

.insp-prose {
	color: var(--insp-body);
	font-size: 1.0625rem;
	line-height: 1.75;
}
.insp-prose p {
	margin: 0 0 1em;
}
.insp-prose p:last-child {
	margin-bottom: 0;
}

/* Buttons ----------------------------------------------------------------- */

/* Matches the home button (inprodi-cta__btn): pill with a chevron that slides
   on hover. */
.insp-btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px 28px;
	border-radius: 12px;
	border: 1px solid transparent;
	font-family: var(--nk-font-sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.insp-btn__icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}
.insp-btn:hover .insp-btn__icon {
	transform: translateX(3px);
}
/* Ocre de marca desde v1.9.11 (era el azul --insp-navy); token en style.css. */
.insp-btn--solid {
	background-color: var(--nk-btn, #a16921);
	border-color: var(--nk-btn, #a16921);
	color: var(--nk-btn-ink, #fff);
}
.insp-btn--solid:hover {
	background-color: var(--nk-btn-hover, #8e5c1d);
	border-color: var(--nk-btn-hover, #8e5c1d);
}
/* Variante blanca para fondos oscuros. Hoy sin uso; el texto sigue al color de
   botón para no reintroducir el azul si alguien la recupera. */
.insp-btn--light {
	background-color: #fff;
	border-color: #fff;
	color: var(--nk-btn, #a16921);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.insp-btn--light:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}

/* ① Gallery grid ---------------------------------------------------------- */

.insp-gallery {
	width: 100%;
	margin: 0 auto;
	padding: 12px 0 0; /* full-bleed: edge to edge, no side max-width/padding */
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 40vw;
	gap: 6px;
}
.insp-gallery__item {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: #e5e7eb;
}
.insp-gallery__item .insp-gallery__link {
	display: block;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
	overflow: hidden;
}
.insp-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}
.insp-gallery__item .insp-gallery__link:hover img {
	transform: scale(1.04);
}
/* Mobile: first image spans full width, the rest fill a 2-col strip. */
.insp-gallery__item:first-child {
	grid-column: 1 / -1;
}
.insp-gallery__more {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(17, 24, 39, 0.72);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	pointer-events: none; /* clicks fall through to the image link below. */
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

@media (min-width: 768px) {
	.insp-gallery {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: 220px;
		gap: 6px;
		padding-top: 16px;
	}
	.insp-gallery__item:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
	/* Balanced fallbacks for small counts. */
	.insp-gallery--count-1 { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.insp-gallery--count-1 .insp-gallery__item:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 6; }
	.insp-gallery--count-2 { grid-template-columns: 1fr 1fr; grid-auto-rows: 340px; }
	.insp-gallery--count-2 .insp-gallery__item:first-child { grid-column: auto; grid-row: auto; }
	.insp-gallery--count-3 { grid-template-columns: 2fr 1fr; grid-auto-rows: 172px; }
	.insp-gallery--count-4 { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; }
	.insp-gallery--count-4 .insp-gallery__item:first-child { grid-column: span 2; grid-row: auto; }
}

/* Breadcrumbs — rendered above the gallery, right under the site header ---- */

.insp-crumbs {
	padding-top: 4px;
	padding-bottom: 18px;
}

.insp-crumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px 11px;
	margin: 0;
}

.insp-crumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.015em;
	color: var(--insp-body);
}

/* Thin chevron separator before every item except the first. */
.insp-crumbs__item + .insp-crumbs__item::before {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.4px solid var(--insp-navy);
	border-bottom: 1.4px solid var(--insp-navy);
	transform: rotate(-45deg);
	opacity: 0.38;
	flex-shrink: 0;
}

.insp-crumbs__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--insp-body);
	font-weight: 500;
	text-decoration: none;
	transition: color 0.22s ease;
}

/* Understated underline that grows in from the left on hover. */
.insp-crumbs__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.insp-crumbs__link:hover {
	color: var(--insp-terra);
}

.insp-crumbs__link:hover::after {
	transform: scaleX(1);
}

/* Small home icon before the first label. */
.insp-crumbs__home {
	flex-shrink: 0;
	margin-top: -1px;
	opacity: 0.85;
}

/* Keep the hover underline under the text only, not the home icon. */
.insp-crumbs__link--home::after {
	left: 20px;
}

.insp-crumbs__plain {
	color: var(--insp-body);
}

.insp-crumbs__item--current {
	color: var(--insp-ink);
	font-weight: 600;
}

/* ② Title header ---------------------------------------------------------- */

.insp-head {
	padding: 34px 0 26px;
	border-bottom: 1px solid #eef0f2;
}
.insp-head__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.insp-head__eyebrow {
	margin: 0 0 12px;
	display: inline-block;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(207, 138, 68, 0.15); /* terracotta tint */
	color: #a5641f;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.insp-head__title {
	margin: 0;
	color: var(--insp-ink);
	font-family: 'Playfair Display', serif !important;
	font-weight: 400;
	font-size: 2.25rem; /* 36px mobile */
	line-height: 1.1;
}
.insp-head__feature {
	margin: 16px 0 0;
	max-width: 60ch;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--insp-body);
}
.insp-head__meta {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.insp-head__meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	color: var(--insp-body);
}
.insp-head__meta svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--insp-navy);
}
.insp-head__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}
.insp-head__price {
	margin: 0;
	line-height: 1.1;
}
.insp-head__price-from {
	display: block;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #6b7280;
}
.insp-head__price-amt {
	display: block;
	margin-top: 2px;
	font-family: var(--nk-font-sans);
	font-weight: 700;
	font-size: 1.7rem;
	color: var(--insp-ink);
}
.insp-head__price-note {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: #9ca3af;
}

@media (min-width: 768px) {
	.insp-h2 {
		font-size: 2.5rem; /* 40px */
	}
	.insp-head {
		padding: 44px 0 30px;
	}
	.insp-head__inner {
		grid-template-columns: 1fr auto;
		align-items: end;
		gap: 40px;
	}
	.insp-head__title {
		font-size: 3.25rem; /* 52px */
	}
	.insp-head__aside {
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
	}
	.insp-head__price {
		text-align: right;
	}
}

/* ③ Tabs ------------------------------------------------------------------ */

.insp-tabs__bar {
	position: -webkit-sticky;
	position: sticky;
	top: var(--insp-headh);
	z-index: 30;
	background: var(--insp-cream);
	border-bottom: 1px solid var(--insp-line);
}
.insp-tabs__list {
	display: flex;
	gap: 2rem;
	overflow-x: auto;
	scrollbar-width: none;
}
.insp-tabs__list::-webkit-scrollbar {
	display: none;
}
.insp-tabs__btn {
	flex: none;
	padding: 17px 0 16px;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--nk-font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6b7280;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.insp-tabs__btn:hover {
	color: var(--insp-ink);
}
.insp-tabs__btn[aria-selected="true"] {
	color: var(--insp-ink);
	border-bottom-color: var(--insp-navy);
}

.insp-panel {
	padding: 44px 0 64px;
}
.insp-panel[hidden] {
	display: none;
}
.insp-panel:focus {
	outline: none;
}

@media (min-width: 768px) {
	.insp-panel {
		padding: 56px 0 88px;
	}
}

/* Overview panel: a single column of prose.
   La tarjeta de precio pegajosa que ocupaba la 2ª columna se quitó en v1.9.10
   (repetía la cabecera). Al quitarla, el texto se había quedado limitado a 72ch
   (~700px) dentro de un contenedor de 80rem: la pestaña Resumen se veía a media
   asta, con un hueco muerto a la derecha que las otras pestañas no tienen. Ahora
   ocupa el ancho del contenedor, como Itinerario y Alojamientos. */

.insp-overview__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
}
.insp-overview__text {
	max-width: none;
}
.insp-highlights {
	margin-top: 36px;
	background: rgba(170, 209, 225, 0.20); /* sky accent — cool highlight block */
	border: 1px solid rgba(170, 209, 225, 0.5);
	border-radius: 20px;
	padding: 26px 26px 28px;
}
.insp-highlights__title {
	margin: 0 0 16px;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--insp-ink);
}
.insp-highlights ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
.insp-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--insp-ink);
}
.insp-highlights svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--insp-navy);
}

.insp-route {
	margin-top: 36px;
}
.insp-route__title {
	margin: 0 0 18px;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--insp-ink);
}
.insp-route__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 4px;
}
.insp-route__stop {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 18px;
	min-width: 108px;
}
.insp-route__stop:not(:last-child)::after {
	content: "→";
	position: absolute;
	right: -6px;
	top: 4px;
	color: var(--insp-navy);
	opacity: 0.45;
}
.insp-route__dot {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--insp-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 8px;
}
.insp-route__city {
	font-family: 'Playfair Display', serif !important;
	font-size: 1.02rem;
	color: var(--insp-ink);
	line-height: 1.2;
}
.insp-route__nights {
	margin-top: 3px;
	font-size: 12px;
	color: var(--insp-body);
}

/* ── "Tu recorrido" en móvil: línea de tiempo VERTICAL ──────────────────────
   En escritorio las paradas van en fila, una al lado de otra y separadas por
   flechas. En pantalla estrecha esa fila se parte en varias líneas y el
   recorrido deja de leerse como una secuencia: las flechas quedan colgando y no
   se sabe por dónde sigue. Aquí se apila en vertical, que es como se lee un
   itinerario en el móvil, con la misma línea y el mismo tono que la línea de
   tiempo del itinerario (.insp-tl, más abajo).

   El tramo de línea lo pinta cada parada con su ::before y NO un ::before único
   en la lista: si la línea fuera una sola, habría que decirle dónde acaba, y eso
   depende del alto de la última parada (que cambia según el nombre de la ciudad
   parta en dos líneas o no). Un tramo por parada va del punto de esta al punto
   de la siguiente, sin depender de ningún alto. La última no pinta tramo. */
@media (max-width: 767px) {
	.insp-route__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}
	.insp-route__stop {
		display: grid;
		grid-template-columns: 32px 1fr;   /* punto | texto */
		column-gap: 14px;
		align-items: start;
		text-align: left;
		padding: 0 0 22px;                 /* el aire hasta la parada siguiente */
		min-width: 0;
	}
	.insp-route__stop:last-child {
		padding-bottom: 0;
	}
	/* Fuera la flecha "→": en vertical la continuidad la da la línea. */
	.insp-route__stop:not(:last-child)::after {
		content: none;
	}
	/* Tramo de línea, del borde inferior de este punto al de la parada siguiente.
	   left: 15px con 2px de ancho = centrado en el punto, que mide 32px. */
	.insp-route__stop:not(:last-child)::before {
		content: "";
		position: absolute;
		left: 15px;
		top: 32px;
		bottom: 0;
		width: 2px;
		background: var(--insp-line);
	}
	.insp-route__dot {
		position: relative;
		z-index: 1;      /* por encima del tramo de línea */
		margin-bottom: 0;
		grid-row: 1;
	}
	/* La ciudad se centra contra el punto ocupando su mismo alto. Así la primera
	   línea del nombre queda a la altura del número, y si el nombre parte en dos
	   líneas crece hacia abajo sin descuadrar el punto. */
	.insp-route__city {
		grid-column: 2;
		display: flex;
		align-items: center;
		min-height: 32px;
	}
	.insp-route__nights {
		grid-column: 2;
		margin-top: 0;
	}
}

@media (min-width: 768px) {
	.insp-overview__grid {
		gap: 48px;
	}
}

/* ④ Itinerary — vertical timeline + per-day carousel --------------------- */

.insp-tl {
	position: relative;
}
/* The continuous vertical line. */
.insp-tl::before {
	content: "";
	position: absolute;
	top: 6px;
	bottom: 8px;
	left: 7px;
	width: 2px;
	background: var(--insp-line);
}
.insp-tl__day {
	position: relative;
	padding: 0 0 36px 34px;
}
.insp-tl__day:last-child {
	padding-bottom: 0;
}
/* The node dot on the line. */
.insp-tl__day::before {
	content: "";
	position: absolute;
	left: 7px;
	transform: translateX(-50%);
	top: 4px;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	background: var(--nk-btn, #a16921);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--insp-line);
	z-index: 1;
}
/* Carousel + content sit side by side to the right of the timeline. */
.insp-tl__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

/* Per-day photo carousel (1 slide per view, arrows + dots). */
.insp-tl__carousel {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: #e5e7eb;
}
.insp-tl__viewport {
	overflow: hidden;
}
.insp-tl__track {
	display: flex;
	transition: transform 0.4s ease;
}
.insp-tl__slide {
	margin: 0;
	flex: 0 0 100%;
	aspect-ratio: 3 / 2;
}
.insp-tl__slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.insp-tl__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #111827;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s ease;
}
.insp-tl__arrow:hover {
	background: #fff;
}
.insp-tl__arrow svg {
	width: 20px;
	height: 20px;
}
.insp-tl__arrow--prev {
	left: 10px;
}
.insp-tl__arrow--next {
	right: 10px;
}
.insp-tl__dots {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.insp-tl__dots span {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.55);
	transition: background-color 0.2s ease;
}
.insp-tl__dots span.is-active {
	background: #fff;
}

.insp-tl__content {
	min-width: 0;
}
/* El itinerario va en el ocre de marca (--nk-btn, el mismo del botón del CTA
   pre-footer): el badge "Día N", el punto de la línea de tiempo, las viñetas
   de "Incluido este día" y las dos etiquetas pequeñas. El azul --insp-navy se
   queda en el resto de la página (migas, pestañas, ruta, hoteles). */
.insp-tl__daynum {
	display: inline-block;
	margin-bottom: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--nk-btn, #a16921);
	padding: 4px 12px;
	border-radius: 999px;
}
.insp-tl__title {
	margin: 0 0 12px;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--insp-ink);
}
.insp-tl__acts {
	margin-top: 18px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
}
.insp-tl__acts-label {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--nk-btn, #a16921);
}
.insp-tl__acts ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 7px;
}
.insp-tl__acts li {
	position: relative;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--insp-ink);
}
.insp-tl__acts li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--nk-btn, #a16921);
}
.insp-tl__stay {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid #eef0f2;
	display: flex;
	align-items: center;
	gap: 12px;
}
.insp-tl__stay svg {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	color: var(--nk-btn, #a16921);
}
.insp-tl__stay > span {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--insp-ink);
}
.insp-tl__stay-label {
	display: block;
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nk-btn, #a16921);
}

@media (min-width: 768px) {
	.insp-tl::before {
		left: 9px;
	}
	.insp-tl__day {
		padding: 0 0 44px 42px;
	}
	.insp-tl__day::before {
		left: 9px;
		top: 5px;
	}
	.insp-tl__inner {
		grid-template-columns: 38% 1fr;
		gap: 30px;
		align-items: start;
	}
	.insp-tl__inner--noimg {
		grid-template-columns: 1fr;
	}
	.insp-tl__title {
		font-size: 1.55rem;
	}
}

/* ⑤ Accommodations — rich rows ------------------------------------------- */

.insp-stays__intro {
	margin: -8px 0 28px;
	font-size: 1.0625rem;
	color: var(--insp-body);
}
.insp-stays {
	display: grid;
	gap: 22px;
}
.insp-stay {
	display: grid;
	grid-template-columns: 1fr;
	background: #fbf4ea;
	border: 1px solid #e8d9c8;
	border-radius: 18px;
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.insp-stay:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px rgba(17, 24, 39, 0.10);
}
.insp-stay__media {
	min-height: 220px;
	background-color: #e5e7eb;
	background-size: cover;
	background-position: center;
}
.insp-stay__body {
	padding: 24px 26px 26px;
}
.insp-stay__meta {
	margin: 0 0 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.insp-stay__city {
	color: var(--insp-navy);
}
.insp-stay__nights {
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(170, 209, 225, 0.45); /* sky accent pill */
	color: #1c3f58;
	letter-spacing: 0.04em;
}
.insp-stay__name {
	margin: 0;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 1.2;
	color: var(--insp-ink);
}
.insp-stay__room {
	margin: 10px 0 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--insp-body);
}
.insp-stay__room svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--insp-navy);
}
.insp-stay__desc {
	margin-top: 14px;
	font-size: 15px;
	line-height: 1.65;
}

@media (min-width: 768px) {
	.insp-stay {
		grid-template-columns: 300px 1fr;
	}
	.insp-stay__media {
		min-height: 100%;
	}
	.insp-stay__body {
		padding: 28px 32px 30px;
		align-self: center;
	}
}

/* ⑥ Notes — included / not included / good to know ----------------------- */

.insp-notes {
	max-width: 62rem;
}
.insp-notes__block {
	padding-bottom: 36px;
	margin-bottom: 36px;
	border-bottom: 1px solid #eef0f2;
}
.insp-notes__block:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}
.insp-notes__title {
	margin: 0 0 22px;
	font-family: 'Playfair Display', serif !important;
	font-weight: 500;
	font-size: 1.5rem;
	color: var(--insp-ink);
}
.insp-notes__check {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}
.insp-notes__check li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--insp-ink);
}
.insp-notes__ck {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: var(--insp-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
}
.insp-notes__ck svg {
	width: 15px;
	height: 15px;
}
/* "No incluye": same badge as the check, muted taupe + cross to read as excluded. */
.insp-notes__ck--x {
	background: #b0a08e;
}
.insp-notes__check--x li {
	color: var(--insp-body);
}
.insp-notes__cols {
	margin: 0;
	padding-left: 1.15rem;
	color: var(--insp-body);
	font-size: 1rem;
	line-height: 1.5;
}
.insp-notes__cols li {
	margin-bottom: 12px;
	padding-left: 6px;
}
.insp-notes__fine {
	font-size: 13px;
	line-height: 1.7;
	color: #6b7280;
}
.insp-notes__fine a {
	color: #4b5563;
}

@media (min-width: 700px) {
	.insp-notes__check {
		grid-template-columns: 1fr 1fr;
		gap: 16px 44px;
	}
	.insp-notes__cols {
		column-count: 2;
		column-gap: 48px;
	}
	.insp-notes__cols li {
		break-inside: avoid;
	}
}

/* ⑦ Closing CTA band ------------------------------------------------------ */

.insp-cta {
	position: relative;
	padding: 72px 0;
	background-color: var(--insp-cream); /* fallback + tint under the photo */
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
	border-top: 1px solid var(--insp-line);
	text-align: center;
}
/* Home-CTA base: dark scrim up top (white text legible) fading to the cream
   footer color at the bottom, so CTA and footer merge seamlessly. */
.insp-cta__veil {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.28) 0%,
		rgba(0, 0, 0, 0.22) 34%,
		rgba(0, 0, 0, 0.10) 50%,
		rgba(248, 238, 231, 0.18) 60%,
		rgba(248, 238, 231, 0.42) 68%,
		rgba(248, 238, 231, 0.66) 75%,
		rgba(248, 238, 231, 0.85) 81%,
		rgba(248, 238, 231, 0.96) 85%,
		#f8eee7 88%,
		#f8eee7 100%
	);
}

/* Flat cream strip meeting the footer — insurance against gradient banding. */
.insp-cta::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 56px;
	background-color: #f8eee7;
	z-index: 1; /* same layer as the veil, painted after it; content (z-index 2) stays on top */
	pointer-events: none;
}
.insp-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 40rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.insp-cta__mark {
	display: block;
	max-height: 76px;
	width: auto;
	margin: 10px auto 4px; /* sits below the text block (brand V1 order) */
	opacity: 0.95;
	filter: brightness(0) invert(1); /* white stacked logo over the photo */
	pointer-events: none;
	user-select: none;
}
.insp-cta__eyebrow {
	margin: 0;
	font-family: 'Jost', sans-serif;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.insp-cta__desc {
	margin: -6px 0 0;
	font-family: 'Angelface', cursive;
	-webkit-text-stroke: 0.6px currentColor;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
	font-size: clamp(26px, 3.2vw, 32px);
	line-height: 1.35;
}
.insp-cta__title {
	margin: 0;
	font-family: 'Geist', sans-serif !important;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-indent: 0.1em;
	font-size: 2rem;
	line-height: 1.2;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
	color: #ffffff;
}
.insp-cta__price {
	margin: 2px 0 0;
	font-family: 'Jost', sans-serif;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.92);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}
.insp-cta__price strong {
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
	color: #ffffff;
}
.insp-cta__note {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
}
.insp-cta .insp-btn {
	margin-top: 8px;
}

@media (min-width: 768px) {
	.insp-cta {
		padding: 96px 0;
	}
	.insp-cta__title {
		font-size: 2.6rem;
	}
}

/* Gallery lightbox -------------------------------------------------------- */

.insp-noscroll {
	overflow: hidden;
}
.insp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(10, 14, 20, 0.94);
}
.insp-lightbox.is-open {
	display: flex;
}
.insp-lightbox__stage {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.insp-lightbox__img {
	max-width: min(1100px, 92vw);
	max-height: 86vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.insp-lightbox__close,
.insp-lightbox__nav {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.2s ease;
}
.insp-lightbox__close:hover,
.insp-lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.24);
}
.insp-lightbox__close {
	top: 18px;
	right: 18px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
}
.insp-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 34px;
	line-height: 1;
}
.insp-lightbox__nav--prev {
	left: 18px;
}
.insp-lightbox__nav--next {
	right: 18px;
}
.insp-lightbox--solo .insp-lightbox__nav,
.insp-lightbox--solo .insp-lightbox__counter {
	display: none;
}
.insp-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
	font-size: 13px;
	letter-spacing: 0.06em;
}
@media (max-width: 600px) {
	.insp-lightbox__nav {
		width: 42px;
		height: 42px;
		font-size: 28px;
	}
	.insp-lightbox__nav--prev {
		left: 8px;
	}
	.insp-lightbox__nav--next {
		right: 8px;
	}
}

/* Fallback chrome (only if Elementor can't render the widgets) ------------- */

.insp-fallback-header {
	padding: 20px 1rem;
	text-align: center;
}
.insp-fallback-header a {
	font-family: 'Playfair Display', serif !important;
	font-size: 1.4rem;
	color: var(--insp-ink);
	text-decoration: none;
}
.insp-fallback-footer {
	padding: 40px 1rem;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	background: #f2e4d4;
}

@media (min-width: 640px) {
	.insp-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}
@media (min-width: 1024px) {
	.insp-container {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}