/* todoloquepagas — el rediseño del front (Interfaz/front/, auditoría de UX del 28-10-2026). La plantilla la carga siempre,
   la última, detrás de tokens, componentes, sitio, ritmo y las hojas de cada zona: lo de aquí manda.
   Solo tokens de la marca (tokens.css): ningún color suelto. Va por bloques, con los nombres de los de
   Interfaz/front/prototipo/css/prototipo.css: «COMÚN» (la cabecera, el pie y el plegable), «BUSCAR» e «ILUSTRACIONES»,
   y cada plantilla que se pasa del prototipo añade el suyo, con su nombre, entre «BUSCAR» e «ILUSTRACIONES».
   Cómo se pasa una página: Interfaz/front/laravel.md. */

/* ======================================================================================================================
   COMÚN · la cabecera, el pie y el plegable de todas las páginas (components/cabecera.blade.php, pie.blade.php y
   plegable.blade.php). Viene del bloque «COMÚN» de Interfaz/front/prototipo/css/prototipo.css, con las mismas clases.
   ====================================================================================================================== */
:root { --alto-cab: 64px; }
html { scroll-padding-top: calc(var(--alto-cab) + var(--espacio-4)); }

/* La cabecera fija: una barra de 64 px, sin JavaScript (sticky + popover). */
.cab { position: sticky; top: 0; z-index: 40; border-bottom: var(--grosor-linea) solid var(--linea); background: var(--papel); }
/* Con viewport-fit=cover (layouts/base), en horizontal la página no se mete bajo la muesca del iPhone. */
body.tlqp { padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px); }
.cab__barra { display: flex; align-items: center; gap: var(--espacio-3); height: calc(var(--alto-cab) - var(--grosor-linea)); }
.cab__logo { display: inline-flex; flex: none; align-items: center; min-height: var(--alto-control); margin-right: auto; }
.cab__logo img { display: block; width: auto; height: 28px; }
@media (min-width: 40em) { .cab__logo img { height: 32px; } }
.tlqp a.cab__logo:hover { background: transparent; }

.cab__nav { display: none; }
.cab__lista { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cab__boton, .cab__menu, .cab__cerrar { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--alto-control); padding-inline: var(--espacio-3); border: 0; border-radius: var(--radio-s); background: none; color: var(--tinta); font: 650 16px/20px var(--font-sans); white-space: nowrap; cursor: pointer; }
.cab__boton::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.cab__boton:hover, .cab__boton:has(+ :popover-open) { background: var(--subrayador-suave); }
.cab__boton:has(+ :popover-open)::after { transform: translateY(2px) rotate(-135deg); }
/* La entrada de la página que se está viendo, subrayada como en la web. */
.cab__grupo:has([aria-current="page"]) > .cab__boton { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* El desplegable: un popover de lado a lado bajo la barra. Se cierra con Escape, al pulsar fuera o al abrir otro. */
.cab__panel { position: fixed; inset: var(--alto-cab) 0 auto 0; width: auto; max-height: calc(100vh - var(--alto-cab)); max-height: calc(100dvh - var(--alto-cab)); margin: 0; padding: var(--espacio-8) 0 var(--espacio-10); overflow-y: auto; overscroll-behavior: contain; border: 0; border-bottom: var(--grosor-control) solid var(--tinta); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-elevada); }
.cab__columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-8) var(--canal); align-items: start; }
.cab__columnas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cab__columnas--calcula { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
/* «Dónde vives», la opción B (Interfaz/bloques/menu-donde-vives/): a la izquierda, el buscador grande de la portada
   (.heroe__buscar), con un rótulo de titular; a la derecha, una sobre otra, «O mira todas» y «O compara». Gana a --tres. */
.cab__columnas--lugar { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); row-gap: calc(var(--espacio-3) + var(--espacio-4)); }
.cab__columnas--lugar > .heroe__buscar { grid-row: span 2; max-width: none; margin: 0; gap: var(--espacio-3); }
.cab__columnas--lugar .heroe__buscar-rotulo { margin: 0; font: 860 24px/30px var(--font-sans); color: var(--tinta); }
.cab__lugar-movil { display: grid; gap: var(--espacio-3); padding-bottom: var(--espacio-3); }
.cab__seccion .cab__lugar-movil + .cab__enlaces { padding-bottom: var(--espacio-6); }
.cab__columnas--lugar .cab__nota, .cab__lugar-movil > .cab__nota { margin: 0; }
.cab__columna { display: grid; gap: var(--espacio-3); align-content: start; }
.cab__titulo, .cab__tema { display: flex; align-items: center; gap: var(--espacio-2); margin: 0; padding-bottom: var(--espacio-2); border-bottom: var(--grosor-control) solid var(--tinta); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.cab__enlaces { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.cab__enlaces--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--espacio-6); }
.cab__ancho { grid-column: 1 / -1; }
.tlqp .cab__enlaces a, .tlqp a.cab__destacado { display: flex; align-items: center; gap: var(--espacio-2); min-height: 40px; margin-inline: calc(-1 * var(--espacio-3)); padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio-s); color: var(--tinta); font: 650 16px/22px var(--font-sans); text-decoration: none; }
.tlqp .cab__enlaces--notas a, .tlqp a.cab__destacado { display: grid; gap: 2px; justify-items: start; }
.cab__texto { display: inline-flex; align-items: center; gap: var(--espacio-2); font: 650 17px/22px var(--font-sans); }
.cab__nota { font: var(--tipo-nota); color: var(--tinta-suave); }
.tlqp .cab__enlaces a:hover, .tlqp a.cab__destacado:hover { background: var(--subrayador-suave); color: var(--tinta); }
.tlqp .cab__enlaces a:hover :is(.cab__texto, strong), .tlqp .cab__enlaces a:not(:has(.cab__texto)):hover, .tlqp a.cab__destacado:hover .cab__texto,
.tlqp .cab a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* Si el enlace lleva nota debajo, solo se subraya el nombre (el subrayado del enlace bajaba también a la nota). */
.tlqp .cab a[aria-current="page"]:has(.cab__nota) { text-decoration: none; }
.tlqp .cab a[aria-current="page"] .cab__texto { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* La calculadora de toda una vida: la puerta grande del grupo, sobre el amarillo suave. */
.tlqp a.cab__destacado { margin: 0; padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-m); background: var(--subrayador-suave); }
.tlqp a.cab__destacado .cab__texto { font: 860 20px/26px var(--font-sans); }
.tlqp a.cab__destacado .cab__nota { font: var(--tipo-cuerpo-pequeno); color: var(--tinta); }
.cab__mas { margin: 0; font: 650 15px/22px var(--font-sans); }
.cab__mas a::after { content: " →"; }
/* Las 35, plegadas dentro del grupo: se ven las 8 más buscadas sin abrir nada. */
.cab__todas { grid-column: 1 / -1; border-top: var(--grosor-linea) solid var(--linea); }
.cab__todas > summary { display: flex; align-items: center; gap: var(--espacio-2); min-height: var(--alto-control); font: 760 16px/22px var(--font-sans); cursor: pointer; list-style: none; }
.cab__temas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--espacio-6); padding-block: var(--espacio-2) var(--espacio-4); }
.cab__temas .cab__enlaces a { min-height: 34px; padding-block: 5px; font: 500 15px/20px var(--font-sans); }
.cab__tema { border-bottom-color: var(--familia, var(--tinta)); color: var(--familia-tinta, var(--tinta-suave)); }
/* La muestra cuadrada de la familia, siempre con su nombre al lado. */
.cab__muestra { flex: none; width: 12px; height: 12px; background: var(--familia, var(--tinta)); }
[data-familia="trabajo"] { --familia: var(--grupo-trabajo); --familia-tinta: var(--grupo-trabajo-tinta); }
[data-familia="consumo"] { --familia: var(--grupo-consumo); --familia-tinta: var(--grupo-consumo-tinta); }
[data-familia="bienes"] { --familia: var(--grupo-bienes); --familia-tinta: var(--grupo-bienes-tinta); }
[data-familia="resto"] { --familia: var(--grupo-resto); --familia-tinta: var(--grupo-resto-tinta); }

/* El buscador: por GET, redondo, con la lupa delante (la de la web). */
.cab__buscar { display: flex; align-items: center; min-width: 0; min-height: var(--alto-control); border: var(--grosor-control) solid var(--linea-control); border-radius: var(--radio-pastilla); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.cab__buscar::before { content: ""; flex: none; width: 18px; height: 18px; margin-left: var(--espacio-4); background: var(--tinta-suave); -webkit-mask: var(--lupa) center / contain no-repeat; mask: var(--lupa) center / contain no-repeat; }
.cab__buscar:focus-within { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }
.cab__buscar input { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 var(--espacio-2) 0 var(--espacio-3); border: 0; background: transparent; color: var(--tinta); font: 450 16px/20px var(--font-sans); appearance: none; -webkit-appearance: none; }
/* Sin la caja ni la lupa propias del campo de búsqueda del iPhone y de Android, que se pintaban dentro de la nuestra. */
.cab__buscar input::-webkit-search-decoration { -webkit-appearance: none; }
.cab__buscar input::placeholder { color: var(--tinta-suave); opacity: 1; }
.cab__buscar input:focus { outline: none; }
.cab__buscar button { flex: none; align-self: stretch; margin: 3px; padding-inline: var(--espacio-4); border: 0; border-radius: var(--radio-pastilla); background: var(--inverso); color: var(--sobre-inverso); font: 760 15px/20px var(--font-sans); cursor: pointer; }
.cab__buscar button:hover { background: var(--subrayador); color: var(--sobre-subrayador); }
.cab__buscar--barra { display: none; flex: 0 1 220px; }
.cab__buscar--barra button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* El menú del móvil: también un popover, con el buscador arriba y los 5 grupos plegados (uno abierto cada vez). */
.cab__menu { padding-inline: var(--espacio-4); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-m); }
.cab__menu::after { content: "+"; width: 14px; font: 450 22px/20px var(--font-sans); text-align: center; }
.cab__menu:hover, .cab__menu:has(+ :popover-open) { background: var(--subrayador-suave); }
.cab__movil { position: fixed; inset: 0 0 auto 0; width: auto; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 0 var(--margen-lateral) var(--espacio-6); overflow-y: auto; overscroll-behavior: contain; border: 0; border-bottom: var(--grosor-control) solid var(--tinta); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-elevada); }
.cab__movil::backdrop { background: var(--inverso); opacity: 0.4; }
.cab__movil-cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--espacio-2); height: calc(var(--alto-cab) + var(--espacio-2)); background: var(--papel); }
.cab__movil-cabeza .cab__buscar { flex: 1 1 auto; }
/* Sin el botón a la vista, como en la barra: con él, el ejemplo se cortaba a media palabra («Impues», «Impuesto, munic»).
   Se busca con la tecla de buscar del teclado. */
.cab__movil-cabeza .cab__buscar button { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cab__cerrar { flex: none; padding-inline: var(--espacio-3); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cab__seccion { border-top: var(--grosor-linea) solid var(--linea); }
.cab__seccion > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font: 760 18px/24px var(--font-sans); cursor: pointer; list-style: none; }
.cab__seccion:has([aria-current="page"]) > summary { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cab__seccion .cab__enlaces { padding-bottom: var(--espacio-4); column-gap: var(--espacio-4); }
.cab__seccion .cab__enlaces a { min-height: 44px; font-size: 16px; }
.cab__proyecto { margin: 0; padding-top: var(--espacio-4); border-top: var(--grosor-control) solid var(--tinta); font: 650 15px/22px var(--font-sans); color: var(--tinta-suave); }
.cab__proyecto a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 64em) {
  .cab__nav { display: block; }
  .cab__buscar--barra { display: flex; }
  .cab__menu, .cab__movil { display: none; }
}
@media (min-width: 64em) and (max-width: 74.99em) {
  .cab__boton { padding-inline: var(--espacio-2); font-size: 15px; }
  .cab__buscar--barra { flex-basis: 150px; }
}

/* El pie: el de la web, con el mapa por los 5 grupos del menú más «El proyecto». */
.pie__cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espacio-4); }
.tlqp .pie__arriba { display: inline-flex; align-items: center; gap: var(--espacio-2); min-height: var(--alto-control); font: 760 15px/22px var(--font-sans); }
.pie__arriba::before { content: "↑"; }
@media (min-width: 22em) and (max-width: 63.99em) { .pie__mapa.tlqp-pie__mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pie__mapa .tlqp-pie__columna:first-child { grid-column: auto; } }
/* A seis columnas iguales (167 px) «Lo que cuestan las instituciones» se partía en dos renglones: desde 75em cada columna
   mide al menos lo que su enlace más largo (las seis suman 1.092 px de 1.120) y entre 64em y 75em van tres y tres. */
@media (min-width: 64em) { .pie__mapa.tlqp-pie__mapa { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--espacio-6); } }
@media (min-width: 75em) { .pie__mapa.tlqp-pie__mapa { grid-template-columns: repeat(6, minmax(max-content, 1fr)); } }
/* En el móvil, con tres niveles o más, la miga de la página actual se parte en otra línea y repite el título que va debajo */
@media (max-width: 39.99em) { .migas__lista li:last-child:nth-child(n+4) { display: none; } }

@media print { .cab__nav, .cab__menu, .cab__movil, .cab__buscar, .pie__arriba { display: none !important; } .cab { position: static; } }

/* ---- El plegable del front: un solo patrón para todos los <details> (Interfaz/front/plegables.md) -----------------
   Se suma a la clase del componente (.detalle, .tlqp-desplegable, .catalogo-familia…): class="detalle pliegue". La fila
   entera abre y cierra; el texto queda en la rejilla y la banda del hover sale 12 px a cada lado; el signo es uno solo,
   a la derecha y centrado en alto, y solo él cambia al abrir (+ en círculo → − sobre tinta). Se dibuja con dos
   rayas, no con la letra: queda centrado al píxel con cualquier fuente. */
