/* =========================================================================
   Paracas Explorer — Ficha de tour
   Se carga solo en páginas de producto.
   ========================================================================= */

/* ---------------------------------------------------------------- Hero */
/* Cabecera a todo el ancho, con ritmo vertical compacto. */
.pex-tour-hero {
	padding: calc(var(--pex-header-h) + 16px) 0 26px;
	background: var(--pex-off-white);
	border-bottom: 1px solid var(--pex-line);
}

.pex-tour-hero .pex-breadcrumbs { margin-bottom: 8px; }

.pex-tour-hero__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.pex-tour-hero__badge {
	display: inline-block;
	padding: 5px 13px;
	background: var(--pex-primary);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--pex-radius-pill);
}

.pex-tour-hero__badge--sale { background: #d9432f; }

/* Chip de destino clickeable: mismo tratamiento tipográfico que las
   otras pastillas de la cabecera. */
.pex-dest-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	background: #fff;
	border: 1.5px solid var(--pex-line);
	border-radius: var(--pex-radius-pill);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pex-ink);
	transition: border-color 0.2s, color 0.2s;
}
.pex-dest-chip:hover { border-color: var(--pex-primary); color: var(--pex-primary); }
.pex-dest-chip .pex-icon { color: var(--pex-primary); }

/* Título a todo el ancho: admite títulos largos en dos líneas. */
.pex-tour-hero__title {
	margin-bottom: 0.12em;
	max-width: 22ch;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
}
@media (min-width: 900px) { .pex-tour-hero__title { max-width: 30ch; } }

.pex-tour-hero__subtitle { color: var(--pex-ink-soft); font-size: 1.02rem; margin: 0 0 6px; }

/* Prueba social + datos bajo el título */
.pex-tour-hero__social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
	margin-bottom: 20px;
	font-size: 0.9rem;
	color: var(--pex-ink-soft);
}

.pex-tour-hero__rating {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.92rem;
	color: var(--pex-ink);
	font-weight: 600;
}
.pex-tour-hero__rating .pex-icon { color: var(--pex-star); }
a.pex-tour-hero__rating:hover span { text-decoration: underline; }
.pex-tour-hero__rating--stat .pex-icon { color: var(--pex-primary); }

.pex-tour-hero__meta-item { display: inline-flex; align-items: center; gap: 6px; }
.pex-tour-hero__social .pex-tour-hero__meta-item .pex-icon { color: var(--pex-primary); }

/* Que las anclas no queden ocultas bajo el header fijo */
.pex-tour .pex-tour-section,
.pex-tour .pex-booking {
	/* Al hacer scroll solo queda la barra principal, no la franja superior. */
	scroll-margin-top: calc(var(--pex-bar-h) + 20px);
}

/* Descripción breve del hero (base, común a todos los tamaños) */
.pex-tour-hero__desc {
	color: var(--pex-ink-soft);
	margin: 0 0 12px;
	max-width: 800px;
	line-height: 1.55;
}

/* Mini-card de compra: exclusiva de escritorio.
   En mobile la reserva la resuelve la barra sticky inferior, así que
   aquí no se muestra y la vista móvil queda igual que antes. */
.pex-tour-hero__cta-box { display: none; }

/* ---------------------------------------------------------------- Galería */
.pex-gallery { position: relative; }

.pex-gallery__grid {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(4, 1fr);
	/* Filas proporcionales al ancho: la imagen principal (2x2) queda grande. */
	grid-auto-rows: clamp(120px, 16vw, 265px);
}

/* Botón "Ver todas las fotos" sobre la esquina inferior derecha */
.pex-gallery__all {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--pex-radius-pill);
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: var(--pex-shadow);
	font-family: var(--pex-font);
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--pex-ink);
	cursor: pointer;
	transition: transform 0.25s var(--pex-ease), background 0.25s;
}
.pex-gallery__all:hover { transform: translateY(-2px); background: #fff; }
.pex-gallery__all .pex-icon { color: var(--pex-primary); }

@media (max-width: 560px) {
	.pex-gallery__all { right: 12px; bottom: 12px; padding: 9px 14px; font-size: 0.78rem; }
}

.pex-gallery__item {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: var(--pex-radius);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--pex-primary-soft);
}

.pex-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--pex-ease), filter 0.4s;
}

.pex-gallery__item:hover img { transform: scale(1.05); filter: brightness(1.05); }

.pex-gallery__item--main { grid-column: span 4; grid-row: span 3; }

/* ------------------------------------------- Carrusel de galería (mobile) */
/* Los controles y las miniaturas solo existen por debajo de 760px: en
   escritorio la grilla ya muestra varias fotos a la vez y no aportan. */
.pex-gallery__nav,
.pex-gallery__count,
.pex-gallery__thumbs { display: none; }

