/* ═══════════════════════════════════════════════════════════════════════
   SALIR EN COCHE · la página de los accesos (infraestructura.html)
   Hereda todo de estilos.css: los mismos papeles de color, la misma
   tipografía. Parla en azul, la ciudad elegida en tinta gris, como en el dinero.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Vuelta al recuento ───────────────────────────────────────────────── */

.volver { border-bottom: 1px solid var(--line); }
.volver a {
  display: inline-flex; align-items: center; gap: .55rem;
  padding-block: .85rem;
  color: var(--ink-3);
  font-size: .8125rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}
.volver a:hover { color: var(--ink); }
.volver svg { transition: transform .2s var(--sal-corta); }
.volver a:hover svg { transform: translateX(-3px); }

/* La portada de aquí no ocupa la pantalla entera: lo que manda son las colas. */
.portada--infra {
  min-height: 0;
  padding-block: clamp(1.5rem, 6vw, 3.5rem) clamp(.75rem, 3vw, 2rem);
}
.portada--infra .portada__golpe { max-width: 34rem; }
.portada--infra .portada__golpe b.parla { color: var(--ref); }
@media (min-width: 62rem) {
  .portada--infra > .env { display: block; max-width: 64rem; }
}

/* ── Las colas ────────────────────────────────────────────────────────── */

/* Toda la página va al ancho de las colas, para que los bordes izquierdos
   coincidan; los textos llevan su propio ancho máximo. */
.infra .env { max-width: 64rem; }

.colas { margin-top: clamp(2rem, 7vw, 3rem); }
.colas + .colas {
  padding-top: clamp(1.75rem, 6vw, 2.5rem);
  border-top: 1px solid var(--line-alta);
}

.colas__h {
  display: flex; flex-wrap: wrap; align-items: baseline;
  column-gap: .9rem; row-gap: .2rem;
}
.colas__nombre {
  font-weight: 800; font-stretch: 78%;
  font-size: clamp(1.9rem, 9vw, 3rem);
  line-height: .95; letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}
.colas[data-quien='referencia'] .colas__nombre { color: var(--ref); }
.colas__resumen { font-size: .9375rem; color: var(--ink-3); }
.colas__resumen b { font-variant-numeric: tabular-nums; }

/* Las puertas, una al lado de otra; cada cola cuelga de su dintel. */
.colas__puertas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.9rem, 1fr));
  gap: 1.75rem .6rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  align-items: start;
}
.cola {
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: .45rem;
  min-width: 0;
}
.cola__rotulo {
  display: grid; justify-items: start; row-gap: .25rem;
  min-height: 3.1rem;
  align-content: end;
  font-size: .8125rem; line-height: 1.25; color: var(--ink-3);
}
.cola__cifra {
  font-size: .8125rem; line-height: 1.25; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cola__cifra b {
  display: block;
  font-size: 1.125rem; font-weight: 800; font-stretch: 84%;
  letter-spacing: -.01em;
  color: var(--ink);
}
.colas[data-quien='referencia'] .cola__cifra b { color: var(--ref); }
.cola__gente { display: block; }

/* Lo que sale por calles y las puertas casi vacías: más quietas, para que
   no compitan con las carreteras. */
.cola--resto .cola__cifra b { color: var(--ink-3) !important; }

@media (min-width: 46rem) {
  .colas__puertas { grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr)); gap: 2rem 1rem; }
  /* Las dos ciudades lado a lado: las colas cuelgan de la misma línea y
     las alturas se comparan de un vistazo. */
  .colas-pareja {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: start;
  }
  .colas-pareja .colas { min-width: 0; }
  .colas-pareja .colas + .colas {
    padding-top: 0; border-top: 0;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    margin-left: calc(-1 * clamp(1.5rem, 4vw, 3rem) / 2);
    border-left: 1px solid var(--line-alta);
  }
  /* la cabecera con la misma altura en las dos, para que las puertas
     empiecen a la vez */
  .colas-pareja .colas__h { min-height: 5.5rem; align-content: start; }
  .colas-pareja .colas__puertas { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: 2rem .75rem; }
  /* rótulos de la misma altura: todos los dinteles a la misma línea */
  .colas-pareja .cola__rotulo { min-height: 4.75rem; }
}

/* En el móvil, las dos ciudades también van en dos columnas, con dos puertas por fila. Con
   subgrid, la cabecera y cada fila de puertas de las dos ciudades comparten altura: los
   dinteles quedan en la misma línea. Hasta 6 filas de puertas (12 salidas). Sin subgrid cada
   ciudad se apila por su cuenta, en dos columnas, y los dinteles no se alinean entre ellas. */
