/* =====================================================================
   Chihuahua Te Amo · base: fuentes autoalojadas, reset, tipografía,
   retícula y utilidades. Escala de tokens.css (Montserrat, decisión 99;
   Anton y Bebas Neue solo en los titulares de las portadas y el letrero
   del pie, decisión 102).
   ===================================================================== */

/* Fuentes (SIL Open Font License 1.1, ver assets/fonts/OFL-*.txt).
   Montserrat variable (pesos 300 a 900 en un solo archivo, más su
   itálica) es la letra del sitio desde la decisión 99 (16-oct-2026).
   Decisión 102 (16-oct-2026): dos usos vuelven a la letra de antes, en
   mayúsculas, con su token de tokens.css y nada más lo usa:
     · Anton (--fuente-portada): el titular de la portada de todas las
       páginas (componentes.css, .cta-hero__titulo: tours, Inicio, El Chepe,
       Otros destinos, Hoteles, Nosotros, Blog y sus entradas, Contacto,
       Preguntas frecuentes, legales, búsqueda, archivos, /tours/ y
       Tiendita) y el del 404 (paginas/error.css);
     · Bebas Neue (--fuente-letrero): el letrero de contorno «CHIHUAHUA TE
       AMO» del pie desde 768 px (componentes.css, .cta-pie__gigante) y el
       renglón chico «Próximamente» de la Tiendita (pagina-tiendita.css).
   Anton se precarga solo en celular, en todas las páginas, y Bebas Neue
   solo en la Tiendita y en celular (medición en inc/assets.php). El
   navegador solo descarga una fuente declarada si algún texto que se pinta
   la usa: fuera de la Tiendita, en celular no se pide Bebas Neue (el
   letrero va con display: none). */
@font-face {
	font-family: "Anton";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/anton-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Bebas Neue";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Montserrat";
	font-style: italic;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/montserrat-italic-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Reset ------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	background-color: var(--fondo);
	color-scheme: light;
	scroll-padding-top: calc(var(--alto-barra) + 16px);
}
html.tema-oscuro {
	color-scheme: dark;
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--fondo);
	color: var(--texto-2);
	font-family: var(--fuente-texto);
	font-size: var(--t-cuerpo);
	font-weight: 400;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img,
svg,
video,
picture {
	display: block;
	max-width: 100%;
}
img {
	height: auto;
}
svg {
	flex: none;
}
button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}
button {
	cursor: pointer;
}
a {
	color: var(--texto);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	transition: color 0.18s ease;
}
a:hover {
	color: var(--rojo-texto);
}
p,
ul,
ol,
dl,
figure,
blockquote {
	margin: 0;
}
ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}
dialog {
	padding: 0;
	border: 0;
	max-width: none;
	max-height: none;
	color: inherit;
}
table {
	border-collapse: collapse;
}
hr {
	border: 0;
	border-top: 1px solid var(--borde);
	margin: var(--e-6) 0;
}

/* Tipografía --------------------------------------------------------
   Decisión 99 (16-oct-2026): títulos en Montserrat, como están escritos
   (sin mayúsculas forzadas), en --titulo (#272b36 en modo claro). h1 y h2
   en 800 con renglones juntos y letras un poco más juntas; h3 a h6 en 700. */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-weight: var(--peso-titulo);
	color: var(--titulo);
	letter-spacing: var(--espaciado-titulo);
	text-wrap: balance;
}
h1 {
	font-size: var(--t-h1);
	line-height: 1.08;
}
h2 {
	font-size: var(--t-h2);
	line-height: 1.12;
}
h3,
h4,
h5,
h6 {
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
}
h3 {
	font-size: var(--t-h3);
	line-height: 1.2;
}
h4 {
	font-size: var(--t-h4);
	line-height: 1.25;
}
h5 {
	font-size: var(--t-h5);
	line-height: 1.3;
}
h6 {
	font-size: var(--t-h6);
	line-height: 1.35;
	letter-spacing: 0;
}
strong,
b {
	font-weight: 700;
	color: var(--texto);
}