.pliegue { --pliegue-signo: 32px; --pliegue-raya: 12px; --pliegue-sangria: var(--espacio-3); }
.pliegue--compacto { --pliegue-signo: 24px; --pliegue-raya: 10px; }
.tlqp .pliegue > summary { position: relative; margin-inline: calc(-1 * var(--pliegue-sangria)); padding-left: var(--pliegue-sangria); padding-right: calc(var(--pliegue-sangria) + var(--pliegue-signo) + var(--espacio-4)); border-radius: var(--radio-s); list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tlqp details.pliegue > summary::-webkit-details-marker { display: none; }
.tlqp details.pliegue > summary::before { content: none; }
.tlqp details.pliegue > summary::after { content: ""; position: absolute; top: 50%; right: var(--pliegue-sangria); display: block; width: var(--pliegue-signo); height: var(--pliegue-signo); margin: calc(var(--pliegue-signo) / -2) 0 0; box-sizing: border-box; border: var(--grosor-control) solid var(--tinta); border-radius: 50%; background: linear-gradient(currentColor 0 0) center / var(--pliegue-raya) 2px no-repeat, linear-gradient(currentColor 0 0) center / 2px var(--pliegue-raya) no-repeat; color: var(--tinta); grid-area: auto; transform: none; }
.tlqp details.pliegue[open] > summary::after { background-color: var(--tinta); background-size: var(--pliegue-raya) 2px, 2px 0; color: var(--papel); }
@media (hover: hover) { .tlqp .pliegue > summary:hover { background: var(--subrayador-suave); } }
.tlqp .pliegue > summary:focus-visible { outline: var(--grosor-foco) solid var(--foco); outline-offset: calc(-1 * var(--grosor-foco)); }
@media screen and (prefers-reduced-motion: no-preference) {
  .pliegue { interpolate-size: allow-keywords; }
  .pliegue > summary::after { transition: background-size 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
  .pliegue::details-content { block-size: 0; overflow-x: visible; overflow-y: clip; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete, overflow-y 0s allow-discrete; }
  /* Abierto del todo, sin recorte: lo que sobresale de él (un recuadro flotante, el globo de un mapa) se ve entero. El
     recorte solo hace falta mientras se abre (30-10-2026: tapaba el código de «Usa este gráfico» en «Para consultar»). */
  .pliegue[open]::details-content { block-size: auto; overflow-y: visible; transition: block-size 0.25s ease, content-visibility 0.25s allow-discrete, overflow-y 0s 0.25s allow-discrete; }
}
@media (forced-colors: active) { .tlqp details.pliegue > summary::after { border-color: CanvasText; color: CanvasText; } .tlqp details.pliegue[open] > summary::after { background-color: Canvas; } }

/* Sin palabras sueltas en las páginas ya pasadas al rediseño y en el pie: los párrafos no dejan una palabra sola en su
   última línea y los titulares, los resúmenes de los plegables y las notas del ticket se reparten en líneas parecidas.
   Al pasar una plantilla, su clase se añade a las dos listas (en el prototipo: .portada main, .pagina-impuestos…).
   «main .portada» da a la lista la especificidad del prototipo (0,1,1): con (0,1,0), la de sitio.css (que lleva
   «.llamada p:not(…)») ganaba y las notas del ticket salían con «pretty» en vez de «balance». */
:is(main .portada, main .pagina-calculadora, .buscar, .tlqp-pie) :is(p, li, dd, td, figcaption) { text-wrap: pretty; }
:is(main .portada, main .pagina-calculadora, .buscar) :is(h1, h2, h3, h4, .detalle__resumen, .tlqp-desplegable__titulo, .afecta__respuesta, .calc-tique__nota, .calc-panel__pie, .calc-nota-prototipo, .buscar__estado) { text-wrap: balance; }

/* El desplegable del manual (componentes.css) reservaba una columna para su «+»: con el patrón, el signo va encima. */
.tlqp .tlqp-desplegable.pliegue > summary { grid-template-columns: minmax(0, 1fr); }

/* ---- Los plegables que ya tenía la web, con el patrón -----------------------------------------------------------
   Su clase se queda y el signo, la banda y el foco son los del patrón: aquí solo se quita la columna que reservaban
   para su signo y se pasa el filete del resumen al <details>. Una plantilla que se rehaga puede afinarlo en su bloque. */
/* «Partida a partida» de «A dónde van» (destino.css): sin la columna del signo, que va encima. */
.tlqp .funcion.pliegue > summary { grid-template-columns: 48px minmax(0, 1fr) auto; }
.tlqp .funcion.pliegue > summary:hover .funcion__nombre { text-decoration: none; }
@media (max-width: 30em) { .tlqp .funcion.pliegue > summary { grid-template-columns: 40px minmax(0, 1fr) auto; } }
/* Las familias del catálogo (impuestos.css): el filete, en la familia; desde 60em, el signo de .catalogo-familia__resto
   se quita (con [open] volvía el del resumen y salían dos «−») y su hueco va dentro de la lectura, así el rail no encoge. */
.catalogo-familia.pliegue { border-top: var(--grosor-linea) solid var(--linea); }
.grupo-color__rotulo + .catalogo-familia.pliegue { border-top: 0; }
.tlqp .catalogo-familia.pliegue > summary { grid-template-columns: minmax(0, 1fr); border-top: 0; }
.tlqp .catalogo-familia.pliegue .catalogo-familia__resto::after { content: none; }
@media screen and (min-width: 60em) {
  .tlqp .catalogo-familia.pliegue > summary { grid-template-columns: var(--pistas); padding-right: var(--pliegue-sangria); }
  .tlqp .catalogo-familia.pliegue > summary > .catalogo-familia__resto { grid-template-columns: minmax(0, 1fr) 190px; padding-right: calc(var(--pliegue-signo) + var(--espacio-4)); }
}
/* Las familias de la portada y las del resultado de la calculadora (calculadora.css): sin la columna del signo. */
.tlqp .portada-familia.pliegue > summary { grid-template-columns: minmax(0, 1fr); }
.tlqp .calc-familias details.pliegue > summary { grid-template-columns: minmax(0, 1fr); }
/* ==================================================================== fin de COMÚN ================================ */

/* ======================================================================================================================
   BUSCADOR EN VIVO · lo común de todos los buscadores con JavaScript (resources/js/_buscador.js): las sugerencias bajo el
   campo en la cabecera, el menú del móvil, los desplegables, la portada y la ficha (paginas/buscar/sugerencias.blade.php),
   y las listas que se rehacen en /buscar/, /impuestos/ y /corrupcion/casos/. Sin JavaScript no sale nada de esto.
   ====================================================================================================================== */
/* Las sugerencias: un panel bajo el campo, del ancho del buscador, por encima de lo que haya debajo. */
:is(.cab__buscar, .tlqp-campo__caja):has(> .vivo) { position: relative; }
.vivo { position: absolute; z-index: 45; top: calc(100% + var(--espacio-2)); left: 0; right: 0; max-height: min(30rem, 70vh); max-height: min(30rem, 70dvh); padding: var(--espacio-2); overflow-y: auto; overscroll-behavior: contain; border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-m); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-elevada); text-align: left; }
/* En la barra el campo es estrecho (150-220 px): el panel, más ancho, sale hacia la izquierda desde su borde derecho. */
.cab__buscar--barra .vivo { left: auto; width: min(28rem, calc(100vw - 2 * var(--margen-lateral))); }
/* El menú del móvil y los desplegables tienen su propio desplazamiento: mientras hay sugerencias, llegan abajo y no las cortan. */
.cab__movil:has(.vivo:not([hidden])) { min-height: 100vh; min-height: 100dvh; }
.cab__panel:has(.vivo:not([hidden])) { min-height: min(40rem, calc(100vh - var(--alto-cab))); }
.vivo__estado, .vivo__vacio { margin: 0; padding: var(--espacio-2) var(--espacio-3); color: var(--tinta-suave); }
.vivo__estado { font: var(--tipo-nota); }
.vivo__vacio { font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.vivo__lista { display: grid; gap: var(--espacio-2); }
.vivo__grupo { display: grid; gap: 2px; }
/* El grupo, como los títulos de las columnas de los desplegables, con su número. */
.vivo__rotulo { display: flex; align-items: baseline; gap: var(--espacio-2); margin: 0; padding: var(--espacio-2) var(--espacio-3) 2px; font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.vivo__rotulo span { font-variant-numeric: tabular-nums; }
.tlqp a.vivo__opcion { display: grid; gap: 2px; align-content: center; min-height: 44px; padding: var(--espacio-2) var(--espacio-3); border-radius: var(--radio-s); color: var(--tinta); text-decoration: none; }
.vivo__titulo { font: 650 16px/22px var(--font-sans); }
.vivo__nota { font: var(--tipo-nota); color: var(--tinta-suave); }
/* Lo que más se acerca, con el destacado de la cabecera: el borde de tinta y el amarillo suave. */
.tlqp a.vivo__opcion--mejor { margin-bottom: 2px; border: var(--grosor-linea) solid var(--tinta); background: var(--subrayador-suave); }
.vivo__opcion--mejor .vivo__titulo { font-weight: 760; }
/* La elegida con las flechas lleva el foco aunque el foco siga en el campo: el fondo del hover y el borde del foco. */
.tlqp a.vivo__opcion:hover, .tlqp a.vivo__opcion[aria-selected="true"] { background: var(--subrayador-suave); color: var(--tinta); }
.tlqp a.vivo__opcion[aria-selected="true"] { box-shadow: inset 0 0 0 var(--grosor-control) var(--foco); }
/* Lo buscado, en negrita y subrayado con el amarillo de la marca: se lee igual en claro y en oscuro. */
.vivo mark { background: none; color: inherit; font-weight: 860; text-decoration: underline; text-decoration-color: var(--subrayador); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.tlqp a.vivo__todos { display: flex; align-items: center; gap: var(--espacio-2); margin-top: var(--espacio-1); border-top: var(--grosor-linea) solid var(--linea); border-radius: 0 0 var(--radio-s) var(--radio-s); font: 760 15px/22px var(--font-sans); }
.vivo__todos::after { content: "→"; }

/* Las listas que se rehacen en /buscar/ y /impuestos/: su envoltorio, con un id para sustituirlo, no cuenta en la rejilla. */
.en-vivo { display: contents; }

/* ==================================================================== fin de BUSCADOR EN VIVO ===================== */

/* ======================================================================================================================
   BUSCAR · /buscar/ (paginas/buscar.blade.php, App\Web\Buscador): la búsqueda de la cabecera, en el servidor. Arriba, lo que
   más se acerca; debajo, los grupos con el filete grueso de los títulos de columna del menú (variante A de
   Interfaz/bloques/buscador-resultados).
   ====================================================================================================================== */
/* Una sola pista que no crece con lo que lleva dentro. */
.buscar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-5); padding-block: var(--espacio-8) var(--espacio-16); }
.buscar .titular-1 { margin: 0; }
.buscar__campo { max-width: 640px; }
.buscar__estado { margin: 0; font: 650 18px/26px var(--font-sans); }
.buscar__n { font: var(--tipo-dato); color: var(--tinta-suave); }
.buscar__dato { font: var(--tipo-nota); color: var(--tinta-suave); }
.buscar__grupo { padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); }
.buscar__grupo-titulo { display: flex; align-items: baseline; gap: var(--espacio-3); margin: 0 0 var(--espacio-1); font: 760 19px/24px var(--font-sans); }
.buscar__filas { margin: 0; padding: 0; list-style: none; }
.buscar__filas > li { display: grid; gap: 2px var(--espacio-6); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
.buscar__filas > li > a { justify-self: start; font: 650 17px/24px var(--font-sans); overflow-wrap: anywhere; }
@media (min-width: 48em) { .buscar__filas > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; } }
/* Lo buscado (<mark>) solo se ve en el móvil, como en el desplegable (bloque «MÓVIL»): aquí, como el resto del título. */
.buscar__filas mark { background: none; color: inherit; }
.buscar__mas { border-bottom: var(--grosor-linea) solid var(--linea); }
.buscar__mas > summary { display: flex; align-items: center; min-height: var(--alto-control); font: 760 16px/22px var(--font-sans); }
.buscar__mas > .buscar__filas > li:last-child { border-bottom: 0; }

/* Sin resultados: la palabra parecida, en grande, y lo más buscado del menú. */
.buscar__quiza { margin: 0; font: 760 21px/28px var(--font-sans); }
.buscar__quiza .buscar__dato { display: block; margin-top: 2px; }
.buscar__mas-buscado { margin-top: var(--espacio-4); padding-top: var(--espacio-3); border-top: var(--grosor-control) solid var(--tinta); }
.buscar__menu { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }

/* Los destacados (paginas/buscar/destacados.blade.php): los lugares, en la escalera de administraciones, una línea que une
   los peldaños con un punto en cada uno (en vertical en el móvil), y en amarillo lo que se ha buscado; lo demás, sin caja,
   con el trazo de brocha de la tarjeta (ritmo.css, apartado 12). */
