/* =====================================================================
   Listados (constructor «listados»): /el-chepe/, /otros-destinos/,
   /hoteles/ y /tours/. Hoja común que cargan las cuatro plantillas con
   cta_listados_encolar() (inc/paginas/listados.php); cada vista suma su
   hoja propia (pagina-el-chepe.css, pagina-otros-destinos.css,
   pagina-hoteles.css, listado.css). Solo tokens de tokens.css.
   Medidas: diseno-B/pantallas-canvas/B-ElChepe*, B-OtrosDestinos, B-Hoteles.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Encabezado de grupo: los renglones del titular en un solo <hN> (se lee
   completo). Sin rótulo con corazón ni conteo desde la decisión 109 (hoja
   3); sin enlace va en medio (componentes.css §3) y sus renglones siguen
   seguidos («Iniciando desde Chihuahua» en un renglón si cabe). El primer
   renglón empieza con mayúscula desde PHP (cta_listados_encabezado()).
   --------------------------------------------------------------------- */
.cta-listados-encabezado {
	margin-bottom: var(--e-8);
}
.cta-listados-encabezado__titulo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.12;
	overflow-wrap: break-word;
}
/* Titulares de grupo: 48 px con Montserrat (decisión 99; antes 72 px con Anton) */
@media (min-width: 1280px) {
	.cta-listados-encabezado .cta-listados-encabezado__titulo {
		font-size: 48px;
	}
}
.cta-listados-encabezado__linea {
	display: block;
	max-width: 100%;
}
.cta-encabezado-seccion--centro .cta-listados-encabezado__titulo {
	display: block;
}
.cta-encabezado-seccion--centro .cta-listados-encabezado__linea {
	display: inline;
}
.cta-listados-encabezado .cta-encabezado-seccion__lado {
	color: var(--texto-2);
}
@media (max-width: 767px) {
	.cta-listados-encabezado {
		margin-bottom: var(--e-6);
	}
}

/* ---------------------------------------------------------------------
   Portada: el titular «Tours en / El Chepe» ocupa el ancho de la maqueta
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.cta-listados-hero .cta-hero__contenido {
		max-width: 1000px;
	}
	.cta-listados-hero .cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(1000px / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-listados-hero .cta-hero__texto {
		max-width: 640px;
	}
}
/* Maqueta: portada de 880 px; «Tours en» 92 px y «El Chepe» 196 px (en
   Anton, como en el tema del 2-oct: decisión 102, «Todas las portadas»;
   con Montserrat eran 48 y 104 px). Debajo de 1280 px, los tamaños de
   todas las portadas (componentes.css §25). */
@media (min-width: 1280px) {
	.cta-listados-hero.cta-hero--alto-g {
		min-height: 880px;
	}
	.cta-listados-hero .cta-hero__linea--normal {
		--cta-tam-linea: 92px;
	}
	.cta-listados-hero .cta-hero__linea--grande {
		--cta-tam-linea: 196px;
	}
}

/* ---------------------------------------------------------------------
   Barra de filtros bajo la portada
   --------------------------------------------------------------------- */
.cta-listados-filtros .cta-filtros__interior {
	min-height: 108px;
}
@media (max-width: 1023px) {
	.cta-listados-filtros .cta-filtros__interior {
		min-height: 0;
	}
}

/* ---------------------------------------------------------------------
   Rejillas de tarjetas de tour: 4 por renglón desde 1280 px, 3 de 1024 a
   1279, 2 de 768 a 1023 y 1 en celular (decisión 99, hoja 6; la rejilla y
   la tarjeta compacta están en componentes.css §5). Ya no hay tarjeta
   ancha al final de un número impar.
   --------------------------------------------------------------------- */
.cta-listados-grupo .cta-rejilla-tours {
	gap: var(--separacion);
}


/* La portada ya no lleva controles de carrusel: las fotos cambian solas con
   fundido (decisión 52, cta_hero «fundido»). */

/* La tarjeta sin cifras de duración (p. ej. un tour sin «duracion» en el
   JSON) conserva la línea roja: la regla pasó a componentes.css §5 para que
   valga también en la búsqueda. */

/* Las estrellas de la tarjeta y «Faltan N días» pasaron a componentes.css §5
   (también salen en los destacados de Inicio). */

/* <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-listados-encabezado .cta-listados-encabezado__titulo {
		font-size: calc(48 * var(--u));
	}
	.cta-listados-hero .cta-hero__contenido {
		max-width: calc(1000 * var(--u));
	}
	.cta-listados-hero .cta-hero__linea {
		font-size: min(var(--cta-tam-linea), calc(calc(1000 * var(--u)) / (var(--cta-letras, 6) * var(--ancho-letra))));
	}
	.cta-listados-hero .cta-hero__texto {
		max-width: calc(640 * var(--u));
	}
	.cta-listados-hero.cta-hero--alto-g {
		min-height: calc(880 * var(--u));
	}
	.cta-listados-hero .cta-hero__linea--normal {
		--cta-tam-linea: calc(92 * var(--u));
	}
	.cta-listados-hero .cta-hero__linea--grande {
		--cta-tam-linea: calc(196 * var(--u));
	}
	.cta-listados-filtros .cta-filtros__interior {
		min-height: calc(108 * var(--u));
	}
}
/* </pantallas-grandes> */