/* =====================================================================
   Inicio · «¿Qué visitar en Chihuahua?»: explorador del mapa del estado
   (decisión 99, hoja 3 de Arturo, 16-oct-2026).
   Plantilla: template-parts/inicio/mapa.php · datos: inc/paginas/inicio-mapa.php
   (que encola esta hoja después de inicio.css) · script: js/paginas/inicio.js.
   Solo tokens del tema; claro y oscuro.

   - Encabezado (decisión 109, 20-oct-2026, «Más MODIFICACIONES», hoja 2):
     el titular y el texto, juntos y en medio, en todos los anchos; la
     sección va con fondo blanco (--fondo; en oscuro, el de la página), así
     que la tarjeta del explorador se separa del fondo con su orilla y su
     sombra. Desde la decisión 111 (20-oct-2026, «Aún más MODIFICACIONES»,
     hoja 1) es la primera sección después de la portada.
   - Una tarjeta con dos paneles: el mapa (números de los destinos) y el
     panel (conteo, «Animar», buscador, filtros y lista). Desde 1024 px, uno
     al lado del otro; abajo de 1024, el mapa arriba y la lista debajo.
   - La tarjeta del destino va sobre el mapa, abajo a la derecha (en esa
     esquina casi no hay destinos: es Durango); en el celular (< 768 px) es
     una hoja que sube desde abajo.
   - El mapa tiene tres tamaños según su propio ancho (contenedor «cta-mapa»):
     mínimo (≤ 330 px, celulares de 320 a 370), angosto (331–479) y ancho
     (≥ 480). Cambian el tamaño de los números y el lugar de los rótulos de
     los estados vecinos y de los puntos de referencia.
   - Sin JavaScript: no hay controles ni tarjetas; números y renglones son
     enlaces a los tours.
   ===================================================================== */

/* Colores: crema (decisión 123, 26-oct-2026, el dueño: «sobre el mapa del
   inicio hacerlo color cremita, no azul ni rojo, mejor un tipo color
   cremita»). El estado va en crema; orillas, ruta, frontera, líneas guía y
   puntos de referencia en un café arena suave; vecinos y costa, más tenues;
   los números, crema muy claro con orilla arena y la cifra en café oscuro;
   lo resaltado, lo marcado y lo activo (número, renglón, filtro elegido,
   buscador con foco, «Animar», anillo de foco, línea guía y punto real del
   marcado, nombre del número en el celular), en crema y caramelo más
   intensos. En oscuro, lo mismo cálido: la tarjeta y el estado en café muy
   oscuro, líneas arena y números claros (antes noche azulada).
   Del 19 al 26-oct (decisión 107, «colores más claros, no tonos rojizos ni
   negros») fue gris azulado (#f2f5f8, líneas #7d8da1) con el acento azul
   pizarra (#4a6788); antes, rosa, rojo y negro. Tabla con el antes en
   MAPA.md §9.
   El acento (--acento-*) se redefine aquí, solo dentro de la sección: el
   de tokens.css sigue azul para el punto y la camarita de «Visitamos»
   (paginas/tour.css, decisión 116). El botón «Conocer tour» de la tarjeta
   sigue rojo (decisión 108: «así está bien en rojo») y la sección sigue con
   el fondo blanco de la página (decisión 109).
   Contrastes (claro · oscuro), medidos en Chrome con los colores reales:
     --mapa-relleno  el estado (#f6efe1 · #2b241b)
     --mapa-linea    orilla del estado, ruta, frontera, líneas guía, puntos
                     de referencia y lugar real (#957d5a: 3.42:1 sobre el
                     estado, 3.92:1 sobre blanco · #a48f70: 4.92:1 sobre el
                     estado)
     --mapa-suave    estados vecinos y costa (#ddd0b9 · #4d4234; adorno)
     --mapa-pin-*    número: fondo, orilla y cifra (#fffdf8, orilla #9b835f
                     3.16:1 sobre el estado, cifra #4a3524 11.3:1 · #3a3127,
                     #b39d7c 5.86:1, #f7eddc 11.0:1)
     --mapa-campo    orilla del buscador, de los filtros y de «Animar»
                     (#957d5a: 3.92:1 sobre blanco · #8c7a62: 4.18:1 sobre la
                     tarjeta). Antes los filtros y «Animar» llevaban la orilla
                     gris del tema (1.6:1); ahora pasan 3:1.
     --mapa-rotulo   estados vecinos y puntos de referencia (#776650: 4.83:1
                     sobre el estado · #cbbda7: 8.3:1)
     --mapa-sombra   sombra de los números (café, no gris azulado)
     --acento        orillas, íconos, anillo de foco, línea guía y punto real
                     marcados (#9a6420: 4.98:1 sobre blanco, 4.35:1 sobre el
                     estado · #e0b878: 9.31:1 sobre la tarjeta)
     --acento-texto  texto en acento (#74481a: 6.0:1 sobre --acento-suave ·
                     #f0d3a2: 7.57:1)
     --acento-suave  número resaltado, renglón y filtro marcados (#f5dfb5 ·
                     #4a3a24)
     --acento-tenue  renglón al pasar el ratón (#fbf4e6 · #2e271e)
     --acento-claro  relleno del número marcado (#ecc98a con
                     --sobre-acento-claro #3a2410: 9.23:1 · #e0b878 con
                     #2a1a08: 9.04:1)
     --acento-halo   halo del número marcado y del buscador con foco */
