/* ==========================================================================
   T2 · Zona (bloque C1) · /valoracion-vivienda/[zona]/
   Fuente: Figma jJVoIe4aGd0lMV9WF71NTC, página 10 (N3-N7, N17) y 11 (T2: Las Rozas 100:3 / 103:517,
   Moncloa-Aravaca sin dato 104:985 / 104:1507). Mismo corte (60em) y escala fluida que main.css.
   Solo se carga en las páginas de zona. Reglas genéricas con :where() (especificidad 0).
   ========================================================================== */

:root {
	--t-h1-zona: clamp(2.25rem, 1.722rem + 2.254vw, 3.75rem); /* 36 → 60 (pieza 5, decisión 2) */
	--t-cifra: clamp(2.25rem, 1.986rem + 1.127vw, 3rem);     /* 36 → 48 */
}

.sin-corte { white-space: nowrap; }
.h2,
.hero__titulo { text-wrap: balance; }

/* --- Hero de zona: patrón del hero de la home con N1 encima --- */
.hero--zona { padding-top: var(--space-24); }
.hero--zona .hero__migas { margin-bottom: var(--space-32); }
.hero__titulo--zona { font-size: var(--t-h1-zona); line-height: 1.1; }
@media (min-width: 60em) {
	.hero--zona { padding-top: var(--space-24); }
	.hero--zona .hero__migas { margin-bottom: var(--space-48); }
	.hero__titulo--zona { line-height: 1.1; letter-spacing: -0.01em; }
}

/* --- Pila de cada banda: encabezado + bloques --- */
:where(.zona__pila) { display: flex; flex-direction: column; gap: var(--space-32); }
@media (min-width: 60em) {
	:where(.zona__pila) { gap: var(--space-48); }
}

/* --- Tarjeta base (N3, N6, N8 corto): superficie, borde suave, radio 8 --- */
.n3,
.n6,
.n8c {
	padding: var(--space-24);
	border: 1px solid var(--c-borde-suave);
	border-radius: var(--radius);
	background: var(--c-fondo-superficie);
	min-width: 0;
}
@media (min-width: 60em) {
	.n3, .n6, .n8c { padding: var(--space-32); }
}

/* --- N4 · Fuente y fecha --- */
.n4 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-8) var(--space-12);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--c-texto-suave);
}
.n4__acciones { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); }
.etiqueta-ejemplo {
	display: inline-block;
	padding: 2px var(--space-8);
	border: 1px solid var(--c-cobre-300);
	border-radius: 6px;
	background: var(--c-cobre-100);
	color: var(--c-marca-principal);
	font-family: var(--font-datos);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.n4__enlace {
	display: inline-flex;
	align-items: center;
	gap: var(--space-4);
	min-height: 44px;
	color: var(--c-texto-fuerte);
	font-weight: 600;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* --- N3 · Cifra de zona --- */
.n3 { display: flex; flex-direction: column; gap: var(--space-24); }
.n3__fila { display: flex; flex-direction: column; gap: var(--space-24); }
.n3__cifra { display: flex; flex-direction: column; gap: var(--space-8); }
.n3__valor {
	font-family: var(--font-datos);
	font-weight: 500;
	font-size: var(--t-cifra);
	line-height: 1.15;
	white-space: nowrap;
}
.n3__variacion { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-fuerte); }
.n3__titulo {
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.25rem;
	line-height: 1.3;
}
.n3__texto { display: flex; flex-direction: column; gap: var(--space-16); max-width: 65ch; }
.n3__referencia {
	padding-top: var(--space-16);
	border-top: 1px solid var(--c-borde-suave);
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--c-texto-suave);
}
.n3__referencia-cifra {
	margin-inline: 0.25em;
	font-family: var(--font-datos);
	font-weight: 500;
	font-size: 1.0625rem;
	color: var(--c-texto-fuerte);
	white-space: nowrap;
}
.n3__ejemplo { white-space: nowrap; }
@media (min-width: 60em) {
	.n3__fila { flex-direction: row; gap: var(--space-48); }
	.n3__cifra { flex: 0 0 400px; }
	.n3__texto { flex: 0 1 600px; }
	.n3__titulo { font-size: 1.5rem; }
}

