/* =====================================================================
   Ficha de tour (single-tour.php) · diseño B
   Maquetas: B-Tour, B-Tour-p2, B-Tour-Movil(-p2), B-TourDia(-p2),
   B-TourRegional(-p2). Solo tokens de tokens.css; nada de colores sueltos
   salvo el velo Noche de las zonas de foto (rgba(16,24,32,…)).
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Portada
   Decisión 87 (14-oct-2026): sin «Desde» ni línea de los días (pasó abajo
   del resumen, §4); «Cotizar» y «Reservar por WhatsApp» en su propio
   renglón al pie («extra» de cta_hero: .cta-tour-hero__acciones), abajo a
   la derecha desde 768 px. Decisión 98 (14-oct-2026): en celular (menos
   de 768 px) la portada va sin esos botones. Decisión 85: sin migas de
   pan.
   --------------------------------------------------------------------- */
/* Titular (decisión 102, 16-oct-2026, el dueño: «la mayúscula que se veía
   bonita»): el nombre del tour y su renglón chico (la duración, «5 NOCHES
   6 DÍAS»; en los tours de un día, su frase corta) vuelven a Anton en
   mayúsculas, con los tamaños, renglones y espaciado de antes de la
   decisión 99 (tema del 2-oct): 106 / 72 / 54 px, el renglón chico a 0.46
   del nombre y en lila. La letra, las mayúsculas, el renglón 0.9, el
   espaciado 0.005em, el ancho de letra de Anton (límite de tamaño de cada
   renglón, también el de 1024 px de abajo) y el tamaño del h1 son los de
   todas las portadas (componentes.css §25, .cta-hero__titulo). El h1 mide
   --t-portada (85 / 64 / 42 px, el --t-h1 del 2-oct): el 0.005em se
   calcula con ese tamaño y los renglones lo heredan en px (0.425 / 0.32 /
   0.21 px), como antes; con el --t-h1 de Montserrat (56 / 44 / 32 px)
   quedaba más junto (0.28 / 0.22 / 0.16 px). Lo demás de la portada
   (etiquetas, «Inicia en…», botones) sigue en Montserrat. Las mayúsculas
   son solo de CSS: el contenido sigue escrito como está («Chihuahua
   Recargado»). */
.cta-tour-hero .cta-hero__titulo {
	text-wrap: wrap;
}
.cta-tour-hero .cta-hero__linea--normal {
	--cta-tam-linea: var(--t-portada-tour);
	line-height: 0.92;
}
.cta-tour-hero .cta-hero__linea--sub {
	--cta-tam-linea: calc(var(--t-portada-tour) * 0.46);
	margin-top: 14px;
	color: var(--cta-lila);
}
.cta-tour-hero--largo .cta-hero__linea--normal {
	--cta-tam-linea: calc(var(--t-portada-tour) * 0.82);
}
.cta-tour-hero .cta-hero__texto {
	color: var(--cta-blanco);
}
.cta-tour-hero .cta-hero__meta li:first-child {
	font-weight: 600;
	color: var(--cta-blanco);
}
.cta-tour-hero .cta-hero__fondo > img {
	object-position: 62% 40%;
}
/* Una sola portada vertical: a todo lo ancho y recortada al centro, como
   cuando todas las fotos de portada son verticales (decisión 76). */
.cta-tour-hero--centrada .cta-hero__fondo > img {
	object-position: 50% 50%;
}
/* Renglón de los botones: va después del titular en el orden de lectura y
   al pie de la portada (desde 768 px el texto va arriba y los botones, con
   margin-top: auto, abajo a la derecha; en celular no se muestra, §1 abajo). */
.cta-tour-hero__acciones {
	margin-top: 0;
}
@media (min-width: 768px) {
	.cta-tour-hero .cta-hero__extra {
		margin-top: auto;
	}
	/* La portada mide a lo más el alto de la pantalla menos la barra de
	   secciones (72 px), entre 520 y 640 px (760 desde 1280): la foto
	   respira y la barra de secciones asoma en la primera pantalla. Como
	   los botones van en su renglón, si el titular es largo la portada
	   crece y nunca se enciman. */
	.cta-tour-hero.cta-hero--alto-m {
		min-height: max(520px, min(640px, calc(100vh - 72px)));
		min-height: max(520px, min(640px, calc(100svh - 72px)));
	}
	.cta-tour-hero.cta-hero--sangre {
		gap: 28px;
		padding-bottom: 44px;
	}
	.cta-tour-hero.cta-hero--sangre .cta-hero__extra {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 0;
	}
	.cta-tour-hero__acciones {
		flex-wrap: nowrap;
		gap: 14px;
	}
	.cta-tour-hero .cta-hero__meta {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 28px;
	}
	.cta-tour-hero .cta-hero__meta li + li {
		position: relative;
		padding-left: 28px;
	}
	.cta-tour-hero .cta-hero__meta li + li::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 1px;
		height: 22px;
		transform: translateY(-50%);
		background: rgba(229, 225, 230, 0.28);
	}
}
@media (min-width: 1024px) {
	.cta-tour-hero .cta-hero__contenido {
		max-width: 1080px;
	}
	.cta-tour-hero .cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(1080px / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
}
@media (min-width: 1280px) {
	.cta-tour-hero.cta-hero--alto-m {
		min-height: max(560px, min(760px, calc(100vh - 72px)));
		min-height: max(560px, min(760px, calc(100svh - 72px)));
	}
	.cta-tour-hero.cta-hero--sangre {
		padding-bottom: 56px;
	}
}
@media (max-width: 767px) {
	/* Decisión 98 (14-oct-2026, Arturo: «muchas personas no leen la
	   información y solo piden info y dan clic»): en el celular la portada
	   no lleva «Cotizar» ni «Reservar por WhatsApp». Se quita el renglón
	   completo (display: none: fuera de la vista, del orden del tabulador y
	   de los lectores de pantalla; también sin JavaScript). La barra fija
	   de abajo aparece cuando el cliente ya pasó el Resumen (tour.js); sin
	   JavaScript va al final del contenido y «Cotizar» sigue en «Precios».
	   Desde 768 px la portada sigue con sus dos botones (decisión 87).
	   El HTML no cambia: la misma portada sirve a todos los anchos. */
	.cta-tour-hero .cta-hero__extra {
		display: none;
	}
	/* Lo esencial en la primera pantalla (decisión 56): la portada mide a lo
	   más el alto visible del celular (svh: con las barras del navegador)
	   menos la barra de secciones (64 px) y un asomo del Resumen, y el texto
	   va abajo, sobre el fondo Noche. Sin el renglón de los botones (decisión
	   98) la portada es 72 px más baja que antes (780 → 708 px a 390 × 844):
	   la barra de secciones y el título «Resumen» asoman en la primera
	   pantalla e invitan a seguir leyendo, y la foto no queda con un hueco
	   abajo. */
	.cta-tour-hero {
		min-height: min(708px, calc(100vh - 136px));
		min-height: min(708px, calc(100svh - 136px));
	}
	.cta-tour-hero.cta-hero--sangre {
		gap: 22px;
		padding-top: calc(var(--alto-header) + 24px);
	}
	.cta-tour-hero .cta-hero__fondo {
		bottom: auto;
		height: 70%;
	}
	/* Velo: sin las migas arriba (decisión 85) la foto se ve más clara bajo
	   el encabezado; desde el 30 % oscurece como antes, para que etiquetas y
	   titular se lean, y se funde con el fondo Noche. */
	.cta-tour-hero .cta-hero__velo {
		background-image: linear-gradient(180deg, rgba(16, 24, 32, 0.3) 0%, rgba(16, 24, 32, 0.52) 30%, rgba(16, 24, 32, 0.86) 58%, var(--cta-noche) 72%);
	}
	/* Titular en Anton (decisión 102): los tamaños de antes de la decisión
	   99. Cada renglón baja solo si su palabra más larga no cabe a lo ancho
	   (componentes.css, .cta-hero__linea, con el ancho de letra de Anton). */
	.cta-tour-hero .cta-hero__linea--normal {
		--cta-tam-linea: 54px;
	}
	.cta-tour-hero--largo .cta-hero__linea--normal {
		--cta-tam-linea: 48px;
	}
	.cta-tour-hero .cta-hero__linea--sub {
		--cta-tam-linea: 26px;
		margin-top: 10px;
	}
	.cta-tour-hero .cta-hero__contenido {
		gap: 16px;
	}
	.cta-tour-hero .cta-hero__texto {
		font-size: 17px;
		line-height: 1.5;
	}
	.cta-tour-hero .cta-hero__meta {
		gap: 2px;
		font-size: 14px;
	}
	/* Hasta la decisión 98 aquí iban «Cotizar» y «Reservar por WhatsApp»
	   lado a lado (rejilla 2fr / 3fr, 52 px; 48 px en celulares bajos y
	   relleno de 8 px bajo 360 px, corregir-2). */
}
/* Celulares de poca altura (iPhone SE con las barras de Safari, 375 × 548;
   Android de 360 × 560–640; 320 × 568): menos aire y titular más chico para
   que el titular completo y la barra de secciones quepan en la primera
   pantalla (decisión 56; hasta la decisión 98, también «Cotizar» y
   «Reservar»). */
@media (max-width: 767px) and (max-height: 660px) {
	.cta-tour-hero.cta-hero--sangre {
		gap: 16px;
		padding-top: calc(var(--alto-header) + 14px);
	}
	.cta-tour-hero .cta-hero__contenido {
		gap: 10px;
	}
	.cta-tour-hero .cta-hero__linea--normal {
		--cta-tam-linea: 44px;
	}
	.cta-tour-hero--largo .cta-hero__linea--normal {
		--cta-tam-linea: 38px;
	}
	.cta-tour-hero .cta-hero__linea--sub {
		--cta-tam-linea: 22px;
		margin-top: 6px;
	}
	.cta-tour-hero .cta-hero__etiquetas .cta-etiqueta {
		min-height: 28px;
		padding-inline: 12px;
	}
}
@media (max-width: 359px) and (max-height: 660px) {
	.cta-tour-hero--largo .cta-hero__linea--normal {
		--cta-tam-linea: 34px;
	}
	/* 320 × 568: las etiquetas más juntas para que quepan en un renglón
	   (desde la decisión 99 ya no va la de la colección, «El Chepe»). */
	.cta-tour-hero .cta-hero__etiquetas {
		gap: 6px;
	}
	.cta-tour-hero .cta-hero__etiquetas .cta-etiqueta {
		padding-inline: 10px;
	}
}
/* Computadora con poca altura (1280 × 720): menos aire arriba y entre
   renglones. */
@media (min-width: 768px) and (max-height: 820px) {
	.cta-tour-hero.cta-hero--sangre {
		padding-top: calc(var(--alto-header) + 28px);
	}
	.cta-tour-hero.cta-hero--sangre .cta-hero__contenido {
		gap: 20px;
	}
}
/* Laptops bajas (1366 × 657 con las barras del navegador): con un titular
   de dos renglones la portada pasaba de lo pedido (641 px) y la barra de
   secciones apenas asomaba. Menos aire arriba, antes de los botones y
   abajo. */
@media (min-width: 768px) and (max-height: 700px) {
	.cta-tour-hero.cta-hero--sangre {
		gap: 18px;
		padding-top: calc(var(--alto-header) + 20px);
		padding-bottom: 28px;
	}
}

/* ---------------------------------------------------------------------
   2. Anclas: solo las secciones (decisión 61; «Cotizar» y «Reservar» van en
   la barra de reserva fija de abajo)
   Decisión 97 (14-oct-2026, Arturo): la barra de secciones tenía la letra
   de titulares del menú principal («Inicio, Conócenos, El Chepe…», en
   mayúsculas) y competía con él. Ahora va con la letra del texto, como
   los títulos de las secciones (decisión 86): Montserrat como se escribe
   («Resumen», «Cómo reservar»), sin mayúsculas ni espaciado, más chica
   (15 px en computadora, 14 px en celular), en peso 500 y en el tono
   suave (--texto-2). La sección en la que está el cliente va en el color
   del texto y en peso 600, con la línea roja (computadora) o la píldora
   rellena (celular). Ese estilo es el de cta_anclas (componentes.css §31:
   también las barras de Hoteles, Preguntas frecuentes y las páginas
   legales); aquí solo va la separación de esta barra. Mismos altos de
   antes (72 px de barra en computadora, 64 en celular, píldoras de 44 px):
   el desplazamiento a las anclas, las columnas fijas y el video siguen
   midiendo lo mismo.
   --------------------------------------------------------------------- */
.cta-tour-anclas .cta-anclas__lista {
	gap: 32px;
}
/* Muchas secciones entre 1024 y 1279 px (ancho útil de 944 px): con 10
   secciones (paquetes de El Chepe) se juntan un poco; con 11 o más (tours
   nuevos) además bajan a 14 px. Así caben todas sin desplazar la fila
   (medido el 14-oct-2026 en los 22 tours). Desde 1280 px caben todas a 15 px;
   bajo 1024 px, si no caben, la fila se desliza (componentes.css §31). */
@media (min-width: 768px) and (max-width: 1023px) {
	.cta-tour-anclas .cta-anclas__lista {
		gap: 24px;
	}
}
@media (min-width: 1024px) and (max-width: 1279px) {
	.cta-tour-anclas:has(.cta-anclas__lista > li:nth-child(10)) .cta-anclas__lista {
		gap: 24px;
	}
	.cta-tour-anclas:has(.cta-anclas__lista > li:nth-child(11)) .cta-anclas__lista {
		gap: 16px;
	}
	.cta-tour-anclas:has(.cta-anclas__lista > li:nth-child(11)) .cta-anclas__enlace {
		font-size: 14px;
	}
}
@media (max-width: 767px) {
	.cta-tour-anclas .cta-anclas__lista {
		gap: 8px;
	}
}

/* ---------------------------------------------------------------------
   3. Encabezados de sección de la ficha
   --------------------------------------------------------------------- */
.cta-tour-encabezado .cta-encabezado-seccion__subtitulo {
	color: var(--texto-2);
	letter-spacing: 0.12em;
}
.cta-tour-encabezado .cta-encabezado-seccion__lado > p:not([class]) {
	font-size: 16px;
	line-height: 1.6;
}
.cta-tour-sec--itinerario .cta-encabezado-seccion__lado {
	align-items: flex-end;
	text-align: right;
}
@media (max-width: 1023px) {
	.cta-tour-sec--itinerario .cta-encabezado-seccion__lado {
		align-items: flex-start;
		text-align: left;
	}
}
.cta-tour-encabezado--largo .cta-titulo-seccion {
	max-width: 900px;
	font-size: calc(var(--t-h2) * 0.86);
}

/* ---------------------------------------------------------------------
   4. Resumen (texto + video del recorrido)
   Decisión 99 (16-oct-2026, hoja 7 de Arturo): sin el título «Resumen» a
   la vista (queda para lectores de pantalla) y sin la tarjeta «Datos del
   viaje». El video del recorrido (si el tour tiene) va junto al texto:
   desde 1024 px a la derecha (columna de 300 px; 400 con un video
   horizontal); en celular y tableta, debajo del texto y centrado.
   Decisión 112 (20-oct-2026, hoja 1 de «algunos ajustes MODIFICACIONES»:
   la descripción salía «recargado más hacia la izquierda y no en medio
   justificado»): el resumen va en LA MISMA COLUMNA CENTRADA que las
   secciones de abajo (§16: 960 px; en celular y tableta, todo el ancho;
   desde 1440 px crece × --u con el bloque generado), con sus mismas
   orillas: --contenido vale ahí el ancho de la columna, así que los dos
   .cta-contenedor de la sección (el texto con el video y la línea de los
   días) la miden. El texto va justificado (base.css) a todo lo ancho de
   la columna, sin ancho de lectura propio (antes 860 px, o 820 junto al
   video, pegados a la izquierda del contenido). Con video, desde 1024 px
   el texto y el video van lado a lado dentro de la columna (texto de unos
   600 px, el video en la orilla derecha) y a media altura uno del otro:
   una introducción corta queda junto al centro del video y una larga
   lleva el video a su media altura, sin un hueco grande debajo de
   ninguno. Ya no hay ajustes a mano para pantallas grandes (§22): en la
   columna todo crece × --u, como la letra.
   --------------------------------------------------------------------- */
.cta-tour-sec--resumen {
	--cta-tsec-ancho: 960px;
	--contenido: var(--cta-tsec-ancho);
}
.cta-tour-resumen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}
.cta-tour-resumen__principal {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}
.cta-tour-resumen__lado {
	min-width: 0;
}
@media (min-width: 1024px) {
	.cta-tour-resumen--con-video {
		--cta-resumen-lado: 300px;
		grid-template-columns: minmax(0, 1fr) var(--cta-resumen-lado);
		column-gap: 56px;
		align-items: center;
	}
	.cta-tour-resumen--con-video:has(.cta-tvideo--horizontal) {
		--cta-resumen-lado: 400px;
	}
	.cta-tour-resumen__principal {
		gap: 28px;
	}
}
.cta-tour-sec--resumen {
	padding-block: var(--e-8) var(--e-9);
}
@media (max-width: 767px) {
	.cta-tour-sec--resumen {
		padding-block: var(--e-6) var(--e-7);
	}
}

/* Línea de los días bajo el resumen (decisión 87; antes, en la portada):
   desde 1024 px, a todo lo ancho de la columna (decisión 112), abajo del
   texto y del video (fuera de su rejilla). Sobre el fondo del sitio, con
   los colores del modo (línea y títulos en --texto, nodos con el fondo de
   la sección). En celular y tableta no se muestra (resumen.php). */
.cta-tour-resumen__ruta {
	display: none;
}
@media (min-width: 1024px) {
	.cta-tour-resumen__ruta {
		display: block;
		margin-top: 34px;
	}
	.cta-tour-dias .cta-ruta__titulo {
		font-size: 16px;
	}
	/* Con 5–8 paradas los títulos largos («Barrancas del Cobre») llegaban
	   hasta la parada siguiente: más aire a la derecha para que se partan. */
	.cta-tour-dias .cta-ruta__textos {
		padding-right: 28px;
	}
	/* Con 7 u 8 paradas en la columna (960 px; 944 a 1024 px) cada una mide
	   de 118 a 137 px: a 16 px «Cuauhtémoc» o «Bahuichivo» no cabían y
	   llegaban hasta la parada siguiente. Títulos más chicos y menos aire a
	   la derecha (14.5 px con Montserrat, decisión 99: a 16 px «Chihuahua»
	   medía 107 px en 104). Antes de la decisión 112 solo hacía falta de
	   1024 a 1279 px; ahora, en la columna, en todos los anchos. */
	.cta-tour-dias:has(> .cta-ruta__parada:nth-child(7)) .cta-ruta__titulo {
		font-size: 14.5px;
	}
	.cta-tour-dias:has(> .cta-ruta__parada:nth-child(7)) .cta-ruta__textos {
		padding-right: 14px;
	}
}

/* La frase del tour y la introducción. Decisión 111 (20-oct-2026, hoja 6
   de «Aún más MODIFICACIONES»: «el texto debe tener el mismo tamaño y
   tipografía»): todos los párrafos iguales (el primero ya no va a 22 px
   como «lead») y la frase de arriba con el mismo tamaño, alto de renglón y
   letra; solo en negritas y en el color de los títulos, como subtítulo del
   resumen. 17 px (16 en celular), como el texto corrido de la ficha. */
