/* todoloquepagas — ritmo editorial (ronda 20).
   Lo que hace que una página larga se lea hasta el final: un resumen arriba, bandas que cambian el fondo, cifras grandes
   repartidas, el color de la familia del impuesto, recuadros con intención, detalle plegado y un índice que dice cuánto
   queda. Con la marca final (17-10-2026), sin iconos de adorno: el color de la familia y el ticket amarillo del kit hacen
   ese trabajo (una raya gruesa encima de cada titular, el ticket con la cifra que importa, la banda amarilla del final). Cada pieza tiene su componente en apps/web/src/components y su explicación en docs/CONSTRUCCION.md
   («Ritmo editorial»); la página /muestrario/ las enseña todas.

   Se carga en todas las páginas (Base.astro), después de sitio.css y antes de las hojas de zona.
   Regla de siempre: ningún color literal; todo sale de tokens.css.

   Orden: 1. familias  2. texto que se lee  3. sin iconos  4. bandas  5. bloque  6. en 30 segundos  7. cifra destacada
          8. recuadros  9. detalle  10. fuentes  11. índice con progreso  12. tarjetas y «Sigue por aquí»  13. tablas
          14. llamada  14 bis. lo que cuesta un trabajo  15. impresión */

/* ==== 1. El color de la familia =====================================================================================
   <… data-familia="trabajo|consumo|bienes|resto"> pone tres variables que heredan los componentes:
     --familia         el color de datos del grupo (barras, filetes gruesos, el borde de una cifra)
     --familia-tinta   el que se lee: texto, iconos y filetes finos (5:1 o más sobre papel, superficie y su suave)
     --familia-suave   el fondo: cabecera de la ficha, tarjetas
   Sin familia, tinta y gris. Dentro de una banda invertida se vuelven a calcular (por eso la segunda regla de cada una). */
:root, .tema-invertido, [data-familia="ninguna"] { --familia: var(--tinta); --familia-tinta: var(--tinta); --familia-suave: var(--superficie-hundida); }
/* `data-familia="ninguna"`: lo que va dentro de una familia sin ser de ella (la calculadora de los días trabajados, que
   mezcla el IRPF, las cotizaciones y el IVA, entre las del consumo) vuelve a la tinta. */
[data-familia="trabajo"], [data-familia="trabajo"] .tema-invertido { --familia: var(--grupo-trabajo); --familia-tinta: var(--grupo-trabajo-tinta); --familia-suave: var(--grupo-trabajo-suave); }
[data-familia="consumo"], [data-familia="consumo"] .tema-invertido { --familia: var(--grupo-consumo); --familia-tinta: var(--grupo-consumo-tinta); --familia-suave: var(--grupo-consumo-suave); }
[data-familia="bienes"], [data-familia="bienes"] .tema-invertido { --familia: var(--grupo-bienes); --familia-tinta: var(--grupo-bienes-tinta); --familia-suave: var(--grupo-bienes-suave); }
[data-familia="resto"], [data-familia="resto"] .tema-invertido { --familia: var(--grupo-resto); --familia-tinta: var(--grupo-resto-tinta); --familia-suave: var(--grupo-resto-suave); }

/* Lo que lleva el tema invertido hereda el color de la página: se le devuelve el suyo. */
.tema-invertido { color: var(--tinta); }

/* Los cuatro grupos de color (marca final): donde salen las familias juntas (/impuestos/, «Qué entra en el cálculo» de la
   portada, /calculadoras/), van en sus cuatro grupos de lib/familias.ts (GRUPOS_DE_COLOR), cada grupo con su rótulo y su
   color UNA vez: una raya gruesa del color del grupo y su nombre en versalitas, en la tinta del grupo. Lo de dentro
   (familias, grupos de calculadoras) se separa con el filete de siempre, sin repetir el color en cada raya.
   <section class="grupo-color" data-familia="…"><h3 class="grupo-color__rotulo">…</h3> … </section> */
.grupo-color { display: grid; min-width: 0; }
.grupo-color__rotulo { margin: 0; padding-block: var(--espacio-3) var(--espacio-1); border-top: 6px solid var(--familia); font: 860 15px/20px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; text-wrap: balance; color: var(--familia-tinta); }
/* Un grupo con una sola familia del mismo nombre («Trabajo»): el rótulo es solo la raya (el nombre lo dice la familia). */
.grupo-color__rotulo--raya { padding-block: var(--espacio-2) 0; }

/* ==== 2. Texto que se lee ===========================================================================================
   Un punto más de cuerpo y más interlínea en el texto corrido; párrafos con aire; el gris, solo para lo secundario. */
.prosa { font: var(--tipo-cuerpo-lectura); letter-spacing: var(--tipo-cuerpo-lectura-espaciado); }
.prosa > * + * { margin-top: var(--espacio-5); }
.prosa li + li { margin-top: var(--espacio-3); }
/* Las listas, con la marca de la familia (o de tinta): un guion grueso, no el punto del sistema. */
.prosa ul { padding-left: 0; list-style: none; }
.prosa ul > li { position: relative; padding-left: 1.5em; }
.prosa ul > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.75em; height: 3px; background: var(--familia); }
.prosa ol { padding-left: 1.5em; }
.prosa ol > li::marker { font-weight: 760; color: var(--familia-tinta); font-variant-numeric: tabular-nums; }
/* Un ladillo: el h3 dentro del texto lleva encima un filete corto de la familia. Uno cada pocos párrafos. */
.prosa h3, .ladillo { position: relative; padding-top: var(--espacio-4); }
.prosa h3::before, .ladillo::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 4px; background: var(--familia); }
.prosa h3 { margin-top: var(--espacio-10); }
/* La frase de contexto de un bloque se lee entera, en tinta: es la entradilla de la sección. */
.bloque__cabecera p { font: 450 19px/29px var(--font-sans); color: var(--tinta); }
@media (max-width: 40em) { .bloque__cabecera p { font-size: 17px; line-height: 26px; } }
/* Una lista con ladillos: cada punto empieza con su idea en negrita, en su propio renglón. */
.lista-ladillos > li > strong:first-child { display: block; margin-bottom: var(--espacio-1); font: 650 19px/26px var(--font-sans); letter-spacing: -0.01em; }
/* Las notas de fuente pesan menos que el contenido: el chip sin borde, sobre un fondo apagado. */
.tlqp-nota .tlqp-chip { border-color: transparent; background: var(--superficie-hundida); }