/* --- N5 · Indicadores --- */
.n5 { display: flex; flex-direction: column; gap: var(--space-24); }
.n5__titulo {
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.25rem;
	line-height: 1.3;
}
.n5__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-16); align-items: stretch; }
.n5__tarjeta {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-24);
	border: 1px solid var(--c-borde-suave);
	border-radius: var(--radius);
	background: var(--c-fondo-superficie);
}
.n5__valor { font-family: var(--font-datos); font-weight: 500; font-size: 2.25rem; line-height: 1.15; white-space: nowrap; }
.n5__pie { display: flex; align-items: center; gap: var(--space-8); font-size: 0.875rem; line-height: 1.5; }
.n5__flecha { width: 16px; height: 16px; }
.n5__tarjeta--sube .n5__flecha { transform: rotate(-90deg); }
.n5__tarjeta--baja .n5__flecha { transform: rotate(90deg); }
@media (min-width: 60em) {
	.n5 { gap: var(--space-24); }
	.n5__titulo { font-size: 1.5rem; }
	.n5__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
}

/* --- Vivir en la zona --- */
.zona-vivir__texto { max-width: 65ch; }
.zona-vivir__fuentes { max-width: 65ch; }
.zona-vivir__fuentes a { color: var(--c-texto-fuerte); }

