/* ==========================================================================
   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;
  /* Tinta y no terracota: el terracota es de «comprar», y aquí hay impuestos
     y «Donde más se paga» */
  color: var(--ink);
}
.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: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  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); }
}

/* ---------------------------------------------------------- metodología */
.indice-metodo {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  padding: 12px 18px;
  margin-bottom: 8px;
}
.indice-metodo ol { margin: 0; padding-left: 22px; columns: 2 220px; column-gap: 24px; }
.indice-metodo li { font-size: var(--fs-sm); break-inside: avoid; }
.indice-metodo a { display: inline-block; padding: 5px 0; }

/* Fórmulas: se leen como texto, no como código; desplazables en móvil */
pre.formula {
  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 14px 16px;
  margin: 0 0 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
main ul { padding-left: 20px; margin: 0 0 14px; }
main ul li { font-size: var(--fs-md); line-height: 1.6; color: var(--ink-soft); margin-bottom: 6px; }
h2[id], h3[id] { scroll-margin-top: 110px; }

/* ==========================================================================
   Páginas de lectura — septiembre de 2026
   Guías, comunidades, termómetro, metodología, fuentes, glosario y «qué es».
   Mismo sistema que la calculadora: titulares en serif, filetes en vez de
   cajas y tablas que se leen como tablas.
   ========================================================================== */

main { padding-top: 4px; }
.wrap { max-width: 720px; }

/* ------------------------------------------------------------------- ruta */
.migas { padding: 20px 0 10px; }
.migas span[aria-current] { color: var(--ink-faint); }

/* ---------------------------------------------------------------- titular */
h1 {
  font-size: clamp(28px, 5.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -.01em;
  margin: 0 0 16px;
  max-width: 22ch;
}
.entradilla {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 24px;
}
h2 {
  font-size: clamp(22px, 3.4vw, 27px);
  line-height: 1.18;
  margin: 46px 0 14px;
}
h3 { font-size: var(--fs-lg); font-weight: 600; margin: 28px 0 8px; }
main p, main ul li { max-width: 70ch; }

/* --------------------------------------------------- respuesta citable --- */
/* Dos o tres frases que responden la pregunta del titular sin hacer scroll.
   Es el único bloque destacado de la página: si hubiera cinco, no destacaría. */
.respuesta {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 0 0 14px;
  font-size: var(--fs-lg) !important;
  line-height: 1.55;
  color: var(--ink) !important;
  max-width: 100% !important;
}
.respuesta-k { display: block; margin-bottom: 8px; }

/* ------------------------------------------------------------- las cifras */
.cifras { border-color: var(--line); }
.cifras .v { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }

/* ------------------------------------------------------------------- CTA */
/* La flecha iba flotada y caía en su propia línea, bajo el texto. Ahora es una
   fila: texto a la izquierda, flecha centrada a la derecha. */
a.cta {
  position: relative;
  padding: 18px 56px 18px 22px;
  border-radius: var(--r);
  transition: background-color .18s var(--suave), transform .18s var(--suave);
}
a.cta:hover { background: var(--brand-hover); filter: none; }
a.cta::after {
  content: "→";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  float: none;
  font-size: var(--fs-lg);
  opacity: .85;
}
a.cta span { font-size: var(--fs-lg); font-family: var(--serif); letter-spacing: -.005em; }
a.cta small { font-size: var(--fs-sm); opacity: .78; }

/* ---------------------------------------------------------------- tablas */
.scroller { border-color: var(--line); border-radius: var(--r); }
table.datos thead th {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--surface-2);
}
table.datos tbody tr:hover td, table.datos tbody tr:hover th { background: var(--paper); }
table.datos tr.aqui:hover td { background: var(--buy-wash); }
table.datos th[scope="row"] { font-weight: 500; text-align: left; color: var(--ink); }
/* Tablas de texto: las columnas no numéricas se alinean a la izquierda */
table.datos-texto td, table.datos-texto th:not(:first-child) { text-align: left; white-space: normal; }
table.datos-texto td { vertical-align: top; }
.celda-nota { display: block; font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.45; margin-top: 3px; }

/* ------------------------------------------------------- listas de definición */
.lista-def { margin: 0 0 18px; border-top: 1px solid var(--line-soft); }
.lista-def > div { padding: 15px 0; border-bottom: 1px solid var(--line-soft); }
.lista-def dt { font-size: var(--fs-md); font-weight: 600; margin-bottom: 4px; }
.lista-def dd { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
@media (min-width: 760px) {
  .lista-def > div { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 4px 28px; }
  .lista-def dt { margin-bottom: 0; }
}

/* ------------------------------------------------------------- glosario -- */
.indice-glosario { border-top: 1px solid var(--line); margin-bottom: 8px; }
.indice-glosario ul { list-style: none; margin: 0; padding: 0; }
.indice-glosario li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  line-height: 1.8;
  color: var(--ink-faint);
}
.indice-grupo {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.indice-glosario a { color: var(--ink-soft); }
.indice-glosario a:hover { color: var(--ink); }

.termino { padding: 4px 0 26px; border-bottom: 1px solid var(--line-soft); margin-bottom: 26px; }
.termino:last-of-type { border-bottom: 0; }
.termino h3 { font-family: var(--serif); font-size: var(--fs-xl); font-weight: 600; margin: 22px 0 8px; scroll-margin-top: 80px; }
.termino-def { font-size: var(--fs-md) !important; line-height: 1.6; color: var(--ink) !important; max-width: 68ch; }
.termino-ficha { margin: 14px 0 0; }
.termino-ficha > div { display: grid; gap: 2px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.termino-ficha dt {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.termino-ficha dd { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--ink-soft); max-width: 70ch; }
@media (min-width: 700px) {
  .termino-ficha > div { grid-template-columns: 11em minmax(0, 1fr); gap: 4px 24px; align-items: baseline; }
}
.termino-enlaces { font-size: var(--fs-xs) !important; color: var(--ink-faint) !important; margin: 12px 0 0 !important; }
.termino-enlaces a { color: var(--ink-soft); }

/* -------------------------------------------------------------- fuentes -- */
.registro { list-style: none; margin: 0 0 22px; padding: 0; border-top: 1px solid var(--line-soft); }
.registro li { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.registro a { font-size: var(--fs-sm); font-weight: 500; }
.registro-meta, .registro-nota {
  display: block;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 3px;
  max-width: 76ch;
}
.registro-nota { color: var(--ink-soft); }

/* ------------------------------------------------------------------ pie -- */
.fuentes-hub { border-color: var(--line); border-radius: var(--r); }
footer.legal { margin-top: 34px; }