.cta-inicio-mapa {
	--mapa-relleno: #f6efe1;
	--mapa-linea: #957d5a;
	--mapa-suave: #ddd0b9;
	--mapa-pin-fondo: #fffdf8;
	--mapa-pin-orilla: #9b835f;
	--mapa-pin-cifra: #4a3524;
	--mapa-campo: #957d5a;
	--mapa-rotulo: #776650;
	--mapa-sombra: rgba(74, 53, 36, 0.18);
	--mapa-pin: 24px;
	--mapa-pin-letra: 12px;
	--mapa-activo: var(--acento-suave);
	--acento: #9a6420;
	--acento-texto: #74481a;
	--acento-suave: #f5dfb5;
	--acento-tenue: #fbf4e6;
	--acento-claro: #ecc98a;
	--sobre-acento-claro: #3a2410;
	--acento-halo: rgba(154, 100, 32, 0.28);
}
.tema-oscuro .cta-inicio-mapa {
	--tarjeta: #1e1a15;
	--input-bg: #26211b;
	--mapa-relleno: #2b241b;
	--mapa-linea: #a48f70;
	--mapa-suave: #4d4234;
	--mapa-pin-fondo: #3a3127;
	--mapa-pin-orilla: #b39d7c;
	--mapa-pin-cifra: #f7eddc;
	--mapa-campo: #8c7a62;
	--mapa-rotulo: #cbbda7;
	--mapa-sombra: rgba(0, 0, 0, 0.35);
	--acento: #e0b878;
	--acento-texto: #f0d3a2;
	--acento-suave: #4a3a24;
	--acento-tenue: #2e271e;
	--acento-claro: #e0b878;
	--sobre-acento-claro: #2a1a08;
	--acento-halo: rgba(224, 184, 120, 0.32);
}
/* Anillo de foco del explorador en el acento caramelo (4.98:1 sobre
   blanco; oscuro 9.31:1), no en negro. */
.cta-inicio-mapa__explorador :focus-visible {
	outline-color: var(--acento);
}

/* ---------------------------------------------------------------------
   Encabezado de la sección y explorador
   --------------------------------------------------------------------- */
/* Fondo blanco (decisión 109, hoja 2: «pon este fondo blanco»; antes
   cta-seccion--alt, gris). Desde la decisión 111 (hoja 1 de «Aún más
   MODIFICACIONES») va justo después de la portada, con su relleno normal;
   los tours destacados, también en blanco, van debajo sin el relleno de
   arriba (inicio.css §2). */
.cta-inicio-mapa__rejilla {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
/* Titular y texto juntos y en medio; el texto con un ancho cómodo de
   lectura. */
.cta-inicio-mapa__texto {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}
.cta-inicio-mapa__intro {
	max-width: 620px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--texto-2);
	text-wrap: balance;
}
.cta-inicio-mapa__nota {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-style: italic;
	line-height: 1.45;
	color: var(--texto-3);
}
.cta-inicio-mapa__nota .cta-icono {
	flex: none;
}

.cta-inicio-mapa__explorador {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"mapa"
		"panel";
	border: 1px solid var(--borde);
	border-radius: var(--r-bloque);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	/* Los nombres que salen junto a los números nunca ensanchan la página
	   (la hoja del celular es fija: no la recorta). */
	overflow-x: clip;
}

/* ---------------------------------------------------------------------
   Panel del mapa
   --------------------------------------------------------------------- */
.cta-inicio-mapa__mapa {
	grid-area: mapa;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 16px 12px 18px;
}
.cta-inicio-mapa__marco {
	container: cta-mapa / inline-size;
	width: 100%;
	max-width: 560px;
	margin-inline: auto;
}
.cta-inicio-mapa__lienzo {
	position: relative;
	aspect-ratio: 640 / 780;
}

/* Dibujo (SVG en línea, trazos del INEGI) */
.cta-inicio-mapa__dibujo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.cta-inicio-mapa__dibujo :where(path, line) {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.cta-inicio-mapa__vecinos,
.cta-inicio-mapa__costa {
	stroke: var(--mapa-suave);
	stroke-width: 1;
}
.cta-inicio-mapa__frontera {
	stroke: var(--mapa-linea);
	stroke-width: 1;
	stroke-dasharray: 5 4;
	opacity: 0.75;
}
.cta-inicio-mapa__estado {
	fill: var(--mapa-relleno);
	stroke: var(--mapa-linea);
	stroke-width: 1.4;
}
.cta-inicio-mapa__ruta {
	stroke: var(--mapa-linea);
	stroke-width: 1.7;
	stroke-dasharray: 5 4;
}
/* Línea guía de un número apartado (Sierra Tarahumara) */
.cta-inicio-mapa__guia {
	stroke: var(--mapa-linea);
	stroke-width: 1.2;
	transition: stroke 0.18s ease;
}
.cta-inicio-mapa__guia.es-activo {
	stroke: var(--acento);
	stroke-width: 2;
}

/* Contexto: estados vecinos, puntos de referencia y lugar real de los
   números apartados (decorativo) */
.cta-inicio-mapa__contexto {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.cta-inicio-mapa__vecino {
	position: absolute;
	left: var(--x);
	top: var(--y);
	font-family: var(--fuente-texto);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1;
	white-space: nowrap;
	color: var(--mapa-rotulo);
	transform: translate(-50%, -50%);
}
/* Sonora asoma solo una franja a la izquierda: rótulo vertical */
.cta-inicio-mapa__vecino--sonora {
	left: 2.6%;
	writing-mode: vertical-rl;
	transform: translate(-50%, -50%) rotate(180deg);
}
/* Coahuila asoma solo una franja a la derecha: rótulo vertical */
.cta-inicio-mapa__vecino--coahuila {
	writing-mode: vertical-rl;
}
/* Mapa angosto: «Estados Unidos» en dos renglones */
.cta-inicio-mapa__vecino--estados-unidos {
	width: min-content;
	white-space: normal;
	line-height: 1.25;
	text-align: center;
}
.cta-inicio-mapa__ref {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 0;
	height: 0;
}
.cta-inicio-mapa__ref-punto {
	position: absolute;
	left: 0;
	top: 0;
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--mapa-linea);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	transform: translate(-50%, -50%);
}
/* Rótulo de un punto de referencia: ancla y alineación en cada tamaño del
   mapa, en px desde el centro del punto (cta_inicio_mapa_rotulo_estilo()). */
.cta-inicio-mapa__ref-nombre {
	position: absolute;
	left: var(--r-x, 7px);
	top: var(--r-y, 0px);
	font-family: var(--fuente-texto);
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var(--mapa-rotulo);
	text-shadow: 0 0 2px var(--tarjeta), 0 0 2px var(--tarjeta), 0 0 3px var(--tarjeta);
	transform: translate(var(--r-tx, 0%), var(--r-ty, -50%));
}
/* Línea guía de un punto con el rótulo debajo y lejos (El Fuerte) */
.cta-inicio-mapa__ref::after {
	content: "";
	position: absolute;
	left: -0.5px;
	top: 5px;
	width: 1px;
	height: var(--r-guia, 0px);
	background: var(--mapa-linea);
}
/* Lugar real de un número apartado: un punto lleno */
.cta-inicio-mapa__real {
	position: absolute;
	left: var(--x);
	top: var(--y);
	width: 7px;
	height: 7px;
	border: 1.5px solid var(--tarjeta);
	border-radius: var(--r-pildora);
	background: var(--mapa-linea);
	transform: translate(-50%, -50%);
}
.cta-inicio-mapa__real.es-activo {
	background: var(--acento);
}

/* ---------------------------------------------------------------------
   Números de los destinos (el centro queda en --x, --y)
   --------------------------------------------------------------------- */
.cta-inicio-mapa__pines {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-inicio-mapa__pin-item {
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 1;
	width: 0;
	height: 0;
}
.cta-inicio-mapa__pin-item:hover,
.cta-inicio-mapa__pin-item.es-resaltado {
	z-index: 3;
}
.cta-inicio-mapa__pin-item.es-activo {
	z-index: 4;
}
.cta-inicio-mapa__pin {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mapa-pin);
	height: var(--mapa-pin);
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--mapa-pin-orilla);
	border-radius: var(--r-pildora);
	background: var(--mapa-pin-fondo);
	box-shadow: 0 1px 4px var(--mapa-sombra);
	font-family: var(--fuente-texto);
	font-size: var(--mapa-pin-letra);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--mapa-pin-cifra);
	text-decoration: none;
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}
/* Área de toque de 32 px como mínimo, sin cambiar el dibujo */
.cta-inicio-mapa__pin::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: var(--r-pildora);
}
/* Resaltado (ratón encima o su renglón): fondo crema caramelo y orilla en
   el acento, número en el acento (decisión 123: 6.0:1 sobre --acento-suave;
   oscuro 7.57:1). */