.cta-tour-frase,
.cta-tour-intro p {
	font-size: 17px;
	line-height: 1.65;
	color: var(--texto-2);
}
.cta-tour-frase {
	font-weight: 600;
	color: var(--titulo);
	text-wrap: pretty;
}
.cta-tour-intro {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
@media (max-width: 767px) {
	.cta-tour-frase,
	.cta-tour-intro p {
		font-size: 16px;
	}
}


/* Bloques del resumen */
.cta-tour-bloque {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.cta-tour-bloque__titulo {
	font-size: calc(var(--t-h2) * 0.6);
	line-height: 1.2;
}
.cta-tour-bloque--menor {
	gap: 18px;
	margin-top: -24px;
	padding-top: 28px;
	border-top: 1px solid var(--borde);
}
.cta-tour-bloque--menor .cta-tour-bloque__titulo {
	font-size: var(--t-antetitulo);
	letter-spacing: var(--espaciado-etiqueta);
	color: var(--texto-2);
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
}
.cta-tour-lista-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 32px;
}
.cta-tour-lista-2 li {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--texto-2);
}
/* «Visitamos» (decisión 113, 21-oct-2026, hoja 1 de «algunos ajustes
   MODIFICACIONES (1)»: a Arturo no le gustó con una foto por lugar —la
   rejilla de la decisión 99—; «quítale la imagen y que sea en lista»): todos
   los lugares tal como los escribió el dueño, en su orden, como la lista de
   «¿Qué incluye?» (mismo tamaño de letra y de círculo) con un ícono de
   ubicación en lugar de la palomita: en celular una columna; desde 480 px
   dos y desde 1024 px tres (nombres cortos). Sin enlaces ni fotos. Los
   grupos («En Creel se visita», «En Cuauhtémoc») llevan su rótulo arriba,
   en el color de los títulos; una frase que no es solo una lista de nombres
   (Recargado - El Fuerte) va a todo lo ancho (--frase). Los nombres van a la
   izquierda y sin guiones (base.css: nombres propios en columnas
   angostas, justificados dejaban huecos y «Cusára-re»); la frase se
   justifica como el resto del texto. El ícono va en AZUL (decisión 116,
   22-oct-2026, hoja 1 de «algunos ajustes MODIFICACIONES (2)»: «los puntos
   rojos hay que cambiarlos por un azul»): el azul pizarra apagado del
   acento de la decisión 107 (tokens.css, «Acento suave»), el trazo en
   --acento (#4a6788; oscuro #9db8d6, escrito en el SVG porque un data: no
   lee variables) sobre un círculo --acento-suave (#e6edf5; oscuro
   #243549): 4.96:1 en claro y 6.1:1 en oscuro (3:1 basta en un ícono).
   Hasta la decisión 116 era el rojo de los textos sobre un rojo muy
   claro. */
.cta-tour-visitamos {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cta-tour-visitamos + .cta-tour-visitamos {
	margin-top: 10px;
}
.cta-tour-visitamos__grupo {
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--titulo);
}
.cta-tour-visitamos__lista {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 14px 32px;
}
@media (min-width: 480px) {
	.cta-tour-visitamos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.cta-tour-visitamos__lista {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.cta-tour-visitamos__lista li {
	position: relative;
	min-height: 26px;
	margin: 0;
	padding-left: 38px;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-tour-visitamos__lista li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: var(--r-pildora);
	background: var(--acento-suave) center / 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6788' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.6A7 7 0 0 1 19 9.4C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E");
}
.tema-oscuro .cta-tour-visitamos__lista li::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239db8d6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.6A7 7 0 0 1 19 9.4C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.4'/%3E%3C/svg%3E");
}
.cta-tour-visitamos__lista--frase {
	grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 767px) {
	.cta-tour-lista-2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.cta-tour-bloque__titulo {
		font-size: 20px;
	}
	.cta-tour-bloque--menor {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------
   5. Plan de viaje / Disponibilidad
   --------------------------------------------------------------------- */
.cta-tour-plan {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 36px;
	border: 1px solid var(--borde);
	border-radius: var(--r-tarjeta);
	background: var(--tarjeta);
}
.cta-tour-plan__titulo {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	flex: 1 1 auto;
	gap: 12px;
	font-size: 24px;
	line-height: 1.2;
}
.cta-tour-plan__icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tour-plan__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta-tour-plan__cuerpo > p {
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--texto-2);
}
.cta-tour-plan__meses {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.cta-tour-plan__mes {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 14px 6px;
	border: 1px solid var(--borde);
	border-radius: 16px;
	background: var(--fondo);
}
.cta-tour-plan__mes-nombre,
.cta-tour-plan__dia-nombre {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--titulo);
	font-weight: var(--peso-etiqueta);
}
.cta-tour-plan__dias {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}
.cta-tour-plan__dia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	font-weight: 700;
	font-size: 11px;
	line-height: 1;
	color: var(--texto-3);
}
.cta-tour-plan__dia.es-disponible {
	border-color: var(--texto);
	background: var(--texto);
	color: var(--fondo);
}
.cta-tour-plan__semana {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 10px;
	margin-top: 8px;
}
.cta-tour-plan__dia-semana {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 16px 4px;
	border: 1px solid var(--borde);
	border-radius: 16px;
	background: var(--fondo);
}
.cta-tour-plan__dia-semana:not(.es-disponible) .cta-tour-plan__dia-nombre {
	color: var(--texto-3);
}
.cta-tour-plan__marca {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	color: var(--texto-3);
}
.es-disponible .cta-tour-plan__marca {
	border-color: var(--texto);
	background: var(--texto);
	color: var(--fondo);
}
.cta-tour-plan__leyenda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	font-size: 12.5px;
	color: var(--texto-3);
}
.cta-tour-plan__punto {
	width: 12px;
	height: 12px;
	border-radius: var(--r-pildora);
	background: var(--texto);
}
.cta-tour-plan__claves {
	margin-left: 12px;
}
@media (max-width: 767px) {
	.cta-tour-plan {
		gap: 0;
		padding: 22px 20px 24px;
		border-color: var(--borde-fuerte);
		border-radius: var(--r-bloque);
	}
	.cta-tour-plan:not(.es-plegado) .cta-tour-plan__cabeza {
		padding-bottom: 18px;
		margin-bottom: 18px;
		border-bottom: 1px solid var(--borde);
	}
	.cta-tour-plan__titulo {
		flex-direction: row;
		justify-content: flex-start;
		font-size: 20px;
	}
	.cta-tour-plan__cuerpo > p {
		font-size: 15px;
		line-height: 1.6;
	}
	.cta-tour-plan__meses {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.cta-tour-plan__mes {
		gap: 8px;
		padding: 10px 4px;
	}
	.cta-tour-plan__mes-nombre {
		font-size: 13px;
	}
	.cta-tour-plan__semana {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
	}
	.cta-tour-plan__leyenda {
		flex-direction: column;
		align-items: flex-start;
	}
	.cta-tour-plan__leyenda > span:not(.cta-tour-plan__punto):not(.cta-tour-plan__claves) {
		margin-top: -22px;
		margin-left: 20px;
	}
	.cta-tour-plan__claves {
		margin-left: 0;
	}
}

/* ---------------------------------------------------------------------
   6. «[Por confirmar]» (anticipo sin dato, ¿Cómo reservar? sin pasos)
   Hasta la decisión 99 aquí iba la tarjeta «Datos del viaje» del resumen
   (.cta-reserva); se quitó porque repetía información.
   --------------------------------------------------------------------- */
.cta-por-confirmar {
	font-weight: 600;
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
   6b. Calculadora de precios (paquetes de El Chepe, CALCULADORA.md §4)
   --------------------------------------------------------------------- */
/* Sin JS todo esto queda oculto: el tema no tiene una regla global
   [hidden] y cualquier «display» de autor la anularía (§4.5). */
.cta-calc [hidden] {
	display: none !important;
}
.cta-calc {
	display: flex;
	flex-direction: column;
	gap: 12px;
	scroll-margin-top: 24px;
}
.cta-calc__interfaz {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cta-calc__controles,
.cta-calc__salida {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}
.cta-calc__intro {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--texto-2);
}
.cta-calc__grupo {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.cta-calc__leyenda,
.cta-calc__etiqueta {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	color: var(--texto-2);
}
/* La leyenda como bloque normal (fuera del borde del fieldset). */
.cta-calc__leyenda {
	float: left;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
}
.cta-calc__grupo .cta-contador {
	clear: both;
}

/* Contador −/+ */
.cta-contador {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 56px;
	padding: 6px 0;
}
.cta-calc__grupo .cta-contador + .cta-contador {
	border-top: 1px solid var(--borde);
}
.cta-contador__textos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cta-contador__etiqueta {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--texto);
}
.cta-contador__ayuda {
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--texto-3);
}
.cta-contador__control {
	display: flex;
	flex: none;
	align-items: center;
	gap: 6px;
}
.cta-contador__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--input-borde);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	color: var(--texto);
	cursor: pointer;
	/* Tocar «+» varias veces seguidas suma; no hace zoom con doble toque (iOS). */
	touch-action: manipulation;
}
.cta-contador__boton:hover {
	border-color: var(--texto);
}
.cta-contador__boton[aria-disabled="true"] {
	border-color: var(--borde);
	color: var(--texto-3);
	cursor: not-allowed;
	opacity: 0.55;
}
.cta-contador__valor {
	width: 52px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 1.5px solid var(--input-borde);
	border-radius: 12px;
	background: var(--input-bg);
	color: var(--texto);
	font-family: var(--fuente-texto);
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	appearance: textfield;
	-moz-appearance: textfield;
}
.cta-contador__valor::-webkit-outer-spin-button,
.cta-contador__valor::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}
/* «Ver desglose y anticipo» (plegado, decisión 44). Bebés y habitaciones
   ya no se pliegan (decisión 103): hasta el 16-oct-2026 iban en un renglón
   «Bebés y habitaciones» (.cta-calc__mas) que decía cómo quedaron. */
.cta-calc__detalles-boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: var(--texto);
	font: inherit;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}
.cta-calc__plegable-icono {
	flex: none;
	color: var(--texto-2);
	transition: transform 0.2s ease;
}
[aria-expanded="true"] > .cta-calc__plegable-icono {
	transform: rotate(180deg);
}
.cta-calc__detalles-boton:hover .cta-calc__detalles-texto {
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Habitaciones (decisión 103): a la vista, justo debajo de Bebés, con el
   mismo ritmo que los contadores de «¿Quiénes viajan?» (una raya entre
   renglones; el margen negativo quita el espacio de 18 px de la columna).
   Debajo, el reparto («1 triple y 1 doble») y una raya que cierra el
   bloque antes de la fecha. */
.cta-calc__habitaciones {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: -18px;
	padding-bottom: 12px;
	border-top: 1px solid var(--borde);
	border-bottom: 1px solid var(--borde);
}
.cta-calc__reparto {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: var(--r-pildora);
	background: var(--chip-bg);
	color: var(--chip-texto);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
}
.cta-calc__reparto:empty {
	display: none;
}

/* Mes, salida y clase */
.cta-calc__campo {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.cta-calc .cta-calc__select {
	min-height: 48px;
	padding: 0 44px 0 14px;
	border-radius: 14px;
	font-size: 15px;
}
.cta-calc .cta-campo__select .cta-icono {
	right: 14px;
}
.cta-calc__select option:disabled {
	color: var(--texto-3);
}
.cta-calc__valor-fijo {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--texto);
}
.cta-calc__nota-campo {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--texto-3);
}

/* Día de salida (decisión 69): al elegir el mes, solo los días en que sale
   el tour, como botones de opción compactos («mié 14»). El radio nativo va
   transparente encima de su botón (lo que se toca es el radio; las flechas
   del teclado cambian de día). Elegido: relleno en el color del texto (no
   solo cambia el tono). Mínimo 44 px de alto; caben 4 por renglón a 320 px. */
.cta-calc__dias {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.cta-calc__dias-leyenda {
	float: left;
	width: 100%;
	margin: 0 0 6px;
	padding: 0;
}
.cta-calc__dias-regla {
	clear: both;
	margin: 0 0 8px;
}
.cta-calc__dias-lista {
	clear: both;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 6px;
}
.cta-calc__dia {
	position: relative;
	display: block;
	min-width: 0;
	cursor: pointer;
}
.cta-calc__dia-radio {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	touch-action: manipulation;
}
.cta-calc__dia-texto {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 4px;
	min-height: 44px;
	padding: 11px 4px;
	border: 1.5px solid var(--input-borde);
	border-radius: 12px;
	background: var(--input-bg);
	color: var(--texto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}
.cta-calc__dia-semana {
	font-weight: 400;
	color: var(--texto-2);
}
.cta-calc__dia:hover .cta-calc__dia-texto {
	border-color: var(--texto);
}
.cta-calc__dia-radio:checked + .cta-calc__dia-texto {
	border-color: var(--texto);
	background: var(--texto);
	color: var(--fondo);
}
.cta-calc__dia-radio:checked + .cta-calc__dia-texto .cta-calc__dia-semana {
	color: inherit;
}
.cta-calc__dia-radio:focus-visible + .cta-calc__dia-texto {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
@media (forced-colors: active) {
	.cta-calc__dia-radio:checked + .cta-calc__dia-texto {
		forced-color-adjust: none;
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
	}
}

/* Bajo la fecha (decisión 70): «Todo queda sujeto a disponibilidad…», pegada
   a los días (o al mes, o a la fecha única). Sin nota de anticipación: la de
   menos de 3 días se quitó con la decisión 108 (las de 3 meses y de Navidad,
   con la 107). */
.cta-calc__disponibilidad {
	margin-top: -10px;
}

/* Resultado */
.cta-calc__resultado {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 20px;
	border-radius: var(--r-bloque);
	background: var(--tarjeta-alt);
	color: var(--texto);
}
.cta-calc__resultado:empty {
	display: none;
}
.cta-calc__resultado--alerta {
	border-left: 3px solid var(--rojo);
}
.cta-calc__estado-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 17px;
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.25;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
}
.cta-calc__estado-icono {
	flex: none;
	color: var(--texto-2);
}
.cta-calc__resultado--alerta .cta-calc__estado-icono {
	color: var(--rojo-texto);
}
.cta-calc__estado-texto {
	font-size: 14px;
	line-height: 1.5;
	color: var(--texto-2);
}
/* Precio por persona (cifra grande, negra: decisión 54) y, debajo, el total del grupo
   (más chico): lo primero que ve el cliente es el precio por persona
   (pedido de Arturo, 1-oct-2026; CALCULADORA.md §4.3). */
.cta-calc__precio-cabeza {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
}
.cta-calc__precio-etiqueta {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta); /* «Precio por persona» y el chip caben en un renglón a 390 px */
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--texto-2);
	font-weight: var(--peso-etiqueta);
}
.cta-calc__chip {
	padding: 4px 10px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--chip-bg);
	color: var(--chip-texto);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
}
/* Decisión 54: la cifra va en el negro de la marca (#101820, --texto en modo
   claro) y, en modo oscuro, en el texto claro (--texto, #fff); nunca en
   rojo. El chip «Precios 2027» y lo demás no cambian. */
.cta-calc__cifra {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 8px;
	font-size: 36px;
	line-height: 1.1;
	color: var(--texto);
	overflow-wrap: anywhere;
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-calc__moneda {
	font-size: 14px;
	letter-spacing: 0.06em;
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
.cta-calc__precio {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cta-calc__cifra-nota {
	font-size: 13px;
	line-height: 1.45;
	color: var(--texto-3);
}
/* Niños de 3 a 9: su precio aparte (decisión 46) */
.cta-calc__nino {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--texto-2);
}
/* margin-left: auto: si el renglón se parte, la cifra queda a la derecha,
   alineada con la del total (en 320–1440 px el rótulo y la cifra no caben
   juntos). */
.cta-calc__nino-cifra,
.cta-calc__total-cifra {
	margin-left: auto;
}
.cta-calc__nino-cifra {
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--texto);
}
.cta-calc__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 12px;
	padding-top: 12px;
	border-top: 1px solid var(--borde-fuerte);
}
.cta-calc__total-etiqueta {
	font-size: 14px;
	font-weight: 700;
	color: var(--texto);
}
.cta-calc__total-cifra {
	font-size: 18px;
	font-weight: 800;
	white-space: nowrap;
	color: var(--texto);
}
.cta-calc__resumen {
	font-size: 13px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-calc__subtitulo {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--texto-3);
}
.cta-calc__lineas {
	margin: 6px 0 0;
}
.cta-calc__linea {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--borde);
	font-size: 14px;
	line-height: 1.4;
}
.cta-calc__linea dt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	color: var(--texto);
}
.cta-calc__unitario {
	font-size: 12.5px;
	color: var(--texto-3);
}
.cta-calc__linea dd {
	margin: 0;
	font-weight: 700;
	white-space: nowrap;
	color: var(--texto);
}
/* «Ver desglose y anticipo»: plegado (decisión 44) */
.cta-calc__detalles-boton {
	min-height: 44px;
	padding-top: 10px;
	border-top: 1px solid var(--borde);
}
/* «Ver desglose y anticipo» es un botón: en oración (decisión 104). */
.cta-calc__detalles-texto {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}
.cta-calc__detalles {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: -4px;
}
.cta-calc__anticipo {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cta-calc__anticipo-texto {
	font-size: 13px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-calc__avisos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-calc__avisos li {
	position: relative;
	padding-left: 14px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--texto);
}
.cta-calc__avisos li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--rojo);
}
.cta-calc__aviso-fijo {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--texto-3);
}
.cta-calc__privacidad {
	text-align: center;
}
@media (max-width: 767px) {
	.cta-calc__cifra {
		font-size: 36px;
	}
	/* 16 px: en iPhone un campo de menos de 16 px amplía la página al tocarlo. */
	.cta-calc .cta-calc__select,
	.cta-calc__dia-texto {
		font-size: 16px;
	}
}
/* Pantallas de menos de 360 px: «Habitaciones» cabe junto al control. */
@media (max-width: 359px) {
	.cta-contador {
		gap: 8px;
	}
	.cta-contador__control {
		gap: 4px;
	}
	.cta-contador__valor {
		width: 44px;
	}
	.cta-contador__etiqueta {
		font-size: 14px;
		overflow-wrap: anywhere;
		hyphens: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-calc * {
		transition: none !important;
	}
}

/* ---------------------------------------------------------------------
   7. Itinerario
   Decisión 99 (16-oct-2026, hoja 8 de Arturo: «elimina este espacio y si
   fuese posible podemos hacer algo así»): sin la columna «La ruta»; cada
   día es una tarjeta a todo lo ancho. Desde 1024 px: a la izquierda «Día
   N», el antetítulo, el título y los renglones como línea de tiempo; a la
   derecha la foto del día, de todo el alto del día (decisión 103; columna
   de 340 px, 380 desde 1280). En celular y tableta la foto va bajo el
   título, completa. Abajo, la barra «Esta noche» con el
   hotel o, en el último día de un tour de varios días, la barra «Fin del
   viaje» (decisión 107). El pie en mayúsculas del día ya no se pinta
   (decisión 107: «eso va en el incluye»). Todos los días seguidos (decisión 62): 28 px entre días (20 en
   celular). Los tours de un día usan la misma tarjeta (decisión 103: todo
   su recorrido en una sola, ya no una tarjeta por párrafo).
   --------------------------------------------------------------------- */
.cta-tour-itinerario__dias {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}

/* Tarjeta del día (decisiones 62, 96, 99 y 103): la misma en los 22 tours. */
.cta-tdian {
	overflow: hidden;
	border: 1px solid var(--borde-fuerte);
	border-radius: 24px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-tdian__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 32px 30px;
}
.cta-tdian--con-noche .cta-tdian__cuerpo,
.cta-tdian--con-fin .cta-tdian__cuerpo {
	padding-bottom: 20px;
}
.cta-tdian__cabeza {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}
.cta-tdian__antetitulo {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--texto-2);
	font-weight: var(--peso-etiqueta);
}
/* Un enlace a #dia-N (el id va en el título) deja a la vista también la
   etiqueta «Día N» de encima (63 px en celular, 75 px en computadora). */
