/* ==========================================================================
   T1 · Hub de zonas (bloque C2) · /precio-vivienda-madrid/
   Fuente: Figma jJVoIe4aGd0lMV9WF71NTC, página 12 (1440 116:3, 375 116:79); nota diseno/PIEZA-6-T1.md.
   Se carga solo en el hub, después de zona.css (N3, N4, N6, N8 corto) y de main.css (.zona, .zonas).
   Mismo corte que el resto del tema: 60em.
   ========================================================================== */

/* --- Encabezado + índice «En esta página» + introducción: una sola banda lino --- */
.encabezado-interior--hub { padding-bottom: 0; }
.encabezado-interior--hub .n2__h1 { text-wrap: balance; }
.hub-intro { padding-block: var(--space-32) var(--seccion-y); }
.hub-intro__caja { display: flex; flex-direction: column; gap: var(--space-32); }
.hub-indice { display: flex; flex-direction: column; gap: var(--space-8); }
.hub-indice__lista { display: flex; flex-wrap: wrap; column-gap: var(--space-24); row-gap: 0; }
.hub-indice__enlace {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--c-texto-fuerte);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.hub-intro__texto { display: flex; flex-direction: column; gap: var(--space-16); max-width: 640px; font-size: var(--t-cuerpo); line-height: 1.6; }
.hub-intro__texto a { color: var(--c-texto-fuerte); text-underline-offset: 3px; }
@media (min-width: 60em) {
	.hub-intro { padding-top: var(--space-48); }
	.hub-intro__caja { gap: var(--space-48); }
}

/* Anclas: que el h2 no quede bajo la cabecera fija al saltar desde el índice. */
.hub-grupo,
.hub-comparativa,
.hub-faq,
#direccion-cierre { scroll-margin-top: var(--space-96); }

main .h2 { text-wrap: balance; }

/* --- Grupos de zonas --- */
.hub-grupo__cuerpo { display: flex; flex-direction: column; gap: var(--space-24); min-width: 0; }
.hub-grupo__texto { max-width: 640px; font-size: var(--t-cuerpo); line-height: 1.6; }

/* Móvil: filas de la lista (main.css). Sin flecha cuando la zona aún no está publicada. */
.hub-zona--sin-enlace { padding-right: 0; }
.zona__texto { color: var(--c-texto-fuerte); }
.hub-zona__pie { display: none; }
.hub-zona--sin-enlace .hub-zona__pie { display: block; grid-area: precio; font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }

@media (min-width: 60em) {
	/* 3 columnas sin foto; la 10.ª tarjeta queda sola en la 4.ª fila (decisión 12 del 25-10). */
	.hub-zonas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hub-zonas .zona { min-height: 0; }
	/* Alto mínimo solo donde conviven tarjetas con y sin cifra (P6-02). */
	.hub-grupo#noroeste-y-norte .hub-zonas .zona { min-height: 156px; }
	.hub-zona__pie,
	.hub-zona--sin-enlace .hub-zona__pie { display: block; font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-fuerte); }
	.hub-zona--sin-enlace .hub-zona__pie { color: var(--c-texto-suave); }
	.hub-zona--sin-enlace:hover { border-color: var(--c-borde-suave); }
}

/* --- Comparativa: tabla en escritorio, lista <dl> en móvil --- */
.hub-tabla { display: none; }
.hub-lista { display: flex; flex-direction: column; gap: var(--space-12); }
.hub-lista__leyenda { max-width: 65ch; font-size: 0.875rem; line-height: 1.5; color: var(--c-texto-suave); }
.hub-lista__filas { border-top: 1px solid var(--c-borde-suave); }
.hub-lista__fila {
	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);
}
.hub-lista__zona { grid-column: 1; grid-row: 1; font-weight: 600; line-height: 1.5; }
.hub-lista__zona a { display: inline-block; min-height: 44px; padding-block: 10px; color: var(--c-texto-fuerte); text-underline-offset: 3px; }
.hub-lista__zona--texto { padding-block: 10px; }
.hub-lista__cifra { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-datos); font-weight: 500; white-space: nowrap; }
.hub-lista__variacion { grid-column: 1; grid-row: 2; padding-bottom: var(--space-8); font-size: 0.875rem; color: var(--c-texto-suave); }
.hub-lista__sin-dato { grid-column: 2; grid-row: 1; font-size: 0.875rem; color: var(--c-texto-suave); text-align: right; }

@media (min-width: 60em) {
	.hub-lista { display: none; }
	.hub-tabla { display: table; width: 100%; max-width: 800px; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
	.hub-tabla caption { max-width: 65ch; padding-bottom: var(--space-12); text-align: left; font-size: 0.875rem; color: var(--c-texto-suave); }
	.hub-tabla thead th {
		padding: var(--space-12);
		border-bottom: 1px solid var(--c-borde-control);
		font-size: 0.875rem;
		font-weight: 600;
		text-align: left;
	}
	.hub-tabla .hub-tabla__num { text-align: right; }
	.hub-tabla tbody th,
	.hub-tabla tbody td { height: 50px; padding: 0 var(--space-12); border-bottom: 1px solid var(--c-borde-suave); font-weight: 400; text-align: left; }
	.hub-tabla tbody td.hub-tabla__num { text-align: right; }
	.hub-tabla__zona a { display: inline-block; padding-block: var(--space-12); font-weight: 600; color: var(--c-texto-fuerte); text-underline-offset: 3px; }
	.hub-tabla__cifra { font-family: var(--font-datos); font-weight: 500; white-space: nowrap; }
	.hub-tabla__variacion { font-size: 0.875rem; white-space: nowrap; }
	.hub-tabla__sin-dato { font-size: 0.875rem; color: var(--c-texto-suave); }
}

/* --- Lectura del mercado --- */
.hub-lectura__texto { display: flex; flex-direction: column; gap: var(--space-16); max-width: 640px; }

/* --- FAQ: lino, como en Figma --- */
.hub-faq { background: var(--c-fondo-pagina); }