@media (max-width: 759px) {
	/* Alto que ocupan las miniaturas bajo la foto. Las flechas y el contador
	   se posicionan contra .pex-gallery, que incluye la tira, así que sin
	   este descuento quedarían centrados sobre el conjunto y no sobre la
	   imagen. */
	.pex-gallery { --pex-gal-thumbs: 62px; }

	/* La grilla pasa a ser una pista deslizable con TODAS las fotos. */
	.pex-gallery__grid {
		display: flex;
		gap: 8px;
		grid-auto-rows: initial;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pex-gallery__grid::-webkit-scrollbar { display: none; }

	.pex-gallery__item {
		flex: 0 0 100%;
		scroll-snap-align: center;
		aspect-ratio: 4 / 3;
		/* Deslizar no debe leerse como "voy a ampliar". */
		cursor: default;
	}
	/* Todas se muestran: la clase --extra solo oculta en escritorio. */
	.pex-gallery__item--main { grid-column: auto; grid-row: auto; }
	.pex-gallery__item:hover img { transform: none; filter: none; }

	.pex-gallery__nav {
		position: absolute;
		z-index: 3;
		display: grid;
		place-items: center;
		width: 36px; height: 36px;
		top: calc((100% - var(--pex-gal-thumbs)) / 2);
		transform: translateY(-50%);
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.92);
		color: var(--pex-ink);
		box-shadow: var(--pex-shadow-sm);
		cursor: pointer;
		transition: opacity 0.2s;
	}
	.pex-gallery__nav--prev { left: 8px; }
	.pex-gallery__nav--next { right: 8px; }
	.pex-gallery__nav--prev .pex-icon { transform: rotate(90deg); }
	.pex-gallery__nav--next .pex-icon { transform: rotate(270deg); }
	.pex-gallery__nav[disabled] { opacity: 0; pointer-events: none; }

	.pex-gallery__count {
		position: absolute;
		z-index: 3;
		display: block;
		right: 10px;
		bottom: calc(var(--pex-gal-thumbs) + 10px);
		padding: 3px 10px;
		border-radius: var(--pex-radius-pill);
		background: rgba(8, 12, 10, 0.6);
		color: #fff;
		font-size: 0.72rem;
		font-weight: 700;
	}

	.pex-gallery__thumbs {
		display: flex;
		gap: 8px;
		margin-top: 8px;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-behavior: smooth;
	}
	.pex-gallery__thumbs::-webkit-scrollbar { display: none; }

	.pex-gallery__thumb {
		position: relative;
		flex: 0 0 72px;
		height: 54px;
		padding: 0;
		border: 2px solid transparent;
		border-radius: var(--pex-radius-sm);
		overflow: hidden;
		background: var(--pex-primary-soft);
		cursor: pointer;
		opacity: 0.55;
		transition: opacity 0.2s, border-color 0.2s;
	}
	.pex-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
	.pex-gallery__thumb.is-active { opacity: 1; border-color: var(--pex-primary); }

	.pex-gallery__thumb-play {
		position: absolute;
		inset: 0;
		display: grid;
		place-items: center;
		color: #fff;
		filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
	}

	/* Con el carrusel ya se ven todas: la pastilla sobra. */
	.pex-gallery__all { display: none; }
}

@media (min-width: 760px) {
	/* En la grilla solo entran los cinco elegidos. */
	.pex-gallery__item--extra { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.pex-gallery__grid,
	.pex-gallery__thumbs { scroll-behavior: auto; }
}

@media (min-width: 760px) {
	.pex-gallery__item--main { grid-column: span 2; grid-row: span 2; }
	.pex-gallery__grid--n1 .pex-gallery__item--main { grid-column: span 4; grid-row: span 2; }
	.pex-gallery__grid--n2 .pex-gallery__item--main { grid-column: span 3; }
	/* Con 3 ítems: principal 2x2 y dos secundarias apiladas a la derecha. */
	.pex-gallery__grid--n3 { grid-template-columns: repeat(3, 1fr); }
	.pex-gallery__grid--n3 .pex-gallery__item--main { grid-column: span 2; }
}

/* Miniaturas de video en la galería */
.pex-gallery__item--video img { filter: brightness(0.82); }

.pex-gallery__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
	transition: transform 0.3s var(--pex-ease);
}
.pex-gallery__item--video:hover .pex-gallery__play { transform: scale(1.12); }

/* Franja de video al final de la descripción */
.pex-video-banner {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 7;
	margin-top: 26px;
	padding: 0;
	border: 0;
	border-radius: var(--pex-radius-lg);
	overflow: hidden;
	cursor: pointer;
	background: #0c1f16;
	box-shadow: var(--pex-shadow-sm);
	transition: transform 0.3s var(--pex-ease), box-shadow 0.3s var(--pex-ease);
}
.pex-video-banner:hover { transform: translateY(-3px); box-shadow: var(--pex-shadow-lg); }

.pex-video-banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--pex-ease);
}
.pex-video-banner:hover img { transform: scale(1.04); }

.pex-video-banner__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: linear-gradient(180deg, rgba(8, 20, 14, 0.15) 0%, rgba(8, 20, 14, 0.6) 100%);
	color: #fff;
	text-align: center;
	padding: 20px;
}

.pex-video-banner__play {
	display: inline-flex;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5));
	transition: transform 0.3s var(--pex-ease);
	margin-bottom: 4px;
}
.pex-video-banner:hover .pex-video-banner__play { transform: scale(1.12); }

.pex-video-banner__kicker {
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.85);
}

.pex-video-banner__title {
	font-size: clamp(1.05rem, 2.4vw, 1.45rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

@media (max-width: 560px) {
	.pex-video-banner { aspect-ratio: 16 / 9; }
}

/* Player en el lightbox */
.pex-lightbox__video {
	width: min(1100px, calc(100vw - 100px));
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 120px);
}
.pex-lightbox__video iframe {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--pex-radius-sm);
	box-shadow: var(--pex-shadow-lg);
}
@media (max-width: 700px) {
	.pex-lightbox__video { width: calc(100vw - 20px); }
}

/* Lightbox propio */
.pex-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(8, 12, 10, 0.94);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s;
}
.pex-lightbox.is-open { opacity: 1; visibility: visible; }

/* El relleno inferior reserva el espacio de la tira y el contador. Sin esto
   la imagen se centra contra el viewport completo y termina pegada a las
   miniaturas: quedaban 3px entre una y otras. */
.pex-lightbox { padding: 24px 24px 172px; }

.pex-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	width: auto; height: auto;
	border-radius: var(--pex-radius-sm);
	box-shadow: var(--pex-shadow-lg);
}

/* Miniaturas del lightbox: navegación directa sin pasar una por una. */
.pex-lightbox__thumbs {
	position: absolute;
	left: 0; right: 0;
	bottom: 52px;
	display: flex;
	justify-content: flex-start;
	gap: 8px;
	max-width: min(880px, calc(100vw - 32px));
	margin-inline: auto;
	padding: 4px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
}
.pex-lightbox__thumbs::-webkit-scrollbar { display: none; }