/* --- N6 · Evolución --- */
.n6 { display: flex; flex-direction: column; gap: var(--space-24); }
.n6__leyenda { display: flex; flex-direction: column; gap: var(--space-4); }
.n6__titulo {
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.25rem;
	line-height: 1.3;
}
.n6__subtitulo { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.n6__svg { width: 100%; height: auto; overflow: visible; }
.n6__svg--escritorio { display: none; }
.n6__rejilla { stroke: var(--c-borde-suave); stroke-width: 1; }
.n6__base,
.n6__marca { stroke: var(--c-borde-control); stroke-width: 1; }
.n6__eje-y,
.n6__eje-x { fill: var(--c-texto-suave); font-family: var(--font-cuerpo); font-size: 12px; }
.n6__area { fill: var(--c-cobre-100); }
.n6__linea { fill: none; stroke: var(--c-marca-principal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.n6__punto { fill: var(--c-marca-principal); }
.n6__pastilla { fill: var(--c-fondo-superficie); }
.n6__ultimo { fill: var(--c-texto-fuerte); font-family: var(--font-datos); font-weight: 500; font-size: 13px; }
@media (min-width: 60em) {
	.n6__titulo { font-size: 1.5rem; }
	.n6__svg--escritorio { display: block; }
	.n6__svg--movil { display: none; }
	.n6__eje-y,
	.n6__eje-x { font-size: 13px; }
	.n6__ultimo { font-size: 15px; }
}
.n6__resumen {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-height: 44px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	list-style: none;
}
.n6__resumen::-webkit-details-marker { display: none; }
.n6__resumen::marker { content: ""; }
.n6__tabla[open] .n6__chevron { transform: rotate(180deg); }
.n6__tabla table { width: 100%; max-width: 480px; margin-top: var(--space-12); border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.n6__tabla caption { padding-bottom: var(--space-8); text-align: left; font-size: 0.875rem; color: var(--c-texto-suave); }
.n6__tabla th,
.n6__tabla td { padding: var(--space-8) var(--space-12); border-bottom: 1px solid var(--c-borde-suave); text-align: left; font-weight: 400; }
.n6__tabla thead th { border-bottom-color: var(--c-borde-control); font-weight: 600; }
.n6__tabla td { text-align: right; font-family: var(--font-datos); white-space: nowrap; }
.n6__vacio {
	display: flex;
	gap: var(--space-12);
	padding: var(--space-16);
	border-radius: var(--radius);
	background: var(--c-fondo-pagina);
	font-size: 1rem;
	line-height: 1.6;
}
.n6__vacio .icono { margin-top: 3px; }
.n6__vacio-titulo { font-weight: 600; }

/* --- Barrios y zonas cercanas: N7 + N17 --- */
.zona-barrios__columnas { display: flex; flex-direction: column; gap: var(--space-32); }
.zona-barrios__datos { display: flex; flex-direction: column; gap: var(--space-48); min-width: 0; }
@media (min-width: 60em) {
	.zona-barrios__columnas { flex-direction: row; align-items: flex-start; gap: var(--space-24); }
	.zona-barrios__datos { flex: 1 1 688px; }
	.n17 { flex: 0 0 488px; }
}

.n7 { display: flex; flex-direction: column; gap: var(--space-12); }
.n7__tabla { width: 100%; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
.n7__tabla caption { padding-bottom: var(--space-12); text-align: left; font-size: 0.875rem; color: var(--c-texto-suave); }
.n7__tabla thead th {
	padding: var(--space-12);
	background: var(--c-fondo-superficie);
	border-bottom: 1px solid var(--c-borde-control);
	font-size: 0.875rem;
	font-weight: 600;
	text-align: left;
}
.n7__tabla .n7__num { text-align: right; }
.n7__tabla tbody th,
.n7__tabla tbody td { padding: 0 var(--space-12); height: 50px; border-bottom: 1px solid var(--c-borde-suave); font-weight: 400; }
.n7__zona a { display: inline-block; padding-block: var(--space-12); font-weight: 600; text-underline-offset: 3px; }
.n7__sin-pagina { font-weight: 600; } /* zona vecina sin página pública: nombre en texto (C1-03) */
.n7__cifra { font-family: var(--font-datos); font-weight: 500; white-space: nowrap; }
.n7__variacion { font-size: 0.875rem; color: var(--c-texto-suave); white-space: nowrap; }
.n7__sin-dato { font-size: 0.875rem; color: var(--c-texto-suave); }
.n7__corto { display: none; }

/* Móvil: la misma tabla como lista (sin scroll lateral). Nombre y variación a la izquierda, cifra a la derecha. */
@media (max-width: 59.99em) {
	.n7__tabla,
	.n7__tabla tbody { display: block; width: 100%; }
	.n7__tabla caption { display: block; }
	.n7__tabla thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
	.n7__tabla tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: var(--space-12);
		padding-block: var(--space-4);
		border-bottom: 1px solid var(--c-borde-suave);
	}
	.n7__tabla tbody th,
	.n7__tabla tbody td { display: block; height: auto; padding: 0; border: 0; }
	.n7__tabla .n7__zona { grid-column: 1; grid-row: 1; text-align: left; }
	.n7__tabla .n7__zona > * { display: inline-flex; align-items: center; min-height: 44px; padding-block: var(--space-8); } /* objetivo táctil 44 px (C1-04); misma altura con y sin enlace */
	.n7__tabla .n7__cifra { grid-column: 2; grid-row: 1 / span 2; }
	.n7__tabla .n7__variacion { grid-column: 1; grid-row: 2; text-align: left; padding-bottom: var(--space-8); }
	.n7__tabla .n7__variacion::after { content: " en 12 meses"; }
	.n7__tabla .n7__sin-dato { grid-column: 2; grid-row: 1; }
	.n7__largo { display: none; }
	.n7__corto { display: inline; }
}

.n7-barrios { display: flex; flex-direction: column; gap: var(--space-16); }
.n7-barrios__titulo {
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.25rem;
	line-height: 1.3;
}
.n7-barrios__texto { max-width: 65ch; }
.n7-barrios__lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-12) var(--space-16);
	padding-block: var(--space-16);
	border-top: 1px solid var(--c-borde-control);
	border-bottom: 1px solid var(--c-borde-control);
}
.n7-barrios__lista li { position: relative; padding-left: var(--space-16); }
.n7-barrios__lista li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-marca-principal);
}