.cta-display,
.cta-grande {
	display: block;
	font-size: var(--t-display);
	font-weight: var(--peso-titulo);
	line-height: 1;
	letter-spacing: -0.035em;
}
.cta-lead {
	font-size: var(--t-lead);
	line-height: 1.6;
	color: var(--texto-2);
}
.cta-nota {
	font-size: var(--t-nota);
	line-height: 1.45;
	color: var(--texto-3);
}
.cta-titulo-seccion {
	font-size: var(--t-h2);
	line-height: 1.12;
}
.cta-titulo-bloque {
	font-size: var(--t-h4);
	line-height: 1.25;
	margin-bottom: var(--e-5);
}

/* Retícula ---------------------------------------------------------- */
.cta-contenedor {
	width: 100%;
	max-width: calc(var(--contenido) + 2 * var(--margen));
	margin-inline: auto;
	padding-inline: var(--margen);
}
.cta-contenedor--texto {
	max-width: calc(820px + 2 * var(--margen));
}
.cta-seccion {
	position: relative;
	padding-block: var(--seccion-y);
	background-color: var(--fondo);
}
.cta-seccion--alt {
	background-color: var(--fondo-alt);
}
.cta-seccion--honda {
	background-color: var(--fondo-hondo);
}
.cta-main {
	display: block;
	outline: none;
}

/* Utilidades -------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	position: static !important;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	white-space: normal;
}
.cta-saltar {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 1000;
	padding: 12px 20px;
	border-radius: var(--r-pildora);
	background: var(--cta-rojo);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}
.cta-saltar:focus {
	top: 16px;
	color: #fff;
}

/* Foco visible (anillo de 2 px separado 3 px, del color del texto) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
	outline: 2px solid var(--texto);
	outline-offset: 3px;
}
.cta-main:focus-visible {
	outline: none;
}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: none;
	border-color: var(--texto);
	box-shadow: 0 0 0 4px var(--halo);
}
::placeholder {
	color: var(--texto-3);
	opacity: 1;
}
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--cta-rojo);
}
::selection {
	background: var(--cta-rojo);
	color: #fff;
}

/* Transición suave al cambiar de modo (solo durante el cambio) */
@media (prefers-reduced-motion: no-preference) {
	html.tema-cambiando,
	html.tema-cambiando *,
	html.tema-cambiando *::before,
	html.tema-cambiando *::after {
		transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, fill 0.3s ease, stroke 0.3s ease, box-shadow 0.3s ease !important;
	}
}
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* Contenido escrito en el editor (páginas, entradas) ----------------
   Solo afecta a elementos sin clase: los componentes (tarjetas, botones,
   listas con estilo) que aparecen dentro del contenido no se tocan. */
.cta-prosa {
	color: var(--texto-2);
}
.cta-prosa :where(p, ul, ol, h2, h3, h4, blockquote, figure, table):not([class]) + :where(p, ul, ol, h2, h3, h4, blockquote, figure, table):not([class]) {
	margin-top: 1.1em;
}
.cta-prosa :where(h2):not([class]) {
	margin-top: 1.6em;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
}
.cta-prosa :where(h3):not([class]) {
	margin-top: 1.4em;
	font-size: clamp(19px, 1.8vw, 22px);
}
.cta-prosa > :first-child {
	margin-top: 0;
}
.cta-prosa :where(ul, ol):not([class]) {
	padding-left: 1.3em;
}
.cta-prosa ul:not([class]) li::marker {
	color: var(--cta-rojo);
}
.cta-prosa ol:not([class]) li::marker {
	color: var(--rojo-texto);
	font-weight: 700;
}
.cta-prosa :where(ul, ol):not([class]) li + li {
	margin-top: 0.5em;
}
.cta-prosa img[class*="wp-image-"],
.cta-prosa :where(p, figure):not([class]) > img {
	border-radius: var(--r-bloque);
	margin-block: var(--e-6);
}
.cta-prosa :where(p, li, td, blockquote, figcaption) a:not([class]) {
	color: var(--texto);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--cta-rojo);
}
.cta-prosa :where(p, li, td, blockquote, figcaption) a:not([class]):hover {
	color: var(--rojo-texto);
}
.cta-prosa blockquote:not([class]) {
	padding: var(--e-5) var(--e-6);
	border-left: 3px solid var(--cta-rojo);
	background: var(--fondo-alt);
	border-radius: 0 var(--r-bloque) var(--r-bloque) 0;
}