/* ==== 3. Sin iconos de adorno; la muestra de color =================================================================
   La marca final no usa iconos de adorno: el único signo es el ticket con el %. Queda la flecha funcional
   (<Icono nombre="flecha" />, components/Icono.astro), del color del texto. Donde una lista mezcla familias, cada
   línea lleva delante una muestra cuadrada de su color (.muestra-familia), junto a su nombre: el color identifica. */
.icono { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
.muestra-familia { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 2px; background: var(--familia); vertical-align: 0.05em; }

/* ==== 4. Bandas: el fondo de la sección cambia de lado a lado ========================================================
   El fondo se pinta con border-image por fuera de la caja (no ensancha la página ni la caja: la rejilla sigue igual y
   nada se desplaza de lado). Cuatro tonos, cada uno con su trabajo:
     superficie   datos y tablas: un descanso claro entre secciones de texto (cualquier número por página, nunca dos seguidas)
     tinta        el momento fuerte: una por página como mucho (.tema-invertido: en oscuro es clara)
     amarilla     la llamada a la acción: una por página, al final (la de <Llamada>)
     familia      la apertura de una ficha: el papel, con una raya fina del color de su familia arriba
   En una página con índice lateral (fichas, metodología, /lo-que-recibes/), la banda se queda en su columna: el fondo
   sale medio canal por cada lado de la columna de lectura, igual por los dos, y el índice se queda sobre el papel. Por
   debajo de 60em, una sola columna, va de lado a lado como en las demás páginas. */
.banda, .bloque--banda {
  --banda-fondo: var(--superficie);
  --fondo-tabla: var(--banda-fondo);
  border-image: linear-gradient(var(--banda-fondo), var(--banda-fondo)) fill 0 / 0 / 0 100vw;
}
.banda--superficie, .bloque--superficie { --banda-fondo: var(--superficie); }
/* La de tinta, en el carbón de la marca (banda-fuerte: con la página en claro, #2D2D2D; en oscuro, el papel claro). */
.banda--tinta, .bloque--tinta { --banda-fondo: var(--banda-fuerte); }
.banda--amarilla, .bloque--amarilla { --banda-fondo: var(--subrayador-suave); }
/* La de familia, sin el fondo suave de la familia (la dueña, 19-10-2026: «no es atractivo»): el papel, con una raya fina
   del color de la familia de lado a lado arriba. La familia se ve en esa raya, en su etiqueta y en las rayas de sus cifras. */
.banda--familia, .bloque--familia {
  --banda-fondo: var(--papel);
  border-image: linear-gradient(var(--familia) 0 4px, var(--banda-fondo) 4px) fill 0 / 0 / 0 100vw;
}
.banda { padding-block: var(--espacio-10); }
@media (min-width: 50em) { .banda { padding-block: var(--espacio-12); } }
@media screen and (min-width: 60em) {
  .con-indice__bloques .banda, .con-indice__bloques > .bloque--banda { border-image-outset: 0 calc(var(--canal) / 2); }
}
/* Una banda dentro de un bloque: el momento fuerte de un bloque que tiene más cosas (la cuña fiscal en /paises/, la cifra
   de cada provincia frente a la de España). Es un hijo directo del <Bloque> con `ancho-total`: ocupa las dos pistas (en
   una página con índice lateral, la columna de lectura) y su fondo sale como el de cualquier banda; por dentro puede
   seguir la rejilla de la página (grid-template-columns: var(--pistas)). Lo que va después, con aire. */
.bloque > .banda + * { margin-top: var(--espacio-6); }
/* Lo que va dentro de una banda superficie no puede ser del mismo blanco: las cajas claras bajan al papel. */
:is(.banda--superficie, .bloque--superficie) :is(.ejemplo, .recuadro--ejemplo, .calc-grupo .tarjeta-enlace, .dato-cruzado, .tlqp-ticket:not(.tlqp-ticket--amarillo) > .tlqp-ticket__borde) { background: var(--papel); }
:is(.banda--superficie, .bloque--superficie) .tlqp-ticket:not(.tlqp-ticket--amarillo) .tlqp-ticket__onda-papel { fill: var(--papel); }

/* ==== 5. Bloque: titular con su raya de color, cifra subrayada en el titular y bandas ================================
   <Bloque titulo="…" destacar="197.000 €" banda="superficie|tinta|amarilla|familia"> (components/Bloque.astro). */
/* La raya de sección (marca final): encima de cada titular de bloque, una raya gruesa y corta del color de su familia (o
   de tinta, sin familia). Es la señal de que empieza una sección, en el sitio donde la marca 2 ponía un icono. */
.bloque__cabecera > h2::before { content: ""; display: block; width: 44px; height: 6px; margin-bottom: var(--espacio-4); background: var(--familia); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bloque__cabecera h2 > .tlqp-subrayado { font-weight: 860; }
/* La cifra del titular en la tinta de su familia (<Bloque destacar="…" marca="familia">): sin subrayado. */
.bloque__cabecera h2 > .bloque__cifra { font-weight: 860; color: var(--familia-tinta); white-space: nowrap; }
.bloque--banda { border-top: 0; padding-block: var(--espacio-12); }
@media (min-width: 50em) { .bloque--banda { padding-block: var(--espacio-16); } }
/* Lo que sigue a una banda no lleva filete: el cambio de fondo ya separa. */
:is(.banda, .bloque--banda) + :is(.bloque, .banda, .bloque--banda), .bloque--banda + * > .bloque:first-child { border-top: 0; }
/* Un bloque breve (una frase o un párrafo corto: «Cómo se paga», «Dónde se paga»): menos aire y el titular más pequeño,
   para que no pese lo mismo que una sección entera. <Bloque breve>. */
.bloque--breve { padding-block: var(--espacio-6); }
@media (min-width: 50em) { .bloque--breve { padding-block: var(--espacio-8); } }
.bloque--breve > .bloque__cabecera > h2 { font-size: 24px; line-height: 30px; }
.bloque--breve > .bloque__cabecera > h2::before { width: 32px; height: 5px; margin-bottom: var(--espacio-3); }
@media screen and (min-width: 60em) {
  :where(:not(.con-indice__bloques)) > .bloque--breve > .bloque__cabecera > h2 { font-size: 24px; line-height: 30px; }
}

/* En la banda de tinta, el titular más grande, con la raya de sección en amarillo y, junto a él (en el rail, desde 60em),
   el símbolo del logo (<Bloque banda="tinta"> lo pone con <TicketMarca>). Es decorativo: en una columna no sale. */
.bloque--tinta > .bloque__cabecera > h2 { font-weight: 860; }
.bloque--tinta > .bloque__cabecera > h2::before { background: var(--subrayador); }
.bloque__titular { display: block; }
/* El símbolo de la marca final (TicketMarca.astro, cliente/_marca/isotipo.tsx): el papel amarillo con su contorno, y el
   «%», en el negro que va sobre el amarillo en los dos temas. */
.ticket-marca { display: block; overflow: visible; }
.ticket-marca__papel { fill: var(--subrayador); stroke: var(--sobre-subrayador); stroke-linejoin: round; }
.ticket-marca__signo { fill: none; stroke: var(--sobre-subrayador); }
.ticket-marca__signo--macizo { fill: var(--sobre-subrayador); stroke: none; }
.ticket-marca__raya { fill: none; stroke: var(--sobre-subrayador); stroke-linecap: round; }
/* Después de .ticket-marca (que lo pone en bloque): en una columna, el del titular no sale. */
.ticket-marca.bloque__ticket { display: none; }
@media screen and (min-width: 60em) {
  /* Una columna: la raya, el texto (.bloque__titular, una sola caja) y el símbolo. */
  :where(:not(.con-indice__bloques)) > .bloque--tinta > .bloque__cabecera > h2 { display: flex; flex-direction: column; align-items: flex-start; }
  :where(:not(.con-indice__bloques)) > .bloque--tinta > .bloque__cabecera > h2 > .ticket-marca.bloque__ticket { display: block; width: 72px; height: auto; margin-top: var(--espacio-10); }
}
@media screen and (min-width: 60em) {
  :where(:not(.con-indice__bloques)) > .bloque--tinta > .bloque__cabecera > h2 { font-size: clamp(30px, 3.2vw, 40px); }
}

/* ==== 6. En 30 segundos: de tres a cinco cifras que se entienden sin leer nada más =================================
   <EnTreintaSegundos cifras={[…]} /> (components/EnTreintaSegundos.astro). Va después de la portadilla, en una banda
   superficie (o dentro de la apertura de una ficha). Marca final: la cifra destacada va en el ticket amarillo del kit
   (TicketAmarillo.astro) y las demás, sin caja, cada una debajo de una raya gruesa del color de su familia (o de tinta):
   la cifra que importa salta a la vista y el color dice de qué es cada una. */
.treinta { display: grid; gap: var(--espacio-6); }
.treinta__titulo { display: flex; align-items: center; gap: var(--espacio-3); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta); }
.treinta__titulo::before { content: ""; flex: none; width: 28px; height: 6px; background: var(--subrayador); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.treinta__cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--espacio-8) var(--espacio-6); margin: 0; padding: 0; list-style: none; }
.treinta__cifra { position: relative; display: grid; align-content: start; gap: var(--espacio-2); padding-top: var(--espacio-4); border-top: 6px solid var(--familia); container-type: inline-size; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* La destacada: el ticket ocupa la columna; la cifra se mide con lo que deja el ticket (su papel es el contenedor). */
.treinta__cifra--ticket { padding-top: 0; border-top: 0; container-type: normal; }
.treinta__ticket .tlqp-ticket__papel { container-type: inline-size; padding-block: var(--espacio-3) var(--espacio-4); }
.treinta__valor { margin: 0; font: 860 clamp(38px, 4.6vw, 54px)/1.02 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
/* La cifra cabe siempre en su columna: el componente pone en --treinta-em lo que mide en em el trozo más largo que no se
   parte («1.092.000 €»), y el cuerpo baja lo justo para que quepa (100cqi es el ancho de la columna de cada cifra, o del
   papel del ticket). El mismo cuerpo en todas las cifras del bloque, y nunca menos de 28 px. */
@supports (width: 1cqi) {
  .treinta__valor { font-size: max(28px, min(clamp(38px, 4.6vw, 54px), 100cqi / var(--treinta-em, 5.8))); }
}
.treinta__unidad { display: block; margin-top: var(--espacio-1); font: 760 19px/24px var(--font-sans); letter-spacing: -0.01em; }
/* Repartida entre sus renglones (`balance`), como un titular corto. */
.treinta__frase { margin: 0; font: 450 17px/25px var(--font-sans); text-wrap: balance; }
.treinta__ticket .treinta__frase { padding-top: var(--espacio-2); border-top: 3px solid var(--fijo-tinta); }
.treinta__notas { display: grid; gap: var(--espacio-2); }
/* Con cuatro, las cuatro en fila o dos y dos (el interruptor de sitio.css, «Tarjeta-enlace»). */
.treinta__cifras:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 230px), clamp(calc(25% - 18px - 1px), calc((968px - 100%) * 999), calc(50% - 12px - 1px))), 1fr)); }
/* Con cinco cifras, como mucho tres por fila (no cuatro y una sola). */
.treinta__cifras:has(> li:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 230px), calc((100% - 2 * var(--espacio-6)) / 3 - 1px)), 1fr)); }
/* En el móvil (ronda 23, «de un vistazo»): la primera cifra, en su ticket; las demás, en filas bajas, la cifra a la
   izquierda y su frase al lado, con una raya del color de su familia a la izquierda. La fila es flexible y con bases en
   em: con la letra ampliada, la frase pasa debajo de la cifra sola, sin partir palabras. */