.pex-lightbox__thumb {
	position: relative;
	flex: 0 0 84px;
	height: 60px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--pex-radius-sm);
	overflow: hidden;
	background: rgba(255, 255, 255, 0.1);
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.2s, border-color 0.2s;
}
.pex-lightbox__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pex-lightbox__thumb:hover { opacity: 0.85; }
.pex-lightbox__thumb.is-active { opacity: 1; border-color: #fff; }

.pex-lightbox__thumb-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
	font-size: 0;
}

/* Con una sola foto la tira no aporta nada y la imagen recupera el alto. */
.pex-lightbox__thumbs:empty,
.pex-lightbox--single .pex-lightbox__thumbs { display: none; }
.pex-lightbox--single { padding-bottom: 72px; }

@media (max-width: 560px) {
	.pex-lightbox { padding: 16px 16px 140px; }
	.pex-lightbox__thumbs { bottom: 44px; }
	.pex-lightbox__thumb { flex: 0 0 64px; height: 46px; }
	.pex-lightbox--single { padding-bottom: 64px; }
}

.pex-lightbox__btn {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	cursor: pointer;
	transition: background 0.2s;
}
.pex-lightbox__btn:hover { background: rgba(255, 255, 255, 0.28); }

.pex-lightbox__close { top: 18px; right: 18px; }
.pex-lightbox__prev { left: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); }
.pex-lightbox__next { right: 14px; top: 50%; transform: translateY(-50%) rotate(270deg); }

.pex-lightbox__counter {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9rem;
	font-weight: 600;
}

/* --------------------------------------------------- Lo más destacado */
.pex-highlights-band {
	padding: 26px 0;
	background: #fff;
	border-bottom: 1px solid var(--pex-line);
}

.pex-highlights-band__title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.82rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--pex-primary);
	margin-bottom: 16px;
}

.pex-highlights-band__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px 28px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.pex-highlights-band__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
	.pex-highlights-band__list--3 { grid-template-columns: repeat(3, 1fr); }
	.pex-highlights-band__list--4 { grid-template-columns: repeat(4, 1fr); }
}

.pex-highlights-band__list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.94rem;
	font-weight: 600;
	color: var(--pex-ink);
	line-height: 1.45;
}

.pex-highlights-band__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--pex-primary-soft);
	color: var(--pex-primary);
}

/* ---------------------------------------------------------------- Layout */
.pex-tour__layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	padding-top: 44px;
	padding-bottom: 56px;
}

@media (min-width: 1000px) {
	.pex-tour__layout { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; }
	.pex-tour__sidebar { position: sticky; top: calc(var(--pex-bar-h) + 20px); }
}

.pex-tour-section { margin-bottom: 44px; }

.pex-tour-section__title {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 1.4rem;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--pex-primary-soft);
	margin-bottom: 20px;
}
.pex-tour-section__title .pex-icon { color: var(--pex-primary); }

/* El texto de la ficha usa el mismo cuerpo que el resto de las secciones
   (detalles, incluye, recomendaciones) para que no destaque de más. */
.pex-tour .pex-prose { font-size: 0.95rem; }

/* ------------------------------------------------- Detalles del servicio */
.pex-details {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px 26px;
	grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pex-details { grid-template-columns: 1fr 1fr; } }

.pex-details li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; color: var(--pex-ink-soft); }
.pex-details li strong { color: var(--pex-ink); font-weight: 700; }
.pex-details__icon { color: var(--pex-primary); margin-top: 3px; flex-shrink: 0; display: inline-flex; }

/* --------------------------------------------------------------- Timeline */
.pex-timeline { list-style: none; margin: 0; padding: 0; position: relative; }

.pex-timeline__step {
	position: relative;
	display: grid;
	grid-template-columns: 60px 1fr;
	gap: 30px;
	/* Hora y contenido arrancan arriba: el punto acompaña al título. */
	align-items: start;
	padding: 0 0 26px;
}

.pex-timeline__step::before {
	content: "";
	position: absolute;
	z-index: 1;
	left: 69px;
	top: 7px;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--pex-primary);
	box-shadow: 0 0 0 4px var(--pex-primary-soft);
}

/* Conector punteado por etapa; la última termina en su punto. */
.pex-timeline__step::after {
	content: "";
	position: absolute;
	z-index: 0;
	left: 74px;
	top: 23px;
	bottom: -4px;
	border-left: 2px dashed var(--pex-sand-deep);
}
.pex-timeline__step:last-child { padding-bottom: 0; }
.pex-timeline__step:last-child::after { display: none; }

.pex-timeline__time { font-weight: 800; color: var(--pex-primary); font-size: 0.95rem; text-align: right; }
.pex-timeline__title { font-size: 1.05rem; margin-bottom: 4px; }
.pex-timeline__body p { color: var(--pex-ink-soft); font-size: 0.95rem; margin-bottom: 0; }

/* Texto a la izquierda (título arriba, descripción debajo) y miniatura
   a la derecha, centrada verticalmente respecto a esas dos filas. */
.pex-timeline__body,
.pex-acc__content {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}
.pex-timeline__text,
.pex-acc__text { flex: 1; min-width: 0; }

/* Miniatura de etapa: compacta, clicable y centrada frente al texto */
.pex-step-thumb {
	flex-shrink: 0;
	align-self: center;
	width: 132px;
	height: 100px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	cursor: zoom-in;
	background: var(--pex-primary-soft);
	box-shadow: var(--pex-shadow-sm);
	transition: transform 0.3s var(--pex-ease), box-shadow 0.3s var(--pex-ease);
}
.pex-step-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--pex-ease);
}
.pex-step-thumb:hover { transform: translateY(-2px); box-shadow: var(--pex-shadow); }
.pex-step-thumb:hover img { transform: scale(1.07); }

