/* =====================================================================
   Chihuahua Te Amo · componentes del diseño B
   Botones, etiquetas, chips, encabezados de sección, tarjetas, listas,
   tabla de precios, acordeón, carrusel y visor de fotos, formularios, patrón
   de corazones, encabezado, menú lateral, buscador, pie, portadas,
   botón flotante y barra de reserva móvil.
   Valores medidos en los tableros B-Sistema y en 05-b-custom.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Botones (píldora 999 px, Montserrat 700 en oración)
   Decisión 104 (16-oct-2026, «menú y botones en minúsculas»): el texto va
   como está escrito («Reservar por WhatsApp», «Ver paquetes»), sin
   mayúsculas forzadas ni el espaciado de 0.08em que llevaban; un punto
   más grande (15 / 14 / 13 px; 14.5 px el grande en celular) porque en
   oración el mismo texto mide menos. Los rótulos chicos («Desde»,
   «Día 1», «Esta noche», etiquetas sobre las fotos) siguen en mayúsculas.
   --------------------------------------------------------------------- */
.cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: none;
	border: 1.5px solid transparent;
	border-radius: var(--r-pildora);
	font-family: var(--fuente-texto);
	font-weight: 700;
	font-size: var(--t-boton);
	letter-spacing: 0.01em;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, gap 0.18s ease;
}
.cta-btn--g {
	min-height: 56px;
	padding: 0 30px;
}
.cta-btn--m {
	min-height: 48px;
	padding: 0 22px;
	font-size: 14px;
}
.cta-btn--s {
	min-height: 44px;
	padding: 0 20px;
	font-size: 13px;
}
.cta-btn--completo {
	width: 100%;
}
.cta-btn .cta-btn__flecha {
	transition: transform 0.18s ease;
}
.cta-btn:hover .cta-btn__flecha {
	transform: translateX(4px);
}
.cta-btn--primario {
	background-color: var(--cta-rojo);
	border-color: var(--cta-rojo);
	color: #fff;
}
.cta-btn--primario:hover,
.cta-btn--primario:focus-visible {
	background-color: #c70023;
	border-color: #c70023;
	color: #fff;
}
/* Botones que abren WhatsApp (decisión 47): verde WhatsApp con texto e
   ícono oscuros (#101820 sobre #25d366 = 9:1; hover 7.3:1), en los dos
   modos y también sobre foto o sobre rojo. cta_boton() pone la clase (y
   el ícono) a todo botón que va a wa.me, aunque se haya pedido contorno o
   blanco; los formularios que abren WhatsApp la llevan en su <button>. */
.cta-btn--whatsapp {
	background-color: var(--verde-whatsapp);
	border-color: var(--verde-whatsapp);
	color: var(--sobre-verde);
}
.cta-btn--whatsapp:hover,
.cta-btn--whatsapp:focus-visible {
	background-color: var(--verde-whatsapp-hover);
	border-color: var(--verde-whatsapp-hover);
	color: var(--sobre-verde);
}
.cta-btn--contorno {
	background-color: transparent;
	border-color: var(--borde-fuerte);
	border-color: color-mix(in srgb, var(--texto) 72%, transparent);
	color: var(--texto);
}
.cta-btn--contorno:hover {
	background-color: var(--texto);
	border-color: var(--texto);
	color: var(--fondo);
}
.cta-btn--blanco {
	background-color: #fff;
	border-color: #fff;
	color: #101820;
}
.cta-btn--blanco:hover {
	background-color: #e5e1e6;
	border-color: #e5e1e6;
	color: #101820;
}
.cta-btn--enlace {
	min-height: 44px;
	padding: 0;
	gap: 8px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--texto);
	font-size: 15px;
}
.cta-btn--enlace .cta-btn__texto {
	padding-bottom: 3px;
	border-bottom: 1.5px solid var(--cta-rojo);
}
.cta-btn--enlace:hover {
	color: var(--rojo-texto);
}
.cta-btn--enlace:hover .cta-btn__texto {
	border-color: var(--rojo-texto);
}

/* Rótulo de una tarjeta enlazada (decisión 61, botones mínimos): toda la
   tarjeta es el enlace y «Conoce más →» / «Ver paquetes →» es solo texto
   (aria-hidden si el enlace ya tiene su nombre), no un botón aparte. Al
   pasar el ratón por la tarjeta se pone rojo y la flecha avanza. En
   oración, como los botones (decisión 104). */
.cta-rotulo-mas {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--fuente-texto);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
	color: inherit;
}
.cta-rotulo-mas__texto {
	padding-bottom: 3px;
	border-bottom: 1.5px solid var(--cta-rojo);
}
.cta-rotulo-mas .cta-icono {
	flex: none;
	color: var(--rojo-texto);
	transition: transform 0.18s ease;
}
.cta-destino:hover .cta-rotulo-mas {
	color: var(--rojo-texto);
}
.cta-destino:hover .cta-rotulo-mas .cta-icono {
	transform: translateX(4px);
}
.cta-destino[data-zona="foto"]:hover .cta-rotulo-mas {
	color: inherit;
}
@media (prefers-reduced-motion: reduce) {
	.cta-rotulo-mas .cta-icono {
		transition: none;
	}
}
/* Botón rojo de las tarjetas de tour (decisión 109, hoja 1 de Arturo: «los
   botones de las tarjetas de tours van en rojo»): «Conoce más» a todo lo
   ancho, abajo de la tarjeta, con el rojo y la letra de los botones
   principales (.cta-btn--primario: blanco sobre #ea0029, 4.6:1). Como el
   rótulo de arriba, es parte del enlace de la tarjeta (aria-hidden, sin
   parada propia con Tab; decisión 61): toda la tarjeta abre. Al pasar el
   ratón por la tarjeta o con el foco del teclado dentro, se oscurece como
   el hover de los botones rojos (#c70023, 5.9:1). Igual en los dos modos.
   Lo usan la tarjeta de tour de los listados (§5) y el «Recorrido
   recomendado» de las entradas del blog (paginas/entrada.css). */
.cta-rotulo-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	padding: 10px 20px;
	border: 1.5px solid var(--cta-rojo);
	border-radius: var(--r-pildora);
	background-color: var(--cta-rojo);
	font-family: var(--fuente-texto);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	transition: background-color 0.18s ease, border-color 0.18s ease;
}
.cta-tarjeta-tour:hover .cta-rotulo-boton,
.cta-tarjeta-tour:focus-within .cta-rotulo-boton,
.cta-entrada-tour:hover .cta-rotulo-boton,
.cta-entrada-tour:focus-within .cta-rotulo-boton {
	border-color: #c70023;
	background-color: #c70023;
}
@media (prefers-reduced-motion: reduce) {
	.cta-rotulo-boton {
		transition: none;
	}
}
/* Alto contraste de Windows: el fondo se pierde y el borde dibuja el botón. */
@media (forced-colors: active) {
	.cta-rotulo-boton {
		border-color: ButtonText;
	}
}
.cta-btn[disabled],
.cta-btn[aria-disabled="true"] {
	opacity: 0.4;
	cursor: not-allowed;
}
@media (max-width: 767px) {
	.cta-btn--g {
		padding: 0 20px;
	}
}

/* Botón redondo de ícono (buscar, tema, cerrar) */
.cta-icono-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: transparent;
	color: var(--header-texto);
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
/* El atributo hidden gana al display de arriba (p. ej. las flechas del visor
   de fotos con una sola foto). */
.cta-icono-btn[hidden] {
	display: none;
}
.cta-icono-btn:hover {
	background-color: rgba(127, 127, 127, 0.14);
}

/* Enlace de llamada a Reservaciones (656): discreto, nunca botón */
.cta-enlace-llamada {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--texto-2);
	text-decoration: none;
}
.cta-enlace-llamada:hover {
	color: var(--texto);
}
.cta-enlace-llamada--sobre-rojo,
.cta-enlace-llamada--sobre-rojo:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------
   2. Etiquetas, insignias y chips
   --------------------------------------------------------------------- */
.cta-etiqueta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 30px;
	padding: 0 14px;
	border-radius: var(--r-pildora);
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	font-weight: var(--peso-etiqueta);
}
.cta-etiqueta--foto {
	background: var(--velo-etiqueta);
	color: #fff;
}
.cta-etiqueta--roja {
	background: var(--cta-rojo);
	color: #fff;
}
.cta-etiqueta--contorno {
	border: 1.5px solid var(--cta-rojo);
	color: var(--texto);
}
.cta-etiqueta--tarjeta {
	border: 1px solid var(--borde-fuerte);
	background: var(--tarjeta);
	color: var(--texto);
}
@media (max-width: 767px) {
	.cta-etiqueta {
		min-height: 28px;
		padding: 0 12px;
	}
}
/* «Nuevo» junto a TIENDITA: 12 px en todos los anchos (decisión 55; estaba
   en 10 px en el menú del encabezado y en el del celular). */
.cta-insignia-nuevo {
	display: inline-flex;
	align-items: center;
	height: 22px;
	margin-left: 8px;
	padding: 0 8px;
	border: 1px solid var(--cta-rojo);
	border-radius: var(--r-pildora);
	font-family: var(--fuente-texto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: currentColor;
}
.cta-insignia-vigente {
	display: inline-flex;
	align-items: center;
	height: 24px;
	margin-top: 8px;
	padding: 0 10px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
	color: #fff;
	font-family: var(--fuente-texto);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------
   3. Corazón y encabezado de sección
   Decisión 109 (20-oct-2026, hoja 3 de Arturo): ya no hay antetítulo con
   corazón arriba de los títulos («♥ VIVE LA EXPERIENCIA A TU MEDIDA») ni
   conteos en los encabezados («—— 10 PAQUETES»), en ninguna página. Un
   encabezado sin enlace va en medio (--centro, que ponen
   cta_encabezado_seccion() y cta_listados_encabezado()): el título y,
   debajo, su texto, como «Conoce nuestros tours destacados» de la hoja 1.
   Con enlace, el título a la izquierda y el enlace a la derecha desde
   1024 px.
   --------------------------------------------------------------------- */
.cta-corazon {
	display: inline-block;
	flex: none;
	color: var(--cta-rojo);
}
.cta-encabezado-seccion {
	display: flex;
	flex-direction: column;
	gap: var(--e-5);
	margin-bottom: var(--e-8);
}
.cta-encabezado-seccion__principal {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}
.cta-encabezado-seccion__lado {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	max-width: 500px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-2);
}
@media (min-width: 1024px) {
	.cta-encabezado-seccion--con-lado {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 48px;
	}
	.cta-encabezado-seccion--con-lado .cta-encabezado-seccion__lado {
		flex: 0 1 460px;
		padding-bottom: 6px;
	}
}
@media (max-width: 767px) {
	.cta-encabezado-seccion {
		margin-bottom: var(--e-6);
	}
	.cta-encabezado-seccion__principal {
		gap: 16px;
	}
}
/* En medio (decisión 109): el título centrado y, si hay, el texto debajo,
   centrado y en una medida cómoda; en todos los anchos. */
.cta-encabezado-seccion--centro {
	align-items: center;
	text-align: center;
}
.cta-encabezado-seccion--centro .cta-encabezado-seccion__principal {
	align-items: center;
	max-width: 100%;
}
.cta-encabezado-seccion--centro .cta-titulo-seccion {
	text-wrap: balance;
}
.cta-encabezado-seccion--centro .cta-encabezado-seccion__lado {
	align-items: center;
	max-width: 640px;
}
@media (min-width: 1024px) {
	.cta-encabezado-seccion--centro.cta-encabezado-seccion--con-lado {
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: var(--e-5);
	}
	.cta-encabezado-seccion--centro.cta-encabezado-seccion--con-lado .cta-encabezado-seccion__lado {
		flex: none;
		padding-bottom: 0;
	}
	/* Solo el enlace a la derecha («Paquetes en El Chepe →» de /tours/, «Ver
	   todo el blog →»): al final del renglón, alineado con el borde del
	   contenido (antes compartía una columna de 460 px con el conteo). */
	.cta-encabezado-seccion--solo-enlace .cta-encabezado-seccion__lado {
		flex: none;
	}
}
.cta-subtitulo-listado {
	margin: var(--e-8) 0 var(--e-5);
	font-size: 20px;
	letter-spacing: var(--espaciado-subtitulo);
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	line-height: 1.2;
}
.cta-subtitulo-listado:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------------------
   4. Imagen vacía (mientras no hay foto)
   --------------------------------------------------------------------- */
.cta-imagen-vacia {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 100%;
	background: radial-gradient(120% 90% at 20% 10%, #1c2838 0%, #101820 70%);
	color: rgba(234, 0, 41, 0.55);
}

/* ---------------------------------------------------------------------
   5. Tarjeta de tour
   Decisión 99 (hoja 6 de Arturo, 16-oct-2026): «las etiquetas de los tours
   muy grandes por lo cual caben solo dos en la web». La rejilla de las
   listas pone 4 por renglón desde 1280 px, 3 de 1024 a 1279 px, 2 de 768 a
   1023 px y 1 en celular. Ya no hay tarjeta ancha al final de un número
   impar: el último renglón se llena de izquierda a derecha. Desde la
   decisión 103 la tarjeta es la minimalista (abajo, sin la columna
   «Noches / Días»).
   --------------------------------------------------------------------- */
.cta-rejilla-tours {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--separacion);
}
/* «columnas» 3: 3 como máximo (p. ej. [cta_tours] con 3 tours). */
.cta-rejilla-tours--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cta-rejilla-tours + .cta-subtitulo-listado {
	margin-top: var(--e-9);
}
@media (max-width: 1279px) {
	.cta-rejilla-tours {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* «columnas» 4: una fila de 4 (los destacados de Inicio) va 2 + 2 de
	   768 a 1279 px, no 3 + 1. */
	.cta-rejilla-tours--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 1023px) {
	.cta-rejilla-tours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.cta-rejilla-tours {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}
/* Tarjeta de tour minimalista (decisión 103, Arturo, 16-oct-2026: «la
   columna de "7 NOCHES / 8 DÍAS" ocupa mucho espacio para poca
   información»). Sin columna de cifras ni línea roja: foto 16:10 con sus
   etiquetas, título, un renglón de datos en chico (duración y, en los tours
   de un día, el inicio), la frase y, tras una línea fina, «Desde» con su
   condición y el botón rojo «Conoce más» (decisión 109). Borde fino, sin
   sombra (aparece al pasar el ratón). La rejilla estira las tarjetas de una
   fila al mismo alto y el pie queda abajo en todas. */
.cta-tarjeta-tour {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
	transition: box-shadow 0.2s ease;
}
.cta-tarjeta-tour:hover {
	box-shadow: var(--sombra);
}
.cta-tarjeta-tour:focus-within {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
/* Foto 16:10: unos 172 px de alto a 4 por renglón; en celular, 280 px como
   mucho (una sola columna de hasta 727 px). */
.cta-tarjeta-tour__foto {
	position: relative;
	flex: none;
	aspect-ratio: 16 / 10;
	max-height: 280px;
	overflow: hidden;
	background: #101820;
}
.cta-tarjeta-tour__foto img,
.cta-tarjeta-tour__foto .cta-imagen-vacia {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	transition: transform 0.5s ease;
}
.cta-tarjeta-tour:hover .cta-tarjeta-tour__foto img {
	transform: scale(1.03);
}
.cta-tarjeta-tour__etiquetas {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
/* Etiquetas chicas sobre la foto («Recargado», «Nuevo»…): 11 px; una muy
   larga se parte en dos renglones en vez de salirse de la foto. */
.cta-tarjeta-tour__etiquetas .cta-etiqueta {
	max-width: 100%;
	min-height: 22px;
	padding: 3px 9px;
	font-size: 11px;
	letter-spacing: 0.08em;
	white-space: normal;
}
.cta-tarjeta-tour__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
	padding: 18px 18px 20px;
}
.cta-tarjeta-tour__cabeza {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}
.cta-tarjeta-tour__titulo {
	font-size: 16px;
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.3;
}
.cta-tarjeta-tour__enlace {
	color: inherit;
	text-decoration: none;
}
.cta-tarjeta-tour__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.cta-tarjeta-tour__enlace:focus-visible {
	outline: none;
}
.cta-tarjeta-tour__enlace:hover {
	color: inherit;
}
/* Datos en chico bajo el título: la duración («5 noches · 6 días») y, en
   los tours de un día, «Inicia en …». Ícono rojo (detalle), texto en el
   color del texto; si no caben en un renglón, el inicio baja. */
.cta-tarjeta-tour__datos {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--texto);
}
.cta-tarjeta-tour__dato {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
}
.cta-tarjeta-tour__dato .cta-icono {
	flex: none;
	margin-top: 1px;
	color: var(--rojo-texto);
}
.cta-tarjeta-tour__teaser {
	font-size: 13px;
	line-height: 1.5;
	color: var(--texto-2);
}
/* En las rejillas de 2 a 4 columnas, la frase va en 3 renglones como mucho
   (la más larga de hoy, la del Tour de Invierno, cabe en 3 a 4 por
   renglón). En celular va completa. */
@media (min-width: 768px) {
	.cta-tarjeta-tour__teaser {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
	}
}
/* Extras bajo el título que agrega cta_listados_rejilla_tours()
   (inc/paginas/listados.php) en los listados y en los destacados de Inicio:
   las estrellas del JSON de la página (decisión 59: Recargado Plus 4, La
   Gran Ruta 5) y «Faltan N días» de un tour de salida fija (decisión 33).
   Antes en listados-comun.css, que Inicio no carga. */
.cta-tarjeta-tour__estrellas {
	display: flex;
	margin: 0;
	line-height: 1;
}
.cta-tarjeta-tour__estrellas .cta-estrellas__icono {
	width: 14px;
	height: 14px;
}
.cta-tarjeta-tour__cuenta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--rojo-texto);
}
.cta-tarjeta-tour__cuenta .cta-icono {
	flex: none;
}
/* Pie, tras una línea fina: «Desde», la cifra y su condición y, al final,
   el botón rojo «Conoce más» a todo lo ancho (decisión 109, hoja 1 de
   Arturo; .cta-rotulo-boton, §1). El pie va abajo de la tarjeta
   (margin-top: auto): en una fila las tarjetas miden lo mismo y los botones
   quedan al mismo nivel. Sin precio (tours de un día sin precio_desde,
   decisión 25), solo el botón. El bloque «Desde» es el de
   cta_obtener_precio_desde(). */
.cta-tarjeta-tour__pie {
	display: flex;
	flex-direction: column;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--borde);
}
.cta-tarjeta-tour__pie .cta-desde + .cta-tarjeta-tour__boton {
	margin-top: 16px;
}
/* Cifras del mismo ancho (tabular-nums): cualquier precio de 5 cifras mide
   lo mismo que «$88,888», así el pie no depende del precio de hoy (con el
   «Desde» de 2027, decisión 39, La Gran Ruta pasa a $48,906). */
.cta-tarjeta-tour .cta-desde__cifra {
	font-variant-numeric: tabular-nums;
}
.cta-tarjeta-tour__pie .cta-desde__nota {
	max-width: none;
}
/* Desde 768 px el precio va más chico que en la ficha. En celular (una
   columna, §42) el precio va de 24 px y la condición de 14 px. */
@media (min-width: 768px) {
	.cta-tarjeta-tour .cta-desde__etiqueta,
	.cta-tarjeta-tour .cta-desde__moneda {
		font-size: 11px;
	}
	.cta-tarjeta-tour .cta-desde__cifra {
		font-size: 18px;
	}
	.cta-tarjeta-tour .cta-desde__nota {
		font-size: 12px;
		line-height: 1.4;
	}
}

/* Precio «desde» */
.cta-desde {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.cta-desde__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-desde__precio {
	display: flex;
	align-items: baseline;
	gap: 6px;
	white-space: nowrap;
}
.cta-desde__cifra {
	font-size: var(--t-precio);
	line-height: 1.1;
	color: var(--cta-rojo);
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-desde__moneda {
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--rojo-texto);
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
.cta-desde__nota {
	max-width: 260px;
	font-size: var(--t-nota);
	line-height: 1.45;
	color: var(--texto-3);
}
.cta-desde__dato {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--texto);
}
.cta-desde--por-confirmar .cta-desde__cifra {
	font-size: 17px;
	letter-spacing: 0;
	color: var(--texto);
	font-weight: var(--peso-subtitulo);
	line-height: 1.25;
}
.cta-desde--reserva .cta-desde__etiqueta {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
}
.cta-desde--reserva .cta-desde__cifra {
	font-size: 36px;
}
.cta-desde--reserva .cta-desde__nota {
	max-width: none;
	font-size: 13px;
}
/* Decisión 95 (14-oct-2026): en las tarjetas de los tours (listados, Inicio,
   búsqueda, tours relacionados y el recorrido recomendado de las entradas)
   el «Desde», la cifra y «MXN» van en el color del texto (#101820 en modo
   claro, blanco en modo oscuro), no en rojo: el rojo queda para botones y
   detalles. La ficha del tour ya no muestra «Desde» (decisiones 87, 88 y 91). */
.cta-desde--tarjeta .cta-desde__etiqueta,
.cta-desde--tarjeta .cta-desde__cifra,
.cta-desde--tarjeta .cta-desde__moneda,
.cta-desde--reserva .cta-desde__etiqueta,
.cta-desde--reserva .cta-desde__cifra,
.cta-desde--reserva .cta-desde__moneda {
	color: var(--texto);
}

/* ---------------------------------------------------------------------
   6. Tarjeta de entrada del blog
   --------------------------------------------------------------------- */
.cta-rejilla-entradas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--separacion);
}
@media (max-width: 767px) {
	.cta-rejilla-entradas {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}
.cta-tarjeta-entrada {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: var(--r-tarjeta);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-tarjeta-entrada:focus-within {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
.cta-tarjeta-entrada__foto {
	position: relative;
	height: 320px;
	overflow: hidden;
	background: #101820;
}
.cta-tarjeta-entrada__foto img,
.cta-tarjeta-entrada__foto .cta-imagen-vacia {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-tarjeta-entrada__foto .cta-etiqueta {
	position: absolute;
	top: 24px;
	left: 24px;
}
.cta-tarjeta-entrada__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 32px 36px 36px;
}
.cta-tarjeta-entrada__titulo {
	font-size: var(--t-h3);
	line-height: 1.2;
}
.cta-tarjeta-entrada__enlace {
	color: inherit;
	text-decoration: none;
}
.cta-tarjeta-entrada__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.cta-tarjeta-entrada__enlace:focus-visible {
	outline: none;
}
.cta-tarjeta-entrada__extracto {
	font-size: var(--t-chico);
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-tarjeta-entrada .cta-btn--enlace {
	margin-top: auto;
}
@media (max-width: 767px) {
	.cta-tarjeta-entrada__foto {
		height: 220px;
	}
	.cta-tarjeta-entrada__cuerpo {
		padding: 24px;
	}
}

/* ---------------------------------------------------------------------
   7. Listas
   --------------------------------------------------------------------- */
.cta-lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-lista--2col {
	columns: 2;
	column-gap: 32px;
}
@media (max-width: 767px) {
	.cta-lista--2col {
		columns: 1;
	}
}
.cta-lista--check li,
.cta-lista--x li {
	position: relative;
	margin: 0 0 16px;
	padding-left: 38px;
	break-inside: avoid;
	line-height: 1.55;
	color: var(--texto-2);
}
.cta-lista--check li::before,
.cta-lista--x li::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: var(--r-pildora);
	background: var(--check-fondo) center / 16px no-repeat var(--icono-check);
}
.cta-lista--x li::before {
	background: var(--x-fondo) center / 16px no-repeat var(--icono-x);
}
.cta-lista--roja li {
	position: relative;
	margin: 0 0 12px;
	padding-left: 18px;
	line-height: 1.55;
}
.cta-lista--roja li:last-child {
	margin-bottom: 0;
}
.cta-lista--roja li::before {
	content: "";
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
}
.cta-lista--chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cta-lista--chips li {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 6px 18px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--texto);
}
.cta-lista--pasos {
	display: grid;
	gap: 16px;
	counter-reset: cta-paso;
}
.cta-lista--pasos li {
	position: relative;
	min-height: 40px;
	padding: 8px 0 16px 60px;
	border-bottom: 1px solid var(--borde);
	counter-increment: cta-paso;
	line-height: 1.55;
}
.cta-lista--pasos li:last-child {
	border-bottom: 0;
}
.cta-lista--pasos li::before {
	content: counter(cta-paso);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1.5px solid var(--texto);
	border-radius: var(--r-pildora);
	font-weight: 700;
	font-size: 15px;
	color: var(--texto);
}
.cta-lista--numerada {
	padding-left: 24px;
	list-style: decimal;
}
.cta-lista--numerada li::marker {
	color: var(--rojo-texto);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   8. Tarjetas de información y paneles
   --------------------------------------------------------------------- */
.cta-rejilla-info {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: var(--e-7);
}
.cta-rejilla-info--1 {
	grid-template-columns: minmax(0, 1fr);
}
.cta-rejilla-info--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cta-seccion > .cta-contenedor > .cta-rejilla-info:first-child {
	margin-top: 0;
}
@media (max-width: 1023px) {
	.cta-rejilla-info,
	.cta-rejilla-info--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}
.cta-tarjeta-info {
	padding: 32px;
	border: 1px solid var(--borde);
	border-radius: var(--r-tarjeta);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	font-size: var(--t-chico);
	color: var(--texto-2);
}
.cta-tarjeta-info__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	font-size: 19px;
	line-height: 1.25;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
}
.cta-tarjeta-info__titulo .cta-icono {
	color: var(--rojo-texto);
}
.cta-tarjeta-info__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: var(--r-pildora);
	background: var(--check-fondo);
	color: var(--rojo-texto);
}
.cta-tarjeta-info--clase {
	border-radius: 24px 88px 24px 88px;
	padding: 36px 34px;
}
@media (max-width: 767px) {
	.cta-tarjeta-info {
		padding: 24px;
		border-radius: 24px;
	}
	.cta-tarjeta-info--clase {
		border-radius: 20px 64px 20px 64px;
	}
}
.cta-panel-info {
	margin-top: var(--e-7);
	padding: 32px 40px;
	border: 1px solid var(--borde);
	border-radius: 28px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-panel-info > * + * {
	margin-top: 12px;
}
.cta-panel-info__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
	gap: 12px;
	font-size: var(--t-h4);
	line-height: 1.25;
}
.cta-panel-info__titulo .cta-icono {
	color: var(--cta-rojo);
}
@media (max-width: 767px) {
	.cta-panel-info {
		padding: 24px;
	}
}
.cta-bloque {
	margin-top: var(--e-8);
}

/* ---------------------------------------------------------------------
   9. Tabla de precios
   --------------------------------------------------------------------- */
.cta-precios {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.cta-tabla-envoltura {
	overflow-x: auto;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	-webkit-overflow-scrolling: touch;
}
.cta-tabla {
	width: 100%;
	min-width: 480px;
	table-layout: fixed;
	font-size: 15px;
	color: var(--texto);
}
.cta-tabla .cta-tabla__esquina {
	width: 28%;
}
.cta-tabla caption.cta-tabla__titulo {
	padding: 22px 24px 4px;
	font-size: var(--t-antetitulo);
	letter-spacing: var(--espaciado-etiqueta);
	text-align: left;
	text-transform: uppercase;
	color: var(--titulo);
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
.cta-tabla th,
.cta-tabla td {
	padding: 16px 24px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--borde);
}
.cta-tabla thead th {
	vertical-align: bottom;
	font-size: var(--t-etiqueta);
	font-weight: var(--peso-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	text-transform: uppercase;
	color: var(--texto-2);
	border-bottom-color: var(--borde-fuerte);
	line-height: 1.2;
}
.cta-tabla__anio-num {
	display: block;
	font-size: 16px;
	color: var(--titulo);
	font-weight: 800;
	letter-spacing: 0;
}
.cta-tabla__vigencia {
	display: block;
	margin-top: 4px;
	font-family: var(--fuente-texto);
	font-size: 12px;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
	color: var(--texto-3);
}
.cta-tabla .es-vigente {
	background: color-mix(in srgb, var(--cta-rojo) 5%, transparent);
}
.cta-tabla__grupo th {
	padding-top: 22px;
	padding-bottom: 10px;
	background: var(--tarjeta-alt);
	font-size: 17px;
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
	color: var(--titulo);
	line-height: 1.25;
}
.cta-tabla__grupo th .cta-icono {
	display: inline-block;
	margin-right: 10px;
	vertical-align: -3px;
	color: var(--rojo-texto);
}
.cta-tabla tbody th[scope="row"] {
	font-weight: 600;
	color: var(--texto-2);
}
.cta-tabla tbody tr:last-child > * {
	border-bottom: 0;
}
.cta-tabla tbody:not(:last-child) tr:last-child > * {
	border-bottom: 1px solid var(--borde);
}
.cta-precio {
	font-size: 22px;
	line-height: 1.1;
	color: var(--texto);
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-precio__moneda {
	margin-left: 4px;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--rojo-texto);
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
@media (max-width: 767px) {
	.cta-tabla {
		min-width: 0;
		font-size: 14px;
	}
	.cta-tabla th,
	.cta-tabla td {
		padding: 12px 14px;
	}
	.cta-precio {
		font-size: 18px;
	}
	.cta-precio__moneda {
		font-size: 11px;
	}
	.cta-tabla__anio-num {
		font-size: 15px;
	}
	.cta-tabla__vigencia {
		font-size: 11px;
	}
	.cta-tabla__grupo th {
		font-size: 16px;
	}
}
.cta-nota--aviso {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--texto-2);
}
.cta-precios-libres {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 24px;
}
.cta-precios-libres__bloque {
	padding: 28px 32px;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-precios-libres__titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 17px;
	letter-spacing: var(--espaciado-subtitulo);
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	line-height: 1.2;
}
.cta-precios-libres__titulo .cta-icono {
	color: var(--cta-rojo);
}
.cta-precios-libres__lista {
	margin: 0 0 12px;
}
.cta-precios-libres__fila {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--borde);
}
.cta-precios-libres__fila dt {
	font-weight: 600;
	color: var(--texto-2);
}
.cta-precios-libres__fila dd {
	margin: 0;
	font-weight: 700;
	text-align: right;
	color: var(--texto);
}
.cta-precios-libres__bloque .cta-nota {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------
   10. Acordeón del itinerario
   --------------------------------------------------------------------- */
.cta-itinerario {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta-dia {
	border: 1px solid var(--borde);
	border-radius: 28px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-dia__resumen {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) 44px;
	align-items: center;
	gap: 16px;
	padding: 24px 28px;
	list-style: none;
	cursor: pointer;
	border-radius: 28px;
}
.cta-dia__resumen::-webkit-details-marker {
	display: none;
}
.cta-dia__num {
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--rojo-texto);
	font-weight: var(--peso-etiqueta);
}
.cta-dia__titulo {
	font-size: var(--t-h4);
	line-height: 1.25;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
}
.cta-dia__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	color: var(--texto);
	transition: background-color 0.18s ease;
}
.cta-dia__resumen:hover .cta-dia__icono {
	background-color: rgba(127, 127, 127, 0.14);
}
.cta-dia__menos,
.cta-dia[open] .cta-dia__mas {
	display: none;
}
.cta-dia[open] .cta-dia__menos {
	display: block;
}
.cta-dia__cuerpo {
	padding: 0 28px 28px 128px;
	font-size: var(--t-chico);
	line-height: 1.7;
	color: var(--texto-2);
}
.cta-dia__cuerpo p + p {
	margin-top: 10px;
}
.cta-dia__hora {
	color: var(--texto);
}
@media (max-width: 767px) {
	.cta-dia,
	.cta-dia__resumen {
		border-radius: 20px;
	}
	.cta-dia__resumen {
		grid-template-columns: minmax(0, 1fr) 44px;
		gap: 6px 12px;
		padding: 18px 18px 18px 20px;
	}
	.cta-dia__num {
		grid-column: 1;
	}
	.cta-dia__titulo {
		grid-column: 1;
		grid-row: 2;
	}
	.cta-dia__icono {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	.cta-dia__cuerpo {
		padding: 0 20px 22px;
	}
}

/* ---------------------------------------------------------------------
   11. Visor de fotos (lightbox)
   Lo abren las fotos de cada día y las tarjetas de hoteles y clases. La
   galería del tour (mosaico hasta la decisión 111, carrusel hasta la 113)
   ya no existe.
   --------------------------------------------------------------------- */
.cta-lightbox {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: rgba(11, 17, 23, 0.96);
	color: #fff;
}
.cta-lightbox::backdrop {
	background: rgba(11, 17, 23, 0.96);
}
.cta-lightbox[open] {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) 72px;
	grid-template-rows: 72px minmax(0, 1fr) 56px;
	align-items: center;
	justify-items: center;
}
.cta-lightbox__figura {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}
.cta-lightbox__figura img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 12px;
}
.cta-lightbox .cta-icono-btn {
	--borde-fuerte: rgba(255, 255, 255, 0.5);
	color: #fff;
	width: 52px;
	height: 52px;
}
.cta-lightbox__cerrar {
	grid-column: 3;
	grid-row: 1;
}
.cta-lightbox__anterior {
	grid-column: 1;
	grid-row: 2;
}
.cta-lightbox__siguiente {
	grid-column: 3;
	grid-row: 2;
}
.cta-lightbox__contador {
	grid-column: 1 / -1;
	grid-row: 3;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: #e5e1e6;
	font-weight: 600;
}
@media (max-width: 767px) {
	.cta-lightbox[open] {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 64px minmax(0, 1fr) 72px;
	}
	.cta-lightbox__figura {
		grid-column: 1 / -1;
		padding: 0 8px;
	}
	.cta-lightbox__cerrar {
		grid-column: 2;
		justify-self: end;
		margin-right: 12px;
	}
	.cta-lightbox__anterior,
	.cta-lightbox__siguiente {
		grid-row: 3;
	}
	.cta-lightbox__anterior {
		grid-column: 1;
	}
	.cta-lightbox__siguiente {
		grid-column: 2;
	}
	.cta-lightbox__contador {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		margin-left: 16px;
	}
}
/* Visor: letrero de la foto (el nombre de la clase en sus tarjetas;
   lo escribe tema.js, así que vale en todas las páginas con visor, también
   El Chepe, que no carga tour.css). */
.cta-lightbox__lugar {
	grid-column: 2;
	grid-row: 1;
	max-width: 100%;
	margin: 0;
	overflow: hidden;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #fff;
}
@media (max-width: 767px) {
	.cta-lightbox__lugar {
		grid-column: 1 / -1;
		grid-row: 3;
		max-width: calc(100% - 152px);
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
	}
	.cta-lightbox__lugar[hidden] {
		display: none;
	}
	.cta-lightbox:has(.cta-lightbox__lugar:not([hidden])) .cta-lightbox__anterior {
		justify-self: start;
		margin-left: 12px;
	}
	.cta-lightbox:has(.cta-lightbox__lugar:not([hidden])) .cta-lightbox__siguiente {
		justify-self: end;
		margin-right: 12px;
	}
}

/* ---------------------------------------------------------------------
   12. Formularios
   --------------------------------------------------------------------- */
.cta-campo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	min-width: 0;
}
.cta-campo__etiqueta {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--texto-2);
}
.cta-campo__control {
	width: 100%;
	min-height: 56px;
	padding: 0 18px;
	border: 1.5px solid var(--input-borde);
	border-radius: var(--r-campo);
	background: var(--input-bg);
	color: var(--texto);
	font-size: 15px;
	line-height: 1.3;
	appearance: none;
	-webkit-appearance: none;
}
textarea.cta-campo__control {
	min-height: 112px;
	padding: 16px 18px;
	resize: vertical;
}
.cta-campo__control:user-invalid {
	border-color: var(--rojo-texto);
}
.cta-campo__select {
	position: relative;
	display: block;
}
.cta-campo__select .cta-campo__control {
	padding-right: 48px;
}
.cta-campo__select .cta-icono {
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--texto-2);
}
.cta-cotizar {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta-cotizar__campos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
.cta-campo--ancho {
	grid-column: 1 / -1;
}
.cta-cotizar .cta-nota {
	text-align: center;
}
.cta-formulario {
	max-width: 720px;
}

/* Buscador */
.cta-buscador {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 640px;
}
.cta-buscador__campo {
	width: 100%;
	min-height: 56px;
	padding: 0 64px 0 24px;
	border: 1.5px solid var(--input-borde);
	border-radius: var(--r-pildora);
	background: var(--input-bg);
	color: var(--texto);
	font-size: 16px;
	appearance: none;
	-webkit-appearance: none;
}
.cta-buscador__boton {
	position: absolute;
	right: 4px;
	border: 0;
	color: var(--texto);
}

/* ---------------------------------------------------------------------
   13. Patrón de corazones (contorno, se desvanece hacia la izquierda)
   --------------------------------------------------------------------- */
.cta-patron-corazones {
	position: relative;
	isolation: isolate;
}
.cta-patron-corazones::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	border-radius: inherit;
	background-color: var(--patron);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 100%), var(--corazones-mascara);
	mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 100%), var(--corazones-mascara);
	-webkit-mask-size: 100% 100%, 64px 128px;
	mask-size: 100% 100%, 64px 128px;
	-webkit-mask-repeat: no-repeat, repeat;
	mask-repeat: no-repeat, repeat;
	-webkit-mask-position: 0 0, right top;
	mask-position: 0 0, right top;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