@media (max-width: 39.99em) {
  .treinta__cifras { gap: 0; }
  .treinta__cifras > .treinta__cifra:first-child { margin-bottom: var(--espacio-5); }
  .treinta__cifras > .treinta__cifra:not(:first-child) { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--espacio-1) var(--espacio-4); padding: var(--espacio-3) 0 var(--espacio-3) var(--espacio-4); border-top: var(--grosor-linea) solid var(--linea); box-shadow: inset 5px 0 0 var(--familia); }
  .treinta__cifras > .treinta__cifra:not(:first-child) .treinta__valor { flex: 1 0 5.6em; margin-top: 0; font-size: 26px; line-height: 1.1; }
  .treinta__cifras > .treinta__cifra:not(:first-child) .treinta__unidad { font-size: 15px; line-height: 20px; }
  .treinta__cifras > .treinta__cifra:not(:first-child) .treinta__frase { flex: 1 1 10.5em; font-size: 15px; line-height: 21px; }
  /* Si la frase es larga, debajo de la cifra y a lo ancho: al lado quedaba en una columna de seis o siete renglones. */
  .treinta__cifras > .treinta__cifra--larga:not(:first-child) .treinta__frase { flex-basis: 100%; }
}

/* ---- Lista de temas: tres o cuatro cosas que son cada una un tema (pensión, sanidad, educación) -----------------
   <ul class="lista-iconos"><li data-familia="…"><p class="lista-iconos__titulo">…</p><p class="lista-iconos__cifra">…</p>
   <p class="lista-iconos__texto">…</p></li></ul>. (Se sigue llamando así; desde la marca final no lleva iconos: cada
   tema empieza con una raya gruesa de su color, o de tinta.) */