/* En el itinerario por días la imagen acompaña todo el alto del bloque:
   crece con el texto (con un tope) en vez de flotar centrada. */
.pex-acc__content .pex-step-thumb {
	align-self: stretch;
	width: 260px;
	height: auto;
	min-height: 165px;
	max-height: 340px;
	border-radius: var(--pex-radius);
}

@media (max-width: 560px) {
	.pex-timeline__body,
	.pex-acc__content { gap: 12px; }
	.pex-step-thumb { width: 96px; height: 76px; }
	.pex-acc__content .pex-step-thumb { width: 120px; min-height: 92px; max-height: 200px; }
}

@media (max-width: 560px) {
	.pex-timeline__step { grid-template-columns: 1fr; gap: 4px; padding-left: 28px; }
	.pex-timeline__step::before { left: 3px; }
	.pex-timeline__step::after { left: 8px; }
	.pex-timeline__time { text-align: left; }
}

/* --------------------------------------------------------------- Acordeón */
.pex-acc { border: 1px solid var(--pex-line); border-radius: var(--pex-radius); overflow: hidden; }

.pex-acc__item + .pex-acc__item { border-top: 1px solid var(--pex-line); }

.pex-acc__heading { margin: 0; }

.pex-acc__toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 17px 20px;
	background: #fff;
	border: 0;
	cursor: pointer;
	font-family: var(--pex-font);
	font-size: 1rem;
	font-weight: 700;
	text-align: left;
	color: var(--pex-ink);
	transition: background 0.2s;
}
.pex-acc__toggle:hover { background: var(--pex-off-white); }

.pex-acc__day {
	flex-shrink: 0;
	padding: 4px 12px;
	background: var(--pex-primary-soft);
	color: var(--pex-primary-dark);
	border-radius: var(--pex-radius-pill);
	font-size: 0.78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.pex-acc__label { flex: 1; }

.pex-acc__chevron { color: var(--pex-gray); transition: transform 0.3s var(--pex-ease); }
.pex-acc__item.is-open .pex-acc__chevron { transform: rotate(180deg); }

.pex-acc__panel { padding: 4px 20px 20px; color: var(--pex-ink-soft); }

/* Botón para expandir todos los días */
.pex-acc__actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.pex-acc__expand {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1.5px solid var(--pex-line);
	border-radius: var(--pex-radius-pill);
	background: #fff;
	font-family: var(--pex-font);
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--pex-primary);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.pex-acc__expand:hover { border-color: var(--pex-primary); background: var(--pex-primary-soft); }

.pex-acc__details { list-style: none; margin: 10px 0 0; padding: 0; }
.pex-acc__details li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 7px; font-size: 0.92rem; }
.pex-acc__details .pex-icon { color: var(--pex-primary); margin-top: 3px; }

.pex-acc__details:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Incluye */
.pex-includes { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pex-includes { grid-template-columns: 1fr 1fr; } }

.pex-includes__col {
	padding: 22px;
	border-radius: var(--pex-radius);
	border: 1px solid var(--pex-line);
}
.pex-includes__col--yes { background: #f2f9f5; border-color: #d3e9dc; }
.pex-includes__col--no { background: var(--pex-off-white); }

.pex-includes__col h3 { font-size: 1rem; margin-bottom: 14px; }
.pex-includes__col ul { list-style: none; margin: 0; padding: 0; }
.pex-includes__col li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 0.95rem; }
.pex-includes__col--yes .pex-icon { color: var(--pex-primary); margin-top: 3px; }
.pex-includes__col--no .pex-icon { color: var(--pex-gray); margin-top: 3px; }

/* ---------------------------------------------------------------- Políticas */
/* Políticas compuestas como talón de boleto: el lado izquierdo se separa
   con una perforación punteada y muescas, en vez de la barra vertical
   maciza. Se conservan el relleno claro y la sombra. */
.pex-policies { display: grid; gap: 18px; }

.pex-policy {
	position: relative;
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	background: var(--pex-off-white);
	border: 1px solid var(--pex-line);
	border-radius: var(--pex-radius);
	box-shadow: var(--pex-shadow-sm);
	overflow: hidden;
}

/* Talón: el ícono va suelto, sin círculo. */
.pex-policy__stub {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 22px;
	align-self: start;
	color: var(--pex-primary);
}

/* Perforación. */
.pex-policy::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 62px;
	border-left: 2px dotted var(--pex-sand-deep);
}

/* Muescas: dos medios círculos del color del fondo de página, centrados
   sobre la línea de perforación. */
.pex-policy::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 62px;
	width: 18px;
	transform: translateX(-50%);
	pointer-events: none;
	background-image:
		radial-gradient(circle at 50% 0, #fff 8px, transparent 8.5px),
		radial-gradient(circle at 50% 100%, #fff 8px, transparent 8.5px);
	background-repeat: no-repeat;
}

.pex-policy__body { padding: 20px 22px 20px 18px; }
.pex-policy__title { font-size: 1rem; margin: 0 0 10px; }

.pex-policy__line {
	margin: 0 0 10px;
	color: var(--pex-ink-soft);
	font-size: 0.95rem;
	line-height: 1.6;
	text-wrap: pretty;
}
.pex-policy__line:last-child { margin-bottom: 0; }

/* Etiqueta de entrada: recupera el prefijo en mayúsculas del texto y lo
   convierte en jerarquía en vez de dejarlo gritando. */
.pex-policy__label {
	font-weight: 800;
	color: var(--pex-ink);
}
.pex-policy__label::after {
	content: " · ";
	color: var(--pex-primary);
	font-weight: 800;
}

@media (max-width: 560px) {
	.pex-policy { grid-template-columns: 48px minmax(0, 1fr); }
	.pex-policy::before,
	.pex-policy::after { left: 48px; }
	.pex-policy__body { padding: 18px 16px 18px 14px; }
}

/* ---------------------------------------------------------- Recomendaciones */
.pex-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .pex-recs { grid-template-columns: 1fr 1fr; } }