/* ---------------------------------------------------------------------
   14. Encabezado
   --------------------------------------------------------------------- */
.cta-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	color: var(--header-texto);
	transition: background-color 0.2s ease;
}
.admin-bar .cta-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .cta-header {
		top: 46px;
	}
}
/* Con sesión iniciada en el celular (600 px o menos) WordPress pone su barra
   en position: absolute y se va al bajar; el encabezado, las anclas y el
   scroll-padding siguen 46 px más abajo y por la franja se veía pasar el
   contenido. En el sitio la barra se queda fija, así esas compensaciones
   siguen siendo ciertas. */
@media (max-width: 600px) {
	body.admin-bar #wpadminbar {
		position: fixed;
	}
}
.cta-sin-portada .cta-main {
	padding-top: var(--alto-header);
}
/* Barra superior de contacto: solo en computadora (≥ 1280 px, el mismo corte
   en que aparece el menú de escritorio). En celular y tableta no se muestra
   (pedido de Arturo, 1-oct-2026); esos datos están en el menú lateral. */
.cta-topbar {
	display: none;
}
.cta-barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--alto-barra);
	padding-inline: var(--margen);
	background-color: var(--header-bg);
	box-shadow: inset 0 -1px 0 var(--borde);
	transition: height 0.2s ease, background-color 0.2s ease;
}
.cta-logo {
	display: inline-flex;
	flex: none;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}
.cta-logo__img {
	width: calc(40px * 1.633);
	height: 40px;
	object-fit: contain;
}
.cta-logo__img--claro {
	display: var(--ver-claro);
}
.cta-logo__img--oscuro {
	display: var(--ver-oscuro);
}
.cta-nav {
	display: none;
}
.cta-acciones {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cta-acciones .cta-icono-btn[data-cta-abrir="cta-busqueda"] {
	order: 1;
}
.cta-acciones .cta-tema {
	order: 2;
}
.cta-acciones__reservar {
	order: 3;
	display: none;
}
.cta-menu-boton {
	order: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pildora);
	background: var(--texto);
	color: var(--fondo);
}
.cta-menu-boton:hover {
	background: var(--rojo-texto);
	color: #fff;
}
@media (min-width: 768px) {
	.cta-acciones {
		gap: 12px;
	}
	.cta-acciones__reservar {
		display: inline-flex;
	}
	.cta-logo__img {
		width: calc(48px * 1.633);
		height: 48px;
	}
}
@media (min-width: 1280px) {
	.cta-topbar {
		display: block;
		height: var(--alto-barra-superior);
		background-color: var(--header-barra);
		border-bottom: 1px solid var(--borde);
		font-size: 13px;
		color: var(--texto-2);
	}
	.cta-topbar__interior {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 24px;
		height: 100%;
		padding-inline: clamp(40px, 4.2vw, 60px);
	}
	.cta-topbar__dato,
	.cta-topbar__contacto a {
		display: flex;
		align-items: center;
		gap: 10px;
		white-space: nowrap;
	}
	.cta-topbar__contacto {
		display: flex;
		align-items: center;
		gap: 26px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.cta-topbar__contacto a {
		gap: 8px;
		color: var(--texto-2);
		text-decoration: none;
	}
	.cta-topbar__contacto a:hover {
		color: var(--texto);
	}
	.cta-topbar__contacto .cta-topbar__tel {
		color: var(--texto-3);
	}
	.cta-barra {
		padding-inline: clamp(40px, 4.2vw, 60px);
	}
	.cta-logo__img {
		width: calc(55px * 1.633);
		height: 55px;
	}
	.cta-nav {
		display: block;
	}
	.cta-menu-boton {
		display: none;
	}
	.cta-acciones .cta-tema {
		order: 1;
	}
	.cta-acciones .cta-icono-btn[data-cta-abrir="cta-busqueda"] {
		order: 2;
	}
	.cta-acciones__reservar {
		min-height: 48px;
		padding: 0 24px;
	}
}

/* Menú principal (escritorio) */
.cta-nav__lista {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-nav__lista > li {
	position: relative;
}
.cta-nav__lista > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 44px;
	font-size: var(--t-menu);
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--header-texto);
	text-decoration: none;
	white-space: nowrap;
	font-weight: 600;
}
.cta-nav__lista > li > a:hover,
.cta-nav__lista > li:focus-within > a {
	color: var(--rojo-texto);
}
.cta-nav__chevron {
	color: var(--texto-2);
	transition: transform 0.18s ease;
}
.cta-nav__lista > li:hover .cta-nav__chevron,
.cta-nav__lista > li:focus-within .cta-nav__chevron {
	transform: rotate(180deg);
}
.cta-nav__lista > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 10px;
	height: 9px;
	margin-left: -5px;
	background: var(--cta-rojo);
	-webkit-mask: var(--corazon) center / contain no-repeat;
	mask: var(--corazon) center / contain no-repeat;
	opacity: 0;
}
.cta-nav__lista > li:is(.current-menu-item, .current-menu-ancestor, .current-menu-parent, .current_page_parent, .current_page_ancestor) > a::after {
	opacity: 1;
}
.cta-nav__lista .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 10;
	min-width: 260px;
	margin: 8px 0 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--borde);
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.cta-nav__lista .sub-menu::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -10px;
	height: 10px;
}
.cta-nav__lista > li:hover > .sub-menu,
.cta-nav__lista > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}
.cta-nav__lista .sub-menu a {
	display: block;
	padding: 12px 18px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--texto-2);
	text-decoration: none;
}
.cta-nav__lista .sub-menu a:hover,
.cta-nav__lista .sub-menu a:focus-visible,
.cta-nav__lista .sub-menu .current-menu-item > a {
	background: var(--tarjeta-alt);
	color: var(--texto);
}
@media (min-width: 1440px) {
	.cta-nav__lista {
		gap: 26px;
	}
	.cta-nav__lista > li > a {
		font-size: 15.5px;
	}
}

/* Encabezado sobre la foto de portada (modo oscuro, arriba de todo) */
html.tema-oscuro .cta-con-portada .cta-header:not(.es-compacto) {
	background-image: linear-gradient(180deg, rgba(16, 24, 32, 0.9) 0%, rgba(16, 24, 32, 0) 100%);
}
html.tema-oscuro .cta-con-portada .cta-header:not(.es-compacto) .cta-barra {
	background-color: transparent;
	box-shadow: none;
}
html.tema-oscuro .cta-con-portada .cta-header:not(.es-compacto) .cta-topbar {
	background-color: rgba(10, 16, 22, 0.92);
	border-bottom-color: rgba(229, 225, 230, 0.16);
}
html.tema-oscuro .cta-con-portada .cta-header:not(.es-compacto) .cta-icono-btn {
	border-color: rgba(255, 255, 255, 0.5);
}

/* Al bajar: sin barra superior, barra de 76 px y línea inferior */
.cta-header.es-compacto {
	--alto-barra-superior: 0px;
	--alto-barra: 76px;
	box-shadow: 0 1px 0 var(--borde), 0 8px 24px rgba(16, 24, 32, 0.06);
}
.cta-header.es-compacto .cta-topbar {
	display: none;
}
@media (min-width: 1280px) {
	.cta-header.es-compacto .cta-logo__img {
		width: calc(48px * 1.633);
		height: 48px;
	}
}

/* ---------------------------------------------------------------------
   15. Menú lateral y buscador (<dialog>)
   --------------------------------------------------------------------- */
.cta-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(100vw, 420px);
	height: 100dvh;
	max-height: 100dvh;
	margin: 0 0 0 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--fondo-hondo);
	color: var(--texto);
	box-shadow: -12px 0 40px rgba(0, 0, 0, 0.25);
}
.cta-panel::backdrop {
	background: rgba(16, 24, 32, 0.7);
}
@media (prefers-reduced-motion: no-preference) {
	.cta-panel[open] {
		animation: cta-entrar-derecha 0.25s ease;
	}
	.cta-busqueda[open] {
		animation: cta-aparecer 0.2s ease;
	}
}
@keyframes cta-entrar-derecha {
	from {
		transform: translateX(40px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
@keyframes cta-aparecer {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.cta-panel__interior {
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-height: 100%;
	padding: 14px 20px 32px;
}
.cta-panel__cabeza {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
}
.cta-panel .cta-icono-btn {
	color: var(--texto);
}
.cta-panel__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--borde);
}
.cta-panel__lista > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	border-bottom: 1px solid var(--borde);
}
.cta-panel__lista > li > a {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	font-size: 18px;
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.25;
	color: var(--titulo);
	text-decoration: none;
	font-weight: var(--peso-subtitulo);
}
.cta-panel__lista > li:is(.current-menu-item, .current-menu-ancestor, .current_page_parent) > a {
	color: var(--rojo-texto);
}
.cta-submenu-boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pildora);
	background: transparent;
	color: var(--texto);
}
.cta-submenu-boton[aria-expanded="true"] .cta-icono {
	transform: rotate(180deg);
}
.cta-panel__lista .sub-menu {
	display: none;
	flex-basis: 100%;
	margin: 0 0 12px;
	padding: 0 0 0 12px;
	list-style: none;
	border-left: 2px solid var(--cta-rojo);
}
.cta-panel__lista li.esta-abierto > .sub-menu {
	display: block;
}
.cta-panel__lista .sub-menu a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--texto-2);
	text-decoration: none;
}
.cta-panel__contacto {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--texto-2);
}
.cta-panel__contacto a,
.cta-panel__contacto li > span {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	color: var(--texto-2);
	text-decoration: none;
}
.cta-panel__contacto .cta-icono {
	color: var(--cta-rojo);
}
.cta-panel__contacto .cta-panel__tel,
.cta-panel__contacto .cta-panel__tel .cta-icono {
	color: var(--texto-3);
	font-size: 14px;
}
.cta-busqueda {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: rgba(16, 24, 32, 0.97);
	color: #fff;
}
.cta-busqueda[open] {
	display: flex;
	align-items: center;
}
.cta-busqueda::backdrop {
	background: rgba(16, 24, 32, 0.6);
}
.cta-busqueda__cerrar {
	position: absolute;
	top: 20px;
	right: 20px;
	color: #fff;
}
.cta-busqueda .cta-buscador {
	max-width: 900px;
	margin-inline: auto;
}
.cta-busqueda .cta-buscador__campo {
	min-height: 88px;
	padding: 0 88px 0 0;
	border: 0;
	border-bottom: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: clamp(24px, 3.4vw, 36px);
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cta-busqueda .cta-buscador__campo:focus-visible {
	border-bottom-color: #fff;
	box-shadow: none;
}
.cta-busqueda .cta-buscador__boton {
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
}
html:has(dialog[open]) {
	overflow: hidden;
}

/* ---------------------------------------------------------------------
   16. Redes sociales
   --------------------------------------------------------------------- */
.cta-redes {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-redes__enlace {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid var(--borde-fuerte);
	border: 1.5px solid color-mix(in srgb, var(--texto) 28%, transparent);
	border-radius: var(--r-pildora);
	color: var(--texto);
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}
.cta-redes__enlace:hover {
	background: var(--texto);
	color: var(--fondo);
}

/* ---------------------------------------------------------------------
   17. Pie de página (negro de marca en los dos modos)
   --------------------------------------------------------------------- */
.cta-pie {
	position: relative;
	overflow: hidden;
	padding-top: 56px;
	border-top: 1px solid var(--pie-borde);
	background-color: var(--pie-bg);
	color: var(--pie-texto-2);
	--pie-suave: color-mix(in srgb, var(--pie-texto) 62%, var(--pie-texto-2));
}
.cta-pie__columnas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px;
}
.cta-pie__marca {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.cta-pie .cta-logo {
	align-self: flex-start;
}
.cta-logo--pie .cta-logo__img {
	width: calc(63px * 1.633);
	height: 63px;
}
.cta-pie__bienvenida {
	max-width: 340px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--pie-suave);
}
.cta-pie__titulo {
	margin: 0 0 16px;
	font-size: var(--t-antetitulo);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	color: var(--pie-texto);
	font-weight: var(--peso-etiqueta);
	text-transform: uppercase;
}
.cta-pie__datos {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-pie__datos a,
.cta-pie__dato {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-height: 44px;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--pie-suave);
	text-decoration: none;
}
.cta-pie__datos a:hover {
	color: var(--pie-texto);
}
.cta-pie__datos .cta-icono {
	margin-top: 1px;
	color: var(--cta-rojo);
}
/* Contacto: el ícono y el dato en un renglón (decisión 109, hoja 9: sin
   «Correo:», «WhatsApp» ni «Reservaciones» a la vista), centrados en su
   alto de toque de 44 px. */
.cta-pie__datos--contacto a {
	align-items: center;
}
.cta-pie__datos--contacto .cta-icono {
	flex: none;
	margin-top: 0;
}
.cta-pie__tel a,
.cta-pie__tel .cta-icono {
	font-size: 13.5px;
	color: var(--pie-texto-2);
}
.cta-pie__paginas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-pie__paginas a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 15px;
	letter-spacing: 0;
	line-height: 1.2;
	color: var(--pie-suave);
	text-decoration: none;
	/* Bajo 1280 px cada enlace parte su renglón si no cabe: con Montserrat
	   600 (decisión 99) «PREGUNTAS FRECUENTES» mide unos 205 px y en su
	   columna de 132–176 px (320 a 767 px) o de 154 px (768 px) el pie la
	   cortaba («PREGUNTAS FRECUENT»; a 320 px también «OTROS DESTINOS»).
	   Desde 1280 px van sin partir (la columna toma su ancho, abajo). */
	white-space: normal;
	font-weight: 600;
}
.cta-pie__paginas a:hover {
	color: var(--rojo-texto);
}
.cta-pie__redes {
	margin-top: 32px;
}
.cta-pie .cta-redes__enlace {
	width: 52px;
	height: 52px;
	border-color: color-mix(in srgb, var(--pie-texto) 28%, transparent);
	color: var(--pie-texto);
}
/* Letrero de contorno «CHIHUAHUA TE AMO» (decorativo, aria-hidden; desde
   768 px). Decisión 102 (16-oct-2026): vuelve a Bebas Neue en mayúsculas,
   con el tamaño, el renglón y el espaciado de antes de la decisión 99 (que
   lo había pasado a Montserrat 800 de clamp(48px, 8.6vw, 128px)). Es una de
   las excepciones a «todo en Montserrat» (la otra es el titular de la
   portada de todas las páginas, en Anton, §25); su token --fuente-letrero
   solo lo usa, además, el renglón chico de la portada de la Tiendita, que
   ya era Bebas Neue (pagina-tiendita.css).
   Bebas Neue tiene un solo peso (400). El pie corta lo que se pase
   (overflow: hidden): a 1440 px el letrero mide unos 1150 px. */
.cta-pie__gigante {
	margin: 32px 0 0;
	font-family: var(--fuente-letrero);
	font-size: clamp(48px, 13.4vw, 196px);
	font-weight: 400;
	line-height: 0.8;
	letter-spacing: 0.01em;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1.2px color-mix(in srgb, var(--pie-texto) 12%, transparent);
	user-select: none;
}
.cta-pie__barra {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 24px;
	padding: 18px 0 50px;
	border-top: 1px solid var(--cta-rojo);
	font-size: 14px;
	color: var(--pie-texto-2);
}
.cta-pie__copy {
	order: 3;
	padding-top: 8px;
}
/* Registro Nacional de Turismo (decisión 101): debajo de los derechos; en
   computadora, en su propio renglón bajo la barra. */
.cta-pie__rnt {
	order: 4;
	margin: 0;
}
.cta-pie__legal {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Enlaces legales en oración, como las páginas del pie (decisión 104). */
.cta-pie__legal a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pie-suave);
	text-decoration: none;
}
.cta-pie__legal a:hover {
	color: var(--pie-texto);
}
@media (min-width: 768px) {
	.cta-pie {
		padding-top: 72px;
	}
	.cta-pie__columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}
	.cta-pie__barra {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 24px;
		padding: 22px 0 34px;
		font-size: 13px;
	}
	.cta-pie__copy {
		order: 0;
		padding-top: 0;
		margin-top: 0;
	}
	.cta-pie__rnt {
		order: 5;
		flex-basis: 100%;
	}
	.cta-pie__legal {
		flex-direction: row;
		gap: 28px;
	}
	.cta-pie__gigante {
		margin-top: 56px;
		text-align: center;
		-webkit-text-stroke-width: 1.5px;
		-webkit-text-stroke-color: color-mix(in srgb, var(--pie-texto) 10%, transparent);
	}
}
@media (min-width: 1280px) {
	.cta-pie {
		padding-top: 96px;
	}
	.cta-pie__columnas {
		/* La columna de páginas toma su ancho (dos columnas de enlaces sin
		   partir); las demás se reparten el resto sin apretar «Visítanos». */
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 0.9fr) auto;
		gap: 40px;
	}
	.cta-pie__marca {
		gap: 28px;
	}
	.cta-logo--pie .cta-logo__img {
		width: calc(82px * 1.633);
		height: 82px;
	}
	.cta-pie__bienvenida {
		font-size: 16px;
		line-height: 1.65;
	}
	.cta-pie__titulo {
		margin-bottom: 22px;
		font-size: var(--t-antetitulo);
	}
	.cta-pie__datos {
		gap: 16px;
	}
	.cta-pie__datos a,
	.cta-pie__dato {
		min-height: 0;
		font-size: 15px;
	}
	.cta-pie__tel a {
		font-size: 14px;
	}
	.cta-pie__paginas {
		display: block;
		columns: 2;
		column-gap: 28px;
	}
	.cta-pie__paginas a {
		min-height: 0;
		padding: 7px 0;
		font-size: 15px;
		white-space: nowrap;
	}
	.cta-pie__redes {
		margin-top: 30px;
	}
	.cta-pie .cta-redes__enlace {
		width: 48px;
		height: 48px;
	}
}

/* ---------------------------------------------------------------------
   18. Portadas con foto (zona siempre oscura)
   --------------------------------------------------------------------- */
.cta-portada {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 640px;
	padding-top: calc(var(--alto-header) + 48px);
	padding-bottom: 56px;
	overflow: hidden;
	background-color: #101820;
	color: #fff;
}
.cta-portada--g {
	min-height: 790px;
}
.cta-portada--m {
	min-height: 560px;
}
.cta-portada__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.cta-portada__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
}
.cta-portada__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, rgba(16, 24, 32, 0.85) 0%, rgba(16, 24, 32, 0.35) 30%, rgba(16, 24, 32, 0.75) 60%, #101820 100%);
}
.cta-portada__contenido {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
}
.cta-portada__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.cta-portada__titulo {
	color: #fff;
	font-size: var(--t-h1);
	line-height: 1.08;
	overflow-wrap: anywhere;
}
.cta-portada__titulo-principal {
	display: block;
}
.cta-portada--tour .cta-portada__titulo {
	font-size: var(--t-h1-tour);
}
.cta-portada__subtitulo {
	display: block;
	margin-top: 10px;
	font-size: 0.5em;
	line-height: 1.2;
	color: #e5e1e6;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cta-portada__texto {
	max-width: 620px;
	font-size: var(--t-lead);
	line-height: 1.55;
	color: #fff;
}
.cta-portada__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: #e5e1e6;
}
.cta-portada__meta li {
	display: flex;
	align-items: center;
	gap: 10px;
}
.cta-portada__meta li:first-child {
	font-weight: 600;
	color: #fff;
}
.cta-portada__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 6px;
}
.cta-portada .cta-btn--contorno {
	border-color: rgba(255, 255, 255, 0.72);
	color: #fff;
}
.cta-portada .cta-btn--contorno:hover {
	background: #fff;
	border-color: #fff;
	color: #101820;
}
@media (max-width: 767px) {
	.cta-portada__botones {
		flex-direction: column;
		align-self: stretch;
		gap: 12px;
	}
	.cta-portada__botones .cta-btn {
		width: 100%;
	}
}
@media (min-width: 768px) {
	.cta-portada {
		padding-bottom: 72px;
	}
	.cta-portada--izq .cta-portada__velo {
		background-image:
			linear-gradient(0deg, #101820 0%, rgba(16, 24, 32, 0.85) 15%, rgba(16, 24, 32, 0) 34%),
			linear-gradient(90deg, rgba(16, 24, 32, 0.96) 0%, rgba(16, 24, 32, 0.84) 42%, rgba(16, 24, 32, 0.35) 72%, rgba(16, 24, 32, 0.2) 100%);
	}
	.cta-portada--der .cta-portada__velo {
		background-image:
			linear-gradient(180deg, rgba(16, 24, 32, 0.9) 0%, rgba(16, 24, 32, 0) 25%),
			linear-gradient(0deg, #101820 0%, rgba(16, 24, 32, 0) 20%),
			linear-gradient(270deg, rgba(16, 24, 32, 0.95) 0%, rgba(16, 24, 32, 0.86) 36%, rgba(16, 24, 32, 0.3) 62%, rgba(16, 24, 32, 0) 80%);
	}
	.cta-portada--g {
		min-height: 860px;
	}
	.cta-portada--m {
		min-height: 600px;
	}
	.cta-portada__contenido {
		gap: 24px;
	}
}
@media (min-width: 1280px) {
	.cta-portada--g {
		min-height: 940px;
	}
	.cta-portada--m {
		min-height: 640px;
	}
	.cta-portada--der .cta-portada__contenido {
		align-items: flex-start;
		padding-left: calc(50% - 20px);
	}
	.cta-portada__subtitulo {
		font-size: 0.49em;
	}
}

/* ---------------------------------------------------------------------
   19. Banda roja de contacto
   --------------------------------------------------------------------- */
.cta-banda-roja {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
	margin-top: var(--e-8);
	padding: 28px 36px;
	overflow: hidden;
	border-radius: var(--r-tarjeta);
	background-color: var(--cta-rojo);
	color: #fff;
}
.cta-banda-roja::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: rgba(255, 255, 255, 0.4);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, #000 100%), var(--corazones-mascara);
	mask-image: linear-gradient(90deg, transparent 0%, transparent 45%, #000 100%), var(--corazones-mascara);
	-webkit-mask-size: 100% 100%, 64px 128px;
	mask-size: 100% 100%, 64px 128px;
	-webkit-mask-repeat: no-repeat, repeat;
	mask-repeat: no-repeat, repeat;
	-webkit-mask-position: 0 0, right top;
	mask-position: 0 0, right top;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.cta-banda-roja__texto {
	display: flex;
	align-items: center;
	gap: 16px;
}
.cta-banda-roja .cta-corazon {
	color: #fff;
}
.cta-banda-roja__titulo {
	font-size: clamp(19px, 1.9vw, 24px);
	line-height: 1.2;
	color: #fff;
	font-weight: var(--peso-titulo);
	letter-spacing: var(--espaciado-subtitulo);
}
.cta-banda-roja__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
}
@media (max-width: 767px) {
	.cta-banda-roja {
		padding: 24px;
	}
}

/* ---------------------------------------------------------------------
   20. Botón flotante de WhatsApp y barra de reserva (solo celular)
   --------------------------------------------------------------------- */
.cta-flotante {
	position: fixed;
	right: 16px;
	bottom: calc(24px + env(safe-area-inset-bottom));
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	border-radius: var(--r-pildora);
	background: var(--verde-whatsapp); /* decisión 47 */
	color: var(--sobre-verde);
	box-shadow: 0 12px 32px rgba(16, 24, 32, 0.28);
	text-decoration: none;
}
.cta-flotante:hover {
	background: var(--verde-whatsapp-hover);
	color: var(--sobre-verde);
}
/* Foco: el botón flota sobre cualquier fondo (pie negro, fotos oscuras,
   secciones claras). El anillo del color del texto no se veía en modo claro
   sobre el pie ni sobre las fotos (1:1): anillo doble, blanco por dentro y
   negro de marca por fuera, que se ve sobre claro y sobre oscuro en los dos
   modos (revisión del 1-oct-2026). */
.cta-flotante:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--cta-noche, #101820), 0 12px 32px rgba(16, 24, 32, 0.28);
}
.cta-barra-reserva {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--borde);
	background: var(--fondo-hondo);
	box-shadow: 0 -8px 24px rgba(16, 24, 32, 0.12);
}
/* Sin precio en la barra (decisión 91, 14-oct-2026): solo «Cotizar» y
   «Reservar por WhatsApp» (tour.css §15); ya no hay título ni nota. */