.buscar__mejor { display: grid; gap: var(--espacio-3); }
.buscar__mejor-titulo { margin: 0; font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.buscar__nivel { font: 500 13px/18px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-suave); }
.buscar__pone { max-width: 30em; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); text-wrap: pretty; }
.buscar__escalera { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.buscar__peldano { position: relative; padding: 0 0 var(--espacio-5) var(--espacio-10); }
.buscar__peldano::before { content: ""; position: absolute; top: 22px; bottom: 0; left: 7px; border-left: 2px solid var(--tinta); }
.buscar__peldano:last-child { padding-bottom: 0; }
.buscar__peldano:last-child::before { content: none; }
.buscar__peldano::after { content: ""; position: absolute; top: 6px; left: 0; width: 16px; height: 16px; border: 2px solid var(--tinta); border-radius: 50%; background: var(--papel); }
.buscar__peldano--encontrado::after { background: var(--subrayador); }
.tlqp .buscar__peldano > a { display: grid; justify-items: start; gap: 2px; color: var(--tinta); text-decoration: none; }
.buscar__lugar { font: 760 21px/28px var(--font-sans); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.buscar__peldano--encontrado .buscar__lugar { font-size: 26px; font-weight: 860; line-height: 32px; letter-spacing: -0.02em; }
.buscar__peldano--encontrado .tlqp-subrayado { --brocha-izq: 0.1em; --brocha-der: 0.16em; }
.tlqp .buscar__peldano > a:hover .buscar__lugar { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (min-width: 48em) {
  .buscar__escalera { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: var(--espacio-5); }
  .buscar__peldano, .buscar__peldano:last-child { padding: var(--espacio-10) 0 0; }
  .buscar__peldano::before { top: 7px; right: calc(-1 * var(--espacio-5)); bottom: auto; left: 22px; border-top: 2px solid var(--tinta); border-left: 0; }
  .buscar__peldano::after { top: 0; }
}
.buscar__fichas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3) var(--espacio-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .buscar__fichas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tlqp a.buscar__ficha { position: relative; display: grid; align-content: start; gap: var(--espacio-1); height: 100%; padding-top: calc(var(--espacio-4) + 18px + var(--espacio-3)); border-top: var(--grosor-linea) solid var(--linea); color: var(--tinta); text-decoration: none; }
.buscar__ficha::before { content: ""; position: absolute; top: var(--espacio-4); left: 0; width: 72px; height: 18px; background: var(--familia); -webkit-mask: var(--brocha-corta); mask: var(--brocha-corta); }
.buscar__ficha:not([data-familia])::before { background: var(--subrayador); }
.buscar__nombre { font: 860 26px/32px var(--font-sans); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tlqp a.buscar__ficha:hover { background: none; color: var(--tinta); }
.tlqp a.buscar__ficha:hover .buscar__nombre { text-decoration: underline; text-decoration-color: var(--familia); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.tlqp a.buscar__ficha:not([data-familia]):hover .buscar__nombre { text-decoration-color: var(--subrayador); }

/* Junto al titular de un municipio o de una comunidad: su comunidad y su comparador (components/portadilla-ambito.blade.php). */
.portadilla__ambito { display: flex; flex-wrap: wrap; gap: var(--espacio-3) var(--espacio-6); margin: var(--espacio-4) 0 0; padding: 0; list-style: none; }
.portadilla__ambito li { display: grid; gap: 2px; }
.tlqp .portadilla__ambito a { justify-self: start; font: 760 17px/24px var(--font-sans); }
.portadilla__ambito a::after { content: " →"; }
.portadilla__ambito span { font: var(--tipo-nota); color: var(--tinta-suave); }

/* ==================================================================== fin de BUSCAR =============================== */

/* ======================================================================================================================
   HOY · /hoy/ (paginas/hoy.blade.php, App\Web\Hoy): el destino del enlace del perfil en las redes. Arriba, calcular tu
   cifra, con el botón de la portada; debajo, cada pieza en su tarjeta con su cifra grande, y toda la tarjeta lleva a su
   página. 4-11-2026.
   ====================================================================================================================== */
.hoy { display: grid; justify-items: start; gap: var(--espacio-5); padding-block: var(--espacio-8) var(--espacio-16); }
.hoy > .titular-1, .hoy__entrada { margin: 0; }
.hoy__entrada, .hoy__vacio { max-width: var(--ancho-lectura); font: var(--tipo-entradilla); }
.hoy__lista { display: grid; gap: var(--espacio-3); width: 100%; max-width: 44rem; margin: var(--espacio-4) 0 0; padding: 0; list-style: none; }
.tlqp .hoy__pieza a { display: grid; gap: var(--espacio-1); padding: var(--espacio-4) var(--espacio-5); border: var(--grosor-linea) solid var(--linea); border-radius: var(--radio-m); background: var(--superficie); color: var(--tinta); text-decoration: none; }
.tlqp .hoy__pieza a:hover { border-color: var(--tinta); }
.hoy__titulo { font: 760 17px/24px var(--font-sans); }
.hoy__cifra { font: 860 clamp(28px, calc(18px + 2.6vw), 40px)/1.1 var(--font-sans); letter-spacing: -0.02em; }
.hoy__cifra--frase { font: 760 20px/26px var(--font-sans); letter-spacing: 0; }
.hoy__dice { font: var(--tipo-nota); }
.hoy__pagina { font: var(--tipo-nota); color: var(--tinta-suave); }
.hoy__pagina::after { content: "\00a0→"; }
@media (max-width: 39.99em) { .hoy { gap: var(--espacio-4); padding-block: var(--espacio-4) var(--espacio-8); } }

/* ==================================================================== fin de HOY ================================== */

/* ======================================================================================================================
   PORTADA Y CALCULADORA · la portada escaparate (/) y la calculadora (/calculadora/). Reservado para su agente: solo se escribe dentro de este bloque.
   ====================================================================================================================== */
/* El bloque «PORTADA · CALCULADORA» de prototipo.css, con las clases de las vistas: la clase de página de cada una va en
   un <div> que envuelve lo de su <main> (.portada en paginas/portada.blade.php, .pagina-calculadora en
   paginas/calculadora.blade.php), y el aviso de lo que pasa con las respuestas es .calc-guardado. */
/* La llamada del final, pegada al pie, como la de ritmo.css (main > .contenedor.seccion:last-child), que con el <div> de la
   página ya no es hija del <main>. */
:is(.portada, .pagina-calculadora) > .contenedor.seccion:last-child:has(> .llamada) { padding-bottom: 0; }

/* ---- La calculadora (calculadora.html; en Laravel, /calculadora/): la portada de la ronda 2, entera ----------
   Julián, 28-10-2026: «la página de calculadora tiene que ser lo que ahora es la home prácticamente». Son las reglas
   de la portada de la ronda 2, acotadas a la página (.pagina-calculadora) para no chocar con las del escaparate. */
/* La cabecera de la portada: las migas, el titular y la entradilla. Lo que pasa con las respuestas va justo debajo, ya en
   la calculadora (.calc-guardado, en Livewire): la cabecera le deja el hueco de su rejilla y el aviso lleva debajo el
   aire que en el prototipo era el de la cabecera. */
.pagina-calculadora .portada-cabecera { display: grid; gap: var(--espacio-2); padding-block: var(--espacio-4) var(--espacio-2); }
@media (min-width: 50em) { .pagina-calculadora .portada-cabecera { padding-top: var(--espacio-5); } }
.pagina-calculadora .portada-cabecera .titular-1 { max-width: none; margin: 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.1; }
.pagina-calculadora .portada-entrada { margin: 0; font: var(--tipo-cuerpo); }
.pagina-calculadora .calc-guardado { display: grid; gap: 0 var(--espacio-6); justify-items: start; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.pagina-calculadora .calc-guardado p { margin: 0; max-width: 92ch; }
.pagina-calculadora .calc-guardado { padding-bottom: var(--espacio-4); }
.pagina-calculadora .calc-guardado .calc-casilla { min-height: 40px; color: var(--tinta); white-space: nowrap; }
.pagina-calculadora .calc-guardado [role="status"] { grid-column: 1 / -1; font-weight: 650; color: var(--tinta); }
@media (min-width: 50em) { .pagina-calculadora .calc-guardado { grid-template-columns: auto minmax(0, 1fr); align-items: center; } }

/* El recorrido, en una línea: dos opciones como un conmutador. */
.pagina-calculadora .calc-recorrido__opciones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--espacio-2); }
/* Cada opción, en dos líneas, marcada o no: el nombre y, debajo, la aclaración (antes iba en flex con salto, y la que
   cabía se ponía en una línea). Si la tarjeta no da para «preguntas · minutos» en un renglón, van uno debajo de otro y
   sin el punto: así el punto nunca queda colgando al principio o al final de una línea. */
.pagina-calculadora .calc-recorrido__opcion { container-type: inline-size; }
.pagina-calculadora .calc-recorrido__opcion > span { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 2px; padding: var(--espacio-2) var(--espacio-3); }
/* La marca de la elegida, a la altura del nombre: la aclaración tiene todo el ancho debajo. */
.pagina-calculadora .calc-recorrido__opcion strong { padding-right: var(--espacio-6); font-size: 17px; line-height: 22px; }
.pagina-calculadora .calc-recorrido__opcion input:checked + span::before { top: 15px; right: var(--espacio-4); }
.pagina-calculadora .calc-recorrido__opcion em { white-space: normal; }
.pagina-calculadora .calc-recorrido__opcion em span { all: unset; }
.pagina-calculadora .calc-recorrido__opcion em span + span::before { content: "· "; }
@container (max-width: 299px) {
  .pagina-calculadora .calc-recorrido__opcion em span { display: block; }
  .pagina-calculadora .calc-recorrido__opcion em span + span::before { content: none; }
}
.pagina-calculadora .calc-recorrido { padding-bottom: var(--espacio-4); }
.pagina-calculadora .calc-recorrido legend { margin-bottom: var(--espacio-2); }
.pagina-calculadora .calc-recorrido + .calc-pregunta { padding-top: var(--espacio-4); }

/* Con la cabecera fija, el contador pegado va debajo de ella; la barra del móvil, solo mientras se ve la calculadora. */
@media (min-width: 60em) { .pagina-calculadora .calc-panel { top: calc(var(--alto-cab) + var(--espacio-4)); } }
.pagina-calculadora .calc { position: relative; }
.pagina-calculadora .calc-barra { position: sticky; }
.pagina-calculadora .calc-espera { padding-block: var(--espacio-6); }
/* La barra de abajo va pegada (sticky) dentro del contenedor: de lado a lado, para que no asome la página por los
   márgenes; la cifra y el botón, en una fila. */
@media (max-width: 59.99em) { .pagina-calculadora .calc-barra { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--espacio-1) var(--espacio-3); margin-inline: calc(-1 * var(--margen-lateral)); } }
/* A 320 px, «918.565 €» a 24 px no cabía al lado del botón y se metía debajo. */
.pagina-calculadora .calc-barra__valor { font-size: clamp(19px, 6vw, 24px); }
/* A 320 px, «La persona de referencia» se partía en «La persona de / referencia»: en dos renglones parecidos. */
.pagina-calculadora .calc-barra__rotulo { text-wrap: balance; }
@media (max-width: 21.99em) { .pagina-calculadora .calc-barra .tlqp-boton { padding-inline: var(--espacio-3); } }

/* Tres salidas, justo debajo de la calculadora. */
.pagina-calculadora .portada-salidas { padding-block: var(--espacio-8) var(--espacio-10); border-top: var(--grosor-linea) solid var(--linea); }
.pagina-calculadora .portada-salidas__titulo { margin: 0 0 var(--espacio-4); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
.pagina-calculadora .portada-salidas__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
.pagina-calculadora .portada-salidas .tarjeta-enlace:not([data-familia]) { --familia: var(--tinta); --familia-tinta: var(--tinta); }
.pagina-calculadora .portada-salidas .tarjeta-enlace__titulo { font-size: 21px; line-height: 26px; }

/* Y ese dinero, ¿a dónde va?: el reparto de cada 100 € y las 9 áreas. El gasto no es de ninguna familia: en tinta. */
.pagina-calculadora .portada-gasto .titular-3 { margin: 0 0 var(--espacio-4); font: 760 18px/24px var(--font-sans); }
@media (min-width: 421px) { .pagina-calculadora .portada-gasto__reparto .tlqp-barras .tlqp-barras__fila { grid-template-columns: minmax(120px, 210px) minmax(40px, 1fr) 64px; } }
.pagina-calculadora .portada-gasto__reparto .tlqp-barras .tlqp-barras__pista { height: 14px; }
.pagina-calculadora .portada-gasto__reparto .tlqp-barras .tlqp-barras__valor { font: var(--tipo-dato); text-align: right; font-variant-numeric: tabular-nums; }
.pagina-calculadora .portada-gasto__resto { margin: var(--espacio-4) 0 var(--espacio-3); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.pagina-calculadora .portada-gasto__areas { display: grid; gap: var(--espacio-4); justify-items: start; }
.pagina-calculadora .portada-gasto__areas .titular-3 { margin: 0; }
.pagina-calculadora .portada-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 var(--espacio-6); width: 100%; margin: 0; padding: 0; list-style: none; }
.pagina-calculadora .portada-areas li { border-top: var(--grosor-linea) solid var(--linea); }
.pagina-calculadora .portada-areas a { display: flex; align-items: center; justify-content: space-between; gap: var(--espacio-2); min-height: var(--alto-control); font: 650 17px/22px var(--font-sans); text-decoration: none; }
.pagina-calculadora .portada-areas a::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; }
.pagina-calculadora .portada-areas a:hover { background: var(--subrayador-suave); color: var(--tinta); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (min-width: 60em) { .pagina-calculadora .portada-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* El ejemplo: la cifra y su lectura, y el desglose plegado. */
.pagina-calculadora .portada-ejemplo__quien { margin: 0; font: var(--tipo-cuerpo); }
.pagina-calculadora #ejemplo > .tlqp-nota { margin-top: var(--espacio-3); }
.pagina-calculadora .portada-desglose .tlqp-desplegable__cuerpo { display: grid; gap: var(--espacio-5); }
/* Las cuatro tarjetas (las de la portada de antes), de dos en dos desde 440 px de desglose, con el rótulo, la cifra y la
   nota alineados de una a otra (subgrid). La cifra baja lo justo para que «unos 600.000 €» (7,6 em, con su aire) quepa
   entera en su tarjeta: a 44 px se partía en «unos» y «600.000 €». No se usa --cifras-em de CifrasClave.astro porque hace
   de cada tarjeta un contenedor, y un contenedor no puede ser subgrid. */
.pagina-calculadora .portada-desglose .tlqp-desplegable__cuerpo { container-type: inline-size; }
.pagina-calculadora .portada-desglose .cifras-clave { grid-template-columns: minmax(0, 1fr); }
.pagina-calculadora .portada-desglose .cifras-clave__item { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--espacio-1); }
.pagina-calculadora .portada-desglose .cifras-clave__valor { font-size: min(44px, (100cqi - 42px) / 7.6); }
@container (min-width: 440px) {
  .pagina-calculadora .portada-desglose .cifras-clave { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pagina-calculadora .portada-desglose .cifras-clave__valor { font-size: min(44px, ((100cqi - var(--espacio-8)) / 2 - 42px) / 7.6); }
}
.pagina-calculadora .portada-desglose .titular-3 { margin: 0; font: 760 18px/24px var(--font-sans); }
.pagina-calculadora .portada-desglose__enlaces { margin: 0; font: var(--tipo-cuerpo-pequeno); }
/* «Usa este gráfico» de la gráfica por familias va dentro del desglose, y las reglas de .tlqp-desplegable (componentes.css)
   alcanzan a todo <summary> de dentro: su botón vuelve a ser el suyo, sin el «+» ni la fila del plegable. */
.pagina-calculadora .portada-desglose .compartir > .compartir__boton { display: inline-flex; gap: var(--espacio-2); min-height: var(--alto-control); padding: 0 var(--espacio-4) 0 var(--espacio-3); }
.pagina-calculadora .portada-desglose .compartir > .compartir__boton::after { content: none; }

.pagina-calculadora .portada-calculadoras__todas { margin: 0; }
.pagina-calculadora #calculadoras .portada-empresa { margin: 0; }

/* La entradilla, también la de la cabecera de la portada. */
.portada-entrada { margin: 0; font: var(--tipo-cuerpo); }

/* ---- La portada (index.html): la cabecera de la variante B y, debajo, la web entera en el orden del menú ----------- */
/* La cabecera: el titular, el botón a la calculadora (muy destacado), el buscador de toda la web con unos ejemplos y, a
   su lado, el ticket de la persona de referencia como prueba de lo que sale. */
.heroe { display: grid; gap: var(--espacio-8); align-items: center; padding-block: var(--espacio-8) var(--espacio-12); }
@media (min-width: 60em) { .heroe { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: var(--espacio-16); padding-block: var(--espacio-12) var(--espacio-16); } }
.heroe__texto { display: grid; gap: var(--espacio-5); justify-items: start; min-width: 0; }
/* El titular, en cuatro renglones desde 1.024 px («Todo lo que pagas / en impuestos y cotizaciones / a lo largo de tu vida, /
   en una sola cifra»): a 58 px el segundo no cabía en la columna y el primero acababa en «en». */
.heroe .titular-1 { max-width: 14em; margin: 0; font-size: clamp(34px, calc(3.8vw - 2px), 51px); line-height: 1.04; text-wrap: balance; }
/* Desde 40em, «en impuestos y cotizaciones» va en un renglón: con balance a solas, entre 960 y 1.200 px salía
   «en impuestos» suelto. La letra baja lo justo para que quepa en la columna (457 px a 960, 675 px a 1.440). */
@media (min-width: 40em) { .heroe__renglon { white-space: nowrap; } }
.heroe .portada-entrada { max-width: 46ch; font: var(--tipo-entradilla); }
.tlqp .heroe__cta { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: var(--espacio-4); min-width: min(100%, 360px); padding: var(--espacio-5) var(--espacio-8) var(--espacio-5) var(--espacio-6); border: var(--grosor-control) solid var(--tinta); border-radius: var(--radio-m); background: var(--subrayador); color: var(--sobre-subrayador); text-decoration: none; box-shadow: 0 4px 0 var(--tinta); transition: transform .12s, box-shadow .12s; }
/* La flecha va pegada a «cifra» y el botón, en un renglón: a 320 px, a 28 px, la flecha bajaba sola a otra línea. */
.heroe__cta-texto { font: 860 clamp(24px, calc(16px + 2.4vw), 34px)/1.1 var(--font-sans); letter-spacing: -0.02em; white-space: nowrap; }
.heroe__cta-texto::after { content: "\00a0→"; }
.heroe__cta-nota { grid-column: 1; margin-top: 2px; font: 650 15px/20px var(--font-sans); }
.tlqp .heroe__cta:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--tinta); }
.tlqp .heroe__cta:focus-visible { outline: var(--grosor-foco) solid var(--foco); outline-offset: 4px; }
/* El buscador de la cabecera (.cab__buscar), más grande, con su rótulo y unos ejemplos debajo. */
.heroe__buscar { display: grid; gap: var(--espacio-2); width: 100%; max-width: 640px; margin-top: var(--espacio-4); }
.heroe__buscar-rotulo { font: var(--tipo-dato); color: var(--tinta-suave); text-wrap: balance; }
.heroe__buscar .cab__buscar { min-height: 56px; }
.heroe__buscar .cab__buscar input { height: 52px; font-size: 17px; }
.heroe__buscar-ejemplos { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin: 0; padding: 0; list-style: none; }
.tlqp .heroe__buscar-ejemplos a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--espacio-3); border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-pastilla); background: var(--superficie); color: var(--tinta); font: 650 14px/18px var(--font-sans); text-decoration: none; }
.tlqp .heroe__buscar-ejemplos a:hover { border-color: var(--tinta); background: var(--subrayador-suave); }
.heroe__prueba { display: grid; gap: var(--espacio-3); margin: 0; min-width: 0; }
.heroe__prueba figcaption { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
@media (max-width: 59.99em) { .heroe__prueba { max-width: 420px; } .tlqp .heroe__cta { width: 100%; } }
/* A 320 px, el ejemplo del buscador se cortaba («Un impuesto, un»): menos letra y menos aire al lado del botón. */
@media (max-width: 23.99em) { .tlqp .heroe__cta { padding-inline: var(--espacio-5); } :is(.heroe__buscar, .cab__lugar-movil) .cab__buscar input { padding-inline: var(--espacio-2) 0; font-size: 15px; } :is(.heroe__buscar, .cab__lugar-movil) .cab__buscar::before { margin-left: var(--espacio-3); } :is(.heroe__buscar, .cab__lugar-movil) .cab__buscar button { padding-inline: var(--espacio-3); } }
@media (prefers-reduced-motion: reduce) { .tlqp .heroe__cta { transition: none; } .tlqp .heroe__cta:hover { transform: none; } }

/* Las puertas con ilustración (las 4 situaciones, las 9 áreas y el explorador de datos): en el móvil, una fila con la
   ilustración en cuadrado (72 px, como las áreas) a la izquierda; desde 40em, la ilustración a sangre arriba (.ilustracion, 16:9). */
.portada-puertas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) {
  .portada-puertas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espacio-4); }
  /* Las tarjetas de una fila alinean sus piezas (subgrid): la cuenta, el nombre y el texto empiezan a la misma altura. */
  .portada-puertas > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .tlqp a.portada-puerta { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--espacio-2); align-content: start; height: auto; }
  .portada-puerta .tarjeta-enlace__cabeza { margin: 0; }
}
/* Cuatro en fila desde 70em: a 1.024 px, a cuatro columnas de 228 px, el texto iba en cinco renglones cortos. */
@media (min-width: 70em) { .portada-puertas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 39.99em) {
  .tlqp a:is(.portada-puerta, .portada-explorador) { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-content: start; gap: 2px var(--espacio-4); padding: var(--espacio-4) 0 var(--espacio-2); }
  .tlqp :is(.portada-puerta, .portada-explorador) > .ilustracion:first-child { grid-column: 1; grid-row: 1 / span 4; width: 72px; margin: 0; aspect-ratio: 1; border-radius: var(--radio-m); }
  :is(.portada-puerta, .portada-explorador) > :not(.ilustracion) { grid-column: 2; }
  .portada-puerta .tarjeta-enlace__cabeza { margin: 0; }
}