.pex-recs li {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 16px;
	background: var(--pex-sand);
	border-radius: var(--pex-radius-sm);
	font-size: 0.93rem;
	font-weight: 600;
}
.pex-recs .pex-icon { color: #b98a2c; }

.pex-not-suitable { margin-top: 20px; }
.pex-not-suitable h3 { font-size: 1rem; }
.pex-not-suitable ul { list-style: none; margin: 0; padding: 0; }
.pex-not-suitable li { display: flex; align-items: center; gap: 9px; color: var(--pex-ink-soft); font-size: 0.92rem; margin-bottom: 6px; }
.pex-not-suitable .pex-icon { color: var(--pex-gray); }

/* ---------------------------------------------------------------- Encuentro */
.pex-meeting { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .pex-meeting { grid-template-columns: 1fr 1.2fr; } }

.pex-meeting__row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.pex-meeting__row .pex-icon { color: var(--pex-primary); margin-top: 3px; }
.pex-meeting__notes { color: var(--pex-ink-soft); font-size: 0.95rem; }

.pex-meeting__map {
	border-radius: var(--pex-radius);
	overflow: hidden;
	border: 1px solid var(--pex-line);
	aspect-ratio: 16 / 10;
}
.pex-meeting__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ Booking */
.pex-booking {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--pex-line);
	border-radius: var(--pex-radius-lg);
	box-shadow: var(--pex-shadow);
	display: grid;
	gap: 11px;
}

.pex-booking__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pex-booking__price .pex-booking__label,
.pex-booking__price .pex-booking__unit { color: var(--pex-gray); font-size: 0.85rem; }
.pex-booking__price strong { font-size: 1.5rem; font-weight: 800; color: var(--pex-ink); }
.pex-booking__price .pex-price__was { font-size: 0.95rem; font-weight: 600; }
.pex-booking__unit { font-size: 0.8rem; }

/* Título del tour dentro de la card de reserva */
.pex-booking__tour {
	margin: 0;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--pex-line);
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--pex-ink);
}

.pex-booking__form { display: grid; gap: 9px; }

.pex-booking__row { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

/* Etiquetas de todos los campos de la card, con o sin <label>. */
.pex-booking__field label,
.pex-booking__label,
.pex-pax__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pex-gray);
	margin-bottom: 5px;
}

.pex-booking__field input,
.pex-booking__field select,
.pex-pax__toggle {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--pex-line);
	border-radius: 12px;
	font-family: var(--pex-font);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--pex-ink);
	background: var(--pex-off-white);
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.pex-booking__field input:hover,
.pex-booking__field select:hover,
.pex-pax__toggle:hover { border-color: #cdd4da; background: #fff; }

.pex-booking__field input:focus,
.pex-booking__field select:focus,
.pex-pax__toggle:focus-visible {
	outline: none;
	background: #fff;
	border-color: var(--pex-primary);
	box-shadow: 0 0 0 3px rgba(0, 108, 50, 0.12);
}

/* Selects con chevron propio en vez del nativo */
.pex-booking__field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b555f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	background-size: 16px;
}

/* ------------------------------------------------- Calendario propio */
.pex-date { position: relative; }

.pex-date__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid var(--pex-line);
	border-radius: 12px;
	background: var(--pex-off-white);
	font-family: var(--pex-font);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--pex-gray);
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.pex-date__toggle:hover { border-color: #cdd4da; background: #fff; }
.pex-date__toggle:focus-visible {
	outline: none;
	background: #fff;
	border-color: var(--pex-primary);
	box-shadow: 0 0 0 3px rgba(0, 108, 50, 0.12);
}
.pex-date.has-value .pex-date__toggle { color: var(--pex-ink); }
.pex-date.is-open .pex-date__toggle { background: #fff; border-color: var(--pex-primary); }

.pex-date__icon { display: inline-flex; color: var(--pex-primary); flex-shrink: 0; }
.pex-date__display { flex: 1; }
.pex-date__chevron { display: inline-flex; color: var(--pex-ink-soft); transition: transform 0.25s var(--pex-ease); }
.pex-date.is-open .pex-date__chevron { transform: rotate(180deg); }

.pex-date__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 25;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--pex-line);
	border-radius: 14px;
	box-shadow: var(--pex-shadow-lg);
}

.pex-date__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 10px;
}

.pex-date__month {
	font-size: 0.88rem;
	font-weight: 800;
	text-transform: capitalize;
}

.pex-date__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 1.5px solid var(--pex-line);
	border-radius: 50%;
	background: #fff;
	color: var(--pex-primary);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
}
.pex-date__arrow:hover:not(:disabled) { border-color: var(--pex-primary); background: var(--pex-primary-soft); }
.pex-date__arrow:disabled { opacity: 0.35; cursor: not-allowed; color: var(--pex-gray); }
.pex-date__arrow .pex-icon { transform: rotate(90deg); }
.pex-date__arrow--next .pex-icon { transform: rotate(270deg); }

.pex-date__weekdays,
.pex-date__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}

.pex-date__weekdays span {
	text-align: center;
	font-size: 0.68rem;
	font-weight: 800;
	color: var(--pex-gray);
	padding-bottom: 4px;
}