@media (max-width: 45.99rem) {
  .colas-pareja {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: .875rem;
    align-items: start;
    margin-top: clamp(1.5rem, 5vw, 2rem);
  }
  .colas-pareja .colas { min-width: 0; margin-top: 0; }
  .colas-pareja .colas + .colas { padding-top: 0; border-top: 0; }
  .colas-pareja .colas__h { display: block; min-height: 4.4rem; }
  .colas-pareja .colas__nombre { display: block; font-size: clamp(1.15rem, 5.4vw, 1.5rem); line-height: 1; }
  .colas-pareja .colas__resumen { margin-top: .3rem; font-size: .8125rem; line-height: 1.3; }
  .colas-pareja .colas__puertas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .5rem;
    margin-top: .5rem; padding-top: .9rem;
  }
  .colas-pareja .cola { padding-bottom: 1.25rem; row-gap: .35rem; }
  .colas-pareja .cola__rotulo { min-height: 3.6rem; }
  /* la matrícula más larga («M-502 y M-511») no cabe en media columna: se encoge y, si aún no cabe, se parte */
  .colas-pareja .rotulo { font-size: .6875rem; letter-spacing: -.01em; padding-inline: .3em; white-space: normal; max-width: 100%; }
  @media (max-width: 23.5rem) { .colas-pareja .rotulo { font-size: .625rem; } }
}
@supports (grid-template-rows: subgrid) {
  @media (max-width: 45.99rem) {
    .colas-pareja .colas { display: grid; grid-row: span 7; grid-template-rows: subgrid; }
    .colas-pareja .colas__h { align-self: start; }
    .colas-pareja .colas__puertas { grid-row: 2 / span 6; display: grid; grid-template-rows: subgrid; }
  }
}

/* Rótulo de carretera: la matrícula enmarcada, como en un panel de salida,
   pero en la tinta de la web. */
