/* ==========================================================================
   hub.css — Páginas de comunidad autónoma
   Se carga sobre app.css: hereda tokens, temas y tipografía.
   Mobile-first, como el resto.
   ========================================================================== */

main { padding-bottom: 60px; }
.wrap { max-width: 720px; }

/* ------------------------------------------------------------------ ruta */
.migas {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  padding: 16px 0 4px;
}
.migas a { color: var(--ink-soft); }
.migas span[aria-hidden] { margin: 0 4px; }


/* --------------------------------------------------------------- titular */
h1 {
  font-size: var(--fs-xl);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 8px 0 14px;
  text-wrap: balance;
}
.entradilla {
  font-size: var(--fs-md);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

h2 {
  font-size: var(--fs-lg);
  letter-spacing: -.015em;
  margin: 38px 0 12px;
  text-wrap: balance;
}
h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 24px 0 8px;
}
main p {
  font-size: var(--fs-md);
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
main strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------- las tres cifras --- */
/* Lo que la gente viene a buscar, antes que ninguna explicación. */
.cifras {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 16px;
}
.cifras > div { background: var(--surface); padding: 16px 18px; }
.cifras .k {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.cifras .v {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--buy);
}
.cifras .n {
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  line-height: 1.45;
  margin-top: 7px;
}

.posicion {
  font-size: var(--fs-sm) !important;
  color: var(--ink) !important;
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 12px 15px;
  margin-bottom: 22px !important;
}

/* ----------------------------------------------------------------- CTA -- */
/* La página existe para llevar a la calculadora: el paso siguiente tiene que
   ser obvio sin gritar. */
/* Solo para lectores de pantalla (pies de tabla) */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lista-guias { margin: 0 0 14px; padding-left: 20px; }
.lista-guias li { margin-bottom: 2px; font-size: var(--fs-md); }
.lista-guias a { display: inline-block; padding: 8px 0; font-weight: 500; }

/* Marca de tipo de referencia dentro de una tabla */
table.datos .sello { margin-left: 6px; vertical-align: 1px; }

a.cta {
  display: block;
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--r);
  padding: 16px 20px;
  text-decoration: none;
  margin: 26px 0;
  transition: filter .15s ease;
}
a.cta:hover { filter: brightness(1.08); }
a.cta span {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
}
a.cta small {
  display: block;
  font-size: var(--fs-sm);
  opacity: .82;
  margin-top: 3px;
}
a.cta::after {
  content: "→";
  float: right;
  font-size: var(--fs-lg);
  line-height: 1.2;
  opacity: .8;
}

/* --------------------------------------------------------------- tablas */
table.datos {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-sm);
  background: var(--surface);
}
table.datos th,
table.datos td {
  text-align: left;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line-soft);
}
table.datos thead th {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.datos td.n,
table.datos th:not(:first-child) {
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
/* Columna de texto que no es la primera: a la izquierda, no como las cifras */
table.datos th.texto { text-align: left; }
table.datos tbody tr:last-child td { border-bottom: none; }
table.datos tr.suma td {
  border-top: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink);
}
/* La fila de esta comunidad, dentro de la comparativa nacional */
table.datos tr.aqui td {
  background: var(--buy-wash);
  color: var(--buy);
}
table.datos tr.aqui td strong { color: var(--buy); }

.scroller {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 12px;
}
.pie-tabla {
  font-size: var(--fs-xs) !important;
  color: var(--ink-faint) !important;
  margin-bottom: 20px !important;
}

.aviso-reducidos {
  font-size: var(--fs-sm) !important;
  background: var(--warn-wash);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
  padding: 12px 15px;
  color: var(--ink) !important;
}

/* -------------------------------------------------------------- fuentes */
.fuentes-hub {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 16px 18px;
}
.fuentes-hub p { font-size: var(--fs-sm) !important; margin-bottom: 10px !important; }
.fuentes-hub p:last-child { margin-bottom: 0 !important; }

footer.legal { margin-top: 34px; }
footer.legal p { font-size: var(--fs-xs) !important; }

@media (min-width: 680px) {
  .cifras { grid-template-columns: repeat(3, 1fr); }
  h1 { font-size: var(--fs-2xl); }
  h2 { font-size: var(--fs-xl); }
}