.lista-iconos { display: grid; gap: var(--espacio-8); margin: 0; padding: 0; list-style: none; }
.lista-iconos > li { display: grid; gap: var(--espacio-1); align-content: start; padding-top: var(--espacio-4); border-top: 6px solid var(--familia); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lista-iconos > li > * { margin: 0; }
.lista-iconos__titulo { font: 760 19px/26px var(--font-sans); letter-spacing: -0.015em; color: var(--familia-tinta); }
.lista-iconos__cifra { font: 860 clamp(30px, 4vw, 40px)/1.05 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.lista-iconos__texto { font: var(--tipo-cuerpo-lectura); text-wrap: pretty; }

/* ---- Razones: una lista numerada de ideas de peso (en la banda de tinta, el momento fuerte) ----------------------
   <ol class="razones"><li><strong>La idea.</strong> La explicación.</li></ol>. El número, grande y del color de la familia. */
.razones { display: grid; gap: var(--espacio-6) var(--espacio-8); margin: 0; padding: 0; list-style: none; counter-reset: razon; }
.razones > li { position: relative; padding-top: var(--espacio-4); padding-left: 0; border-top: var(--grosor-control) solid var(--tinta); font: var(--tipo-cuerpo); counter-increment: razon; text-wrap: pretty; }
.razones > li::before { content: counter(razon, decimal-leading-zero); display: block; margin-bottom: var(--espacio-2); font: 860 22px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--familia-tinta); }
.razones > li > strong:first-child { display: block; margin-bottom: var(--espacio-2); font: 760 20px/27px var(--font-sans); letter-spacing: -0.01em; }
@media (min-width: 46em) { .razones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==== 7. Cifra destacada: una cifra grande en medio del texto ========================================================
   <CifraDestacada valor="21 %" texto="…" /> (components/CifraDestacada.astro). Una cada dos o tres pantallas. */
/* La cifra y su frase, en fila si a la frase le quedan 16 em; si no (una cifra larga en la columna de lectura, o la letra
   ampliada), la frase va debajo, a lo ancho: nunca una columna de una o dos palabras al lado de la cifra. */
.cifra-destacada { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-2) var(--espacio-6); margin: 0; padding-left: calc(var(--espacio-5) + 6px); }
.cifra-destacada::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; border-radius: 3px; background: var(--familia); }
.cifra-destacada > * { min-width: 0; }
.cifra-destacada__valor { margin: 0; font: 860 clamp(48px, 7vw, 76px)/0.98 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.cifra-destacada__valor .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; }
.cifra-destacada--familia .cifra-destacada__valor { color: var(--familia-tinta); }
.cifra-destacada__texto { flex: 1 1 16em; margin: 0; font: 450 19px/28px var(--font-sans); text-wrap: balance; }
.cifra-destacada__texto b { font-weight: 760; }
/* Dentro del texto corrido (<Prosa>), con más aire arriba y abajo que un párrafo: es una pausa. */
.prosa > .cifra-destacada { margin-block: var(--espacio-8); }
.prosa > .cifra-destacada:first-child { margin-top: 0; }
.prosa > .cifra-destacada:last-child { margin-bottom: 0; }

/* ==== 8. Recuadros con intención ====================================================================================
   <Recuadro tipo="ejemplo|ojo|dato|mas"> (components/Recuadro.astro). Cada uno con su rótulo en versales, su forma y su
   color (sin iconos desde la marca final):
     ejemplo   un trozo de ticket: blanco, borde de tinta, esquinas rectas, la cuenta en grande
     ojo       lo que hay que tener en cuenta: fondo amarillo suave y una raya amarilla gruesa a la izquierda
     dato      una cifra que no es del texto: fondo de la familia y la cifra grande
     mas       adónde ir: entre dos filetes, con flecha */