.cta-inicio-mapa__pin:hover,
.cta-inicio-mapa__pin-item.es-resaltado .cta-inicio-mapa__pin {
	border-color: var(--acento);
	background: var(--acento-suave);
	color: var(--acento-texto);
	transform: translate(-50%, -50%) scale(1.12);
}
/* Marcado: relleno caramelo (--acento-claro), orilla y halo (número 9.23:1;
   oscuro 9.04:1), más grande. */
.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin {
	border: 2px solid var(--acento);
	background: var(--acento-claro);
	color: var(--sobre-acento-claro);
	box-shadow: 0 0 0 4px var(--acento-halo), 0 3px 10px var(--mapa-sombra);
	transform: translate(-50%, -50%) scale(1.22);
}
/* Fuera del filtro o de la búsqueda: tenue y sin toque */
.cta-inicio-mapa__pin-item.es-fuera .cta-inicio-mapa__pin {
	opacity: 0.25;
	pointer-events: none;
}
/* Nombre junto al número: con el ratón encima o al pasar por su renglón */
.cta-inicio-mapa__pin-nombre {
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	padding: 5px 9px;
	border: 1px solid var(--borde);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	box-shadow: var(--sombra);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--titulo);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%);
	transition: opacity 0.15s ease, visibility 0.15s;
}
.cta-inicio-mapa__pin-item--izq .cta-inicio-mapa__pin-nombre {
	left: auto;
	right: calc(100% + 8px);
}
.cta-inicio-mapa__pin:hover .cta-inicio-mapa__pin-nombre,
.cta-inicio-mapa__pin-item.es-resaltado .cta-inicio-mapa__pin-nombre {
	opacity: 1;
	visibility: visible;
}
/* Con la tarjeta abierta el nombre ya está en ella */
.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin-nombre {
	opacity: 0;
	visibility: hidden;
}
/* Celular (decisión 117, 25-oct-2026): nombre fijo debajo del número y
   líneas guía y puntos reales propios del celular (bloque del celular, más
   abajo). En tableta y computadora no salen: ahí el nombre es la píldora. */
.cta-inicio-mapa__pin-rotulo,
.cta-inicio-mapa__guia--movil,
.cta-inicio-mapa__real--movil {
	display: none;
}
/* Al marcar un destino, un solo pulso (sin repetir) */
.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin::after {
	content: "";
	position: absolute;
	inset: -2px;
	border: 2px solid var(--acento);
	border-radius: var(--r-pildora);
	opacity: 0;
	animation: cta-mapa-pulso 0.9s ease-out 1;
}
@keyframes cta-mapa-pulso {
	0% {
		opacity: 0.8;
		transform: scale(1);
	}
	100% {
		opacity: 0;
		transform: scale(2.1);
	}
}

/* Leyenda (debajo del mapa) */
.cta-inicio-mapa__leyenda {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.3;
	color: var(--texto-2);
}
.cta-inicio-mapa__leyenda li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.cta-inicio-mapa__leyenda-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border: 1px solid var(--mapa-pin-orilla);
	border-radius: var(--r-pildora);
	background: var(--mapa-pin-fondo);
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	color: var(--mapa-pin-cifra);
}
.cta-inicio-mapa__leyenda-punto {
	flex: none;
	width: 9px;
	height: 9px;
	margin-inline: 2px;
	border: 1.5px solid var(--mapa-linea);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
}
.cta-inicio-mapa__leyenda-ruta {
	flex: none;
	width: 22px;
	height: 0;
	border-top: 2px dashed var(--mapa-linea);
}
.cta-inicio-mapa__credito {
	margin: 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--texto-3);
}