.rotulo {
  display: inline-block;
  padding: .12em .42em .1em;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  color: var(--ink);
  font-weight: 800; font-stretch: 84%;
  font-size: .75rem; line-height: 1.15;
  font-stretch: 76%;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (min-width: 46rem) { .rotulo { font-size: .8125rem; font-stretch: 84%; } }
.colas[data-quien='referencia'] .rotulo { color: var(--ref); }
.cola--calles .rotulo { border-style: dashed; color: var(--ink-3); }


.colas__pie {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: .8125rem; line-height: 1.6;
  color: var(--ink-3);
}

/* ── La hora punta: un embudo por ciudad ───────────────────────────────
   Arriba salen, abajo entran, con la misma escala en las dos ciudades. El
   embudo aparece de arriba abajo al verse. */

.sentidos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 5vw, 3rem);
  margin-top: clamp(1.5rem, 5vw, 2.25rem);
  max-width: 52rem;
}
.sent { min-width: 0; display: flex; flex-direction: column; }
.sent__nombre {
  font-weight: 800; font-stretch: 78%;
  font-size: clamp(1.5rem, 6vw, 2.25rem);
  line-height: .95; letter-spacing: -.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.sent[data-quien='referencia'] .sent__nombre { color: var(--ref); }
.sent__frase { margin-top: .4rem; min-height: 3.2em; font-size: clamp(.875rem, 2.4vw, 1.0625rem); line-height: 1.3; color: var(--ink-2); }
.sent__frase b {
  display: block;
  font-weight: 800; font-stretch: 80%;
  font-size: clamp(2.25rem, 9vw, 3.25rem);
  line-height: 1; letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sent[data-quien='referencia'] .sent__frase b { color: var(--ref); }
.sent__dato {
  display: flex; justify-content: center; align-items: baseline; gap: .45rem;
  margin-top: .9rem;
  font-size: .8125rem; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.sent__dato b {
  font-size: clamp(1.125rem, 4vw, 1.5rem); font-weight: 800; font-stretch: 84%;
  letter-spacing: -.01em; text-transform: none;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.sent__embudo { display: block; width: 100%; height: clamp(9rem, 30vw, 13rem); margin-top: .4rem; overflow: visible; }
.sent__dato + .sent__embudo { margin-top: .4rem; }
.sent__embudo + .sent__dato { margin-top: .4rem; }
.sent__sale, .sent__entra { fill: var(--ink-3); }
.sent__cuello { fill: var(--ink-3); opacity: .22; }
.sent[data-quien='referencia'] .sent__sale,
.sent[data-quien='referencia'] .sent__entra,
.sent[data-quien='referencia'] .sent__cuello { fill: var(--ref); }
.sent__embudo { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--sal-corta); }
.sent--visto .sent__embudo { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .sent__embudo { clip-path: none; transition: none; } }

/* ── Las fichas de cada puerta ────────────────────────────────────────── */

.puerta-ficha {
  margin-top: clamp(1.75rem, 6vw, 2.5rem);
  display: grid;
  gap: 0;
  max-width: 36rem;
}
.puerta-ficha li {
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
}
.puerta-ficha li:last-child { border-bottom: 1px solid var(--line); }
.puerta-ficha h3 {
  display: flex; flex-wrap: wrap; align-items: center; gap: .55rem;
  margin-bottom: .7rem;
  font-size: 1.125rem; font-weight: 700; font-stretch: 92%;
  letter-spacing: -.012em; line-height: 1.25;
}
.puerta-ficha h3 .rotulo { color: var(--ref); font-size: 1rem; }
.puerta-ficha p { font-size: .9375rem; }
.puerta-ficha p + p { margin-top: .7rem; }
.ficha__fuente { font-size: .8125rem !important; color: var(--ink-3); }
.ficha__fuente a { color: var(--ink-3); }
.ficha__fuente a:hover { color: var(--ink-2); }

.infra .pie__meta a { color: var(--ink-2); }

::selection { background: var(--aura-ref); background: color-mix(in srgb, var(--ref) 22%, transparent); }

/* Las colas van pegadas a la portada: son la tesis de la página y tienen que
   asomar en la primera pantalla. */
.portada--infra { border-bottom: 0; }
.bloque--colas { padding-top: clamp(.5rem, 2vw, 1rem); }

/* ── El mapa ──────────────────────────────────────────────────────────── */

.mapas {
  display: grid;
  gap: 2rem 1.5rem;
  margin-top: clamp(1.5rem, 5vw, 2.25rem);
}
@media (min-width: 46rem) { .mapas { grid-template-columns: 1fr 1fr; } }
/* En pantallas anchas los mapas se salen del ancho del texto: son la pieza
   principal y necesitan sitio para que la gente no se apelotone. */
@media (min-width: 70rem) {
  .mapas {
    width: min(100vw - 2 * var(--gutter), 92rem);
    margin-inline: calc((100% - min(100vw - 2 * var(--gutter), 92rem)) / 2);
  }
}
.mapa { margin: 0; min-width: 0; }
.mapa__pie {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  margin-bottom: .6rem;
}
.mapa__nombre {
  font-weight: 800; font-stretch: 78%;
  font-size: clamp(1.6rem, 7vw, 2.25rem);
  line-height: .95; letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}
.mapa[data-quien='referencia'] .mapa__nombre,
.perimetro[data-quien='referencia'] .mapa__nombre { color: var(--ref); }
.mapa__dato { font-size: .875rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mapa__lienzo {
  display: block; width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
.mapa__escala:empty { display: none; }
.mapa__escala { margin-top: .9rem; font-size: .8125rem; color: var(--ink-3); }
.infra .salir__ir {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 1.5rem;
  color: var(--ref);
  font-size: .8125rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none;
}


/* ── En transporte público ─────────────────────────────────────────────
   El término de cada ciudad pintado por zonas de 10 minutos: capas
   semitransparentes que se cargan de color donde se tarda menos. Parla en
   su azul y la ciudad elegida en tinta. Debajo, callado, el término y las manzanas
   del Catastro; encima, las líneas de tren y sus estaciones (con nombre,
   las de Cercanías; las de Metro y Metro Ligero, como puntos). */

.tp { --tp-color: var(--ink); }
.tp[data-quien='referencia'] { --tp-color: var(--ref); }

.tp__mandos { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: clamp(1.25rem, 4vw, 1.75rem); }
.tp__destinos { display: flex; flex-wrap: wrap; gap: .5rem; }
.tp__min {
  padding: .45rem .9rem;
  border: 1px solid var(--line-alta); border-radius: 999px;
  background: var(--bg); color: var(--ink);
  font: inherit; font-size: .875rem; font-weight: 700;
  cursor: pointer;
}
.tp__min:hover { border-color: var(--ink-3); }
.tp__min[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tp__bus { display: inline-flex; align-items: center; gap: .5rem; font-size: .9375rem; color: var(--ink); cursor: pointer; }
.tp__bus input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.tp__frase { margin-top: 1rem; max-width: 36rem; font-size: 1.0625rem; line-height: 1.45; color: var(--ink); }
.tp__frase .parla { color: var(--ref); }

.tp__marco { position: relative; }
.tp__svg {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg);
  touch-action: manipulation;
}
.tp__termino { fill: var(--surface); stroke: none; }
.tp__manzanas { fill: var(--surface-2); stroke: var(--line-alta); stroke-width: .3; }
.tp__zona { fill: var(--tp-color); fill-opacity: .15; stroke: var(--tp-color); stroke-opacity: .5; stroke-width: .7; }
@media (prefers-color-scheme: dark) { .tp__zona { fill-opacity: .19; } }
/* A más del último tramo: las manzanas, rayadas con el color de la ciudad. */
.tp__raya { stroke: var(--tp-color); stroke-opacity: .55; }
.tp__lejos { pointer-events: none; }
.tp__limite { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.tp[data-quien='referencia'] .tp__limite { stroke: var(--ref); stroke-width: 2; }
.tp__linea { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.tp__linea--cercanias { stroke: var(--ink); stroke-width: 2; }
.tp__linea--metro, .tp__linea--ligero { stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 4 3; }
.tp__est { fill: var(--bg); stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.tp__est--metro { fill: var(--ink-3); stroke: var(--bg); stroke-width: 1; }
/* La estación en obras: amarillo de obra, con borde de tinta para que se
   lea sobre el azul de Parla y en los dos temas. */
:root { --obra: #f5c400; }
.tp__obra { fill: var(--obra); stroke: var(--ink); stroke-width: 2; pointer-events: none; }
.tp__rest--obra { fill: var(--ink); }
.tp__rest {
  fill: var(--ink); font-size: calc(11px * var(--k, 1)); font-weight: 700;
  paint-order: stroke; stroke: var(--bg); stroke-width: calc(3px * var(--k, 1)); stroke-linejoin: round;
  pointer-events: none;
}
.tp__km { stroke: var(--ink-3); stroke-width: 2; }
.tp__km-t { fill: var(--ink-3); font-size: calc(12px * var(--k, 1)); }
.tp__falta {
  display: grid; place-items: center;
  aspect-ratio: 1; padding: 2rem;
  border: 1px dashed var(--line-alta); border-radius: 4px;
  font-size: .9375rem; color: var(--ink-3); text-align: center;
}

.tp__ley {
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem;
  margin: 1rem 0 0; padding: 0; list-style: none;
  font-size: .8125rem; color: var(--ink-2);
}
.tp__l { display: inline-flex; align-items: center; gap: .4rem; }
/* La muestra: la tinta con tantas capas como lleva esa zona. */
.tp__c {
  width: .9rem; height: .9rem; border-radius: 2px;
  background: color-mix(in srgb, var(--tp-color, var(--ink)) calc((1 - pow(.85, var(--capas, 1))) * 100%), var(--surface));
}
.tp__c--nada {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--tp-color, var(--ink)) 55%, var(--surface)) 0 1.3px, var(--surface) 1.3px 5px);
  box-shadow: inset 0 0 0 1px var(--line-alta);
}
.tp__c--linea { height: 2px; background: var(--ink); }
.tp__c--metro { height: 0; border-top: 1.2px dashed var(--ink-3); background: none; }
.tp__c--obra { border-radius: 50%; background: var(--obra); box-shadow: inset 0 0 0 2px var(--ink); }

/* El recuadro, como el de los gráficos de líneas de vivienda.css. */
.tp__tip {
  position: absolute; z-index: 3;
  min-width: 9rem; max-width: 15rem;
  padding: .5rem .65rem .55rem;
  border-radius: 6px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-alta), 0 6px 18px rgb(0 0 0 / .12);
  pointer-events: none;
  translate: 0 -100%;
}
.tp__tip .graf__tip-h { margin-bottom: .2rem; font-size: .75rem; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
.tp__tip-v { font-size: 1.0625rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.tp__tip-m { font-size: .75rem; color: var(--ink-3); }

/* ── Los dos apartados: en coche y en transporte público ───────────────
   Cada uno abre con su cabecera, más grande que los títulos de dentro. El
   filete grueso, como un cambio de capítulo, solo separa uno del anterior:
   el primero va justo después de la portada. */

.grupo__cab { padding-block: clamp(3rem, 10vw, 5rem) clamp(.25rem, 1vw, .5rem); }
.grupo + .grupo .grupo__cab { border-top: 4px solid var(--ink); }
.grupo + .grupo .grupo__cab, .grupo + .bloque { margin-top: clamp(1rem, 4vw, 2rem); }
.grupo__h {
  font-weight: 800; font-stretch: 75%;
  font-size: clamp(2.5rem, 11vw, 4.25rem);
  line-height: .9; letter-spacing: -.035em;
  text-transform: uppercase;
  color: var(--ink);
}
.grupo__intro {
  max-width: 36rem;
  margin-top: 1rem;
  font-size: 1.0625rem; line-height: 1.5;
  color: var(--ink-2);
}
/* Dentro de un apartado, los títulos bajan un punto. */
.grupo .bloque__h { font-size: clamp(1.4rem, 6vw, 2rem); }
.grupo__cab + .bloque { border-top: 0; padding-top: clamp(1.5rem, 5vw, 2.5rem); }

/* ── El tren a mano y el abono: dos cifras grandes, Parla y la otra ─────── */

.tp-cifras {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 5vw, 3rem);
  max-width: 44rem;
  margin-top: clamp(1.25rem, 4vw, 1.75rem);
}
.tp-cifra { min-width: 0; }
.tp-cifra__quien { font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.tp-cifra__v {
  margin-top: .2rem;
  font-weight: 800; font-stretch: 80%;
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tp-cifra[data-quien='referencia'] .tp-cifra__quien,
.tp-cifra[data-quien='referencia'] .tp-cifra__v { color: var(--ref); }
.tp-cifra__que { margin-top: .4rem; font-size: .875rem; line-height: 1.4; color: var(--ink-3); }
.tp-nota { max-width: 36rem; margin-top: 1.25rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* ── Sanidad: el hospital y lo que le falta ──────────────────────────────
   La clasificación de los hospitales: Parla en azul, el de la ciudad elegida
   en tinta y los demás apagados, para que se vea en qué puesto queda. */
.hosp-filas .mun__fila[data-quien='otro'] .mun__q,
.hosp-filas .mun__fila[data-quien='otro'] .mun__v { color: var(--ink-3); font-weight: 400; }
.hosp-filas .mun__fila[data-quien='otro'] .mun__barra i { background: var(--line-alta); }
.hosp-filas .mun__fila[data-quien='referencia'] .mun__q,
.hosp-filas .mun__fila[data-quien='aqui'] .mun__q { font-weight: 700; }

/* La cifra de lo que falta: grande y en rojo, como la de la portada. */
.cartera-cifra {
  display: flex; align-items: center; gap: clamp(.8rem, 3vw, 1.2rem);
  margin-top: clamp(1.25rem, 4vw, 1.75rem);
}
.cartera-cifra__v {
  font-weight: 800; font-stretch: 76%;
  font-size: clamp(3.2rem, 16vw, 5rem); line-height: .8; letter-spacing: -.045em;
  color: var(--loss);
}
.cartera-cifra__que {
  max-width: 20rem;
  font-size: clamp(1rem, 3.8vw, 1.125rem); font-weight: 600; line-height: 1.25;
  color: var(--ink);
}

/* Las tiras de esta página no esperan a verse: están quietas desde el principio. */
.tira--quieta { margin-top: 1rem; max-width: 34rem; }
.tira--quieta .u--hueco { opacity: 1; transform: none; }
#cartera-tira .marcador__ley, #cabecera-tira .marcador__ley { margin-top: .55rem; }

/* Cada unidad que falta, con su hueco. Las más graves, en rojo y más gruesas. */
.huecos {
  list-style: none; margin: 1.4rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem .5rem;
  max-width: 44rem;
}
.hueco-nombre {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .38rem .7rem .38rem .55rem;
  border: 1px solid var(--line-alta); border-radius: 6px;
  font-size: .875rem; line-height: 1.2; color: var(--ink-2);
}
.hueco-nombre__m {
  flex: none; width: 11px; height: 11px;
  background: var(--loss);
  -webkit-mask: var(--hueco) center / 100% 100% no-repeat;
  mask: var(--hueco) center / 100% 100% no-repeat;
}
.hueco-nombre--grave {
  border-color: var(--loss); background: var(--loss-veil);
  font-weight: 700; color: var(--loss);
}

/* Cómo ha cambiado la espera: una columna por agosto, la última más marcada.
   Un panel por hospital, con la misma escala en los dos. */
.evol {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  align-items: start;
  gap: 0 clamp(1.25rem, 5vw, 3rem);
  max-width: 44rem; margin-top: .8rem;
}
/* El nombre del hospital puede ocupar dos líneas: con subgrid, el nombre de cada panel y sus
   columnas comparten fila, y las columnas empiezan a la misma altura. */
@supports (grid-template-rows: subgrid) {
  .evol__panel { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .evol__quien { align-self: end; }
}
/* Los años cuelgan por debajo del eje: el panel les guarda el sitio. */
.evol__panel { padding-bottom: 1.5rem; }
.evol__quien { font-size: .8125rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.evol__panel[data-quien='referencia'] .evol__quien { color: var(--ref); }
.evol__cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  height: 10rem; margin-top: .6rem;
  border-bottom: 1px solid var(--line-alta);
}
.evol__col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; }
.evol__v { font-size: .8125rem; font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-bottom: .25rem; }
.evol__barra { display: block; width: 100%; max-width: 3.25rem; border-radius: 4px 4px 0 0; background: var(--line-alta); }
.evol__y { order: 3; margin-top: .35rem; margin-bottom: -1.5rem; font-size: .75rem; color: var(--ink-3); }
.evol__col--ultimo .evol__v { color: var(--ink); font-size: .9375rem; }
.evol__panel[data-quien='referencia'] .evol__col--ultimo .evol__barra { background: var(--ref); }
.evol__panel[data-quien='aqui'] .evol__col--ultimo .evol__barra { background: var(--ink-3); }
.evol + .tp-nota { margin-top: .75rem; }

/* Una tercera cifra, la media de referencia: más pequeña y apagada. */
.tp-cifras--tres { grid-template-columns: 1fr 1fr .8fr; max-width: 52rem; }
.tp-cifra[data-quien='otro'] .tp-cifra__quien,
.tp-cifra[data-quien='otro'] .tp-cifra__v { color: var(--ink-3); }
.tp-cifra[data-quien='otro'] .tp-cifra__v { font-size: clamp(1.6rem, 7vw, 2.4rem); margin-top: .55rem; }
@media (max-width: 34rem) {
  .tp-cifras--tres { grid-template-columns: 1fr 1fr; }
  .tp-cifras--tres .tp-cifra[data-quien='otro'] { grid-column: 1 / -1; }
}

/* La cifra de la cabecera de sanidad.html: solo en escritorio, a la derecha
   del titular, donde si no queda el hueco. En el móvil la dice la frase. */
.portada__dato { display: none; }
@media (min-width: 62rem) {
  .portada--dato > .env {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'marca marca' 'titulo dato' 'ayuda dato';
    column-gap: clamp(2.5rem, 6vw, 5rem);
    align-items: end;
  }
  .portada--dato .marca { grid-area: marca; justify-self: start; }
  .portada--dato .portada__titulo { grid-area: titulo; }
  .portada--dato .portada__golpe { grid-area: ayuda; }
  .portada__dato {
    grid-area: dato; display: block; align-self: center;
    padding-left: clamp(2rem, 4vw, 3rem);
    border-left: 1px solid var(--line);
    max-width: 18rem;
  }
  .portada__dato-v {
    font-weight: 800; font-stretch: 76%;
    font-size: 6rem; line-height: .8; letter-spacing: -.045em;
    color: var(--ref);
  }
  .portada__dato-que { margin-top: .6rem; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
  .portada__dato-otra { margin-top: .5rem; font-size: .875rem; color: var(--ink-3); }
}

/* ── Educación: quién tiene campus y conservatorio ───────────────────────
   Una fila por ciudad: el cuadrado lleno si lo tiene, el hueco si no. Parla
   en azul y la ciudad elegida en tinta; las demás, apagadas. */
.matriz { max-width: 34rem; margin-top: .8rem; overflow-x: auto; }
.matriz__t { width: 100%; border-collapse: collapse; font-size: .875rem; }
.matriz__t thead th {
  padding: 0 .5rem .5rem; text-align: center; vertical-align: bottom;
  font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.3; color: var(--ink-3);
}
.matriz__t thead th:first-child { text-align: left; padding-left: 0; }
.matriz__t tbody tr { border-top: 1px solid var(--line); }
.matriz__t tbody tr:last-child { border-bottom: 1px solid var(--line); }
.matriz__t tbody th { padding: .5rem 0; text-align: left; font-weight: 400; color: var(--ink-3); }
.matriz__t td { text-align: center; padding: .5rem; }
.matriz__t tr[data-quien='referencia'] th { color: var(--ref); font-weight: 800; }
.matriz__t tr[data-quien='aqui'] th { color: var(--ink); font-weight: 700; }
.matriz__t tr[data-quien='referencia'] { background: var(--aura-ref); }
.matriz__m {
  display: inline-block; width: 16px; height: 16px; border-radius: 3px;
  background: var(--ink-3); vertical-align: middle;
}
.matriz__t tr[data-quien='referencia'] .matriz__m { background: var(--ref); }
.matriz__t tr[data-quien='aqui'] .matriz__m { background: var(--ink); }
.matriz__m--no,
.matriz__t tr[data-quien] .matriz__m--no {
  border-radius: 0; background: var(--loss);
  -webkit-mask: var(--hueco) center / 100% 100% no-repeat;
  mask: var(--hueco) center / 100% 100% no-repeat;
}
.tp-nota--corta { margin-top: .6rem; font-size: .9375rem; }
#hay-listas .espera__h:not(:first-child) { margin-top: 2rem; }

/* ── Lo llena que va la A-42 ─────────────────────────────────────────────
   Un mapa: la autovía con tantos carriles como tiene cada tramo, en los
   colores de los mapas de tráfico según lo llena que va (verde, amarillo,
   naranja, rojo). Las retenciones del Ministerio, en una sombra detrás. */
.a42-mapa, .a42__ley {
  --a42-0: #c02719;  /* más de lo que cabe: el --loss de la web */
  --a42-1: #e8710a;
  --a42-2: #e9b200;
  --a42-3: #3c9a4e;
  --a42-reten: rgba(22, 22, 22, .34);  /* la sombra de las retenciones */
}
@media (prefers-color-scheme: dark) {
  .a42-mapa, .a42__ley { --a42-0: #ff5a4a; --a42-1: #ff9a3c; --a42-2: #f2c94c; --a42-3: #5cc36e; --a42-reten: rgba(255, 255, 255, .34); }
}
.a42__ley { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1.1rem 0 0; padding: 0; font-size: .8125rem; color: var(--ink-3); }
.a42__ley-i { display: inline-flex; align-items: center; gap: .4rem; }
.a42__ley-i i { width: 1.1rem; height: .6rem; border-radius: 2px; }
.a42__ley [data-k='reten'] i { width: 1.4rem; height: .75rem; border-radius: 999px; background: var(--a42-reten); }
.a42-mapa { max-width: 40rem; margin-top: 1rem; }
/* En una ventana baja el mapa no pasa del alto que deja la leyenda: el ancho sigue al alto, sin deformarlo. */
.a42-mapa__svg { display: block; width: auto; max-width: 100%; height: auto; max-height: max(24rem, calc(100svh - 8rem)); }
.a42-mapa__terminos path { fill: var(--surface); stroke: var(--line-alta); stroke-width: .75; }
.a42-mapa__terminos path[data-quien='referencia'] { fill: var(--aura-ref); stroke: var(--ref); stroke-width: 1.25; }
.a42-mapa__terminos path[data-quien='aqui'] { stroke: var(--ink-3); stroke-width: 1.25; }
.a42-mapa__vias path { fill: none; stroke: var(--line-alta); stroke-width: 1; stroke-linecap: round; }
.a42-mapa__nombres text { font-size: 11px; fill: var(--ink-3); text-anchor: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.a42-mapa__nombres text[data-quien='referencia'] { fill: var(--ref); font-weight: 800; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; }
.a42-mapa__nombres text[data-quien='aqui'] { fill: var(--ink); font-weight: 700; font-size: 12px; }
.a42-mapa__borde { fill: var(--ink); stroke: none; }
.a42-mapa__tramo { stroke: none; }
.a42-mapa__raya { fill: none; stroke: var(--bg); stroke-width: 1.25; }
.a42-mapa__reten path { fill: none; stroke: var(--a42-reten); stroke-linecap: round; stroke-linejoin: round; }
.a42-mapa__salidas path { stroke: var(--ink-3); stroke-width: .75; fill: none; }
.a42-mapa__salidas text { font-size: 11px; fill: var(--ink-2); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.a42-mapa__pct { font-size: 15px; font-weight: 800; text-anchor: end; fill: var(--ink); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.a42-mapa__carr { font-size: 10.5px; text-anchor: end; fill: var(--ink-3); paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.a42-mapa__tramo[data-e='0'], .a42__ley [data-e='0'] i { fill: var(--a42-0); background: var(--a42-0); }
.a42-mapa__tramo[data-e='1'], .a42__ley [data-e='1'] i { fill: var(--a42-1); background: var(--a42-1); }
.a42-mapa__tramo[data-e='2'], .a42__ley [data-e='2'] i { fill: var(--a42-2); background: var(--a42-2); }
.a42-mapa__tramo[data-e='3'], .a42__ley [data-e='3'] i { fill: var(--a42-3); background: var(--a42-3); }

/* ── Si falla la C-4 ─────────────────────────────────────────────────────
   La tabla con y sin Cercanías y los cuatro mapas: Parla y la ciudad
   elegida, con y sin Cercanías. */
.falla-t { width: 100%; max-width: 46rem; margin-top: 1.5rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.falla-t th, .falla-t td { padding: .55rem .35rem; text-align: right; vertical-align: baseline; }
.falla-t thead th { font-size: .875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); text-align: center; }
.falla-t thead th[data-quien='referencia'] { color: var(--ref); }
.falla-t .falla-t__sub th { font-size: .75rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-3); text-align: right; padding-top: 0; }
.falla-t tbody .falla-t__fq { border-top: 1px solid var(--line); }
.falla-t tbody tr:last-child { border-bottom: 1px solid var(--line); }
.falla-t__q { text-align: left !important; font-weight: 700; font-size: .875rem; color: var(--ink-2); padding-bottom: 0 !important; }
.falla-t__con { font-size: 1rem; color: var(--ink-3); }
.falla-t__sin { font-size: 1.25rem; font-weight: 800; color: var(--ink); }
.falla-t__sin[data-quien='referencia'] { color: var(--ref); }
.falla-t__dif { display: block; margin-top: .1rem; font-size: .75rem; font-weight: 700; color: var(--ink-3); }
.falla-t__sin[data-quien='referencia'] .falla-t__dif { color: var(--ref); }
.falla-t__flecha { color: var(--line-alta); text-align: center !important; padding-inline: .1rem !important; }
@media (max-width: 34rem) {
  .falla-t__sin { font-size: 1.05rem; }
  .falla-t__con { font-size: .875rem; }
}

.falla-juntos { margin-top: 1rem; }
.falla-juntos__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
/* Parla y la otra ciudad frente a frente, y el scroll en dos pasos (un día
   normal, sin la línea principal), con los mapas fijos mientras se recorre
   el bloque (assets/infraestructura-tp.js, frente()). */
.falla-juntos--scroll { height: calc(100vh + 26rem); }
.falla-juntos--scroll .falla-juntos__rejilla { display: block; height: 100%; }
.tp__fijo { position: sticky; top: .75rem; }
/* Fijo, el bloque entero (pasos, nombres, mapas y leyenda) tiene que caber en la ventana: los mapas no
   pasan del alto que queda tras lo demás (--tp-resto) y la barra del índice de abajo, y siguen cuadrados. */
.tp__fijo { --tp-resto: 20rem; --tp-lado: max(13rem, calc(100svh - var(--tp-resto) - .75rem - 4.5rem)); }
.tp__capas { max-width: var(--tp-lado); }
.tp__cols { max-width: calc(2 * var(--tp-lado) + clamp(.5rem, 2vw, 1.25rem)); }
.tp__fijo .tp__ley { margin-top: .75rem; }
/* Ventana ancha y baja: la leyenda pasa a una columna a la derecha de los dos mapas, que así pueden ser más
   grandes (pasos y texto arriba, a todo el ancho). Los minutos van en vertical: una fila por tramo, con
   Parla y la otra ciudad en dos columnas. --tp-resto es lo que ocupan, sobre los mapas, pasos, texto y nombres. */
@media (min-width: 60rem) and (max-height: 50rem) {
  .tp__fijo {
    --tp-resto: 10rem; --tp-ley: 15rem; --tp-gap: clamp(.5rem, 2vw, 1.25rem);
    --tp-lado: max(13rem, min(calc(100svh - var(--tp-resto) - .75rem - 4.5rem),
      calc((100vw - 3rem - var(--tp-ley) - 1.5rem - var(--tp-gap)) / 2)));
    display: grid; grid-template-columns: minmax(0, calc(2 * var(--tp-lado) + var(--tp-gap))) var(--tp-ley);
    column-gap: 1.5rem; width: fit-content; max-width: 100%; margin-inline: auto; align-items: start;
  }
  .tp__fijo > .tp__pasos, .tp__fijo > .tp__clave { grid-column: 1 / -1; }
  .tp__fijo > .tp__cols { grid-column: 1; }
  .tp__fijo .tp__ley { grid-column: 2; grid-row: 3; margin-top: 0; flex-direction: column; flex-wrap: nowrap; gap: .6rem; }
  /* La leyenda empieza donde empiezan los mapas, no en los nombres: nombre, dato y mapa de cada ciudad
     pasan a ser filas de la rejilla del bloque, y la leyenda se pone en la del mapa. Sin subgrid se queda
     arriba, a la altura de los nombres. */
  @supports (grid-template-rows: subgrid) {
    .tp__fijo > .tp__cols { grid-row: 3 / span 3; grid-template-rows: subgrid; row-gap: 0; }
    .tp__fijo > .tp__cols > .tp__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
    .tp__fijo .tp__ley { grid-row: 5; }
    /* En una ventana muy baja la leyenda mide más que el mapa: se apoya abajo y sube lo que le sobra,
       para que el bloque no crezca y no lo tape la barra del índice. */
    @media (max-height: 34rem) {
      .tp__fijo .tp__ley { grid-row: 3 / span 3; align-self: end; }
    }
  }
  /* La tabla, girada: sus filas (Parla, la otra) pasan a columnas y los tramos a filas. */
  .tp__tabla { display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--filas, 8), auto); grid-template-columns: auto 1fr 1fr; column-gap: .35rem; max-width: none; }
  .tp__tabla colgroup { display: none; }
  .tp__tabla thead, .tp__tabla tbody, .tp__tabla tr { display: contents; }
  .tp__tabla thead th { align-self: center; text-align: left; font-size: .75rem; }
  .tp__tabla thead th, .tp__tabla td { padding: .15rem 0; }
  .tp__tabla tbody th { text-align: center; align-self: end; font-size: .6875rem; }
  .tp__tabla .tp__c { height: .9rem; }
}
.tp__pasos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.tp__paso {
  counter-increment: paso;
  padding: .35rem .75rem; border: 1px solid var(--line-alta); border-radius: 999px;
  font-size: .8125rem; font-weight: 700; color: var(--ink-3); white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.tp__paso::before { content: counter(paso) ' · '; }
.tp__paso[data-activo='1'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.tp__clave { margin: .6rem 0 .75rem; font-size: .8125rem; line-height: 1.4; color: var(--ink-3); }
.tp__cols { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem clamp(.5rem, 2vw, 1.25rem); }
.falla-juntos .tp__col-nombre { font-size: clamp(1.25rem, 5vw, 2rem); }
.tp__col[data-quien='referencia'] .tp__col-nombre { color: var(--ref); }
.tp__col-dato { min-height: 2.6em; margin: .3rem 0 .5rem; font-size: clamp(.75rem, 2.4vw, .875rem); line-height: 1.3; color: var(--ink-3); }
.tp__col-dato b { color: var(--ink); }
.tp__col-dato .tp__mas { color: var(--loss); }
.tp__capas { display: grid; }
.tp__capas > .tp { grid-area: 1 / 1; margin: 0; }
.tp__capas .mapa__pie { display: none; }
.tp__capas > .tp + .tp { opacity: 0; transition: opacity .45s ease; }
.tp__cols[data-paso='2'] .tp__capas > .tp + .tp { opacity: 1; }
.tp__cols[data-paso='2'] .tp__capas > .tp:first-child { visibility: hidden; transition: visibility 0s .45s; }
@media (prefers-reduced-motion: reduce) {
  .tp__capas > .tp + .tp, .tp__paso { transition: none; }
}
/* La leyenda de los minutos: una fila por ciudad, con su color. */
.tp__escala { display: block; width: 100%; }
.tp__tabla { border-collapse: collapse; width: 100%; max-width: 40rem; table-layout: fixed; }
.tp__tabla th, .tp__tabla td { padding: .2rem .15rem; text-align: center; font-weight: 400; }
.tp__tabla thead th { font-size: .6875rem; line-height: 1.15; color: var(--ink-3); vertical-align: bottom; }
.tp__tabla tbody th { text-align: left; font-size: .75rem; line-height: 1.15; font-weight: 700; color: var(--ink); }
.tp__tabla-nombre { width: 5.25rem; }
.tp__tabla tr[data-quien='referencia'] th { color: var(--ref); }
.tp__tabla tr[data-quien='referencia'] { --tp-color: var(--ref); }
.tp__tabla .tp__c { display: block; width: 100%; height: .8rem; }
@media (max-width: 34rem) { .tp__paso { font-size: .75rem; padding: .3rem .6rem; } }
.tp__escala-pie { display: block; margin-top: .35rem; font-size: .75rem; color: var(--ink-3); }

.falla-juntos .mapa__nombre { font-size: clamp(1rem, 3.2vw, 1.5rem); }
.falla-juntos .mapa__dato { font-size: .75rem; line-height: 1.35; }

/* Una columna sin dato (esperanza de vida, antigüedad de los coches): misma forma, cifra apagada. */
.tp-cifra--sin .tp-cifra__v { font-size: clamp(1.5rem, 6.5vw, 2.25rem); color: var(--ink-3); margin-top: .55rem; }