/* La flecha, a la altura del último renglón (su centro, a 24 + 11 px del pie), no 5 px por debajo. */
:is(.portada-puerta, .portada-area) .tarjeta-enlace__flecha { bottom: calc(var(--espacio-6) + 1px); }

/* En p: el <details class="portada-mas"> de las calculadoras de /calculadora/ es otro (calculadora.css). */
p.portada-mas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espacio-3) var(--espacio-6); margin: 0; }
.tlqp .portada-mas__otro { display: inline-flex; align-items: center; min-height: var(--alto-control); font: 650 16px/22px var(--font-sans); }
/* En el móvil, uno debajo de otro: en fila se partían a trozos («Corrupción: lo que se mide · Metodología» y «Descargas» sola). */
@media (max-width: 39.99em) { p.portada-mas { flex-direction: column; align-items: flex-start; gap: 0; } p.portada-mas > .tlqp-boton { margin-bottom: var(--espacio-2); } }

/* A dónde van: el reparto de cada 100 € y las 9 áreas. El gasto no es de ninguna familia: en tinta. */
.portada-gasto .titular-3 { margin: 0 0 var(--espacio-4); font: 760 18px/24px var(--font-sans); }
@media (min-width: 421px) { .portada-gasto__reparto .tlqp-barras .tlqp-barras__fila { grid-template-columns: minmax(120px, 210px) minmax(40px, 1fr) 64px; } }
.portada-gasto__reparto .tlqp-barras .tlqp-barras__pista { height: 14px; }
.portada-gasto__reparto .tlqp-barras .tlqp-barras__valor { font: var(--tipo-dato); text-align: right; font-variant-numeric: tabular-nums; }
.portada-gasto__resto { margin: var(--espacio-4) 0 var(--espacio-3); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.portada-gasto__areas { display: grid; gap: var(--espacio-4); justify-items: start; }
.portada-gasto__areas .titular-3 { margin: 0; }
/* Las 9 áreas, en tarjetas compactas: la ilustración y el nombre, sin cifra (la de cada área está en a-donde-van.html).
   Hasta 48em, una columna de filas bajas con la ilustración en cuadrado; desde 48em, tres columnas con la ilustración
   arriba, como las demás puertas (a tres columnas de filas bajas, «infraestructuras» o «Inmigración» no cabían en su
   renglón a 768 px y se partían). Con nueve, ninguna se queda sola en su fila. */
.portada-areas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-3); width: 100%; margin: 0; padding: 0; list-style: none; }
.portada-area .tarjeta-enlace__titulo { font-size: 17px; line-height: 22px; }
@media (min-width: 48em) { .portada-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espacio-4); } }
@media (max-width: 47.99em) {
  .tlqp a.portada-area { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; column-gap: var(--espacio-4); padding: var(--espacio-3) calc(20px + var(--espacio-3)) var(--espacio-3) 0; }
  .tlqp .portada-area > .ilustracion:first-child { width: 72px; margin: 0; aspect-ratio: 1; border-radius: var(--radio-m); }
  /* La flecha, centrada en alto con el contenido. */
  .portada-area .tarjeta-enlace__flecha { top: 50%; bottom: auto; margin-top: -7px; }
  .tlqp a.portada-area > :has(+ .tarjeta-enlace__flecha) { padding-right: 0; }
}

/* Dónde vives: una franja con la ilustración en el rail y, en la lectura, los enlaces del grupo del menú. */
.portada-lugar__franja { display: grid; gap: var(--espacio-6); align-items: center; }
@media (min-width: 60em) { .portada-lugar__franja { grid-template-columns: var(--pistas); column-gap: var(--canal); } }
.portada-lugar__franja > .ilustracion { width: 100%; border-radius: var(--radio-l); }
.portada-lugar__texto { display: grid; gap: var(--espacio-6); min-width: 0; }
.portada-lugar__grupos { display: grid; gap: var(--espacio-6) var(--espacio-8); }
@media (min-width: 40em) { .portada-lugar__grupos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 59.99em) {
  /* Hasta 60em, la ilustración pequeña y en cuadrado, como en las puertas del móvil, al lado del titular. */
  .portada-lugar__franja { grid-template-columns: 72px minmax(0, 1fr); gap: var(--espacio-5) var(--espacio-4); }
  .portada-lugar__franja > .ilustracion { grid-column: 1; grid-row: 1; width: 72px; aspect-ratio: 1; border-radius: var(--radio-m); }
  :is(.portada-lugar__texto, .portada-lugar__texto > .bloque__cabecera) { display: contents; }
  .portada-lugar__texto h2 { grid-column: 2; grid-row: 1; margin: 0; }
  :is(.portada-lugar__texto .bloque__cabecera > p, .portada-lugar__grupos) { grid-column: 1 / -1; margin: 0; }
}
.portada-lugar__titulo { margin: 0 0 var(--espacio-2); padding-bottom: var(--espacio-2); border-bottom: var(--grosor-control) solid var(--tinta); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }

/* Datos destacados: seis cifras de la web, cada una con su unidad, su año, a quién se refiere y su fuente, y la tarjeta
   entera lleva a su página (el enlace del pie se estira por encima de la tarjeta). Las piezas, alineadas por filas. */
.portada-datos__lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 40em) { .portada-datos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .portada-datos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dato { position: relative; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--espacio-3); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--papel); }
.dato > * { min-width: 0; margin: 0; }
.dato__valor { font: 860 clamp(34px, 3.4vw, 44px)/1 var(--font-sans); letter-spacing: -0.03em; white-space: nowrap; }
.dato__texto { font: var(--tipo-cuerpo); }
.dato__nota { align-self: start; }
.tlqp .dato__enlace { display: inline-flex; align-items: center; gap: var(--espacio-2); justify-self: start; align-self: end; min-height: var(--alto-control); margin-bottom: calc(-1 * var(--espacio-3)); color: var(--tinta); font: 760 16px/22px var(--font-sans); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.dato__enlace::before { content: ""; order: 2; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--flecha) center / contain no-repeat; mask: var(--flecha) center / contain no-repeat; }
.dato__enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--radio-l); }
.tlqp .dato:hover { border-color: var(--linea-control); box-shadow: var(--sombra-elevada); }
.tlqp .dato:hover .dato__enlace { background: var(--subrayador-suave); }
.tlqp .dato__enlace:focus-visible { outline: none; }
.dato:has(.dato__enlace:focus-visible) { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }

/* El explorador de datos: una puerta a lo ancho, con la ilustración en el rail. */
@media (min-width: 40em) {
  .tlqp a.portada-explorador { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 9fr); align-items: center; column-gap: var(--canal); padding: 0 calc(20px + var(--espacio-5) + var(--espacio-4)) 0 0; }
  .tlqp .portada-explorador > .ilustracion:first-child { width: 100%; height: 100%; margin: 0; }
  .portada-explorador__texto { display: grid; gap: var(--espacio-2); padding-block: var(--espacio-6); }
  .portada-explorador .tarjeta-enlace__flecha { top: 50%; bottom: auto; margin-top: -10px; }
}
@media (max-width: 39.99em) { .portada-explorador__texto { display: contents; } }
/* height: auto: con el 100 % de .tarjeta-enlace, la tarjeta se comía su propio margen y los enlaces de debajo quedaban a 8 px. */
.tlqp a.portada-explorador { height: auto; }

.portada-calculadoras__todas { margin: 0; }
.portada #calculadoras .portada-empresa { margin: 0; }

/* Al imprimir un resultado (body[data-pdf], calculadora.css) no sale el cuestionario: tampoco lo que en legado iba con él
   (las migas, la entradilla y el aviso de lo que pasa con las respuestas). */
@media print { body[data-pdf] .pagina-calculadora :is(.migas, .portada-entrada, .calc-guardado) { display: none !important; } }

/* ==================================================================== fin de PORTADA Y CALCULADORA ==== */

/* ======================================================================================================================
   IMPUESTOS Y FICHA · el índice de impuestos (/impuestos/) y la plantilla de ficha (/impuestos/{id}/). Reservado para su agente: solo se escribe dentro de este bloque.
   ====================================================================================================================== */
/* Es el bloque «IMPUESTOS» de prototipo.css y lo de .pagina-impuestos de su «BUSCAR», con las clases de las vistas
   (paginas/impuestos/indice.blade.php y ficha.blade.php). La clase de página va en su .contenedor. */

/* Sin palabras sueltas, como en «COMÚN»: las dos páginas, en sus propias listas para no tocar las de los demás. */
:is(.pagina-impuestos, .pagina-ficha) :is(p, li, dd, td, figcaption) { text-wrap: pretty; }
:is(.pagina-impuestos, .pagina-ficha) :is(h1, h2, h3, h4, .detalle__resumen, .tlqp-desplegable__titulo, .afecta__respuesta, .buscador__estado) { text-wrap: balance; }

/* El buscador, la tarea principal del índice: la etiqueta como titular, el campo redondo de la web y su botón. Por GET: lo
   resuelve el servidor con ?q= (App\Web\Impuestos\Indice::buscar). */
.buscador { display: grid; gap: var(--espacio-4); padding-bottom: var(--espacio-10); }
.buscador__form { display: grid; gap: var(--espacio-3); max-width: 760px; }
.buscador__etiqueta { font: var(--tipo-titular-3); letter-spacing: var(--tipo-titular-3-espaciado); }
.buscador__fila { display: flex; flex-wrap: wrap; gap: var(--espacio-3); }
.buscador__caja { flex: 1 1 200px; min-height: 56px; }
.buscador__caja > input { font-size: 18px; }
.buscador__boton { flex: none; min-height: 56px; }
.buscador__ejemplos { margin: 0; font: var(--tipo-cuerpo-pequeno); line-height: 28px; color: var(--tinta-suave); }
.buscador__ejemplos a { color: var(--tinta); white-space: nowrap; }
.buscador__estado { margin: 0; font: 650 15px/22px var(--font-sans); }
.resultados { max-width: 960px; }
.resultados .figura__datos { grid-template-columns: 250px 156px; }
.resultados .figura__datos > .tlqp-chip { justify-self: start; }
/* En el móvil, el botón del buscador va debajo del campo y de lado a lado: al lado, el campo cortaba el ejemplo a media palabra. */
@media (max-width: 29.99em) { .buscador__boton { flex: 1 1 100%; } .buscador__caja > input { font-size: 16px; } }

/* Por comunidad: una rejilla de plegables, una comunidad abierta cada vez (name="comunidad"), sin JavaScript. A 240 px como
   poco: más estrechas, «Castilla-La Mancha» o «C. Valenciana» se partían y el signo quedaba pegado a la de al lado. */
.comunidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--espacio-2) var(--espacio-4); align-items: start; }
@media (max-width: 29.99em) { .comunidades { row-gap: 0; } }
.comunidad { border-bottom: var(--grosor-linea) solid var(--linea); }
.comunidad > summary { display: flex; align-items: center; gap: var(--espacio-3); min-height: var(--alto-control); cursor: pointer; list-style: none; }
.comunidad__nombre { font: 650 17px/22px var(--font-sans); }
.comunidad__cuenta { min-width: 2.2em; padding: 1px var(--espacio-2); border-radius: var(--radio-pastilla); background: var(--superficie-hundida); font: var(--tipo-dato); font-size: 13px; text-align: center; color: var(--tinta-suave); }
.comunidad__lista { display: grid; gap: 2px; margin: 0; padding: var(--espacio-2) 0 var(--espacio-2) var(--espacio-3); border-left: var(--grosor-control) solid var(--tinta); list-style: none; font: var(--tipo-cuerpo-pequeno); }
.comunidad__lista a { display: inline-flex; align-items: center; min-height: 32px; }
.comunidad__vacia { color: var(--tinta-suave); }
.comunidad__mas { margin: 0; padding: var(--espacio-2) 0 var(--espacio-4); font: 650 15px/22px var(--font-sans); }
.comunidad__mas a::after { content: " →"; }

/* Los conceptos de la cifra: la de referencia una sola vez, en el ticket, y la tabla compacta por los cuatro grupos de color. */
.conceptos-cifra { display: grid; gap: var(--espacio-5); align-items: center; }
@media (min-width: 46em) { .conceptos-cifra { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--espacio-8); } }
.conceptos-cifra__ticket { max-width: 340px; }
.conceptos-cifra__ticket .tlqp-ticket__papel { gap: var(--espacio-1); }
.conceptos-cifra__valor { font: 860 44px/1 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.conceptos-cifra__persona { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.conceptos-cifra__persona b { color: var(--tinta); }
.tabla-27 .tabla-datos { min-width: 0; }
.tabla-27 .tabla-datos th[scope="row"] { width: 30%; min-width: 13em; font-weight: 650; }
.tabla-27 .tabla-datos td.num { width: 11em; }
.tabla-27 .tabla-datos td.num small { display: block; font: var(--tipo-nota); color: var(--tinta-suave); white-space: normal; }
.tabla-27__depende { color: var(--tinta-suave); }
.tabla-27 td.num.tabla-27__depende { font: var(--tipo-nota); }
.tabla-27__que { color: var(--tinta-suave); }
.tabla-27 .tabla-datos :is(th, td) { padding-block: 7px; }
.tabla-27 .fila-suave > * { color: var(--tinta-suave); }
.tabla-27 .tabla-27__grupo > th { padding-top: var(--espacio-5); border-bottom: var(--grosor-control) solid var(--familia); font: 860 13px/18px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--familia-tinta); }
.tabla-27 tbody:first-of-type .tabla-27__grupo > th { padding-top: var(--espacio-2); }
/* En el móvil, cada fila en dos líneas: el nombre y su cifra; debajo, qué es. */
@media (max-width: 45.99em) {
  .tabla-27 thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-27 tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
  .tabla-27 .tabla-datos tbody tr > * { border-bottom: 0; padding-inline: 0; background: none; }
  .tabla-27 .tabla-datos th[scope="row"] { position: static; width: auto; min-width: 0; padding-bottom: 0; background: none; }
  .tabla-27 .tabla-datos td.num { width: auto; padding-bottom: 0; }
  .tabla-27 td.tabla-27__que { grid-column: 1 / -1; padding-top: 2px; font-size: 14px; line-height: 20px; }
  .tabla-27__grupo { border-bottom: 0; }
  .tabla-27__grupo > th { grid-column: 1 / -1; }
}

/* Lo que cambia este año: la nota de la convalidación, junto a la tabla; la tabla entera, plegada. */
.cambios-nota { margin: 0; font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
/* En el móvil, cada cambio en dos líneas: la fecha y su estado; debajo, qué cambia. Sin desplazamiento lateral. */
@media (max-width: 45.99em) {
  .tabla-cambios thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabla-cambios tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
  .tabla-cambios .tabla-datos tbody tr > * { border-bottom: 0; padding-inline: 0; background: none; }
  .tabla-cambios .tabla-datos th[scope="row"] { position: static; min-width: 0; padding-bottom: 0; white-space: nowrap; }
  .tabla-cambios .tabla-datos td.texto { min-width: 0; }
  .tabla-cambios td:nth-child(2) { grid-row: 2; grid-column: 1 / -1; padding-top: var(--espacio-1); }
  .tabla-cambios td:nth-child(3) { padding-bottom: 0; color: var(--tinta-suave); text-align: right; }
}
/* El rótulo de cada grupo, alineado con el texto de las filas (que llevan 8 px dentro por su fondo); la fecha de cada cambio,
   sin partir («1 de diciembre de / 2026»). */
@media (min-width: 46em) {
  .tabla-27 .tabla-27__grupo > th { padding-left: var(--espacio-2); }
  .tabla-cambios .tabla-datos tbody th[scope="row"] { white-space: nowrap; }
}
@media (max-width: 30em) { .pagina-impuestos .marcas-leyenda { gap: var(--espacio-4); } }

/* El catálogo, plegado y corto: en cada familia se ven su nombre y sus cifras en una línea; lo que es, al abrirla. El filete
   va en la familia y el signo es el del patrón; aquí, con .pagina-impuestos, ganan a las de /impuestos/catalogo/ («COMÚN»). */
.pagina-impuestos .catalogo-familia.pliegue { border-top: var(--grosor-linea) solid var(--linea); }
.pagina-impuestos .grupo-color__rotulo + .catalogo-familia.pliegue { border-top: 0; }
.tlqp .pagina-impuestos .catalogo-familia.pliegue > summary { grid-template-columns: minmax(0, 1fr); align-items: center; min-height: 64px; padding-block: var(--espacio-3); border-top: 0; }
.pagina-impuestos .catalogo-familia__cuerpo > .catalogo-familia__texto { margin: 0; max-width: var(--ancho-lectura); }
.pagina-impuestos .catalogo-color { margin-top: var(--espacio-6); }
.pagina-impuestos .catalogo-color:first-child { margin-top: 0; }
/* El enlace a /impuestos/catalogo/, la página del catálogo con sus totales, debajo de las familias. */
.pagina-impuestos .catalogo-mas { margin-top: var(--espacio-4); }
@media screen and (min-width: 60em) {
  /* El resumen sigue las pistas de la página (nombre en el rail; cifras en la lectura) y deja el hueco del signo en la
     lectura: así el rail no encoge. Las tres cifras, en columnas que se alinean de una familia a otra; lo recaudado, a la
     derecha, junto al signo. */
  .tlqp .pagina-impuestos .catalogo-familia.pliegue > summary { grid-template-columns: var(--pistas); padding-right: var(--pliegue-sangria); }
  .tlqp .pagina-impuestos .catalogo-familia.pliegue > summary > .catalogo-familia__resto { grid-template-columns: minmax(0, 1fr); padding-right: calc(var(--pliegue-signo) + var(--espacio-4)); }
  .pagina-impuestos .catalogo-familia__resto > .catalogo-familia__cuenta { grid-column: 1; display: grid; grid-template-columns: 6em 10.5em minmax(0, 1fr); justify-items: stretch; gap: 0 var(--espacio-5); text-align: left; white-space: nowrap; }
  .pagina-impuestos .catalogo-familia__cuenta > :nth-child(3) { text-align: right; }
}

/* ---- La ficha (/impuestos/<id>/, la plantilla de todas las fichas) ------------------------------------------------ */
/* El ámbito, arriba del nombre: quien llega de un buscador sabe enseguida de dónde es el impuesto. */
.ficha-ambito { margin: 0; font: 650 17px/24px var(--font-sans); color: var(--familia-tinta); }
.ficha-ambito a { color: var(--tinta); }
/* «¿A quién afecta?»: la respuesta para quien lee en el ticket, si los datos la dan; al lado, quién lo paga y qué grava. */
.afecta { display: grid; gap: var(--espacio-6); align-items: start; }
@media (min-width: 46em) { .afecta:not(.afecta--sin-ticket) { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); } }
.afecta__ticket { max-width: 340px; }
.afecta__ticket .tlqp-ticket__papel { gap: var(--espacio-3); }
.afecta__respuesta { font: 860 24px/29px var(--font-sans); letter-spacing: -0.02em; }
.afecta__quien { display: grid; gap: var(--espacio-3); }
.afecta__rotulo { margin: 0; padding-top: var(--espacio-3); border-top: 6px solid var(--familia); font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--familia-tinta); }
.afecta__lista { display: grid; gap: var(--espacio-3); margin: 0; padding: 0; list-style: none; font: var(--tipo-cuerpo); }
.afecta__lista li { padding-left: var(--espacio-6); background: linear-gradient(var(--familia), var(--familia)) 0 11px / 12px 3px no-repeat; }
.afecta__texto { margin: 0; max-width: var(--ancho-lectura); font: var(--tipo-cuerpo); }
.afecta__grava { margin: 0; padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.afecta__grava b { color: var(--tinta); }
.afecta__grava + .afecta__grava { padding-top: 0; border-top: 0; }
/* Cómo, cuándo y con qué norma: tres datos en fila bajo el párrafo; en «En una vida», los del perfil. */
.ficha-claves { display: grid; gap: var(--espacio-4) var(--espacio-6); margin: 0; }
@media (min-width: 46em) { .ficha-claves { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ficha-claves > div { display: grid; align-content: start; gap: var(--espacio-1); padding-top: var(--espacio-3); border-top: 3px solid var(--familia); }
.ficha-claves dt { font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--familia-tinta); }
.ficha-claves dd { margin: 0; font: var(--tipo-cuerpo-pequeno); }
.ficha-claves__cifra { display: block; font: 760 21px/28px var(--font-sans); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
@media (min-width: 46em) { .ficha-claves--vida { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* «No entra en la calculadora»: una nota del modelo, no un bloque grande. */
.ficha-modelo { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--espacio-2) var(--espacio-3); margin: 0; max-width: var(--ancho-lectura); font: var(--tipo-cuerpo-pequeno); color: var(--tinta-suave); }
.ficha-modelo > span + span { flex: 1 1 280px; }
.ficha-recauda .datos-ficha__valor { font-size: 19px; }
.ficha-aclaracion { margin: var(--espacio-4) 0 0; max-width: var(--ancho-lectura); font: var(--tipo-nota); color: var(--tinta-suave); }
/* Las tres relacionadas, una debajo de otra en la columna de lectura; debajo, el enlace a las demás. */
.pagina-ficha .tarjetas-ficha { grid-template-columns: minmax(0, 1fr); }
/* Las preguntas, una debajo de otra a ancho de lectura. */
.pagina-ficha .preguntas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: var(--ancho-lectura); }
.ficha-mas { margin: 0; font: 760 17px/24px var(--font-sans); }
/* En línea y no en flex: si el texto se parte en dos renglones, la flecha sigue a la última palabra y no se va a la derecha. */
.ficha-mas a { display: inline-block; padding-block: var(--espacio-3); }
.ficha-mas a::after { content: "\00a0→"; }
/* El final: buscar otro impuesto, en vez del cartel de la calculadora. */
.ficha-final { margin-block: var(--espacio-8) var(--espacio-16); padding: var(--espacio-8) var(--espacio-6); border-radius: var(--radio-l); background: var(--superficie-hundida); }
.ficha-final .buscador__form { margin-inline: auto; }
.ficha-final__titulo { margin: 0; }
/* El índice: plegado en el móvil, al lado y fijo bajo la cabecera en escritorio. */
.indice-movil { margin-inline: calc(-1 * var(--margen-lateral)); padding-inline: var(--margen-lateral); border-block: var(--grosor-linea) solid var(--linea); }
.indice-movil > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--alto-control); font: 760 16px/22px var(--font-sans); cursor: pointer; list-style: none; }
.indice-movil ol { display: grid; margin: 0; padding: 0 0 var(--espacio-3); list-style: none; font: 650 16px/22px var(--font-sans); }
.indice-movil a { display: flex; align-items: center; min-height: 44px; }
.pagina-ficha .ficha-indice { display: none; }
/* En el móvil el índice no va pegado: sin el hueco que le guarda sitio.css, las anclas quedaban 84 px por debajo de la cabecera. */
@media (max-width: 59.99em) { .pagina-ficha .con-indice [id] { scroll-margin-top: 0; } }
@media (min-width: 60em) {
  .indice-movil { display: none; }
  .pagina-ficha .ficha-indice { display: block; top: var(--alto-cab); max-height: calc(100vh - var(--alto-cab)); }
}

/* ==================================================================== fin de IMPUESTOS Y FICHA ==== */

/* ======================================================================================================================
   A DÓNDE VAN Y ÁREAS · /a-donde-van-tus-impuestos/ y la plantilla de área (/como-se-usan-tus-impuestos/{área}/). Reservado para su agente: solo se escribe dentro de este bloque.
   Viene del bloque «A DÓNDE VAN · … ÁREA DE INMIGRACIÓN» de prototipo.css. La clase de página va en el .contenedor de la
   vista: .pagina-a-donde-van y, en las nueve áreas, .pagina-area (en el prototipo, .pagina-inmigracion en el <body>).
   ====================================================================================================================== */

/* El índice de la página, pegado bajo la cabecera fija (en la web iba arriba del todo). */
/* El índice «En esta página», pegado bajo la cabecera fija en todas las páginas (30-10-2026: en nueve se pegaba a 0 y la
   cabecera lo tapaba entero); en el rail, sin pasar del borde de abajo de la ventana. */
.indice-pegado { top: var(--alto-cab); }
@media screen and (min-width: 60em) { .con-indice:not(.con-indice--tira) > .indice-pegado { max-height: calc(100vh - var(--alto-cab)); } }

/* ---- Las dos páginas: lo que comparten sus piezas ------------------------------------------------------------------ */
/* Una cifra suelta en grande, con cifras proporcionales, como manda ritmo.css: con las tabulares, el «1» dejaba un hueco
   delante y «14,6 %» parecía sangrada respecto a su rótulo. */
:is(.pagina-a-donde-van, .pagina-area) :is(.indicador__valor, .area-puerta__cifra b, .mas-tarjeta__cifra) { font-variant-numeric: proportional-nums; }
/* Sin una palabra sola en el último renglón de los títulos de gráfica. */
:is(.pagina-a-donde-van, .pagina-area) :is(.figura__titulo, .cien__detalle) { text-wrap: balance; }
/* Dos plegables seguidos comparten filete y no dejan hueco entre ellos: en la rejilla del bloque (que separa sus piezas
   con un margen) y dentro de otro plegable (que las separa con gap). Antes se veían dos filetes a 17 o 24 px. */
:is(.pagina-a-donde-van, .pagina-area) .detalle:has(+ .detalle) { margin-bottom: 0; border-bottom: 0; }
:is(.pagina-a-donde-van, .pagina-area) .detalle__cuerpo > .detalle + .detalle { margin-top: calc(-1 * var(--espacio-4)); }
/* Las tablas de «Ver los datos» (dos columnas): la cabecera de la cifra se parte en renglones en vez de empujar la tabla
   fuera de su columna (707-857 px en una columna de 659, con barra de desplazamiento a 1.440). */
:is(.pagina-a-donde-van, .pagina-area) .tabla-datos--zona thead th.num { white-space: normal; }
/* «Sigue por aquí»: el título y el texto de las tres tarjetas, a la misma altura (subgrid). */
@media (min-width: 40em) {
  :is(.pagina-a-donde-van, .pagina-area) .sigue > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .tlqp :is(.pagina-a-donde-van, .pagina-area) .sigue a.tarjeta-enlace { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; height: auto; }
}
.tlqp .pagina-area .sigue__todas a::after, .tlqp .pagina-a-donde-van .mas-tarjeta__enlace span { display: inline-block; margin-left: 0.3em; text-decoration: none; }
.sigue__todas a::after { content: "→"; }

/* ---- A dónde van: «De cada 100 €» ---------------------------------------------------------------------------------- */
/* La columna de texto, arriba: al lado de la barra (más alta), la rejilla repartía lo que sobraba entre sus filas y dejaba
   100-170 px vacíos entre la entradilla y las cifras y entre los datos y la fuente. */
.pagina-a-donde-van .cien__texto { align-content: start; }
/* La fuente va en la misma rejilla, debajo de las cifras y al lado de la barra (debajo de la barra quedaba a 170 px). */
@media screen and (min-width: 60em) {
  .pagina-a-donde-van .cien { grid-template-rows: auto 1fr; }
  .pagina-a-donde-van .cien__figura { grid-row: 1 / span 2; }
  .pagina-a-donde-van .cien > .tlqp-nota { grid-column: lectura; grid-row: 2; }
}
/* Las cuatro cifras, alineadas por filas: «a protección social» ocupa dos renglones en el móvil y bajaba la línea de su
   vecina. */
.pagina-a-donde-van .cien__item { grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--espacio-1); }