/* Texto justificado -------------------------------------------------
   Decisión 111 (20-oct-2026, hoja 3 de «Aún más MODIFICACIONES», Arturo,
   con la historia de Conócenos: «el texto de todas las páginas debe estar
   justificado»). Los párrafos y las viñetas de texto corrido van
   justificados en todas las páginas y en todos los anchos: páginas, tours,
   entradas del blog, preguntas frecuentes, legales y el texto de las
   tarjetas. Con guiones (el <html lang="es-MX"> de cta_idioma_documento()),
   como el itinerario (decisión 109, tour.css §7): sin cortar palabras de
   menos de 6 letras ni dejar menos de 3 letras en un renglón, y sin
   espaciado extra entre palabras. El último renglón va a la izquierda
   (text-align-last: auto). Sin text-wrap: pretty: junto con el justificado,
   Chrome estiraba más los renglones de arriba para no dejar una palabra
   sola al final (huecos de 2 a 3 letras en computadora; sin él, menos de
   1.5). Todo con :where(), sin peso: la alineación propia de un
   componente (en medio, a la derecha) gana siempre. Viñetas: las de las
   listas sin clase (blog, legales, respuestas) y las de las listas de
   texto de los componentes. */
:where(p),
:where(ul:not([class]), ol:not([class]), .cta-lista:not(.cta-lista--chips), .cta-faq__puntos, .cta-entrada-tour__incluye, .cta-entrada-tour__salidas, .cta-tdia__lista) > :where(li) {
	text-align: justify;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 6 3 3;
}
/* Celulares (menos de 480 px, unas 25 a 40 letras por renglón): con los
   mismos límites quedaban huecos grandes entre palabras («Nuestra
   historia» a 320 px); se permite cortar palabras desde 5 letras y dejar 2
   en un renglón («comen-zó», «Artu-ro»). */
@media (max-width: 479px) {
	:where(p),
	:where(ul:not([class]), ol:not([class]), .cta-lista:not(.cta-lista--chips), .cta-faq__puntos, .cta-entrada-tour__incluye, .cta-entrada-tour__salidas, .cta-tdia__lista) > :where(li) {
		hyphenate-limit-chars: 5 2 2;
	}
}
/* En celulares, las viñetas, los renglones del día a día y los de «Antes
   de viajar» (columnas angostas con sangría o ícono, de 20 a 30 letras)
   van a la izquierda: los
   nombres propios y las palabras con mayúscula no se cortan con guion y,
   justificados, dejaban huecos de 5 a 7 letras («Transferencia      o»,
   «07:00 A.M.      Desayuno»). Los párrafos se siguen justificando. */
@media (max-width: 479px) {
	:where(ul:not([class]), ol:not([class]), .cta-lista:not(.cta-lista--chips), .cta-faq__puntos, .cta-entrada-tour__incluye, .cta-entrada-tour__salidas, .cta-tdia__lista) > :where(li),
	:where(.cta-tdian__texto) > :where(p),
	:where(.cta-tour-antes__lista) :where(p) {
		text-align: start;
	}
}
/* Celulares de menos de 380 px de ancho (320 y 360 px: unas 30 a 35 letras
   por renglón): los párrafos también van a la izquierda. Aun con guiones,
   en las respuestas de Preguntas frecuentes y en «¿Cómo reservar?» quedaban
   huecos de 3 a 5 letras («disponibilidad      cambia»). Desde 380 px (390,
   430…) se justifican. */
@media (max-width: 379px) {
	:where(p) {
		text-align: start;
	}
}
/* No se justifican y siguen como su contenedor (a la izquierda, o en medio
   donde Arturo los pidió en medio): encabezado, menús y ventanas; pie;
   portadas y bandas sobre foto; formularios, calculadoras y calendario;
   precios; direcciones; la burbuja del mensaje de la Tiendita; los textos
   de los encabezados en medio («Conoce nuestros tours destacados», «¿Qué
   visitar en Chihuahua?», «Tren Chepe»…); los párrafos que son título,
   subtítulo, rótulo, etiqueta, conteo o botón; los textos cortos de una o
   dos líneas en columnas angostas (la ubicación de los hoteles, el crédito
   del mapa de Inicio, el texto de cada época de «Recomendaciones de
   vestimenta según la época», los nombres de «Visitamos» en 2 o 3
   columnas, decisión 113: «Menonitas,   quesería   menonita», «Cusára-re»;
   su renglón con una frase completa, «--frase», sí se justifica);
   y la frase de la tarjeta de tour (de 4 a 12 palabras en 2 o 3 renglones:
   justificada, el primer renglón quedaba con huecos grandes,
   «Sandboarding    en    las    Dunas», porque los nombres propios no se
   cortan con guion). Un contenedor nuevo que vaya en medio se agrega a la
   primera lista. */
