/* =====================================================================
   Inicio (front-page.php) · maquetas B-Inicio, B-Inicio-p2, B-Movil y
   B-Movil-p2. Solo tokens de tokens.css; medidas de
   diseno-B/pantallas-canvas/B-Inicio*.dc.html y B-Movil*.dc.html.
   Los componentes compartidos se ajustan aquí con selectores .cta-inicio-*.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Portada (cta_hero «sangre», texto a la derecha, carrusel de 4 fotos)
   --------------------------------------------------------------------- */
/* Titular «Te llevamos por / el estado / grande» (decisión 102, tercer
   lugar, 16-oct-2026, el dueño: «también el "Te llevamos por el estado
   grande", también ponle las de antes»): vuelve tal como estaba antes de
   la decisión 99 (tema del 2-oct). La letra (Anton 400 en mayúsculas; el
   renglón grande también), los renglones 0.9 y 0.86, el espaciado 0.005em,
   el ancho de letra de Anton y el tamaño del h1 (--t-portada: 42 / 64 /
   85 px; el 0.005em se calcula con él y los renglones lo heredan en px,
   0.21 / 0.32 / 0.425 px) son los de todas las portadas (componentes.css
   §25, .cta-hero__titulo). Aquí van los tamaños propios de Inicio en el
   2-oct: 46 / 104 px en celular, 64 / 129 px de 768 a 1279 (los de todas
   las portadas, --t-portada y --t-portada-grande) y 92 / 196 px desde
   1280. Con el límite por ancho de cada renglón (componentes.css,
   .cta-hero__linea y su regla de 1024 px): a 320 px «grande» baja a 83 px
   y «Te llevamos por» parte en dos renglones; desde 1280 px, «grande» mide
   190 px. Lo demás de la portada (texto de bienvenida y botones) sigue en
   Montserrat. Anton se precarga solo en celular (media="(max-width:
   767px)"; medición en inc/assets.php, cta_precargar_fuentes()). */
@media (max-width: 767px) {
	/* Decisión 55: sin el texto de bienvenida en celular (clase
	   cta-hero--texto-escritorio), la portada cabe en la primera pantalla y
	   asoma la sección siguiente. */
	.cta-inicio-portada.cta-hero--alto-g {
		min-height: 700px;
	}
	.cta-inicio-portada .cta-hero__linea--normal {
		--cta-tam-linea: 46px;
	}
	.cta-inicio-portada .cta-hero__linea--grande {
		--cta-tam-linea: 104px;
		margin-top: 2px;
	}
	.cta-inicio-portada .cta-hero__contenido {
		gap: 18px;
	}
	.cta-inicio-portada .cta-hero__texto {
		font-size: 16px;
		line-height: 1.55;
	}
}
@media (min-width: 1280px) {
	.cta-inicio-portada.cta-hero--alto-g {
		min-height: 980px;
	}
	.cta-inicio-portada.cta-hero--sangre {
		padding-top: calc(var(--alto-header) + 136px);
	}
	.cta-inicio-portada .cta-hero__linea--normal {
		--cta-tam-linea: 92px;
	}
	.cta-inicio-portada .cta-hero__linea--grande {
		--cta-tam-linea: 196px;
	}
	.cta-inicio-portada .cta-hero__texto {
		max-width: 520px;
	}
}

/* ---------------------------------------------------------------------
   2. Tours destacados (decisiones 99 y 100) con la tarjeta de tour
      compartida, tal cual (sin ajustes propios de Inicio).
      Decisión 109 (20-oct-2026, «Más MODIFICACIONES», hoja 1): sin «Vive la
      experiencia a tu medida»; arriba, en medio, «Conoce nuestros tours
      destacados» y debajo su frase (ancho cómodo de lectura).
      Decisión 111 (20-oct-2026, «Aún más MODIFICACIONES», hojas 1 y 2): va
      debajo del mapa y sin el recuadro «¿No sabes cuál elegir?» (se
      quitaron sus estilos). Las dos secciones van en blanco: esta no lleva
      el relleno de arriba, porque el de abajo del mapa ya las separa (con
      los dos quedaba el doble de espacio vacío, 240 px desde 1280); así,
      entre el mapa y este titular queda el mismo espacio que entre la
      portada y el titular del mapa.
      Computadora (≥ 1280): todos en un renglón (hasta 4). 1024–1279: 3 si
      son 3; si son 4, 2 × 2. Tableta (768–1023): 2 por renglón. Celular:
      una columna (decisión 55: la más legible).
   --------------------------------------------------------------------- */