/* ---- A dónde van: las nueve áreas, tarjetas-enlace con su cifra al pie ------------------------------------------- */
.area-puerta__cifra { display: grid; align-content: start; gap: 2px; padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
.area-puerta__cifra b { font: 860 26px/1.1 var(--font-sans); letter-spacing: -0.02em; }
.area-puerta__cifra span { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
/* Desde 40em, las tarjetas de cada fila alinean sus piezas (subgrid): el nombre, el texto y la cifra empiezan a la misma
   altura, y el filete de la cifra va seguido de una tarjeta a otra. */
@media (min-width: 40em) {
  .areas-puertas > li { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .tlqp a.tarjeta-enlace.area-puerta { display: grid; grid-row: span 3; grid-template-rows: subgrid; height: auto; }
  /* Con la ilustración arriba (bloque ILUSTRACIONES), una fila más: la imagen, el nombre, el texto y la cifra. */
  .areas-puertas > li:has(> .area-puerta > .ilustracion), .tlqp a.tarjeta-enlace.area-puerta:has(> .ilustracion) { grid-row: span 4; }
}
/* Las áreas, en sus cuatro grupos de dos a cuatro: de dos en dos desde 40em y de cuatro en cuatro desde 64em, para que
   ningún grupo deje una tarjeta sola en su fila. Gana a la regla de nueve tarjetas de sitio.css (0,4,1). */
.pagina-a-donde-van .areas-grupo { margin: var(--espacio-6) 0 var(--espacio-3); }
.pagina-a-donde-van .areas-grupo:first-of-type { margin-top: 0; }
@media (min-width: 40em) { .tlqp .pagina-a-donde-van ul.enlaces-rejilla.areas-puertas.ancho-total { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .tlqp .pagina-a-donde-van ul.enlaces-rejilla.areas-puertas.ancho-total { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* En el móvil, cada área en una tarjeta baja: el nombre y la cifra en el mismo renglón. */
@media (max-width: 39.99em) {
  .tlqp a.tarjeta-enlace.area-puerta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--espacio-1) var(--espacio-3); }
  .area-puerta .tarjeta-enlace__titulo { grid-column: 1; grid-row: 1; }
  .area-puerta__cifra { display: contents; }
  .area-puerta__cifra b { grid-column: 2; grid-row: 1; font-size: 22px; text-align: right; }
  .area-puerta .tarjeta-enlace__texto, .area-puerta__cifra span { grid-column: 1 / -1; }
  .area-puerta__cifra span { padding-right: calc(20px + var(--espacio-3)); }
  /* La ilustración en la primera fila, de lado a lado; el nombre y la cifra, en la segunda. Del pie de la imagen al
     nombre, 12 px. */
  .tlqp .area-puerta > .ilustracion:first-child { grid-column: 1 / -1; grid-row: 1; width: 100%; margin: 0 0 var(--espacio-3); }
  .area-puerta:has(> .ilustracion) :is(.tarjeta-enlace__titulo, .area-puerta__cifra b) { grid-row: 2; }
}

/* ---- A dónde van: «Cuánto cuesta un servicio», a lo ancho: la explicación de cada servicio sigue a su nombre -------- */
.pagina-a-donde-van #cuanto-cuesta th[scope="row"] { text-wrap: pretty; }
@media (min-width: 40em) { .pagina-a-donde-van #cuanto-cuesta thead th { white-space: nowrap; } }
@media (min-width: 60em) { .pagina-a-donde-van #cuanto-cuesta th[scope="row"] small { display: inline; margin-left: var(--espacio-2); } }
/* En el móvil, cada servicio en dos renglones: el nombre y lo que cuesta; debajo, qué es y el año. En tres columnas, el
   año («septiembre de 2026») se comía la del nombre y la tabla medía 1.600 px. */
@media (max-width: 39.99em) {
  .pagina-a-donde-van #cuanto-cuesta thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pagina-a-donde-van #cuanto-cuesta tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: start; gap: 2px var(--espacio-4); padding-block: var(--espacio-3); border-bottom: var(--grosor-linea) solid var(--linea); }
  .pagina-a-donde-van #cuanto-cuesta .tabla-datos tbody tr > * { padding: 0; border: 0; background: none; }
  .pagina-a-donde-van #cuanto-cuesta .tabla-datos tbody th[scope="row"] { grid-row: 1 / span 2; position: static; min-width: 0; }
  .pagina-a-donde-van #cuanto-cuesta tbody td.num { grid-column: 2; font-weight: 760; }
  .pagina-a-donde-van #cuanto-cuesta tbody td.num + td.num { grid-row: 2; max-width: 6.5em; font: var(--tipo-nota); color: var(--tinta-suave); white-space: normal; }
}

/* ---- A dónde van: «Partida a partida», con el plegable común (la columna del signo ya la quita «COMÚN») ------------- */
/* «Las 34 partidas, de mayor a menor», como última fila de la lista: sin hueco ni doble filete debajo de la décima función. */
.pagina-a-donde-van .bloque > .funciones:has(+ .detalle) { margin-bottom: 0; }
.pagina-a-donde-van .funciones + .detalle { border-top: 0; }

/* ---- A dónde van: «Más sobre el gasto», cinco tarjetas enteras pulsables, alineadas por filas -------------------- */
.mas-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--espacio-4); margin: 0; padding: 0; list-style: none; }
/* El rótulo, la cifra, la frase, la nota y el enlace, cada uno a la misma altura que en sus vecinas (subgrid). Sin tope
   de alto: con 300 px, la de las prestaciones se salía de su caja y su enlace quedaba 10 px más abajo que los otros. */
.mas-tarjeta { position: relative; display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--espacio-2); padding: var(--espacio-5); border: var(--grosor-linea) solid var(--borde-tarjeta); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
.mas-tarjeta > p { margin: 0; }
.mas-tarjeta__rotulo { color: var(--tinta-suave); }
.mas-tarjeta__cifra { font: 860 clamp(22px, 2vw, 26px)/1.15 var(--font-sans); letter-spacing: -0.02em; text-wrap: balance; }
.mas-tarjeta__frase { font: var(--tipo-cuerpo-pequeno); text-wrap: pretty; }
.mas-tarjeta__antes { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }
.tlqp a.mas-tarjeta__enlace { align-self: start; justify-self: start; padding-top: var(--espacio-2); color: var(--tinta); font: 760 16px/22px var(--font-sans); }
.mas-tarjeta__enlace::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.mas-tarjeta:hover { border-color: var(--linea-control); box-shadow: var(--sombra-elevada); }
.mas-tarjeta:has(.mas-tarjeta__enlace:focus-visible) { outline: var(--grosor-foco) solid var(--foco); outline-offset: 2px; }
.mas-tarjeta__enlace:focus-visible { outline: none; }
.mas-detalles .detalle { max-width: none; }
/* Sus cuatro secciones, a la vista al abrir «Lo que todavía no está en su página» (30-10-2026: eran plegables, con sus
   tablas plegadas dentro): cada una con su título y su resumen, y un filete entre ellas. */
.mas-detalle { display: grid; gap: var(--espacio-5); }
.mas-detalle > * { min-width: 0; margin: 0; }
.mas-detalle + .mas-detalle { margin-top: var(--espacio-10); padding-top: var(--espacio-10); border-top: var(--grosor-control) solid var(--tinta); }
.mas-detalle__resumen { color: var(--tinta-suave); text-wrap: pretty; }
/* Las preguntas de «Cómo leer estas cifras», todas a la vista al abrir su plegable. */
.preguntas-abiertas { display: grid; gap: var(--espacio-6); max-width: var(--ancho-lectura); margin: 0; }
.preguntas-abiertas > div + div { padding-top: var(--espacio-6); border-top: var(--grosor-linea) solid var(--linea); }
.preguntas-abiertas dt { font: 760 17px/24px var(--font-sans); text-wrap: balance; }
.preguntas-abiertas dd { margin: var(--espacio-2) 0 0; }

/* ---- Las áreas (plantilla de las 9): la cabecera con su ilustración ----------------------------------------------- */
/* El antetítulo, el titular y la entradilla van juntos (.portadilla__texto), con el mismo aire que la portadilla. Desde
   60em, la ilustración al lado, centrada en ese texto. Por debajo, pequeña a la derecha del antetítulo («Cómo se usan tus
   impuestos», el mismo en las 9): el titular baja 36 px en el móvil. Al lado de las migas no: las de «Empleo público y
   cargos políticos» o «Transporte e infraestructuras» se partían en dos renglones (48 px más). En la tableta caben, y la
   imagen va a la altura de las migas y el antetítulo, sin bajar nada. */
.portadilla__texto { display: grid; gap: var(--espacio-4); }
.portadilla__texto > * { min-width: 0; margin: 0; }
.portadilla:has(> .ilustracion--cabecera) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--espacio-4); }
.portadilla:has(> .ilustracion--cabecera) > * { grid-column: 1 / -1; }
.portadilla > .ilustracion--cabecera { grid-column: 2; grid-row: 2; align-self: center; width: 96px; border-radius: var(--radio-m); }
@media (max-width: 59.99em) {
  .portadilla:has(> .ilustracion--cabecera) > .portadilla__texto { display: contents; }
  .portadilla__texto > * { grid-column: 1 / -1; }
  .portadilla__texto > .portadilla__antetitulo { grid-column: 1; align-self: center; }
}
@media (min-width: 40em) and (max-width: 59.99em) {
  .portadilla:has(> .ilustracion--cabecera) > .migas { grid-column: 1; }
  .portadilla > .ilustracion--cabecera { grid-row: 1 / span 2; width: 144px; }
}
@media (min-width: 60em) {
  .portadilla:has(> .ilustracion--cabecera) { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); column-gap: var(--canal); }
  .portadilla:has(> .ilustracion--cabecera) > .portadilla__texto { grid-column: 1; }
  .portadilla > .ilustracion--cabecera { grid-row: 2; width: 100%; border-radius: var(--radio-l); }
}

/* ---- Las áreas: «En 30 segundos», las cifras de dos en dos, cada una con su año, su fuente y su indicador --------- */
.treinta--area .treinta__cifras { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
/* Sin una cifra sola en su fila: tres, de tres en tres desde 40em (a dos columnas, la tercera quedaba sola a 768 px); cuatro
   (el gasto y tres indicadores), de dos en dos en la tableta y de cuatro en cuatro desde 60em. */
@media (min-width: 40em) { .treinta--area .treinta__cifras:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 60em) { .treinta--area .treinta__cifras:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.treinta-par__rotulo { margin: 0 0 var(--espacio-1); }
.treinta--area .treinta-par__valor { font-size: clamp(32px, 3.4vw, 42px); }
.treinta-par__fuente { margin: 0; font: var(--tipo-nota); color: var(--tinta-suave); }
.treinta__ticket .treinta-par__fuente { color: inherit; }
.treinta-par__fuente + .treinta-par__valor { margin-top: var(--espacio-3); padding-top: var(--espacio-4); border-top: var(--grosor-linea) solid var(--linea); }
@media (max-width: 39.99em) {
  .treinta--area .treinta__cifras > .treinta-par:not(:first-child) { display: grid; gap: var(--espacio-1); padding: var(--espacio-4) 0 var(--espacio-4) var(--espacio-4); }
  .treinta--area .treinta__cifras > .treinta-par:not(:first-child) .treinta__valor { font-size: 30px; }
  .treinta--area .treinta__cifras > .treinta-par:not(:first-child) .treinta__unidad { font-size: 16px; line-height: 22px; }
  .treinta--area .treinta__cifras > .treinta-par:not(:first-child) .treinta__frase { font-size: 15px; line-height: 21px; }
}

/* ---- Lo que va abierto dentro de un plegable: un plegable no lleva otro dentro (30-10-2026) ------------------------- */
/* Las tablas (<x-datos.tabla-plegada :plegada="false">), con su título y su nota encima, y un filete entre una y otra. */
.tabla-abierta { display: grid; gap: var(--espacio-2); }
.tabla-abierta > * { min-width: 0; margin: 0; }
.tabla-abierta + .tabla-abierta, .tabla-abierta + .compartir--en-linea { padding-top: var(--espacio-5); border-top: var(--grosor-linea) solid var(--linea); }
.tabla-abierta__titulo { font: 760 16px/22px var(--font-sans); }
.tabla-abierta__nota { font: var(--tipo-nota); color: var(--tinta-suave); text-wrap: pretty; }

/* ---- Las áreas: todos los indicadores de cada grupo a la vista, uno tras otro, con un filete entre ellos ------------- */
.grupo > :is(.indicador, .extranjeria__apartado) + :is(.indicador, .extranjeria__apartado) { padding-top: var(--espacio-8); border-top: var(--grosor-linea) solid var(--linea); }
/* La extranjería (en inmigración), como un indicador: su titular en el rail y lo demás en la lectura. */
.extranjeria__apartado { display: grid; gap: var(--espacio-4); }
.extranjeria__apartado > * { min-width: 0; margin: 0; }
.extranjeria__piezas { display: grid; gap: var(--espacio-5); }
.extranjeria__piezas > * { min-width: 0; margin: 0; }
@media (min-width: 60em) {
  .extranjeria__apartado { grid-template-columns: var(--pistas); column-gap: var(--canal); }
  .extranjeria__apartado > .indicador__pregunta { grid-column: rail; align-self: start; }
  .extranjeria__apartado > .indicador__pregunta ~ * { grid-column: lectura; }
}

/* ---- Las áreas: cada indicador, con su pregunta dentro; desde 60em, la pregunta, sus cifras y su fuente en el rail, al
   lado de la gráfica (en la web iban debajo, una tras otra: 300 px más por indicador) ---------------------------------- */
/* Lo de la lectura va en una caja (.indicador__lectura): rail y lectura miden cada uno lo suyo, sin huecos repartidos. */
.indicador__lado { display: contents; }
.indicador--rail .indicador__lado > .tlqp-nota { order: 1; }
.indicador__lectura { display: grid; gap: var(--espacio-5); align-content: start; }
.indicador__lectura > * { min-width: 0; margin: 0; }
/* La cifra de hoy, de lado a lado; las de hace 10 y 20 años, juntas debajo (en dos columnas, la de hace 20 quedaba sola
   en su fila). */
.pagina-area .indicador__cifra--hoy { grid-column: 1 / -1; }
@media (min-width: 60em) {
  .indicador--rail { grid-template-columns: var(--pistas); column-gap: var(--canal); align-items: start; }
  .indicador--rail > .indicador__lectura { grid-column: lectura; grid-row: 1; }
  .indicador--rail > .indicador__lado { grid-column: rail; grid-row: 1; display: grid; gap: var(--espacio-5); align-content: start; }
  .indicador__lado > * { margin: 0; min-width: 0; }
}

/* ---- Las áreas: por comunidades, la tabla a la vista; los mapas, plegados de lado a lado --------------------------- */
:is(.pagina-a-donde-van, .pagina-area) .bloque > .detalle.ancho-total { max-width: none; }
/* Dentro de un plegable de lado a lado, lo que se lee (un recuadro, un párrafo) sigue en la medida de lectura. */
:is(.pagina-a-donde-van, .pagina-area) .detalle.ancho-total > .detalle__cuerpo > :is(aside, p, .prosa) { max-width: var(--ancho-lectura); }
.pagina-area #comunidades .tabla-datos tbody :is(th, td) { padding-block: var(--espacio-2); }
/* Las columnas de cifras, iguales: con el reparto automático medían de 133 a 214 px y unas cabeceras iban en un renglón y
   otras en dos. */
@media (min-width: 60em) {
  .pagina-area #comunidades .tabla-datos { table-layout: fixed; }
  .pagina-area #comunidades .tabla-datos th[scope="row"] { white-space: nowrap; }
  .pagina-area #comunidades .tabla-datos thead th:first-child { width: 13em; }
}
/* El código para insertar un gráfico, entero: en la web es una caja con desplazamiento a la que no se llega con el
   teclado (axe: scrollable-region-focusable); son seis renglones. */
.pagina-area .compartir .copiable__texto { max-height: none; overflow: visible; }
.sigue__todas { margin: 0; font: 760 16px/22px var(--font-sans); }
.tlqp-ticket__redondeo { color: var(--tinta-suave); }

/* ==================================================================== fin de A DÓNDE VAN Y ÁREAS ==== */

/* ======================================================================================================================
   FASE A · ACCESIBILIDAD · los arreglos de WCAG 2.2 AA en las plantillas que siguen igual (inventario del 28-10-2026):
   lo que axe-core daba por grave sin cambiar el diseño. Las diferencias con legado, en tests/Paridad/FrontNuevoAccesibilidad.php.
   ====================================================================================================================== */
/* La banda de tinta pinta su fondo con border-image (ritmo.css), que no ven axe ni las herramientas de contraste: sus
   rótulos claros (.tema-invertido) salían sobre el papel claro (color-contrast en /provincias/, /paises/, /metodologia/…).
   El mismo color, también de fondo: a la vista no cambia nada. */
@media screen { :is(.banda--tinta, .bloque--tinta) { background-color: var(--banda-fondo); } }
/* «Un ejemplo» de la compra de vivienda en una comunidad: la explicación de cada caso era un <p> dentro del <dl>, que solo
   admite <dt> y <dd> (definition-list). Ahora es un segundo <dd>, con lo que tenía el <p> de territorios.css. */
.terr-ejemplos > div > .terr-ejemplos__detalle { grid-column: 1 / -1; font: var(--tipo-cuerpo-pequeno); letter-spacing: inherit; overflow-wrap: inherit; }
/* ==================================================================== fin de FASE A · ACCESIBILIDAD ==== */

/* ======================================================================================================================
   ILUSTRACIONES · la serie a brocha (public/imagenes/brocha/<nombre>.webp, 960 × 638), elegida por Julián el 28-10-2026.
   Solo en las puertas (tarjetas que llevan a otra página y la cabecera de cada área), nunca junto a una cifra.
   Son decorativas: alt="". Uso: <img class="ilustracion" src="/imagenes/brocha/sanidad.webp" width="960" height="638"
   alt="" loading="lazy"> como primer hijo de una .tarjeta-enlace (va a sangre arriba) o en la cabecera de un área
   (.ilustracion--cabecera). Si una página cambia el relleno de sus tarjetas, ajusta allí el margen negativo.
   ====================================================================================================================== */
.ilustracion { display: block; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--superficie-hundida); }
/* Con la tarjeta sin caja (ritmo.css, apartado 12), la ilustración va arriba a su ancho y hace de cabeza: sin trazo de brocha. */
.tlqp a.tarjeta-enlace:has(> .ilustracion:first-child) { padding-top: var(--espacio-4); }
.tlqp a.tarjeta-enlace:has(> .ilustracion:first-child)::before { content: none; }
.tarjeta-enlace > .ilustracion:first-child { width: 100%; margin: 0 0 var(--espacio-2); }
/* La de la cabecera, con la misma proporción que las de las tarjetas: su tamaño y su sitio, en la página que la usa. */
.ilustracion--cabecera { width: 100%; max-width: 480px; border-radius: var(--radio-l); }
/* ==================================================================== fin de ILUSTRACIONES ======================== */

/* ======================================================================================================================
   MÓVIL · E2 «Formato app», la versión del móvil que confirmó Julián el 2-11-2026 (Interfaz/movil/direccion-confirmada.md;
   el prototipo, Interfaz/movil/prototipos/e2-app). Solo por debajo de 40em: el escritorio y la tableta no cambian. Va la
   última para que mande en el móvil. Lo que lleva:
   - un solo menú, fijo abajo (components/pestanas.blade.php); «Más» sube el menú del móvil (#menu-movil) como una hoja;
   - arriba, una barra de 48 px con volver, el título de la página cuando el grande se ha ido y la lupa; se va al bajar y
     vuelve al subir (components/cabecera.blade.php, resources/js/_movil.js);
   - el buscador sin desplegable (la lupa lo baja desde arriba; las sugerencias, en una línea) y /buscar/ con el aspecto del
     desplegable de escritorio, cada grupo en su tarjeta;
   - el menú de anclas A, «Con título y botones» (components/indice.blade.php);
   - cada dato en su tarjeta sobre el papel, con menos margen a los lados para que los gráficos no pierdan ancho;
   - las dos filas de cada indicador, que suben una hoja, y la nota entera en la de «Qué mide y qué no»
     (components/areas/indicador.blade.php).
   ====================================================================================================================== */
/* Lo que solo es del móvil no se ve en lo demás. */
.pestanas, .cab__volver, .cab__titulo-movil, .cab__lupa, .cab__buscar--resultados, .indice-rotulo, .indice-pegado--movil,
.indice-pegado__todo, .indicador__nota-corta, .indicador__nota-hoja { display: none; }

@media (max-width: 39.99em) {
  :root { --alto-cab: 48px; --margen-lateral: var(--espacio-2); --alto-pestanas: 61px; }
  /* La fila de un plegable no se sale del margen, que aquí es de 8 px. */
  .pliegue { --pliegue-sangria: var(--espacio-2); }
  html { scroll-padding-top: calc(104px + env(safe-area-inset-top, 0px)); }
  .con-indice [id] { scroll-margin-top: 0; }
  body.tlqp { padding-top: env(safe-area-inset-top, 0px); padding-bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom, 0px)); }
  /* Con una hoja, el menú o el buscador abiertos, lo de detrás no se mueve. */
  html:has(.hoja:popover-open, .cab__movil:popover-open, .cab__lupa-panel:popover-open) { overflow: hidden; }

  /* ---- La barra de arriba: volver, el título y la lupa; en la portada, el logo. Se va al bajar ([data-bajando]). */
  .cab { transition: transform 0.18s ease-out; }
  [data-bajando] .cab { transform: translateY(calc(-100% - env(safe-area-inset-top, 0px))); }
  /* En el iPhone la página sube por debajo de la barra de estado (viewport-fit=cover, layouts/base): lo pegado arriba se pone
     debajo de ella y la tapa con su fondo, una sombra sin difuminar que sube lo que mide la barra. Sin barra, todo es 0. */
  .cab, [data-bajando] .indice-pegado { top: env(safe-area-inset-top, 0px); box-shadow: 0 calc(-1 * env(safe-area-inset-top, 0px)) 0 var(--papel); }
  .cab__barra { gap: 2px; padding-inline: var(--espacio-1); }
  .cab__logo { padding-left: var(--espacio-2); }
  .cab[data-con-volver] .cab__logo, .cab__menu { display: none; }
  .tlqp .cab__volver, .cab__lupa { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radio-pastilla); background: none; color: var(--tinta); cursor: pointer; }
  .tlqp a.cab__volver:hover { background: none; }
  :is(.cab__volver, .cab__lupa, .pestanas__icono, .indice-pegado__todo > summary) > .icono { width: 24px; height: 24px; vertical-align: 0; }
  .cab__lupa { margin-left: auto; }
  .cab__titulo-movil { display: block; flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font: 760 16px/20px var(--font-sans); white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity 0.15s; }
  .cab__titulo-movil[data-visible] { opacity: 1; }

  /* La lupa baja el buscador desde arriba (abajo lo taparía el teclado), con las sugerencias en una sola línea. */
  .cab__lupa-panel:popover-open { position: fixed; inset: 0 0 auto; display: grid; gap: var(--espacio-2); box-sizing: border-box; width: auto; max-width: none; margin: 0; padding: var(--espacio-1) var(--espacio-4) var(--espacio-3); border: 0; border-radius: 0 0 var(--radio-l) var(--radio-l); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra-elevada); animation: hoja-baja 0.2s ease-out; }
  .cab__lupa-panel::backdrop { background: var(--inverso); opacity: 0.4; }
  .cab__lupa-cabeza { display: flex; align-items: center; justify-content: space-between; }
  .cab__lupa-titulo { margin: 0; font: 760 19px/24px var(--font-sans); }
  .tlqp .cab__lupa-cerrar { width: 44px; padding: 0; justify-content: center; text-decoration: none; font: 400 26px/1 var(--font-sans); }
  .cab__lupa-panel .heroe__buscar { margin: 0; }
  /* Bajo la barra de estado del iPhone, y el campo del tamaño de los demás controles, no el grande de la portada. */
  .cab__lupa-panel:popover-open { padding-top: calc(var(--espacio-1) + env(safe-area-inset-top, 0px)); }
  .cab__lupa-panel .heroe__buscar .cab__buscar { min-height: var(--alto-control); }
  .cab__lupa-panel .heroe__buscar .cab__buscar input { height: 44px; font-size: 16px; }

  /* ---- Cada buscador, como el de la portada (Julián, 2-11-2026: «todo sitio donde aparezca un buscador sea siempre como
     lo hemos dejado en la HOME»): la pastilla de 56 px con la lupa y el botón negro dentro, y los ejemplos en una sola
     línea. El foco, el borde de tinta: el anillo de 3 px, con el campo enfocado al abrir la lupa, la hacía ver enorme. */
  .cab__buscar:focus-within, .buscador__fila:focus-within { outline: none; border-color: var(--tinta); }
  .cab__lugar-movil .cab__buscar { min-height: 56px; }
  .cab__lugar-movil .cab__buscar input { height: 52px; font-size: 17px; }
  /* En /buscar/ el campo ocupa la barra entera: sin el título de la página. */
  .cab:has(.cab__buscar--resultados) .cab__titulo-movil { display: none; }
  /* El de /impuestos/ y «Busca otro impuesto» de la ficha: su fila hace de pastilla y su caja y su botón van dentro. */
  .buscador__fila { flex-wrap: nowrap; align-items: center; gap: 0; box-sizing: border-box; min-height: 56px; border: var(--grosor-control) solid var(--linea-control); border-radius: var(--radio-pastilla); background: var(--superficie); box-shadow: var(--sombra-tarjeta); }
  .buscador__caja, .buscador__caja:hover, .buscador__caja:focus-within { flex: 1 1 auto; min-width: 0; min-height: 52px; border: 0; outline: none; background: none; box-shadow: none; }
  .buscador__caja::before { width: 18px; height: 18px; }
  .buscador__caja > input { height: 52px; padding: 0 var(--espacio-2) 0 var(--espacio-3); font-size: 16px; }
  /* Si el ejemplo no cabe, acaba en «…» y no a media palabra. */
  :is(.cab__buscar, .buscador__caja) input { text-overflow: ellipsis; }
  .tlqp .buscador__boton { flex: none; align-self: stretch; min-height: 0; margin: 3px; padding: 0 var(--espacio-4); border: 0; border-radius: var(--radio-pastilla); background: var(--inverso); color: var(--sobre-inverso); box-shadow: none; font: 760 15px/20px var(--font-sans); }
  .tlqp .buscador__boton:hover { background: var(--subrayador); color: var(--sobre-subrayador); }
  /* Los ejemplos de /impuestos/, como chips: «Por ejemplo:» y las comas se quedan para el lector de pantalla. */
  /* A 16 px del borde, como el de la portada y el titular de la página. */
  .buscador { padding-inline: var(--espacio-2); }
  #buscar .buscador__ejemplos { display: flex; gap: 3px; margin: -6px calc(-1 * var(--espacio-4)) 0; padding: 0 var(--espacio-4); overflow-x: auto; scrollbar-width: none; font-size: 0; line-height: 0; white-space: nowrap; }
  #buscar .buscador__ejemplos::-webkit-scrollbar { display: none; }
  .heroe__buscar-ejemplos { flex-wrap: nowrap; gap: 3px; margin: -6px calc(-1 * var(--espacio-4)) 0; padding: 0 var(--espacio-4); overflow-x: auto; scrollbar-width: none; }
  .heroe__buscar-ejemplos::-webkit-scrollbar { display: none; }
  .heroe__buscar-ejemplos li { flex: none; }
  .tlqp :is(.heroe__buscar-ejemplos, #buscar .buscador__ejemplos) a, .tlqp :is(.heroe__buscar-ejemplos, #buscar .buscador__ejemplos) a:hover { position: relative; display: inline-flex; flex: none; align-items: center; min-height: 44px; padding: 0 7px; border: 0; background: none; box-shadow: none; color: var(--tinta); font: 650 13px/16px var(--font-sans); text-decoration: none; white-space: nowrap; }
  .tlqp :is(.heroe__buscar-ejemplos, #buscar .buscador__ejemplos) a::before { content: ""; position: absolute; inset: 7px 0; border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-pastilla); }

  /* ---- El menú de abajo: siempre a mano. Calcula, en el centro, es el botón de la marca. */
  .pestanas { position: fixed; inset: auto 0 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); box-sizing: border-box; padding: var(--espacio-1) 2px calc(var(--espacio-1) + env(safe-area-inset-bottom, 0px)); border-top: var(--grosor-linea) solid var(--linea); background: var(--superficie); }
  .tlqp .pestanas__una { display: grid; justify-items: center; align-content: end; gap: 1px; min-width: 0; min-height: 52px; padding: 0; border: 0; border-radius: var(--radio-s); background: none; color: var(--tinta-suave); font: 650 12px/15px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 0.1s; }
  .tlqp .pestanas__una:hover { background: none; color: var(--tinta); }
  .tlqp .pestanas__una:active { transform: scale(0.95); }
  .pestanas__icono { display: grid; place-items: center; width: 52px; height: 30px; border-radius: var(--radio-pastilla); }
  .tlqp .pestanas [aria-current], .tlqp .pestanas__calcula { color: var(--tinta); font-weight: 860; }
  .pestanas [aria-current] .pestanas__icono { background: var(--subrayador); color: var(--sobre-subrayador); }
  /* Calcula asoma un poco: un círculo amarillo con filete fino, sin la sombra dura del botón de la portada (Javier, 2-11-2026:
     «que destaque sobre el resto pero no tanto»; elegida la C «Asoma», Interfaz/bloques/menu-inferior/). Estando en la
     calculadora, el filete engorda. */
  .pestanas__calcula .pestanas__icono { box-sizing: border-box; width: 44px; height: 44px; margin-top: -22px; border: var(--grosor-linea) solid var(--tinta); border-radius: 50%; background: var(--subrayador); box-shadow: 0 0 0 4px var(--superficie); }
  .pestanas__calcula[aria-current] .pestanas__icono { border-width: var(--grosor-control); }
  .pestanas__calcula .pestanas__icono img { display: block; width: 26px; height: 26px; }

  /* «Más»: el menú del móvil sube desde abajo, sin su buscador (está en la barra); primero Dónde vives y Datos. */
  .cab__movil { inset: auto 0 0 0; max-height: 85vh; max-height: 85dvh; padding: 0 var(--espacio-4) calc(var(--espacio-6) + env(safe-area-inset-bottom, 0px)); border: 0; border-radius: var(--radio-l) var(--radio-l) 0 0; background: var(--superficie); }
  .cab__movil:popover-open { animation: hoja-sube 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .cab__movil-cabeza { justify-content: flex-end; height: auto; padding-block: var(--espacio-2); background: var(--superficie); }
  .cab__movil-cabeza > .cab__buscar { display: none; }

  /* ---- La hoja: el cuerpo de una fila (data-hoja), en la capa de arriba (resources/js/_movil.js). */
  .detalle__cuerpo.hoja:popover-open { position: fixed; inset: auto 0 0; display: block; box-sizing: border-box; width: 100%; max-width: none; max-height: 85vh; max-height: 85dvh; margin: 0; padding: 0 var(--espacio-4) calc(var(--espacio-6) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: var(--radio-l) var(--radio-l) 0 0; background: var(--superficie); color: var(--tinta); font: var(--tipo-cuerpo-pequeno); overflow-wrap: anywhere; animation: hoja-sube 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .hoja::backdrop { background: var(--inverso); opacity: 0.55; }
  .hoja > * + * { margin-top: var(--espacio-3); }
  .hoja__cabeza { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 44px; column-gap: var(--espacio-2); align-items: center; margin: 0 calc(-1 * var(--espacio-4)) var(--espacio-2); padding: var(--espacio-2) var(--espacio-4) var(--espacio-1); border-bottom: var(--grosor-linea) solid var(--linea); background: var(--superficie); }
  .hoja__asa { grid-column: 1 / -1; justify-self: center; width: 36px; height: 4px; margin-bottom: var(--espacio-1); border-radius: 2px; background: var(--linea-control); }
  .hoja__titulo { margin: 0; font: 760 17px/22px var(--font-sans); text-wrap: balance; }
  .hoja__cerrar { width: 44px; height: 44px; border: 0; border-radius: var(--radio-pastilla); background: none; color: var(--tinta); font: 400 26px/1 var(--font-sans); cursor: pointer; }
  .hoja .tabla-marco { overflow-x: auto; }
  /* Sus pestañas, como en el prototipo; arrastrar la cabeza hacia abajo la cierra (resources/js/_movil.js). */
  .hoja__cabeza { touch-action: none; }
  .hoja__pestanas { grid-column: 1 / -1; display: flex; gap: var(--espacio-1); margin: var(--espacio-1) calc(-1 * var(--espacio-4)) calc(-1 * var(--espacio-1)); padding: 0 var(--espacio-4); overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
  .hoja__pestanas::-webkit-scrollbar { display: none; }
  .hoja__pestana { flex: none; min-height: 44px; padding: 0 var(--espacio-3); border: 0; border-bottom: 3px solid transparent; background: none; color: var(--tinta-suave); font: 650 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer; }
  .hoja__pestana[aria-selected="true"] { border-bottom-color: var(--subrayador); color: var(--tinta); }
  .hoja > [hidden] { display: none !important; }
  .hoja > [hidden] + :not([hidden]) { margin-top: 0; }
  .hoja .indicador__nota-hoja { padding-top: 0; border-top: 0; }

  /* ---- El menú de anclas A: el rótulo se queda en su sitio; los botones se pegan bajo la barra y marcan dónde estás. */
  .indice-rotulo { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--espacio-3); margin: var(--espacio-4) 0 0; padding: var(--espacio-3) var(--espacio-2) var(--espacio-1); border-top: var(--grosor-control) solid var(--tinta); }
  /* La ficha de un impuesto lleva su propio índice plegado en el móvil (bloque «IMPUESTOS Y FICHA»). */
  .pagina-ficha .indice-rotulo { display: none; }
  .indice-rotulo b { font: 860 19px/24px var(--font-sans); }
  .indice-rotulo span { font: var(--tipo-nota); color: var(--tinta-suave); }
  .indice-pegado, .indice-pegado--movil { position: sticky; top: calc(var(--alto-cab) + env(safe-area-inset-top, 0px)); z-index: 25; display: flex; margin-inline: calc(-1 * var(--margen-lateral)); padding: 0; border: 0; border-bottom: var(--grosor-linea) solid var(--linea); border-image: none; background-color: var(--papel); transition: top 0.18s ease-out; }
  .indice-pegado > ol { flex: 1 1 auto; min-width: 0; gap: var(--espacio-1); padding: 2px var(--espacio-3) 2px var(--espacio-2); isolation: isolate; -webkit-mask: linear-gradient(to right, black calc(100% - 20px), transparent); mask: linear-gradient(to right, black calc(100% - 20px), transparent); }
  .tlqp .indice-pegado > ol a { position: relative; padding: 0 var(--espacio-3); color: var(--tinta); font: 650 14px/20px var(--font-sans); }
  .tlqp .indice-pegado > ol a::before { content: ""; position: absolute; z-index: -1; inset: 6px 0; border: var(--grosor-linea) solid var(--linea-control); border-radius: var(--radio-pastilla); background: var(--superficie); }
  .tlqp .indice-pegado > ol a:hover { background: none; }
  .tlqp .indice-pegado > ol a[aria-current] { color: var(--sobre-subrayador); text-decoration: none; }
  .tlqp .indice-pegado > ol a[aria-current]::before { border-color: var(--tinta); background: var(--subrayador); }
  .indice-pegado__flecha, .indice-pegado__flecha[hidden] { display: none; }
  .indice-pegado__todo { display: block; flex: none; border-left: var(--grosor-linea) solid var(--linea); }
  .indice-pegado__todo > summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; }
  .indice-pegado__todo > summary::-webkit-details-marker { display: none; }
  .indice-pegado .indice-pegado__lista { display: block; margin: 0; padding: 0; overflow: visible; list-style: none; }
  .tlqp .indice-pegado__lista a { display: flex; align-items: center; min-height: 44px; padding-block: 11px; box-sizing: border-box; border-bottom: var(--grosor-linea) solid var(--linea); color: var(--tinta); text-decoration: none; font: 650 15px/20px var(--font-sans); white-space: normal; }
  .indice-pegado__lista li:last-child a { border-bottom: 0; }
  .tlqp .indice-pegado__lista a[aria-current] { background: var(--subrayador-suave); box-shadow: -8px 0 0 var(--subrayador-suave), 8px 0 0 var(--subrayador-suave); }

  /* ---- Cada dato, su tarjeta sobre el papel. Sin migas: para eso está volver. */
  .migas { display: none; }
  .portadilla { padding-inline: var(--espacio-2); }
  .portadilla > .ilustracion--cabecera { grid-row: 1; width: 56px; }
  .contenedor.heroe, .tlqp-pie .contenedor, .llamada { padding-inline: var(--espacio-4); }
  :is(.banda, .bloque--banda) { border-image: none; background: none; }
  main :is(.banda, .bloque) { margin-block: var(--espacio-2); padding: var(--espacio-5) var(--espacio-3); border: 0; border-radius: var(--radio-l); background: var(--superficie); }
  main .bloque .bloque { margin-inline: 0; padding-inline: 0; }
  main .bloque--tinta { background: var(--banda-fondo); }
  /* Un grupo de indicadores: su titular sobre el papel y cada indicador en su tarjeta. */
  main .bloque:has(> .indicador) { padding: var(--espacio-6) 0 0; background: none; }
  main .bloque:has(> .indicador) > :not(.indicador) { padding-inline: var(--espacio-2); }
  main .indicador { padding: var(--espacio-4) var(--espacio-3) var(--espacio-1); border-radius: var(--radio-l); background: var(--superficie); }
  .grupo > .indicador + .indicador { margin-top: calc(var(--espacio-5) - var(--espacio-2)); padding-top: var(--espacio-4); border-top: 0; }

  /* ---- El indicador: la pregunta, las cifras, la gráfica, la nota corta y las dos filas, una debajo de otra. */
  .indicador { gap: var(--espacio-3); }
  .indicador__lectura { display: contents; }
  .indicador--rail .indicador__lado > .tlqp-nota { display: none; }
  .indicador__nota-corta { display: block; order: 1; }
  .indicador__nota-corta .tlqp-nota { margin: 0; }
  .indicador__plegables { order: 2; }
  .indicador__nota-hoja { display: block; margin-top: var(--espacio-4); padding-top: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); }
  .indicador__plegables > .detalle:last-child { border-bottom: 0; }
  /* La nota larga de una raya: a la vista, su última frase (data-corta); entera, en la hoja de «Qué mide y qué no». */
  .indicador__raya-entera { display: none; }
  .indicador__raya::after { content: attr(data-corta); }

  /* ---- /buscar/: el campo en la barra; los resultados, con el aspecto del desplegable de escritorio. */
  .cab__buscar--resultados { display: flex; flex: 1 1 auto; margin-right: var(--espacio-1); box-shadow: none; }
  .cab__buscar--resultados button { padding-inline: var(--espacio-3); }
  .buscar > .titular-1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .buscar > .buscar__campo { display: none; }
  .buscar { gap: var(--espacio-2); padding-block: var(--espacio-2) var(--espacio-6); }
  .buscar__estado { padding: 0 var(--espacio-2) var(--espacio-2); font: 650 15px/20px var(--font-sans); text-wrap: pretty; }
  :is(.buscar__grupo, .buscar__mas-buscado, .buscar__mejor) { margin: 0; padding: var(--espacio-2); border: 0; border-radius: var(--radio-l); background: var(--superficie); }
  .buscar__mejor { padding: var(--espacio-4) var(--espacio-3); }
  .buscar__grupo-titulo { gap: var(--espacio-2); margin: 0; padding: var(--espacio-2) var(--espacio-3) 2px; font: var(--tipo-etiqueta); letter-spacing: var(--tipo-etiqueta-espaciado); text-transform: uppercase; color: var(--tinta-suave); }
  .buscar__grupo-titulo .buscar__n { font: inherit; }
  .buscar__filas > li { position: relative; gap: 2px; min-height: 44px; box-sizing: border-box; padding: var(--espacio-2) var(--espacio-3); border: 0; border-radius: var(--radio-s); }
  .buscar__filas > li:has(a:hover) { background: var(--subrayador-suave); }
  .tlqp .buscar__filas > li > a { font: 650 16px/22px var(--font-sans); color: var(--tinta); text-decoration: none; }
  .tlqp .buscar__filas > li > a:hover { background: none; }
  .buscar__filas > li > a::after { content: ""; position: absolute; inset: 0; }
  .buscar__filas mark { font-weight: 860; text-decoration: underline; text-decoration-color: var(--subrayador); text-decoration-thickness: 3px; text-underline-offset: 3px; }
  /* ---- La barra de la cifra de las calculadoras (calculadora.css), encima de las pestañas y no debajo. */
  .calc-barra, .pagina-calculadora .calc-barra { bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom, 0px)); padding-bottom: var(--espacio-2); }

  /* ---- Los casos, de 25 en 25 (resources/js/_movil.js). */
  .lista-casos > li[hidden], .tlqp .casos-mas[hidden] { display: none; }
  .tlqp .casos-mas { width: 100%; margin-top: var(--espacio-3); }

  .buscar__mas { border: 0; }
  .buscar__mas > summary { padding-inline: var(--espacio-3); border-top: var(--grosor-linea) solid var(--linea); font: 760 15px/22px var(--font-sans); }
}
@keyframes hoja-sube { from { transform: translateY(40px); opacity: 0.6; } }
@keyframes hoja-baja { from { transform: translateY(-40px); opacity: 0.6; } }
@media (max-width: 39.99em) and (prefers-reduced-motion: reduce) {
  .cab, .indice-pegado, .cab__titulo-movil, .pestanas__una { transition: none; }
  .cab__lupa-panel:popover-open, .cab__movil:popover-open, .detalle__cuerpo.hoja:popover-open { animation: none; }
}
@media (max-width: 21.99em) { .tlqp .pestanas__una { font-size: 11px; letter-spacing: -0.01em; } }
/* A 320 px, el buscador de /impuestos/ y de la ficha con los márgenes del de la portada (bloque «PORTADA»). La letra, en
   16 px y no en 15: por debajo de 16, el iPhone amplía la página al tocar el campo. */
@media (max-width: 23.99em) {
  .buscador__caja > input { padding-inline: var(--espacio-2) 0; }
  .buscador__caja::before { margin-left: var(--espacio-3); }
  .tlqp .buscador__boton { padding-inline: var(--espacio-3); }
  :is(.heroe__buscar, .cab__lugar-movil) .cab__buscar input { font-size: 16px; }
}
/* El botón de las cookies de ADOPT (lo pone Tag Manager, fijo a 20 px de la esquina y de 60 px) tapaba la pestaña «Inicio»:
   en el móvil, encima del menú de abajo y del tamaño de un control (4-11-2026). Y encima de lo que se quede fijo sobre el
   menú, como la barra de la calculadora: su alto lo mide el script del final de layouts/base (--sobre-pestanas, 6-11-2026). */
@media (max-width: 39.99em) {
  #adopt-controller-button { bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom, 0px) + var(--sobre-pestanas, 0px) + var(--espacio-3)) !important; left: var(--espacio-3) !important; width: 44px !important; height: 44px !important; transition: bottom 0.2s ease-out; }
}
@media (max-width: 39.99em) and (prefers-reduced-motion: reduce) { #adopt-controller-button { transition: none; } }
/* ==================================================================== fin de MÓVIL ================================ */