.recuadro { display: grid; gap: var(--espacio-3); padding: var(--espacio-5); }
.recuadro__rotulo { display: flex; align-items: center; gap: var(--espacio-2); margin: 0; font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; }
.recuadro__cuerpo { display: grid; gap: var(--espacio-3); }
.recuadro__cuerpo > * { margin: 0; }
.recuadro--ejemplo { border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-s); background: var(--superficie); }
.recuadro--ejemplo .recuadro__rotulo { padding-bottom: var(--espacio-3); border-bottom: var(--grosor-control) dashed var(--tinta); }
.recuadro--ejemplo .recuadro__cuerpo { font: 650 19px/28px var(--font-sans); letter-spacing: -0.005em; }
.recuadro--ojo { padding-left: calc(var(--espacio-5) + 2px); border-left: 8px solid var(--subrayador); border-radius: 0 var(--radio-m) var(--radio-m) 0; background: var(--subrayador-suave); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.recuadro--ojo .recuadro__rotulo { color: var(--tinta); }
/* Un «Ojo» compacto: dentro de una ficha o tarjeta que va en fila con otras. Sin el fondo amarillo: la raya amarilla y un
   filete encima. */
.recuadro--ojo.recuadro--compacto { padding: var(--espacio-3) 0 0 var(--espacio-4); border-top: var(--grosor-linea) solid var(--linea); border-left-width: 5px; border-radius: 0; background: none; }
.recuadro--compacto .recuadro__cuerpo { font: var(--tipo-cuerpo); }
.recuadro--dato { border-radius: var(--radio-l); background: var(--familia-suave); }
.recuadro--dato .recuadro__rotulo { color: var(--familia-tinta); }
.recuadro__cifra { margin: 0; font: 860 clamp(40px, 6vw, 56px)/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.recuadro--mas { padding-inline: 0; border-block: var(--grosor-control) solid var(--tinta); }
.recuadro--mas .recuadro__cuerpo a { font-weight: 760; }
.recuadro--mas ul { display: grid; gap: var(--espacio-1); margin: 0; padding: 0; list-style: none; }
.recuadro--mas li { display: flex; align-items: baseline; gap: var(--espacio-2); }
.recuadro--mas li a { display: inline-flex; align-items: center; min-height: 40px; }
/* Las reglas de imparcialidad son frases, no enlaces: en flex, la negrita y el resto de la frase hacían dos columnas. */
.imparcialidad li { display: block; }
.imparcialidad li a { display: inline; min-height: 0; }

/* ==== 9. Detalle a demanda: lo técnico, plegado, con un resumen que se ve =========================================
   <Detalle titulo="Qué simplificamos" resumen="Cinco supuestos del cálculo"> (components/Detalle.astro). Los plegables
   de las fichas (.plegable) se pintan igual. Funciona sin JavaScript: es un <details>. */
.detalle { max-width: var(--ancho-lectura); border-top: var(--grosor-linea) solid var(--linea); }
.detalle:last-child, .detalle:has(+ :not(.detalle)) { border-bottom: var(--grosor-linea) solid var(--linea); }
.detalle + .detalle { margin-top: 0; }
/* El título y el resumen ocupan el resumen entero, menos el hueco del signo, que va encima, a la derecha y centrado en
   alto: sin columna propia, un desplegable a lo ancho (`ancho-total`, una <TablaPlegada> de lado a lado) no deja su
   título a medias. */
.detalle > summary { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: var(--espacio-1); min-height: 60px; padding: var(--espacio-3) calc(32px + var(--espacio-6)) var(--espacio-3) 0; cursor: pointer; list-style: none; }
.detalle > summary::-webkit-details-marker { display: none; }
.detalle > summary::after { content: "+"; position: absolute; top: 50%; right: var(--espacio-2); display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px; border: var(--grosor-control) solid var(--tinta); border-radius: 50%; font: 450 22px/1 var(--font-sans); }
.detalle[open] > summary::after { content: "−"; background: var(--tinta); color: var(--papel); }
.detalle > summary:hover { background: var(--subrayador-suave); }
.detalle__titulo { grid-column: 1; font: 760 17px/24px var(--font-sans); text-wrap: balance; }
.detalle__resumen { grid-column: 1; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.detalle__cuerpo { display: grid; gap: var(--espacio-4); padding: var(--espacio-2) 0 var(--espacio-8) var(--espacio-4); border-left: var(--grosor-control) solid var(--familia); margin-left: 2px; }
.detalle__cuerpo > * { min-width: 0; }
/* Un grupo de detalles seguidos comparte los filetes. */
.detalles { display: grid; max-width: var(--ancho-lectura); }
/* Una tabla larga plegada (components/datos/TablaPlegada.astro): ocupa lo que ocupe la tabla y va sin filete al lado. */
.tabla-plegada.detalle { max-width: 100%; border-bottom: var(--grosor-linea) solid var(--linea); }
.tabla-plegada > .detalle__cuerpo { gap: var(--espacio-4); padding-left: 0; border-left: 0; margin-left: 0; }
.tabla-plegada > .detalle__cuerpo > * { min-width: 0; }

/* ==== 10. Fuentes: el resumen a la vista y la lista entera plegada ================================================== */
.fuentes-resumen { display: grid; gap: var(--espacio-3); max-width: var(--ancho-lectura); }
.fuentes-resumen__frase { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-1) var(--espacio-2); margin: 0; font: var(--tipo-cuerpo); }
.fuentes-resumen__cuenta { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.fuentes-resumen__cuenta li { display: inline-flex; align-items: center; gap: var(--espacio-2); font: var(--tipo-cuerpo-pequeno); }
.fuentes-resumen__cuenta b { font: 760 15px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.fuentes-resumen .detalle__cuerpo .fuentes { gap: var(--espacio-3); }

/* ==== 11. Índice con progreso de lectura ===========================================================================
   cliente/sitio.ts pone --progreso (de 0 a 1) en el <nav> mientras se lee. En el rail, una pista vertical junto a los
   enlaces que se llena de tinta; en la tira de arriba (móvil, y /datos/), una raya bajo la tira. El enlace del apartado
   que se lee sigue con su única señal, el subrayado: la pista y la raya van en la lista y en el <nav>, nunca en el enlace. */
.indice-pegado { background-image: linear-gradient(var(--tinta), var(--tinta)); background-repeat: no-repeat; background-position: left bottom; background-size: calc(var(--progreso, 0) * 100%) 3px; }
@media screen and (min-width: 60em) {
  .con-indice:not(.con-indice--tira) > .indice-pegado { background-image: none; }
  .con-indice:not(.con-indice--tira) .indice-pegado ol { position: relative; padding-left: var(--espacio-5); }
  .con-indice:not(.con-indice--tira) .indice-pegado ol::before,
  .con-indice:not(.con-indice--tira) .indice-pegado ol::after { content: ""; position: absolute; top: var(--espacio-3); bottom: var(--espacio-3); left: 0; width: 3px; border-radius: 2px; background: var(--linea); }
  .con-indice:not(.con-indice--tira) .indice-pegado ol::after { background: var(--tinta); transform: scaleY(var(--progreso, 0)); transform-origin: top; }
  .con-indice:not(.con-indice--tira) .indice-pegado li { position: relative; }
  /* El punto del apartado que se lee, sobre la pista (en el <li>, no en el enlace). */
  .con-indice:not(.con-indice--tira) .indice-pegado li:has(> a[aria-current])::before { content: ""; position: absolute; z-index: 1; top: 50%; left: calc(-1 * var(--espacio-5) - 3px); width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--subrayador); box-shadow: 0 0 0 2px var(--sobre-subrayador); }
  .con-indice:not(.con-indice--tira) .indice-pegado__titulo { padding-left: var(--espacio-5); }
}
@media (prefers-reduced-motion: no-preference) {
  .con-indice:not(.con-indice--tira) .indice-pegado ol::after { transition: transform 120ms linear; }
}

/* ==== 12. Tarjetas de color y «Sigue por aquí» =====================================================================
   <TarjetaEnlace … familia="consumo" antetitulo="Consumo y energía" /> y <SiguePorAqui tarjetas={…} />. Sin caja (Julián,
   30-10-2026, Interfaz/bloques/tarjeta-enlace, variante C «Brocha»: la caja redondeada con su raya de color se leía «muy
   IA»): cada tarjeta va suelta en la página, como un titular, con un filete fino arriba y un trazo corto de brocha en el
   color de su familia (en amarillo, si no tiene); al pasar el ratón, el nombre se subraya en ese color. En /calculadoras/
   las 35 van en tique (calculadoras.css). El antetítulo, en la tinta de la familia; la flecha, en tinta. */
.tlqp a.tarjeta-enlace { position: relative; grid-template-columns: minmax(0, 1fr); padding: calc(var(--espacio-5) + 18px + var(--espacio-3)) 0 var(--espacio-2); border-top: var(--grosor-linea) solid var(--linea); }
.tlqp a.tarjeta-enlace::before { content: ""; position: absolute; top: var(--espacio-5); left: 0; width: 72px; height: 18px; background: var(--familia); -webkit-mask: var(--brocha-corta); mask: var(--brocha-corta); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tlqp a.tarjeta-enlace:not([data-familia])::before { background: var(--subrayador); }
.tarjeta-enlace__cabeza { display: flex; align-items: center; gap: var(--espacio-3); margin-bottom: var(--espacio-1); }
.tarjeta-enlace__antetitulo { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--familia-tinta); }
.tlqp a.tarjeta-enlace:hover .tarjeta-enlace__titulo { text-decoration: underline; text-decoration-color: var(--familia); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.tlqp a.tarjeta-enlace:not([data-familia]):hover .tarjeta-enlace__titulo { text-decoration-color: var(--subrayador); }
/* La flecha, abajo a la derecha. Lo que va justo antes (el texto, el dato o el titular, lo que cierre la tarjeta) deja
   su hueco a la derecha: su último renglón no llega a la flecha, sea cual sea el ancho. */
.tarjeta-enlace__flecha { position: absolute; right: 0; bottom: var(--espacio-2); width: 20px; height: 20px; color: var(--tinta); }
.tlqp a.tarjeta-enlace:hover .tarjeta-enlace__flecha { color: var(--tinta); }
.tlqp a.tarjeta-enlace > :has(+ .tarjeta-enlace__flecha) { padding-right: calc(20px + var(--espacio-3)); }
.sigue .tarjeta-enlace__titulo { font-size: 21px; line-height: 26px; }
/* En la columna de lectura (una página con índice lateral), «Sigue por aquí» es una lista: una tarjeta por fila, con la
   flecha a la derecha. */
.con-indice__bloques .enlaces-rejilla.sigue { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) {
  .tlqp .con-indice__bloques .sigue a.tarjeta-enlace { padding-right: var(--espacio-12); }
  .con-indice__bloques .sigue .tarjeta-enlace__flecha { top: 50%; bottom: auto; margin-top: -7px; }
  .tlqp .con-indice__bloques .sigue a.tarjeta-enlace > :has(+ .tarjeta-enlace__flecha) { padding-right: 0; }
}

/* ---- Barras por familia: <Barras> con `familia` en cada fila (el reparto de una vida o de la recaudación por familias:
   la portada, /impuestos/, el catálogo, cada provincia). La barra, del color de su familia, y delante del nombre un
   cuadrado de ese color (la familia se ve aunque su barra sea una raya). Las filas aparte siguen rayadas y la tuya,
   amarilla. */
.tlqp-barras--familias .tlqp-barras__pista { height: 20px; }
.tlqp-barras--familias .tlqp-barras__nombre { font-weight: 760; }
.tlqp-barras__fila[data-familia]:not(.tlqp-barras__fila--aparte, .tlqp-barras__fila--tu) .tlqp-barras__barra { background: var(--familia); }
.tlqp-barras__muestra { display: inline-block; width: 12px; height: 12px; margin-right: var(--espacio-2); border-radius: 2px; vertical-align: 0; background: var(--familia); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.tlqp-barras__fila--aparte .tlqp-barras__muestra { background: repeating-linear-gradient(135deg, var(--tinta-suave) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px var(--tinta-suave); }

/* ---- Leyenda de familias: qué color es cada familia en una gráfica que los usa ---------------------------------- */
.leyenda-familias { display: flex; flex-wrap: wrap; gap: var(--espacio-2) var(--espacio-5); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo-pequeno); }
.leyenda-familias li { display: inline-flex; align-items: center; gap: var(--espacio-2); }
.leyenda-familias__muestra { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 4px; background: var(--familia); }
.leyenda-familias li:not([data-familia]) .leyenda-familias__muestra { background: var(--dato-neutro); }

/* ==== 13. Tablas: cebra suave, la fila importante resaltada y el total con peso ==================================== */
.tabla-datos tbody tr:nth-child(even) > * { background-color: color-mix(in srgb, var(--tinta) 4%, var(--fondo-tabla, var(--papel))); }
.tabla-datos tbody tr.fila-resaltada > * { background-color: var(--subrayador-suave); font-weight: 650; }
/* Una tabla que se apila en el móvil (cada fila, una ficha con su filete: <table class="tabla-datos tabla-apilable">; hoy,
   las de /paises/ y /corrupcion/, que se apilan por debajo de 40em en institucional.css) va sin cebra mientras está
   apilada: la de cada celda salía a trozos, y cada ficha ya se separa de la siguiente con su filete. La fila resaltada
   sigue en amarillo suave, en la ficha entera. */
@media (max-width: 40em) { .tabla-datos.tabla-apilable tbody tr:nth-child(even):not(.fila-resaltada) > * { background-color: transparent; } }
.tabla-datos tfoot > tr > * { padding-block: var(--espacio-3); font-size: 16px; }
.tabla-datos tfoot .num { font-weight: 760; }
.tabla-datos tbody th[scope="row"], .tabla-datos tbody td:first-child { padding-left: var(--espacio-2); }
.tabla-datos thead th:first-child, .tabla-datos tfoot > tr > :first-child { padding-left: var(--espacio-2); }

/* ==== 14. La llamada a la calculadora: el cartel amarillo del final =================================================
   La marca final en la calle es un cartel de precio: amarillo a toda la superficie y la letra en tinta. La llamada que
   cierra cada página es ese cartel, de lado a lado: el titular grande con su última palabra calada en amarillo sobre la
   brocha de tinta (.sobre-amarillo, como «pagas» en el logo a una tinta) y el botón en tinta con la letra amarilla. Es
   amarilla en los dos temas: la letra va siempre en tinta. */
.llamada { --fondo-tabla: var(--subrayador); position: relative; display: grid; gap: var(--espacio-5) var(--canal); justify-items: start; padding: var(--espacio-12) 0; border: 0; border-radius: 0; background: none; color: var(--fijo-tinta); border-image: linear-gradient(var(--subrayador), var(--subrayador)) fill 0 / 0 / 0 100vw; }
.llamada__titulo { margin: 0; font: 860 clamp(34px, 4.6vw, 56px)/1.02 var(--font-sans); letter-spacing: -0.03em; max-width: 12em; text-wrap: balance; }
.llamada__titulo .tlqp-subrayado { font-weight: 860; }
/* En los títulos (la portadilla, la llamada, los bloques y las figuras; 18-10-2026), la brocha de la palabra destacada no se come el espacio de
   antes: entre «recibe» y «a cambio» queda una décima de em de papel. */
:is(.portadilla h1, .llamada__titulo, .titular-2, .figura__titular) .tlqp-subrayado { margin-left: calc(0.1em - var(--brocha-izq)); }
.llamada p:not(.llamada__titulo) { margin: 0; color: var(--fijo-tinta); font: 450 19px/28px var(--font-sans); }
/* El botón, en tinta con la letra amarilla y la flecha amarilla (la tinta manda sobre el amarillo). */
.llamada .tlqp-boton--destacado, .tlqp .llamada a.tlqp-boton--destacado { min-height: 56px; padding-inline: var(--espacio-8) var(--espacio-6); border-color: var(--fijo-tinta); background: var(--fijo-tinta); color: var(--subrayador); font-size: 18px; box-shadow: none; }
/* Con el ratón encima sigue en tinta (en amarillo desaparecía sobre la banda amarilla): se levanta con una sombra y la flecha
   avanza. */
.llamada .tlqp-boton--destacado:hover, .tlqp .llamada a.tlqp-boton--destacado:hover { border-color: var(--fijo-tinta); background: var(--fijo-tinta); color: var(--subrayador); box-shadow: 0 0 0 3px var(--subrayador), 0 0 0 5px var(--fijo-tinta), 0 12px 24px -10px var(--fijo-tinta); transform: translateY(-1px); }
.llamada :focus-visible { outline-color: var(--fijo-tinta); }
@media screen and (min-width: 60em) {
  .llamada { grid-template-columns: var(--pistas); align-items: end; padding-block: var(--espacio-16); }
  .llamada > .llamada__titulo { grid-column: rail; grid-row: 1 / span 2; align-self: start; }
  .llamada > :not(.llamada__titulo) { grid-column: lectura; }
  .llamada p:not(.llamada__titulo) { font-size: 22px; line-height: 32px; }
}
/* La sección que la lleva al final de la página no deja papel entre la banda y el pie. */
main > .contenedor:last-child > .seccion:last-child:has(> .llamada), main > .contenedor.seccion:last-child:has(> .llamada) { padding-bottom: 0; }

/* ==== 14 bis. Lo que cuesta un trabajo: la barra y su leyenda (BarraCoste.astro, PorTi.tsx y las calculadoras del
   sueldo neto y del coste de un trabajador). Lo que llega, en el gris de contexto; el IRPF, en la tinta del azul de
   «Trabajo»; la cotización del trabajador, en el azul de datos; la de la empresa, en el azul suave con su borde. Cada
   tramo lleva su nombre, quién lo ingresa y su cifra en la leyenda: nadie depende del color (y la barra lo dice entero
   a quien no la ve, en su `aria-label`). El color es el de la familia «Trabajo», siempre con su nombre al lado. ======== */
.coste { display: grid; gap: var(--espacio-3); min-width: 0; container-type: inline-size; }
.coste > * { min-width: 0; margin: 0; }
.coste__frase { font: var(--tipo-cuerpo); text-wrap: pretty; }
.coste__frase strong { font-weight: 860; color: var(--grupo-trabajo-tinta); white-space: nowrap; }
.coste__barra { display: flex; gap: 2px; height: 28px; }
.coste__tramo { min-width: 6px; }
.coste__tramo:first-child { border-radius: 4px 0 0 4px; }
.coste__tramo:last-child { border-radius: 0 4px 4px 0; }
.coste__tramo--neto { background: var(--dato-neutro); }
.coste__tramo--irpf { background: var(--grupo-trabajo-tinta); }
.coste__tramo--cotizacion { background: var(--grupo-trabajo); }
.coste__tramo--empresa { background: var(--grupo-trabajo-suave); box-shadow: inset 0 0 0 2px var(--grupo-trabajo); }
.coste__leyenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-2) var(--espacio-6); margin: 0; padding: 0; list-style: none; }
@container (min-width: 30em) { .coste__leyenda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.coste__leyenda li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: var(--espacio-2); align-items: start; padding: 0; }
.coste__leyenda li::before { content: none; }
.coste__muestra { width: 14px; height: 14px; margin-top: 4px; border-radius: 2px; }
.coste__que { display: grid; font: var(--tipo-cuerpo-pequeno); }
.coste__nombre { font-weight: 650; }
.coste__que small { font: var(--tipo-nota); color: var(--tinta-suave); }
.coste__valor { font: var(--tipo-dato); font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En una ficha, el tramo de la ficha se señala en la leyenda: su nombre en la tinta de la familia y subrayado fino. */
.coste__leyenda li.coste__esta .coste__nombre { color: var(--grupo-trabajo-tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ==== 15. En el papel: sin bandas ni fondos (salvo las marcas de datos); lo plegado, abierto ========================== */
@media print {
  .banda, .bloque--banda, .llamada { border-image: none; padding-block: var(--espacio-6); }
  /* En el papel, un bloque va en bloque y no en rejilla: Chromium parte mal una rejilla entre dos hojas, y lo que sigue a
     una tabla larga se pintaba encima de su última fila (la nota de los tipos del IVA, en la hoja 7 de su ficha) y el
     titular de una provincia, encima de su frase. El titular no se separa de lo que lo sigue ni se parte (su icono se
     quedaba solo al pie de una hoja), y el pie de una tabla sale una vez, al final, no en cada hoja. */
  .bloque { display: block; }
  .bloque__cabecera, .bloque__cabecera > h2, .bloque > h3 { break-inside: avoid; break-after: avoid; }
  tfoot { display: table-row-group; }
  .indice-pegado { background-image: none; }
  .detalle > summary::after, .detalle[open] > summary::after { content: none; display: none; }
  /* Sin rejillas en lo plegado: Chromium parte mal una rejilla entre dos hojas y pisaba la última fila de una tabla. */
  .detalles, .detalle__cuerpo { display: block; }
  .detalle__cuerpo > * + * { margin-top: var(--espacio-3); }
  .detalle > summary { min-height: 0; padding-block: var(--espacio-2); padding-right: 0; }
  .treinta__cifra { break-inside: avoid; }
  /* Las marcas de datos que son fondos (las barras de <Barras> y de <Franja> con sus muestras, las de las leyendas, las
     barras de /a-donde-van-tus-impuestos/, /lo-que-recibes/ y /paises/) se imprimen aunque el navegador no imprima los
     fondos: sin ellas la gráfica sale en blanco, con sus cifras y sin sus barras. Lo respetan Chromium, Firefox y Safari. */
  :is(.tlqp-barras__barra, .tlqp-franja__tramo, .tlqp-franja__muestra, .leyenda-familias__muestra, .leyenda__muestra, .partida__barra, .saldo__barra, .celda-barra__barra, .intervalos__margen, .intervalos__punto, .lado__barra, .lado__muestra, .paga-recibe__barra, .paga-recibe__muestra, .coste__tramo, .coste__muestra) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* El guion de las listas y el filete de los ladillos, también. */
  :is(.prosa ul > li, .prosa h3, .ladillo) { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}


/* ==== Las cifras grandes que no cambian, con cifras proporcionales ====================================================
   Una cifra suelta en grande no tiene que alinearse con nada: con las tabulares, el «1» (ancho como un «0») dejaba un
   hueco delante y «1.504 €» parecía sangrada. Las que cambian mientras se escribe (la del panel de cada calculadora, la del
   resultado) y las que van en columna siguen tabulares. lib/medida.ts mide con las tabulares, que son más anchas: lo
   que cabe así, cabe. */
:root :is(.cien__valor, .vistazo__valor--cifra, .puerta__cifra, .familia__total, .ficha__cifra, .hay-en-la-web__cifra, .muestra-signos__cifra, .treinta__valor, .lista-iconos__cifra, .cifra-destacada__valor, .recuadro__cifra, .cifras-clave__valor, .tarjeta-dato__cifra, .calc-grande__cifra, .terr-recibe-vida b) { font-variant-numeric: proportional-nums; }