/* Tamaños del mapa (consultas de contenedor) */
@container cta-mapa (max-width: 330px) {
	.cta-inicio-mapa__lienzo {
		--mapa-pin: 22px;
	}
	.cta-inicio-mapa__vecino {
		left: var(--x-min, var(--x));
		top: var(--y-min, var(--y));
		letter-spacing: 0.06em;
	}
	.cta-inicio-mapa__vecino--sin-minimo {
		display: none;
	}
	.cta-inicio-mapa__ref-nombre {
		left: var(--r-x-min, var(--r-x, 7px));
		top: var(--r-y-min, var(--r-y, 0px));
		transform: translate(var(--r-tx-min, var(--r-tx, 0%)), var(--r-ty-min, var(--r-ty, -50%)));
	}
	.cta-inicio-mapa__ref::after {
		height: var(--r-guia-min, 0px);
	}
}
@container cta-mapa (min-width: 331px) and (max-width: 479px) {
	.cta-inicio-mapa__vecino--sin-angosto {
		display: none;
	}
}
@container cta-mapa (min-width: 480px) {
	.cta-inicio-mapa__lienzo {
		--mapa-pin: 28px;
		--mapa-pin-letra: 13px;
	}
	.cta-inicio-mapa__vecino {
		left: var(--x-ancho, var(--x));
		top: var(--y-ancho, var(--y));
		letter-spacing: 0.18em;
	}
	.cta-inicio-mapa__vecino--sin-ancho {
		display: none;
	}
	.cta-inicio-mapa__vecino--estados-unidos {
		width: auto;
		white-space: nowrap;
		line-height: 1;
	}
	.cta-inicio-mapa__ref-nombre {
		left: var(--r-x-ancho, var(--r-x, 7px));
		top: var(--r-y-ancho, var(--r-y, 0px));
		transform: translate(var(--r-tx-ancho, var(--r-tx, 0%)), var(--r-ty-ancho, var(--r-ty, -50%)));
	}
	.cta-inicio-mapa__ref::after {
		height: var(--r-guia-ancho, 0px);
	}
}

/* ---------------------------------------------------------------------
   Panel: conteo, «Animar», buscador, filtros y lista
   --------------------------------------------------------------------- */
.cta-inicio-mapa__panel {
	grid-area: panel;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;
	padding: 20px 16px 22px;
	border-top: 1px solid var(--borde);
}
.cta-inicio-mapa__controles {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cta-inicio-mapa__controles[hidden] {
	display: none;
}
.cta-inicio-mapa__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cta-inicio-mapa__conteo {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--texto-2);
}
.cta-inicio-mapa__animar {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 0 18px 0 15px;
	border: 1.5px solid var(--mapa-campo);
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	font-family: var(--fuente-texto);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--titulo);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cta-inicio-mapa__animar:hover {
	border-color: var(--acento);
}
/* Corriendo («Pausar»): como el filtro elegido, en el acento caramelo
   (decisión 107: azul; antes negro) */
.cta-inicio-mapa__animar[data-animando] {
	border-color: var(--acento);
	background: var(--acento-suave);
	color: var(--acento-texto);
}
.cta-inicio-mapa__animar-icono {
	display: inline-flex;
	color: var(--acento);
}
.cta-inicio-mapa__animar[data-animando] .cta-inicio-mapa__animar-icono {
	color: inherit;
}
.cta-inicio-mapa__animar-icono--pausar,
.cta-inicio-mapa__animar[data-animando] .cta-inicio-mapa__animar-icono--animar {
	display: none;
}
.cta-inicio-mapa__animar[data-animando] .cta-inicio-mapa__animar-icono--pausar {
	display: inline-flex;
}
.cta-inicio-mapa__buscador {
	position: relative;
}
.cta-inicio-mapa__buscador-icono {
	position: absolute;
	left: 16px;
	top: 50%;
	color: var(--texto-2);
	pointer-events: none;
	transform: translateY(-50%);
}
.cta-inicio-mapa__buscar {
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 0 18px 0 46px;
	border: 1px solid var(--mapa-campo);
	border-radius: var(--r-pildora);
	background: var(--input-bg);
	font-family: var(--fuente-texto);
	font-size: 16px;
	color: var(--titulo);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.cta-inicio-mapa__buscar:hover {
	border-color: var(--acento);
}
/* Con foco: orilla y halo del acento caramelo (decisión 123; antes azul y,
   hasta la 107, negro con halo rojo; el selector le gana al de base.css
   para los campos) */
.cta-inicio-mapa .cta-inicio-mapa__buscador .cta-inicio-mapa__buscar:focus-visible {
	border-color: var(--acento);
	box-shadow: 0 0 0 4px var(--acento-halo);
}
.cta-inicio-mapa__buscar::placeholder {
	color: var(--texto-2);
	opacity: 1;
}
.cta-inicio-mapa__buscar::-webkit-search-cancel-button {
	cursor: pointer;
}
.cta-inicio-mapa__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.cta-inicio-mapa__filtros .cta-chip-filtro {
	height: 44px;
	padding: 0 18px;
	border-color: var(--mapa-campo);
	color: var(--titulo);
}
/* Filtros del mapa (decisiones 107 y 123): orilla arena (--mapa-campo,
   3.92:1; oscuro 4.18:1; antes la gris del tema, 1.6:1); al pasar, la
   orilla en el acento; el elegido («Todos» al abrir), fondo crema caramelo,
   orilla y texto en acento (6.0:1; oscuro 7.57:1). Antes, azul y, hasta la
   107, relleno negro. Solo aquí: los chips de las otras páginas no
   cambian. */
.cta-inicio-mapa__filtros .cta-chip-filtro:hover {
	border-color: var(--acento);
}
.cta-inicio-mapa__filtros .cta-chip-filtro[aria-pressed="true"] {
	border-color: var(--acento);
	background: var(--acento-suave);
	color: var(--acento-texto);
}

/* Lista numerada */
.cta-inicio-mapa__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cta-inicio-mapa__item + .cta-inicio-mapa__item {
	border-top: 1px solid var(--borde);
}
.cta-inicio-mapa__item[hidden] {
	display: none;
}
.cta-inicio-mapa__fila {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	min-height: 50px;
	margin: 0;
	padding: 6px 8px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	font-family: var(--fuente-texto);
	text-align: left;
	color: var(--titulo);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}
.cta-inicio-mapa__fila:hover,
.cta-inicio-mapa__item.es-resaltado .cta-inicio-mapa__fila {
	background: var(--acento-tenue);
}
.cta-inicio-mapa__fila:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: -2px;
}
/* Número del renglón: como el del mapa (crema muy claro con orilla arena) */
.cta-inicio-mapa__fila-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--mapa-pin-orilla);
	border-radius: var(--r-pildora);
	background: var(--mapa-pin-fondo);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	color: var(--mapa-pin-cifra);
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.cta-inicio-mapa__fila:hover .cta-inicio-mapa__fila-num,
.cta-inicio-mapa__item.es-resaltado .cta-inicio-mapa__fila-num {
	border-color: var(--acento);
}
.cta-inicio-mapa__fila-nombre {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}
.cta-inicio-mapa__fila-flecha {
	flex: none;
	color: var(--texto-2);
	transition: transform 0.18s ease, color 0.18s ease;
}
.cta-inicio-mapa__fila:hover .cta-inicio-mapa__fila-flecha {
	color: var(--acento);
	transform: translateX(3px);
}
/* Renglón marcado: fondo crema caramelo y texto en el acento (6.0:1;
   oscuro 7.57:1); su número, como el número marcado del mapa (decisión
   107: azul; antes rosa, rojo y número blanco). */
