.ctxb-mapa {
	--ctxb-mapa-relleno: #111111;
	--ctxb-mapa-activo: #FFD400;
	--ctxb-mapa-atenuacion: .2;
	--ctxb-mapa-sin: .3;
	--ctxb-mapa-texto: 40%;

	display: grid;
	grid-template-columns: var(--ctxb-mapa-texto) 1fr;
	gap: 48px;
	align-items: start;
}

/* ---------- Columna de texto ---------- */

.ctxb-mapa__antetitulo {
	margin: 0 0 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: #8A8A8A;
}

.ctxb-mapa__titulo {
	margin: 0 0 24px;
	font-size: 62px;
	line-height: .92;
	letter-spacing: -.02em;
	text-transform: uppercase;
}

.ctxb-mapa__parrafo {
	margin: 0 0 26px;
	font-size: 16px;
	line-height: 1.6;
	color: #5A5A5A;
	max-width: 46ch;
}

.ctxb-mapa__pista {
	margin: 0 0 26px;
	padding: 4px 0 4px 18px;
	border-left: 3px solid var(--ctxb-mapa-activo);
	font-size: 14px;
	line-height: 1.5;
	color: #5A5A5A;
}

.ctxb-mapa__lista {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
}

.ctxb-mapa__lista a,
.ctxb-mapa__lista span {
	display: inline-block;
	padding: 5px 11px;
	border: 1px solid #E4E4E4;
	font-size: 13px;
	text-decoration: none;
	color: #111111;
	transition: background-color .15s ease, border-color .15s ease;
}

.ctxb-mapa__lista span { color: #8A8A8A; }

.ctxb-mapa__lista a:hover,
.ctxb-mapa__lista a:focus-visible,
.ctxb-mapa__lista a.esta-activa {
	background: var(--ctxb-mapa-activo);
	border-color: var(--ctxb-mapa-activo);
}

.ctxb-mapa__nota {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #8A8A8A;
}

/* ---------- Mapa ---------- */

.ctxb-mapa__lienzo {
	position: relative;
	background: #F4F4F4;
	border: 1px solid #E4E4E4;
	padding: 28px;
}

.ctxb-mapa__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* El color viene del kit, no del archivo original: por eso pisamos el fill. */
.ctxb-mapa__loc path {
	fill: var(--ctxb-mapa-relleno);
	transition: fill .18s ease, opacity .18s ease;
}

.ctxb-mapa__loc { cursor: pointer; }

.ctxb-mapa__loc--sin {
	cursor: default;
	opacity: var(--ctxb-mapa-sin);
}

/* Al señalar una, las demás bajan y la señalada se pinta de acento. */
.ctxb-mapa[data-activa] .ctxb-mapa__loc { opacity: var(--ctxb-mapa-atenuacion); }
.ctxb-mapa[data-activa] .ctxb-mapa__loc.esta-activa { opacity: 1; }
.ctxb-mapa__loc.esta-activa path { fill: var(--ctxb-mapa-activo); }

/* ---------- Aviso ---------- */

.ctxb-mapa__aviso {
	position: absolute;
	z-index: 5;
	min-width: 190px;
	max-width: 250px;
	background: #111111;
	color: #fff;
	padding: 14px 16px;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 14px));
	box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.ctxb-mapa__aviso[hidden] { display: none; }

.ctxb-mapa__aviso-nombre {
	display: block;
	font-size: 15px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .01em;
	margin-bottom: 8px;
}

.ctxb-mapa__aviso-datos {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #D6D6D6;
}

.ctxb-mapa__aviso-cue {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ctxb-mapa-activo);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
	.ctxb-mapa {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.ctxb-mapa__titulo { font-size: 44px; }
}

@media (max-width: 767px) {
	.ctxb-mapa__lienzo { padding: 16px; }
	.ctxb-mapa__aviso { max-width: 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.ctxb-mapa__loc path,
	.ctxb-mapa__lista a { transition: none; }
}