@media (min-width: 768px) {
	.cta-flotante,
	.cta-barra-reserva {
		display: none;
	}
}
/* WhatsApp global (decisión 61, BOTONES.md §2): «Reservar» del encabezado y
   el botón flotante ([data-cta-wa-global]) se esconden mientras otro botón
   de WhatsApp de la página está a la vista (tema.js pone .cta-wa-local en
   <html>). visibility + opacity: el encabezado no se mueve y lo escondido
   no recibe el foco ni lo leen los lectores de pantalla. */
[data-cta-wa-global] {
	transition: opacity 0.2s ease, visibility 0s linear 0s;
}
html.cta-wa-local [data-cta-wa-global] {
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
@media (prefers-reduced-motion: reduce) {
	[data-cta-wa-global],
	html.cta-wa-local [data-cta-wa-global] {
		transition: none;
	}
}

/* ---------------------------------------------------------------------
   21. Contenido de páginas generado por el importador
   --------------------------------------------------------------------- */
.cta-contenido-pagina {
	padding-block: var(--seccion-y);
}
.cta-contenido-pagina > .cta-seccion {
	padding-block: var(--e-8);
	background: none;
	border-top: 1px solid var(--borde);
}
.cta-contenido-pagina > .cta-seccion:first-child {
	padding-top: 0;
	border-top: 0;
}
.cta-contenido-pagina > .cta-seccion:last-child {
	padding-bottom: 0;
}
.cta-contenido-pagina .cta-seccion > h2 {
	margin-bottom: var(--e-5);
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.12;
}
.cta-contenido-pagina .cta-seccion > p {
	max-width: 760px;
}
.cta-contenido-pagina .cta-seccion > * + * {
	margin-top: 16px;
}
.cta-contenido-pagina .cta-rejilla-tours {
	margin-top: var(--e-6);
}
.cta-subtitulo,
.cta-antetitulo-texto {
	font-size: var(--t-h5);
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.3;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
}
.cta-antetitulo-texto {
	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-acciones-lista {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-accion {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border: 1.5px solid color-mix(in srgb, var(--texto) 72%, transparent);
	border-radius: var(--r-pildora);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--texto);
	text-decoration: none !important;
}
.cta-accion:hover {
	background: var(--texto);
	border-color: var(--texto);
	color: var(--fondo) !important;
}
.cta-accion--whatsapp {
	background: var(--verde-whatsapp); /* decisión 47 */
	border-color: var(--verde-whatsapp);
	color: var(--sobre-verde) !important;
}
.cta-accion--whatsapp:hover {
	background: var(--verde-whatsapp-hover);
	border-color: var(--verde-whatsapp-hover);
	color: var(--sobre-verde) !important;
}
.cta-accion--telefono,
.cta-accion--mapa,
.cta-accion--correo {
	padding: 0;
	border: 0;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--texto-2) !important;
}
.cta-accion--telefono:hover,
.cta-accion--mapa:hover,
.cta-accion--correo:hover {
	background: none;
	color: var(--texto) !important;
}
.cta-lista-enlaces {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--borde);
}
.cta-lista-enlaces li {
	margin: 0 !important;
	border-bottom: 1px solid var(--borde);
}
.cta-lista-enlaces a {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	padding: 16px 0;
	font-weight: 600;
	color: var(--texto) !important;
	text-decoration: none !important;
}
.cta-lista-enlaces strong {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cta-lista-enlaces span {
	font-weight: 400;
	color: var(--texto-2);
}
.cta-fichas {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
}
.cta-ficha {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 36px 34px;
	border: 1px solid var(--borde);
	border-radius: 24px 88px 24px 88px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	font-size: var(--t-chico);
}
.cta-ficha h3 {
	font-size: 19px;
}
.cta-ficha__lugar {
	order: -1;
	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;
}
.cta-ficha__estado {
	font-weight: 700;
	color: var(--rojo-texto);
}
.cta-ficha__amenidades {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-ficha__amenidades li {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	margin: 0 !important;
	padding: 0 12px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	font-size: 12px;
	font-weight: 600;
	color: var(--chip-texto);
}
.cta-ficha .cta-accion {
	margin-top: 8px;
}
.cta-mosaicos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 16px;
}
.cta-mosaico {
	margin: 0;
	overflow: hidden;
	border-radius: 20px;
	background: var(--tarjeta-alt);
}
.cta-mosaico img {
	width: 100%;
	aspect-ratio: 3 / 2;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover;
}
.cta-mosaico figcaption {
	padding: 12px 16px;
	font-size: 14px;
	letter-spacing: 0;
	color: var(--titulo);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   22. Paginación y compartir
   --------------------------------------------------------------------- */
.cta-paginacion {
	margin-top: var(--e-8);
}
.cta-paginacion .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.cta-paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 48px;
	padding: 0 12px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	font-weight: 700;
	color: var(--texto);
	text-decoration: none;
}
.cta-paginacion .page-numbers.current {
	background: var(--texto);
	border-color: var(--texto);
	color: var(--fondo);
}
.cta-paginacion .page-numbers.dots {
	border: 0;
}
.cta-compartir {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: var(--e-8);
	padding: 28px 32px;
	border: 1px solid rgba(234, 0, 41, 0.45);
	border-radius: var(--r-bloque);
	background: rgba(234, 0, 41, 0.06);
}
.cta-compartir__texto {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-weight: 600;
	color: var(--texto);
}
.cta-compartir__acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.cta-contenido-pagina .cta-seccion > :first-child {
	margin-top: 0;
}

/* =====================================================================
   FASE «SISTEMA» · componentes compartidos para las plantillas de página
   (documentados en sitio-nuevo/COMPONENTES.md). Solo tokens de tokens.css;
   los valores medidos salen de diseno-B/pantallas-canvas/*.dc.html.
   ===================================================================== */

/* ---------------------------------------------------------------------
   23. Secciones: utilidades y patrón de corazones
   --------------------------------------------------------------------- */
.cta-seccion {
	--fondo-ruta: var(--fondo);
}
/* Solo las secciones con patrón crean su propio contexto de apilamiento (el
   patrón va con z-index:-1 detrás del contenido). Así las barras fijas
   (sticky) de otras secciones no quedan debajo. */
.cta-seccion:has(> .cta-patron) {
	isolation: isolate;
}
.cta-seccion--alt {
	--fondo-ruta: var(--fondo-alt);
}
.cta-seccion--honda {
	--fondo-ruta: var(--fondo-hondo);
}
.cta-seccion--compacta {
	padding-block: calc(var(--seccion-y) * 0.6);
}
.cta-seccion--sin-arriba {
	padding-top: 0;
}
.cta-seccion--sin-abajo {
	padding-bottom: 0;
}
.cta-rejilla-2,
.cta-rejilla-3,
.cta-rejilla-4 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--separacion);
}
.cta-rejilla-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cta-rejilla-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1023px) {
	.cta-rejilla-3,
	.cta-rejilla-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.cta-rejilla-2,
	.cta-rejilla-3,
	.cta-rejilla-4 {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

.cta-patron {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-color: var(--patron);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 100%), var(--corazones-mascara);
	mask-image: linear-gradient(90deg, transparent 0%, transparent 40%, #000 100%), var(--corazones-mascara);
	-webkit-mask-size: 100% 100%, 64px 128px;
	mask-size: 100% 100%, 64px 128px;
	-webkit-mask-repeat: no-repeat, repeat;
	mask-repeat: no-repeat, repeat;
	-webkit-mask-position: 0 0, right top;
	mask-position: 0 0, right top;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.cta-patron--izquierda {
	-webkit-mask-image: linear-gradient(270deg, transparent 0%, transparent 45%, #000 100%), var(--corazones-mascara);
	mask-image: linear-gradient(270deg, transparent 0%, transparent 45%, #000 100%), var(--corazones-mascara);
	-webkit-mask-position: 0 0, left top;
	mask-position: 0 0, left top;
}
.cta-patron--completo {
	-webkit-mask-image: linear-gradient(#000, #000), var(--corazones-mascara);
	mask-image: linear-gradient(#000, #000), var(--corazones-mascara);
	opacity: 0.6;
}
.cta-patron--esquina {
	-webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 55%), var(--corazones-mascara);
	mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 55%), var(--corazones-mascara);
}
.cta-patron--rojo {
	left: auto;
	width: min(460px, 48%);
	background-color: rgba(255, 255, 255, 0.5);
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 100%), var(--corazones-mascara);
	mask-image: linear-gradient(90deg, transparent 0%, #000 100%), var(--corazones-mascara);
}

/* Botones con texto largo del JSON: en celular pueden partirse en dos
   renglones en vez de salirse del ancho (sin scroll horizontal a 390 px). */
@media (max-width: 767px) {
	.cta-btn {
		max-width: 100%;
		white-space: normal;
		text-align: center;
	}
	.cta-btn--g,
	.cta-btn--m {
		padding-block: 8px;
	}
}

/* Anclas fijas: el destino queda visible bajo el encabezado y las pestañas */
html:has(.cta-anclas--fija) {
	scroll-padding-top: calc(76px + 72px + 16px);
}
/* Con sesión iniciada, la barra de WordPress (32 px; 46 px hasta 782 px)
   empuja el encabezado y las anclas: el destino de un ancla baja lo mismo. */
html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--alto-barra) + 16px + 32px);
}
html:has(body.admin-bar):has(.cta-anclas--fija) {
	scroll-padding-top: calc(76px + 72px + 16px + 32px);
}
@media (max-width: 782px) {
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--alto-barra) + 16px + 46px);
	}
	html:has(body.admin-bar):has(.cta-anclas--fija) {
		scroll-padding-top: calc(76px + 72px + 16px + 46px);
	}
}

/* ---------------------------------------------------------------------
   24. Encabezado de sección: subtítulo (sin conteo ni ícono de antetítulo
   desde la decisión 109)
   --------------------------------------------------------------------- */
.cta-encabezado-seccion__subtitulo {
	font-size: 17px;
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.3;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
}

/* ---------------------------------------------------------------------
   25. Portada de página (cta_hero)
   --------------------------------------------------------------------- */
.cta-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 32px;
	overflow: hidden;
	padding-top: calc(var(--alto-header) + 40px);
	padding-bottom: 36px;
	background-color: var(--fondo);
	color: var(--texto);
	--fondo-ruta: var(--fondo);
}
.cta-hero--alto-g {
	min-height: 720px;
}
.cta-hero--alto-m {
	min-height: 600px;
}
.cta-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
	background: var(--cta-noche);
}
.cta-hero__fondo > img,
.cta-hero__fondo .cta-carrusel__diapositiva img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%;
}
/* Fotos que cambian solas con fundido (cta_hero carrusel «fundido»): sin JS
   o con movimiento reducido solo existe la primera (las demás, con
   display:none, ni se descargan); tema.js agrega .esta-activo.
   Movimiento (decisión 65): mientras se ve, cada foto se mueve despacio con
   paneo y acercamiento o alejamiento (solo transform; el velo, el texto y
   los botones no se mueven). Dura lo que la foto está a la vista más su
   salida (--cta-fundido-duracion = intervalo + 1.6 s, desde hero.php), sigue
   sin cortes cuando la foto pasa a .es-saliente y, si la foto dura más (la
   siguiente aún no carga), se queda en su pose final (fill both). tema.js
   elige el movimiento de cada foto que entra (data-movimiento 0 a 4, nunca
   el mismo dos veces seguidas), lo pausa con .esta-pausado y estira lo que
   falta si el cambio se retrasa. La primera foto (LCP) se queda quieta en
   su pose inicial hasta que la portada se activa (.esta-activo, al cargar
   la página) y ahí empieza «acercar», que parte de la foto tal cual: sin
   salto al cargar ni al activarse. Escala máxima 1.12 y paneos menores
   que lo que sobra de la escala (|desplazamiento| ≤ (escala − 1) / 2, con
   margen): nunca asoma un borde. Con movimiento reducido no hay animación
   ni transform. */
.cta-fundido {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.cta-fundido__foto {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: none;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%;
	opacity: 0;
}
.cta-fundido__foto.es-visible {
	z-index: 2;
	display: block;
	opacity: 1;
}
/* La que sale se queda debajo, completa y sin dejar de moverse, hasta que la
   nueva termina de aparecer */
.cta-fundido__foto.es-saliente {
	z-index: 1;
	display: block;
	opacity: 1;
	transition: none;
}
.cta-fundido.esta-activo .cta-fundido__foto {
	display: block;
}
@media (prefers-reduced-motion: no-preference) {
	.cta-fundido__foto {
		--cta-fundido-movimiento: cta-fundido-acercar;
		transition: opacity 1.4s ease-in-out;
	}
	.cta-fundido__foto[data-movimiento="1"] {
		--cta-fundido-movimiento: cta-fundido-alejar-derecha;
	}
	.cta-fundido__foto[data-movimiento="2"] {
		--cta-fundido-movimiento: cta-fundido-acercar-izquierda;
	}
	.cta-fundido__foto[data-movimiento="3"] {
		--cta-fundido-movimiento: cta-fundido-subir;
	}
	.cta-fundido__foto[data-movimiento="4"] {
		--cta-fundido-movimiento: cta-fundido-alejar-bajar;
	}
	/* La misma animación en las dos clases: al pasar de .es-visible a
	   .es-saliente no se reinicia. Al quitarse la clase (ya tapada por la
	   nueva) la animación termina y la próxima vez arranca de nuevo. La
	   curva empieza a velocidad pareja y frena al final, para detenerse
	   suave si la foto se queda más tiempo. */
	.cta-fundido__foto.es-visible,
	.cta-fundido__foto.es-saliente {
		animation: var(--cta-fundido-movimiento) var(--cta-fundido-duracion, 7.6s) cubic-bezier(0.33, 0.33, 0.6, 1) both;
		will-change: transform;
	}
	/* Quieta: con JS, en su pose inicial hasta que la portada se activa (al
	   cargar la página, con la primera foto ya a la vista; en una conexión
	   lenta el movimiento ya no se gasta mientras la foto se descarga), y
	   con .esta-pausado, donde iba. */
	html.js .cta-fundido:not(.esta-activo) .cta-fundido__foto,
	.cta-fundido.esta-pausado .cta-fundido__foto {
		animation-play-state: paused;
	}
}
/* Movimientos: translate (en % del tamaño de la foto) y luego scale, ambos
   desde el centro; cada desplazamiento queda dentro de lo que sobra de la
   escala en ese momento, también a medio camino. */
@keyframes cta-fundido-acercar {
	from {
		transform: translate(0, 0) scale(1);
	}
	to {
		transform: translate(0, 0) scale(1.1);
	}
}
@keyframes cta-fundido-alejar-derecha {
	from {
		transform: translate(-3%, 0) scale(1.12);
	}
	to {
		transform: translate(1%, 0) scale(1.04);
	}
}
@keyframes cta-fundido-acercar-izquierda {
	from {
		transform: translate(1%, 0) scale(1.04);
	}
	to {
		transform: translate(-3.5%, 0) scale(1.11);
	}
}
@keyframes cta-fundido-subir {
	from {
		transform: translate(0, 2.5%) scale(1.07);
	}
	to {
		transform: translate(0, -2.5%) scale(1.09);
	}
}
@keyframes cta-fundido-alejar-bajar {
	from {
		transform: translate(0, -2%) scale(1.1);
	}
	to {
		transform: translate(0, 0.5%) scale(1.03);
	}
}
.cta-hero__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.cta-hero__interior {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.cta-hero__contenido {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	max-width: 760px;
	min-width: 0;
}
.cta-hero__etiquetas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
/* Titular de la portada (decisión 102, «Todas las portadas», 16-oct-2026:
   «y también lo de "el chepe" y este tipo de portadas»): en todas las
   páginas vuelve tal como estaba en el tema del 2-oct, antes de la decisión
   99: Anton 400 en mayúsculas (entonces era la letra de todos los h1; los
   renglones grande y chico también), renglón 0.9 (0.86 el grande, 1 el
   chico), espaciado 0.005em y los tamaños de entonces (--t-portada y
   --t-portada-grande, tokens.css; cada página ajusta los suyos en su hoja,
   con los mismos valores del 2-oct). El h1 mide --t-portada porque el
   0.005em se calcula en el h1 y los renglones lo heredan en px. Cada
   renglón limita su tamaño con el ancho de letra de Anton (--ancho-letra),
   así ninguna palabra se sale. Lo demás de la portada (antetítulo,
   etiquetas, texto, datos y botones) sigue en Montserrat. El color es el de
   la decisión 99 (--titulo). Las mayúsculas son solo de CSS: el contenido
   sigue escrito como está. Anton se precarga solo en celular
   (cta_precargar_fuentes(), inc/assets.php). */
.cta-hero__titulo {
	max-width: 100%;
	font-family: var(--fuente-portada);
	font-size: var(--t-portada);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--titulo);
}
.cta-hero__linea {
	display: block;
	--cta-tam-linea: var(--t-portada);
	font-size: min(var(--cta-tam-linea), calc((100vw - 2 * var(--margen)) / (var(--cta-letras, 6) * var(--ancho-letra))));
}
.cta-hero__linea--grande {
	--cta-tam-linea: var(--t-portada-grande);
	margin-top: 4px;
	line-height: 0.86;
}
.cta-hero__linea--sub {
	--cta-tam-linea: calc(var(--t-portada) * 0.56);
	margin-top: 12px;
	line-height: 1;
	color: var(--texto-2);
}
.cta-hero__texto {
	max-width: 620px;
	font-size: var(--t-lead);
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-hero--sangre .cta-hero__texto {
	color: var(--texto-2);
}
.cta-hero__meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: var(--texto-2);
}
.cta-hero__meta li,
.cta-hero__meta a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 32px;
}
.cta-hero__meta a {
	color: inherit;
	text-decoration: none;
}
.cta-hero__meta a:hover {
	color: var(--texto);
	text-decoration: underline;
}
.cta-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 4px;
}
.cta-hero__extra {
	position: relative;
}
.cta-hero__pie {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 32px;
	width: 100%;
	padding-inline: var(--margen);
}
.cta-hero__pie-texto {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--texto-2);
}
.cta-hero__pie-texto .cta-icono {
	flex: none;
}
.cta-hero__leyenda {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	margin-left: auto;
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--texto-2);
	text-decoration: none;
	font-weight: var(--peso-etiqueta);
}
a.cta-hero__leyenda:hover {
	color: var(--texto);
}
.cta-hero__leyenda-linea {
	display: block;
	width: 48px;
	height: 1px;
	background: currentColor;
}

/* Sangre: foto con velo Noche, zona siempre oscura */
.cta-hero--sangre {
	background-color: var(--cta-noche);
	--fondo-ruta: var(--cta-noche);
}
.cta-hero--sangre .cta-hero__velo {
	background-image: linear-gradient(180deg, rgba(16, 24, 32, 0.3) 0%, rgba(16, 24, 32, 0.12) 28%, rgba(16, 24, 32, 0.82) 60%, var(--cta-noche) 100%);
}

/* Desvanecida: la foto se funde con el fondo del sitio (cambia con el modo) */
.cta-hero--desvanecida .cta-hero__fondo {
	bottom: auto;
	height: 62%;
	background: var(--fondo);
}
.cta-hero--desvanecida .cta-hero__velo {
	background-image: linear-gradient(0deg, var(--fondo) 38%, color-mix(in srgb, var(--fondo) 60%, transparent) 55%, color-mix(in srgb, var(--fondo) 10%, transparent) 100%);
}
.cta-hero--desvanecida {
	padding-top: calc(var(--alto-header) + 220px);
}

/* Arco y clara: fondo del sitio con patrón */
.cta-hero--arco,
.cta-hero--clara {
	justify-content: center;
	padding-bottom: 56px;
}
.cta-hero--clara .cta-hero__titulo,
.cta-hero--arco .cta-hero__titulo {
	color: var(--titulo);
}
.cta-hero__media {
	position: relative;
	width: 100%;
	max-width: 500px;
}

@media (max-width: 767px) {
	.cta-hero {
		padding-bottom: 32px;
	}
	.cta-hero--alto-g {
		min-height: 700px;
	}
	.cta-hero--alto-m {
		min-height: 580px;
	}
	.cta-hero__botones {
		flex-direction: column;
		align-self: stretch;
		gap: 12px;
	}
	.cta-hero__botones .cta-btn {
		width: 100%;
	}
	.cta-hero__pie {
		flex-direction: column;
		align-items: flex-start;
	}
	.cta-hero__leyenda {
		display: none;
	}
}

@media (min-width: 768px) {
	.cta-hero {
		padding-bottom: 40px;
	}
	.cta-hero--alto-g {
		min-height: 820px;
	}
	.cta-hero--alto-m {
		min-height: 640px;
	}
	.cta-hero__contenido {
		gap: 26px;
	}
	/* Como en las maquetas: el texto arranca bajo el encabezado (52 px);
	   con la clase cta-hero--centro queda centrado en el alto. */
	.cta-hero--sangre {
		justify-content: flex-start;
		padding-top: calc(var(--alto-header) + 52px);
		padding-bottom: 120px;
	}
	.cta-hero--sangre.cta-hero--centro {
		justify-content: center;
	}
	.cta-hero--sangre .cta-hero__pie {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 40px;
		padding-inline: 60px;
	}
	.cta-hero--sangre.cta-hero--izq .cta-hero__velo {
		background-image:
			linear-gradient(0deg, rgba(16, 24, 32, 0.72) 0%, rgba(16, 24, 32, 0.58) 10%, rgba(16, 24, 32, 0) 30%),
			linear-gradient(90deg, rgba(16, 24, 32, 0.96) 0%, rgba(16, 24, 32, 0.84) 40%, rgba(16, 24, 32, 0.32) 70%, rgba(16, 24, 32, 0.12) 100%);
	}
	.cta-hero--sangre.cta-hero--der .cta-hero__velo {
		background-image:
			linear-gradient(0deg, rgba(16, 24, 32, 0.72) 0%, rgba(16, 24, 32, 0.58) 10%, rgba(16, 24, 32, 0) 30%),
			linear-gradient(270deg, rgba(16, 24, 32, 0.95) 0%, rgba(16, 24, 32, 0.86) 36%, rgba(16, 24, 32, 0.3) 62%, rgba(16, 24, 32, 0) 80%);
	}
	html.tema-oscuro .cta-hero--sangre .cta-hero__velo {
		background-image:
			linear-gradient(180deg, rgba(16, 24, 32, 0.9) 0%, rgba(16, 24, 32, 0) 240px),
			linear-gradient(0deg, var(--cta-noche) 0%, rgba(16, 24, 32, 0.8) 10%, rgba(16, 24, 32, 0) 30%),
			linear-gradient(90deg, rgba(16, 24, 32, 0.96) 0%, rgba(16, 24, 32, 0.84) 40%, rgba(16, 24, 32, 0.32) 70%, rgba(16, 24, 32, 0.12) 100%);
	}
	html.tema-oscuro .cta-hero--sangre.cta-hero--der .cta-hero__velo {
		background-image:
			linear-gradient(180deg, rgba(16, 24, 32, 0.9) 0%, rgba(16, 24, 32, 0) 240px),
			linear-gradient(0deg, var(--cta-noche) 0%, rgba(16, 24, 32, 0.8) 10%, rgba(16, 24, 32, 0) 30%),
			linear-gradient(270deg, rgba(16, 24, 32, 0.95) 0%, rgba(16, 24, 32, 0.86) 36%, rgba(16, 24, 32, 0.3) 62%, rgba(16, 24, 32, 0) 80%);
	}
	.cta-hero--sangre.cta-hero--der .cta-hero__contenido {
		max-width: 640px;
		margin-left: auto;
	}
	.cta-hero--sangre .cta-hero__extra {
		margin-bottom: 44px;
	}
}