:where(
	.cta-header, .cta-nav, nav, .cta-panel, .cta-busqueda, .cta-dialogo, .cta-lightbox, .cta-pie,
	.cta-hero, .cta-portada, .cta-banda-foto, .cta-destino,
	form, .cta-campo, .cta-calc, .cta-cotizar, .cta-correo, .cta-calendario,
	.cta-desde, .cta-tarifas, .cta-precios-libres, .cta-tour-libres, .cta-entrada-tour__precios,
	address, .cta-tiendita-mensaje,
	[class*="--centro"], .cta-inicio-mapa__texto, .cta-inicio-vive__cabeza, .cta-inicio-tiendita__categoria,
	.cta-listados-clases__encabezado, .cta-nosotros-confianza__cabeza, .cta-contacto-mapa__pin,
	.cta-contacto-agenda__titulo, .cta-legal__ayuda,
	.cta-tour-visitamos__lista:not(.cta-tour-visitamos__lista--frase)
) :where(p, li),
:where(
	[class*="titulo"], [class*="etiqueta"], [class*="conteo"], [class*="contador"], [class*="boton"],
	.cta-tour-frase, .cta-tour-cierre, .cta-entrada__frase, .cta-error__numero, .cta-hotel__direccion, .cta-contacto-oficina__horario, .cta-faq__enlaces,
	.cta-tdian__noche, .cta-tdian__fin, .cta-tour-hotel__lugar, .cta-tour-hotel__noches, .cta-hotel__lugar, .cta-hotel__ubicacion, .cta-tour-epoca__meses, .cta-tour-epoca__texto,
	.cta-inicio-mapa__credito,
	.cta-ficha__estrellas, .cta-tarjeta-tour__datos, .cta-tarjeta-tour__cuenta, .cta-tarjeta-tour__estrellas,
	.cta-tarjeta-tour__teaser
):where(p, li) {
	text-align: inherit;
	-webkit-hyphens: manual;
	hyphens: manual;
	text-wrap: inherit;
}
/* Sin guiones dentro de un párrafo: enlaces (direcciones web, correos,
   nombres de tours), botones, rótulos y campos. */
:where(p, li) :where(a, .cta-btn, .cta-rotulo-boton, button, label, input, select) {
	-webkit-hyphens: manual;
	hyphens: manual;
}
/* Direcciones web escritas en el texto (las enlaza make_clickable() con
   rel="nofollow", cta_enlazar()): se pueden cortar en cualquier letra, así
   empiezan en el mismo renglón y el de antes no queda estirado de orilla a
   orilla («Términos   y   condiciones:» en Antes de viajar). */
:where(p, li) :where(a[rel~="nofollow"]) {
	word-break: break-all;
}

/* <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) {
	html {
		scroll-padding-top: calc(var(--alto-barra) + calc(16 * var(--u)));
	}
	.cta-contenedor--texto {
		max-width: calc(calc(820 * var(--u)) + 2 * var(--margen));
	}
	.cta-saltar {
		top: calc(-100 * var(--u));
		left: calc(16 * var(--u));
		padding: calc(12 * var(--u)) calc(20 * var(--u));
	}
	.cta-saltar:focus {
		top: calc(16 * var(--u));
	}
	.cta-prosa :where(h2):not([class]) {
		font-size: clamp(calc(24 * var(--u)), 2.6vw, calc(32 * var(--u)));
	}
	.cta-prosa :where(h3):not([class]) {
		font-size: clamp(calc(19 * var(--u)), 1.8vw, calc(22 * var(--u)));
	}
	.cta-prosa :where(ul, ol):not([class]) {
		padding-left: 1.3em;
	}
	.cta-prosa blockquote:not([class]) {
		padding: var(--e-5) var(--e-6);
	}
}
/* </pantallas-grandes> */