.cta-tdian__titulo {
	font-size: 24px;
	line-height: 1.2;
	scroll-margin-top: 80px;
}
.cta-tdian__media {
	min-width: 0;
}
.cta-tdian__media > .cta-tfotos {
	margin: 0;
}
.cta-tdian__detalle {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
/* Foto del día a la derecha, de todo el alto del día (decisión 103,
   16-oct-2026: «que cubra todo el día en su lado de la imagen, como una
   imagen vertical pero completa en la tarjeta del día, para que no se vea
   disparejo»). Desde 1024 px, rejilla «cabeza media» / «detalle media»: la
   columna de la foto se estira a todo el alto del texto y la foto va
   encima, absoluta, así que el alto lo da el texto y no la foto;
   object-fit: cover (§18) la recorta al centro y el visor la sigue
   mostrando completa. Con poco texto manda el alto mínimo de la columna
   (400 px; 440 desde 1280), para que la foto no quede como una tira
   apaisada. fotos-dia.php pide el archivo del ancho con que se ve
   (cta_tour_alto_dia()). En tableta (768 a 1023 px) la foto va bajo el
   título, completa, como en celular: con la columna de 236 px de una
   tableta de 768 px la foto de un día largo quedaba como una tira
   vertical (se veía del 15 al 24 % de su ancho). */
@media (min-width: 1024px) {
	.cta-tdian--con-foto .cta-tdian__cuerpo {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 340px;
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"cabeza media"
			"detalle media";
		gap: 18px 40px;
	}
	.cta-tdian--con-foto .cta-tdian__cabeza {
		grid-area: cabeza;
	}
	.cta-tdian--con-foto .cta-tdian__media {
		position: relative;
		grid-area: media;
		align-self: stretch;
		min-height: 400px;
	}
	.cta-tdian--con-foto .cta-tdian__detalle {
		grid-area: detalle;
		align-self: start;
	}
	.cta-tdian__media > .cta-tfotos--una {
		position: absolute;
		inset: 0;
	}
	.cta-tdian__media > .cta-tfotos--una .cta-tfotos__lista,
	.cta-tdian__media > .cta-tfotos--una .cta-tfotos__item {
		width: 100%;
		height: 100%;
	}
	.cta-tdian__media > .cta-tfotos--una .cta-tfotos__enlace {
		height: 100%;
		aspect-ratio: auto;
	}
}
@media (min-width: 1280px) {
	.cta-tdian--con-foto .cta-tdian__cuerpo {
		grid-template-columns: minmax(0, 1fr) 380px;
		column-gap: 48px;
	}
	.cta-tdian--con-foto .cta-tdian__media {
		min-height: 440px;
	}
}

/* Renglones del día como línea de tiempo (decisión 99): una raya vertical a
   la izquierda y un punto rojo en cada renglón; la hora en negritas y las
   listas con su viñeta roja chica, dentro del renglón que las presenta. El
   texto, tal cual del itinerario.
   Decisión 109 (hoja 15, 20-oct-2026: «los textos de cada itinerario deben
   estar alineados, que no parezcan disparejos y el tipo de letra de la
   información asegurate que sea la misma»): todos los renglones de los 22
   tours, también el primero de cada día y los de las listas, con la misma
   letra, tamaño, peso, alto de renglón y color (solo la hora va en
   negritas); hasta el 20-oct-2026 el primer renglón iba a 16 px en 500 y
   se veía más oscuro (en el Cañón del Pegüis, «8:00 A.M. Iniciamos el
   traslado…»). Justificados con guiones («lang» del sitio: es-MX) para que
   el borde derecho no se vea disparejo. Desde la decisión 111 (20-oct-2026,
   «el texto de todas las páginas debe estar justificado») la alineación la
   pone base.css («Texto justificado»), como en todo el sitio: justificados
   y, a menos de 480 px, a la izquierda (en esa columna angosta la hora y
   los nombres propios dejaban huecos de 5 letras). La hora no se estira. */
.cta-tdian__texto {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-left: 28px;
}
.cta-tdian__texto::before {
	content: "";
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 5px;
	width: 2px;
	border-radius: 2px;
	background: var(--borde-fuerte);
}
.cta-tdian__texto > p {
	position: relative;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--texto-2);
}
/* Punto centrado en el primer renglón (alto de renglón 1.65 em) y con un
   anillo del color de la tarjeta que corta la raya. */
.cta-tdian__texto > p::before {
	content: "";
	position: absolute;
	top: calc(0.825em - 6px);
	left: -28px;
	width: 12px;
	height: 12px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
	box-shadow: 0 0 0 4px var(--tarjeta);
}
.cta-tdia__lista {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: -4px 0 0;
	padding: 0;
	list-style: none;
}
.cta-tdia__lista li {
	position: relative;
	padding-left: 18px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--texto-2);
}
.cta-tdian__texto > p,
.cta-tdia__lista li {
	font-weight: 400;
}
/* Viñeta centrada en el primer renglón, como el punto de los renglones. */
.cta-tdia__lista li::before {
	content: "";
	position: absolute;
	top: calc(0.825em - 3px);
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
}
.cta-tdia__hora {
	/* Un bloque en línea: al justificar, el espacio de «8:00 A.M.» no se
	   estira (el renglón se acomoda en los espacios de después). */
	display: inline-block;
	font-weight: 700;
	color: var(--texto);
}
/* «Esta noche · <hotel>» (decisión 99): barra gris al pie del día, con la
   cama roja; sobre el gris, el texto informativo en su gris más oscuro
   (tokens.css, «Gris sobre fondos grises»). En el último día de un tour de
   varios días, en el mismo lugar y con el mismo estilo, «Fin del viaje»
   (decisión 107) con una bandera roja y sin hotel: un solo renglón, con la
   letra del nombre del hotel. */
.cta-tdian__noche,
.cta-tdian__fin {
	--texto-2: var(--texto-2-alt);
	--texto-3: var(--texto-3-alt);
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 32px 28px;
	padding: 12px 18px;
	border-radius: 14px;
	background: var(--fondo-alt);
}
.cta-tdian__noche-icono,
.cta-tdian__fin-icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tdian__noche-textos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cta-tdian__noche-etiqueta {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--texto-2);
	font-weight: var(--peso-etiqueta);
}
.cta-tdian__noche-hotel,
.cta-tdian__fin-texto {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--texto);
}

/* Cierre del viaje */
.cta-tour-cierre {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 22px;
	font-size: 24px;
	line-height: 1.2;
	color: var(--titulo);
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-tour-cierre .cta-corazon {
	flex: none;
}

@media (max-width: 767px) {
	.cta-tour-itinerario__dias {
		gap: 20px;
	}
	.cta-tdian {
		border-radius: 20px;
	}
	.cta-tdian__cuerpo {
		gap: 16px;
		padding: 22px 20px 24px;
	}
	.cta-tdian--con-noche .cta-tdian__cuerpo,
	.cta-tdian--con-fin .cta-tdian__cuerpo {
		padding-bottom: 16px;
	}
	.cta-tdian__titulo {
		font-size: 21px;
	}
	.cta-tdian__texto {
		padding-left: 24px;
	}
	.cta-tdian__texto::before {
		left: 4px;
	}
	.cta-tdian__texto > p::before {
		left: -24px;
		width: 10px;
		height: 10px;
		top: calc(0.8em - 5px);
	}
	/* Alto de renglón 1.6 en celular (§20). */
	.cta-tdia__lista li::before {
		top: calc(0.8em - 3px);
	}
	.cta-tdian__noche,
	.cta-tdian__fin {
		gap: 12px;
		margin: 0 20px 20px;
		padding: 12px 14px;
	}
	.cta-tour-cierre {
		align-items: flex-start;
		font-size: 20px;
	}
}

/* ---------------------------------------------------------------------
   8. Precios
   Decisión 99 (16-oct-2026, hoja 9 de Arturo: «se ve muy confuso con
   tantos números»): en lugar de la tabla de 9 renglones × 2 años, el
   selector de periodo («Tarifas 2026» / «Tarifas 2027», botones con
   aria-pressed: el elegido con borde y marca rojos) y los precios de
   Primera Clase por habitación en una tarjeta de 3 renglones (la cifra a
   la derecha, en el color del texto: decisiones 54 y 95), y debajo los de
   los menores. Sin JavaScript el selector no se ve y los dos periodos van
   uno debajo del otro, cada uno con su título. Los tours de un día
   conservan sus líneas de precio, con el mismo estilo de renglones.
   --------------------------------------------------------------------- */
.cta-tarifas {
	display: flex;
	flex-direction: column;
	gap: 28px;
	max-width: 880px;
}
.cta-tarifas__periodos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.cta-tarifas__periodos[hidden],
.cta-tarifas__panel[hidden] {
	display: none;
}
.cta-tarifas__periodo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 64px;
	margin: 0;
	padding: 14px 16px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: 16px;
	background: var(--tarjeta);
	color: var(--texto);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cta-tarifas__periodo:hover {
	border-color: var(--texto);
}
.cta-tarifas__periodo[aria-pressed="true"] {
	border-color: var(--cta-rojo);
	box-shadow: inset 0 0 0 1px var(--cta-rojo);
}
.cta-tarifas__periodo:focus-visible {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
/* Marca tipo radio: vacía o roja con palomita blanca. */
.cta-tarifas__marca {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	color: transparent;
}
.cta-tarifas__marca .cta-icono {
	stroke-width: 3;
}
.cta-tarifas__periodo[aria-pressed="true"] .cta-tarifas__marca {
	border-color: var(--cta-rojo);
	background: var(--cta-rojo);
	color: #fff;
}
.cta-tarifas__periodo-textos {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.cta-tarifas__periodo-nombre {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--titulo);
}
.cta-tarifas__periodo-vigencia {
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--texto-2);
}
.cta-tarifas__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cta-tarifas__titulo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	font-size: 18px;
	line-height: 1.3;
}
.cta-tarifas__titulo-vigencia {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--texto-2);
}
/* Con el selector (JavaScript y dos periodos o más), el título del periodo
   lo dice el botón: queda solo para lectores de pantalla. */
.cta-tarifas--varios.es-js .cta-tarifas__titulo {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.cta-tarifas__tabla {
	width: 100%;
	border: 1px solid var(--borde-fuerte);
	border-spacing: 0;
	border-collapse: separate;
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	color: var(--texto);
}
.cta-tarifas__caption {
	caption-side: top;
	padding: 0 0 12px;
	text-align: left;
}
.cta-tarifas__clase {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-right: 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--titulo);
}
.cta-tarifas__clase .cta-icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tarifas__unidad {
	font-size: 14px;
	font-weight: 500;
	color: var(--texto-2);
}
.cta-tarifas__tabla th,
.cta-tarifas__tabla td {
	padding: 16px 22px;
	border-bottom: 1px solid var(--borde);
	text-align: left;
	vertical-align: middle;
}
.cta-tarifas__tabla tr:last-child > * {
	border-bottom: 0;
}
.cta-tarifas__hab {
	font-weight: 400;
}
.cta-tarifas__hab-nombre {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--texto);
}
.cta-tarifas__personas {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--texto-2);
}
.cta-tarifas__tabla .cta-tarifas__valor {
	text-align: right;
	white-space: nowrap;
}
.cta-tarifas__cifra {
	font-size: 24px;
	font-weight: var(--peso-titulo);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--texto);
}
.cta-tarifas__moneda {
	margin-left: 2px;
	font-size: 12px;
	font-weight: var(--peso-etiqueta);
	letter-spacing: 0.06em;
	color: var(--texto-2);
}
.cta-tarifas__tabla--menores .cta-tarifas__cifra {
	font-size: 20px;
}
/* Computadora, sin el recuadro «¿Ya tienes fecha para viajar?» (decisión
   107): las tarifas usan el ancho de la sección, como las tarjetas de
   Anticipo, Niños y Notas de abajo (antes se quedaban en 880 px con un
   hueco a la derecha). El selector va arriba a todo lo ancho y, debajo,
   los precios de los adultos y los de los menores lado a lado, así que
   los renglones no se alargan (unos 550 y 370 px a 1024; 720 y 450 a
   1440). Sin tabla de menores, como antes. Un periodo oculto ([hidden])
   no se toca. */