.cta-inicio-mapa__fila[aria-pressed="true"] {
	background: var(--mapa-activo);
	color: var(--acento-texto);
}
.cta-inicio-mapa__fila[aria-pressed="true"] .cta-inicio-mapa__fila-num {
	border-color: var(--acento);
	background: var(--acento-claro);
	color: var(--sobre-acento-claro);
}
.cta-inicio-mapa__fila[aria-pressed="true"] .cta-inicio-mapa__fila-flecha {
	color: var(--acento);
}
.cta-inicio-mapa__vacio {
	margin: 0;
	padding: 6px 8px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--texto-2);
}

/* ---------------------------------------------------------------------
   Tarjeta del destino
   Computadora y tableta: sobre el mapa, abajo a la derecha (misma celda de
   la rejilla que el mapa, aunque en el HTML va después de la lista: así,
   con el teclado, después de la tarjeta sigue la página).
   --------------------------------------------------------------------- */
.cta-inicio-mapa__fichas {
	display: none;
}
.cta-inicio-mapa__ficha {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--borde);
	border-radius: 20px;
	background: var(--tarjeta);
	box-shadow: 0 18px 44px rgba(16, 24, 32, 0.22);
}
.cta-inicio-mapa__ficha[hidden] {
	display: none;
}
.cta-inicio-mapa__ficha:focus {
	outline: none;
}
.cta-inicio-mapa__ficha:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: 2px;
}
.cta-inicio-mapa__ficha-foto {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--fondo-hondo);
}
.cta-inicio-mapa__ficha-foto img,
.cta-inicio-mapa__ficha-foto .cta-imagen-vacia {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-inicio-mapa__cerrar {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-pildora);
	background: transparent;
	color: var(--titulo);
	cursor: pointer;
	isolation: isolate;
}
/* Círculo visible de 36 px dentro del área de toque de 44 */
.cta-inicio-mapa__cerrar::before {
	content: "";
	position: absolute;
	inset: 4px;
	z-index: -1;
	border-radius: var(--r-pildora);
	background: var(--tarjeta);
	box-shadow: 0 2px 8px rgba(16, 24, 32, 0.25);
}
.cta-inicio-mapa__cerrar .cta-icono {
	position: relative;
}
.cta-inicio-mapa__cerrar:hover {
	color: var(--acento-texto);
}
.cta-inicio-mapa__cerrar:focus-visible {
	outline: 2px solid var(--acento);
	outline-offset: -2px;
}
.cta-inicio-mapa__ficha-cuerpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}
.cta-inicio-mapa__ficha-titulo {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-size: 19px;
	font-weight: var(--peso-subtitulo);
	letter-spacing: var(--espaciado-subtitulo);
	line-height: 1.2;
	color: var(--titulo);
}
.cta-inicio-mapa__ficha-num {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 2px solid var(--acento);
	border-radius: var(--r-pildora);
	background: var(--acento-claro);
	box-shadow: 0 0 0 4px var(--acento-halo);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	color: var(--sobre-acento-claro);
}
.cta-inicio-mapa__ficha-tour {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--texto);
}
.cta-inicio-mapa__ficha-texto {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--texto-2);
}
.cta-inicio-mapa__ficha-boton {
	width: 100%;
	margin-top: 8px;
}

/* Celular: hoja que sube desde abajo (sobre el botón flotante de WhatsApp,
   debajo del encabezado). */