.pex-date__day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font-family: var(--pex-font);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--pex-ink);
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.pex-date__day:hover:not(:disabled) { background: var(--pex-primary-soft); color: var(--pex-primary-dark); }
.pex-date__day:disabled { color: #c8ced4; cursor: not-allowed; }
.pex-date__day.is-selected { background: var(--pex-primary); color: #fff; font-weight: 800; }

/* ------------------------------------------- Horarios como pastillas */
/* Grilla de 3 columnas: las pastillas quedan alineadas y no dependen
   del largo del texto. Con más de 6 horarios se colapsa a dos filas. */
.pex-slots__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
}

.pex-slots--collapsed .pex-slot:nth-child(n + 7) { display: none; }
.pex-slots.is-expanded .pex-slot { display: block; }

.pex-slots__more {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--pex-font);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--pex-primary);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pex-slots__more:hover { color: var(--pex-primary-dark); }

.pex-slot { position: relative; }
.pex-slot input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}
.pex-slot span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 10px;
	border: 1.5px solid var(--pex-line);
	border-radius: var(--pex-radius-pill);
	background: var(--pex-off-white);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--pex-ink);
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pex-slot:hover span { border-color: #cdd4da; background: #fff; }
.pex-slot input:checked + span {
	border-color: var(--pex-primary);
	background: var(--pex-primary);
	color: #fff;
}
.pex-slot input:focus-visible + span {
	box-shadow: 0 0 0 3px rgba(0, 108, 50, 0.18);
}

/* ---------------------------------------------- Selector de pasajeros */
.pex-pax { position: relative; }

.pex-pax__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-align: left;
	cursor: pointer;
}
.pex-pax__chevron { display: inline-flex; color: var(--pex-ink-soft); transition: transform 0.25s var(--pex-ease); }
.pex-pax.is-open .pex-pax__chevron { transform: rotate(180deg); }
.pex-pax.is-open .pex-pax__toggle { background: #fff; border-color: var(--pex-primary); }

.pex-pax__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	padding: 6px 14px 12px;
	background: #fff;
	border: 1px solid var(--pex-line);
	border-radius: 14px;
	box-shadow: var(--pex-shadow-lg);
}

.pex-pax__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 0;
}
.pex-pax__row + .pex-pax__row { border-top: 1px solid var(--pex-line); }

.pex-pax__name { font-size: 0.9rem; font-weight: 700; }
.pex-pax__name small { display: block; font-size: 0.72rem; font-weight: 500; color: var(--pex-gray); }

.pex-pax__stepper { display: inline-flex; align-items: center; gap: 4px; }
.pex-pax__stepper button {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--pex-line);
	border-radius: 50%;
	background: #fff;
	color: var(--pex-primary);
	font-family: var(--pex-font);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pex-pax__stepper button:hover:not(:disabled) { border-color: var(--pex-primary); background: var(--pex-primary-soft); }
.pex-pax__stepper button:disabled { opacity: 0.4; cursor: not-allowed; color: var(--pex-gray); }
.pex-pax__stepper output { min-width: 26px; text-align: center; font-weight: 800; font-size: 0.95rem; }

.pex-pax__limit {
	margin: 6px 0 0;
	font-size: 0.75rem;
	line-height: 1.4;
	color: #b3261e;
}

.pex-booking__payment {
	border: 1.5px solid var(--pex-line);
	border-radius: var(--pex-radius-sm);
	padding: 8px 12px 10px;
	margin: 0;
	display: grid;
	gap: 5px;
}
.pex-booking__payment legend { font-size: 0.78rem; font-weight: 700; padding: 0 4px; }

.pex-booking__radio { display: flex; align-items: center; gap: 8px; font-size: 0.86rem; cursor: pointer; flex-wrap: wrap; }
.pex-booking__radio input { accent-color: var(--pex-primary); margin: 0; }
.pex-booking__deposit-amount { font-style: normal; color: var(--pex-primary-dark); font-weight: 700; margin-left: 2px; }
.pex-booking__deposit-note { font-size: 0.72rem; color: var(--pex-gray); margin: 0; line-height: 1.4; }

.pex-booking__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 9px 12px;
	background: var(--pex-primary-soft);
	border-radius: var(--pex-radius-sm);
	font-size: 0.88rem;
}
.pex-booking__total strong { font-size: 1.2rem; font-weight: 800; color: var(--pex-primary-dark); }

/* El guion de espera va por CSS y no como texto en el HTML.
   Weglot reescribe los elementos cuyo texto traduce y les reemplaza los
   atributos por su marcador wg-N: con "—" adentro, este <strong> perdía
   data-pex-total en todos los idiomas menos el original y el JS no
   encontraba dónde escribir el total. El contenido generado no está en el
   DOM, así que Weglot no puede tocarlo. */
.pex-booking__total [data-pex-total]:empty::before { content: "—"; }

.pex-booking__units-note { font-size: 0.8rem; color: var(--pex-ink-soft); margin: 0; }