@media (min-width: 1024px) {
	.cta-tarifas:has(.cta-tarifas__tabla--menores) {
		max-width: none;
	}
	.cta-tarifas__panel:not([hidden]):has(> .cta-tarifas__tabla--menores) {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: 20px 28px;
		align-items: start;
	}
	.cta-tarifas__panel:has(> .cta-tarifas__tabla--menores) > .cta-tarifas__titulo {
		grid-column: 1 / -1;
	}
}
@media (max-width: 767px) {
	.cta-tarifas {
		gap: 22px;
	}
	.cta-tarifas__tabla th,
	.cta-tarifas__tabla td {
		padding: 14px 16px;
	}
	.cta-tarifas__cifra {
		font-size: 21px;
	}
	.cta-tarifas__tabla--menores .cta-tarifas__cifra {
		font-size: 19px;
	}
	.cta-tarifas__personas,
	.cta-tarifas__moneda,
	.cta-tarifas__unidad {
		font-size: 14px;
	}
	.cta-tarifas__periodo-vigencia {
		font-size: 14px;
	}
}
/* Celulares angostos: un periodo debajo del otro. */
@media (max-width: 419px) {
	.cta-tarifas__periodos {
		grid-template-columns: minmax(0, 1fr);
	}
	.cta-tarifas__periodo {
		min-height: 56px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta-tarifas__periodo {
		transition: none;
	}
}

/* Precios en texto libre (tours de un día): sus líneas tal cual, en
   renglones como los de los paquetes (decisión 99: el mismo estilo). A todo
   lo ancho de la columna de las secciones (§16), como el selector «Tarifas
   2026 / 2027» de los paquetes y las tarjetas de Anticipo e «Importante» de
   abajo (antes, hasta 880 px: dejaban un hueco a la derecha). */
.cta-tour-libres {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.cta-tarifas--dia {
	max-width: none;
}
.cta-tour-libres__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 17px;
	letter-spacing: var(--espaciado-subtitulo);
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	line-height: 1.25;
}
.cta-tour-libres__titulo .cta-icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tour-libres__rejilla {
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--borde-fuerte);
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-tour-libres__celda {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 16px;
	padding: 16px 22px;
	border-bottom: 1px solid var(--borde);
}
.cta-tour-libres__celda:last-child {
	border-bottom: 0;
}
.cta-tour-libres__celda dt {
	min-width: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--texto);
}
.cta-tour-libres__celda dd {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: flex-end;
	gap: 2px 8px;
	margin: 0;
	text-align: right;
}
.cta-tour-libres__cifra {
	font-size: 24px;
	line-height: 1.1;
	color: var(--texto);
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-tour-libres__resto {
	font-size: 13.5px;
	color: var(--texto-2);
}
@media (max-width: 767px) {
	.cta-tour-libres__celda {
		padding: 14px 16px;
	}
	.cta-tour-libres__cifra {
		font-size: 21px;
	}
}

/* Tarjetas de anticipo, niños y notas. Desde la decisión 111 (hoja 7) van
   en la columna de las secciones (960 px, §16): a 2 columnas (a 3, cada
   tarjeta dejaba unos 240 px de texto). Con las 3 tarjetas, desde 1024 px
   van en 2 columnas de texto (columns) que se emparejan solas: la más
   larga sola de un lado y las otras dos una sobre otra (Anticipo largo en
   los paquetes, «Importante» en los tours de un día), sin el hueco que
   dejaría una rejilla. Se leen en orden: arriba abajo y luego la derecha.
   En tableta y celular, una columna. */
.cta-tour-info {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 36px;
	align-items: start;
}
@media (min-width: 1024px) {
	.cta-tour-info--3 {
		display: block;
		columns: 2;
		column-gap: 24px;
	}
	.cta-tour-info--3 > .cta-tour-info__tarjeta {
		margin-bottom: 24px;
		break-inside: avoid;
	}
}
.cta-tour-info--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 800px;
}
.cta-tour-info__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 32px;
	border: 1px solid var(--borde);
	border-radius: 28px;
	background: var(--tarjeta);
}
.cta-tour-info__titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 20px;
	line-height: 1.25;
}
.cta-tour-info__titulo .cta-icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tour-info__tarjeta .cta-lista--roja li {
	margin-bottom: 14px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--texto-2);
}
.cta-tour-info__tarjeta .cta-lista--roja li:last-child {
	margin-bottom: 0;
}
.cta-enlace-tour {
	font-weight: 700;
	color: var(--texto);
}
@media (max-width: 1023px) {
	.cta-tour-info {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 767px) {
	.cta-tour-info {
		gap: 14px;
		margin-top: 24px;
	}
	.cta-tour-info__tarjeta {
		gap: 0;
		padding: 22px 20px;
		border-color: var(--borde-fuerte);
		border-radius: var(--r-bloque);
	}
	/* Anticipo, Niños y Notas abiertos (decisión 61: sin +/−); el título
	   separado del texto con una raya, como antes con el bloque abierto. */
	.cta-tour-info__titulo {
		padding-bottom: 18px;
		margin-bottom: 18px;
		border-bottom: 1px solid var(--borde);
		font-size: 19px;
	}
}

/* ---------------------------------------------------------------------
   9. Diferencia entre clases
   Las tarjetas de cada clase (con fotos, decisiones 107 y 109) están en
   componentes.css §45, porque también salen en la página El Chepe. Aquí,
   solo las notas que van debajo de las tarjetas en la ficha.
   --------------------------------------------------------------------- */
.cta-tour-clases__nota {
	max-width: 820px;
	margin-top: 28px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
   10. El tren (tours nuevos)
   --------------------------------------------------------------------- */
.cta-tour-tren {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.cta-tour-tren--1 {
	grid-template-columns: minmax(0, 420px);
}
.cta-tour-tren--2 {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.cta-tour-tren__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 34px 32px;
	border: 1px solid var(--borde);
	border-radius: 88px 24px 88px 24px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-tour-tren__nombre {
	font-size: 22px;
	line-height: 1.2;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
}
.cta-tour-tren__datos {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-tour-tren__datos li {
	padding: 14px 0;
	border-top: 1px solid var(--borde);
	font-size: 15px;
	line-height: 1.5;
	color: var(--texto);
}
.cta-tour-tren__foto {
	min-height: 330px;
	margin: 0;
	overflow: hidden;
	border-radius: 24px;
	background: var(--cta-noche);
}
.cta-tour-tren__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 1023px) {
	.cta-tour-tren,
	.cta-tour-tren--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-tour-tren__tarjeta {
		grid-column: 1 / -1;
	}
	.cta-tour-tren__foto {
		min-height: 200px;
	}
}
@media (max-width: 767px) {
	.cta-tour-tren {
		gap: 12px;
	}
	.cta-tour-tren__tarjeta {
		padding: 28px 24px;
		border-radius: 64px 20px 64px 20px;
	}
	.cta-tour-tren__foto {
		min-height: 160px;
		border-radius: 18px;
	}
}

/* ---------------------------------------------------------------------
   11. Antes de viajar y vestimenta (tours nuevos)
   --------------------------------------------------------------------- */
.cta-tour-antes {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}
.cta-tour-antes--1 {
	grid-template-columns: minmax(0, 1fr);
}
.cta-tour-antes__tarjeta {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 36px;
	border: 1px solid var(--borde);
	border-radius: var(--r-tarjeta);
	background: var(--tarjeta);
}
.cta-tour-antes__titulo {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 22px;
	line-height: 1.2;
}
.cta-tour-antes__titulo .cta-icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tour-antes__lista,
.cta-tour-vestir {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-tour-antes__lista li,
.cta-tour-vestir li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.cta-tour-antes__marca,
.cta-tour-vestir__marca {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--r-pildora);
	background: var(--check-fondo);
	color: var(--rojo-texto);
}
.cta-tour-antes__lista p,
.cta-tour-vestir p {
	padding-top: 4px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-tour-antes__lista strong {
	color: var(--texto);
}
.cta-tour-antes__lista a {
	font-weight: 700;
	color: var(--texto);
	overflow-wrap: anywhere;
	text-decoration-color: var(--cta-rojo);
}
.cta-tour-vestir {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-bottom: 32px;
	padding: 26px 28px;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
}
.cta-tour-vestir__marca {
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--borde-fuerte);
	background: transparent;
	color: var(--texto);
}
/* Épocas a 2 columnas desde 768 px (decisión 111: en la columna de las
   secciones, a 4 cada tarjeta dejaba unos 180 px de texto). */
.cta-tour-epocas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.cta-tour-epoca {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 28px 22px 30px;
	border: 1px solid var(--borde);
	border-radius: 24px 88px 24px 24px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-tour-epoca .cta-tarjeta-icono__icono {
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
}
.cta-tour-epoca__nombre {
	font-size: 22px;
	line-height: 1.2;
}
.cta-tour-epoca__meses,
.cta-tour-epoca__etiqueta {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--texto-3);
	font-weight: var(--peso-etiqueta);
}
.cta-tour-epoca__etiqueta {
	margin-top: 6px;
}
.cta-tour-epoca .cta-tarjeta-icono__linea {
	margin: 6px 0;
}
.cta-tour-epoca__texto {
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--texto-2);
}
@media (max-width: 1023px) {
	.cta-tour-antes,
	.cta-tour-vestir {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 767px) {
	.cta-tour-antes__tarjeta {
		padding: 24px 20px;
		border-radius: var(--r-bloque);
	}
	.cta-tour-antes__titulo {
		font-size: 19px;
	}
	.cta-tour-vestir {
		padding: 22px 20px;
		gap: 16px;
	}
	.cta-tour-epocas {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.cta-tour-epoca {
		border-radius: 20px 64px 20px 20px;
	}
}

/* ---------------------------------------------------------------------
   12. ¿Cómo reservar?
   --------------------------------------------------------------------- */
.cta-tour-reservar {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}
/* Solo los pasos (decisión 61: sin el recuadro «Enviar por WhatsApp»). */
@media (min-width: 1024px) {
	.cta-tour-reservar {
		grid-template-columns: minmax(0, 760px);
	}
}
@media (max-width: 767px) {
	.cta-tour-pasos__paso {
		gap: 16px;
	}
	.cta-tour-pasos__paso p {
		font-size: 15px;
	}
}
.cta-tour-reservar__pasos {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta-tour-pasos {
	display: flex;
	flex-direction: column;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
/* Sin nada debajo (los paquetes: desde la decisión 107 ya no va la
   recomendación de anticipación), los pasos no dejan espacio de más. */
.cta-tour-pasos:last-child {
	margin-bottom: 0;
}
.cta-tour-pasos__paso {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding-bottom: 22px;
}
.cta-tour-pasos__paso::before {
	content: "";
	position: absolute;
	top: 48px;
	bottom: 4px;
	left: 21px;
	width: 2px;
	background: var(--borde-fuerte);
}
.cta-tour-pasos__paso:last-child {
	padding-bottom: 0;
}
.cta-tour-pasos__paso:last-child::before {
	display: none;
}
.cta-tour-pasos__num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--titulo);
	border-radius: var(--r-pildora);
	background: var(--fondo);
	font-size: 17px;
	line-height: 1;
	color: var(--titulo);
	font-weight: 800;
}
.cta-tour-pasos__paso p {
	padding-top: 9px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--texto-2);
}
/* Reservas de último momento (decisión 72): segundo renglón del paso de la
   liquidación, más tenue; hereda el tamaño del paso (16 px en el celular). */
.cta-tour-pasos__nota {
	display: block;
	margin-top: 6px;
	color: var(--texto-3);
}
.cta-tour-pasos__paso a,
.cta-tour-reservar__aviso a {
	font-weight: 700;
	color: var(--texto);
}
.cta-tour-reservar__aviso {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 22px;
	border-radius: 18px;
	background: var(--tarjeta-alt);
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-tour-reservar__aviso .cta-icono {
	flex: none;
	margin-top: 1px;
	color: var(--rojo-texto);
}
.cta-tour-reservar__pendiente {
	padding: 18px 22px;
	border: 1.5px dashed var(--borde-fuerte);
	border-radius: 18px;
}

/* ---------------------------------------------------------------------
   14. Hoteles del viaje
   Decisión 99 (16-oct-2026, hoja 10 de Arturo: «actualizar a una mejor
   vista para mostrar los hoteles»): tarjetas a 2 columnas desde 768 px (1
   en celular). Arriba la foto grande del hotel (3:2, recortada); debajo el
   lugar con el pin y las noches a la derecha y el nombre del hotel. Con un
   solo hotel, desde 768 px la tarjeta va a lo ancho: la foto a la izquierda
   y los datos a la derecha.
   Decisión 109 (20-oct-2026, hoja 5 de «Más MODIFICACIONES»): sin «Ver
   fotos»; al pie, las fotos chicas a todo el ancho de la tarjeta (3 a la
   vista, caja 4:3). Decisión 111 (hoja 4 de «Aún más MODIFICACIONES»): la
   foto grande es un carrusel y al pie van todas las fotos, que pasan a la
   grande. El carrusel, la fila de fotos chicas y el enlace de la grande
   (abre el visor; anillo de foco y acercamiento al pasar el ratón) son de
   componentes.css §45 (.cta-fotos-tarjeta, .cta-foto-visor), los mismos de
   las tarjetas de las clases.
   --------------------------------------------------------------------- */
.cta-tour-hoteles {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 768px) {
	.cta-tour-hoteles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
	.cta-tour-hoteles--una {
		grid-template-columns: minmax(0, 1fr);
		max-width: 980px;
	}
}
.cta-tour-hotel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	margin: 0;
	border: 1px solid var(--borde-fuerte);
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-tour-hotel__portada {
	aspect-ratio: 3 / 2;
	background: var(--fondo-hondo);
}
.cta-tour-hotel__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
}
.cta-tour-hotel__arriba {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cta-tour-hotel__lugar {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--texto-2);
}
.cta-tour-hotel__lugar .cta-icono {
	flex: none;
	color: var(--rojo-texto);
}
.cta-tour-hotel__noches {
	flex: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--texto);
}
.cta-tour-hotel__nombre {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--titulo);
}
.cta-tour-hotel__sub {
	font-size: 15px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-tour-hotel__chips {
	margin-top: 2px;
}
@media (min-width: 768px) {
	/* Un solo hotel: foto a la izquierda, datos a la derecha. */
	.cta-tour-hoteles--una .cta-tour-hotel:not(.cta-tour-hotel--sin-foto) {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.cta-tour-hoteles--una .cta-tour-hotel__portada {
		aspect-ratio: auto;
		min-height: 300px;
	}
	.cta-tour-hoteles--una .cta-tour-hotel__info {
		padding: 28px 30px;
	}
}
@media (max-width: 767px) {
	.cta-tour-hotel__info {
		padding: 18px 18px 18px;
	}
	.cta-tour-hotel__nombre {
		font-size: 19px;
	}
	.cta-tour-hotel__sub {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------
   15. Barra de reserva fija abajo, en todos los anchos (decisión 61,
   BOTONES.md §4): después de la portada es la única forma de «Cotizar» y
   de «Reservar por WhatsApp». Celular: mitad y mitad (decisiones 55 y 56).
   Desde 768 px: los dos botones a la derecha, sin precio (decisión 91), y
   desde 1024 px «Reservar por WhatsApp» completo. Desde 768 px, mientras
   se ve alguna parte de los botones de la portada (bajo el borde actual
   del encabezado), tour.js la esconde (.es-oculta): nunca dos «Cotizar» a
   la vez. En celular la portada no lleva botones (decisión 98) y tour.js
   la esconde hasta que el cliente pasó el Resumen. tour.js publica su alto
   en --cta-alto-barra (pie, columnas fijas, foco).
   --------------------------------------------------------------------- */
/* Al avanzar con Tab, el control enfocado no queda detrás de la barra fija
   de abajo (WCAG 2.4.11), también con zoom de 200 %. */
html.js:has(.cta-barra-reserva--tour) {
	scroll-padding-bottom: calc(var(--cta-alto-barra, 76px) + 24px);
}
/* El relleno para la barra va en el pie (no en <body>): así el fondo negro
   del pie sigue detrás de la barra, sin franja clara. Solo con JavaScript:
   sin él la barra no es fija (abajo). */
html.js .cta-es-tour .cta-pie {
	padding-bottom: calc(var(--cta-alto-barra, 76px) + 28px);
}
.cta-barra-reserva--tour {
	display: block;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	transition: transform 0.25s ease, visibility 0s linear 0s;
}
.cta-barra-reserva--tour.es-oculta {
	visibility: hidden;
	transform: translateY(110%);
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
/* Sin JavaScript nadie la esconde mientras se ven los botones de la
   portada: no es fija y queda al final del contenido, antes del pie (BOTONES.md
   §4). «Cotizar» lleva a «Precios». */
html:not(.js) .cta-barra-reserva--tour {
	position: static;
	box-shadow: none;
}
/* Sin precio desde la decisión 91 (14-oct-2026): solo «Cotizar» y
   «Reservar por WhatsApp», a la derecha desde 768 px. Antes, desde 1024 px,
   llevaba el «Desde» con su condición a la izquierda. */
.cta-barra-reserva__interior {
	display: block;
}
.cta-barra-reserva__acciones {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}
.cta-barra-reserva--tour .cta-btn {
	width: 100%;
	min-height: 50px;
	padding-inline: 10px;
}
.cta-barra-reserva__largo {
	display: none;
}
@media (min-width: 768px) {
	.cta-barra-reserva--tour {
		padding: 12px var(--margen) calc(12px + env(safe-area-inset-bottom));
	}
	.cta-barra-reserva__interior {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 32px;
		max-width: var(--contenido);
		margin-inline: auto;
	}
	.cta-barra-reserva__acciones {
		display: flex;
		flex: none;
		gap: 12px;
	}
	.cta-barra-reserva--tour .cta-btn {
		width: auto;
		min-height: 48px;
		padding-inline: 26px;
	}
}
@media (min-width: 1024px) {
	.cta-barra-reserva__largo {
		display: inline;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-barra-reserva--tour,
	.cta-barra-reserva--tour.es-oculta {
		transition: none;
	}
}

/* Textos largos (correos, URL) nunca empujan el ancho de la página */
.cta-tour-pasos__paso p,
.cta-tour-reservar__aviso span,
.cta-tdian__texto p,
.cta-tour-info__tarjeta li {
	min-width: 0;
	overflow-wrap: anywhere;
}

/* =====================================================================
   16. Ficha progresiva (decisión 56, 1-oct-2026)
   La información aparece conforme el cliente avanza: portada con lo
   esencial, resumen corto (la frase del tour y la introducción: §4) y
   secciones plegables. Sin JS todo queda abierto.
   ===================================================================== */

/* Secciones plegables (.cta-tsec; el botón lo pone tour.js) y encabezado de
   las secciones de la ficha (cabeza.php).
   Decisión 86 (14-oct-2026): renglones compactos con la letra del texto y
   sin antetítulo. Abierta, el título se queda en el mismo lugar (no brinca
   al tocarlo) y el contenido va abajo.
   Decisión 99 (16-oct-2026, hoja 7 de Arturo): sin el corazón ni el
   círculo +/−; a la izquierda del título, una flechita roja que apunta
   hacia abajo con la sección cerrada y gira hacia arriba al abrirla. La
   flecha es solo dibujo: el botón (todo el renglón) dice si está abierta
   con aria-expanded.
   Decisión 109 (20-oct-2026, hoja 8 de «Más MODIFICACIONES»): sin el
   renglón de debajo del título («13 lugares», «Precios 2026 y 2027»…) y
   todas con el fondo de la página (ya no una gris y otra blanca),
   separadas por una línea delgada.
   Decisión 111 (20-oct-2026, hoja 7 de «Aún más MODIFICACIONES»; el
   ejemplo de Arturo es el «PLAN DE VIAJE» del sitio anterior): las
   secciones van en una columna centrada en la pantalla, más angosta que
   el contenido (960 px; en celular y tableta, todo el ancho). Cada título
   va en MAYÚSCULAS (text-transform: el texto sigue escrito como siempre y
   así lo leen los lectores de pantalla), en gris (--texto-3: #737373 sobre
   blanco, 4.74:1; #b9bfc8 en oscuro), más chico y menos grueso que antes
   (15 px en 600; 14 px en celular), alineado a la izquierda con su
   flechita roja a la izquierda, y debajo de cada sección (después de su
   contenido, si está abierta) una línea delgada del ancho de la columna.
   Deja atrás los títulos en medio de la decisión 109. Cerrada, cada
   sección es un renglón de 52 px (el botón, de 44 px o más).
   Lo de adentro va en la misma columna: --contenido vale ahí el ancho de
   la columna, así que su .cta-contenedor la mide (más los márgenes) y lo
   que se calcula con --contenido la sigue; las rejillas de adentro (días
   con foto, hoteles a 2 columnas, clases, tarifas, «Visitamos»)
   ocupan el 100 % de su contenedor. Desde 1440 px la columna crece × --u
   con el bloque generado (--cta-tsec-ancho). El resumen de arriba va en
   la misma columna (§4, decisión 112). Desde la decisión 112 todas las
   secciones empiezan cerradas (tour.js; antes, el día a día abierto). */
.cta-tour-sec {
	background-color: var(--fondo);
}
.cta-tsec {
	--cta-tsec-ancho: 960px;
	--contenido: var(--cta-tsec-ancho);
}
/* La línea de debajo de cada sección: después del título (cerrada) o del
   contenido (abierta), del ancho de la columna. */
.cta-tsec > .cta-contenedor::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: var(--e-8);
	background: var(--borde);
}
.cta-tsec__cabeza {
	position: relative;
	margin-bottom: var(--e-4);
	padding-block: 4px;
	text-align: left;
}
.cta-tsec__titulo {
	width: 100%;
	margin: 0;
	padding-block: 12px;
	font-family: var(--fuente-texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.06em;
	text-align: left;
	text-transform: uppercase;
	text-wrap: pretty;
	color: var(--texto-3);
}
/* El botón llena el título, también su relleno: 44 px de alto como mínimo
   (un renglón de 20 px y 12 de relleno arriba y abajo; sin JavaScript el
   título mide lo mismo). La flechita a la izquierda y el texto a su lado;
   un título de dos renglones lleva la flecha junto al primero. Al pasar el
   ratón, el título se oscurece. */
.cta-tsec__boton {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	margin-block: -12px;
	padding: 12px 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-align: left;
	text-transform: inherit;
	text-wrap: inherit;
	cursor: pointer;
}
.cta-tsec__boton:hover {
	color: var(--titulo);
}
/* Todo el renglón abre y cierra; el anillo de foco lo rodea completo, por
   dentro del relleno de la cabecera (la sección de abajo, que se pinta
   después, tapaba la orilla de abajo del anillo). */
.cta-tsec__boton::after {
	content: "";
	position: absolute;
	inset: 4px -12px;
	border-radius: 12px;
}
.cta-tsec__boton:focus-visible {
	outline: none;
}
.cta-tsec__boton:focus-visible::after {
	outline: 2px solid var(--texto);
	outline-offset: 0;
}
/* La flechita (16 px en una caja de 22, roja), centrada en el primer
   renglón. Cerrada apunta hacia abajo (chevron); abierta gira 180° y
   apunta hacia arriba. */
.cta-tsec__icono {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: calc((1.35em - 22px) / 2);
	border-radius: var(--r-pildora);
	color: var(--rojo-texto);
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.cta-tsec__icono[hidden] {
	display: none;
}
.cta-tsec__icono .cta-icono {
	stroke-width: 2.4;
}
.cta-tsec__boton[aria-expanded="true"] .cta-tsec__icono {
	transform: rotate(180deg);
}
.cta-tsec__boton:hover .cta-tsec__icono {
	background: color-mix(in srgb, var(--cta-rojo) 10%, transparent);
}
@media (prefers-reduced-motion: reduce) {
	.cta-tsec__icono {
		transition: none;
	}
}
.cta-tsec__cuerpo[hidden]:not([hidden="until-found"]) {
	display: none;
}
.cta-tsec__intro {
	max-width: 760px;
	margin-bottom: var(--e-6);
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-2);
}
/* El título a la misma distancia de la línea de arriba, abierta o cerrada
   (y sin JavaScript, con todo abierto); cerrada, sin margen abajo y la
   línea justo debajo del título.
   Sin transición: con «reducir movimiento» base.css da 0.01 ms a todas y
   el cambio de relleno al arrancar tour.js llegaba un cuadro tarde (abrir
   /#tabla-precios dejaba la tabla 500 px arriba de la vista). */
.cta-tsec,
.cta-tsec__cabeza {
	transition-property: none;
}
.cta-tsec {
	padding-block: 0;
}
.cta-tsec.es-plegada .cta-tsec__cabeza {
	margin-bottom: 0;
}
.cta-tsec.es-plegada > .cta-contenedor::after {
	margin-top: 0;
}
/* La última sección deja aire antes del pie, abierta o cerrada. */
.cta-tsec:last-of-type {
	padding-bottom: var(--e-9);
}
@media (max-width: 767px) {
	/* Renglón de 19 px: 13 px de relleno para pasar de 44 px. */
	.cta-tsec__titulo {
		padding-block: 13px;
		font-size: 14px;
	}
	.cta-tsec__boton {
		gap: 10px;
		margin-block: -13px;
		padding-block: 13px;
	}
	.cta-tsec > .cta-contenedor::after {
		margin-top: 40px;
	}
	.cta-tsec:last-of-type {
		padding-bottom: 48px;
	}
}

/* «¿Qué incluye?» como sección propia */
.cta-tour-incluye {
	display: flex;
	flex-direction: column;
	gap: 48px;
}
.cta-tour-incluye .cta-tour-bloque--menor {
	margin-top: 0;
}
/* Palomitas verdes (decisión 99, hoja 8 de Arturo: «estas palomitas pueden
   ser verdes»): el círculo con el verde de WhatsApp (#25d366) muy claro y
   la palomita en un verde de la misma familia que se distingue: #0e7c3a
   sobre ese fondo da 4.3:1 en claro (3:1 basta para un ícono). En oscuro,
   la palomita en el verde de WhatsApp (6:1 sobre su círculo). «No incluye»
   sigue con su tache gris. */
.cta-tour-bloque--incluye .cta-lista--check {
	--check-fondo: rgba(37, 211, 102, 0.16);
	--icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e7c3a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
}
.tema-oscuro .cta-tour-bloque--incluye .cta-lista--check {
	--check-fondo: rgba(37, 211, 102, 0.2);
	--icono-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2325d366' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E");
}

/* «Plan de viaje» dentro de su sección: la caja sin título propio */
.cta-tour-plan {
	gap: 0;
}
@media (max-width: 767px) {
	.cta-tour-plan {
		padding: 22px 18px 24px;
	}
}

/* ---------------------------------------------------------------------
   17. Ventana «Cotizar» (<dialog>; decisión 56)
   Celular: hoja que sube desde abajo, de alto completo, que se desplaza
   por dentro. Computadora: ventana centrada. «Reservar por WhatsApp» de la
   calculadora queda abajo, siempre a la vista.
   --------------------------------------------------------------------- */
html.cta-con-dialogo {
	overflow: hidden;
	padding-right: var(--cta-barra-desplazamiento, 0px);
}
/* Lo fijo (encabezado, barra de reserva y botón flotante) se mide contra la
   ventana del navegador, no contra <html>: sin esto, con una barra de
   desplazamiento clásica (Chrome en Windows o Linux) se ensanchaba 15 px al
   abrir la ventana y sus enlaces brincaban detrás del fondo. */
html.cta-con-dialogo .cta-header,
html.cta-con-dialogo .cta-barra-reserva {
	right: var(--cta-barra-desplazamiento, 0px);
}
html.cta-con-dialogo .cta-flotante {
	right: calc(16px + var(--cta-barra-desplazamiento, 0px));
}
.cta-dialogo {
	width: min(560px, calc(100vw - 48px));
	max-width: none;
	max-height: none;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--borde-fuerte);
	border-radius: 28px;
	background: var(--tarjeta);
	box-shadow: 0 24px 64px rgba(16, 24, 32, 0.35);
	color: var(--texto);
}
.cta-dialogo--calc {
	width: min(960px, calc(100vw - 48px));
}
.cta-dialogo::backdrop {
	background: rgba(16, 24, 32, 0.64);
}
.cta-dialogo[open] {
	display: flex;
	animation: cta-dialogo-aparece 0.22s ease-out;
}
@keyframes cta-dialogo-aparece {
	from {
		opacity: 0;
		transform: translateY(16px) scale(0.985);
	}
}
.cta-dialogo__caja {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-height: min(900px, calc(100vh - 48px));
	max-height: min(900px, calc(100dvh - 48px));
}
/* Tableta y computadora: la ventana de la calculadora mide siempre lo mismo
   (la interfaz se desplaza por dentro). Con el alto del contenido, cada
   cambio de alto (precio ↔ «Habitación sencilla», «Precio por niño»,
   «Bebés y habitaciones», «Ver desglose y anticipo») la volvía a centrar y
   el control que se acababa de pulsar brincaba hasta 112 px bajo el ratón
   (revisión «pulir-2», CALCULADORA.md §22). */
@media (min-width: 768px) {
	.cta-dialogo--calc .cta-dialogo__caja {
		height: min(900px, calc(100vh - 48px));
		height: min(900px, calc(100dvh - 48px));
	}
}
.cta-dialogo__cabeza {
	position: relative;
	display: flex;
	flex: none;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px 18px;
	border-bottom: 1px solid var(--borde);
}
.cta-dialogo__titulos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.cta-dialogo__tour {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--texto-2);
}
.cta-dialogo__titulo {
	font-size: 22px;
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.2;
	color: var(--titulo);
}
.cta-dialogo__titulo:focus:not(:focus-visible) {
	outline: none;
}
.cta-dialogo__cerrar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	color: var(--texto);
	cursor: pointer;
}
.cta-dialogo__cerrar:hover {
	border-color: var(--texto);
}
.cta-dialogo__cuerpo {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 28px 28px;
}
.cta-dialogo .cta-cotizar__campos .cta-campo:has(select) {
	grid-column: 1 / -1;
}
/* «Cotizar por WhatsApp» de un tour de un día con días de salida (decisión
   69; hoy, Tour Menonita): la regla bajo «Fecha de inicio» y, si se elige un
   día en que no sale, el aviso (región viva, siempre en la página). */
.cta-cotizar .cta-campo__ayuda {
	font-size: 14px;
	line-height: 1.45;
	color: var(--texto-3);
}
.cta-cotizar .cta-campo__error {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--rojo-texto);
}
/* Vacío no suma el espacio entre renglones del campo. */
.cta-cotizar .cta-campo__error:empty {
	margin-top: -8px;
}
/* «Todo queda sujeto a disponibilidad.» (decisiones 70 y 110): desde la
   decisión 110 va debajo del precio, pegada a él (antes, bajo la fecha). La
   nota de anticipación se quitó (decisión 108). */
.cta-cotizar__disponibilidad {
	margin-top: -6px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--texto-3);
}
/* Quiénes viajan (decisión 110): adultos, menores y bebés en un renglón en
   todos los anchos (así el precio queda a la vista al cambiarlos), con la
   edad debajo del campo. El precio usa el resultado de la calculadora
   (.cta-calc__resultado y lo de dentro, §6b). */
.cta-cotizar__viajeros {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
	gap: 12px;
}
/* «Reservar por correo» encima de «Reservar por WhatsApp» (decisión 109,
   hoja 16), como en el pie de la calculadora. */
.cta-cotizar__botones {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Calendario de «Fecha de inicio» (decisión 109, hoja 17; cotizar-dia.js):
   un mes de lunes a domingo; solo se eligen los días en que sale el tour,
   desde mañana. Los demás, apagados y sin cursor de mano; el elegido, con
   relleno del color del texto, como el día de salida de la calculadora
   (decisión 69). Casillas de 44 px
   o más; en 320 px el calendario usa el relleno de la ventana para que
   quepan. La fecha del navegador queda oculta (guarda el valor). */
.cta-cotizar__fecha--calendario {
	gap: 10px;
}
.cta-calendario {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	padding: 12px;
	border: 1.5px solid var(--input-borde);
	border-radius: var(--r-campo);
	background: var(--input-bg);
}
.cta-calendario__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.cta-calendario__mes {
	flex: 1 1 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--titulo);
}
.cta-calendario__mover {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	color: var(--texto);
	cursor: pointer;
}
.cta-calendario__mover:hover {
	border-color: var(--texto);
}
.cta-calendario__mover[aria-disabled="true"] {
	border-color: var(--borde);
	color: var(--texto-3);
	cursor: default;
	opacity: 0.55;
}
.cta-calendario__tabla {
	width: 100%;
	border-collapse: separate;
	border-spacing: 2px;
	table-layout: fixed;
}
.cta-calendario__tabla th {
	padding: 4px 0;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-align: center;
	color: var(--texto-2);
}
.cta-calendario__tabla td {
	height: 44px;
	padding: 0;
	text-align: center;
}
.cta-calendario__dia {
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	line-height: 44px;
	color: var(--texto);
	cursor: pointer;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}
.cta-calendario__dia:hover {
	background: var(--tarjeta-alt);
}
.cta-calendario__dia:focus-visible {
	outline: 2px solid var(--texto);
	outline-offset: 1px;
}
/* Días que no se pueden elegir (sin salida, antes de mañana o fuera del
   calendario): tachados de forma suave y sin fondo al pasar el ratón. */
.cta-calendario__dia[aria-disabled="true"] {
	color: var(--texto-3);
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-color: var(--borde-fuerte);
	cursor: not-allowed;
}
.cta-calendario__dia[aria-disabled="true"]:hover {
	background: transparent;
}
.cta-calendario__dia[aria-selected="true"] {
	background: var(--texto);
	color: var(--fondo);
	font-weight: 700;
}
.cta-calendario__dia[aria-selected="true"]:hover {
	background: var(--texto);
}
.cta-calendario__elegida {
	padding: 4px 4px 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--texto);
}
@media (forced-colors: active) {
	.cta-calendario__dia[aria-selected="true"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}
	.cta-calendario__dia[aria-disabled="true"] {
		color: GrayText;
	}
}
@media (max-width: 359px) {
	/* 320 px: los días usan casi todo el relleno de la ventana (16 px a
	   cada lado) para medir 44 px. Sin el recuadro, para que no se vea
	   descuadrado frente a los demás campos; el mes, sus flechas y «Fecha
	   elegida» quedan alineados con ellos. */
	.cta-dialogo .cta-calendario {
		width: calc(100% + 24px);
		margin: 0 -12px;
		padding: 0 0 4px;
		border-color: transparent;
		background: transparent;
	}
	.cta-dialogo .cta-calendario__cabeza,
	.cta-dialogo .cta-calendario__elegida {
		padding-inline: 12px;
	}
	.cta-calendario__tabla {
		border-spacing: 0;
	}
}

/* La calculadora dentro de la ventana: la interfaz se desplaza y el botón
   de WhatsApp queda abajo. */
.cta-dialogo .cta-calc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0;
	min-height: 0;
}
.cta-dialogo .cta-calc__interfaz {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 22px 28px 24px;
}
/* Colchón temporal al final de la interfaz (--cta-calc-colchon, lo pone
   sinSaltos() de calculadora-ui.js): si un cambio acorta la interfaz
   desplazada, el navegador ya no recorta el desplazamiento y lo que está
   bajo el dedo no baja (CALCULADORA.md §22). Es contenido, no relleno de la
   caja: un relleno grande agrandaba la propia interfaz. El margen negativo
   anula el espacio (gap) de 18 px de la columna: sin colchón no suma nada;
   flex: none, porque en la columna flexible un elemento vacío se encoge a 0.
   En la rejilla de dos columnas (sin espacio entre renglones) ocupa un
   renglón entero. */
.cta-dialogo .cta-calc__interfaz::after {
	content: "";
	display: block;
	flex: none;
	grid-column: 1 / -1;
	height: var(--cta-calc-colchon, 0px);
	margin-top: -18px;
}
.cta-dialogo .cta-calc__pie {
	flex: none;
	padding: 14px 28px calc(14px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--borde);
	background: var(--tarjeta);
}
.cta-dialogo .cta-calc__intro {
	font-size: 15px;
}
/* Precio por persona en el pie (hoja de una columna; CALCULADORA.md §21):
   siempre a la vista junto a «Reservar por WhatsApp», sin desplazar la hoja.
   El renglón tiene alto fijo: cambiar de «Elige el mes del viaje» a la cifra
   no mueve la interfaz ni tapa el control que se acaba de tocar. */
.cta-dialogo .cta-calc__pie-precio {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 28px;
	margin: 0 0 10px;
	overflow: hidden;
	white-space: nowrap;
	line-height: 1;
	color: var(--texto);
}
.cta-dialogo .cta-calc__pie-precio[hidden] {
	display: none;
}
.cta-calc__pie-etiqueta {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	text-transform: uppercase;
	color: var(--texto-2);
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
/* Decisión 54: en el negro de la marca (modo claro) o el texto claro (oscuro). */
.cta-calc__pie-cifra {
	font-size: 22px;
	color: var(--texto);
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-calc__pie-moneda {
	font-size: 11px;
	letter-spacing: 0.06em;
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
@media (max-width: 359px) {
	.cta-calc__pie-etiqueta {
		font-size: 11px;
		letter-spacing: 0.08em;
	}
	.cta-calc__pie-cifra {
		font-size: 20px;
	}
}
.cta-calc__pie-estado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 15px;
	font-weight: 600;
	color: var(--texto-2);
}
.cta-calc__pie-estado > span {
	overflow: hidden;
	text-overflow: ellipsis;
}
@media (min-width: 900px) {
	/* Computadora: el resultado ya está a la vista en su columna. */
	.cta-dialogo--calc .cta-calc__pie-precio {
		display: none;
	}
}
@media (min-width: 900px) {
	/* Computadora: controles a la izquierda, resultado a la derecha. */
	.cta-dialogo--calc .cta-calc__interfaz {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
		gap: 0 40px;
		padding-top: 24px;
	}
	.cta-dialogo--calc .cta-calc__salida {
		position: sticky;
		top: 0;
	}
	.cta-dialogo--calc .cta-calc__interfaz::after {
		margin-top: 0;
	}
	.cta-dialogo--calc .cta-calc__pie {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 40px;
	}
	.cta-dialogo--calc .cta-calc__boton {
		grid-column: 2;
	}
}
@media (max-width: 767px) {
	.cta-dialogo,
	.cta-dialogo--calc {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		border-width: 1px 0 0;
		border-radius: 24px 24px 0 0;
	}
	.cta-dialogo[open] {
		animation-name: cta-dialogo-sube;
		animation-duration: 0.28s;
	}
	.cta-dialogo__caja {
		max-height: calc(100vh - 12px);
		max-height: calc(100dvh - 12px);
	}
	/* Asa de la hoja */
	.cta-dialogo__cabeza {
		padding: 22px 20px 14px;
	}
	.cta-dialogo__cabeza::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: var(--r-pildora);
		background: var(--borde-fuerte);
	}
	.cta-dialogo__titulo {
		font-size: 20px;
	}
	.cta-dialogo__cuerpo,
	.cta-dialogo .cta-calc__interfaz {
		padding: 18px 20px 24px;
	}
	.cta-dialogo .cta-calc__pie {
		padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
	}
	.cta-dialogo .cta-cotizar__campos {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Celulares chicos (320 × 568): la cabeza de la hoja ocupaba ~140 px (el
   nombre del tour en 3 renglones) y «Mes del viaje» salía cortado. El
   nombre va en un renglón (el título ya dice qué es) y el pie fijo es un
   poco más bajo. */
@media (max-width: 359px) {
	.cta-dialogo__cabeza {
		padding: 20px 16px 12px;
	}
	.cta-dialogo__tour {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.cta-dialogo__titulo {
		font-size: 19px;
	}
	.cta-dialogo__cuerpo,
	.cta-dialogo .cta-calc__interfaz {
		padding: 16px 16px 20px;
	}
	.cta-dialogo .cta-calc__pie {
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	}
	.cta-dialogo .cta-calc__pie .cta-btn {
		min-height: 48px;
	}
}
@keyframes cta-dialogo-sube {
	from {
		transform: translateY(100%);
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta-dialogo[open] {
		animation: none;
	}
}

/* ---------------------------------------------------------------------
   18. Fotos por día del itinerario (decisiones 58 y 76): cada foto se ve
   completa, con su proporción (--cta-prop = ancho / alto, desde
   fotos-dia.php): la caja tiene la misma proporción que la foto, así que
   las verticales no se recortan a horizontal. Una foto: a lo ancho del
   día, hasta 400 px de alto en celular y 440 px desde 768 px (una vertical
   queda angosta y alta, a la izquierda). Dos o más: una tira del mismo
   alto (240 px en celular, 260 px desde 768 px, 280 px desde 1280 px) que
   se desliza con el dedo (scroll-snap). En celular el alto baja para que
   dos verticales 3:4 quepan lado a lado y asome la siguiente (dos ocupan
   el 90 % del ancho: 100cqw = ancho de la tira; sin unidades de
   contenedor se queda en 240 px). Una foto muy apaisada no pasa del ancho
   de la tira: se achica y se ve completa.
   Excepción (decisión 103): en el «Día a día», desde 1024 px, la foto del
   día cubre todo el alto de su columna (§7) y se recorta al centro con
   cover; lo de arriba vale ahí solo en celular y tableta.
   --------------------------------------------------------------------- */
.cta-tfotos {
	--cta-tfotos-alto: 240px;
	--cta-tfotos-alto-una: 400px;
	--cta-tfotos-espacio: 10px;
	margin: 2px 0 6px;
}
.cta-tfotos__lista {
	display: flex;
	align-items: center;
	gap: var(--cta-tfotos-espacio);
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-tfotos__item {
	flex: 0 0 auto;
	max-width: 100%;
	margin: 0;
}
/* position: relative: el texto para lectores de pantalla (absoluto) queda
   dentro de la tira que se desliza y no ensancha la página. */
.cta-tfotos__enlace {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: var(--cta-prop, 1.5);
	border-radius: 18px;
	background: var(--fondo-hondo);
}
/* Misma proporción que la caja: cover no recorta nada. */
.cta-tfotos__enlace img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.cta-tfotos__enlace:hover img {
	transform: scale(1.03);
}
.cta-tfotos__enlace:focus-visible {
	outline-offset: -4px;
}
.cta-tfotos--una .cta-tfotos__item {
	width: min(100%, calc(var(--cta-tfotos-alto-una) * var(--cta-prop, 1.5)));
}
/* Dos o más: tira que se desliza (scroll-snap) */
.cta-tfotos--tira {
	container-type: inline-size;
	width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	padding-bottom: 8px;
	border-radius: 18px;
}
.cta-tfotos--tira:focus-visible {
	outline: 2px solid var(--texto);
	outline-offset: 4px;
}
.cta-tfotos--tira .cta-tfotos__item {
	width: calc(var(--cta-tfotos-alto) * var(--cta-prop, 1.5));
	scroll-snap-align: start;
}
.cta-tdian__cuerpo > .cta-tfotos {
	align-self: stretch;
}
@supports (width: 1cqw) {
	@media (max-width: 767px) {
		.cta-tfotos--tira {
			--cta-tfotos-alto: min(240px, calc((100cqw - var(--cta-tfotos-espacio)) * 0.6));
		}
	}
}
@media (min-width: 768px) {
	.cta-tfotos {
		--cta-tfotos-alto: 260px;
		--cta-tfotos-alto-una: 440px;
		--cta-tfotos-espacio: 12px;
	}
}
@media (min-width: 1280px) {
	.cta-tfotos {
		--cta-tfotos-alto: 280px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta-tfotos__enlace img {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   19. Video del recorrido (decisiones 57, 66 y 99): dentro del Resumen,
   junto al texto (§4): a la derecha desde 1024 px y debajo del texto,
   centrado, en celular y tableta. Sin título ni «Ver en YouTube» (decisión
   99); portada propia, YouTube al tocar.
   --------------------------------------------------------------------- */
.cta-tvideos__lista {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-tvideo {
	width: 100%;
	margin: 0;
}
.cta-tvideo--vertical {
	/* Caja 9:16 de 300 px de ancho como máximo, nunca más alta que el 70 %
	   de la pantalla y, además, entera entre las barras fijas: arriba el
	   encabezado y las anclas (142 px en celular, 150 desde 768) más 16 de
	   aire; abajo la barra de reserva (tour.js publica su alto en
	   --cta-alto-barra). Así los controles del reproductor no quedan bajo la
	   barra en celulares bajos (390 × 664 → 245 × 435). Por esa regla nunca
	   baja de 200 px de ancho: con el celular acostado manda el 70 %. */
	--cta-video-arriba: 158px;
	--cta-video-ancho: min(300px, 70vh * 9 / 16, max(200px, (100vh - var(--cta-video-arriba) - var(--cta-alto-barra, 0px)) * 9 / 16));
	width: var(--cta-video-ancho);
	max-width: 100%;
}
@supports (height: 100svh) {
	.cta-tvideo--vertical {
		--cta-video-ancho: min(300px, 70svh * 9 / 16, max(200px, (100svh - var(--cta-video-arriba) - var(--cta-alto-barra, 0px)) * 9 / 16));
	}
}
.cta-tvideo--horizontal {
	max-width: 640px;
}
.cta-tvideo__marco {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: var(--cta-noche);
}
.cta-tvideo--vertical .cta-tvideo__marco {
	aspect-ratio: 9 / 16;
}
.cta-tvideo--horizontal .cta-tvideo__marco {
	aspect-ratio: 16 / 9;
}
.cta-tvideo__portada {
	position: absolute;
	inset: 0;
	display: block;
	color: var(--cta-blanco);
}
.cta-tvideo__portada:focus-visible {
	outline: 3px solid var(--cta-blanco);
	outline-offset: -7px;
	box-shadow: inset 0 0 0 4px var(--cta-noche);
	border-radius: 24px;
}
.cta-tvideo__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-tvideo__velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16, 24, 32, 0.12) 45%, rgba(16, 24, 32, 0.7) 100%);
}
.cta-tvideo__reproducir {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 78px;
	height: 78px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
	box-shadow: 0 10px 28px rgba(16, 24, 32, 0.45);
	color: var(--cta-blanco);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}
.cta-tvideo__reproducir svg {
	margin-left: 4px;
}
.cta-tvideo__reproducir path {
	fill: currentColor;
}
.cta-tvideo__portada:hover .cta-tvideo__reproducir {
	transform: translate(-50%, -50%) scale(1.07);
}
.cta-tvideo__duracion {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 5px 11px;
	border-radius: var(--r-pildora);
	background: rgba(16, 24, 32, 0.82);
	color: var(--cta-blanco);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}
.cta-tvideo__reproductor {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
@media (min-width: 768px) {
	.cta-tvideo--vertical {
		--cta-video-arriba: 166px;
	}
}
/* Computadora: en la columna derecha del Resumen, pegado a la derecha. */
@media (min-width: 1024px) {
	.cta-tvideos__lista {
		align-items: flex-end;
	}
	.cta-tvideo--horizontal {
		max-width: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta-tvideo__reproducir {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   20. Celular más legible y menos saturado (decisión 55)
   Texto de lectura a 16 px o más, más aire entre renglones y bloques.
   --------------------------------------------------------------------- */
@media (max-width: 767px) {
	.cta-tour-lista-2 {
		gap: 16px;
	}
	.cta-tour-lista-2 li,
	.cta-tour-visitamos__lista li,
	.cta-tour-visitamos__grupo,
	.cta-tdian__texto p,
	.cta-tdia__lista li,
	.cta-tour-plan__cuerpo > p,
	.cta-tour-info__tarjeta li,
	.cta-tour-info__tarjeta .cta-lista--roja li,
	.cta-tour-pasos__paso p,
	.cta-tour-reservar__aviso span,
	.cta-tour-antes__lista p,
	.cta-tour-vestir p,
	.cta-tour-epoca__texto,
	.cta-tour-clases__nota,
	.cta-tour-hotel__sub {
		font-size: 16px;
		line-height: 1.6;
	}
	.cta-tdian__texto {
		gap: 16px;
	}
	.cta-tdia__lista {
		gap: 10px;
	}
	.cta-tour-resumen {
		gap: 28px;
	}
	.cta-tour-intro {
		gap: 20px;
	}
	/* Calculadora y «Desde»: lo que es dinero se lee a 16 px; las etiquetas
	   y ayudas, a 14 px como mínimo. */
	.cta-calc__anticipo-texto {
		font-size: 16px;
		line-height: 1.55;
	}
	.cta-calc__linea {
		font-size: 15px;
	}
	/* Notas de la ventana («La calculadora no envía ni guarda nada…», «No
	   guardamos tus datos…») e indicación de arriba. */
	.cta-dialogo .cta-nota {
		font-size: 15px;
		line-height: 1.5;
	}
	.cta-dialogo .cta-calc__intro {
		font-size: 16px;
		line-height: 1.55;
	}
	.cta-contador__ayuda,
	.cta-calc__aviso-fijo,
	.cta-calc__resumen,
	.cta-calc__unitario,
	.cta-calc__detalles-texto {
		font-size: 14px;
		line-height: 1.45;
	}
	/* Etiquetas de la ventana «Cotizar» que explican el precio («¿Quiénes
	   viajan?», «Mes del viaje», «Clase del tren», «Promedio de 5 adultos»,
	   «Cupo limitado», «1 doble»): 14 px. */
	.cta-calc__etiqueta,
	.cta-calc__leyenda,
	.cta-calc__cifra-nota,
	.cta-calc__nota-campo,
	.cta-calc__reparto {
		font-size: 14px;
	}
	.cta-calc__subtitulo {
		font-size: 13px;
	}
	/* Datos chicos de la ficha (decisión 55): noches de hotel («2 Noches»),
	   los datos del hotel («días 1 y 2») y «por persona» de los tours de un
	   día, a 14 px («MXN» de los precios, en §8). */
	.cta-tour-hotel__noches,
	.cta-tour-sec .cta-chip--dato,
	.cta-tour-libres__resto {
		font-size: 14px;
	}
}

/* =====================================================================
   Tamaños mínimos en celular (revisión del 1-oct-2026, «pulir»; decisión
   55, COMPONENTES.md §3.21): texto de lectura a 16 px, etiquetas a 14 px y
   rótulos gráficos a 12 px como mínimo.
   ===================================================================== */
/* Iniciales de los días de la semana del calendario de salidas («L M M J V
   S D»): 12 px en todos los anchos (estaban en 11). */
.cta-tour-plan__dia {
	font-size: 12px;
}
@media (max-width: 767px) {
	/* Dinero y datos que se leen: desglose de la calculadora, datos de «El
	   tren» y las notas de la ventana («Precios por persona en MXN…», «La
	   calculadora no envía…»). */
	.cta-calc__linea,
	.cta-calc__aviso-fijo,
	.cta-dialogo .cta-nota,
	.cta-tour-tren__datos li {
		font-size: 16px;
	}
	/* Frases completas de la ventana «Cotizar» (revisión «pulir-2»): lo que
	   falta para tener precio («El precio depende de la fecha del viaje…»)
	   y los avisos del resultado («Con 1 solo adulto, los niños de 3 a 9
	   años pagan como adulto…»). Estaban a 14 px. */
	.cta-calc__estado-texto,
	.cta-calc__avisos li {
		font-size: 16px;
		line-height: 1.5;
	}
}

/* ---------------------------------------------------------------------
   21. Fotos de los lugares (decisión 114, 21-oct-2026; inc/fotos-lugares.php;
   siempre encendida desde la corrección del dueño: «no hagas 2, déjala
   encendida con fotos»).
   (Hasta la decisión 113 aquí iba la galería del tour, un solo carrusel
   desde la decisión 111; se quitó porque a Arturo no le gustó.) Lo que no
   se repite: una galería larga (decisión 109), el relleno borroso (111) y
   una foto por lugar en «Visitamos» (113).
   --------------------------------------------------------------------- */

/* «Fotos del recorrido» (fotos-recorrido.php): hasta abajo, después de
   «¿Cómo reservar?» (corrección del dueño: «ponlas hasta abajo, abajo de
   ¿Cómo reservar?»), en la misma columna centrada que las secciones
   (960 px; × --u desde 1440 px con el bloque generado), con su título como
   el de las secciones (§16, sin
   flechita) y una línea delgada debajo. ALTURA FIJA: no depende de cuántas
   fotos tenga el tour. Desde 600 px, una grande a la izquierda (dos
   renglones, la mitad de la columna) y cuatro chicas (la cuarta parte), las
   dos casi 4:3: la caja mide 8:3 (360 px de alto en la columna de 960). En
   celular, la grande a todo el ancho (3:2) y una fila de tres chicas (4:3);
   la cuarta chica no sale y la tercera lleva «+N fotos». Cada foto llena su
   recuadro con cover (sin relleno borroso). */
.cta-tour-mosaico {
	--cta-tsec-ancho: 960px;
	--contenido: var(--cta-tsec-ancho);
	background-color: var(--fondo);
}
.cta-tour-mosaico > .cta-contenedor::after {
	content: "";
	display: block;
	height: 1px;
	margin-top: var(--e-8);
	background: var(--borde);
}
/* Es lo último de la página: deja antes del pie el aire que dejaba la
   última sección (§16, .cta-tsec:last-of-type, que ya no es la última). */
.cta-tour-mosaico:last-of-type {
	padding-bottom: var(--e-9);
}
.cta-tmosaico {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: 6px;
	aspect-ratio: 8 / 3;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Con 3 o 4 fotos en el tour: la grande (dos tercios) y dos chicas. */
.cta-tmosaico--3 {
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.cta-tmosaico__item {
	position: relative;
	min-width: 0;
	min-height: 0;
	margin: 0;
}
.cta-tmosaico__item--1 {
	grid-row: 1 / span 2;
}
.cta-tmosaico__foto {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: var(--fondo-hondo);
	color: #fff;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
}
.cta-tmosaico__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.cta-tmosaico__foto:hover .cta-tmosaico__img {
	transform: scale(1.03);
}
.cta-tmosaico__foto:focus-visible {
	outline: 2px solid var(--texto);
	outline-offset: 2px;
}
/* El nombre del lugar, chico, abajo a la izquierda, en blanco sobre un velo
   que oscurece la orilla de abajo (detrás de las letras queda al 62 % o más
   de #0b1117: 5.6:1 aun sobre una foto blanca). Hasta 2 renglones, en todos
   los anchos: en un solo renglón, de 600 a 1023 px se cortaban con «…»
   «Ciudad de Chihuahua» o «Aguas Termales de Recowata». */
.cta-tmosaico__pie {
	position: absolute;
	inset: auto 0 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	padding: 22px 12px 9px;
	overflow: hidden;
	background: linear-gradient(to top, rgba(11, 17, 23, 0.78) 0%, rgba(11, 17, 23, 0.62) 55%, rgba(11, 17, 23, 0) 100%);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: left;
	text-overflow: ellipsis;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
	white-space: normal;
	color: #fff;
	pointer-events: none;
}
.cta-tmosaico__item--1 .cta-tmosaico__pie {
	padding: 26px 16px 12px;
	font-size: 14px;
}
/* «+N fotos» sobre la última: velo de #0b1117 al 62 % (5.6:1 con letra
   blanca aun sobre una foto blanca). */
.cta-tmosaico__mas {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px;
	background: rgba(11, 17, 23, 0.62);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: #fff;
	transition: background-color 0.2s ease;
}
.cta-tmosaico__foto:hover .cta-tmosaico__mas {
	background: rgba(11, 17, 23, 0.7);
}
.cta-tmosaico__mas-icono {
	flex: none;
}
/* El número de fotos que no se ven: en celular se ven 3, desde 600 px 4. */
.cta-tmosaico__n--celular {
	display: none;
}
@media (prefers-reduced-motion: reduce) {
	.cta-tmosaico__img,
	.cta-tmosaico__mas {
		transition: none;
	}
	.cta-tmosaico__foto:hover .cta-tmosaico__img {
		transform: none;
	}
}
@media (max-width: 767px) {
	.cta-tour-mosaico > .cta-contenedor::after {
		margin-top: 40px;
	}
	.cta-tour-mosaico:last-of-type {
		padding-bottom: 48px;
	}
}
@media (max-width: 599px) {
	.cta-tmosaico,
	.cta-tmosaico--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		grid-template-rows: auto;
		gap: 5px;
		aspect-ratio: auto;
	}
	.cta-tmosaico--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-tmosaico__item--1 {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 3 / 2;
	}
	.cta-tmosaico__item:not(.cta-tmosaico__item--1) {
		aspect-ratio: 4 / 3;
	}
	/* Con 5 fotos, la cuarta chica no sale: la fila es de tres. */
	.cta-tmosaico--5 .cta-tmosaico__item--4 {
		display: none;
	}
	.cta-tmosaico__foto {
		border-radius: 12px;
	}
	.cta-tmosaico__pie {
		padding: 16px 8px 6px;
		font-size: 12px;
	}
	.cta-tmosaico__item--1 .cta-tmosaico__pie {
		padding: 24px 12px 10px;
		font-size: 13px;
	}
	.cta-tmosaico__mas {
		flex-direction: column;
		gap: 4px;
		font-size: 15px;
	}
	.cta-tmosaico__n--celular {
		display: inline;
	}
	.cta-tmosaico__n--ancho {
		display: none;
	}
}

/* «Visitamos» con fotos (inc/fotos-lugares.php, fotos-lugares.js): el
   nombre de un lugar con fotos es un enlace con papel de botón y una
   camarita, que abre sus fotos en el visor. Es un enlace (en línea, sigue el
   renglón como el texto) y no un <button> (una caja: lo de antes se quedaba
   solo en su renglón). Va en el color de los títulos, con un subrayado
   tenue que se marca al pasar el ratón. Desde la decisión 116 (22-oct-2026:
   los puntos «y las camaritas» en azul, no en rojo) el subrayado, el texto
   al pasar el ratón, el anillo de foco y la camarita van en el azul del
   acento (tokens.css, decisión 107): la camarita y el anillo en --acento
   (#4a6788, 5.85:1 sobre blanco; oscuro #9db8d6, 8.7:1), el subrayado en
   --acento al 55 % y, al pasar el ratón, el nombre en --acento-texto
   (#3a5677, 7.6:1; oscuro #c3d5e9, 11.9:1) con el subrayado entero. Los
   lugares sin fotos siguen como texto, en gris y sin camarita. Sin
   JavaScript, todo es texto (el span de la marca no lleva estilo). */
a.cta-tvis-lugar {
	border-radius: 4px;
	color: var(--titulo);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--acento) 55%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
a.cta-tvis-lugar:hover {
	color: var(--acento-texto);
	text-decoration-color: var(--acento);
}
a.cta-tvis-lugar:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}
.cta-tvis-lugar__fin {
	white-space: nowrap;
}
.cta-tvis-lugar__icono {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-left: 6px;
	vertical-align: -2px;
	color: var(--acento);
}

/* Visor con los botones de los lugares (tema.js, window.ctaVisor con
   grupos; solo en los tours): arriba, «Todos» y una píldora por zona (la
   elegida, blanca); en computadora en medio de la fila (si no caben en un
   renglón, en dos), con «Cerrar» a la derecha, y el nombre del lugar y el
   contador «3 / 76» abajo; en celular la fila de píldoras se desliza de
   lado, debajo del contador y de «Cerrar», y las flechas van abajo con el
   nombre del lugar. */
.cta-lightbox--filtros[open] {
	grid-template-rows: auto minmax(0, 1fr) 76px;
}
.cta-lightbox__filtros {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	justify-self: stretch;
	max-width: 100%;
	padding: 14px 4px;
}
.cta-lightbox__filtros[hidden] {
	display: none;
}
.cta-lightbox__filtro {
	flex: none;
	min-height: 40px;
	padding: 8px 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.45);
	border-radius: var(--r-pildora);
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.cta-lightbox__filtro:hover {
	background: rgba(255, 255, 255, 0.14);
}
.cta-lightbox__filtro[aria-pressed="true"] {
	border-color: #fff;
	background: #fff;
	color: #101820;
}
.cta-lightbox__filtro:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
.cta-lightbox--filtros .cta-lightbox__lugar {
	grid-column: 2;
	grid-row: 3;
	align-self: start;
	margin-top: 12px;
}
.cta-lightbox--filtros .cta-lightbox__contador {
	grid-column: 2;
	grid-row: 3;
	align-self: end;
	margin: 0 0 12px;
}
@media (prefers-reduced-motion: reduce) {
	.cta-lightbox__filtro {
		transition: none;
	}
}
@media (max-width: 767px) {
	.cta-lightbox--filtros[open] {
		grid-template-rows: 64px auto minmax(0, 1fr) 72px;
	}
	/* En celular, una sola fila que se desliza de lado: en medio si cabe;
	   si no, desde la orilla (sin cortar la primera). */
	.cta-lightbox--filtros .cta-lightbox__filtros {
		grid-column: 1 / -1;
		grid-row: 2;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		padding: 2px 16px 12px;
		scrollbar-width: none;
		overscroll-behavior-x: contain;
	}
	.cta-lightbox--filtros .cta-lightbox__filtros::-webkit-scrollbar {
		display: none;
	}
	.cta-lightbox__filtro:first-child {
		margin-left: auto;
	}
	.cta-lightbox__filtro:last-child {
		margin-right: auto;
	}
	.cta-lightbox--filtros .cta-lightbox__figura {
		grid-row: 3;
	}
	.cta-lightbox--filtros .cta-lightbox__anterior,
	.cta-lightbox--filtros .cta-lightbox__siguiente {
		grid-row: 4;
	}
	.cta-lightbox--filtros .cta-lightbox__lugar {
		grid-column: 1 / -1;
		grid-row: 4;
		align-self: center;
		margin: 0;
	}
	.cta-lightbox--filtros .cta-lightbox__contador {
		grid-column: 1;
		grid-row: 1;
		align-self: center;
		margin: 0 0 0 16px;
	}
}

/* <pantallas-grandes> Decisión 106 (19-oct-2026): desde 1440 px las medidas fijas
   de esta hoja crecen con la pantalla (× --u, tokens.css; ARQUITECTURA.md §3).
   GENERADO por herramientas/pantallas-grandes.py a partir de lo de arriba:
   no se edita a mano; después de cambiar la hoja, correr el script. Los
   ajustes propios de pantallas grandes van después de la marca de cierre. */
@media (min-width: 1440px) {
	.cta-tour-hero .cta-hero__linea--sub {
		margin-top: calc(14 * var(--u));
	}
	.cta-tour-hero__acciones {
		margin-top: 0;
	}
	.cta-tour-hero .cta-hero__extra {
		margin-top: auto;
	}
	.cta-tour-hero.cta-hero--alto-m {
		min-height: max(calc(520 * var(--u)), min(calc(640 * var(--u)), calc(100vh - calc(72 * var(--u)))));
		min-height: max(calc(520 * var(--u)), min(calc(640 * var(--u)), calc(100svh - calc(72 * var(--u)))));
	}
	.cta-tour-hero.cta-hero--sangre {
		gap: calc(28 * var(--u));
		padding-bottom: calc(44 * var(--u));
	}
	.cta-tour-hero.cta-hero--sangre .cta-hero__extra {
		margin-bottom: 0;
	}
	.cta-tour-hero__acciones {
		gap: calc(14 * var(--u));
	}
	.cta-tour-hero .cta-hero__meta {
		gap: calc(4 * var(--u)) calc(28 * var(--u));
	}
	.cta-tour-hero .cta-hero__meta li + li {
		padding-left: calc(28 * var(--u));
	}
	.cta-tour-hero .cta-hero__meta li + li::before {
		height: calc(22 * var(--u));
	}
	.cta-tour-hero .cta-hero__contenido {
		max-width: calc(1080 * var(--u));
	}
	.cta-tour-hero .cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(calc(1080 * var(--u)) / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-tour-hero.cta-hero--alto-m {
		min-height: max(calc(560 * var(--u)), min(calc(760 * var(--u)), calc(100vh - calc(72 * var(--u)))));
		min-height: max(calc(560 * var(--u)), min(calc(760 * var(--u)), calc(100svh - calc(72 * var(--u)))));
	}
	.cta-tour-hero.cta-hero--sangre {
		padding-bottom: calc(56 * var(--u));
	}
	@media (min-width: 768px) and (max-height: 820px) {
		.cta-tour-hero.cta-hero--sangre {
			padding-top: calc(var(--alto-header) + calc(28 * var(--u)));
		}
		.cta-tour-hero.cta-hero--sangre .cta-hero__contenido {
			gap: calc(20 * var(--u));
		}
	}
	@media (min-width: 768px) and (max-height: 700px) {
		.cta-tour-hero.cta-hero--sangre {
			gap: calc(18 * var(--u));
			padding-top: calc(var(--alto-header) + calc(20 * var(--u)));
			padding-bottom: calc(28 * var(--u));
		}
	}
	.cta-tour-anclas .cta-anclas__lista {
		gap: calc(32 * var(--u));
	}
	.cta-tour-encabezado .cta-encabezado-seccion__lado > p:not([class]) {
		font-size: calc(16 * var(--u));
	}
	.cta-tour-encabezado--largo .cta-titulo-seccion {
		max-width: calc(900 * var(--u));
		font-size: calc(var(--t-h2) * 0.86);
	}
	.cta-tour-sec--resumen {
		--cta-tsec-ancho: calc(960 * var(--u));
	}
	.cta-tour-resumen {
		gap: calc(32 * var(--u));
	}
	.cta-tour-resumen__principal {
		gap: calc(24 * var(--u));
	}
	.cta-tour-resumen--con-video {
		--cta-resumen-lado: calc(300 * var(--u));
		column-gap: calc(56 * var(--u));
	}
	.cta-tour-resumen--con-video:has(.cta-tvideo--horizontal) {
		--cta-resumen-lado: calc(400 * var(--u));
	}
	.cta-tour-resumen__principal {
		gap: calc(28 * var(--u));
	}
	.cta-tour-sec--resumen {
		padding-block: var(--e-8) var(--e-9);
	}
	.cta-tour-resumen__ruta {
		margin-top: calc(34 * var(--u));
	}
	.cta-tour-dias .cta-ruta__titulo {
		font-size: calc(16 * var(--u));
	}
	.cta-tour-dias .cta-ruta__textos {
		padding-right: calc(28 * var(--u));
	}
	.cta-tour-dias:has(> .cta-ruta__parada:nth-child(7)) .cta-ruta__titulo {
		font-size: calc(14.5 * var(--u));
	}
	.cta-tour-dias:has(> .cta-ruta__parada:nth-child(7)) .cta-ruta__textos {
		padding-right: calc(14 * var(--u));
	}
	.cta-tour-frase,
	.cta-tour-intro p {
		font-size: calc(17 * var(--u));
	}
	.cta-tour-intro {
		gap: calc(18 * var(--u));
	}
	.cta-tour-bloque {
		gap: calc(26 * var(--u));
	}
	.cta-tour-bloque__titulo {
		font-size: calc(var(--t-h2) * 0.6);
	}
	.cta-tour-bloque--menor {
		gap: calc(18 * var(--u));
		margin-top: calc(-24 * var(--u));
		padding-top: calc(28 * var(--u));
	}
	.cta-tour-bloque--menor .cta-tour-bloque__titulo {
		font-size: var(--t-antetitulo);
	}
	.cta-tour-lista-2 {
		gap: calc(16 * var(--u)) calc(32 * var(--u));
	}
	.cta-tour-lista-2 li {
		margin: 0;
		font-size: calc(15.5 * var(--u));
	}
	.cta-tour-visitamos {
		gap: calc(14 * var(--u));
	}
	.cta-tour-visitamos + .cta-tour-visitamos {
		margin-top: calc(10 * var(--u));
	}
	.cta-tour-visitamos__grupo {
		margin: 0;
		font-size: calc(15.5 * var(--u));
	}
	.cta-tour-visitamos__lista {
		gap: calc(14 * var(--u)) calc(32 * var(--u));
	}
	.cta-tour-visitamos__lista li {
		min-height: calc(26 * var(--u));
		margin: 0;
		padding-left: calc(38 * var(--u));
		font-size: calc(15.5 * var(--u));
	}
	.cta-tour-visitamos__lista li::before {
		width: calc(26 * var(--u));
		height: calc(26 * var(--u));
	}
	.cta-tour-plan {
		gap: calc(22 * var(--u));
		padding: calc(36 * var(--u));
	}
	.cta-tour-plan__titulo {
		gap: calc(12 * var(--u));
		font-size: calc(24 * var(--u));
	}
	.cta-tour-plan__cuerpo {
		gap: calc(16 * var(--u));
	}
	.cta-tour-plan__cuerpo > p {
		font-size: calc(15.5 * var(--u));
	}
	.cta-tour-plan__meses {
		gap: calc(10 * var(--u));
		margin-top: calc(8 * var(--u));
	}
	.cta-tour-plan__mes {
		gap: calc(10 * var(--u));
		padding: calc(14 * var(--u)) calc(6 * var(--u));
		border-radius: calc(16 * var(--u));
	}
	.cta-tour-plan__mes-nombre,
	.cta-tour-plan__dia-nombre {
		font-size: var(--t-etiqueta);
	}
	.cta-tour-plan__dias {
		gap: calc(4 * var(--u));
	}
	.cta-tour-plan__dia {
		width: calc(26 * var(--u));
		height: calc(26 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(11 * var(--u));
	}
	.cta-tour-plan__semana {
		gap: calc(10 * var(--u));
		margin-top: calc(8 * var(--u));
	}
	.cta-tour-plan__dia-semana {
		gap: calc(12 * var(--u));
		padding: calc(16 * var(--u)) calc(4 * var(--u));
		border-radius: calc(16 * var(--u));
	}
	.cta-tour-plan__marca {
		width: calc(26 * var(--u));
		height: calc(26 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tour-plan__leyenda {
		gap: calc(8 * var(--u)) calc(10 * var(--u));
		font-size: calc(12.5 * var(--u));
	}
	.cta-tour-plan__punto {
		width: calc(12 * var(--u));
		height: calc(12 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tour-plan__claves {
		margin-left: calc(12 * var(--u));
	}
	.cta-calc {
		gap: calc(12 * var(--u));
		scroll-margin-top: calc(24 * var(--u));
	}
	.cta-calc__interfaz {
		gap: calc(18 * var(--u));
	}
	.cta-calc__controles,
	.cta-calc__salida {
		gap: calc(18 * var(--u));
	}
	.cta-calc__intro {
		font-size: calc(13.5 * var(--u));
	}
	.cta-calc__grupo {
		margin: 0;
		padding: 0;
	}
	.cta-calc__leyenda,
	.cta-calc__etiqueta {
		font-size: calc(13 * var(--u));
	}
	.cta-calc__leyenda {
		width: 100%;
		margin: 0 0 calc(6 * var(--u));
		padding: 0;
	}
	.cta-contador {
		gap: calc(12 * var(--u));
		min-height: calc(56 * var(--u));
		padding: calc(6 * var(--u)) 0;
	}
	.cta-contador__textos {
		gap: 2px;
	}
	.cta-contador__etiqueta {
		font-size: calc(15 * var(--u));
	}
	.cta-contador__ayuda {
		font-size: calc(12.5 * var(--u));
	}
	.cta-contador__control {
		gap: calc(6 * var(--u));
	}
	.cta-contador__boton {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-contador__valor {
		width: calc(52 * var(--u));
		height: calc(44 * var(--u));
		min-height: calc(44 * var(--u));
		padding: 0;
		border-radius: calc(12 * var(--u));
		font-size: calc(18 * var(--u));
	}
	.cta-contador__valor::-webkit-outer-spin-button,
	.cta-contador__valor::-webkit-inner-spin-button {
		margin: 0;
	}
	.cta-calc__detalles-boton {
		gap: calc(12 * var(--u));
		width: 100%;
		padding: 0;
		font: inherit;
	}
	.cta-calc__habitaciones {
		gap: calc(4 * var(--u));
		margin-top: calc(-18 * var(--u));
		padding-bottom: calc(12 * var(--u));
	}
	.cta-calc__reparto {
		padding: calc(5 * var(--u)) calc(12 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(13 * var(--u));
	}
	.cta-calc__campo {
		gap: calc(6 * var(--u));
	}
	.cta-calc .cta-calc__select {
		min-height: calc(48 * var(--u));
		padding: 0 calc(44 * var(--u)) 0 calc(14 * var(--u));
		border-radius: calc(14 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-calc .cta-campo__select .cta-icono {
		right: calc(14 * var(--u));
	}
	.cta-calc__valor-fijo {
		font-size: calc(15 * var(--u));
	}
	.cta-calc__nota-campo {
		font-size: calc(12.5 * var(--u));
	}
	.cta-calc__dias {
		margin: 0;
		padding: 0;
	}
	.cta-calc__dias-leyenda {
		width: 100%;
		margin: 0 0 calc(6 * var(--u));
		padding: 0;
	}
	.cta-calc__dias-regla {
		margin: 0 0 calc(8 * var(--u));
	}
	.cta-calc__dias-lista {
		grid-template-columns: repeat(auto-fill, minmax(calc(64 * var(--u)), 1fr));
		gap: calc(6 * var(--u));
	}
	.cta-calc__dia-radio {
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.cta-calc__dia-texto {
		gap: calc(4 * var(--u));
		min-height: calc(44 * var(--u));
		padding: calc(11 * var(--u)) calc(4 * var(--u));
		border-radius: calc(12 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-calc__disponibilidad {
		margin-top: calc(-10 * var(--u));
	}
	.cta-calc__resultado {
		gap: calc(12 * var(--u));
		padding: calc(20 * var(--u));
		border-radius: var(--r-bloque);
	}
	.cta-calc__estado-titulo {
		gap: calc(8 * var(--u));
		font-size: calc(17 * var(--u));
	}
	.cta-calc__estado-texto {
		font-size: calc(14 * var(--u));
	}
	.cta-calc__precio-cabeza {
		gap: calc(6 * var(--u)) calc(10 * var(--u));
	}
	.cta-calc__precio-etiqueta {
		font-size: var(--t-etiqueta);
	}
	.cta-calc__chip {
		padding: calc(4 * var(--u)) calc(10 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(12 * var(--u));
	}
	.cta-calc__cifra {
		gap: 0 calc(8 * var(--u));
		font-size: calc(36 * var(--u));
	}
	.cta-calc__moneda {
		font-size: calc(14 * var(--u));
	}
	.cta-calc__precio {
		gap: calc(6 * var(--u));
	}
	.cta-calc__cifra-nota {
		font-size: calc(13 * var(--u));
	}
	.cta-calc__nino {
		gap: 2px calc(12 * var(--u));
		font-size: calc(13.5 * var(--u));
	}
	.cta-calc__nino-cifra,
	.cta-calc__total-cifra {
		margin-left: auto;
	}
	.cta-calc__nino-cifra {
		font-size: calc(15 * var(--u));
	}
	.cta-calc__total {
		gap: 2px calc(12 * var(--u));
		padding-top: calc(12 * var(--u));
	}
	.cta-calc__total-etiqueta {
		font-size: calc(14 * var(--u));
	}
	.cta-calc__total-cifra {
		font-size: calc(18 * var(--u));
	}
	.cta-calc__resumen {
		font-size: calc(13 * var(--u));
	}
	.cta-calc__subtitulo {
		font-size: calc(12 * var(--u));
	}
	.cta-calc__lineas {
		margin: calc(6 * var(--u)) 0 0;
	}
	.cta-calc__linea {
		gap: calc(12 * var(--u));
		padding: calc(8 * var(--u)) 0;
		font-size: calc(14 * var(--u));
	}
	.cta-calc__linea dt {
		gap: 2px;
	}
	.cta-calc__unitario {
		font-size: calc(12.5 * var(--u));
	}
	.cta-calc__linea dd {
		margin: 0;
	}
	.cta-calc__detalles-boton {
		min-height: calc(44 * var(--u));
		padding-top: calc(10 * var(--u));
	}
	.cta-calc__detalles-texto {
		font-size: calc(14 * var(--u));
	}
	.cta-calc__detalles {
		gap: calc(12 * var(--u));
		margin-top: calc(-4 * var(--u));
	}
	.cta-calc__anticipo {
		gap: calc(4 * var(--u));
	}
	.cta-calc__anticipo-texto {
		font-size: calc(13 * var(--u));
	}
	.cta-calc__avisos {
		gap: calc(6 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-calc__avisos li {
		padding-left: calc(14 * var(--u));
		font-size: calc(13 * var(--u));
	}
	.cta-calc__avisos li::before {
		left: 0;
		top: 0.55em;
		width: calc(6 * var(--u));
		height: calc(6 * var(--u));
		border-radius: 50%;
	}
	.cta-calc__aviso-fijo {
		font-size: calc(12.5 * var(--u));
	}
	.cta-tour-itinerario__dias {
		gap: calc(28 * var(--u));
	}
	.cta-tdian {
		border-radius: calc(24 * var(--u));
	}
	.cta-tdian__cuerpo {
		gap: calc(18 * var(--u));
		padding: calc(28 * var(--u)) calc(32 * var(--u)) calc(30 * var(--u));
	}
	.cta-tdian--con-noche .cta-tdian__cuerpo,
	.cta-tdian--con-fin .cta-tdian__cuerpo {
		padding-bottom: calc(20 * var(--u));
	}
	.cta-tdian__cabeza {
		gap: calc(8 * var(--u));
	}
	.cta-tdian__antetitulo {
		font-size: var(--t-etiqueta);
	}
	.cta-tdian__titulo {
		font-size: calc(24 * var(--u));
		scroll-margin-top: calc(80 * var(--u));
	}
	.cta-tdian__media > .cta-tfotos {
		margin: 0;
	}
	.cta-tdian__detalle {
		gap: calc(16 * var(--u));
	}
	.cta-tdian--con-foto .cta-tdian__cuerpo {
		grid-template-columns: minmax(0, 1fr) calc(340 * var(--u));
		grid-template-rows: auto 1fr;
		gap: calc(18 * var(--u)) calc(40 * var(--u));
	}
	.cta-tdian--con-foto .cta-tdian__media {
		min-height: calc(400 * var(--u));
	}
	.cta-tdian__media > .cta-tfotos--una {
		inset: 0;
	}
	.cta-tdian__media > .cta-tfotos--una .cta-tfotos__lista,
	.cta-tdian__media > .cta-tfotos--una .cta-tfotos__item {
		width: 100%;
		height: 100%;
	}
	.cta-tdian__media > .cta-tfotos--una .cta-tfotos__enlace {
		height: 100%;
	}
	.cta-tdian--con-foto .cta-tdian__cuerpo {
		grid-template-columns: minmax(0, 1fr) calc(380 * var(--u));
		column-gap: calc(48 * var(--u));
	}
	.cta-tdian--con-foto .cta-tdian__media {
		min-height: calc(440 * var(--u));
	}
	.cta-tdian__texto {
		gap: calc(14 * var(--u));
		padding-left: calc(28 * var(--u));
	}
	.cta-tdian__texto::before {
		top: calc(10 * var(--u));
		bottom: calc(10 * var(--u));
		left: calc(5 * var(--u));
		width: 2px;
		border-radius: 2px;
	}
	.cta-tdian__texto > p {
		font-size: calc(15.5 * var(--u));
	}
	.cta-tdian__texto > p::before {
		top: calc(0.825em - calc(6 * var(--u)));
		left: calc(-28 * var(--u));
		width: calc(12 * var(--u));
		height: calc(12 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tdia__lista {
		gap: calc(6 * var(--u));
		margin: calc(-4 * var(--u)) 0 0;
		padding: 0;
	}
	.cta-tdia__lista li {
		padding-left: calc(18 * var(--u));
		font-size: calc(15.5 * var(--u));
	}
	.cta-tdia__lista li::before {
		top: calc(0.825em - calc(3 * var(--u)));
		left: 0;
		width: calc(6 * var(--u));
		height: calc(6 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tdian__noche,
	.cta-tdian__fin {
		gap: calc(14 * var(--u));
		margin: 0 calc(32 * var(--u)) calc(28 * var(--u));
		padding: calc(12 * var(--u)) calc(18 * var(--u));
		border-radius: calc(14 * var(--u));
	}
	.cta-tdian__noche-textos {
		gap: 2px;
	}
	.cta-tdian__noche-etiqueta {
		font-size: var(--t-etiqueta);
	}
	.cta-tdian__noche-hotel,
	.cta-tdian__fin-texto {
		font-size: calc(15 * var(--u));
	}
	.cta-tour-cierre {
		gap: calc(14 * var(--u));
		padding-top: calc(22 * var(--u));
		font-size: calc(24 * var(--u));
	}
	.cta-tarifas {
		gap: calc(28 * var(--u));
		max-width: calc(880 * var(--u));
	}
	.cta-tarifas__periodos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(12 * var(--u));
	}
	.cta-tarifas__periodo {
		gap: calc(12 * var(--u));
		min-height: calc(64 * var(--u));
		margin: 0;
		padding: calc(14 * var(--u)) calc(16 * var(--u));
		border-radius: calc(16 * var(--u));
		font: inherit;
	}
	.cta-tarifas__marca {
		width: calc(22 * var(--u));
		height: calc(22 * var(--u));
		margin-top: 1px;
		border-radius: var(--r-pildora);
	}
	.cta-tarifas__periodo-textos {
		gap: calc(3 * var(--u));
	}
	.cta-tarifas__periodo-nombre {
		font-size: calc(16 * var(--u));
	}
	.cta-tarifas__periodo-vigencia {
		font-size: calc(13.5 * var(--u));
	}
	.cta-tarifas__panel {
		gap: calc(20 * var(--u));
	}
	.cta-tarifas__titulo {
		gap: calc(4 * var(--u)) calc(12 * var(--u));
		font-size: calc(18 * var(--u));
	}
	.cta-tarifas__titulo-vigencia {
		font-size: calc(14.5 * var(--u));
	}
	.cta-tarifas--varios.es-js .cta-tarifas__titulo {
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
	}
	.cta-tarifas__tabla {
		width: 100%;
		border-radius: calc(20 * var(--u));
	}
	.cta-tarifas__caption {
		padding: 0 0 calc(12 * var(--u));
	}
	.cta-tarifas__clase {
		gap: calc(8 * var(--u));
		margin-right: calc(10 * var(--u));
		font-size: calc(17 * var(--u));
	}
	.cta-tarifas__unidad {
		font-size: calc(14 * var(--u));
	}
	.cta-tarifas__tabla th,
	.cta-tarifas__tabla td {
		padding: calc(16 * var(--u)) calc(22 * var(--u));
	}
	.cta-tarifas__hab-nombre {
		font-size: calc(16 * var(--u));
	}
	.cta-tarifas__personas {
		margin-top: 2px;
		font-size: calc(13.5 * var(--u));
	}
	.cta-tarifas__cifra {
		font-size: calc(24 * var(--u));
	}
	.cta-tarifas__moneda {
		margin-left: 2px;
		font-size: calc(12 * var(--u));
	}
	.cta-tarifas__tabla--menores .cta-tarifas__cifra {
		font-size: calc(20 * var(--u));
	}
	.cta-tarifas:has(.cta-tarifas__tabla--menores) {
		max-width: none;
	}
	.cta-tarifas__panel:not([hidden]):has(> .cta-tarifas__tabla--menores) {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
		gap: calc(20 * var(--u)) calc(28 * var(--u));
	}
	.cta-tour-libres {
		gap: calc(24 * var(--u));
	}
	.cta-tarifas--dia {
		max-width: none;
	}
	.cta-tour-libres__titulo {
		gap: calc(8 * var(--u));
		margin-bottom: calc(12 * var(--u));
		font-size: calc(17 * var(--u));
	}
	.cta-tour-libres__rejilla {
		margin: 0;
		border-radius: calc(20 * var(--u));
	}
	.cta-tour-libres__celda {
		gap: calc(6 * var(--u)) calc(16 * var(--u));
		padding: calc(16 * var(--u)) calc(22 * var(--u));
	}
	.cta-tour-libres__celda dt {
		font-size: calc(16 * var(--u));
	}
	.cta-tour-libres__celda dd {
		gap: 2px calc(8 * var(--u));
		margin: 0;
	}
	.cta-tour-libres__cifra {
		font-size: calc(24 * var(--u));
	}
	.cta-tour-libres__resto {
		font-size: calc(13.5 * var(--u));
	}
	.cta-tour-info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(24 * var(--u));
		margin-top: calc(36 * var(--u));
	}
	.cta-tour-info--3 {
		column-gap: calc(24 * var(--u));
	}
	.cta-tour-info--3 > .cta-tour-info__tarjeta {
		margin-bottom: calc(24 * var(--u));
	}
	.cta-tour-info--1 {
		grid-template-columns: minmax(0, 1fr);
		max-width: calc(800 * var(--u));
	}
	.cta-tour-info__tarjeta {
		gap: calc(18 * var(--u));
		padding: calc(32 * var(--u));
		border-radius: calc(28 * var(--u));
	}
	.cta-tour-info__titulo {
		gap: calc(12 * var(--u));
		font-size: calc(20 * var(--u));
	}
	.cta-tour-info__tarjeta .cta-lista--roja li {
		margin-bottom: calc(14 * var(--u));
		font-size: calc(14.5 * var(--u));
	}
	.cta-tour-info__tarjeta .cta-lista--roja li:last-child {
		margin-bottom: 0;
	}
	.cta-tour-clases__nota {
		max-width: calc(820 * var(--u));
		margin-top: calc(28 * var(--u));
		font-size: calc(15.5 * var(--u));
	}
	.cta-tour-tren {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(24 * var(--u));
	}
	.cta-tour-tren--1 {
		grid-template-columns: minmax(0, calc(420 * var(--u)));
	}
	.cta-tour-tren--2 {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.cta-tour-tren__tarjeta {
		gap: calc(20 * var(--u));
		padding: calc(34 * var(--u)) calc(32 * var(--u));
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-tour-tren__nombre {
		font-size: calc(22 * var(--u));
	}
	.cta-tour-tren__datos {
		margin: 0;
		padding: 0;
	}
	.cta-tour-tren__datos li {
		padding: calc(14 * var(--u)) 0;
		font-size: calc(15 * var(--u));
	}
	.cta-tour-tren__foto {
		min-height: calc(330 * var(--u));
		margin: 0;
		border-radius: calc(24 * var(--u));
	}
	.cta-tour-tren__foto img {
		width: 100%;
		height: 100%;
	}
	.cta-tour-antes {
		grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
		gap: calc(24 * var(--u));
	}
	.cta-tour-antes--1 {
		grid-template-columns: minmax(0, 1fr);
	}
	.cta-tour-antes__tarjeta {
		gap: calc(24 * var(--u));
		padding: calc(36 * var(--u));
		border-radius: var(--r-tarjeta);
	}
	.cta-tour-antes__titulo {
		gap: calc(14 * var(--u));
		font-size: calc(22 * var(--u));
	}
	.cta-tour-antes__lista,
	.cta-tour-vestir {
		gap: calc(18 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-tour-antes__lista li,
	.cta-tour-vestir li {
		gap: calc(14 * var(--u));
	}
	.cta-tour-antes__marca,
	.cta-tour-vestir__marca {
		width: calc(32 * var(--u));
		height: calc(32 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tour-antes__lista p,
	.cta-tour-vestir p {
		padding-top: calc(4 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-tour-vestir {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(24 * var(--u));
		margin-bottom: calc(32 * var(--u));
		padding: calc(26 * var(--u)) calc(28 * var(--u));
		border-radius: var(--r-bloque);
	}
	.cta-tour-vestir__marca {
		width: calc(40 * var(--u));
		height: calc(40 * var(--u));
	}
	.cta-tour-epocas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(20 * var(--u));
	}
	.cta-tour-epoca {
		gap: calc(10 * var(--u));
		padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(30 * var(--u));
		border-radius: calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u));
	}
	.cta-tour-epoca .cta-tarjeta-icono__icono {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		margin-bottom: calc(8 * var(--u));
	}
	.cta-tour-epoca__nombre {
		font-size: calc(22 * var(--u));
	}
	.cta-tour-epoca__meses,
	.cta-tour-epoca__etiqueta {
		font-size: var(--t-etiqueta);
	}
	.cta-tour-epoca__etiqueta {
		margin-top: calc(6 * var(--u));
	}
	.cta-tour-epoca .cta-tarjeta-icono__linea {
		margin: calc(6 * var(--u)) 0;
	}
	.cta-tour-epoca__texto {
		font-size: calc(14.5 * var(--u));
	}
	.cta-tour-reservar {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(32 * var(--u));
	}
	.cta-tour-reservar {
		grid-template-columns: minmax(0, calc(760 * var(--u)));
	}
	.cta-tour-reservar__pasos {
		gap: calc(16 * var(--u));
	}
	.cta-tour-pasos {
		margin: 0 0 calc(12 * var(--u));
		padding: 0;
	}
	.cta-tour-pasos:last-child {
		margin-bottom: 0;
	}
	.cta-tour-pasos__paso {
		gap: calc(20 * var(--u));
		padding-bottom: calc(22 * var(--u));
	}
	.cta-tour-pasos__paso::before {
		top: calc(48 * var(--u));
		bottom: calc(4 * var(--u));
		left: calc(21 * var(--u));
		width: 2px;
	}
	.cta-tour-pasos__paso:last-child {
		padding-bottom: 0;
	}
	.cta-tour-pasos__num {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(17 * var(--u));
	}
	.cta-tour-pasos__paso p {
		padding-top: calc(9 * var(--u));
		font-size: calc(15.5 * var(--u));
	}
	.cta-tour-pasos__nota {
		margin-top: calc(6 * var(--u));
	}
	.cta-tour-reservar__aviso {
		gap: calc(12 * var(--u));
		padding: calc(18 * var(--u)) calc(22 * var(--u));
		border-radius: calc(18 * var(--u));
		font-size: calc(14.5 * var(--u));
	}
	.cta-tour-reservar__aviso .cta-icono {
		margin-top: 1px;
	}
	.cta-tour-reservar__pendiente {
		padding: calc(18 * var(--u)) calc(22 * var(--u));
		border-radius: calc(18 * var(--u));
	}
	.cta-tour-hoteles {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(20 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-tour-hoteles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(24 * var(--u));
	}
	.cta-tour-hoteles--una {
		grid-template-columns: minmax(0, 1fr);
		max-width: calc(980 * var(--u));
	}
	.cta-tour-hotel {
		margin: 0;
		border-radius: calc(20 * var(--u));
	}
	.cta-tour-hotel__info {
		gap: calc(10 * var(--u));
		padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
	}
	.cta-tour-hotel__arriba {
		gap: calc(12 * var(--u));
	}
	.cta-tour-hotel__lugar {
		gap: calc(6 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-tour-hotel__noches {
		font-size: calc(14 * var(--u));
	}
	.cta-tour-hotel__nombre {
		font-size: calc(21 * var(--u));
	}
	.cta-tour-hotel__sub {
		font-size: calc(15 * var(--u));
	}
	.cta-tour-hotel__chips {
		margin-top: 2px;
	}
	.cta-tour-hoteles--una .cta-tour-hotel:not(.cta-tour-hotel--sin-foto) {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.cta-tour-hoteles--una .cta-tour-hotel__portada {
		min-height: calc(300 * var(--u));
	}
	.cta-tour-hoteles--una .cta-tour-hotel__info {
		padding: calc(28 * var(--u)) calc(30 * var(--u));
	}
	html.js .cta-es-tour .cta-pie {
		padding-bottom: calc(var(--cta-alto-barra, calc(76 * var(--u))) + calc(28 * var(--u)));
	}
	.cta-barra-reserva--tour {
		padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(calc(10 * var(--u)) + env(safe-area-inset-bottom));
	}
	.cta-barra-reserva__acciones {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(10 * var(--u));
	}
	.cta-barra-reserva--tour .cta-btn {
		width: 100%;
		min-height: calc(50 * var(--u));
		padding-inline: calc(10 * var(--u));
	}
	.cta-barra-reserva--tour {
		padding: calc(12 * var(--u)) var(--margen) calc(calc(12 * var(--u)) + env(safe-area-inset-bottom));
	}
	.cta-barra-reserva__interior {
		gap: calc(32 * var(--u));
		max-width: var(--contenido);
		margin-inline: auto;
	}
	.cta-barra-reserva__acciones {
		gap: calc(12 * var(--u));
	}
	.cta-barra-reserva--tour .cta-btn {
		width: auto;
		min-height: calc(48 * var(--u));
		padding-inline: calc(26 * var(--u));
	}
	.cta-tsec {
		--cta-tsec-ancho: calc(960 * var(--u));
	}
	.cta-tsec > .cta-contenedor::after {
		height: 1px;
		margin-top: var(--e-8);
	}
	.cta-tsec__cabeza {
		margin-bottom: var(--e-4);
		padding-block: calc(4 * var(--u));
	}
	.cta-tsec__titulo {
		width: 100%;
		margin: 0;
		padding-block: calc(12 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-tsec__boton {
		gap: calc(12 * var(--u));
		width: 100%;
		margin-block: calc(-12 * var(--u));
		padding: calc(12 * var(--u)) 0;
		font: inherit;
	}
	.cta-tsec__boton::after {
		inset: calc(4 * var(--u)) calc(-12 * var(--u));
		border-radius: calc(12 * var(--u));
	}
	.cta-tsec__icono {
		width: calc(22 * var(--u));
		height: calc(22 * var(--u));
		margin-top: calc((1.35em - calc(22 * var(--u))) / 2);
		border-radius: var(--r-pildora);
	}
	.cta-tsec__intro {
		max-width: calc(760 * var(--u));
		margin-bottom: var(--e-6);
		font-size: calc(16 * var(--u));
	}
	.cta-tsec {
		padding-block: 0;
	}
	.cta-tsec.es-plegada .cta-tsec__cabeza {
		margin-bottom: 0;
	}
	.cta-tsec.es-plegada > .cta-contenedor::after {
		margin-top: 0;
	}
	.cta-tsec:last-of-type {
		padding-bottom: var(--e-9);
	}
	.cta-tour-incluye {
		gap: calc(48 * var(--u));
	}
	.cta-tour-incluye .cta-tour-bloque--menor {
		margin-top: 0;
	}
	.cta-tour-plan {
		gap: 0;
	}
	html.cta-con-dialogo {
		padding-right: var(--cta-barra-desplazamiento, 0px);
	}
	html.cta-con-dialogo .cta-header,
	html.cta-con-dialogo .cta-barra-reserva {
		right: var(--cta-barra-desplazamiento, 0px);
	}
	html.cta-con-dialogo .cta-flotante {
		right: calc(calc(16 * var(--u)) + var(--cta-barra-desplazamiento, 0px));
	}
	.cta-dialogo {
		width: min(calc(560 * var(--u)), calc(100vw - calc(48 * var(--u))));
		max-width: none;
		margin: auto;
		padding: 0;
		border-radius: calc(28 * var(--u));
	}
	.cta-dialogo--calc {
		width: min(calc(960 * var(--u)), calc(100vw - calc(48 * var(--u))));
	}
	.cta-dialogo__caja {
		width: 100%;
		max-height: min(calc(900 * var(--u)), calc(100vh - calc(48 * var(--u))));
		max-height: min(calc(900 * var(--u)), calc(100dvh - calc(48 * var(--u))));
	}
	.cta-dialogo--calc .cta-dialogo__caja {
		height: min(calc(900 * var(--u)), calc(100vh - calc(48 * var(--u))));
		height: min(calc(900 * var(--u)), calc(100dvh - calc(48 * var(--u))));
	}
	.cta-dialogo__cabeza {
		gap: calc(16 * var(--u));
		padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(18 * var(--u));
	}
	.cta-dialogo__titulos {
		gap: calc(6 * var(--u));
	}
	.cta-dialogo__tour {
		font-size: calc(14 * var(--u));
	}
	.cta-dialogo__titulo {
		font-size: calc(22 * var(--u));
	}
	.cta-dialogo__cerrar {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-dialogo__cuerpo {
		min-height: 0;
		padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
	}
	.cta-cotizar .cta-campo__ayuda {
		font-size: calc(14 * var(--u));
	}
	.cta-cotizar .cta-campo__error {
		font-size: calc(14 * var(--u));
	}
	.cta-cotizar .cta-campo__error:empty {
		margin-top: calc(-8 * var(--u));
	}
	.cta-cotizar__disponibilidad {
		margin-top: calc(-6 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-cotizar__viajeros {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(12 * var(--u));
	}
	.cta-cotizar__botones {
		gap: calc(10 * var(--u));
	}
	.cta-cotizar__fecha--calendario {
		gap: calc(10 * var(--u));
	}
	.cta-calendario {
		gap: calc(8 * var(--u));
		width: 100%;
		padding: calc(12 * var(--u));
		border-radius: var(--r-campo);
	}
	.cta-calendario__cabeza {
		gap: calc(8 * var(--u));
	}
	.cta-calendario__mes {
		font-size: calc(16 * var(--u));
	}
	.cta-calendario__mover {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-calendario__tabla {
		width: 100%;
	}
	.cta-calendario__tabla th {
		padding: calc(4 * var(--u)) 0;
		font-size: calc(12 * var(--u));
	}
	.cta-calendario__tabla td {
		height: calc(44 * var(--u));
		padding: 0;
	}
	.cta-calendario__dia {
		border-radius: calc(12 * var(--u));
		font-size: calc(15 * var(--u));
		line-height: calc(44 * var(--u));
	}
	.cta-calendario__elegida {
		padding: calc(4 * var(--u)) calc(4 * var(--u)) 0;
		font-size: calc(14 * var(--u));
		line-height: 1.45;
	}
	.cta-dialogo .cta-calc {
		gap: 0;
		min-height: 0;
	}
	.cta-dialogo .cta-calc__interfaz {
		min-height: 0;
		padding: calc(22 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));
	}
	.cta-dialogo .cta-calc__interfaz::after {
		height: var(--cta-calc-colchon, 0px);
		margin-top: calc(-18 * var(--u));
	}
	.cta-dialogo .cta-calc__pie {
		padding: calc(14 * var(--u)) calc(28 * var(--u)) calc(calc(14 * var(--u)) + env(safe-area-inset-bottom));
	}
	.cta-dialogo .cta-calc__intro {
		font-size: calc(15 * var(--u));
	}
	.cta-dialogo .cta-calc__pie-precio {
		gap: calc(12 * var(--u));
		height: calc(28 * var(--u));
		margin: 0 0 calc(10 * var(--u));
		line-height: 1;
	}
	.cta-calc__pie-etiqueta {
		font-size: var(--t-etiqueta);
		line-height: 1.2;
	}
	.cta-calc__pie-cifra {
		font-size: calc(22 * var(--u));
	}
	.cta-calc__pie-moneda {
		font-size: calc(11 * var(--u));
		line-height: 1.2;
	}
	.cta-calc__pie-estado {
		gap: calc(8 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-dialogo--calc .cta-calc__interfaz {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 calc(40 * var(--u));
		padding-top: calc(24 * var(--u));
	}
	.cta-dialogo--calc .cta-calc__salida {
		top: 0;
	}
	.cta-dialogo--calc .cta-calc__interfaz::after {
		margin-top: 0;
	}
	.cta-dialogo--calc .cta-calc__pie {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0 calc(40 * var(--u));
	}
	.cta-tfotos {
		--cta-tfotos-alto: calc(240 * var(--u));
		--cta-tfotos-alto-una: calc(400 * var(--u));
		--cta-tfotos-espacio: calc(10 * var(--u));
		margin: 2px 0 calc(6 * var(--u));
	}
	.cta-tfotos__lista {
		gap: var(--cta-tfotos-espacio);
		margin: 0;
		padding: 0;
	}
	.cta-tfotos__item {
		max-width: 100%;
		margin: 0;
	}
	.cta-tfotos__enlace {
		border-radius: calc(18 * var(--u));
	}
	.cta-tfotos__enlace img {
		width: 100%;
		height: 100%;
	}
	.cta-tfotos--una .cta-tfotos__item {
		width: min(100%, calc(var(--cta-tfotos-alto-una) * var(--cta-prop, 1.5)));
	}
	.cta-tfotos--tira {
		width: 100%;
		padding-bottom: calc(8 * var(--u));
		border-radius: calc(18 * var(--u));
	}
	.cta-tfotos--tira .cta-tfotos__item {
		width: calc(var(--cta-tfotos-alto) * var(--cta-prop, 1.5));
	}
	.cta-tfotos {
		--cta-tfotos-alto: calc(260 * var(--u));
		--cta-tfotos-alto-una: calc(440 * var(--u));
		--cta-tfotos-espacio: calc(12 * var(--u));
	}
	.cta-tfotos {
		--cta-tfotos-alto: calc(280 * var(--u));
	}
	.cta-tvideos__lista {
		gap: calc(20 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-tvideo {
		width: 100%;
		margin: 0;
	}
	.cta-tvideo--vertical {
		--cta-video-arriba: calc(158 * var(--u));
		--cta-video-ancho: min(calc(300 * var(--u)), 70vh * 9 / 16, max(calc(200 * var(--u)), (100vh - var(--cta-video-arriba) - var(--cta-alto-barra, 0px)) * 9 / 16));
		width: var(--cta-video-ancho);
		max-width: 100%;
	}
	@supports (height: 100svh) {
		.cta-tvideo--vertical {
			--cta-video-ancho: min(calc(300 * var(--u)), 70svh * 9 / 16, max(calc(200 * var(--u)), (100svh - var(--cta-video-arriba) - var(--cta-alto-barra, 0px)) * 9 / 16));
		}
	}
	.cta-tvideo--horizontal {
		max-width: calc(640 * var(--u));
	}
	.cta-tvideo__marco {
		border-radius: calc(24 * var(--u));
	}
	.cta-tvideo__portada {
		inset: 0;
	}
	.cta-tvideo__portada:focus-visible {
		border-radius: calc(24 * var(--u));
	}
	.cta-tvideo__foto {
		width: 100%;
		height: 100%;
	}
	.cta-tvideo__velo {
		inset: 0;
	}
	.cta-tvideo__reproducir {
		top: 50%;
		left: 50%;
		width: calc(78 * var(--u));
		height: calc(78 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tvideo__reproducir svg {
		margin-left: calc(4 * var(--u));
	}
	.cta-tvideo__duracion {
		right: calc(14 * var(--u));
		bottom: calc(14 * var(--u));
		padding: calc(5 * var(--u)) calc(11 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(14 * var(--u));
		line-height: 1.2;
	}
	.cta-tvideo__reproductor {
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.cta-tvideo--vertical {
		--cta-video-arriba: calc(166 * var(--u));
	}
	.cta-tvideo--horizontal {
		max-width: none;
	}
	.cta-tour-plan__dia {
		font-size: calc(12 * var(--u));
	}
	.cta-tour-mosaico {
		--cta-tsec-ancho: calc(960 * var(--u));
	}
	.cta-tour-mosaico > .cta-contenedor::after {
		height: 1px;
		margin-top: var(--e-8);
	}
	.cta-tour-mosaico:last-of-type {
		padding-bottom: var(--e-9);
	}
	.cta-tmosaico {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(0, 1fr));
		gap: calc(6 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-tmosaico--3 {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	}
	.cta-tmosaico__item {
		min-height: 0;
		margin: 0;
	}
	.cta-tmosaico__foto {
		width: 100%;
		height: 100%;
		border-radius: calc(14 * var(--u));
	}
	.cta-tmosaico__img {
		width: 100%;
		height: 100%;
	}
	.cta-tmosaico__pie {
		inset: auto 0 0;
		padding: calc(22 * var(--u)) calc(12 * var(--u)) calc(9 * var(--u));
		font-size: calc(13 * var(--u));
		line-height: 1.3;
	}
	.cta-tmosaico__item--1 .cta-tmosaico__pie {
		padding: calc(26 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-tmosaico__mas {
		inset: 0;
		gap: calc(8 * var(--u));
		padding: calc(8 * var(--u));
		font-size: calc(17 * var(--u));
		line-height: 1.25;
	}
	a.cta-tvis-lugar {
		border-radius: calc(4 * var(--u));
	}
	.cta-tvis-lugar__icono {
		width: calc(16 * var(--u));
		height: calc(16 * var(--u));
		margin-left: calc(6 * var(--u));
	}
	.cta-lightbox--filtros[open] {
		grid-template-rows: auto minmax(0, 1fr) calc(76 * var(--u));
	}
	.cta-lightbox__filtros {
		gap: calc(8 * var(--u));
		max-width: 100%;
		padding: calc(14 * var(--u)) calc(4 * var(--u));
	}
	.cta-lightbox__filtro {
		min-height: calc(40 * var(--u));
		padding: calc(8 * var(--u)) calc(16 * var(--u));
		border-radius: var(--r-pildora);
		font: inherit;
		font-size: calc(14 * var(--u));
		line-height: 1.2;
	}
	.cta-lightbox--filtros .cta-lightbox__lugar {
		margin-top: calc(12 * var(--u));
	}
	.cta-lightbox--filtros .cta-lightbox__contador {
		margin: 0 0 calc(12 * var(--u));
	}
}
/* </pantallas-grandes> */

/* ---------------------------------------------------------------------
   22. Pantallas grandes: ajustes a mano (decisión 106, 19-oct-2026)
   Además del bloque generado de arriba (todo × --u): lo que sigue al ancho
   de la retícula, que crece más rápido que --u. A 1440 px cada regla da lo
   mismo que antes (--g1 = 0). Ver ARQUITECTURA.md §3, «Pantallas grandes».
   --------------------------------------------------------------------- */
@media (min-width: 1440px) {
	/* Resumen: desde la decisión 112 va en la columna de las secciones
	   (§4 y §16, 960 × --u), así que el texto, el video (300 × --u, el
	   vertical sin dejar de caber entre las barras fijas, §19) y la línea
	   de los días crecen × --u con el bloque generado y cada renglón queda
	   como a 1440 px. Se quitaron las reglas a mano de la decisión 106 que
	   seguían al ancho del contenido: el video que crecía más que la letra,
	   el ancho de lectura que bajaba hasta 36 em, el texto y el video
	   centrados en el contenido y, desde 1680 px, la introducción larga en
	   dos columnas («cta-tour-resumen--largo»). */
	/* Día a día y títulos de las secciones: desde la decisión 111 (hoja 7)
	   van en la columna de las secciones (§16, 960 × --u), así que la tarjeta
	   del día ya no tiene renglones largos que limitar ni una foto
	   demasiado apaisada: basta la rejilla de siempre × --u (texto y foto de
	   380 × --u, alto mínimo de 440 × --u; bloque generado). Se quitaron
	   las reglas a mano de la decisión 106 (texto de 706 px y alto mínimo
	   según --contenido), que ahí daban lo mismo, y la del título en rem
	   (ahora va en px y lo escala el bloque generado). */
	/* «Antes de viajar» y las tarjetas de información a 2 columnas: las
	   tarjetas siguen al contenido, así que sus renglones pasaban de unos
	   70 caracteres a 1440 px a 113 a 2560; con el ancho de lectura (la
	   fórmula de §44) no pasan de unos 80. */
	.cta-tour-antes__lista p,
	.cta-tour-info__tarjeta li {
		max-width: max(36em, 100% - var(--g1) * 4);
	}
	/* Textos largos sueltos: hasta 36 em (unos 83 caracteres). */
	.cta-tsec__intro {
		max-width: min(calc(760 * var(--u)), max(36em, 100% - var(--g1) * 4));
	}
	.cta-tour-clases__nota {
		max-width: min(calc(820 * var(--u)), max(36em, 100% - var(--g1) * 4));
	}
	/* «¿Cómo reservar?»: los pasos (a 1440 px, 696 px de texto: unos 90
	   caracteres) y las notas de los tours de un día también bajan a 36 em. */
	.cta-tour-pasos__paso p,
	.cta-tour-reservar__aviso span {
		max-width: max(36em, 100% - var(--g1) * 4);
	}
}
/* «¿Qué incluye?» y «No incluye» siguen a 2 columnas en todos los anchos:
   desde la decisión 111 van en la columna de las secciones (§16), así que
   cada columna ya no pasa de unos 60 caracteres por renglón (se quitó el
   paso a 3 columnas desde 2000 px de la decisión 106). */