@media (max-width: 767px) {
	/* Decisión 117 (24-oct-2026, Arturo): en el celular no sale el panel
	   (conteo, «Animar», buscador, filtros y lista); se usa el mapa: tocar un
	   número abre la hoja. El panel sigue para el lector de pantalla (el mapa
	   es aria-hidden) y vuelve a verse si se llega a él con el teclado. */
	.cta-inicio-mapa__panel {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
	.cta-inicio-mapa__panel:has(:focus-visible) {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		padding: 20px 16px 22px;
		overflow: visible;
		clip: auto;
		clip-path: none;
		white-space: normal;
		border-top: 1px solid var(--borde);
	}
	.cta-inicio-mapa__fichas {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 95;
		display: block;
		pointer-events: none;
	}
	.cta-inicio-mapa__ficha {
		max-height: min(78vh, 560px);
		overflow-y: auto;
		border-width: 1px 0 0;
		border-radius: 22px 22px 0 0;
		box-shadow: 0 -12px 40px rgba(16, 24, 32, 0.28);
		pointer-events: auto;
		overscroll-behavior: contain;
		animation: cta-mapa-hoja 0.26s ease-out;
	}
	.cta-inicio-mapa__ficha-foto {
		flex: none;
		aspect-ratio: 5 / 2;
	}
	.cta-inicio-mapa__ficha-cuerpo {
		padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
	}
	/* «Animar» corriendo: en su lugar del panel la hoja taparía «Pausar»;
	   mientras corre, el botón va arriba a la izquierda de la hoja, sobre la
	   foto (como la ×). inicio.js pone el alto de la hoja en --cta-mapa-hoja.
	   El renglón conserva su alto para que la lista no brinque. */
	.cta-inicio-mapa__barra {
		min-height: 44px;
	}
	.cta-inicio-mapa__animar[data-animando] {
		position: fixed;
		left: 10px;
		bottom: calc(var(--cta-mapa-hoja, 0px) - 54px);
		z-index: 96;
		border-color: var(--tarjeta);
		box-shadow: 0 2px 8px rgba(16, 24, 32, 0.3);
	}
	/* Nombre de cada destino debajo de su número (decisión 117, 25-oct-2026,
	   dueño: «agrégale abajo del punto el nombre del destino, en letras
	   pequeñas»). Para que quepa:
	   - Más mapa: menos relleno alrededor del lienzo y, hasta 599 px, la
	     tarjeta de orilla a orilla (abajo). A 320 px el lienzo mide 308
	     (antes 254); a 390 mide 378 (antes 324).
	   - Los números de la sierra van apartados, con sus propias líneas guía
	     (cta_inicio_mapa_movil()). Cada nombre tiene su lado (--n-*: abajo,
	     abajo hacia un lado y, solo Cuauhtémoc, encima). */
	.cta-inicio-mapa__mapa {
		padding: 12px 6px 16px;
	}
	.cta-inicio-mapa__pin-item {
		left: var(--x-movil, var(--x));
		top: var(--y-movil, var(--y));
	}
	.cta-inicio-mapa__guia--escritorio,
	.cta-inicio-mapa__real--escritorio,
	.cta-inicio-mapa__pin-nombre {
		display: none;
	}
	.cta-inicio-mapa__guia--movil {
		display: inline;
	}
	.cta-inicio-mapa__real--movil {
		display: block;
	}
	/* El número no crece al resaltarlo ni al marcarlo: el nombre va dentro
	   del botón y crecería con él hasta tocar a sus vecinos. Lo marcado se
	   distingue por el relleno, la orilla, el halo y el pulso. */
	.cta-inicio-mapa__pin:hover,
	.cta-inicio-mapa__pin-item.es-resaltado .cta-inicio-mapa__pin,
	.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin {
		transform: translate(-50%, -50%);
	}
	/* Nombre: 10 px (11 en el mapa ancho), seminegrita, en el color de la
	   cifra del número (café oscuro: 10.05:1 sobre el estado; oscuro
	   13.2:1), con un halo
	   del relleno del estado que lo despega de la ruta, de las orillas y de
	   las líneas guía. */
	.cta-inicio-mapa__pin-rotulo {
		position: absolute;
		left: var(--n-x, 50%);
		top: var(--n-y, calc(100% + 2px));
		display: block;
		width: max-content;
		max-width: 80px;
		font-size: var(--mapa-rotulo-letra, 10px);
		font-weight: 600;
		line-height: 1.15;
		white-space: normal;
		text-align: var(--n-alinear, center);
		text-wrap: balance;
		color: var(--mapa-pin-cifra);
		text-shadow: 0 0 2px var(--mapa-relleno), 0 0 2px var(--mapa-relleno), 0 0 3px var(--mapa-relleno);
		transform: translate(var(--n-tx, -50%), var(--n-ty, 0%));
	}
	.cta-inicio-mapa__pin-renglon {
		display: block;
		white-space: nowrap;
	}
	/* Resaltado (con el teclado) y marcado: el nombre en el acento caramelo
	   (#74481a: 6.84:1 sobre el estado; oscuro #f0d3a2: 10.6:1). Con la
	   hoja abierta queda a la vista (inicio.js, verNumero). */
	.cta-inicio-mapa__pin-item.es-resaltado .cta-inicio-mapa__pin-rotulo,
	.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin-rotulo {
		color: var(--acento-texto);
	}
	/* Mapa ancho (celular de 492 a 767 px): letra de 11 px */
	@container cta-mapa (min-width: 480px) {
		.cta-inicio-mapa__lienzo {
			--mapa-rotulo-letra: 11px;
		}
	}
}
/* Celular hasta 599 px: la tarjeta del mapa de orilla a orilla (sin orillas
   a los lados ni esquinas redondas), para ganar los 2 × 20 px del margen de
   la página. Desde 600 px el mapa ya llega a su máximo de 560. */
@media (max-width: 599px) {
	.cta-inicio-mapa__explorador {
		margin-inline: calc(-1 * var(--margen));
		border-inline-width: 0;
		border-radius: 0;
	}
}
@keyframes cta-mapa-hoja {
	from {
		transform: translateY(40px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

/* Tableta y computadora: la tarjeta sobre el mapa */
@media (min-width: 768px) {
	.cta-inicio-mapa__texto {
		gap: 14px;
	}
	.cta-inicio-mapa__mapa {
		padding: 28px 28px 22px;
	}
	.cta-inicio-mapa__panel {
		padding: 24px 28px 28px;
	}
	/* La capa de las tarjetas cubre la celda del mapa; la tarjeta va junto
	   al número marcado, del lado donde no lo tapa (inicio.js, clase
	   es-anclada). Sin esa cuenta, abajo a la derecha. */
	.cta-inicio-mapa__fichas {
		grid-area: mapa;
		position: relative;
		z-index: 5;
		display: block;
		container: cta-fichas / inline-size;
		pointer-events: none;
	}
	.cta-inicio-mapa__ficha {
		position: absolute;
		right: 20px;
		bottom: 20px;
		width: min(320px, calc(100% - 40px));
		pointer-events: auto;
		animation: cta-mapa-ficha 0.22s ease-out;
	}
	.cta-inicio-mapa__ficha.es-anclada {
		right: auto;
		bottom: auto;
	}
	/* Computadora (la celda del mapa mide de 480 a 680 px): tarjeta más
	   compacta, para que quepa junto a cualquier número sin taparlo
	   (Ciudad de Chihuahua queda casi al centro del mapa). */
	@container cta-fichas (max-width: 680px) {
		.cta-inicio-mapa__ficha {
			width: min(268px, calc(100% - 32px));
		}
		.cta-inicio-mapa__ficha-foto {
			aspect-ratio: 2 / 1;
		}
		.cta-inicio-mapa__ficha-cuerpo {
			gap: 6px;
			padding: 14px 16px 16px;
		}
		.cta-inicio-mapa__ficha-titulo {
			gap: 10px;
			font-size: 17px;
		}
		.cta-inicio-mapa__ficha-num {
			width: 28px;
			height: 28px;
			font-size: 13px;
		}
		.cta-inicio-mapa__ficha-texto {
			font-size: 14px;
		}
	}
	.cta-inicio-mapa__lista {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 24px;
	}
	.cta-inicio-mapa__item + .cta-inicio-mapa__item {
		border-top: 0;
	}
	.cta-inicio-mapa__item {
		border-bottom: 1px solid var(--borde);
	}
}
@keyframes cta-mapa-ficha {
	from {
		transform: translateY(10px);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

/* Computadora: los dos paneles lado a lado */
@media (min-width: 1024px) {
	.cta-inicio-mapa__rejilla {
		gap: 40px;
	}
	.cta-inicio-mapa__explorador {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		grid-template-areas: "mapa panel";
	}
	.cta-inicio-mapa__mapa {
		padding: 28px 24px 22px 28px;
	}
	.cta-inicio-mapa__marco {
		max-width: none;
	}
	.cta-inicio-mapa__panel {
		padding: 28px 28px 24px;
		border-top: 0;
		border-left: 1px solid var(--borde);
	}
	.cta-inicio-mapa__lista {
		display: block;
	}
	.cta-inicio-mapa__item {
		border-bottom: 0;
	}
	.cta-inicio-mapa__item + .cta-inicio-mapa__item {
		border-top: 1px solid var(--borde);
	}
}
@media (min-width: 1280px) {
	.cta-inicio-mapa__texto {
		gap: 16px;
	}
	.cta-inicio-mapa .cta-titulo-seccion {
		font-size: 48px;
	}
	.cta-inicio-mapa__intro {
		font-size: var(--t-cuerpo);
	}
	.cta-inicio-mapa__fila-nombre {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cta-inicio-mapa__pin,
	.cta-inicio-mapa__pin-nombre,
	.cta-inicio-mapa__guia,
	.cta-inicio-mapa__fila,
	.cta-inicio-mapa__fila-num,
	.cta-inicio-mapa__fila-flecha {
		transition: none;
	}
	.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin::after {
		animation: none;
	}
	.cta-inicio-mapa__ficha {
		animation: none !important;
	}
	.cta-inicio-mapa__fila:hover .cta-inicio-mapa__fila-flecha {
		transform: 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-inicio-mapa {
		--mapa-pin: calc(24 * var(--u));
		--mapa-pin-letra: calc(12 * var(--u));
	}
	.cta-inicio-mapa__rejilla {
		gap: calc(28 * var(--u));
	}
	.cta-inicio-mapa__texto {
		gap: calc(12 * var(--u));
	}
	.cta-inicio-mapa__intro {
		max-width: calc(620 * var(--u));
		font-size: calc(16 * var(--u));
	}
	.cta-inicio-mapa__nota {
		gap: calc(8 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-inicio-mapa__mapa {
		gap: calc(14 * var(--u));
		padding: calc(16 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u));
	}
	.cta-inicio-mapa__marco {
		max-width: calc(560 * var(--u));
	}
	.cta-inicio-mapa__vecino {
		font-size: calc(12 * var(--u));
	}
	.cta-inicio-mapa__ref-punto {
		width: calc(7 * var(--u));
		height: calc(7 * var(--u));
	}
	.cta-inicio-mapa__ref-nombre {
		left: var(--r-x, calc(7 * var(--u)));
		top: var(--r-y, 0px);
		font-size: calc(12 * var(--u));
	}
	.cta-inicio-mapa__ref::after {
		left: -0.5px;
		top: calc(5 * var(--u));
		width: 1px;
		height: var(--r-guia, 0px);
	}
	.cta-inicio-mapa__real {
		left: var(--x);
		top: var(--y);
		width: calc(7 * var(--u));
		height: calc(7 * var(--u));
	}
	.cta-inicio-mapa__pines {
		inset: 0;
		padding: 0;
	}
	.cta-inicio-mapa__pin-item {
		left: var(--x);
		top: var(--y);
		width: 0;
		height: 0;
	}
	.cta-inicio-mapa__pin {
		left: 0;
		top: 0;
		width: var(--mapa-pin);
		height: var(--mapa-pin);
		padding: 0;
		font-size: var(--mapa-pin-letra);
	}
	.cta-inicio-mapa__pin::before {
		inset: calc(-6 * var(--u));
	}
	.cta-inicio-mapa__pin-nombre {
		left: calc(100% + calc(8 * var(--u)));
		top: 50%;
		padding: calc(5 * var(--u)) calc(9 * var(--u));
		font-size: calc(12 * var(--u));
	}
	.cta-inicio-mapa__pin-item--izq .cta-inicio-mapa__pin-nombre {
		left: auto;
		right: calc(100% + calc(8 * var(--u)));
	}
	.cta-inicio-mapa__pin-item.es-activo .cta-inicio-mapa__pin::after {
		inset: -2px;
	}
	.cta-inicio-mapa__leyenda {
		gap: calc(8 * var(--u)) calc(18 * var(--u));
		padding: 0;
		font-size: calc(12 * var(--u));
	}
	.cta-inicio-mapa__leyenda li {
		gap: calc(8 * var(--u));
	}
	.cta-inicio-mapa__leyenda-num {
		width: calc(18 * var(--u));
		height: calc(18 * var(--u));
		font-size: calc(10 * var(--u));
	}
	.cta-inicio-mapa__leyenda-punto {
		width: calc(9 * var(--u));
		height: calc(9 * var(--u));
	}
	.cta-inicio-mapa__leyenda-ruta {
		width: calc(22 * var(--u));
		height: 0;
	}
	.cta-inicio-mapa__credito {
		font-size: calc(12 * var(--u));
	}
	@container cta-mapa (max-width: 19.4118em) {
		.cta-inicio-mapa__lienzo {
			--mapa-pin: calc(22 * var(--u));
		}
		.cta-inicio-mapa__vecino {
			left: var(--x-min, var(--x));
			top: var(--y-min, var(--y));
		}
		.cta-inicio-mapa__ref-nombre {
			left: var(--r-x-min, var(--r-x, calc(7 * var(--u))));
			top: var(--r-y-min, var(--r-y, 0px));
		}
		.cta-inicio-mapa__ref::after {
			height: var(--r-guia-min, 0px);
		}
	}
	@container cta-mapa (min-width: 28.2353em) {
		.cta-inicio-mapa__lienzo {
			--mapa-pin: calc(28 * var(--u));
			--mapa-pin-letra: calc(13 * var(--u));
		}
		.cta-inicio-mapa__vecino {
			left: var(--x-ancho, var(--x));
			top: var(--y-ancho, var(--y));
		}
		.cta-inicio-mapa__vecino--estados-unidos {
			width: auto;
		}
		.cta-inicio-mapa__ref-nombre {
			left: var(--r-x-ancho, var(--r-x, calc(7 * var(--u))));
			top: var(--r-y-ancho, var(--r-y, 0px));
		}
		.cta-inicio-mapa__ref::after {
			height: var(--r-guia-ancho, 0px);
		}
	}
	.cta-inicio-mapa__panel {
		gap: calc(16 * var(--u));
		padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u));
	}
	.cta-inicio-mapa__controles {
		gap: calc(14 * var(--u));
	}
	.cta-inicio-mapa__barra {
		gap: calc(12 * var(--u));
	}
	.cta-inicio-mapa__conteo {
		font-size: calc(14 * var(--u));
	}
	.cta-inicio-mapa__animar {
		gap: calc(8 * var(--u));
		min-height: calc(44 * var(--u));
		padding: 0 calc(18 * var(--u)) 0 calc(15 * var(--u));
		font-size: calc(14 * var(--u));
	}
	.cta-inicio-mapa__buscador-icono {
		left: calc(16 * var(--u));
		top: 50%;
	}
	.cta-inicio-mapa__buscar {
		width: 100%;
		min-height: calc(48 * var(--u));
		padding: 0 calc(18 * var(--u)) 0 calc(46 * var(--u));
		font-size: calc(16 * var(--u));
	}
	.cta-inicio-mapa__filtros {
		gap: calc(8 * var(--u));
	}
	.cta-inicio-mapa__filtros .cta-chip-filtro {
		height: calc(44 * var(--u));
		padding: 0 calc(18 * var(--u));
	}
	.cta-inicio-mapa__lista {
		padding: 0;
	}
	.cta-inicio-mapa__fila {
		gap: calc(14 * var(--u));
		width: 100%;
		min-height: calc(50 * var(--u));
		padding: calc(6 * var(--u)) calc(8 * var(--u));
		border-radius: calc(14 * var(--u));
	}
	.cta-inicio-mapa__fila-num {
		width: calc(32 * var(--u));
		height: calc(32 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(13 * var(--u));
	}
	.cta-inicio-mapa__fila-nombre {
		font-size: calc(15 * var(--u));
	}
	.cta-inicio-mapa__vacio {
		padding: calc(6 * var(--u)) calc(8 * var(--u));
		font-size: calc(15 * var(--u));
	}
	.cta-inicio-mapa__ficha {
		border-radius: calc(20 * var(--u));
	}
	.cta-inicio-mapa__ficha-foto img,
	.cta-inicio-mapa__ficha-foto .cta-imagen-vacia {
		width: 100%;
		height: 100%;
	}
	.cta-inicio-mapa__cerrar {
		top: calc(6 * var(--u));
		right: calc(6 * var(--u));
		width: calc(44 * var(--u));
		height: calc(44 * var(--u));
		padding: 0;
		border-radius: var(--r-pildora);
	}
	.cta-inicio-mapa__cerrar::before {
		inset: calc(4 * var(--u));
		border-radius: var(--r-pildora);
	}
	.cta-inicio-mapa__ficha-cuerpo {
		gap: calc(8 * var(--u));
		padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
	}
	.cta-inicio-mapa__ficha-titulo {
		gap: calc(12 * var(--u));
		font-size: calc(19 * var(--u));
	}
	.cta-inicio-mapa__ficha-num {
		width: calc(32 * var(--u));
		height: calc(32 * var(--u));
		border-radius: var(--r-pildora);
		font-size: calc(14 * var(--u));
	}
	.cta-inicio-mapa__ficha-tour {
		font-size: calc(13 * var(--u));
	}
	.cta-inicio-mapa__ficha-texto {
		font-size: calc(15 * var(--u));
	}
	.cta-inicio-mapa__ficha-boton {
		width: 100%;
		margin-top: calc(8 * var(--u));
	}
	.cta-inicio-mapa__texto {
		gap: calc(14 * var(--u));
	}
	.cta-inicio-mapa__mapa {
		padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(22 * var(--u));
	}
	.cta-inicio-mapa__panel {
		padding: calc(24 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u));
	}
	.cta-inicio-mapa__ficha {
		right: calc(20 * var(--u));
		bottom: calc(20 * var(--u));
		width: min(calc(320 * var(--u)), calc(100% - calc(40 * var(--u))));
	}
	.cta-inicio-mapa__ficha.es-anclada {
		right: auto;
		bottom: auto;
	}
	@container cta-fichas (max-width: 40em) {
		.cta-inicio-mapa__ficha {
			width: min(calc(268 * var(--u)), calc(100% - calc(32 * var(--u))));
		}
		.cta-inicio-mapa__ficha-cuerpo {
			gap: calc(6 * var(--u));
			padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
		}
		.cta-inicio-mapa__ficha-titulo {
			gap: calc(10 * var(--u));
			font-size: calc(17 * var(--u));
		}
		.cta-inicio-mapa__ficha-num {
			width: calc(28 * var(--u));
			height: calc(28 * var(--u));
			font-size: calc(13 * var(--u));
		}
		.cta-inicio-mapa__ficha-texto {
			font-size: calc(14 * var(--u));
		}
	}
	.cta-inicio-mapa__lista {
		column-gap: calc(24 * var(--u));
	}
	.cta-inicio-mapa__rejilla {
		gap: calc(40 * var(--u));
	}
	.cta-inicio-mapa__mapa {
		padding: calc(28 * var(--u)) calc(24 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
	}
	.cta-inicio-mapa__marco {
		max-width: none;
	}
	.cta-inicio-mapa__panel {
		padding: calc(28 * var(--u)) calc(28 * var(--u)) calc(24 * var(--u));
	}
	.cta-inicio-mapa__texto {
		gap: calc(16 * var(--u));
	}
	.cta-inicio-mapa .cta-titulo-seccion {
		font-size: calc(48 * var(--u));
	}
	.cta-inicio-mapa__intro {
		font-size: var(--t-cuerpo);
	}
	.cta-inicio-mapa__fila-nombre {
		font-size: calc(16 * var(--u));
	}
}
/* </pantallas-grandes> */

/* Pantallas grandes: ajustes a mano (decisión 106, 19-oct-2026). El mapa
   (640 × 780) no pasa de 600 px × --u de ancho y va centrado en su celda:
   así no crece más alto que la pantalla ni deja media lista vacía junto a
   él (a 1440 px mide 576, como antes). Ver ARQUITECTURA.md §3. */
@media (min-width: 1440px) {
	.cta-inicio-mapa__marco {
		max-width: calc(600 * var(--u));
	}
}