.cta-inicio-mapa + .cta-inicio-vive {
	padding-top: 0;
}
.cta-inicio-vive__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"cabeza"
		"tours";
	gap: 32px;
}
.cta-inicio-vive__cabeza {
	grid-area: cabeza;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.cta-inicio-vive__frase {
	max-width: 620px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-2);
	text-wrap: balance;
}
.cta-inicio-vive__tours {
	grid-area: tours;
	display: flex;
	flex-direction: column;
	gap: 28px;
	min-width: 0;
}
/* Columnas de la rejilla de Inicio (la clase propia gana a las de
   componentes.css, que son para los listados). */
.cta-inicio-vive .cta-inicio-vive__rejilla-tours {
	grid-template-columns: minmax(0, 1fr);
}
/* «Ver todos los paquetes» en medio en todos los anchos, como el titular
   (decisión 109, hoja 1). */
.cta-inicio-vive__mas {
	display: flex;
	justify-content: center;
	margin: 0;
}
@media (min-width: 768px) {
	.cta-inicio-vive__cabeza {
		gap: 14px;
	}
	.cta-inicio-vive .cta-inicio-vive__rejilla-tours {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.cta-inicio-vive .cta-inicio-vive__rejilla-tours--1 {
		grid-template-columns: minmax(0, 1fr);
		max-width: 584px;
	}
	/* 3 en 2 columnas: la tercera ocupa el renglón completo */
	.cta-inicio-vive__rejilla-tours--3 > .cta-tarjeta-tour:last-child {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1024px) {
	.cta-inicio-vive__rejilla {
		row-gap: var(--e-8);
	}
	.cta-inicio-vive .cta-inicio-vive__rejilla-tours--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.cta-inicio-vive__rejilla-tours--3 > .cta-tarjeta-tour:last-child {
		grid-column: auto;
	}
}
@media (min-width: 1280px) {
	.cta-inicio-vive__cabeza {
		gap: 16px;
	}
	.cta-inicio-vive .cta-titulo-seccion {
		font-size: 48px;
	}
	.cta-inicio-vive__frase {
		font-size: var(--t-cuerpo);
	}
	.cta-inicio-vive .cta-inicio-vive__rejilla-tours--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 24px;
	}
}

/* ---------------------------------------------------------------------
   3. «¿Qué visitar en Chihuahua?»: el mapa tiene hoja propia,
      inicio-mapa.css (la encola inc/paginas/inicio-mapa.php).
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   4. Tiendita «Próximamente» (decisión 6)
   --------------------------------------------------------------------- */
.cta-inicio-tiendita {
	overflow: hidden;
}
.cta-inicio-tiendita__patron {
	background-color: color-mix(in srgb, var(--cta-rojo) 42%, transparent);
	-webkit-mask-image: radial-gradient(ellipse 48% 44% at 100% 0%, #000 0%, #000 30%, transparent 100%), var(--corazones-mascara);
	mask-image: radial-gradient(ellipse 48% 44% at 100% 0%, #000 0%, #000 30%, transparent 100%), var(--corazones-mascara);
}
.cta-inicio-tiendita__rejilla {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"texto"
		"categorias"
		"botones";
	gap: 24px;
}
.cta-inicio-tiendita__texto {
	grid-area: texto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.cta-inicio-tiendita__titulo {
	font-size: 64px;
	line-height: 1;
	color: var(--titulo);
	letter-spacing: -0.035em;
}
.cta-inicio-tiendita__parrafo {
	font-size: 16px;
	line-height: 1.55;
	color: var(--texto-2);
}
.cta-inicio-tiendita__botones {
	grid-area: botones;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cta-inicio-tiendita__botones .cta-btn {
	width: 100%;
}
.cta-inicio-tiendita__categorias {
	grid-area: categorias;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-inicio-tiendita__categoria {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 14px 10px 16px;
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	text-align: center;
}
.cta-inicio-tiendita__dibujo {
	display: block;
	width: 112px;
	height: 112px;
}
.cta-inicio-tiendita__dibujo--vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cta-rojo);
}
.cta-inicio-tiendita__categoria-nombre {
	font-size: 17px;
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.25;
	color: var(--titulo);
	font-weight: var(--peso-subtitulo);
}
.cta-inicio-tiendita__categoria-estado {
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--texto-3);
}
@media (max-width: 767px) {
	.cta-inicio-tiendita {
		padding-block: 72px;
	}
	.cta-inicio-tiendita__patron {
		-webkit-mask-image: radial-gradient(ellipse 90% 30% at 100% 0%, #000 0%, transparent 100%), var(--corazones-mascara);
		mask-image: radial-gradient(ellipse 90% 30% at 100% 0%, #000 0%, transparent 100%), var(--corazones-mascara);
	}
}
@media (min-width: 768px) {
	.cta-inicio-tiendita__botones {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 16px;
	}
	.cta-inicio-tiendita__botones .cta-btn {
		width: auto;
	}
	.cta-inicio-tiendita__categorias {
		gap: 24px;
	}
	.cta-inicio-tiendita__categoria {
		gap: 10px;
		padding: 26px 20px 24px;
		border-radius: var(--r-producto);
	}
	.cta-inicio-tiendita__dibujo {
		width: 170px;
		height: 170px;
	}
	.cta-inicio-tiendita__categoria-nombre {
		font-size: 18px;
	}
	.cta-inicio-tiendita__categoria-estado {
		font-size: 12.5px;
	}
	.cta-inicio-tiendita__parrafo {
		font-size: var(--t-lead);
	}
}
@media (min-width: 1024px) {
	.cta-inicio-tiendita__rejilla {
		grid-template-columns: minmax(0, 540px) minmax(0, 600px);
		grid-template-rows: 1fr auto auto 1fr;
		grid-template-areas:
			".       categorias"
			"texto   categorias"
			"botones categorias"
			".       categorias";
		justify-content: space-between;
		column-gap: 40px;
		row-gap: 0;
	}
	.cta-inicio-tiendita__texto {
		gap: 28px;
	}
	.cta-inicio-tiendita__botones {
		margin-top: 34px;
	}
	.cta-inicio-tiendita__titulo {
		font-size: 96px;
	}
}
/* Foto de la categoría elegida por el dueño (decisión 58) */
.cta-inicio-tiendita__foto {
	object-fit: cover;
	border-radius: 24px;
}

/* Revisión de celular (1-oct-2026, segunda vuelta) */

/* Celular (decisión 55; revisión del 1-oct-2026, noche): «Próximamente» de
   las categorías de la Tiendita a 12 px como mínimo. */
@media (max-width: 767px) {
	.cta-inicio-tiendita__categoria-estado {
		font-size: 12px;
	}
}

/* <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-inicio-portada.cta-hero--alto-g {
		min-height: calc(980 * var(--u));
	}
	.cta-inicio-portada.cta-hero--sangre {
		padding-top: calc(var(--alto-header) + calc(136 * var(--u)));
	}
	.cta-inicio-portada .cta-hero__linea--normal {
		--cta-tam-linea: calc(92 * var(--u));
	}
	.cta-inicio-portada .cta-hero__linea--grande {
		--cta-tam-linea: calc(196 * var(--u));
	}
	.cta-inicio-portada .cta-hero__texto {
		max-width: calc(520 * var(--u));
	}
	.cta-inicio-mapa + .cta-inicio-vive {
		padding-top: 0;
	}
	.cta-inicio-vive__rejilla {
		gap: calc(32 * var(--u));
	}
	.cta-inicio-vive__cabeza {
		gap: calc(12 * var(--u));
	}
	.cta-inicio-vive__frase {
		max-width: calc(620 * var(--u));
		font-size: calc(16 * var(--u));
	}
	.cta-inicio-vive__tours {
		gap: calc(28 * var(--u));
	}
	.cta-inicio-vive__cabeza {
		gap: calc(14 * var(--u));
	}
	.cta-inicio-vive .cta-inicio-vive__rejilla-tours--1 {
		max-width: calc(584 * var(--u));
	}
	.cta-inicio-vive__rejilla {
		row-gap: var(--e-8);
	}
	.cta-inicio-vive__cabeza {
		gap: calc(16 * var(--u));
	}
	.cta-inicio-vive .cta-titulo-seccion {
		font-size: calc(48 * var(--u));
	}
	.cta-inicio-vive__frase {
		font-size: var(--t-cuerpo);
	}
	.cta-inicio-vive .cta-inicio-vive__rejilla-tours--4 {
		gap: calc(24 * var(--u));
	}
	.cta-inicio-tiendita__rejilla {
		gap: calc(24 * var(--u));
	}
	.cta-inicio-tiendita__texto {
		gap: calc(20 * var(--u));
	}
	.cta-inicio-tiendita__titulo {
		font-size: calc(64 * var(--u));
	}
	.cta-inicio-tiendita__parrafo {
		font-size: calc(16 * var(--u));
	}
	.cta-inicio-tiendita__botones {
		gap: calc(12 * var(--u));
	}
	.cta-inicio-tiendita__categorias {
		gap: calc(14 * var(--u));
		padding: 0;
	}
	.cta-inicio-tiendita__categoria {
		gap: calc(6 * var(--u));
		padding: calc(14 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u));
	}
	.cta-inicio-tiendita__dibujo {
		width: calc(112 * var(--u));
		height: calc(112 * var(--u));
	}
	.cta-inicio-tiendita__categoria-nombre {
		font-size: calc(17 * var(--u));
	}
	.cta-inicio-tiendita__categoria-estado {
		font-size: calc(11.5 * var(--u));
	}
	.cta-inicio-tiendita__botones {
		gap: calc(16 * var(--u));
	}
	.cta-inicio-tiendita__botones .cta-btn {
		width: auto;
	}
	.cta-inicio-tiendita__categorias {
		gap: calc(24 * var(--u));
	}
	.cta-inicio-tiendita__categoria {
		gap: calc(10 * var(--u));
		padding: calc(26 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u));
	}
	.cta-inicio-tiendita__dibujo {
		width: calc(170 * var(--u));
		height: calc(170 * var(--u));
	}
	.cta-inicio-tiendita__categoria-nombre {
		font-size: calc(18 * var(--u));
	}
	.cta-inicio-tiendita__categoria-estado {
		font-size: calc(12.5 * var(--u));
	}
	.cta-inicio-tiendita__parrafo {
		font-size: var(--t-lead);
	}
	.cta-inicio-tiendita__rejilla {
		grid-template-columns: minmax(0, calc(540 * var(--u))) minmax(0, calc(600 * var(--u)));
		grid-template-rows: 1fr auto auto 1fr;
		column-gap: calc(40 * var(--u));
		row-gap: 0;
	}
	.cta-inicio-tiendita__texto {
		gap: calc(28 * var(--u));
	}
	.cta-inicio-tiendita__botones {
		margin-top: calc(34 * var(--u));
	}
	.cta-inicio-tiendita__titulo {
		font-size: calc(96 * var(--u));
	}
	.cta-inicio-tiendita__foto {
		border-radius: calc(24 * var(--u));
	}
}
/* </pantallas-grandes> */