@media (min-width: 1024px) {
	.cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(760px / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-hero--der .cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(640px / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-hero--desvanecida {
		justify-content: center;
		padding-top: calc(var(--alto-header) + 48px);
		padding-bottom: 72px;
	}
	.cta-hero--desvanecida .cta-hero__fondo {
		left: auto;
		width: 62.5%;
		height: 100%;
		bottom: 0;
	}
	.cta-hero--desvanecida .cta-hero__velo {
		background-image:
			linear-gradient(180deg, color-mix(in srgb, var(--fondo) 90%, transparent) 0%, transparent 240px),
			linear-gradient(0deg, var(--fondo) 0%, transparent 200px),
			linear-gradient(90deg, var(--fondo) 0%, var(--fondo) 38%, color-mix(in srgb, var(--fondo) 72%, transparent) 52%, color-mix(in srgb, var(--fondo) 20%, transparent) 74%, color-mix(in srgb, var(--fondo) 10%, transparent) 100%);
	}
	.cta-hero--desvanecida .cta-hero__contenido {
		max-width: 640px;
	}
	.cta-hero--arco .cta-hero__interior {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
		align-items: center;
		gap: 64px;
	}
	.cta-hero--arco .cta-hero__contenido {
		max-width: 640px;
	}
}
@media (min-width: 1280px) {
	.cta-hero--alto-g {
		min-height: 900px;
	}
	.cta-hero--alto-m {
		min-height: 760px;
	}
	.cta-hero--sangre .cta-hero__contenido {
		gap: 30px;
	}
}

/* ---------------------------------------------------------------------
   26. Carrusel accesible (cta_carrusel)
   --------------------------------------------------------------------- */
.cta-carrusel {
	position: relative;
	min-width: 0;
}
.cta-carrusel__pista {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	outline-offset: -4px;
}
.cta-carrusel__pista::-webkit-scrollbar {
	display: none;
}
@media (prefers-reduced-motion: no-preference) {
	.cta-carrusel__pista {
		scroll-behavior: smooth;
	}
}
.cta-carrusel__diapositiva {
	position: relative;
	flex: 0 0 100%;
	margin: 0;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.cta-carrusel__diapositiva img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-carrusel__leyenda {
	position: absolute;
	left: 20px;
	bottom: 20px;
	max-width: calc(100% - 40px);
	padding: 8px 14px;
	border-radius: var(--r-pildora);
	background: var(--velo-etiqueta);
	font-size: 13px;
	font-weight: 600;
	color: var(--cta-blanco);
}
.cta-carrusel__controles {
	display: none;
	align-items: center;
	gap: 12px;
}
html.js .cta-carrusel__controles {
	display: flex;
}
.cta-carrusel__boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	color: var(--texto);
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cta-carrusel__boton:hover {
	background: var(--texto);
	border-color: var(--texto);
	color: var(--fondo);
}
.cta-carrusel__boton[hidden] {
	display: none;
}
.cta-carrusel__icono-reanudar,
.cta-carrusel__pausa.esta-pausado .cta-carrusel__icono-pausa {
	display: none;
}
.cta-carrusel__icono-pausa,
.cta-carrusel__pausa.esta-pausado .cta-carrusel__icono-reanudar {
	display: inline-flex;
}
.cta-carrusel__puntos {
	display: flex;
	align-items: center;
	gap: 2px;
}
.cta-carrusel__punto {
	position: relative;
	width: 24px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.cta-carrusel__punto::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: var(--r-pildora);
	background: var(--borde-fuerte);
	transition: width 0.2s ease, margin 0.2s ease, background-color 0.2s ease;
}
.cta-carrusel__punto:hover::before {
	background: var(--texto-2);
}
.cta-carrusel__punto[aria-current="true"]::before {
	width: 20px;
	margin-left: -10px;
	background: var(--cta-rojo);
}
.cta-carrusel__punto:focus-visible {
	outline-offset: -6px;
}

/* Galería: marco redondeado, controles abajo */
.cta-carrusel--galeria .cta-carrusel__pista {
	aspect-ratio: 16 / 9;
	border-radius: var(--r-tarjeta);
	background: var(--cta-noche);
}
.cta-carrusel--destino .cta-carrusel__pista {
	border-radius: 120px 28px 120px 28px;
}
.cta-carrusel--hotel .cta-carrusel__pista {
	border-radius: 88px 24px 88px 24px;
}
.cta-carrusel--producto .cta-carrusel__pista {
	border-radius: 120px 32px 120px 32px;
}
.cta-carrusel--galeria .cta-carrusel__controles {
	justify-content: center;
	margin-top: 16px;
}
@media (max-width: 767px) {
	.cta-carrusel--galeria .cta-carrusel__pista {
		aspect-ratio: 4 / 3;
		border-radius: 24px;
	}
	.cta-carrusel--destino .cta-carrusel__pista,
	.cta-carrusel--hotel .cta-carrusel__pista,
	.cta-carrusel--producto .cta-carrusel__pista {
		border-radius: 64px 20px 64px 20px;
	}
}

/* Fondo: llena al padre (portadas); los controles van en el pie */
.cta-carrusel--fondo,
.cta-carrusel--fondo .cta-carrusel__pista {
	position: absolute;
	inset: 0;
}
.cta-carrusel--fondo .cta-carrusel__diapositiva {
	height: 100%;
}
.cta-hero__pie .cta-carrusel__controles {
	gap: 8px;
}
.cta-hero__pie .cta-carrusel__boton {
	background: rgba(16, 24, 32, 0.5);
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--cta-blanco);
}
.cta-hero__pie .cta-carrusel__boton:hover {
	background: var(--cta-blanco);
	border-color: var(--cta-blanco);
	color: var(--cta-noche);
}
.cta-hero__pie .cta-carrusel__punto::before {
	background: rgba(255, 255, 255, 0.5);
}
.cta-hero__pie .cta-carrusel__punto[aria-current="true"]::before {
	background: var(--cta-rojo);
}
/* En la portada el texto deja pasar el deslizamiento hacia las fotos */
.cta-hero--sangre .cta-hero__contenido {
	pointer-events: none;
}
.cta-hero--sangre .cta-hero__contenido :is(a, button, input, select, textarea, label, summary, [tabindex]) {
	pointer-events: auto;
}

/* Tarjeta: dentro de una tarjeta (hotel), controles sobre la foto */
.cta-carrusel--tarjeta,
.cta-carrusel--tarjeta .cta-carrusel__pista {
	height: 100%;
}
.cta-carrusel--tarjeta .cta-carrusel__diapositiva {
	height: 100%;
}
.cta-carrusel--tarjeta .cta-carrusel__controles {
	position: absolute;
	left: 50%;
	bottom: 8px;
	transform: translateX(-50%);
	gap: 4px;
	padding: 0 4px;
	border-radius: var(--r-pildora);
	background: rgba(16, 24, 32, 0.6);
}
.cta-carrusel--tarjeta .cta-carrusel__boton {
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--cta-blanco);
}
.cta-carrusel--tarjeta .cta-carrusel__boton:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--cta-blanco);
}
/* Puntos de 24 × 44 px, juntos (WCAG 2.5.8: 24 px como mínimo y sin
   encimarse); el punto visible sigue de 6 px. */
.cta-carrusel--tarjeta .cta-carrusel__puntos {
	gap: 0;
}
.cta-carrusel--tarjeta .cta-carrusel__punto {
	width: 24px;
	height: 44px;
}
.cta-carrusel--tarjeta .cta-carrusel__punto::before {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: rgba(255, 255, 255, 0.55);
}
.cta-carrusel--tarjeta .cta-carrusel__punto[aria-current="true"]::before {
	width: 14px;
	margin-left: -7px;
	background: var(--cta-blanco);
}
/* Celular: los puntos de 24 px no llegaban a los 44 px de área táctil y
   44 px por punto no caben en una tarjeta de 280 px. En su lugar se ve un
   contador «2 / 6» (el punto de la foto actual, 44 px de alto; su nombre
   sigue siendo «Foto 2 de 6») entre las flechas de 44 × 44; los demás
   puntos se esconden. Se cambia de foto con las flechas o deslizando. */
@media (max-width: 767px) {
	.cta-carrusel__punto:not([aria-current="true"]) {
		display: none;
	}
	.cta-carrusel__punto[aria-current="true"],
	.cta-carrusel--tarjeta .cta-carrusel__punto[aria-current="true"] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 52px;
		height: 44px;
		padding: 0 6px;
		color: var(--texto);
		cursor: default;
	}
	.cta-carrusel__punto[aria-current="true"]::before,
	.cta-carrusel--tarjeta .cta-carrusel__punto[aria-current="true"]::before,
	.cta-hero__pie .cta-carrusel__punto[aria-current="true"]::before {
		content: attr(data-contador);
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		border-radius: 0;
		background: none;
		font-size: 15px;
		font-weight: 600;
		font-variant-numeric: tabular-nums;
		line-height: 1;
		white-space: nowrap;
		color: inherit;
		transition: none;
	}
	.cta-carrusel--tarjeta .cta-carrusel__punto[aria-current="true"],
	.cta-hero__pie .cta-carrusel__punto[aria-current="true"] {
		color: var(--cta-blanco);
	}
	.cta-hero__pie .cta-carrusel__punto[aria-current="true"] {
		text-shadow: 0 1px 2px rgba(16, 24, 32, 0.9);
	}
}

/* ---------------------------------------------------------------------
   27. Tarjeta con patrón de corazones (cta_tarjeta_roja)
   Decisión 111 (20-oct-2026, hoja 5 de «Aún más MODIFICACIONES»): Arturo,
   de «Nuestra especialidad es Chihuahua»: «Esta etiqueta debe tener el
   color rojo tenue bajo. En todas las páginas que tengan». Un degradado
   muy claro del rojo de marca (--rojo-tenue → --rojo-suave, tokens.css)
   con orilla suave (--rojo-borde), sombra y corazones tenues en rojo
   (--rojo-patron); título en el color de los títulos (12.2:1), texto gris
   (--texto-2-hondo: 4.86:1 sobre el tono más oscuro del degradado), los
   íconos en rojo (--rojo-icono, 3.98:1), el texto que pasa a rojo y el
   anillo de foco en --rojo-texto (5.36:1) y el botón de Facebook
   (Conócenos) relleno de rojo, como los botones principales del sitio. El
   botón de WhatsApp sigue verde (decisión 47). En oscuro, una superficie
   honda de rojo apagado con el texto claro y el rojo claro del tema
   (#ff4d6a, 4.95:1).
   Antes: roja con texto blanco hasta la decisión 107 (19-oct, «unos tonos
   más claritos»), que la pasó al acento azul pizarra; el nombre de las
   clases se queda. Sigue los tokens de la página (sin data-zona="foto").
   Sale en El Chepe, Otros destinos, /tours/, Hoteles, Preguntas
   frecuentes y Conócenos (opiniones).
   --------------------------------------------------------------------- */
.cta-tarjeta-roja {
	--texto-2: var(--texto-2-hondo);
	--texto-3: var(--texto-3-hondo);
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 32px 48px;
	overflow: hidden;
	padding: 80px;
	border: 1px solid var(--rojo-borde);
	border-radius: 120px 28px 120px 28px;
	background-color: var(--rojo-suave);
	background-image: linear-gradient(120deg, var(--rojo-tenue) 0%, var(--rojo-suave) 100%);
	box-shadow: var(--sombra);
	color: var(--titulo);
}
.cta-tarjeta-roja__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	max-width: 720px;
	min-width: 0;
}
.cta-tarjeta-roja__titulo {
	font-size: var(--t-h2);
	line-height: 1.1;
	color: var(--titulo);
}
.cta-tarjeta-roja__texto {
	max-width: 600px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-tarjeta-roja__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 24px;
	margin-top: 8px;
}
.cta-tarjeta-roja__llamada {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.4;
	color: var(--titulo);
	text-decoration: none;
}
.cta-tarjeta-roja__llamada:hover {
	color: var(--rojo-texto);
	text-decoration: underline;
}
.cta-tarjeta-roja__llamada .cta-icono {
	flex: none;
	color: var(--rojo-icono);
}
.cta-tarjeta-roja :focus-visible {
	outline-color: var(--rojo-texto);
}
/* Corazones tenues en rojo (decisión 111; antes blancos sobre rojo y,
   con la decisión 107, en el acento) */
.cta-tarjeta-roja .cta-patron--rojo {
	background-color: var(--rojo-patron);
}
/* Botón blanco de la tarjeta (Facebook en Conócenos): relleno rojo con
   texto blanco, como .cta-btn--primario (§1; 4.64:1, al pasar #c70023
   6.08:1), en los dos modos. Los de WhatsApp siguen verdes. */
.cta-tarjeta-roja .cta-btn--blanco {
	border-color: var(--cta-rojo);
	background-color: var(--cta-rojo);
	color: var(--cta-blanco);
}
.cta-tarjeta-roja .cta-btn--blanco:hover {
	border-color: #c70023;
	background-color: #c70023;
	color: var(--cta-blanco);
}
.cta-tarjeta-roja--lado {
	justify-content: space-between;
	padding: 56px;
	border-radius: var(--r-tarjeta);
}
/* La columna mide lo que su renglón más largo (el correo entero, ~262 px;
   con 260 px de tope el correo se partía en la «@» desde 1024 px). */
.cta-tarjeta-roja--lado .cta-tarjeta-roja__acciones {
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	max-width: 340px;
	margin-top: 0;
}
@media (max-width: 1023px) {
	.cta-tarjeta-roja,
	.cta-tarjeta-roja--lado {
		flex-direction: column;
		align-items: flex-start;
		padding: 56px 40px;
	}
	.cta-tarjeta-roja--lado .cta-tarjeta-roja__acciones {
		max-width: none;
	}
}
@media (max-width: 767px) {
	.cta-tarjeta-roja,
	.cta-tarjeta-roja--lado {
		padding: 44px 24px 40px;
		border-radius: 64px 20px 64px 20px;
	}
	.cta-tarjeta-roja__texto {
		font-size: 16px;
	}
	.cta-tarjeta-roja__acciones,
	.cta-tarjeta-roja--lado .cta-tarjeta-roja__acciones {
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
	}
	.cta-tarjeta-roja__acciones .cta-btn {
		width: 100%;
	}
	.cta-tarjeta-roja .cta-patron--rojo {
		width: 70%;
		opacity: 0.6;
	}
}

/* ---------------------------------------------------------------------
   28. Banda con foto y botones (cta_banda_foto)
   --------------------------------------------------------------------- */
.cta-banda-foto {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	min-height: 560px;
	padding-block: 72px;
	background-color: var(--cta-noche);
	color: var(--cta-blanco);
}
.cta-banda-foto__fondo {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.cta-banda-foto__fondo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.cta-banda-foto__velo {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: linear-gradient(0deg, rgba(16, 24, 32, 0.94) 0%, rgba(16, 24, 32, 0.7) 50%, rgba(16, 24, 32, 0.2) 100%);
}
.cta-banda-foto__contenido {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: 640px;
}
.cta-banda-foto__titulo {
	font-size: calc(var(--t-h2) * 1.2);
	line-height: 1.08;
	color: var(--cta-blanco);
}
.cta-banda-foto__texto {
	font-size: var(--t-lead);
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-banda-foto__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}
@media (max-width: 767px) {
	.cta-banda-foto {
		min-height: 520px;
		padding-block: 56px;
	}
	.cta-banda-foto__titulo {
		font-size: var(--t-h2);
	}
	.cta-banda-foto__botones {
		flex-direction: column;
		align-self: stretch;
		gap: 12px;
	}
	.cta-banda-foto__botones .cta-btn {
		width: 100%;
	}
}
@media (min-width: 768px) {
	.cta-banda-foto {
		align-items: center;
	}
	.cta-banda-foto--g {
		min-height: 680px;
	}
	.cta-banda-foto--izq .cta-banda-foto__velo {
		background-image: linear-gradient(90deg, rgba(16, 24, 32, 0.94) 0%, rgba(16, 24, 32, 0.78) 34%, rgba(16, 24, 32, 0.1) 64%, rgba(16, 24, 32, 0) 100%);
	}
	.cta-banda-foto--der .cta-banda-foto__velo {
		background-image: linear-gradient(270deg, rgba(16, 24, 32, 0.94) 0%, rgba(16, 24, 32, 0.78) 34%, rgba(16, 24, 32, 0.1) 64%, rgba(16, 24, 32, 0) 100%);
	}
	.cta-banda-foto--der .cta-banda-foto__contenido {
		margin-left: auto;
	}
	.cta-banda-foto__contenido {
		gap: 30px;
	}
}

/* ---------------------------------------------------------------------
   29. Foto en arco (cta_foto_arco)
   --------------------------------------------------------------------- */
.cta-foto-arco {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 584 / 640;
	border-radius: 120px 28px 120px 28px;
	background: var(--tarjeta);
}
.cta-foto-arco img,
.cta-foto-arco .cta-imagen-vacia {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-foto-arco--capsula {
	aspect-ratio: 520 / 800;
	border-radius: 260px 32px 32px 260px;
}
.cta-foto-arco--producto {
	aspect-ratio: 500 / 640;
	border-radius: 120px 32px 120px 32px;
}
.cta-foto-arco--hotel {
	aspect-ratio: 1 / 1;
	border-radius: 88px 24px 88px 24px;
}
.cta-foto-arco--arco {
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 32px 32px;
}
.cta-foto-arco__leyenda {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 48px);
	min-height: 36px;
	padding: 4px 16px;
	border: 1px solid rgba(229, 225, 230, 0.28);
	border-radius: var(--r-pildora);
	background: rgba(16, 24, 32, 0.8);
	font-size: 13px;
	font-weight: 600;
	color: var(--cta-blanco);
}
.cta-foto-arco__leyenda .cta-icono {
	flex: none;
	color: var(--cta-rojo);
}
@media (max-width: 767px) {
	.cta-foto-arco,
	.cta-foto-arco--producto,
	.cta-foto-arco--hotel {
		border-radius: 64px 20px 64px 20px;
	}
	.cta-foto-arco--capsula {
		aspect-ratio: 4 / 5;
		border-radius: 160px 24px 24px 160px;
	}
}

/* ---------------------------------------------------------------------
   30. Barra de filtros (cta_barra_filtros)
   --------------------------------------------------------------------- */
.cta-filtros {
	display: none;
	border-block: 1px solid var(--borde);
	background: var(--fondo-hondo);
}
html.js .cta-filtros {
	display: block;
}
.cta-filtros--fija {
	position: sticky;
	top: 76px;
	z-index: 40;
}
.admin-bar .cta-filtros--fija {
	top: calc(76px + 32px);
}
.cta-filtros__interior {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	padding-block: 28px;
}
.cta-filtros__grupo {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.cta-filtros__etiqueta {
	display: flex;
	flex: none;
	align-items: center;
	gap: 8px;
	margin-right: 6px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--texto-2);
}
.cta-filtros__chips {
	display: flex;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.cta-filtros__chips::-webkit-scrollbar {
	display: none;
}
.cta-chip-filtro {
	display: inline-flex;
	flex: none;
	align-items: center;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: transparent;
	font-size: 14px;
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--texto);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
	font-weight: 600;
}
.cta-chip-filtro:hover {
	border-color: var(--texto);
}
.cta-chip-filtro[aria-pressed="true"] {
	background: var(--texto);
	border-color: var(--texto);
	color: var(--fondo);
}
.cta-chip-filtro:focus-visible {
	outline-offset: 2px;
}
.cta-filtros__lado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}
.cta-filtros__conteo {
	font-size: 14px;
	white-space: nowrap;
	color: var(--texto-2);
}
.cta-filtros__ordenar {
	font-size: 13px;
	font-weight: 600;
	color: var(--texto-2);
}
.cta-filtros__select {
	position: relative;
	display: inline-flex;
}
.cta-filtros__select select {
	height: 48px;
	padding: 0 44px 0 18px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	font-family: var(--fuente-texto);
	font-size: 14px;
	color: var(--texto);
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.cta-filtros__flecha {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	pointer-events: none;
	color: var(--texto-2);
}
[data-cta-item][hidden],
[data-cta-filtro-grupo][hidden] {
	display: none !important;
}
@media (max-width: 1023px) {
	.cta-filtros__interior {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		padding-block: 20px;
	}
	.cta-filtros__grupo {
		flex-direction: column;
		align-items: flex-start;
	}
	.cta-filtros__chips {
		align-self: stretch;
		margin-inline: calc(-1 * var(--margen));
		padding-inline: var(--margen);
	}
	.cta-filtros__lado {
		justify-content: flex-start;
	}
	.cta-filtros__conteo {
		flex: 1 0 100%;
	}
}
@media (max-width: 767px) {
	.cta-chip-filtro {
		height: 44px;
		padding: 0 18px;
		font-size: 14px;
	}
	.cta-filtros__select select {
		height: 44px;
	}
}

/* ---------------------------------------------------------------------
   31. Anclas fijas con sección activa (cta_anclas)
   Decisión 97 (14-oct-2026, Arturo): las barras que van bajo el menú
   principal (secciones del tour, destinos de Hoteles, categorías de
   Preguntas frecuentes, páginas legales) llevaban la letra de titulares
   en mayúsculas, como «Inicio, Conócenos, El Chepe…», y competían con él.
   Ahora van con la letra del texto, como los títulos de las secciones
   (decisión 86): Montserrat como se escribe («Resumen», «Cómo reservar»,
   «Creel Pueblo Mágico»), sin mayúsculas ni espaciado, 15 px (14 px en
   las píldoras), peso 500 y en el tono suave (--texto-2); la marcada, en
   el color del texto y en peso 600, con la línea roja (pestañas) o la
   píldora rellena (chips y celular). El menú principal es el único con la
   letra de titulares. Los altos no cambian (72 px de fila, píldoras de
   44 px).
   --------------------------------------------------------------------- */
.cta-anclas {
	border-block: 1px solid var(--borde);
	background: var(--fondo-hondo);
}
.cta-anclas--fija {
	position: sticky;
	top: 76px;
	z-index: 45;
}
.admin-bar .cta-anclas--fija {
	top: calc(76px + 32px);
}
@media (max-width: 782px) {
	.admin-bar .cta-anclas--fija {
		top: calc(76px + 46px);
	}
}
.cta-anclas__interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 72px;
}
.cta-anclas__lista {
	display: flex;
	gap: 40px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
}
.cta-anclas__lista::-webkit-scrollbar {
	display: none;
}
/* Ventana de la fila: si no cabe a lo ancho, tema.js le pone .hay-mas-izq
   / .hay-mas-der; el borde de ese lado se desvanece y, con ratón, aparece
   una flecha que la desplaza (con el dedo se desliza; con el teclado, el
   foco la desplaza solo). Sin JS no cambia nada. */
.cta-anclas__ventana {
	--cta-anclas-desvanecido: 64px;
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
}
.cta-anclas__ventana.hay-mas-der .cta-anclas__lista {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--cta-anclas-desvanecido)), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - var(--cta-anclas-desvanecido)), transparent);
}
.cta-anclas__ventana.hay-mas-izq .cta-anclas__lista {
	-webkit-mask-image: linear-gradient(270deg, #000 calc(100% - var(--cta-anclas-desvanecido)), transparent);
	mask-image: linear-gradient(270deg, #000 calc(100% - var(--cta-anclas-desvanecido)), transparent);
}
.cta-anclas__ventana.hay-mas-izq.hay-mas-der .cta-anclas__lista {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--cta-anclas-desvanecido), #000 calc(100% - var(--cta-anclas-desvanecido)), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 var(--cta-anclas-desvanecido), #000 calc(100% - var(--cta-anclas-desvanecido)), transparent);
}
.cta-anclas__mas {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	color: var(--texto);
	cursor: pointer;
	transform: translateY(-50%);
}
.cta-anclas__mas:hover {
	border-color: var(--texto);
	background: var(--texto);
	color: var(--fondo);
}
.cta-anclas__mas--izq {
	left: 0;
}
.cta-anclas__mas--der {
	right: 0;
}
@media (hover: hover) and (pointer: fine) {
	.cta-anclas__ventana.hay-mas-izq .cta-anclas__mas--izq,
	.cta-anclas__ventana.hay-mas-der .cta-anclas__mas--der {
		display: inline-flex;
	}
}
@media (max-width: 767px) {
	.cta-anclas__ventana {
		--cta-anclas-desvanecido: 44px;
	}
}
.cta-anclas__enlace {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	height: 72px;
	font-family: var(--fuente-texto);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--texto-2);
	text-decoration: none;
}
.cta-anclas__enlace[aria-current] {
	font-weight: 600;
}
/* Cada enlace mide lo que su texto en negrita (una copia invisible, sin
   nombre accesible, en data-texto; anclas.php): al cambiar la sección
   marcada la fila no se mueve. */
.cta-anclas__texto {
	display: inline-flex;
	flex-direction: column;
}
.cta-anclas__texto::after {
	content: attr(data-texto);
	content: attr(data-texto) / "";
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 600;
	pointer-events: none;
	user-select: none;
}
/* Pestañas desde 768 px: 8 px de relleno a cada lado, que se devuelven con
   margen negativo (la fila no cambia). Así el anillo de foco (-3 px) no
   pisa la primera ni la última letra y el enlace mide al menos 44 px de
   ancho aunque el texto sea corto («Video»). La lista lleva el mismo
   relleno para que la primera no quede recortada por el desplazamiento. */
@media (min-width: 768px) {
	.cta-anclas--pestanas .cta-anclas__lista {
		margin-inline: -8px;
		padding-inline: 8px;
	}
	.cta-anclas--pestanas .cta-anclas__enlace {
		margin-inline: -8px;
		padding-inline: 8px;
	}
	.cta-anclas--pestanas .cta-anclas__enlace::after {
		left: 8px;
		right: 8px;
	}
}
.cta-anclas__enlace::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: var(--cta-rojo);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}
.cta-anclas__enlace:hover,
.cta-anclas__enlace[aria-current] {
	color: var(--texto);
}
.cta-anclas__enlace:hover::after,
.cta-anclas__enlace[aria-current]::after {
	transform: none;
}
.cta-anclas__enlace:focus-visible {
	outline-offset: -3px;
}
.cta-anclas__conteo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	font-family: var(--fuente-texto);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0;
	color: var(--texto);
}
.cta-anclas__lado {
	display: flex;
	flex: none;
	align-items: center;
	gap: 20px;
}
@media (max-width: 1023px) {
	.cta-anclas__lado {
		display: none;
	}
	.cta-anclas--lado-movil .cta-anclas__lado {
		display: flex;
		padding-right: var(--margen);
	}
}
@media (max-width: 767px) {
	.cta-anclas--pestanas .cta-anclas__interior,
	.cta-anclas--chips .cta-anclas__interior {
		min-height: 64px;
		padding-inline: 0;
	}
	.cta-anclas--pestanas .cta-anclas__lista {
		gap: 8px;
		padding: 10px var(--margen);
	}
	/* Chips: mismo margen lateral que las pestañas (el interior va sin relleno
	   para que la fila se deslice hasta el borde). */
	.cta-anclas--chips .cta-anclas__lista {
		padding-inline: var(--margen);
	}
	.cta-anclas--pestanas .cta-anclas__enlace {
		height: 44px;
		padding: 0 16px;
		border: 1px solid var(--borde-fuerte);
		border-radius: var(--r-pildora);
		font-size: 14px;
	}
	.cta-anclas--pestanas .cta-anclas__enlace::after {
		display: none;
	}
	.cta-anclas--pestanas .cta-anclas__enlace[aria-current] {
		background: var(--texto);
		border-color: var(--texto);
		color: var(--fondo);
	}
}
.cta-anclas--chips .cta-anclas__lista {
	gap: 8px;
	padding-block: 10px;
}
.cta-anclas--chips .cta-anclas__enlace {
	height: 44px;
	padding: 0 16px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	font-size: 14px;
}
.cta-anclas--chips .cta-anclas__enlace::after {
	display: none;
}
.cta-anclas--chips .cta-anclas__enlace[aria-current] {
	background: var(--texto);
	border-color: var(--texto);
	color: var(--fondo);
}
.cta-anclas__enlace[aria-current] .cta-anclas__conteo {
	color: var(--texto);
}

/* ---------------------------------------------------------------------
   32. Chips (cta_chips)
   --------------------------------------------------------------------- */
.cta-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-height: 32px;
	padding: 4px 14px;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	font-family: var(--fuente-texto);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.25;
	color: var(--texto-2);
}
.cta-chip .cta-icono {
	flex: none;
	color: var(--cta-rojo);
}
.cta-chip--amenidad {
	min-height: 28px;
	padding: 3px 12px;
	font-size: 12px;
}
.cta-chip--lugar {
	min-height: 40px;
	padding: 6px 18px;
	border-color: var(--borde);
	background: var(--tarjeta);
	font-size: 14px;
	color: var(--texto);
}
.cta-chip--dato {
	padding: 4px 12px;
	background: var(--fondo);
	font-size: 12.5px;
	color: var(--texto);
}
.cta-chip--foto {
	border-color: rgba(229, 225, 230, 0.28);
	color: var(--cta-lila);
}

/* ---------------------------------------------------------------------
   33. Aviso «Importante» (cta_aviso)
   --------------------------------------------------------------------- */