/* N17 · Mapa: cuadrícula de plano en CSS; contorno oficial en línea (el CSS manda el trazo). */
.n17 { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; }
.n17__lienzo {
	position: relative;
	aspect-ratio: 488 / 400;
	overflow: hidden;
	border: 1px solid var(--c-borde-suave);
	border-radius: var(--radius);
	background-color: var(--c-fondo-superficie);
	background-image:
		linear-gradient(var(--c-borde-suave) 1px, transparent 1px),
		linear-gradient(90deg, var(--c-borde-suave) 1px, transparent 1px);
	background-size: 24px 24px;
}
.n17__contorno,
.n17__imagen {
	position: absolute;
	inset: 12%;
	width: 76%;
	height: 76%;
	object-fit: contain;
}
.n17__contorno path { fill: var(--c-cobre-100); stroke: var(--c-marca-principal); stroke-width: 2; stroke-linejoin: round; }
.n17__rotulo {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	text-align: center;
	pointer-events: none;
}
.n17__region {
	font-family: var(--font-datos);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-texto-suave);
}
.n17__nombre {
	padding: 0 var(--space-8);
	border-radius: 4px;
	background: color-mix(in srgb, var(--c-cobre-100) 85%, transparent);
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--c-texto-fuerte);
}
.n17__norte {
	position: absolute;
	top: var(--space-12);
	right: var(--space-16);
	font-family: var(--font-datos);
	font-size: 0.75rem;
	line-height: 1.2;
	text-align: center;
}
.n17__sello {
	position: absolute;
	left: var(--space-12);
	bottom: var(--space-12);
	padding: 2px var(--space-8);
	border: 1px solid var(--c-marca-principal);
	border-radius: 6px;
	background: var(--c-fondo-superficie);
	color: var(--c-marca-principal);
	font-family: var(--font-datos);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.n17__pie { display: flex; flex-direction: column; gap: var(--space-8); font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.n17__atribucion { font-size: 0.8125rem; }
.n17__atribucion a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--c-texto-fuerte); } /* táctil ≥ 44 px sin mover el texto (C1-05) */

/* Apartados con h2 propio (Aravaca, Valdebebas, Las Tablas) */
.zona-apartado {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	padding-top: var(--space-32);
	border-top: 1px solid var(--c-borde-suave);
}
.zona-apartado__texto { max-width: 65ch; }
@media (min-width: 60em) {
	.zona-apartado { padding-top: var(--space-48); }
}

/* --- N8 corto --- */
.n8c {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	gap: var(--space-16);
	align-items: start;
}
.n8c__media { display: contents; }
.n8c__retrato { grid-column: 1; grid-row: 1; width: 112px; height: 150px; object-fit: cover; border-radius: var(--radius); }
.n8c .n11--pie { grid-column: 1 / -1; grid-row: 2; }
.n8c__texto { display: contents; }
.n8c__nombre-papel { grid-column: 2; grid-row: 1; align-self: center; display: flex; flex-direction: column; gap: var(--space-4); }
.n8c__nombre {
	font-family: var(--font-titulares);
	font-weight: 600;
	font-variation-settings: var(--fraunces-ejes);
	font-size: 1.25rem;
	line-height: 1.3;
}
.n8c__papel { font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.n8c__promesa { grid-column: 1 / -1; font-size: var(--t-cuerpo); line-height: 1.6; max-width: 60ch; }
.n8c__despues { grid-column: 1 / -1; font-size: var(--t-cuerpo); line-height: 1.6; color: var(--c-texto-suave); max-width: 60ch; }
@media (min-width: 60em) {
	.n8c { grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-32); row-gap: var(--space-12); }
	.n8c__media { display: flex; flex-direction: column; gap: var(--space-12); grid-column: 1; grid-row: 1 / span 3; }
	.n8c .n11--pie { max-width: 112px; }
	.n8c__texto { display: flex; flex-direction: column; gap: var(--space-16); grid-column: 2; grid-row: 1 / span 3; }
	.n8c__nombre-papel { align-self: auto; }
}

/* --- FAQ local: mismo patrón que la home --- */
.zona-faq { background: var(--c-fondo-pagina); }
.n7__tabla tbody th { text-align: left; }

/* Foto de la zona junto al texto de «Vivir en…»: debajo en móvil, a la derecha en escritorio. */
.zona-vivir__columnas { display: flex; flex-direction: column; gap: var(--space-32); min-width: 0; }
.zona-vivir__foto { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 60em) {
	.zona-vivir__columnas { flex-direction: row; align-items: flex-start; gap: var(--space-64); }
	.zona-vivir__columnas .zona-vivir__texto { flex: 1 1 0; }
	.zona-vivir__foto { flex: 0 0 480px; width: 480px; }
}