.pex-booking__quote-note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 0.88rem;
	color: var(--pex-ink-soft);
	background: var(--pex-sand);
	border-radius: var(--pex-radius-sm);
	padding: 12px 14px;
	margin: 0;
}
.pex-booking__quote-note .pex-icon { color: #b98a2c; margin-top: 2px; flex-shrink: 0; }

.pex-booking__trust {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 0.78rem;
	color: var(--pex-ink-soft);
	margin: 0;
	padding-top: 6px;
	border-top: 1px solid var(--pex-line);
}
.pex-booking__trust .pex-icon { color: var(--pex-primary); margin-top: 2px; }

/* --------------------------------------------------------- Barra mobile tour */
.pex-mobile-bar--tour {
	display: none;
	grid-template-columns: auto 52px 1fr;
	gap: 10px;
	align-items: center;
}

/* La barra está desde el arranque: en mobile la mini-card del hero no se
   muestra, así que es el único lugar donde se ve el precio. Solo se retira
   mientras la card de reserva está en pantalla, para no tapar el mismo
   formulario al que lleva ni duplicar el CTA.
   El estado visible es el del CSS y `is-hidden` lo agrega main.js: si el JS
   falla o tarda, la barra queda visible, que es el fallback correcto. */
@media (max-width: 760px) {
	.pex-mobile-bar--tour {
		display: grid;
		transition: transform 0.25s var(--pex-ease), opacity 0.2s linear;
	}

	.pex-mobile-bar--tour.is-hidden {
		transform: translateY(120%);
		opacity: 0;
		pointer-events: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pex-mobile-bar--tour { transition: none; }
}

.pex-mobile-bar--tour__price { line-height: 1.2; }
.pex-mobile-bar--tour__price .pex-mobile-bar--tour__label { display: block; font-size: 0.68rem; color: var(--pex-gray); text-transform: uppercase; font-weight: 700; }
.pex-mobile-bar--tour__price strong { font-size: 1.05rem; font-weight: 800; color: var(--pex-ink); }
.pex-mobile-bar--tour__price .pex-price { gap: 6px; }
.pex-mobile-bar--tour__price .pex-price__was { font-size: 0.78rem; }
.pex-mobile-bar--tour .pex-btn { padding: 11px 10px; }

/* --------------------------------------------------------------------- SEO */
.pex-prose--seo { color: var(--pex-ink-soft); font-size: 0.92rem; }

.pex-seo-links h3 { font-size: 0.95rem; }
.pex-seo-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pex-seo-links a {
	display: inline-block;
	padding: 7px 14px;
	background: var(--pex-off-white);
	border: 1px solid var(--pex-line);
	border-radius: var(--pex-radius-pill);
	font-size: 0.85rem;
	font-weight: 600;
}
.pex-seo-links a:hover { border-color: var(--pex-primary); }

/* ------------------------------------------------------------------- Quote */
.pex-quote__intro { color: var(--pex-ink-soft); margin-bottom: 22px; }
.pex-quote__form {
	padding: 26px;
	background: var(--pex-off-white);
	border: 1px solid var(--pex-line);
	border-radius: var(--pex-radius-lg);
}

/* Comentarios / reseñas WooCommerce */
.pex-tour .commentlist { list-style: none; margin: 0; padding: 0; }
.pex-tour .commentlist .comment_container {
	display: flex;
	gap: 14px;
	padding: 18px;
	background: var(--pex-off-white);
	border-radius: var(--pex-radius);
	margin-bottom: 14px;
}
.pex-tour .commentlist img.avatar { border-radius: 50%; width: 48px; height: 48px; }
.pex-tour .star-rating { color: var(--pex-star); }

/* =========================================================================
   HERO — REDISEÑO SOLO ESCRITORIO (≥1024px)
   Nada de este bloque afecta a mobile ni a la tarjeta de reserva.
   ========================================================================= */
@media (min-width: 1024px) {

	/* --- Ritmo vertical --- */
	.pex-tour-hero { padding: calc(var(--pex-header-h) + 14px) 0 12px; }
	.pex-tour-hero .pex-breadcrumbs { margin-bottom: 16px; }
	.pex-tour-hero__tags { margin-bottom: 20px; gap: 8px; }
	.pex-tour-hero__title { margin-bottom: 12px; }
	.pex-tour-hero__desc { margin-bottom: 18px; font-size: 1.09rem; }
	.pex-tour-hero__social { margin-bottom: 0; }
	.pex-tour-hero__top { margin-bottom: 27px; }

	/* --- Cabecera en dos columnas: contenido + mini-card de compra --- */
	.pex-tour-hero__top {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 44px;
		align-items: start;
	}

	.pex-tour-hero__cta-box {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 20px 22px;
		background: #fff;
		border: 1px solid var(--pex-line);
		border-radius: var(--pex-radius-lg);
		box-shadow: var(--pex-shadow);
	}

	.pex-tour-hero__price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
	.pex-tour-hero__price-label,
	.pex-tour-hero__price-unit { color: var(--pex-gray); font-size: 0.82rem; }
	.pex-tour-hero__price .pex-price__current { font-size: 1.5rem; }

	.pex-tour-hero__actions { display: flex; flex-direction: column; gap: 9px; }
	.pex-tour-hero__actions .pex-btn { width: 100%; }

	.pex-tour-hero__trust {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin: 0;
		padding-top: 10px;
		border-top: 1px solid var(--pex-line);
		font-size: 0.78rem;
		color: var(--pex-ink-soft);
	}
	.pex-tour-hero__trust .pex-icon { color: var(--pex-primary); flex-shrink: 0; margin-top: 2px; }

	/* Puntos de confianza de la mini-card */
	.pex-tour-hero__chips {
		list-style: none;
		display: grid;
		gap: 7px;
		margin: 0;
		padding-top: 12px;
		border-top: 1px solid var(--pex-line);
	}
	.pex-tour-hero__chips li {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		font-size: 0.82rem;
		font-weight: 600;
		color: var(--pex-ink-soft);
		line-height: 1.4;
	}
	.pex-tour-hero__chips .pex-icon { color: var(--pex-primary); flex-shrink: 0; margin-top: 2px; }

	/* --- Título: ~18% más chico, compacto y de hasta dos líneas --- */
	.pex-tour-hero__title {
		font-size: clamp(1.95rem, 2.55vw, 2.45rem);
		line-height: 1.14;
		max-width: 24ch;
	}

	/* --- Etiquetas compactas --- */
	.pex-tour-hero__badge { padding: 4px 12px; font-size: 0.7rem; }
	.pex-tour-hero .pex-dest-chip { padding: 4px 11px; font-size: 0.7rem; }

	/* --- Fila única de valoración y datos --- */
	.pex-tour-hero__social {
		gap: 8px 0;
		font-size: 0.88rem;
	}
	/* Padding ajustado para que los cuatro datos entren en una sola línea. */
	.pex-tour-hero__social > * { padding: 0 12px; white-space: nowrap; }
	.pex-tour-hero__social > *:first-child { padding-left: 0; }
	.pex-tour-hero__social > *:last-child { padding-right: 0; }
	.pex-tour-hero__social > * + * { border-left: 1px solid var(--pex-line); }
	.pex-tour-hero__social .pexrs-rating { flex-wrap: nowrap; gap: 5px; }
	.pex-tour-hero__social .pex-tour-hero__meta-item { gap: 5px; }

	/* --- Galería: formato original (4 columnas, principal 2x2) y altura
	       contenida. Las filas escalan con el ancho pero acotadas, de modo
	       que la imagen principal se mantiene en una proporción fotográfica
	       (~3:2) en vez de crecer en vertical. --- */
	.pex-gallery__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-auto-rows: clamp(148px, 11.6vw, 186px);
		gap: 12px;
	}
	.pex-gallery__item--main { grid-column: span 2; grid-row: span 2; }

	/* Variantes con menos ítems, sin huecos */
	.pex-gallery__grid--n1 .pex-gallery__item--main { grid-column: span 4; }
	.pex-gallery__grid--n2 .pex-gallery__item { grid-column: span 2; grid-row: span 2; }
	.pex-gallery__grid--n3 { grid-template-columns: repeat(4, 1fr); }
	.pex-gallery__grid--n3 .pex-gallery__item:not(.pex-gallery__item--main) { grid-column: span 2; }
	.pex-gallery__grid--n4 .pex-gallery__item:last-child { grid-column: span 2; }

	/* --- "Ver todas las fotos": capa oscura sobre la última miniatura --- */
	.pex-gallery__all {
		background: rgba(16, 22, 28, 0.72);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		color: #fff;
		box-shadow: 0 4px 16px rgba(10, 16, 12, 0.3);
	}
	.pex-gallery__all:hover { background: rgba(16, 22, 28, 0.88); color: #fff; }
	.pex-gallery__all .pex-icon { color: #fff; }

	/* --- Miniatura de video: capa suave y botón circular de play --- */
	.pex-gallery__item--video img { filter: none; }

	.pex-gallery__item--video::after {
		content: "";
		position: absolute;
		inset: 0;
		background: rgba(12, 20, 15, 0.28);
		transition: background 0.3s var(--pex-ease);
		pointer-events: none;
	}
	.pex-gallery__item--video:hover::after { background: rgba(12, 20, 15, 0.18); }

	.pex-gallery__play {
		z-index: 2;
		filter: none;
	}
	.pex-gallery__play .pex-icon {
		width: 56px;
		height: 56px;
		padding: 13px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.94);
		color: var(--pex-primary-dark);
		box-shadow: 0 4px 18px rgba(10, 16, 12, 0.35);
	}
	.pex-gallery__item--video:hover .pex-gallery__play .pex-icon { background: #fff; }

	/* --- Franja de beneficios más cerca del hero --- */
	.pex-highlights-band { padding: 14px 0 24px; }
	.pex-highlights-band__title { margin-bottom: 14px; }
	.pex-highlights-band__list { gap: 16px 32px; align-items: center; }
	.pex-highlights-band__list li { align-items: center; }
	.pex-highlights-band__icon { width: 40px; height: 40px; }
}

/* ------------------------------- Cotización: hoja completa en mobile */

/* En desktop la cabecera de hoja no existe: manda el título de sección. */
.pex-quote__sheet-head { display: none; }
.pex-quote__scroll { display: contents; }

@media (max-width: 960px) {
	/* Cerrada: la sección no se muestra en el flujo. El formulario vive
	   solo dentro de la hoja, para no duplicar campos ni ids. */
	.pex-quote { display: none; }

	body.pex-quote-open { overflow: hidden; }

	body.pex-quote-open .pex-quote {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		z-index: 1200;
		margin: 0;
		background: #fff;
		animation: pex-quote-in 0.25s var(--pex-ease);
	}

	@keyframes pex-quote-in {
		from { opacity: 0; transform: translateY(14px); }
		to   { opacity: 1; transform: none; }
	}

	.pex-quote__sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 14px;
		flex: none;
		padding: 14px 16px calc(14px + env(safe-area-inset-top));
		padding-top: max(14px, env(safe-area-inset-top));
		background: var(--pex-primary-dark);
		color: #fff;
	}
	.pex-quote__sheet-tour {
		font-size: 0.9rem;
		font-weight: 800;
		line-height: 1.25;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
	.pex-quote__close {
		flex: none;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		background: rgba(255, 255, 255, 0.16);
		border: 0;
		border-radius: 50%;
		color: #fff;
		cursor: pointer;
	}

	/* Solo el cuerpo scrollea: la cabecera y el botón quedan fijos. */
	.pex-quote__scroll {
		display: block;
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 20px 16px 0;
	}

	.pex-quote .pex-tour-section__title { font-size: 1.25rem; margin-bottom: 6px; }
	.pex-quote__intro { font-size: 0.92rem; margin-bottom: 18px; }

	/* Una columna y campos cómodos. 16px evita que iOS haga zoom al
	   enfocar, que es lo que descoloca la pantalla al ir campo por campo. */
	.pex-quote .pex-form__row--2 { grid-template-columns: 1fr; }
	.pex-quote .pex-form input,
	.pex-quote .pex-form select,
	.pex-quote .pex-form textarea {
		font-size: 16px;
		min-height: 50px;
		padding: 13px 14px;
	}
	.pex-quote .pex-form textarea { min-height: 96px; }
	.pex-quote .pex-form label { font-size: 0.88rem; }

	/* Pie fijo: el botón nunca se pierde al bajar por el formulario. */
	.pex-quote__submit {
		position: sticky;
		bottom: 0;
		margin: 18px -16px 0;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid var(--pex-line);
		box-shadow: 0 -6px 20px rgba(20, 30, 25, 0.08);
	}
}