.cta-aviso {
	display: flex;
	gap: 18px;
	padding: 28px 30px;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
}
.cta-aviso--importante {
	border-color: color-mix(in srgb, var(--rojo) 55%, transparent);
}
.cta-aviso__icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pildora);
	background: color-mix(in srgb, var(--rojo) 16%, transparent);
	color: var(--rojo-texto);
}
.cta-aviso--info .cta-aviso__icono {
	background: var(--chip-bg);
	color: var(--texto-2);
}
.cta-aviso__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding-top: 2px;
}
.cta-aviso__titulo {
	font-size: var(--t-antetitulo);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--rojo-texto);
	font-weight: var(--peso-etiqueta);
}
.cta-aviso--info .cta-aviso__titulo {
	color: var(--titulo);
}
.cta-aviso__texto {
	font-size: 18px;
	font-weight: 600;
	line-height: 1.65;
	color: var(--texto);
}
.cta-aviso--info .cta-aviso__texto {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-aviso__texto a {
	color: inherit;
}
@media (max-width: 767px) {
	.cta-aviso {
		gap: 14px;
		padding: 22px 20px;
	}
	.cta-aviso__texto {
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------
   34. Fichas de datos (cta_fichas_datos)
   --------------------------------------------------------------------- */
.cta-fichas-datos {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-fichas-datos--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cta-fichas-datos--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cta-ficha-dato {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	padding: 24px 22px;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
}
.cta-ficha-dato__icono {
	color: var(--cta-rojo);
}
.cta-ficha-dato__valor {
	font-size: 30px;
	line-height: 1.1;
	overflow-wrap: anywhere;
	color: var(--titulo);
	font-weight: var(--peso-titulo);
	letter-spacing: -0.02em;
}
.cta-ficha-dato__texto {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--texto-2);
}
@media (max-width: 767px) {
	.cta-fichas-datos,
	.cta-fichas-datos--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-ficha-dato {
		padding: 20px 18px;
	}
	.cta-ficha-dato__valor {
		font-size: 24px;
	}
}

/* ---------------------------------------------------------------------
   35. Tarjeta con ícono y panel (cta_tarjeta_icono, .cta-tarjeta-panel)
   --------------------------------------------------------------------- */
.cta-tarjeta-icono {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 36px 34px;
	border: 1px solid var(--borde);
	border-radius: 88px 24px 88px 24px;
	background: var(--tarjeta);
}
.cta-tarjeta-icono__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	color: var(--texto);
}
.cta-tarjeta-icono__titulo {
	font-size: 21px;
	line-height: 1.2;
}
.cta-tarjeta-icono__linea {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--cta-rojo);
}
.cta-tarjeta-icono__texto {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-tarjeta-icono__pie {
	margin-top: auto;
}
.cta-tarjeta-panel {
	padding: 28px;
	border: 1px solid var(--borde);
	border-radius: var(--r-tarjeta);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	--fondo-ruta: var(--tarjeta);
}
@media (max-width: 767px) {
	.cta-tarjeta-icono {
		padding: 28px 24px;
		border-radius: 64px 20px 64px 20px;
	}
	.cta-tarjeta-icono__titulo {
		font-size: 19px;
	}
	.cta-tarjeta-panel {
		padding: 22px 20px;
		border-radius: 24px;
	}
}

/* ---------------------------------------------------------------------
   36. Línea de ruta (cta_ruta)
   --------------------------------------------------------------------- */
.cta-ruta {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-ruta__parada {
	position: relative;
	display: flex;
	gap: 16px;
	min-width: 0;
	padding-bottom: 22px;
}
.cta-ruta__parada::before {
	content: "";
	position: absolute;
	top: 36px;
	bottom: 0;
	left: 17px;
	border-left: 2px solid var(--texto);
}
.cta-ruta__parada--punteada::before {
	border-left-style: dashed;
}
.cta-ruta__parada--ultima {
	padding-bottom: 0;
}
.cta-ruta__parada--ultima::before {
	display: none;
}
.cta-ruta__nodo {
	position: relative;
	z-index: 1;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}
.cta-ruta__nodo::before {
	content: "";
	width: 18px;
	height: 18px;
	border: 2px solid var(--texto);
	border-radius: var(--r-pildora);
	background: var(--fondo-ruta, var(--fondo));
}
.cta-ruta__parada--destacada .cta-ruta__nodo {
	border: 2px solid var(--texto);
	border-radius: var(--r-pildora);
	background: var(--fondo-ruta, var(--fondo));
}
.cta-ruta__parada--destacada .cta-ruta__nodo::before {
	display: none;
}
.cta-ruta__nodo .cta-corazon {
	color: var(--cta-rojo);
}
.cta-ruta__textos {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding-top: 4px;
}
.cta-ruta__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-ruta__titulo {
	font-size: 16px;
	line-height: 1.25;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
}
.cta-ruta__nota,
.cta-ruta__tramo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.35;
	color: var(--texto-2);
}
.cta-ruta__nota .cta-icono,
.cta-ruta__tramo .cta-icono {
	flex: none;
}

@media (min-width: 1024px) {
	.cta-ruta--auto {
		flex-direction: row;
		padding-top: 34px;
	}
	.cta-ruta--auto .cta-ruta__parada {
		flex: 1 1 0;
		flex-direction: column;
		gap: 12px;
		padding-bottom: 0;
	}
	.cta-ruta--auto .cta-ruta__parada::before {
		top: 17px;
		bottom: auto;
		left: 18px;
		width: 100%;
		border-left: 0;
		border-top: 2px solid var(--texto);
	}
	.cta-ruta--auto .cta-ruta__parada--punteada::before {
		border-top-style: dashed;
	}
	.cta-ruta--auto .cta-ruta__textos {
		padding-top: 0;
		padding-right: 12px;
	}
	.cta-ruta--auto .cta-ruta__tramo {
		position: absolute;
		top: -30px;
		left: 56px;
		white-space: nowrap;
	}
}
.cta-ruta--horizontal {
	flex-direction: row;
	padding-top: 34px;
	overflow-x: auto;
}
.cta-ruta--horizontal .cta-ruta__parada {
	flex: 1 0 140px;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 0;
}
.cta-ruta--horizontal .cta-ruta__parada::before {
	top: 17px;
	bottom: auto;
	left: 18px;
	width: 100%;
	border-left: 0;
	border-top: 2px solid var(--texto);
}
.cta-ruta--horizontal .cta-ruta__parada--punteada::before {
	border-top-style: dashed;
}
.cta-ruta--horizontal .cta-ruta__textos {
	padding-top: 0;
	padding-right: 12px;
}
.cta-ruta--horizontal .cta-ruta__tramo {
	position: absolute;
	top: -30px;
	left: 56px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
   37. Renglón de canal de contacto (cta_tarjeta_canal)
   Decisión 109 (20-oct-2026, hoja 12): minimalista, como el ejemplo de
   Arturo (enmarchamx.com/contacto) con el estilo del sitio: orilla suave,
   el ícono en un cuadrito redondeado de color (WhatsApp en verde con el
   ícono oscuro, decisión 47: #101820 sobre #25d366 = 9:1; los demás en
   rojo con el ícono blanco), la etiqueta, el dato y una flechita. Todo el
   renglón es el enlace. Decisión 111 (20-oct-2026, hoja 9 de «Aún más
   MODIFICACIONES»): las redes sociales van en renglones iguales. Hasta la
   decisión 116 iban con el tono «tenue» (el cuadrito en rojo tenue,
   --rojo-suave, con el ícono rojo: 3.98:1; oscuro 4.95:1; el tono sigue
   disponible). Decisión 116 (22-oct-2026, hoja 2 de «algunos ajustes
   MODIFICACIONES (2)»: «que cada red social aparezca con su color propio,
   porque aparecen todas rojas»): tono «marca», el cuadrito con el color de
   cada red y el ícono blanco (el texto del renglón no cambia; para un ícono
   basta 3:1, y el blanco da 4:1 o más sobre lo que queda detrás del trazo):
     Instagram  su degradado, naranja abajo a la izquierda → rosa → morado
                arriba a la derecha (#f09433 · #e6683c · #dc2743 · #cc2366
                · #bc1888; detrás del ícono, del #e6683c al #cc2366: 3.3 a
                5.3:1)
     TikTok     negro con el ícono blanco (21:1) y el desfase cian (#25f4ee)
                y rosa (#fe2c55) de su logo; en oscuro, con una orilla
                blanca al 28 % para que el cuadrito negro no se pierda en la
                tarjeta (#000 sobre #172230 da 1.3:1)
     Facebook   #1877f2 (4.23:1)
     YouTube    #ff0000 (4:1)
   Los colores de las marcas son los mismos en claro y en oscuro. WhatsApp
   sigue en su verde y Correo y Reservaciones en rojo.
   --------------------------------------------------------------------- */
.cta-canal {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
	min-height: 76px;
	padding: 14px 20px 14px 14px;
	border: 1px solid var(--borde);
	border-radius: var(--r-campo);
	background: var(--tarjeta);
	color: var(--texto);
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
a.cta-canal:hover {
	border-color: var(--borde-fuerte);
	box-shadow: var(--sombra);
}
a.cta-canal:focus-visible {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
.cta-canal__icono {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: var(--cta-rojo);
	color: var(--cta-blanco);
}
.cta-canal--whatsapp .cta-canal__icono {
	background: var(--verde-whatsapp);
	color: var(--sobre-verde);
}
.cta-canal--tenue .cta-canal__icono {
	background: var(--rojo-suave);
	box-shadow: inset 0 0 0 1px var(--rojo-borde);
	color: var(--rojo-icono);
}
.cta-canal--neutro .cta-canal__icono {
	background: var(--chip-bg);
	color: var(--texto);
}
.cta-canal--instagram .cta-canal__icono {
	background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: #ffffff;
}
.cta-canal--tiktok .cta-canal__icono {
	background: #000000;
	color: #ffffff;
}
.cta-canal--tiktok .cta-canal__icono svg {
	filter: drop-shadow(-1px -1px 0 #25f4ee) drop-shadow(1px 1px 0 #fe2c55);
}
.tema-oscuro .cta-canal--tiktok .cta-canal__icono {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.cta-canal--facebook .cta-canal__icono {
	background: #1877f2;
	color: #ffffff;
}
.cta-canal--youtube .cta-canal__icono {
	background: #ff0000;
	color: #ffffff;
}
.cta-canal__textos {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.cta-canal__etiqueta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--titulo);
}
/* «Canal principal»: rótulo chico (en mayúsculas, decisión 104) */
.cta-canal__insignia {
	display: inline-flex;
	align-items: center;
	min-height: 20px;
	padding: 0 8px;
	border-radius: var(--r-pildora);
	background: var(--chip-bg);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--chip-texto);
}
.cta-canal__valor {
	font-size: 15px;
	line-height: 1.45;
	/* break-word (no anywhere): un correo o teléfono se pasa entero al
	   renglón siguiente y, si aun así no cabe, se corta antes de la «@»
	   (cta_sin_cortes()). */
	overflow-wrap: break-word;
	color: var(--texto-2);
}
.cta-canal__flecha {
	display: flex;
	flex: none;
	color: var(--texto-3);
	transition: color 0.18s ease, transform 0.18s ease;
}
a.cta-canal:hover .cta-canal__flecha {
	color: var(--texto);
}
@media (prefers-reduced-motion: no-preference) {
	a.cta-canal:hover .cta-canal__flecha {
		transform: translateX(3px);
	}
}
@media (max-width: 767px) {
	.cta-canal {
		gap: 14px;
		padding: 12px 16px 12px 12px;
	}
	.cta-canal__icono {
		width: 44px;
		height: 44px;
	}
	/* Mínimos de celular (decisión 55, §3.21): el dato es texto de lectura
	   (16 px) y el rótulo chico, 12 px. */
	.cta-canal__valor {
		font-size: 16px;
	}
	.cta-canal__insignia {
		font-size: 12px;
	}
}
/* Celular angosto: sin la flechita (todo el renglón es el enlace), para que
   el correo quepa en un renglón a 390 px y en dos, cortado antes de la «@»,
   a 320 px. */
@media (max-width: 479px) {
	.cta-canal {
		gap: 12px;
		padding-right: 12px;
	}
	.cta-canal__icono {
		width: 40px;
		height: 40px;
	}
	.cta-canal__flecha {
		display: none;
	}
}

/* ---------------------------------------------------------------------
   38. Tarjeta de destino con foto (cta_tarjeta_destino)
   --------------------------------------------------------------------- */
.cta-destino {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	min-height: var(--cta-destino-alto, 640px);
	overflow: hidden;
	border-radius: 120px 28px 120px 28px;
	background: var(--tarjeta);
	color: var(--cta-blanco);
}
.cta-destino__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.cta-destino__foto img,
.cta-destino__foto .cta-imagen-vacia {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 45%;
	transition: transform 0.5s ease;
}
.cta-destino::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	height: min(420px, 75%);
	background: linear-gradient(0deg, rgba(16, 24, 32, 0.96) 0%, rgba(16, 24, 32, 0.82) 45%, rgba(16, 24, 32, 0) 100%);
	pointer-events: none;
}
.cta-destino__cuerpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	padding: 52px;
}
.cta-destino__titulo {
	font-size: calc(var(--t-h1) * 1.08);
	line-height: 1.05;
	color: var(--cta-blanco);
	overflow-wrap: anywhere;
}
.cta-destino__texto {
	max-width: 440px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-destino__boton {
	margin-top: 8px;
}
.cta-destino__enlace {
	color: inherit;
	text-decoration: none;
}
.cta-destino__enlace::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}
.cta-destino__enlace:focus-visible {
	outline: none;
}
.cta-destino:focus-within {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
.cta-destino:hover .cta-destino__foto img {
	transform: scale(1.03);
}
/* Compacta */
.cta-destino--compacta {
	min-height: var(--cta-destino-alto, 300px);
	border-radius: 88px 24px 88px 24px;
}
.cta-destino--compacta .cta-destino__cuerpo {
	gap: 10px;
	padding: 24px 26px 28px;
}
.cta-destino--compacta .cta-destino__titulo {
	font-size: 30px;
}
.cta-destino__flecha {
	position: absolute;
	top: 20px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
	color: var(--cta-blanco);
	transition: transform 0.18s ease;
}
.cta-destino--compacta:hover .cta-destino__flecha {
	transform: translateX(3px);
}
/* Foto */
.cta-destino--foto {
	min-height: var(--cta-destino-alto, 400px);
	border-radius: 88px 24px 88px 24px;
}
.cta-destino--foto::before {
	height: 50%;
	background: linear-gradient(0deg, rgba(16, 24, 32, 0.85) 0%, rgba(16, 24, 32, 0) 100%);
}
.cta-destino__etiqueta {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 8px;
	max-width: calc(100% - 64px);
	min-height: 32px;
	margin: 0 32px 30px;
	padding: 0 14px;
	border: 1px solid rgba(229, 225, 230, 0.28);
	border-radius: var(--r-pildora);
	background: rgba(16, 24, 32, 0.8);
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--cta-blanco);
	font-weight: var(--peso-etiqueta);
}
.cta-destino__etiqueta .cta-icono {
	flex: none;
	color: var(--cta-rojo);
}
/* Tarjeta (foto arriba, cuerpo claro) */
.cta-destino--tarjeta {
	justify-content: flex-start;
	min-height: 0;
	border: 1px solid var(--borde);
	border-radius: 88px 24px 88px 24px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	color: var(--texto);
}
.cta-destino--tarjeta::before {
	display: none;
}
.cta-destino--tarjeta .cta-destino__foto {
	position: relative;
	inset: auto;
	z-index: auto;
	height: 220px;
	background: var(--cta-noche);
}
.cta-destino--tarjeta .cta-destino__cuerpo {
	flex: 1;
	gap: 16px;
	padding: 30px 32px 34px;
}
.cta-destino--tarjeta .cta-destino__titulo {
	font-size: 28px;
	color: var(--titulo);
}
.cta-destino__linea {
	display: block;
	width: 40px;
	height: 2px;
	background: var(--cta-rojo);
}
.cta-destino--tarjeta .cta-destino__texto {
	font-size: 14.5px;
	color: var(--texto-2);
}
.cta-destino--tarjeta .cta-destino__boton {
	margin-top: auto;
	padding-top: 8px;
}
@media (max-width: 767px) {
	.cta-destino {
		min-height: min(var(--cta-destino-alto, 560px), 560px);
		border-radius: 64px 20px 64px 20px;
	}
	.cta-destino__cuerpo {
		padding: 28px 22px;
	}
	.cta-destino__titulo {
		font-size: 34px;
	}
	.cta-destino--compacta,
	.cta-destino--foto {
		min-height: var(--cta-destino-alto, 280px);
	}
	.cta-destino--compacta .cta-destino__titulo,
	.cta-destino--tarjeta .cta-destino__titulo {
		font-size: 26px;
	}
}

/* ---------------------------------------------------------------------
   39. Tarjeta de hotel (cta_tarjeta_hotel)
   --------------------------------------------------------------------- */
.cta-rejilla-hoteles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--separacion);
}
@media (max-width: 1023px) {
	.cta-rejilla-hoteles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 767px) {
	.cta-rejilla-hoteles {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}
.cta-hotel {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: 88px 24px 88px 24px;
	background: var(--tarjeta);
	box-shadow: var(--sombra);
}
.cta-hotel__foto {
	position: relative;
	flex: none;
	height: 220px;
	overflow: hidden;
	background: var(--cta-noche);
}
.cta-hotel__foto > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
}
.cta-hotel__cuerpo {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	gap: 28px;
	padding: 30px 32px 34px;
}
.cta-hotel__cabeza {
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
}
.cta-hotel__lugar {
	display: flex;
	align-items: center;
	gap: 12px;
	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-hotel__lugar .cta-icono {
	flex: none;
	color: var(--cta-rojo);
}
.cta-hotel__lugar-linea {
	display: block;
	flex: none;
	width: 2px;
	height: 22px;
	background: var(--cta-rojo);
}
.cta-hotel__nombre {
	font-size: 21px;
	line-height: 1.2;
}
.cta-hotel__ubicacion {
	font-size: 15px;
	line-height: 1.55;
	color: var(--texto-2);
}
.cta-hotel__direccion {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--texto-3);
}
.cta-hotel__direccion .cta-icono {
	flex: none;
	margin-top: 2px;
}
.cta-hotel__amenidades {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 4px;
}
.cta-hotel__amenidades-titulo {
	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-hotel .cta-hotel__boton {
	min-height: 52px;
}
/* Estrellas de los recorridos en dorado (decisión 104; decisión 59: las
   tarjetas de Recargado Plus y La Gran Ruta). El dorado claro #e2a400
   solo da 2.2:1 sobre blanco: cada estrella lleva una orilla dorada más
   oscura (--estrella-borde #a87a00, 3.85:1 sobre blanco y 3.49:1 sobre
   #f5f3f6) para pasar el 3:1 de los gráficos. La orilla mide 1 px de
   pantalla por fuera del dorado, sea cual sea el tamaño de la estrella:
   el trazo de 2 px no se escala con el viewBox (non-scaling-stroke) y se
   pinta antes que el relleno (paint-order), que tapa su mitad de adentro.
   En modo oscuro el dorado #f5c542 da 9.9:1 sobre la tarjeta y la orilla
   es del mismo color. El número de estrellas lo dice la etiqueta
   («4 estrellas»). */
.cta-estrellas {
	display: inline-flex;
	gap: 3px;
	color: var(--estrella);
}
.cta-estrellas__icono {
	flex: none;
	overflow: visible;
}
.cta-estrellas__icono path {
	stroke: var(--estrella-borde);
	stroke-width: 2px;
	stroke-linejoin: round;
	paint-order: stroke;
	vector-effect: non-scaling-stroke;
}
/* La mitad llena de la media estrella va sin orilla: su lado recto
   pintaría una raya oscura a la mitad. El contorno de la estrella (el
   primer trazo) ya la rodea. */
.cta-estrellas__icono--media g[fill="currentColor"] path {
	stroke: none;
}
@media (max-width: 767px) {
	.cta-hotel {
		border-radius: 64px 20px 64px 20px;
	}
	.cta-hotel__cuerpo {
		padding: 26px 22px 28px;
	}
	.cta-hotel__nombre {
		font-size: 19px;
	}
}

/* ---------------------------------------------------------------------
   40. Tarjeta de tour de un día
   (La variante ancha —horizontal, la última de un número impar— se quitó
   con la decisión 99, hoja 6: con 4 por renglón ya no hacía falta.)
   --------------------------------------------------------------------- */
/* «Inicia en …» es desde la decisión 103 un dato del renglón de datos de
   la tarjeta (§5, .cta-tarjeta-tour__datos). */

/* ---------------------------------------------------------------------
   41. Vista de demostración (/?cta-demo=componentes, solo local)
   --------------------------------------------------------------------- */
.cta-demo__rotulo {
	margin: 0 0 24px;
	font-size: var(--t-etiqueta);
	letter-spacing: var(--espaciado-etiqueta);
	text-transform: uppercase;
	color: var(--texto-3);
	font-weight: var(--peso-etiqueta);
	line-height: 1.2;
}
.cta-demo__pila {
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.cta-demo__dos,
.cta-demo__tres {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--separacion);
	margin-block: 32px;
}
.cta-demo__dos--arriba {
	align-items: start;
}
.cta-demo__tres {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
}
@media (max-width: 1023px) {
	.cta-demo__dos,
	.cta-demo__tres {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Renglones de canal (decisión 109), como en Contacto */
.cta-demo__canales {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 560px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

/* =====================================================================
   42. Celular más legible y menos saturado (decisión 55, 1-oct-2026)
   Menos información a la vez, más aire, textos secundarios plegados y
   jerarquía clara. Casi todo es solo para celular (< 768 px): tableta y
   computadora no cambian.
   ===================================================================== */

/* Pliegue «Ver más» (tema.js, [data-cta-pliegue-boton]; botón:
   template-parts/paginas/boton-pliegue.php). Sin JS el botón no sale. */
.cta-pliegue__accion {
	display: flex;
	justify-content: center;
	margin: 28px 0 0;
}
.cta-pliegue__accion[hidden] {
	display: none;
}
.cta-pliegue__boton .cta-btn__flecha {
	transition: transform 0.2s ease;
}
.cta-btn.cta-pliegue__boton:hover .cta-btn__flecha {
	transform: none;
}
.cta-btn.cta-pliegue__boton[aria-expanded="true"] .cta-btn__flecha {
	transform: rotate(180deg);
}
@media (max-width: 767px) {
	.es-plegable .es-plegado {
		display: none !important;
	}
}

/* Portadas: el texto de apoyo largo solo en tableta y computadora
   (clase cta-hero--texto-escritorio en cta_hero()); el titular, los
   botones y el subtítulo corto se quedan. */
@media (max-width: 767px) {
	.cta-hero--texto-escritorio .cta-hero__texto {
		display: none;
	}
}

/* Acordeón del pie en celular (tema.js, [data-cta-acordeon-movil]) */
.cta-acordeon__icono {
	display: none;
}
.cta-acordeon__boton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: 56px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: 1;
	text-align: left;
	text-transform: inherit;
	cursor: pointer;
}
.cta-acordeon__boton .cta-acordeon__icono {
	display: block;
	flex: none;
	color: var(--cta-rojo);
	transition: transform 0.2s ease;
}
.cta-acordeon__boton[aria-expanded="true"] .cta-acordeon__icono {
	transform: rotate(180deg);
}

@media (max-width: 767px) {
	/* Pie: logo y bienvenida, luego Contacto, Visítanos y Páginas plegados
	   (una fila cada uno), redes y la barra legal. Sin el rótulo gigante de
	   contorno (decorativo). */
	.cta-pie {
		padding-top: 48px;
	}
	.cta-pie__columnas {
		gap: 0;
	}
	.cta-pie__marca {
		gap: 16px;
		padding-bottom: 28px;
	}
	.cta-pie__bienvenida {
		font-size: 16px;
		line-height: 1.6;
	}
	.cta-pie .es-acordeon {
		border-top: 1px solid var(--pie-borde);
	}
	.cta-pie .es-acordeon .cta-pie__titulo {
		margin: 0;
		font-size: 14px;
	}
	.cta-pie .es-acordeon [data-cta-acordeon-panel] {
		padding: 4px 0 24px;
	}
	.cta-pie__datos a,
	.cta-pie__dato {
		font-size: 16px;
	}
	.cta-pie__redes {
		margin-top: 0;
		padding-top: 28px;
		border-top: 1px solid var(--pie-borde);
	}
	.cta-pie__gigante {
		display: none;
	}
	/* Abajo, aire para el botón flotante de WhatsApp (24 + 62 px): al llegar
	   al final de la página ya no tapa el último renglón (a 320 px tapaba
	   «CHIHUAHUA TE AMO TOURS 2026»). */
	.cta-pie__barra {
		margin-top: 32px;
		padding-bottom: calc(104px + env(safe-area-inset-bottom));
	}
}

/* Textos corridos de los componentes: 16 px en celular */
@media (max-width: 767px) {
	.cta-tarjeta-tour__teaser,
	.cta-tarjeta-icono__texto,
	.cta-hotel__ubicacion,
	.cta-destino--tarjeta .cta-destino__texto,
	.cta-aviso--info .cta-aviso__texto {
		font-size: 16px;
		line-height: 1.55;
	}
	.cta-hotel__direccion {
		font-size: 16px;
	}
	/* Condición del «Desde» (dato de dinero): 14 px como mínimo. */
	.cta-desde__nota,
	.cta-desde--reserva .cta-desde__nota {
		font-size: 14px;
	}
	/* (El «Inicia en …» de las tarjetas de tour va a 14 px con su renglón de
	   datos, §42 abajo.) */
	/* Texto de apoyo de los encabezados de sección: 16 px. */
	.cta-encabezado-seccion__lado > p:not([class]) {
		font-size: 16px;
		line-height: 1.6;
	}
	/* Campos de formulario a 16 px: con letra menor, Safari de iPhone acerca
	   la página al tocarlos (Contacto, «Cotizar por WhatsApp», «Ordenar»). */
	.cta-campo__control,
	.cta-filtros__select select {
		font-size: 16px;
	}
	/* Extracto de las tarjetas del blog: 3 renglones (el artículo completo
	   está a un toque). */
	.cta-tarjeta-entrada__extracto {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		font-size: 16px;
		line-height: 1.55;
	}
}

/* Tarjeta de destino con foto arriba (Nosotros): en celular, el alto de su
   contenido (el alto mínimo de 560 px es para las de foto completa y
   dejaba un hueco entre los chips y el botón). */
@media (max-width: 767px) {
	.cta-destino--tarjeta {
		min-height: 0;
	}
}

/* Tarjeta de tour en celular (una columna; decisión 55: más legible y con
   aire): más relleno, título de 19 px, datos de 14 px, la frase completa
   (16 px, arriba), el precio de 24 px con su condición de 14 px y el botón
   rojo de 48 px de alto con letra de 15 px (decisión 109). */
@media (max-width: 767px) {
	.cta-tarjeta-tour__cuerpo {
		gap: 20px;
		padding: 20px 22px 22px;
	}
	.cta-tarjeta-tour__cabeza {
		gap: 10px;
	}
	.cta-tarjeta-tour__titulo {
		font-size: 19px;
	}
	.cta-tarjeta-tour__datos {
		font-size: 14px;
	}
	.cta-tarjeta-tour__dato .cta-icono {
		margin-top: 2px;
	}
	.cta-tarjeta-tour__pie {
		padding-top: 16px;
	}
	.cta-tarjeta-tour__pie .cta-desde + .cta-tarjeta-tour__boton {
		margin-top: 18px;
	}
	.cta-tarjeta-tour__boton {
		min-height: 48px;
		font-size: 15px;
	}
}

/* Filas de chips que se deslizan a lo ancho en celular (amenidades de los
   hoteles, chips de las tarjetas de destino) en vez de ocupar 3 o 4
   renglones. Los bordes se desvanecen para indicar que hay más. */
@media (max-width: 767px) {
	.cta-hotel__amenidades .cta-chips,
	.cta-destino__chips,
	.cta-chips--desliza {
		flex-wrap: nowrap;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		/* Llega a los bordes de la tarjeta (relleno de 22 px en celular). */
		margin-inline: calc(-1 * var(--cta-desliza-borde, 22px));
		padding: 2px var(--cta-desliza-borde, 22px);
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 36px), transparent 100%);
	}
	.cta-hotel__amenidades .cta-chips::-webkit-scrollbar,
	.cta-destino__chips::-webkit-scrollbar,
	.cta-chips--desliza::-webkit-scrollbar {
		display: none;
	}
	.cta-hotel__amenidades .cta-chip,
	.cta-destino__chips .cta-chip,
	.cta-chips--desliza .cta-chip {
		flex: none;
		max-width: none;
		white-space: nowrap;
	}
	/* Chrome deja enfocar con Tab estas filas porque se deslizan: llevan el
	   anillo de los demás controles (2 px del color del texto; la máscara
	   desvanece sus extremos), no el contorno azul delgado del navegador. */
	.cta-hotel__amenidades .cta-chips:focus-visible,
	.cta-destino__chips:focus-visible,
	.cta-chips--desliza:focus-visible {
		outline: 2px solid var(--texto);
		outline-offset: -2px;
	}
	/* En la tarjeta de destino (su cuerpo alinea al inicio) la fila ocupa
	   todo el ancho de la tarjeta, para deslizarse en vez de quedar recortada
	   («Tours en El Chepe» de Otros destinos), y lleva su relleno: base.css
	   quita el relleno de toda lista con clase (ul[class], que pesa más que
	   una clase sola). */
	.cta-destino__cuerpo > .cta-chips.cta-destino__chips {
		align-self: stretch;
		padding: 2px var(--cta-desliza-borde, 22px);
	}
}

/* Insignias, conteos y etiquetas en celular (decisión 55; revisión del
   1-oct-2026, noche): nada por debajo de 12 px; las etiquetas de los campos
   y el renglón de Reservaciones (656), a 14 px. */
@media (max-width: 767px) {
	.cta-anclas__conteo {
		font-size: 12px;
	}
	.cta-campo__etiqueta,
	.cta-enlace-llamada {
		font-size: 14px;
	}
	/* Contacto del menú del celular (revisión «pulir-2»): el correo, el
	   WhatsApp, Reservaciones y el horario (una frase) se leen a 16 px, como
	   en Contacto. Reservaciones sigue en gris (poco protagonismo, decisión 5). */
	.cta-panel__contacto,
	.cta-panel__contacto a,
	.cta-panel__contacto li > span,
	.cta-panel__contacto .cta-panel__tel {
		font-size: 16px;
	}
}

/* Bajo 360 px los botones con ícono antes del texto y flecha después se
   partían en 2 o 3 renglones («Reserva ahora» de las tarjetas de hotel,
   «Conoce las opiniones de nuestros clientes» de Nosotros): la flecha es
   decorativa y se quita, y el botón se junta un poco. Solo la flecha
   (.cta-icono--flecha): el ícono de «se abre en otra pestaña» (externo) y
   el chevron de un botón que abre y cierra dicen algo y se quedan. */
@media (max-width: 359px) {
	.cta-btn > .cta-icono:not(.cta-btn__flecha) ~ .cta-btn__flecha.cta-icono--flecha {
		display: none;
	}
	.cta-btn--g:has(> .cta-icono:not(.cta-btn__flecha)),
	.cta-btn--m:has(> .cta-icono:not(.cta-btn__flecha)) {
		gap: 8px;
		padding-inline: 16px;
		letter-spacing: 0;
	}
}

/* ---------------------------------------------------------------------
   43. Correos y teléfonos sin cortes (cta_sin_cortes(), revisión del
   1-oct-2026): el correo va en un bloque en línea que, si no cabe al final
   del renglón, pasa entero al siguiente; si es más ancho que su caja
   (320 px), se corta solo antes de la «@» (<wbr>). Nunca a media palabra.
   Los teléfonos llevan espacios que no se cortan (desde PHP).
   --------------------------------------------------------------------- */
.cta-sin-cortes {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: break-word;
	word-break: normal;
	/* Un bloque en línea no recibe el subrayado del enlace: lo copia. */
	text-decoration: inherit;
}
.cta-tarjeta-roja__llamada:hover .cta-sin-cortes,
.cta-legal-pestanas__correo:hover .cta-sin-cortes {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
   45. Tarjetas con fotos: carrusel que abre el visor y clases del tren
   Decisión 109 (20-oct-2026, hojas 4 y 5 de «Más MODIFICACIONES»): en las
   tarjetas de «Hoteles del viaje» (tour.css §14) y de «Diferencia entre
   clases» (fichas de tour y El Chepe) no hay «Ver fotos»: la foto grande
   es un enlace a la foto completa que con JavaScript abre el visor en ella
   (tema.js). .cta-foto-visor: la foto llena su caja (cover), se acerca un
   poco al pasar el ratón y, con el teclado, lleva un anillo de dos tonos
   por dentro de la foto (la tarjeta recorta lo que sale de ella), que se ve
   sobre fotos claras y oscuras.
   Carrusel (decisión 111, hoja 4 de «Aún más MODIFICACIONES»: «ir
   cambiando de imagen como carrusel, las imágenes pequeñas pasarían a la
   imagen grande»; cta_tour_fotos_tarjeta(), assets/js/fotos-tarjeta.js):
   .cta-fotos-tarjeta envuelve la foto grande. Con 2 fotos o más lleva, sobre
   la foto, las flechas (círculos de 44 px con el fondo de las tarjetas, a
   media altura) y el contador «2 / 8» (abajo a la derecha, blanco sobre un
   velo oscuro); las dos están escondidas sin JavaScript. Con JavaScript
   (.es-carrusel) lo horizontal del dedo es para la tarjeta (touch-action:
   pan-y) y la foto nueva entra con un fundido corto. Al pie,
   ul.cta-fotos-tarjeta__miniaturas: todas las fotos en cajas 4:3, 3 a la
   vista a todo el ancho; con más de 3 (--desliza) la fila se desliza de
   lado y la cuarta se asoma. La que está en la grande (aria-current) va
   entera y con un anillo de dos tonos; las demás, un poco apagadas. El
   relleno de la fila deja ver el anillo y el de foco.
   Clases del tren (decisión 107, hoja 8 de «Más ajustes»: «que la gente
   pueda dar siguiente para que conozca cada clase con fotos»;
   template-parts/tour/clases-lista.php): una tarjeta por clase, como las
   de los hoteles: arriba la foto grande (3:2) y al pie sus fotos chicas. Una
   clase sin foto lleva el ícono de la clase en un círculo y no se estira al
   alto de las demás. Acomodo: 3 por renglón desde 1024 px. Con 3 clases, de
   768 a 1023 px y en celular, una fila que se desliza de lado
   (scroll-snap) y llega a las orillas de la pantalla, con la siguiente
   tarjeta asomándose a la derecha (unas 2.3 tarjetas a la vista en tableta
   y el 85 % del ancho en celular). Con 2 clases, 2 columnas desde 768 px y
   la fila en celular. Con una, desde 768 px a lo ancho: foto a la
   izquierda y texto a la derecha, como un solo hotel.
   --------------------------------------------------------------------- */
.cta-foto-visor {
	position: relative;
	display: block;
	overflow: hidden;
	cursor: zoom-in;
}
.cta-foto-visor img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}
.cta-foto-visor:hover img {
	transform: scale(1.03);
}
/* El anillo va en ::after, encima de la foto: oscuro por fuera y claro por
   dentro (en modo oscuro, al revés). El contorno transparente es para el
   modo de alto contraste de Windows, que lo pinta. */
.cta-foto-visor:focus-visible {
	outline: 3px solid transparent;
	outline-offset: -3px;
}
.cta-foto-visor:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 3px solid var(--texto);
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px var(--fondo);
	pointer-events: none;
}
/* La foto grande y su carrusel */
.cta-fotos-tarjeta {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.cta-fotos-tarjeta > .cta-foto-visor {
	flex: 1 1 auto;
}
.cta-fotos-tarjeta.es-carrusel {
	touch-action: pan-y pinch-zoom;
}
.cta-fotos-tarjeta.es-carrusel .cta-foto-visor img {
	transition: transform 0.3s ease, opacity 0.2s ease;
}
.cta-fotos-tarjeta .cta-foto-visor img.es-cambiando {
	opacity: 0.35;
}
.cta-fotos-tarjeta__flecha {
	position: absolute;
	top: 50%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 1px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	box-shadow: 0 2px 10px rgba(16, 24, 32, 0.28);
	color: var(--texto);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cta-fotos-tarjeta__flecha[hidden] {
	display: none;
}
.cta-fotos-tarjeta__flecha--anterior {
	left: 12px;
}
.cta-fotos-tarjeta__flecha--siguiente {
	right: 12px;
}
.cta-fotos-tarjeta__flecha:hover {
	border-color: var(--texto);
	background: var(--texto);
	color: var(--fondo);
}
/* Anillo de dos tonos (se ve sobre fotos claras y oscuras); el contorno
   transparente es para el alto contraste de Windows. */
.cta-fotos-tarjeta__flecha:focus-visible {
	outline: 2px solid transparent;
	box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 5px var(--texto);
}
/* El contador «1 / 11» va abajo a la IZQUIERDA (decisión 116, verificación
   final): la marca de agua de las fotos de la agencia va abajo a la derecha
   (en el archivo o pintada por tema.js) y el contador la tapaba (la foto del
   dron del Hotel Mirador en «Hoteles del viaje», las fotos del tren de la
   agencia en las tarjetas de las clases). */
.cta-fotos-tarjeta__contador {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 1;
	margin: 0;
	padding: 4px 10px;
	border-radius: var(--r-pildora);
	background: rgba(16, 24, 32, 0.74);
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
	color: #fff;
	pointer-events: none;
}
.cta-fotos-tarjeta__contador[hidden] {
	display: none;
}
/* Las fotos chicas: una fila; «ul.» gana a «ul[class] { padding: 0 }» de
   base.css. El relleno de 4 px deja ver los anillos; el margen negativo
   alinea las fotos con el texto. */
ul.cta-fotos-tarjeta__miniaturas {
	position: relative;
	display: grid;
	grid-auto-columns: calc((100% - 20px) / 3);
	grid-auto-flow: column;
	gap: 10px;
	margin: auto -4px -4px;
	padding: 8px 4px 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x proximity;
	scroll-padding-inline: 4px;
	scrollbar-width: none;
	list-style: none;
}
ul.cta-fotos-tarjeta__miniaturas::-webkit-scrollbar {
	display: none;
}
ul.cta-fotos-tarjeta__miniaturas--desliza {
	grid-auto-columns: calc((100% - 30px) / 3.3);
}
.cta-fotos-tarjeta__miniatura {
	min-width: 0;
	margin: 0;
	scroll-snap-align: start;
}
.cta-fotos-tarjeta__mini {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 12px;
	background: var(--fondo-hondo);
	opacity: 0.78;
	cursor: pointer;
	transition: opacity 0.18s ease, box-shadow 0.18s ease;
}
.cta-fotos-tarjeta__mini img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-fotos-tarjeta__mini:hover,
.cta-fotos-tarjeta__mini:focus-visible {
	opacity: 1;
}
.cta-fotos-tarjeta__mini[aria-current="true"] {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 4px var(--texto);
}
.cta-fotos-tarjeta__mini:focus-visible {
	outline: 2px solid var(--rojo-texto);
	outline-offset: 2px;
}
.cta-tour-clases {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-tour-clases--1 {
	grid-template-columns: minmax(0, 1fr);
	max-width: 980px;
}
.cta-tour-clases--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cta-tour-clase {
	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-clase--sin-foto {
	align-self: start;
}
.cta-tour-clase__portada {
	aspect-ratio: 3 / 2;
	background: var(--fondo-hondo);
}
.cta-tour-clase__info {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
}
.cta-tour-clase__icono {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 4px;
	border: 1.5px solid var(--borde-fuerte);
	border-radius: var(--r-pildora);
	color: var(--texto);
}
.cta-tour-clase__nombre {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--titulo);
}
.cta-tour-clase__texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--texto-2);
}
/* El texto del tour sigue a «Primera Clase:» y empieza en minúscula
   («encuentra el confort…»); separado del nombre, solo su primera letra se
   ve en mayúscula (el texto no cambia). */
.cta-tour-clase__texto::first-letter {
	text-transform: uppercase;
}
@media (min-width: 768px) {
	/* Una sola clase: foto a la izquierda, texto a la derecha. */
	.cta-tour-clases--1 .cta-tour-clase:not(.cta-tour-clase--sin-foto) {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.cta-tour-clases--1 .cta-tour-clase__portada {
		aspect-ratio: auto;
		min-height: 300px;
	}
	.cta-tour-clases--1 .cta-tour-clase__info {
		padding: 28px 30px;
	}
	.cta-tour-clases--1 .cta-tour-clase--sin-foto {
		max-width: 520px;
	}
}
/* Fila que se desliza. Llega a las orillas de la pantalla (sale del
   margen del contenedor y lo pone de relleno) y deja aire arriba y abajo
   para la sombra de las tarjetas. Chrome la deja enfocar con Tab: lleva el
   anillo de los demás controles. Con dos clases en el selector: base.css
   quita el relleno de toda lista con clase (ul[class], que pesa más que
   una clase sola). */
@media (max-width: 1023px) {
	.cta-tour-clases.cta-tour-clases--3 {
		grid-template-columns: none;
		grid-auto-columns: calc((100% - 20px) / 2.3);
		grid-auto-flow: column;
		gap: 20px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--margen);
		scrollbar-width: thin;
		margin: -20px calc(-1 * var(--margen)) -16px;
		padding: 20px var(--margen) 32px;
	}
	.cta-tour-clases.cta-tour-clases--3 > .cta-tour-clase {
		scroll-snap-align: start;
	}
	.cta-tour-clases.cta-tour-clases--3:focus-visible {
		outline: 2px solid var(--texto);
		outline-offset: -2px;
	}
}
@media (max-width: 767px) {
	.cta-tour-clases.cta-tour-clases--2 {
		grid-template-columns: none;
		grid-auto-flow: column;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--margen);
		scrollbar-width: thin;
		margin: -20px calc(-1 * var(--margen)) -16px;
		padding: 20px var(--margen) 32px;
	}
	.cta-tour-clases.cta-tour-clases--2 > .cta-tour-clase {
		scroll-snap-align: start;
	}
	.cta-tour-clases.cta-tour-clases--2:focus-visible {
		outline: 2px solid var(--texto);
		outline-offset: -2px;
	}
	.cta-tour-clases.cta-tour-clases--2,
	.cta-tour-clases.cta-tour-clases--3 {
		grid-auto-columns: 85%;
		gap: 14px;
	}
	.cta-tour-clase__info {
		padding: 18px;
	}
	.cta-tour-clase__nombre {
		font-size: 19px;
	}
	.cta-tour-clase__texto {
		font-size: 16px;
		line-height: 1.6;
	}
	ul.cta-fotos-tarjeta__miniaturas {
		grid-auto-columns: calc((100% - 16px) / 3);
		gap: 8px;
	}
	/* En la fila de clases a 320 px las chicas quedaban de 53 × 40: al menos
	   60 px de ancho (45 de alto) para tocarlas con el dedo. */
	ul.cta-fotos-tarjeta__miniaturas--desliza {
		grid-auto-columns: max(60px, calc((100% - 24px) / 3.3));
	}
	.cta-fotos-tarjeta__flecha--anterior {
		left: 10px;
	}
	.cta-fotos-tarjeta__flecha--siguiente {
		right: 10px;
	}
	.cta-fotos-tarjeta__contador {
		left: 10px;
		bottom: 10px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.cta-foto-visor img,
	.cta-fotos-tarjeta.es-carrusel .cta-foto-visor img,
	.cta-fotos-tarjeta__flecha,
	.cta-fotos-tarjeta__mini {
		transition: none;
	}
	.cta-foto-visor:hover img {
		transform: none;
	}
}

/* =====================================================================
   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.
   ===================================================================== */
@media (max-width: 767px) {
	/* Etiquetas de los filtros («Iniciando desde», «Ordenar»), como las de
	   los campos (.cta-campo__etiqueta). */
	.cta-filtros__etiqueta,
	.cta-filtros__ordenar {
		font-size: 14px;
	}
}

/* =====================================================================
   46. Fotos protegidas (decisión 115, 21-oct-2026; COMPONENTES.md §3.52)
   El dueño: «si descargan la foto con guardar pues que se descargue un
   archivo y no la foto, si quieres que el archivo diga "ah tramposillo"».
   - Señuelo (cta_senuelo(), cta_imagen(); tema.js para las fotos que
     aparecen después): una copia transparente de assets/img/
     ah-tramposillo.jpg encima de cada foto, dentro de su enlace o botón.
     «Guardar imagen como», «Copiar imagen» y «Abrir imagen en una pestaña
     nueva» se llevan ese archivo. Tapa la caja de su papá (position:
     absolute; inset: 0), no ocupa lugar ni se ve, y los clics llegan al
     enlace o botón como antes. Las medidas van con !important porque
     varias reglas de fotos («.x img», «.x > img») también le tocan.
   - El papá sin posición la toma aquí sin peso (:where, cualquier regla
     con posición gana): enmarca solo la foto. Una foto suelta junto a
     textos va con su señuelo en .cta-foto-marco (cta_imagen( …,
     array( 'senuelo' => 'marco' ) )).
   - En la portada con fundido hay un solo señuelo, encima de las fotos
     (que llegan a z-index: 2, §14).
   - En las tarjetas con enlace estirado, tema.js pone otro señuelo dentro
     del enlace, encima de su ::after y del tamaño de la foto
     (.cta-senuelo--enlace). Lo que va encima de la foto dentro de su
     enlace o botón, y las cajas sin fondo del texto de las portadas y
     bandas, dejan pasar el puntero: así lo de arriba, en la foto, es el
     señuelo (o un texto, enlace o botón).
   - Fotos y señuelos: sin el menú del dedo presionado de iOS, sin
     seleccionar y sin arrastrar. El clic derecho y el arrastre los frena
     tema.js, con el aviso de abajo.
   ===================================================================== */
.cta-senuelo {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: auto !important;
	object-fit: cover;
}
.cta-senuelo--fundido {
	z-index: 3 !important;
}
/* El señuelo que tema.js pone dentro de un enlace estirado (tarjetas):
   tema.js le da la caja de la foto y el z-index de encima del ::after. Ese
   enlace NO toma posición (su ::after debe seguir tapando la tarjeta). */
:where(:is(a, button, div, figure, li, span):has(> .cta-senuelo:not(.cta-senuelo--enlace))),
:where(.cta-foto-marco, .cta-entrada__figura, .cta-lightbox__figura, .cta-inicio-mapa__ficha-foto) {
	position: relative;
}
.cta-foto-marco {
	display: block;
}
/* El :has() va dentro de :is() (lista que perdona): un navegador sin :has()
   ignora solo ese selector y no toda la regla. */
.cta-senuelo,
.cta-img,
.cta-img-articulo,
.cta-lightbox__figura img,
:is(:where(a, button):has(> .cta-senuelo:not(.cta-senuelo--enlace))) {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}
/* Lo que va encima de la foto dentro de su enlace o botón («+95 fotos» y
   el nombre del lugar del mosaico, el velo, el botón de reproducir y la
   duración del video) deja pasar el puntero al señuelo: el clic llega igual
   al enlace o botón, y «Guardar imagen» se lleva el señuelo también ahí. */
:where(a, button):has(> .cta-senuelo:not(.cta-senuelo--enlace)) > :not(img, picture) {
	pointer-events: none;
}
/* Portadas a sangre y bandas con foto de fondo: las cajas del texto (sin
   fondo propio) dejan pasar el puntero a la foto, así llega al señuelo en
   toda la foto y no a una caja vacía. En la portada los textos ya lo dejan
   pasar (§14, para deslizar) y los enlaces, botones y campos lo reciben; en
   la banda, los textos y botones lo siguen recibiendo. */
.cta-hero--sangre :is(.cta-hero__interior, .cta-hero__extra, .cta-hero__pie),
.cta-banda-foto :is(.cta-banda-foto__interior, .cta-banda-foto__contenido) {
	pointer-events: none;
}
.cta-hero--sangre :is(.cta-hero__interior, .cta-hero__extra, .cta-hero__pie) :is(a, button, input, select, textarea, label, summary, [tabindex], .cta-hero__media),
.cta-banda-foto__contenido > * {
	pointer-events: auto;
}
/* Controles de un carrusel encima de su foto (tarjetas de /hoteles/): entre
   las flechas y los puntos, la franja deja pasar el puntero a la foto (al
   señuelo y al aviso del clic derecho); las flechas y los puntos lo siguen
   recibiendo. */
.cta-carrusel--tarjeta .cta-carrusel__controles {
	pointer-events: none;
}
.cta-carrusel--tarjeta .cta-carrusel__controles :is(a, button, [tabindex]) {
	pointer-events: auto;
}
/* Marca de agua a la vista (tema.js, «Marca de agua a la vista»): cuando el
   recorte de una foto con marca (object-fit: cover) deja la marca del
   archivo fuera de lo que se ve, o el velo de una portada la tapa, va
   encima esta copia con el mismo aspecto que la muestra «D»: el logo blanco
   al 55 %, abajo a la derecha (tema.js le da el lugar y el tamaño: 9 % del
   ancho de lo que se ve, margen de 2.5 %, o más en una esquina curva; sube
   si choca con un renglón de texto o un botón). No recibe clics ni ocupa
   lugar; en las portadas y bandas va encima del velo (mismo z-index,
   después en el orden) y debajo del texto; en una portada con varias fotos
   sigue a la que se ve (sin copia si esa no lleva marca). Así una captura
   de pantalla también la lleva. */
.cta-marca-vista {
	position: absolute;
	display: block;
	margin: 0;
	padding: 0;
	background: url("../img/marca-agua.png") no-repeat 0 0 / 100% 100%;
	opacity: 0.55;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
.cta-marca-vista[hidden] {
	display: none;
}
.cta-marca-vista--velo {
	z-index: -1;
}
/* Aviso corto al intentar guardar o arrastrar una foto (tema.js: región
   aria-live «status», una vez cada pocos segundos). En el visor va dentro
   del <dialog> (encima de todo y lo leen los lectores de pantalla). Color
   del texto sobre el del fondo: oscuro en el modo claro y blanco en el
   oscuro (17:1); en el visor, siempre blanco. Va abajo, en medio, sin
   tapar el botón flotante de WhatsApp (celular), la barra de «Cotizar» de
   los tours (--cta-alto-barra, tour.js) ni las flechas y el contador del
   visor. */
.cta-aviso-foto {
	position: fixed;
	bottom: calc(24px + env(safe-area-inset-bottom));
	left: 50%;
	z-index: 110;
	width: max-content;
	max-width: calc(100vw - 32px);
	margin: 0;
	padding: 12px 20px;
	border-radius: 14px;
	background: var(--texto);
	box-shadow: var(--sombra);
	color: var(--fondo);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.cta-aviso-foto.es-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}
@media (max-width: 767px) {
	.cta-aviso-foto {
		bottom: calc(102px + env(safe-area-inset-bottom));
	}
}
html.js:has(.cta-barra-reserva--tour:not(.es-oculta)) body > .cta-aviso-foto {
	bottom: calc(var(--cta-alto-barra, 76px) + 16px);
}
.cta-lightbox .cta-aviso-foto {
	bottom: calc(76px + env(safe-area-inset-bottom));
	background: #fff;
	color: #101820;
}
@media (prefers-reduced-motion: reduce) {
	.cta-aviso-foto {
		transform: translate(-50%, 0);
		transition: none;
	}
}

/* <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-btn {
		gap: calc(10 * var(--u));
	}
	.cta-btn--g {
		min-height: calc(56 * var(--u));
		padding: 0 calc(30 * var(--u));
	}
	.cta-btn--m {
		min-height: calc(48 * var(--u));
		padding: 0 calc(22 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-btn--s {
		min-height: calc(44 * var(--u));
		padding: 0 calc(20 * var(--u));
		font-size: calc(13 * var(--u));
	}
	.cta-btn--enlace {
		min-height: calc(44 * var(--u));
		padding: 0;
		gap: calc(8 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-btn--enlace .cta-btn__texto {
		padding-bottom: calc(3 * var(--u));
	}
	.cta-rotulo-mas {
		gap: calc(8 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-rotulo-mas__texto {
		padding-bottom: calc(3 * var(--u));
	}
	.cta-rotulo-boton {
		min-height: calc(44 * var(--u));
		padding: calc(10 * var(--u)) calc(20 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-icono-btn {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		padding: 0;
	}
	.cta-enlace-llamada {
		gap: calc(8 * var(--u));
		min-height: calc(44 * var(--u));
		font-size: calc(13 * var(--u));
	}
	.cta-etiqueta {
		gap: calc(8 * var(--u));
		min-height: calc(30 * var(--u));
		padding: 0 calc(14 * var(--u));
		font-size: var(--t-etiqueta);
	}
	.cta-insignia-nuevo {
		height: calc(22 * var(--u));
		margin-left: calc(8 * var(--u));
		padding: 0 calc(8 * var(--u));
		font-size: calc(12 * var(--u));
	}
	.cta-insignia-vigente {
		height: calc(24 * var(--u));
		margin-top: calc(8 * var(--u));
		padding: 0 calc(10 * var(--u));
		font-size: calc(10.5 * var(--u));
	}
	.cta-encabezado-seccion {
		gap: var(--e-5);
		margin-bottom: var(--e-8);
	}
	.cta-encabezado-seccion__principal {
		gap: calc(22 * var(--u));
	}
	.cta-encabezado-seccion__lado {
		gap: calc(12 * var(--u));
		max-width: calc(500 * var(--u));
		font-size: calc(16 * var(--u));
	}
	.cta-encabezado-seccion--con-lado {
		gap: calc(48 * var(--u));
	}
	.cta-encabezado-seccion--con-lado .cta-encabezado-seccion__lado {
		flex: 0 1 calc(460 * var(--u));
		padding-bottom: calc(6 * var(--u));
	}
	.cta-encabezado-seccion--centro .cta-encabezado-seccion__principal {
		max-width: 100%;
	}
	.cta-encabezado-seccion--centro .cta-encabezado-seccion__lado {
		max-width: calc(640 * var(--u));
	}
	.cta-encabezado-seccion--centro.cta-encabezado-seccion--con-lado {
		gap: var(--e-5);
	}
	.cta-encabezado-seccion--centro.cta-encabezado-seccion--con-lado .cta-encabezado-seccion__lado {
		flex: none;
		padding-bottom: 0;
	}
	.cta-encabezado-seccion--solo-enlace .cta-encabezado-seccion__lado {
		flex: none;
	}
	.cta-subtitulo-listado {
		margin: var(--e-8) 0 var(--e-5);
		font-size: calc(20 * var(--u));
	}
	.cta-subtitulo-listado:first-child {
		margin-top: 0;
	}
	.cta-imagen-vacia {
		width: 100%;
		height: 100%;
		min-height: 100%;
	}
	.cta-rejilla-tours {
		gap: var(--separacion);
	}
	.cta-rejilla-tours + .cta-subtitulo-listado {
		margin-top: var(--e-9);
	}
	.cta-tarjeta-tour__foto {
		flex: none;
		max-height: calc(280 * var(--u));
	}
	.cta-tarjeta-tour__foto img,
	.cta-tarjeta-tour__foto .cta-imagen-vacia {
		width: 100%;
		height: 100%;
	}
	.cta-tarjeta-tour__etiquetas {
		top: calc(14 * var(--u));
		left: calc(14 * var(--u));
		right: calc(14 * var(--u));
		gap: calc(6 * var(--u));
	}
	.cta-tarjeta-tour__etiquetas .cta-etiqueta {
		max-width: 100%;
		min-height: calc(22 * var(--u));
		padding: calc(3 * var(--u)) calc(9 * var(--u));
		font-size: calc(11 * var(--u));
	}
	.cta-tarjeta-tour__cuerpo {
		flex: 1;
		gap: calc(18 * var(--u));
		padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(20 * var(--u));
	}
	.cta-tarjeta-tour__cabeza {
		gap: calc(8 * var(--u));
	}
	.cta-tarjeta-tour__titulo {
		font-size: calc(16 * var(--u));
	}
	.cta-tarjeta-tour__enlace::after {
		inset: 0;
	}
	.cta-tarjeta-tour__datos {
		gap: calc(4 * var(--u)) calc(14 * var(--u));
		margin: 0;
		font-size: calc(13 * var(--u));
	}
	.cta-tarjeta-tour__dato {
		gap: calc(6 * var(--u));
	}
	.cta-tarjeta-tour__dato .cta-icono {
		flex: none;
		margin-top: 1px;
	}
	.cta-tarjeta-tour__teaser {
		font-size: calc(13 * var(--u));
	}
	.cta-tarjeta-tour__estrellas {
		margin: 0;
	}
	.cta-tarjeta-tour__estrellas .cta-estrellas__icono {
		width: calc(14 * var(--u));
		height: calc(14 * var(--u));
	}
	.cta-tarjeta-tour__cuenta {
		gap: calc(6 * var(--u));
		margin: 0;
		font-size: calc(13 * var(--u));
	}
	.cta-tarjeta-tour__cuenta .cta-icono {
		flex: none;
	}
	.cta-tarjeta-tour__pie {
		margin-top: auto;
		padding-top: calc(14 * var(--u));
	}
	.cta-tarjeta-tour__pie .cta-desde + .cta-tarjeta-tour__boton {
		margin-top: calc(16 * var(--u));
	}
	.cta-tarjeta-tour__pie .cta-desde__nota {
		max-width: none;
	}
	.cta-tarjeta-tour .cta-desde__etiqueta,
	.cta-tarjeta-tour .cta-desde__moneda {
		font-size: calc(11 * var(--u));
	}
	.cta-tarjeta-tour .cta-desde__cifra {
		font-size: calc(18 * var(--u));
	}
	.cta-tarjeta-tour .cta-desde__nota {
		font-size: calc(12 * var(--u));
	}
	.cta-desde {
		gap: calc(4 * var(--u));
	}
	.cta-desde__etiqueta {
		font-size: var(--t-etiqueta);
	}
	.cta-desde__precio {
		gap: calc(6 * var(--u));
	}
	.cta-desde__cifra {
		font-size: var(--t-precio);
	}
	.cta-desde__moneda {
		font-size: calc(12 * var(--u));
	}
	.cta-desde__nota {
		max-width: calc(260 * var(--u));
		font-size: var(--t-nota);
	}
	.cta-desde__dato {
		gap: calc(8 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-desde--por-confirmar .cta-desde__cifra {
		font-size: calc(17 * var(--u));
	}
	.cta-desde--reserva .cta-desde__etiqueta {
		font-size: var(--t-etiqueta);
	}
	.cta-desde--reserva .cta-desde__cifra {
		font-size: calc(36 * var(--u));
	}
	.cta-desde--reserva .cta-desde__nota {
		max-width: none;
		font-size: calc(13 * var(--u));
	}
	.cta-rejilla-entradas {
		gap: var(--separacion);
	}
	.cta-tarjeta-entrada__foto {
		height: calc(320 * var(--u));
	}
	.cta-tarjeta-entrada__foto img,
	.cta-tarjeta-entrada__foto .cta-imagen-vacia {
		width: 100%;
		height: 100%;
	}
	.cta-tarjeta-entrada__foto .cta-etiqueta {
		top: calc(24 * var(--u));
		left: calc(24 * var(--u));
	}
	.cta-tarjeta-entrada__cuerpo {
		flex: 1;
		gap: calc(14 * var(--u));
		padding: calc(32 * var(--u)) calc(36 * var(--u)) calc(36 * var(--u));
	}
	.cta-tarjeta-entrada__titulo {
		font-size: var(--t-h3);
	}
	.cta-tarjeta-entrada__enlace::after {
		inset: 0;
	}
	.cta-tarjeta-entrada__extracto {
		font-size: var(--t-chico);
	}
	.cta-tarjeta-entrada .cta-btn--enlace {
		margin-top: auto;
	}
	.cta-lista {
		margin: 0;
		padding: 0;
	}
	.cta-lista--2col {
		column-gap: calc(32 * var(--u));
	}
	.cta-lista--check li,
	.cta-lista--x li {
		margin: 0 0 calc(16 * var(--u));
		padding-left: calc(38 * var(--u));
	}
	.cta-lista--check li::before,
	.cta-lista--x li::before {
		top: 0;
		left: 0;
		width: calc(26 * var(--u));
		height: calc(26 * var(--u));
	}
	.cta-lista--roja li {
		margin: 0 0 calc(12 * var(--u));
		padding-left: calc(18 * var(--u));
	}
	.cta-lista--roja li:last-child {
		margin-bottom: 0;
	}
	.cta-lista--roja li::before {
		top: 0.62em;
		left: 0;
		width: calc(6 * var(--u));
		height: calc(6 * var(--u));
	}
	.cta-lista--chips {
		gap: calc(10 * var(--u));
	}
	.cta-lista--chips li {
		min-height: calc(40 * var(--u));
		padding: calc(6 * var(--u)) calc(18 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-lista--pasos {
		gap: calc(16 * var(--u));
	}
	.cta-lista--pasos li {
		min-height: calc(40 * var(--u));
		padding: calc(8 * var(--u)) 0 calc(16 * var(--u)) calc(60 * var(--u));
	}
	.cta-lista--pasos li::before {
		top: 0;
		left: 0;
		width: calc(40 * var(--u));
		height: calc(40 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-lista--numerada {
		padding-left: calc(24 * var(--u));
	}
	.cta-rejilla-info {
		gap: calc(24 * var(--u));
		margin-top: var(--e-7);
	}
	.cta-seccion > .cta-contenedor > .cta-rejilla-info:first-child {
		margin-top: 0;
	}
	.cta-tarjeta-info {
		padding: calc(32 * var(--u));
		font-size: var(--t-chico);
	}
	.cta-tarjeta-info__titulo {
		gap: calc(10 * var(--u));
		margin: 0 0 calc(18 * var(--u));
		font-size: calc(19 * var(--u));
	}
	.cta-tarjeta-info__icono {
		width: calc(56 * var(--u));
		height: calc(56 * var(--u));
		margin-bottom: calc(18 * var(--u));
	}
	.cta-tarjeta-info--clase {
		border-radius: calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u));
		padding: calc(36 * var(--u)) calc(34 * var(--u));
	}
	.cta-panel-info {
		margin-top: var(--e-7);
		padding: calc(32 * var(--u)) calc(40 * var(--u));
		border-radius: calc(28 * var(--u));
	}
	.cta-panel-info > * + * {
		margin-top: calc(12 * var(--u));
	}
	.cta-panel-info__titulo {
		gap: calc(12 * var(--u));
		font-size: var(--t-h4);
	}
	.cta-bloque {
		margin-top: var(--e-8);
	}
	.cta-precios {
		gap: calc(20 * var(--u));
	}
	.cta-tabla-envoltura {
		border-radius: var(--r-bloque);
	}
	.cta-tabla {
		width: 100%;
		min-width: calc(480 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-tabla .cta-tabla__esquina {
		width: 28%;
	}
	.cta-tabla caption.cta-tabla__titulo {
		padding: calc(22 * var(--u)) calc(24 * var(--u)) calc(4 * var(--u));
		font-size: var(--t-antetitulo);
	}
	.cta-tabla th,
	.cta-tabla td {
		padding: calc(16 * var(--u)) calc(24 * var(--u));
	}
	.cta-tabla thead th {
		font-size: var(--t-etiqueta);
	}
	.cta-tabla__anio-num {
		font-size: calc(16 * var(--u));
	}
	.cta-tabla__vigencia {
		margin-top: calc(4 * var(--u));
		font-size: calc(12 * var(--u));
	}
	.cta-tabla__grupo th {
		padding-top: calc(22 * var(--u));
		padding-bottom: calc(10 * var(--u));
		font-size: calc(17 * var(--u));
	}
	.cta-tabla__grupo th .cta-icono {
		margin-right: calc(10 * var(--u));
	}
	.cta-precio {
		font-size: calc(22 * var(--u));
	}
	.cta-precio__moneda {
		margin-left: calc(4 * var(--u));
		font-size: calc(11 * var(--u));
	}
	.cta-nota--aviso {
		gap: calc(8 * var(--u));
	}
	.cta-precios-libres {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(340 * var(--u))), 1fr));
		gap: calc(24 * var(--u));
	}
	.cta-precios-libres__bloque {
		padding: calc(28 * var(--u)) calc(32 * var(--u));
		border-radius: var(--r-bloque);
	}
	.cta-precios-libres__titulo {
		gap: calc(8 * var(--u));
		margin-bottom: calc(8 * var(--u));
		font-size: calc(17 * var(--u));
	}
	.cta-precios-libres__lista {
		margin: 0 0 calc(12 * var(--u));
	}
	.cta-precios-libres__fila {
		gap: calc(16 * var(--u));
		padding: calc(14 * var(--u)) 0;
	}
	.cta-precios-libres__fila dd {
		margin: 0;
	}
	.cta-precios-libres__bloque .cta-nota {
		margin-top: calc(8 * var(--u));
	}
	.cta-itinerario {
		gap: calc(16 * var(--u));
	}
	.cta-dia {
		border-radius: calc(28 * var(--u));
	}
	.cta-dia__resumen {
		grid-template-columns: calc(84 * var(--u)) minmax(0, 1fr) calc(44 * var(--u));
		gap: calc(16 * var(--u));
		padding: calc(24 * var(--u)) calc(28 * var(--u));
		border-radius: calc(28 * var(--u));
	}
	.cta-dia__num {
		font-size: var(--t-etiqueta);
	}
	.cta-dia__titulo {
		font-size: var(--t-h4);
	}
	.cta-dia__icono {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-dia__cuerpo {
		padding: 0 calc(28 * var(--u)) calc(28 * var(--u)) calc(128 * var(--u));
		font-size: var(--t-chico);
	}
	.cta-dia__cuerpo p + p {
		margin-top: calc(10 * var(--u));
	}
	.cta-lightbox {
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.cta-lightbox[open] {
		grid-template-columns: calc(72 * var(--u)) minmax(0, 1fr) calc(72 * var(--u));
		grid-template-rows: calc(72 * var(--u)) minmax(0, 1fr) calc(56 * var(--u));
	}
	.cta-lightbox__figura {
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.cta-lightbox__figura img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		border-radius: calc(12 * var(--u));
	}
	.cta-lightbox .cta-icono-btn {
		width: calc(52 * var(--u));
		height: calc(52 * var(--u));
	}
	.cta-lightbox__contador {
		font-size: calc(13 * var(--u));
	}
	.cta-lightbox__lugar {
		max-width: 100%;
		margin: 0;
		font-size: calc(16 * var(--u));
	}
	.cta-campo {
		gap: calc(8 * var(--u));
		margin: 0;
		min-width: 0;
	}
	.cta-campo__etiqueta {
		font-size: calc(13 * var(--u));
	}
	.cta-campo__control {
		width: 100%;
		min-height: calc(56 * var(--u));
		padding: 0 calc(18 * var(--u));
		border-radius: var(--r-campo);
		font-size: calc(15 * var(--u));
	}
	textarea.cta-campo__control {
		min-height: calc(112 * var(--u));
		padding: calc(16 * var(--u)) calc(18 * var(--u));
	}
	.cta-campo__select .cta-campo__control {
		padding-right: calc(48 * var(--u));
	}
	.cta-campo__select .cta-icono {
		top: 50%;
		right: calc(18 * var(--u));
	}
	.cta-cotizar {
		gap: calc(16 * var(--u));
	}
	.cta-cotizar__campos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(16 * var(--u));
	}
	.cta-formulario {
		max-width: calc(720 * var(--u));
	}
	.cta-buscador {
		width: 100%;
		max-width: calc(640 * var(--u));
	}
	.cta-buscador__campo {
		width: 100%;
		min-height: calc(56 * var(--u));
		padding: 0 calc(64 * var(--u)) 0 calc(24 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(16 * var(--u));
	}
	.cta-buscador__boton {
		right: calc(4 * var(--u));
	}
	.cta-patron-corazones::after {
		inset: 0;
		border-radius: inherit;
	}
	.cta-header {
		top: 0;
		left: 0;
		right: 0;
	}
	.admin-bar .cta-header {
		top: 32px;
	}
	.cta-sin-portada .cta-main {
		padding-top: var(--alto-header);
	}
	.cta-barra {
		gap: calc(24 * var(--u));
		height: var(--alto-barra);
		padding-inline: var(--margen);
	}
	.cta-logo {
		flex: none;
		min-height: calc(44 * var(--u));
	}
	.cta-logo__img {
		width: calc(calc(40 * var(--u)) * 1.633);
		height: calc(40 * var(--u));
	}
	.cta-acciones {
		gap: calc(10 * var(--u));
	}
	.cta-menu-boton {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-acciones {
		gap: calc(12 * var(--u));
	}
	.cta-logo__img {
		width: calc(calc(48 * var(--u)) * 1.633);
		height: calc(48 * var(--u));
	}
	.cta-topbar {
		height: var(--alto-barra-superior);
		font-size: calc(13 * var(--u));
	}
	.cta-topbar__interior {
		gap: calc(24 * var(--u));
		height: 100%;
		padding-inline: clamp(calc(40 * var(--u)), 4.2vw, calc(60 * var(--u)));
	}
	.cta-topbar__dato,
	.cta-topbar__contacto a {
		gap: calc(10 * var(--u));
	}
	.cta-topbar__contacto {
		gap: calc(26 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-topbar__contacto a {
		gap: calc(8 * var(--u));
	}
	.cta-barra {
		padding-inline: clamp(calc(40 * var(--u)), 4.2vw, calc(60 * var(--u)));
	}
	.cta-logo__img {
		width: calc(calc(55 * var(--u)) * 1.633);
		height: calc(55 * var(--u));
	}
	.cta-acciones__reservar {
		min-height: calc(48 * var(--u));
		padding: 0 calc(24 * var(--u));
	}
	.cta-nav__lista {
		gap: calc(18 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-nav__lista > li > a {
		gap: calc(4 * var(--u));
		height: calc(44 * var(--u));
		font-size: var(--t-menu);
	}
	.cta-nav__lista > li > a::after {
		left: 50%;
		bottom: -2px;
		width: calc(10 * var(--u));
		height: calc(9 * var(--u));
		margin-left: calc(-5 * var(--u));
	}
	.cta-nav__lista .sub-menu {
		top: 100%;
		left: calc(-18 * var(--u));
		min-width: calc(260 * var(--u));
		margin: calc(8 * var(--u)) 0 0;
		padding: calc(8 * var(--u));
		border-radius: calc(20 * var(--u));
	}
	.cta-nav__lista .sub-menu::before {
		left: 0;
		right: 0;
		top: calc(-10 * var(--u));
		height: calc(10 * var(--u));
	}
	.cta-nav__lista .sub-menu a {
		padding: calc(12 * var(--u)) calc(18 * var(--u));
		border-radius: calc(12 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-nav__lista {
		gap: calc(26 * var(--u));
	}
	.cta-nav__lista > li > a {
		font-size: calc(15.5 * var(--u));
	}
	.cta-header.es-compacto {
		--alto-barra: calc(76 * var(--u));
	}
	.cta-header.es-compacto .cta-logo__img {
		width: calc(calc(48 * var(--u)) * 1.633);
		height: calc(48 * var(--u));
	}
	.cta-panel {
		inset: 0 0 0 auto;
		width: min(100vw, calc(420 * var(--u)));
		height: 100dvh;
		max-height: 100dvh;
		margin: 0 0 0 auto;
	}
	.cta-panel__interior {
		gap: calc(28 * var(--u));
		min-height: 100%;
		padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(32 * var(--u));
	}
	.cta-panel__cabeza {
		min-height: calc(48 * var(--u));
	}
	.cta-panel__lista {
		margin: 0;
		padding: 0;
	}
	.cta-panel__lista > li > a {
		flex: 1;
		gap: calc(8 * var(--u));
		min-height: calc(56 * var(--u));
		font-size: calc(18 * var(--u));
	}
	.cta-submenu-boton {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-panel__lista .sub-menu {
		flex-basis: 100%;
		margin: 0 0 calc(12 * var(--u));
		padding: 0 0 0 calc(12 * var(--u));
	}
	.cta-panel__lista .sub-menu a {
		min-height: calc(44 * var(--u));
		padding: 0 calc(8 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-panel__contacto {
		gap: calc(4 * var(--u));
		margin: 0;
		padding: 0;
		font-size: calc(15 * var(--u));
	}
	.cta-panel__contacto a,
	.cta-panel__contacto li > span {
		gap: calc(12 * var(--u));
		min-height: calc(44 * var(--u));
	}
	.cta-panel__contacto .cta-panel__tel,
	.cta-panel__contacto .cta-panel__tel .cta-icono {
		font-size: calc(14 * var(--u));
	}
	.cta-busqueda {
		inset: 0;
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.cta-busqueda__cerrar {
		top: calc(20 * var(--u));
		right: calc(20 * var(--u));
	}
	.cta-busqueda .cta-buscador {
		max-width: calc(900 * var(--u));
		margin-inline: auto;
	}
	.cta-busqueda .cta-buscador__campo {
		min-height: calc(88 * var(--u));
		padding: 0 calc(88 * var(--u)) 0 0;
		border-radius: 0;
		font-size: clamp(calc(24 * var(--u)), 3.4vw, calc(36 * var(--u)));
	}
	.cta-redes {
		gap: calc(12 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-redes__enlace {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-pie {
		padding-top: calc(56 * var(--u));
	}
	.cta-pie__columnas {
		grid-template-columns: minmax(0, 1fr);
		gap: calc(36 * var(--u));
	}
	.cta-pie__marca {
		gap: calc(18 * var(--u));
	}
	.cta-logo--pie .cta-logo__img {
		width: calc(calc(63 * var(--u)) * 1.633);
		height: calc(63 * var(--u));
	}
	.cta-pie__bienvenida {
		max-width: calc(340 * var(--u));
		font-size: calc(14.5 * var(--u));
	}
	.cta-pie__titulo {
		margin: 0 0 calc(16 * var(--u));
		font-size: var(--t-antetitulo);
	}
	.cta-pie__datos {
		gap: calc(12 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-pie__datos a,
	.cta-pie__dato {
		gap: calc(12 * var(--u));
		min-height: calc(44 * var(--u));
		font-size: calc(14.5 * var(--u));
	}
	.cta-pie__datos .cta-icono {
		margin-top: 1px;
	}
	.cta-pie__datos--contacto .cta-icono {
		flex: none;
		margin-top: 0;
	}
	.cta-pie__tel a,
	.cta-pie__tel .cta-icono {
		font-size: calc(13.5 * var(--u));
	}
	.cta-pie__paginas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 calc(16 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-pie__paginas a {
		min-height: calc(44 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-pie__redes {
		margin-top: calc(32 * var(--u));
	}
	.cta-pie .cta-redes__enlace {
		width: calc(52 * var(--u));
		height: calc(52 * var(--u));
	}
	.cta-pie__gigante {
		margin: calc(32 * var(--u)) 0 0;
		font-size: clamp(calc(48 * var(--u)), 13.4vw, calc(196 * var(--u)));
	}
	.cta-pie__barra {
		gap: calc(6 * var(--u));
		margin-top: calc(24 * var(--u));
		padding: calc(18 * var(--u)) 0 calc(50 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-pie__copy {
		padding-top: calc(8 * var(--u));
	}
	.cta-pie__rnt {
		margin: 0;
	}
	.cta-pie__legal {
		margin: 0;
		padding: 0;
	}
	.cta-pie__legal a {
		min-height: calc(44 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-pie {
		padding-top: calc(72 * var(--u));
	}
	.cta-pie__columnas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: calc(40 * var(--u));
	}
	.cta-pie__barra {
		gap: calc(8 * var(--u)) calc(24 * var(--u));
		padding: calc(22 * var(--u)) 0 calc(34 * var(--u));
		font-size: calc(13 * var(--u));
	}
	.cta-pie__copy {
		padding-top: 0;
		margin-top: 0;
	}
	.cta-pie__rnt {
		flex-basis: 100%;
	}
	.cta-pie__legal {
		gap: calc(28 * var(--u));
	}
	.cta-pie__gigante {
		margin-top: calc(56 * var(--u));
	}
	.cta-pie {
		padding-top: calc(96 * var(--u));
	}
	.cta-pie__columnas {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 0.9fr) auto;
		gap: calc(40 * var(--u));
	}
	.cta-pie__marca {
		gap: calc(28 * var(--u));
	}
	.cta-logo--pie .cta-logo__img {
		width: calc(calc(82 * var(--u)) * 1.633);
		height: calc(82 * var(--u));
	}
	.cta-pie__bienvenida {
		font-size: calc(16 * var(--u));
	}
	.cta-pie__titulo {
		margin-bottom: calc(22 * var(--u));
		font-size: var(--t-antetitulo);
	}
	.cta-pie__datos {
		gap: calc(16 * var(--u));
	}
	.cta-pie__datos a,
	.cta-pie__dato {
		min-height: 0;
		font-size: calc(15 * var(--u));
	}
	.cta-pie__tel a {
		font-size: calc(14 * var(--u));
	}
	.cta-pie__paginas {
		column-gap: calc(28 * var(--u));
	}
	.cta-pie__paginas a {
		min-height: 0;
		padding: calc(7 * var(--u)) 0;
		font-size: calc(15 * var(--u));
	}
	.cta-pie__redes {
		margin-top: calc(30 * var(--u));
	}
	.cta-pie .cta-redes__enlace {
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
	}
	.cta-portada {
		min-height: calc(640 * var(--u));
		padding-top: calc(var(--alto-header) + calc(48 * var(--u)));
		padding-bottom: calc(56 * var(--u));
	}
	.cta-portada--g {
		min-height: calc(790 * var(--u));
	}
	.cta-portada--m {
		min-height: calc(560 * var(--u));
	}
	.cta-portada__foto {
		inset: 0;
	}
	.cta-portada__foto img {
		width: 100%;
		height: 100%;
	}
	.cta-portada__velo {
		inset: 0;
	}
	.cta-portada__contenido {
		gap: calc(18 * var(--u));
	}
	.cta-portada__etiquetas {
		gap: calc(10 * var(--u));
	}
	.cta-portada__titulo {
		font-size: var(--t-h1);
	}
	.cta-portada--tour .cta-portada__titulo {
		font-size: var(--t-h1-tour);
	}
	.cta-portada__subtitulo {
		margin-top: calc(10 * var(--u));
		font-size: 0.5em;
	}
	.cta-portada__texto {
		max-width: calc(620 * var(--u));
		font-size: var(--t-lead);
	}
	.cta-portada__meta {
		gap: calc(10 * var(--u)) calc(28 * var(--u));
		margin: 0;
		padding: 0;
		font-size: calc(15 * var(--u));
	}
	.cta-portada__meta li {
		gap: calc(10 * var(--u));
	}
	.cta-portada__botones {
		gap: calc(16 * var(--u));
		margin-top: calc(6 * var(--u));
	}
	.cta-portada {
		padding-bottom: calc(72 * var(--u));
	}
	.cta-portada--g {
		min-height: calc(860 * var(--u));
	}
	.cta-portada--m {
		min-height: calc(600 * var(--u));
	}
	.cta-portada__contenido {
		gap: calc(24 * var(--u));
	}
	.cta-portada--g {
		min-height: calc(940 * var(--u));
	}
	.cta-portada--m {
		min-height: calc(640 * var(--u));
	}
	.cta-portada--der .cta-portada__contenido {
		padding-left: calc(50% - calc(20 * var(--u)));
	}
	.cta-portada__subtitulo {
		font-size: 0.49em;
	}
	.cta-banda-roja {
		gap: calc(20 * var(--u)) calc(32 * var(--u));
		margin-top: var(--e-8);
		padding: calc(28 * var(--u)) calc(36 * var(--u));
		border-radius: var(--r-tarjeta);
	}
	.cta-banda-roja::after {
		inset: 0;
	}
	.cta-banda-roja__texto {
		gap: calc(16 * var(--u));
	}
	.cta-banda-roja__titulo {
		font-size: clamp(calc(19 * var(--u)), 1.9vw, calc(24 * var(--u)));
	}
	.cta-banda-roja__acciones {
		gap: calc(12 * var(--u)) calc(24 * var(--u));
	}
	.cta-flotante {
		right: calc(16 * var(--u));
		bottom: calc(calc(24 * var(--u)) + env(safe-area-inset-bottom));
		width: calc(62 * var(--u));
		height: calc(62 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-barra-reserva {
		left: 0;
		right: 0;
		bottom: 0;
		gap: calc(12 * var(--u));
		padding: calc(12 * var(--u)) calc(20 * var(--u)) calc(calc(12 * var(--u)) + env(safe-area-inset-bottom));
	}
	.cta-contenido-pagina {
		padding-block: var(--seccion-y);
	}
	.cta-contenido-pagina > .cta-seccion {
		padding-block: var(--e-8);
	}
	.cta-contenido-pagina > .cta-seccion:first-child {
		padding-top: 0;
	}
	.cta-contenido-pagina > .cta-seccion:last-child {
		padding-bottom: 0;
	}
	.cta-contenido-pagina .cta-seccion > h2 {
		margin-bottom: var(--e-5);
		font-size: clamp(calc(26 * var(--u)), 3vw, calc(40 * var(--u)));
	}
	.cta-contenido-pagina .cta-seccion > p {
		max-width: calc(760 * var(--u));
	}
	.cta-contenido-pagina .cta-seccion > * + * {
		margin-top: calc(16 * var(--u));
	}
	.cta-contenido-pagina .cta-rejilla-tours {
		margin-top: var(--e-6);
	}
	.cta-subtitulo,
	.cta-antetitulo-texto {
		font-size: var(--t-h5);
	}
	.cta-antetitulo-texto {
		font-size: var(--t-antetitulo);
	}
	.cta-acciones-lista {
		gap: calc(12 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-accion {
		gap: calc(10 * var(--u));
		min-height: calc(48 * var(--u));
		padding: 0 calc(22 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(14 * var(--u));
	}
	.cta-accion--telefono,
	.cta-accion--mapa,
	.cta-accion--correo {
		padding: 0;
	}
	.cta-lista-enlaces {
		margin: 0;
		padding: 0;
	}
	.cta-lista-enlaces li {
		margin: 0 !important;
	}
	.cta-lista-enlaces a {
		gap: calc(4 * var(--u)) calc(12 * var(--u));
		padding: calc(16 * var(--u)) 0;
	}
	.cta-lista-enlaces strong {
		font-size: calc(17 * var(--u));
	}
	.cta-fichas {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300 * var(--u))), 1fr));
		gap: calc(24 * var(--u));
	}
	.cta-ficha {
		gap: calc(10 * var(--u));
		padding: calc(36 * var(--u)) calc(34 * var(--u));
		border-radius: calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u));
		font-size: var(--t-chico);
	}
	.cta-ficha h3 {
		font-size: calc(19 * var(--u));
	}
	.cta-ficha__lugar {
		font-size: var(--t-etiqueta);
	}
	.cta-ficha__amenidades {
		gap: calc(8 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-ficha__amenidades li {
		min-height: calc(28 * var(--u));
		margin: 0 !important;
		padding: 0 calc(12 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(12 * var(--u));
	}
	.cta-ficha .cta-accion {
		margin-top: calc(8 * var(--u));
	}
	.cta-mosaicos {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(240 * var(--u))), 1fr));
		gap: calc(16 * var(--u));
	}
	.cta-mosaico {
		margin: 0;
		border-radius: calc(20 * var(--u));
	}
	.cta-mosaico img {
		width: 100%;
		margin: 0 !important;
		border-radius: 0 !important;
	}
	.cta-mosaico figcaption {
		padding: calc(12 * var(--u)) calc(16 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-paginacion {
		margin-top: var(--e-8);
	}
	.cta-paginacion .nav-links {
		gap: calc(8 * var(--u));
	}
	.cta-paginacion .page-numbers {
		min-width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		padding: 0 calc(12 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-compartir {
		gap: calc(16 * var(--u));
		margin-top: var(--e-8);
		padding: calc(28 * var(--u)) calc(32 * var(--u));
		border-radius: var(--r-bloque);
	}
	.cta-compartir__texto {
		gap: calc(12 * var(--u));
	}
	.cta-compartir__acciones {
		gap: calc(12 * var(--u));
	}
	.cta-contenido-pagina .cta-seccion > :first-child {
		margin-top: 0;
	}
	.cta-seccion--compacta {
		padding-block: calc(var(--seccion-y) * 0.6);
	}
	.cta-seccion--sin-arriba {
		padding-top: 0;
	}
	.cta-seccion--sin-abajo {
		padding-bottom: 0;
	}
	.cta-rejilla-2,
	.cta-rejilla-3,
	.cta-rejilla-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--separacion);
	}
	.cta-rejilla-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cta-rejilla-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.cta-patron {
		inset: 0;
	}
	.cta-patron--rojo {
		left: auto;
		width: min(calc(460 * var(--u)), 48%);
	}
	html:has(.cta-anclas--fija) {
		scroll-padding-top: calc(calc(76 * var(--u)) + calc(72 * var(--u)) + calc(16 * var(--u)));
	}
	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--alto-barra) + calc(16 * var(--u)) + 32px);
	}
	html:has(body.admin-bar):has(.cta-anclas--fija) {
		scroll-padding-top: calc(calc(76 * var(--u)) + calc(72 * var(--u)) + calc(16 * var(--u)) + 32px);
	}
	.cta-encabezado-seccion__subtitulo {
		font-size: calc(17 * var(--u));
	}
	.cta-hero {
		gap: calc(32 * var(--u));
		padding-top: calc(var(--alto-header) + calc(40 * var(--u)));
		padding-bottom: calc(36 * var(--u));
	}
	.cta-hero--alto-g {
		min-height: calc(720 * var(--u));
	}
	.cta-hero--alto-m {
		min-height: calc(600 * var(--u));
	}
	.cta-hero__fondo {
		inset: 0;
	}
	.cta-hero__fondo > img,
	.cta-hero__fondo .cta-carrusel__diapositiva img {
		width: 100%;
		height: 100%;
	}
	.cta-fundido {
		inset: 0;
	}
	.cta-fundido__foto {
		inset: 0;
		width: 100%;
		height: 100%;
	}
	.cta-hero__velo {
		inset: 0;
	}
	.cta-hero__interior {
		gap: calc(40 * var(--u));
	}
	.cta-hero__contenido {
		gap: calc(20 * var(--u));
		max-width: calc(760 * var(--u));
		min-width: 0;
	}
	.cta-hero__etiquetas {
		gap: calc(10 * var(--u));
	}
	.cta-hero__titulo {
		max-width: 100%;
		font-size: var(--t-portada);
	}
	.cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc((100vw - 2 * var(--margen)) / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-hero__linea--grande {
		margin-top: calc(4 * var(--u));
	}
	.cta-hero__linea--sub {
		margin-top: calc(12 * var(--u));
	}
	.cta-hero__texto {
		max-width: calc(620 * var(--u));
		font-size: var(--t-lead);
	}
	.cta-hero__meta {
		gap: calc(4 * var(--u));
		margin: 0;
		padding: 0;
		font-size: calc(15 * var(--u));
	}
	.cta-hero__meta li,
	.cta-hero__meta a {
		gap: calc(10 * var(--u));
		min-height: calc(32 * var(--u));
	}
	.cta-hero__botones {
		gap: calc(16 * var(--u));
		margin-top: calc(4 * var(--u));
	}
	.cta-hero__pie {
		gap: calc(16 * var(--u)) calc(32 * var(--u));
		width: 100%;
		padding-inline: var(--margen);
	}
	.cta-hero__pie-texto {
		gap: calc(12 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-hero__pie-texto .cta-icono {
		flex: none;
	}
	.cta-hero__leyenda {
		gap: calc(12 * var(--u));
		min-height: calc(44 * var(--u));
		margin-left: auto;
		font-size: var(--t-etiqueta);
	}
	.cta-hero__leyenda-linea {
		width: calc(48 * var(--u));
		height: 1px;
	}
	.cta-hero--desvanecida .cta-hero__fondo {
		bottom: auto;
		height: 62%;
	}
	.cta-hero--desvanecida {
		padding-top: calc(var(--alto-header) + calc(220 * var(--u)));
	}
	.cta-hero--arco,
	.cta-hero--clara {
		padding-bottom: calc(56 * var(--u));
	}
	.cta-hero__media {
		width: 100%;
		max-width: calc(500 * var(--u));
	}
	.cta-hero {
		padding-bottom: calc(40 * var(--u));
	}
	.cta-hero--alto-g {
		min-height: calc(820 * var(--u));
	}
	.cta-hero--alto-m {
		min-height: calc(640 * var(--u));
	}
	.cta-hero__contenido {
		gap: calc(26 * var(--u));
	}
	.cta-hero--sangre {
		padding-top: calc(var(--alto-header) + calc(52 * var(--u)));
		padding-bottom: calc(120 * var(--u));
	}
	.cta-hero--sangre .cta-hero__pie {
		left: 0;
		right: 0;
		bottom: calc(40 * var(--u));
		padding-inline: calc(60 * var(--u));
	}
	.cta-hero--sangre.cta-hero--der .cta-hero__contenido {
		max-width: calc(640 * var(--u));
		margin-left: auto;
	}
	.cta-hero--sangre .cta-hero__extra {
		margin-bottom: calc(44 * var(--u));
	}
	.cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(calc(760 * var(--u)) / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-hero--der .cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(calc(640 * var(--u)) / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-hero--desvanecida {
		padding-top: calc(var(--alto-header) + calc(48 * var(--u)));
		padding-bottom: calc(72 * var(--u));
	}
	.cta-hero--desvanecida .cta-hero__fondo {
		left: auto;
		width: 62.5%;
		height: 100%;
		bottom: 0;
	}
	.cta-hero--desvanecida .cta-hero__contenido {
		max-width: calc(640 * var(--u));
	}
	.cta-hero--arco .cta-hero__interior {
		grid-template-columns: minmax(0, 1fr) minmax(0, calc(500 * var(--u)));
		gap: calc(64 * var(--u));
	}
	.cta-hero--arco .cta-hero__contenido {
		max-width: calc(640 * var(--u));
	}
	.cta-hero--alto-g {
		min-height: calc(900 * var(--u));
	}
	.cta-hero--alto-m {
		min-height: calc(760 * var(--u));
	}
	.cta-hero--sangre .cta-hero__contenido {
		gap: calc(30 * var(--u));
	}
	.cta-carrusel {
		min-width: 0;
	}
	.cta-carrusel__diapositiva {
		flex: 0 0 100%;
		margin: 0;
	}
	.cta-carrusel__diapositiva img {
		width: 100%;
		height: 100%;
	}
	.cta-carrusel__leyenda {
		left: calc(20 * var(--u));
		bottom: calc(20 * var(--u));
		max-width: calc(100% - calc(40 * var(--u)));
		padding: calc(8 * var(--u)) calc(14 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(13 * var(--u));
	}
	.cta-carrusel__controles {
		gap: calc(12 * var(--u));
	}
	.cta-carrusel__boton {
		flex: none;
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		margin: 0;
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-carrusel__puntos {
		gap: 2px;
	}
	.cta-carrusel__punto {
		width: calc(24 * var(--u));
		height: calc(44 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-carrusel__punto::before {
		top: 50%;
		left: 50%;
		width: calc(8 * var(--u));
		height: calc(8 * var(--u));
		margin: calc(-4 * var(--u)) 0 0 calc(-4 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-carrusel__punto[aria-current="true"]::before {
		width: calc(20 * var(--u));
		margin-left: calc(-10 * var(--u));
	}
	.cta-carrusel--galeria .cta-carrusel__pista {
		border-radius: var(--r-tarjeta);
	}
	.cta-carrusel--destino .cta-carrusel__pista {
		border-radius: calc(120 * var(--u)) calc(28 * var(--u)) calc(120 * var(--u)) calc(28 * var(--u));
	}
	.cta-carrusel--hotel .cta-carrusel__pista {
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-carrusel--producto .cta-carrusel__pista {
		border-radius: calc(120 * var(--u)) calc(32 * var(--u)) calc(120 * var(--u)) calc(32 * var(--u));
	}
	.cta-carrusel--galeria .cta-carrusel__controles {
		margin-top: calc(16 * var(--u));
	}
	.cta-carrusel--fondo,
	.cta-carrusel--fondo .cta-carrusel__pista {
		inset: 0;
	}
	.cta-carrusel--fondo .cta-carrusel__diapositiva {
		height: 100%;
	}
	.cta-hero__pie .cta-carrusel__controles {
		gap: calc(8 * var(--u));
	}
	.cta-carrusel--tarjeta,
	.cta-carrusel--tarjeta .cta-carrusel__pista {
		height: 100%;
	}
	.cta-carrusel--tarjeta .cta-carrusel__diapositiva {
		height: 100%;
	}
	.cta-carrusel--tarjeta .cta-carrusel__controles {
		left: 50%;
		bottom: calc(8 * var(--u));
		gap: calc(4 * var(--u));
		padding: 0 calc(4 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-carrusel--tarjeta .cta-carrusel__boton {
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
	}
	.cta-carrusel--tarjeta .cta-carrusel__puntos {
		gap: 0;
	}
	.cta-carrusel--tarjeta .cta-carrusel__punto {
		width: calc(24 * var(--u));
		height: calc(44 * var(--u));
	}
	.cta-carrusel--tarjeta .cta-carrusel__punto::before {
		width: calc(6 * var(--u));
		height: calc(6 * var(--u));
		margin: calc(-3 * var(--u)) 0 0 calc(-3 * var(--u));
	}
	.cta-carrusel--tarjeta .cta-carrusel__punto[aria-current="true"]::before {
		width: calc(14 * var(--u));
		margin-left: calc(-7 * var(--u));
	}
	.cta-tarjeta-roja {
		gap: calc(32 * var(--u)) calc(48 * var(--u));
		padding: calc(80 * var(--u));
		border-radius: calc(120 * var(--u)) calc(28 * var(--u)) calc(120 * var(--u)) calc(28 * var(--u));
	}
	.cta-tarjeta-roja__cuerpo {
		gap: calc(22 * var(--u));
		max-width: calc(720 * var(--u));
		min-width: 0;
	}
	.cta-tarjeta-roja__titulo {
		font-size: var(--t-h2);
	}
	.cta-tarjeta-roja__texto {
		max-width: calc(600 * var(--u));
		font-size: calc(18 * var(--u));
	}
	.cta-tarjeta-roja__acciones {
		gap: calc(14 * var(--u)) calc(24 * var(--u));
		margin-top: calc(8 * var(--u));
	}
	.cta-tarjeta-roja__llamada {
		gap: calc(10 * var(--u));
		min-height: calc(44 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-tarjeta-roja__llamada .cta-icono {
		flex: none;
	}
	.cta-tarjeta-roja--lado {
		padding: calc(56 * var(--u));
		border-radius: var(--r-tarjeta);
	}
	.cta-tarjeta-roja--lado .cta-tarjeta-roja__acciones {
		flex: none;
		max-width: calc(340 * var(--u));
		margin-top: 0;
	}
	.cta-banda-foto {
		min-height: calc(560 * var(--u));
		padding-block: calc(72 * var(--u));
	}
	.cta-banda-foto__fondo {
		inset: 0;
	}
	.cta-banda-foto__fondo img {
		width: 100%;
		height: 100%;
	}
	.cta-banda-foto__velo {
		inset: 0;
	}
	.cta-banda-foto__contenido {
		gap: calc(24 * var(--u));
		max-width: calc(640 * var(--u));
	}
	.cta-banda-foto__titulo {
		font-size: calc(var(--t-h2) * 1.2);
	}
	.cta-banda-foto__texto {
		font-size: var(--t-lead);
	}
	.cta-banda-foto__botones {
		gap: calc(16 * var(--u));
	}
	.cta-banda-foto--g {
		min-height: calc(680 * var(--u));
	}
	.cta-banda-foto--der .cta-banda-foto__contenido {
		margin-left: auto;
	}
	.cta-banda-foto__contenido {
		gap: calc(30 * var(--u));
	}
	.cta-foto-arco {
		margin: 0;
		border-radius: calc(120 * var(--u)) calc(28 * var(--u)) calc(120 * var(--u)) calc(28 * var(--u));
	}
	.cta-foto-arco img,
	.cta-foto-arco .cta-imagen-vacia {
		width: 100%;
		height: 100%;
	}
	.cta-foto-arco--capsula {
		border-radius: calc(260 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u)) calc(260 * var(--u));
	}
	.cta-foto-arco--producto {
		border-radius: calc(120 * var(--u)) calc(32 * var(--u)) calc(120 * var(--u)) calc(32 * var(--u));
	}
	.cta-foto-arco--hotel {
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-foto-arco--arco {
		border-radius: calc(999 * var(--u)) calc(999 * var(--u)) calc(32 * var(--u)) calc(32 * var(--u));
	}
	.cta-foto-arco__leyenda {
		left: calc(24 * var(--u));
		bottom: calc(24 * var(--u));
		gap: calc(8 * var(--u));
		max-width: calc(100% - calc(48 * var(--u)));
		min-height: calc(36 * var(--u));
		padding: calc(4 * var(--u)) calc(16 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(13 * var(--u));
	}
	.cta-foto-arco__leyenda .cta-icono {
		flex: none;
	}
	.cta-filtros--fija {
		top: calc(76 * var(--u));
	}
	.admin-bar .cta-filtros--fija {
		top: calc(calc(76 * var(--u)) + 32px);
	}
	.cta-filtros__interior {
		gap: calc(16 * var(--u)) calc(24 * var(--u));
		padding-block: calc(28 * var(--u));
	}
	.cta-filtros__grupo {
		gap: calc(10 * var(--u));
		min-width: 0;
	}
	.cta-filtros__etiqueta {
		flex: none;
		gap: calc(8 * var(--u));
		margin-right: calc(6 * var(--u));
		font-size: calc(13 * var(--u));
	}
	.cta-filtros__chips {
		gap: calc(10 * var(--u));
		min-width: 0;
	}
	.cta-chip-filtro {
		flex: none;
		height: calc(48 * var(--u));
		margin: 0;
		padding: 0 calc(20 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(14 * var(--u));
	}
	.cta-filtros__lado {
		gap: calc(12 * var(--u)) calc(20 * var(--u));
	}
	.cta-filtros__conteo {
		font-size: calc(14 * var(--u));
	}
	.cta-filtros__ordenar {
		font-size: calc(13 * var(--u));
	}
	.cta-filtros__select select {
		height: calc(48 * var(--u));
		padding: 0 calc(44 * var(--u)) 0 calc(18 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(14 * var(--u));
	}
	.cta-filtros__flecha {
		top: 50%;
		right: calc(16 * var(--u));
	}
	.cta-anclas--fija {
		top: calc(76 * var(--u));
	}
	.admin-bar .cta-anclas--fija {
		top: calc(calc(76 * var(--u)) + 32px);
	}
	.cta-anclas__interior {
		gap: calc(24 * var(--u));
		min-height: calc(72 * var(--u));
	}
	.cta-anclas__lista {
		gap: calc(40 * var(--u));
		min-width: 0;
		margin: 0;
		padding: 0;
	}
	.cta-anclas__ventana {
		--cta-anclas-desvanecido: calc(64 * var(--u));
		flex: 1 1 auto;
		min-width: 0;
	}
	.cta-anclas__mas {
		top: 50%;
		width: calc(36 * var(--u));
		height: calc(36 * var(--u));
		margin: 0;
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-anclas__mas--izq {
		left: 0;
	}
	.cta-anclas__mas--der {
		right: 0;
	}
	.cta-anclas__enlace {
		gap: calc(8 * var(--u));
		height: calc(72 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-anclas__texto::after {
		height: 0;
	}
	.cta-anclas--pestanas .cta-anclas__lista {
		margin-inline: calc(-8 * var(--u));
		padding-inline: calc(8 * var(--u));
	}
	.cta-anclas--pestanas .cta-anclas__enlace {
		margin-inline: calc(-8 * var(--u));
		padding-inline: calc(8 * var(--u));
	}
	.cta-anclas--pestanas .cta-anclas__enlace::after {
		left: calc(8 * var(--u));
		right: calc(8 * var(--u));
	}
	.cta-anclas__enlace::after {
		left: 0;
		right: 0;
		bottom: 0;
		height: calc(3 * var(--u));
	}
	.cta-anclas__conteo {
		min-width: calc(22 * var(--u));
		height: calc(22 * var(--u));
		padding: 0 calc(6 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(11 * var(--u));
	}
	.cta-anclas__lado {
		flex: none;
		gap: calc(20 * var(--u));
	}
	.cta-anclas--chips .cta-anclas__lista {
		gap: calc(8 * var(--u));
		padding-block: calc(10 * var(--u));
	}
	.cta-anclas--chips .cta-anclas__enlace {
		height: calc(44 * var(--u));
		padding: 0 calc(16 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(14 * var(--u));
	}
	.cta-chips {
		gap: calc(8 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-chip {
		gap: calc(6 * var(--u));
		max-width: 100%;
		min-height: calc(32 * var(--u));
		padding: calc(4 * var(--u)) calc(14 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(13 * var(--u));
	}
	.cta-chip .cta-icono {
		flex: none;
	}
	.cta-chip--amenidad {
		min-height: calc(28 * var(--u));
		padding: calc(3 * var(--u)) calc(12 * var(--u));
		font-size: calc(12 * var(--u));
	}
	.cta-chip--lugar {
		min-height: calc(40 * var(--u));
		padding: calc(6 * var(--u)) calc(18 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-chip--dato {
		padding: calc(4 * var(--u)) calc(12 * var(--u));
		font-size: calc(12.5 * var(--u));
	}
	.cta-aviso {
		gap: calc(18 * var(--u));
		padding: calc(28 * var(--u)) calc(30 * var(--u));
		border-radius: var(--r-bloque);
	}
	.cta-aviso__icono {
		flex: none;
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-aviso__cuerpo {
		gap: calc(8 * var(--u));
		min-width: 0;
		padding-top: 2px;
	}
	.cta-aviso__titulo {
		font-size: var(--t-antetitulo);
	}
	.cta-aviso__texto {
		font-size: calc(18 * var(--u));
	}
	.cta-aviso--info .cta-aviso__texto {
		font-size: calc(15 * var(--u));
	}
	.cta-fichas-datos {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: calc(14 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-fichas-datos--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cta-fichas-datos--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-ficha-dato {
		gap: calc(10 * var(--u));
		min-width: 0;
		padding: calc(24 * var(--u)) calc(22 * var(--u));
		border-radius: var(--r-bloque);
	}
	.cta-ficha-dato__valor {
		font-size: calc(30 * var(--u));
	}
	.cta-ficha-dato__texto {
		font-size: calc(13.5 * var(--u));
	}
	.cta-tarjeta-icono {
		gap: calc(20 * var(--u));
		min-width: 0;
		padding: calc(36 * var(--u)) calc(34 * var(--u));
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-tarjeta-icono__icono {
		width: calc(64 * var(--u));
		height: calc(64 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tarjeta-icono__titulo {
		font-size: calc(21 * var(--u));
	}
	.cta-tarjeta-icono__linea {
		width: calc(40 * var(--u));
		height: 2px;
	}
	.cta-tarjeta-icono__texto {
		font-size: calc(15.5 * var(--u));
	}
	.cta-tarjeta-icono__pie {
		margin-top: auto;
	}
	.cta-tarjeta-panel {
		padding: calc(28 * var(--u));
		border-radius: var(--r-tarjeta);
	}
	.cta-ruta {
		margin: 0;
		padding: 0;
	}
	.cta-ruta__parada {
		gap: calc(16 * var(--u));
		min-width: 0;
		padding-bottom: calc(22 * var(--u));
	}
	.cta-ruta__parada::before {
		top: calc(36 * var(--u));
		bottom: 0;
		left: calc(17 * var(--u));
	}
	.cta-ruta__parada--ultima {
		padding-bottom: 0;
	}
	.cta-ruta__nodo {
		flex: none;
		width: calc(36 * var(--u));
		height: calc(36 * var(--u));
	}
	.cta-ruta__nodo::before {
		width: calc(18 * var(--u));
		height: calc(18 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-ruta__parada--destacada .cta-ruta__nodo {
		border-radius: var(--r-pildora);
	}
	.cta-ruta__textos {
		gap: calc(6 * var(--u));
		min-width: 0;
		padding-top: calc(4 * var(--u));
	}
	.cta-ruta__etiqueta {
		font-size: var(--t-etiqueta);
	}
	.cta-ruta__titulo {
		font-size: calc(16 * var(--u));
	}
	.cta-ruta__nota,
	.cta-ruta__tramo {
		gap: calc(8 * var(--u));
		font-size: calc(12 * var(--u));
	}
	.cta-ruta__nota .cta-icono,
	.cta-ruta__tramo .cta-icono {
		flex: none;
	}
	.cta-ruta--auto {
		padding-top: calc(34 * var(--u));
	}
	.cta-ruta--auto .cta-ruta__parada {
		flex: 1 1 0;
		gap: calc(12 * var(--u));
		padding-bottom: 0;
	}
	.cta-ruta--auto .cta-ruta__parada::before {
		top: calc(17 * var(--u));
		bottom: auto;
		left: calc(18 * var(--u));
		width: 100%;
	}
	.cta-ruta--auto .cta-ruta__textos {
		padding-top: 0;
		padding-right: calc(12 * var(--u));
	}
	.cta-ruta--auto .cta-ruta__tramo {
		top: calc(-30 * var(--u));
		left: calc(56 * var(--u));
	}
	.cta-ruta--horizontal {
		padding-top: calc(34 * var(--u));
	}
	.cta-ruta--horizontal .cta-ruta__parada {
		flex: 1 0 calc(140 * var(--u));
		gap: calc(12 * var(--u));
		padding-bottom: 0;
	}
	.cta-ruta--horizontal .cta-ruta__parada::before {
		top: calc(17 * var(--u));
		bottom: auto;
		left: calc(18 * var(--u));
		width: 100%;
	}
	.cta-ruta--horizontal .cta-ruta__textos {
		padding-top: 0;
		padding-right: calc(12 * var(--u));
	}
	.cta-ruta--horizontal .cta-ruta__tramo {
		top: calc(-30 * var(--u));
		left: calc(56 * var(--u));
	}
	.cta-canal {
		gap: calc(16 * var(--u));
		min-width: 0;
		min-height: calc(76 * var(--u));
		padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
		border-radius: var(--r-campo);
	}
	.cta-canal__icono {
		flex: none;
		width: calc(48 * var(--u));
		height: calc(48 * var(--u));
		border-radius: calc(12 * var(--u));
	}
	.cta-canal__textos {
		flex: 1;
		gap: 2px;
		min-width: 0;
	}
	.cta-canal__etiqueta {
		gap: calc(4 * var(--u)) calc(10 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-canal__insignia {
		min-height: calc(20 * var(--u));
		padding: 0 calc(8 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(10 * var(--u));
	}
	.cta-canal__valor {
		font-size: calc(15 * var(--u));
	}
	.cta-canal__flecha {
		flex: none;
	}
	.cta-destino {
		min-width: 0;
		min-height: var(--cta-destino-alto, calc(640 * var(--u)));
		border-radius: calc(120 * var(--u)) calc(28 * var(--u)) calc(120 * var(--u)) calc(28 * var(--u));
	}
	.cta-destino__foto {
		inset: 0;
	}
	.cta-destino__foto img,
	.cta-destino__foto .cta-imagen-vacia {
		width: 100%;
		height: 100%;
	}
	.cta-destino::before {
		left: 0;
		right: 0;
		bottom: 0;
		height: min(calc(420 * var(--u)), 75%);
	}
	.cta-destino__cuerpo {
		gap: calc(18 * var(--u));
		padding: calc(52 * var(--u));
	}
	.cta-destino__titulo {
		font-size: calc(var(--t-h1) * 1.08);
	}
	.cta-destino__texto {
		max-width: calc(440 * var(--u));
		font-size: calc(16 * var(--u));
	}
	.cta-destino__boton {
		margin-top: calc(8 * var(--u));
	}
	.cta-destino__enlace::after {
		inset: 0;
		border-radius: inherit;
	}
	.cta-destino--compacta {
		min-height: var(--cta-destino-alto, calc(300 * var(--u)));
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-destino--compacta .cta-destino__cuerpo {
		gap: calc(10 * var(--u));
		padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(28 * var(--u));
	}
	.cta-destino--compacta .cta-destino__titulo {
		font-size: calc(30 * var(--u));
	}
	.cta-destino__flecha {
		top: calc(20 * var(--u));
		right: calc(20 * var(--u));
		width: calc(36 * var(--u));
		height: calc(36 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-destino--foto {
		min-height: var(--cta-destino-alto, calc(400 * var(--u)));
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-destino--foto::before {
		height: 50%;
	}
	.cta-destino__etiqueta {
		gap: calc(8 * var(--u));
		max-width: calc(100% - calc(64 * var(--u)));
		min-height: calc(32 * var(--u));
		margin: 0 calc(32 * var(--u)) calc(30 * var(--u));
		padding: 0 calc(14 * var(--u));
		border-radius: var(--r-pildora);
		font-size: var(--t-etiqueta);
	}
	.cta-destino__etiqueta .cta-icono {
		flex: none;
	}
	.cta-destino--tarjeta {
		min-height: 0;
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-destino--tarjeta .cta-destino__foto {
		inset: auto;
		height: calc(220 * var(--u));
	}
	.cta-destino--tarjeta .cta-destino__cuerpo {
		flex: 1;
		gap: calc(16 * var(--u));
		padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(34 * var(--u));
	}
	.cta-destino--tarjeta .cta-destino__titulo {
		font-size: calc(28 * var(--u));
	}
	.cta-destino__linea {
		width: calc(40 * var(--u));
		height: 2px;
	}
	.cta-destino--tarjeta .cta-destino__texto {
		font-size: calc(14.5 * var(--u));
	}
	.cta-destino--tarjeta .cta-destino__boton {
		margin-top: auto;
		padding-top: calc(8 * var(--u));
	}
	.cta-rejilla-hoteles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--separacion);
	}
	.cta-hotel {
		min-width: 0;
		border-radius: calc(88 * var(--u)) calc(24 * var(--u)) calc(88 * var(--u)) calc(24 * var(--u));
	}
	.cta-hotel__foto {
		flex: none;
		height: calc(220 * var(--u));
	}
	.cta-hotel__foto > img {
		width: 100%;
		height: 100%;
	}
	.cta-hotel__cuerpo {
		flex: 1;
		gap: calc(28 * var(--u));
		padding: calc(30 * var(--u)) calc(32 * var(--u)) calc(34 * var(--u));
	}
	.cta-hotel__cabeza {
		gap: calc(16 * var(--u));
		min-width: 0;
	}
	.cta-hotel__lugar {
		gap: calc(12 * var(--u));
		font-size: var(--t-etiqueta);
	}
	.cta-hotel__lugar .cta-icono {
		flex: none;
	}
	.cta-hotel__lugar-linea {
		flex: none;
		width: 2px;
		height: calc(22 * var(--u));
	}
	.cta-hotel__nombre {
		font-size: calc(21 * var(--u));
	}
	.cta-hotel__ubicacion {
		font-size: calc(15 * var(--u));
	}
	.cta-hotel__direccion {
		gap: calc(10 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-hotel__direccion .cta-icono {
		flex: none;
		margin-top: 2px;
	}
	.cta-hotel__amenidades {
		gap: calc(10 * var(--u));
		margin-top: calc(4 * var(--u));
	}
	.cta-hotel__amenidades-titulo {
		font-size: var(--t-etiqueta);
	}
	.cta-hotel .cta-hotel__boton {
		min-height: calc(52 * var(--u));
	}
	.cta-estrellas {
		gap: calc(3 * var(--u));
	}
	.cta-estrellas__icono {
		flex: none;
	}
	.cta-demo__rotulo {
		margin: 0 0 calc(24 * var(--u));
		font-size: var(--t-etiqueta);
	}
	.cta-demo__pila {
		gap: calc(32 * var(--u));
	}
	.cta-demo__dos,
	.cta-demo__tres {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--separacion);
		margin-block: calc(32 * var(--u));
	}
	.cta-demo__tres {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cta-demo__canales {
		gap: calc(12 * var(--u));
		max-width: calc(560 * var(--u));
		margin: 0 auto;
		padding: 0;
	}
	.cta-pliegue__accion {
		margin: calc(28 * var(--u)) 0 0;
	}
	.cta-acordeon__boton {
		gap: calc(16 * var(--u));
		width: 100%;
		min-height: calc(56 * var(--u));
		margin: 0;
		padding: 0;
		font: inherit;
	}
	.cta-acordeon__boton .cta-acordeon__icono {
		flex: none;
	}
	.cta-sin-cortes {
		max-width: 100%;
	}
	.cta-foto-visor img {
		width: 100%;
		height: 100%;
	}
	.cta-foto-visor:focus-visible::after {
		inset: 0;
		border-radius: inherit;
	}
	.cta-fotos-tarjeta {
		min-width: 0;
	}
	.cta-fotos-tarjeta > .cta-foto-visor {
		flex: 1 1 auto;
	}
	.cta-fotos-tarjeta__flecha {
		top: 50%;
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		margin: calc(-22 * var(--u)) 0 0;
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-fotos-tarjeta__flecha--anterior {
		left: calc(12 * var(--u));
	}
	.cta-fotos-tarjeta__flecha--siguiente {
		right: calc(12 * var(--u));
	}
	.cta-fotos-tarjeta__contador {
		left: calc(12 * var(--u));
		bottom: calc(12 * var(--u));
		margin: 0;
		padding: calc(4 * var(--u)) calc(10 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(13 * var(--u));
	}
	ul.cta-fotos-tarjeta__miniaturas {
		grid-auto-columns: calc((100% - calc(20 * var(--u))) / 3);
		gap: calc(10 * var(--u));
		margin: auto calc(-4 * var(--u)) calc(-4 * var(--u));
		padding: calc(8 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u));
	}
	ul.cta-fotos-tarjeta__miniaturas--desliza {
		grid-auto-columns: calc((100% - calc(30 * var(--u))) / 3.3);
	}
	.cta-fotos-tarjeta__miniatura {
		min-width: 0;
		margin: 0;
	}
	.cta-fotos-tarjeta__mini {
		width: 100%;
		margin: 0;
		padding: 0;
		border-radius: calc(12 * var(--u));
	}
	.cta-fotos-tarjeta__mini img {
		width: 100%;
		height: 100%;
	}
	.cta-tour-clases {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: calc(24 * var(--u));
		margin: 0;
		padding: 0;
	}
	.cta-tour-clases--1 {
		grid-template-columns: minmax(0, 1fr);
		max-width: calc(980 * var(--u));
	}
	.cta-tour-clases--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-tour-clase {
		min-width: 0;
		margin: 0;
		border-radius: calc(20 * var(--u));
	}
	.cta-tour-clase__info {
		flex: 1 1 auto;
		gap: calc(10 * var(--u));
		padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u));
	}
	.cta-tour-clase__icono {
		width: calc(56 * var(--u));
		height: calc(56 * var(--u));
		margin-bottom: calc(4 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-tour-clase__nombre {
		margin: 0;
		font-size: calc(21 * var(--u));
	}
	.cta-tour-clase__texto {
		margin: 0;
		font-size: calc(15 * var(--u));
	}
	.cta-tour-clases--1 .cta-tour-clase:not(.cta-tour-clase--sin-foto) {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.cta-tour-clases--1 .cta-tour-clase__portada {
		min-height: calc(300 * var(--u));
	}
	.cta-tour-clases--1 .cta-tour-clase__info {
		padding: calc(28 * var(--u)) calc(30 * var(--u));
	}
	.cta-tour-clases--1 .cta-tour-clase--sin-foto {
		max-width: calc(520 * var(--u));
	}
	.cta-senuelo {
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		min-height: 0 !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.cta-marca-vista {
		margin: 0;
		padding: 0;
	}
	.cta-aviso-foto {
		bottom: calc(calc(24 * var(--u)) + env(safe-area-inset-bottom));
		left: 50%;
		width: max-content;
		max-width: calc(100vw - calc(32 * var(--u)));
		margin: 0;
		padding: calc(12 * var(--u)) calc(20 * var(--u));
		border-radius: calc(14 * var(--u));
		font-size: calc(15 * var(--u));
	}
	html.js:has(.cta-barra-reserva--tour:not(.es-oculta)) body > .cta-aviso-foto {
		bottom: calc(var(--cta-alto-barra, calc(76 * var(--u))) + calc(16 * var(--u)));
	}
	.cta-lightbox .cta-aviso-foto {
		bottom: calc(calc(76 * var(--u)) + env(safe-area-inset-bottom));
	}
}
/* </pantallas-grandes> */

/* ---------------------------------------------------------------------
   44. Pantallas grandes: ajustes a mano (decisión 106, 19-oct-2026)
   Desde 1440 px, además del bloque generado de arriba (todo × --u), lo que
   sigue al ancho de la retícula (--contenido, que crece más rápido que
   --u). A 1440 px cada regla da lo mismo que antes. Ver ARQUITECTURA.md §3,
   «Pantallas grandes».
   --------------------------------------------------------------------- */
@media (min-width: 1440px) {
	/* Encabezado y barra superior alineados a la retícula: como a 1440 px,
	   sus orillas quedan 60 px (× --u) por fuera del contenido; antes se
	   quedaban pegadas a los lados de la pantalla. */
	.cta-barra,
	.cta-topbar__interior {
		padding-inline: max(calc(60 * var(--u)), (100% - var(--contenido)) / 2 - calc(60 * var(--u)));
	}
	/* Letrero del pie: del ancho del contenido (a 1440 px, 13.4vw). */
	.cta-pie__gigante {
		font-size: min(13.4vw, calc(var(--contenido) * 0.16333));
	}
}
/* Listas de tours (El Chepe, Otros destinos, /tours/, búsqueda): siguen
   con 4 por renglón en todos los anchos y las tarjetas crecen con el
   contenido (473 px a 2560, 565 a 3840), como los destacados de Inicio.
   Antes pasaban a 5 desde 2400 px y las rejillas quedaban disparejas (los
   8 de Otros destinos en 5 + 3 y los 4 paquetes desde Los Mochis con la
   quinta columna vacía). */

/* Iconos (cta_icono(): width y height en el SVG, 12 a 32 px): crecen con
   la letra (× --u). Con :where() la regla no pesa nada: donde una hoja ya
   les da tamaño en CSS (y el bloque generado lo escala), manda la hoja. */
@media (min-width: 1440px) {
	:where(svg.cta-icono[width="12"]) { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
	:where(svg.cta-icono[width="14"]) { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
	:where(svg.cta-icono[width="15"]) { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
	:where(svg.cta-icono[width="16"]) { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
	:where(svg.cta-icono[width="18"]) { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
	:where(svg.cta-icono[width="20"]) { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
	:where(svg.cta-icono[width="22"]) { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
	:where(svg.cta-icono[width="24"]) { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
	:where(svg.cta-icono[width="26"]) { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
	:where(svg.cta-icono[width="28"]) { width: calc(28 * var(--u)); height: calc(28 * var(--u)); }
	:where(svg.cta-icono[width="30"]) { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
	:where(svg.cta-icono[width="32"]) { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }

	/* Foto de la tarjeta de hotel (Hoteles, rejilla de 3): su alto crece con
	   el ancho de la tarjeta y no solo con la letra, para que conserve la
	   proporción de 1440 px (378 × 220, 1.72 : 1) y no se vuelva una tira
	   (antes 2.43 : 1 a 2560). (contenido − 2 separaciones) / 3 / 1.7212. */
	.cta-hotel__foto {
		height: calc((var(--contenido) - 2 * var(--separacion)) * 0.193662);
	}
}
/* Ancho de lectura de los textos largos: 36 em (unos 83 caracteres por
   renglón). max(36em, 100% − 4 × --g1): a 1440 px no limita nada (como
   antes) y desde ahí baja poco a poco, sin saltos; hacia 1600 px ya manda
   el de 36 em (así en las pantallas de 1680 los renglones ya no pasan de
   unos 85 caracteres). Los avisos «Importante» y el texto escrito en el
   editor (entradas, páginas) sin clase propia. La misma fórmula va en las
   reglas de tour.css §22 y pagina-nosotros.css. */
@media (min-width: 1440px) {
	.cta-aviso__texto,
	.cta-prosa :where(p, li, blockquote):not([class]) {
		max-width: max(36em, 100% - var(--g1) * 4);
	}
}