/* Comparador de Municipios: hoja de estilo única.
   Idea: la "regla de España". Cada cifra se sitúa con una chincheta sobre una regla de 40 marcas
   (cada marca agrupa unos 200 de los 8.132 municipios). */

/* Paleta: verde bosque #1f6b45 + mostaza #e3b23c. La mostaza solo se usa como superficie o acento
   (1,96:1 sobre blanco: nunca como texto sobre fondo claro). */
:root {
  color-scheme: light dark;
  --papel: #ffffff;        /* fondo de página */
  --papel-2: #eaf1e9;      /* superficie suave */
  --banda: #f6f8f4;        /* bandas de fondo */
  --tinta: #17301f;        /* texto */
  --tinta-suave: #566259;  /* texto secundario */
  --agua: #1f6b45;         /* enlaces y datos (verde bosque) */
  --primario: #1f6b45;     /* botones */
  --curva: #e3b23c;        /* mostaza */
  --mostaza: #e3b23c;
  --hito: #1f6b45;         /* foco y marcas */
  --linea: #cdd8cd;
  --regla: #9db2a1;
  --menta: #dcebe1;
  --oscuro: #17301f;       /* cabecera, portada y pie */
  --oro: #8a5600;
  --amarillo-suave: #fdf3d8;
  --estrella: #b87600;
  --superficie: #ffffff;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: var(--sans);
  --ancho: 72rem;
  --radio: 8px;
  --r2: 12px; --r3: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --papel: #0f1a13; --papel-2: #1a2b20; --banda: #14211a; --tinta: #e8f0e8; --tinta-suave: #a7b8ac;
    --agua: #6fcf9a; --primario: #2a7d52; --hito: #6fcf9a; --linea: #2f4236; --regla: #4c6354; --menta: #1d3326;
    --oro: #f1c768; --amarillo-suave: #2b2610; --estrella: #e3b23c; --superficie: #15221a;
  }
}
:root[data-theme='dark'] {
  --papel: #0f1a13; --papel-2: #1a2b20; --banda: #14211a; --tinta: #e8f0e8; --tinta-suave: #a7b8ac;
  --agua: #6fcf9a; --primario: #2a7d52; --hito: #6fcf9a; --linea: #2f4236; --regla: #4c6354; --menta: #1d3326;
  --oro: #f1c768; --amarillo-suave: #2b2610; --estrella: #e3b23c; --superficie: #15221a;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
a { color: var(--agua); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--hito); outline-offset: 2px; }
img, svg { max-width: 100%; }

.envoltura { max-width: var(--ancho); margin: 0 auto; padding: 0 1rem; }

/* ---------- Cabecera y pie ---------- */
.cabecera { border-bottom: 1px solid var(--linea); }
.cabecera .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; }
.marca { font-weight: 800; font-stretch: 112%; text-decoration: none; color: var(--tinta); font-size: 1.15rem; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 0.5rem; }
.marca svg { width: 2rem; height: 1.8rem; }
.cabecera nav { display: flex; gap: 1.1rem; font-size: 0.95rem; }
.cabecera nav a { color: var(--tinta); text-decoration: none; }
.cabecera nav a:hover { text-decoration: underline; }

.pie { margin-top: 4rem; border-top: 1px solid var(--linea); padding: 2rem 0 3rem; font-size: 0.9rem; color: var(--tinta-suave); }
.pie .envoltura { display: grid; gap: 1rem; }
.pie nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.pie a { color: var(--tinta-suave); }

/* ---------- Tipografía ---------- */
h1, h2, h3 { line-height: 1.12; margin: 0; letter-spacing: -0.015em; }
.titulo-pueblo {
  font-size: clamp(2.3rem, 8vw, 4.6rem);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.03em;
  overflow-wrap: anywhere;
}
h2 { font-size: 1.55rem; font-weight: 700; font-stretch: 110%; margin: 3rem 0 0.25rem; }
h3 { font-size: 1.05rem; font-weight: 600; }
.prosa { font-family: var(--serif); font-size: 1.125rem; line-height: 1.65; max-width: 38rem; }
.prosa p { margin: 0 0 1rem; }
.nota { color: var(--tinta-suave); font-size: 0.9rem; }
.migas { font-size: 0.9rem; color: var(--tinta-suave); margin: 1.25rem 0 0.75rem; }
.migas a { color: var(--tinta-suave); }

/* ---------- Cabecera de ficha: cartel de entrada de pueblo ---------- */
.cartel { padding: 1.5rem 0 1rem; }
.cartel .sub { margin-top: 0.6rem; font-size: 1.1rem; color: var(--tinta-suave); }
.cartel .sub strong { color: var(--tinta); }

/* ---------- Buscador y comparador ---------- */
.portada { padding: 3.5rem 0 2rem; }
.portada h1 { font-size: clamp(2rem, 6.5vw, 3.6rem); font-weight: 800; font-stretch: 118%; max-width: 15ch; letter-spacing: -0.03em; }
.portada .entrada { max-width: 40rem; margin-top: 1rem; font-family: var(--serif); font-size: 1.2rem; color: var(--tinta-suave); }
.comparar-form { margin-top: 2rem; display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 0.75rem; align-items: end; max-width: 52rem; }
.comparar-form .con { padding-bottom: 0.8rem; color: var(--tinta-suave); }
@media (max-width: 720px) {
  .comparar-form { grid-template-columns: 1fr; }
  .comparar-form .con { padding: 0; }
}
.campo { position: relative; display: grid; gap: 0.3rem; }
.campo label { font-size: 0.9rem; color: var(--tinta-suave); }
.campo input {
  font: inherit; font-size: 1.15rem; padding: 0.75rem 0.9rem; width: 100%;
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: var(--radio);
}
.campo input::placeholder { color: var(--tinta-suave); opacity: 0.8; }
.boton {
  font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  padding: 0.85rem 1.3rem; border-radius: var(--radio);
  background: var(--tinta); color: var(--papel); border: 2px solid var(--tinta);
}
.boton:hover { background: var(--agua); border-color: var(--agua); }
.sugerencias {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 0.25rem 0 0; padding: 0.25rem 0;
  list-style: none; background: var(--papel); border: 2px solid var(--tinta); border-radius: var(--radio);
  max-height: 18rem; overflow-y: auto;
}
.sugerencias li { padding: 0.5rem 0.9rem; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; }
.sugerencias li[aria-selected='true'], .sugerencias li:hover { background: var(--papel-2); }
.sugerencias small { color: var(--tinta-suave); white-space: nowrap; }
.buscador-cabecera { min-width: min(18rem, 100%); }
.buscador-cabecera input { font-size: 1rem; padding: 0.45rem 0.7rem; border-width: 1.5px; }

/* ---------- Filas de datos con escala gráfica ---------- */
.bloque { margin-top: 0.5rem; }
.bloque > .nota { margin: 0.25rem 0 1rem; }
.fila {
  display: grid; grid-template-columns: minmax(10rem, 1.2fr) minmax(8rem, 1fr) minmax(12rem, 1.4fr);
  gap: 0.4rem 1.5rem; align-items: center; padding: 1rem 0; border-top: 1px solid var(--linea);
}
.fila:last-child { border-bottom: 1px solid var(--linea); }
.fila .etiqueta { font-weight: 600; }
.fila .etiqueta small { display: block; font-weight: 400; color: var(--tinta-suave); font-size: 0.85rem; }
.fila .valor { font-size: 1.6rem; font-weight: 700; font-stretch: 105%; letter-spacing: -0.01em; }
.fila .contexto { grid-column: 2 / 4; font-size: 0.92rem; color: var(--tinta-suave); }
.propio { display: inline-block; font-size: 0.75rem; font-weight: 600; border: 1px solid var(--curva); color: var(--curva); border-radius: 2px; padding: 0 0.3rem; vertical-align: 0.15em; margin-left: 0.3rem; }
@media (max-width: 720px) {
  .fila { grid-template-columns: 1fr auto; }
  .fila .escala-caja { grid-column: 1 / 3; }
  .fila .contexto { grid-column: 1 / 3; }
}

/* Escala gráfica de mapa: tramos alternos tinta/papel; el hito rojo marca la posición */
.escala-caja { position: relative; padding-top: 0.9rem; }
.escala {
  height: 0.55rem; border: 1.5px solid var(--tinta);
  background: repeating-linear-gradient(90deg, var(--tinta) 0 20%, var(--papel) 20% 40%);
}
.escala-extremos { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--tinta-suave); margin-top: 0.2rem; }
.hito {
  position: absolute; top: 0; width: 0; height: 0; transform: translateX(-50%);
  border-left: 0.45rem solid transparent; border-right: 0.45rem solid transparent; border-top: 0.75rem solid var(--hito);
}
.hito.b { border-top-color: var(--agua); }
.hito::after { content: ''; position: absolute; left: -1px; top: -0.75rem; width: 2px; height: 1.6rem; background: currentColor; display: none; }

/* Barra de composición (fuentes de ingresos) */
.reparto { display: flex; height: 1.4rem; border: 1.5px solid var(--tinta); border-radius: 2px; overflow: hidden; margin-top: 0.4rem; }
.reparto span { display: block; height: 100%; }
.reparto .s1 { background: var(--tinta); }
.reparto .s2 { background: var(--curva); }
.reparto .s3 { background: var(--hito); }
.reparto .s4 { background: var(--papel-2); }
.leyenda { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; font-size: 0.88rem; margin-top: 0.5rem; }
.leyenda i { display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.35rem; vertical-align: -0.05em; border: 1px solid var(--tinta); }

/* Aviso de dato ausente */
.sin-dato { padding: 1rem 1.1rem; border-left: 4px solid var(--curva); background: var(--papel-2); margin: 1rem 0; max-width: 44rem; }

/* ---------- Listas de enlaces ---------- */
.rejilla-enlaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.2rem 1.5rem; padding: 0; list-style: none; margin: 1rem 0; }
.rejilla-enlaces li { padding: 0.45rem 0; border-bottom: 1px dashed var(--linea); display: flex; justify-content: space-between; gap: 0.5rem; }
.rejilla-enlaces small { color: var(--tinta-suave); }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: right; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; white-space: normal; }
th { font-weight: 600; border-bottom: 2px solid var(--tinta); }
th button { font: inherit; font-weight: 600; background: none; border: 0; color: var(--tinta); cursor: pointer; padding: 0; }
th[aria-sort='ascending'] button::after { content: ' ▲'; font-size: 0.7em; }
th[aria-sort='descending'] button::after { content: ' ▼'; font-size: 0.7em; }

/* ---------- Comparador ---------- */
.cmp-cabecera { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 0.5rem; }
.cmp-cabecera .titulo-pueblo { font-size: clamp(1.6rem, 5vw, 2.8rem); }
.cmp-cabecera .a { border-top: 6px solid var(--hito); padding-top: 0.6rem; }
.cmp-cabecera .b { border-top: 6px solid var(--agua); padding-top: 0.6rem; }
.cmp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; padding: 1rem 0; border-top: 1px solid var(--linea); }
.cmp-fila .etiqueta { grid-column: 1 / 3; font-weight: 600; }
.cmp-fila .valor { font-size: 1.35rem; font-weight: 700; }
.cmp-fila .escala-caja, .cmp-fila .contexto { grid-column: 1 / 3; }
.cmp-fila .contexto { font-size: 0.92rem; color: var(--tinta-suave); }

@media (prefers-reduced-motion: no-preference) {
  .hito { transition: left 0.4s ease; }
}

/* ---------- Foto del pueblo ---------- */
.foto-pueblo { margin: 0.5rem 0 0; }
.foto-pueblo img {
  display: block; width: 100%; height: clamp(14rem, 42vw, 30rem); object-fit: cover;
  border: 1.5px solid var(--tinta); border-radius: var(--radio); background: var(--papel-2);
}

/* ---------- De un vistazo: cuatro cifras como la leyenda de un mapa ---------- */
.vistazo {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: 0.5rem 0 1.5rem;
  border-top: 3px solid var(--tinta); border-bottom: 1px solid var(--linea);
}
.vistazo > div { padding: 0.9rem 1rem 1rem 0; }
.vistazo > div + div { padding-left: 1rem; border-left: 1px solid var(--linea); }
.vistazo dt { font-size: 0.9rem; color: var(--tinta-suave); }
.vistazo dd { margin: 0.2rem 0 0; display: grid; gap: 0.15rem; }
.vistazo .cifra { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.1; }
@media (max-width: 720px) {
  .vistazo { grid-template-columns: 1fr 1fr; }
  .vistazo > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .vistazo > div:nth-child(n+3) { border-top: 1px solid var(--linea); }
}

/* ---------- Índice fijo de la ficha ---------- */
.indice-ficha {
  position: sticky; top: 0; z-index: 30; display: flex; gap: 1.2rem; overflow-x: auto;
  background: var(--papel); border-bottom: 1px solid var(--linea); padding: 0.7rem 0; margin-top: 1.5rem;
  scrollbar-width: none;
}
.indice-ficha a { color: var(--tinta); text-decoration: none; font-weight: 600; white-space: nowrap; font-size: 0.95rem; }
.indice-ficha a:hover { color: var(--agua); }
h2[id] { scroll-margin-top: 4rem; }

/* ---------- Ubicación ---------- */
.ubicacion { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; margin-top: 1rem; }
@media (max-width: 860px) { .ubicacion { grid-template-columns: 1fr; } }
.minimapa { height: 22rem; border: 1.5px solid var(--tinta); border-radius: var(--radio); background: var(--papel-2); }
.distancias { margin: 0; display: grid; gap: 0.6rem; }
.distancias dt { font-size: 0.9rem; color: var(--tinta-suave); }
.distancias dd { margin: 0; font-size: 1.15rem; font-weight: 600; }
.lista-cercanos { list-style: none; padding: 0; margin: 0.5rem 0; }
.lista-cercanos li { display: grid; grid-template-columns: 1fr auto auto; gap: 0.2rem 0.8rem; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px dashed var(--linea); }
.lista-cercanos small { color: var(--tinta-suave); }
.mini-cmp { font-size: 0.85rem; }

/* ---------- Botones y controles ---------- */
.boton-claro { background: var(--papel); color: var(--tinta); display: inline-block; text-decoration: none; }
.boton-claro:hover { color: var(--papel); }
.atajo-mapa { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
select {
  font: inherit; font-size: 1rem; padding: 0.6rem 0.7rem; width: 100%;
  background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); border-radius: var(--radio);
}
input[type='range'] { width: 100%; accent-color: var(--hito); }
.casilla { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.95rem; }
.casilla input { accent-color: var(--hito); margin-top: 0.3rem; }
output { font-weight: 700; color: var(--tinta); }

/* ---------- Buscador por mapa ---------- */
.main-mapa { max-width: none; margin: 0; padding: 0; }
.mapa-disposicion { display: grid; grid-template-columns: 23rem 1fr; height: calc(100vh - 3.6rem); min-height: 30rem; }
.panel-mapa { overflow-y: auto; padding: 1.2rem 1rem 2rem; border-right: 1px solid var(--linea); display: grid; gap: 0.9rem; align-content: start; }
.titulo-panel { font-size: 1.7rem; font-weight: 800; font-stretch: 115%; }
.mapa-grande { height: 100%; background: var(--papel-2); }
.leyenda-mapa { display: grid; gap: 0.25rem; font-size: 0.88rem; }
.leyenda-mapa i { display: inline-block; width: 0.9rem; height: 0.9rem; border-radius: 50%; border: 1px solid var(--tinta); margin-right: 0.45rem; vertical-align: -0.1em; }
@media (max-width: 860px) {
  .mapa-disposicion { grid-template-columns: 1fr; height: auto; }
  .mapa-grande { height: 62vh; order: -1; }
  .panel-mapa { border-right: 0; overflow: visible; }
}
.leaflet-container { font-family: var(--sans); }
.leaflet-popup-content { font-size: 0.95rem; line-height: 1.45; }

/* ---------- Rankings ---------- */
.tabla-ranking td:first-child { color: var(--tinta-suave); width: 3rem; }
.tabla-ranking td:nth-child(2), .tabla-ranking th:nth-child(2), .tabla-ranking td:nth-child(3), .tabla-ranking th:nth-child(3) { text-align: left; }

/* ---------- Comparador: fotos y diferencias ---------- */
.cmp-cabecera img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 1.5px solid var(--tinta); border-radius: var(--radio); margin-bottom: 0.6rem; }
.cmp-cabecera .credito { font-size: 0.72rem; color: var(--tinta-suave); }
.destacadas { border-top: 3px solid var(--tinta); margin: 1.5rem 0 0.5rem; padding-top: 0.8rem; }
.destacadas ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.vistas-mapa { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.vistas-mapa .boton { font-size: 0.9rem; padding: 0.45rem 0.8rem; }
.vistazo .cifra { white-space: nowrap; font-size: clamp(1.35rem, 3vw, 2rem); }

/* ---------- Punto de información ---------- */
.info { position: relative; display: inline-block; margin-left: 0.35rem; vertical-align: 0.1em; }
.info-boton {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1.5px solid var(--agua); background: var(--papel);
  color: var(--agua); font: 700 0.72rem/1 var(--serif); font-style: italic; cursor: help; padding: 0;
  display: inline-grid; place-items: center;
}
.info-texto {
  position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 0.5rem); transform: translateX(-50%);
  width: min(18rem, 80vw); padding: 0.7rem 0.8rem; border-radius: var(--radio);
  background: var(--tinta); color: var(--papel); font: 400 0.88rem/1.45 var(--sans); text-align: left;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.18); visibility: hidden; opacity: 0; pointer-events: none;
}
.info-texto::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--tinta); }
.info:hover .info-texto, .info:focus-within .info-texto, .info.abierto .info-texto { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .info-texto { transition: opacity 0.15s ease; } }
@media (max-width: 720px) { .info-texto { left: 0; transform: none; } .info-texto::after { left: 0.6rem; } }

/* ---------- Servicios y ayudas ---------- */
.sub-bloque { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.servicios { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0 1.5rem; }
.servicios li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px dashed var(--linea); }
.servicios li strong { font-size: 1.1rem; }
.servicios li.cero { color: var(--tinta-suave); }
.ayudas { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.ayudas li { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.8rem; padding: 0.6rem 0; border-bottom: 1px dashed var(--linea); }
.ayudas time { color: var(--tinta-suave); font-size: 0.92rem; }
@media (max-width: 560px) { .ayudas li { grid-template-columns: 1fr; gap: 0.1rem; } }

/* ---------- Prioridades y valoración ---------- */
.prioridades { display: grid; gap: 0.8rem; }
.perfiles { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { font: inherit; font-size: 0.92rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--tinta); background: var(--papel); color: var(--tinta); cursor: pointer; }
.chip[aria-pressed='true'] { background: var(--tinta); color: var(--papel); }
.barras { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.6rem 1.5rem; }
.barra label { font-weight: 600; }
.barra small { font-size: 0.8rem; }
.valoracion { display: grid; gap: 1.2rem; margin-top: 0.8rem; }
.resultado-valoracion { border-top: 3px solid var(--tinta); padding-top: 0.8rem; }
.nota-valoracion { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; font-size: 1.1rem; }
.cifra-grande { font-size: 3rem; font-weight: 800; font-stretch: 115%; color: var(--hito); line-height: 1; }
.razones { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; line-height: 1.5; }
.razones li { margin-bottom: 0.3rem; }

/* ---------- Filtrar ---------- */
.filtrar-disposicion { display: grid; grid-template-columns: 22rem 1fr; gap: 2rem; align-items: start; margin-top: 1.5rem; }
.panel-filtros { display: grid; gap: 0.9rem; position: sticky; top: 0.5rem; max-height: calc(100vh - 1rem); overflow-y: auto; padding-right: 0.5rem; }
.panel-filtros .barras { grid-template-columns: 1fr; }
@media (max-width: 960px) { .filtrar-disposicion { grid-template-columns: 1fr; } .panel-filtros { position: static; max-height: none; overflow: visible; } }
.tabla-top th { white-space: normal; font-size: 0.85rem; }

/* ---------- Opiniones ---------- */
.opiniones { display: grid; gap: 1rem; margin-top: 0.8rem; }
.op-media { display: flex; align-items: center; gap: 1rem; }
.estrellas { letter-spacing: 0.05em; white-space: nowrap; }
.est { color: var(--linea); }
.est.llena { color: #d9a400; }
.est.media { background: linear-gradient(90deg, #d9a400 50%, var(--linea) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.op-reparto { display: grid; gap: 0.25rem; max-width: 22rem; font-size: 0.9rem; }
.op-reparto div { display: grid; grid-template-columns: 2.5rem 1fr 2rem; gap: 0.5rem; align-items: center; }
.barra-op { height: 0.55rem; background: var(--papel-2); border: 1px solid var(--linea); }
.barra-op i { display: block; height: 100%; background: #d9a400; }
.op-criterios td, .op-criterios th { text-align: left; }
.op-form { display: grid; gap: 0.9rem; border-top: 3px solid var(--tinta); padding-top: 0.9rem; }
.op-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.6rem 1.5rem; }
.op-estrellas { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.op-estrellas legend { font-weight: 600; margin-bottom: 0.3rem; width: 100%; }
.op-estrellas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.op-estrellas label { border: 1.5px solid var(--linea); border-radius: 999px; padding: 0.25rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.op-estrellas input:checked + label { background: #d9a400; border-color: #d9a400; color: #1b1b1b; font-weight: 700; }
.op-estrellas input:focus-visible + label { outline: 3px solid var(--hito); outline-offset: 2px; }
.op-form textarea { font: inherit; padding: 0.6rem 0.8rem; border: 2px solid var(--tinta); border-radius: var(--radio); background: var(--papel); color: var(--tinta); width: 100%; }
.op-lista { list-style: none; padding: 0; margin: 0; }
.op-lista li { border-top: 1px solid var(--linea); padding: 0.8rem 0; }
.op-lista p { margin: 0.4rem 0; font-family: var(--serif); }
.enlace-denuncia { background: none; border: 0; padding: 0; color: var(--tinta-suave); font: inherit; font-size: 0.82rem; text-decoration: underline; cursor: pointer; }

/* ---------- Desglose de servicios ---------- */
.desglose summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.desglose summary::-webkit-details-marker { display: none; }
.desglose summary::before { content: '+'; font-weight: 700; color: var(--agua); width: 1rem; }
.desglose[open] summary::before { content: '−'; }
.desglose summary span { flex: 1; }
.desglose ul { list-style: none; padding: 0.4rem 0 0.4rem 1rem; margin: 0; max-height: 22rem; overflow-y: auto; }
.desglose ul li { padding: 0.3rem 0; border-bottom: 1px dotted var(--linea); display: block; }
.desglose ul li small { display: block; color: var(--tinta-suave); }
.servicios li.con-desglose { display: block; }
.servicios { align-items: start; }
.mini-mapa { font-size: 0.8rem; margin-left: 0.3rem; color: var(--tinta-suave); }

/* ---------- Sellos, hallazgos y compartir ---------- */
.sellos { margin: 0.4rem 0 1rem; }
.sello { display: inline-block; background: var(--mostaza); color: #1b1b1b; font-weight: 700; font-size: 0.85rem; padding: 0.2rem 0.6rem; border-radius: 999px; margin: 0.15rem 0.2rem 0.15rem 0; }
.codigo { white-space: pre-wrap; word-break: break-all; background: var(--papel-2); padding: 0.6rem; font-size: 0.8rem; border-radius: var(--radio); }
.hallazgos { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 0.8rem; }
.hallazgos a { display: grid; gap: 0.3rem; padding: 1rem; border: 1.5px solid var(--linea); border-left: 5px solid var(--agua); border-radius: var(--radio); text-decoration: none; color: var(--tinta); height: 100%; }
.hallazgos a:hover { border-color: var(--agua); }
.hallazgos span { color: var(--tinta-suave); font-size: 0.92rem; }
.compartir { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.92rem; }
.cerca-portada { margin-top: 1rem; }

/* =====================================================================================
   Rediseño: nueva piel sobre los componentes existentes (los nombres de clase y los ids
   que usa el JavaScript no cambian).
   ===================================================================================== */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-size: 1.0625rem; }
a { text-decoration-thickness: 1px; }
:focus-visible { outline: 3px solid var(--hito); outline-offset: 3px; border-radius: 3px; }
.oscuro :focus-visible, .cabecera :focus-visible, .pie :focus-visible { outline-color: var(--mostaza); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--mostaza); color: #17301f; padding: 0.7rem 1rem; border-radius: 6px; font-weight: 700; }
.saltar:focus { top: 0.75rem; }
.envoltura { width: min(100% - 2rem, var(--ancho)); max-width: none; margin-inline: auto; padding: 0; }
main.main-completo { display: block; }
h1, h2, h3 { text-wrap: balance; }
.prosa { font-family: var(--sans); font-size: 1.1rem; line-height: 1.65; }
.nota { font-size: 0.875rem; }

/* ---------- Cabecera ---------- */
.cabecera { background: var(--oscuro); color: #fff; border-bottom: 0; }
.cabecera .envoltura { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-block: 0.7rem; min-height: 0; justify-content: flex-start; }
.marca { order: 1; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; font-weight: 800; font-stretch: 110%; font-size: clamp(0.95rem, 4.4vw, 1.2rem); letter-spacing: -0.01em; }
.marca svg { width: 2.3rem; height: auto; }
.menu-boton { order: 2; margin-left: auto; display: none; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; min-width: 2.75rem; font: inherit; font-weight: 600; color: #fff; background: transparent; border: 2px solid rgb(255 255 255 / 0.45); border-radius: 999px; padding: 0 1rem; cursor: pointer; }
.js .menu-boton { display: inline-flex; }
.menu-boton svg { width: 1.1rem; height: 1.1rem; }
.cabecera .buscador-cabecera { order: 3; flex: 1 1 100%; min-width: 0; }
.cabecera .buscador-cabecera input { height: 2.75rem; border-radius: 999px; border: 2px solid transparent; background: #fff; color: #17301f; font-size: 1rem; padding: 0 1.1rem; width: 100%; }
.cabecera .buscador-cabecera input::placeholder { color: #566259; opacity: 1; }
.cabecera nav { order: 4; flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.15rem; padding-bottom: 0.4rem; font-size: 1rem; }
.js .cabecera nav:not(.abierto) { display: none; }
.cabecera nav a { color: #E6F0E4; text-decoration: none; padding: 0.7rem 0.9rem; border-radius: 999px; font-weight: 500; }
.cabecera nav a:hover { background: rgb(255 255 255 / 0.1); color: #fff; text-decoration: none; }
.cabecera nav a[aria-current='page'] { background: var(--mostaza); color: #17301f; font-weight: 700; }
@media (min-width: 1180px) {
  .cabecera .envoltura { flex-wrap: nowrap; }
  .js .menu-boton { display: none; }
  .cabecera nav, .js .cabecera nav:not(.abierto) { display: flex; order: 2; flex: 0 1 auto; flex-direction: row; margin-left: auto; gap: 0.1rem; padding: 0; }
  .cabecera nav a { padding: 0.5rem 0.6rem; font-size: 0.9rem; white-space: nowrap; }
  .cabecera .buscador-cabecera { order: 3; flex: 0 0 11.5rem; }
  .cabecera .buscador-cabecera input { font-size: 0.9rem; }
}
.sugerencias { background: var(--superficie); border-color: var(--tinta); border-radius: var(--r2); box-shadow: 0 12px 30px rgb(0 0 0 / 0.25); }
.sugerencias li { color: var(--tinta); }
.buscador-grande .sugerencias { top: calc(100% + 0.6rem); left: 0; right: 0; }

/* ---------- Pie ---------- */
.pie { background: var(--oscuro); color: #CFE0D2; border-top: 0; margin-top: 5rem; padding: 3rem 0 2.5rem; font-size: 0.95rem; }
.pie .envoltura { display: grid; gap: 1.25rem; }
.pie a { color: #fff; }
@media (min-width: 760px) { .pie .envoltura { grid-template-columns: 1.4fr 1fr; align-items: start; } }

/* ---------- Botones y campos ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0 1.4rem; font-weight: 700; text-decoration: none; cursor: pointer; border-radius: 999px; background: var(--primario); color: #fff; border: 2px solid var(--primario); }
.boton:hover { background: var(--oscuro); border-color: var(--oscuro); color: #fff; }
.boton-claro { background: transparent; color: var(--agua); border-color: var(--agua); }
.boton-claro:hover { background: var(--primario); border-color: var(--primario); color: #fff; }
.boton-mostaza { background: var(--mostaza); border-color: var(--mostaza); color: #17301f; }
.boton-mostaza:hover { background: #fff; border-color: #fff; color: #17301f; }
.oscuro .boton-claro { color: #fff; border-color: rgb(255 255 255 / 0.6); }
.oscuro .boton-claro:hover { background: #fff; color: #17301f; border-color: #fff; }
.campo input, select, .op-form textarea { border: 2px solid var(--tinta-suave); border-radius: var(--r2); background: var(--superficie); color: var(--tinta); }
.campo input { height: 3.25rem; padding: 0 1rem; }
.campo label { font-weight: 600; }
.comparar-form { align-items: end; max-width: 56rem; }
.chip { min-height: 2.5rem; padding: 0 1rem; font-weight: 600; border: 2px solid var(--linea); background: var(--superficie); color: var(--tinta); border-radius: 999px; }
.chip:hover { border-color: var(--agua); }
.chip[aria-pressed='true'] { background: var(--primario); border-color: var(--primario); color: #fff; }
input[type='range'] { accent-color: var(--primario); height: 2rem; cursor: pointer; }
.casilla input { accent-color: var(--primario); }
.propio { background: var(--mostaza); color: #17301f; border: 0; font-weight: 700; border-radius: 999px; padding: 0.1rem 0.55rem; }
.sin-dato { background: var(--amarillo-suave); border-left-color: var(--mostaza); border-radius: 0 var(--r2) var(--r2) 0; }

/* ---------- Titulares ---------- */
.titulo-pueblo { font-size: clamp(2.4rem, 7.2vw, 4.6rem); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 800; font-stretch: 112%; }
.migas { padding-block: 0; }

/* ---------- Regla de España con chincheta (el elemento memorable) ---------- */
.espana { --fa: 50; --p: 50; --c: var(--primario); padding-inline: 0.55rem; min-width: 0; }
.espana__regla { position: relative; height: 1.1rem; margin-top: 1.6rem; }
.espana__regla::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--c) 0 calc(var(--fa) * 1%), var(--vacia, var(--regla)) 0);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px calc((100% - 2px) / 39));
  mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px calc((100% - 2px) / 39));
}
.espana--doble .espana__regla::before { background: linear-gradient(90deg, var(--regla) 0 calc(var(--lo) * 1%), var(--tinta) 0 calc(var(--hi) * 1%), var(--regla) 0); }
.pin { position: absolute; top: 0; left: calc(var(--p) * 1%); width: 1.15rem; height: 1.44rem; transform: translate(calc(-50% + var(--dx, 0px)), -96%); fill: var(--c); stroke: #17301f; stroke-width: 1.4; overflow: visible; pointer-events: none; }
.pin--b { --c: var(--mostaza); }
.pin--a { --c: var(--primario); }
.espana__pie { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-top: 0.35rem; font-size: 0.8125rem; color: var(--tinta-suave); }
.espana__pie strong { color: var(--tinta); font-weight: 700; }
.espana__pie .extremo { font-size: 0.75rem; }
.espana__leyenda { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin-top: 0.35rem; font-size: 0.8125rem; }
.espana__leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.espana__leyenda i { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 1.5px solid #17301f; background: var(--c); display: inline-block; }
.espana--mini .espana__regla { height: 0.7rem; margin-top: 1.25rem; }
.espana--mini .pin { width: 0.9rem; height: 1.12rem; }
.oscuro .espana__pie { color: #CFE0D2; }
@media (prefers-reduced-motion: no-preference) {
  .js .espana .pin { transition: transform 0.7s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.3s; }
  .js .espana:not(.en-vista) .pin { transform: translate(calc(-50% + var(--dx, 0px)), -260%); opacity: 0; }
  .js .espana:not(.en-vista) .espana__regla::before { opacity: 0.35; }
  .js .espana .espana__regla::before { transition: opacity 0.5s; }
}
.letra { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font-size: 0.75rem; font-weight: 800; font-style: normal; border: 1.5px solid #17301f; flex: none; }
.letra.a { background: var(--primario); color: #fff; }
.letra.b { background: var(--mostaza); color: #17301f; }

/* ---------- Punto de información (i) ---------- */
.info { display: inline-block; margin-left: 0.3rem; vertical-align: 0.05em; white-space: nowrap; }
.info-boton { position: relative; width: 1.35rem; height: 1.35rem; border: 2px solid var(--agua); background: var(--superficie); color: var(--agua); font: 800 0.8rem/1 var(--sans); font-style: normal; cursor: help; }
.info-boton::after { content: ''; position: absolute; inset: -0.55rem; }
.info-boton:hover, .info.abierto .info-boton { background: var(--agua); color: var(--papel); }
.oscuro .info-boton { background: transparent; border-color: #fff; color: #fff; }
.info-texto { width: min(19rem, calc(100vw - 2rem)); transform: translateX(calc(-50% + var(--dx, 0px))); background: #17301f; color: #fff; border: 1px solid rgb(255 255 255 / 0.22); border-radius: var(--r2); font-size: 0.875rem; white-space: normal; letter-spacing: 0; text-transform: none; font-weight: 400; display: none; visibility: visible; opacity: 1; }
.info-texto::after { display: none; }
.info:hover .info-texto, .info:focus-within .info-texto, .info.abierto .info-texto { display: block; }
@media (max-width: 720px) { .info-texto { left: 50%; transform: translateX(calc(-50% + var(--dx, 0px))); } }

/* ---------- Portada ---------- */
.hero { position: relative; isolation: isolate; color: #fff; background: linear-gradient(180deg, rgb(23 48 31 / 0.93) 0%, rgb(23 48 31 / 0.8) 55%, rgb(23 48 31 / 0.55) 100%), url(/assets/img/albarracin.jpg) 70% center / cover #17301f; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url(/assets/img/contornos.svg) no-repeat left -22rem center / 62rem; pointer-events: none; }
@media (min-width: 860px) { .hero { background: linear-gradient(90deg, rgb(23 48 31 / 0.95) 0%, rgb(23 48 31 / 0.84) 40%, rgb(23 48 31 / 0.12) 100%), url(/assets/img/albarracin.jpg) center 35% / cover #17301f; } }
.hero a { color: #fff; }
.hero__cuerpo { display: grid; gap: 1.5rem; padding-block: 3.5rem 3rem; max-width: 47rem; }
@media (min-width: 860px) { .hero__cuerpo { padding-block: 6rem 4.5rem; } }
.hero h1 { font-size: clamp(2.4rem, 7.2vw, 4.4rem); font-weight: 800; font-stretch: 125%; line-height: 1.02; letter-spacing: -0.03em; max-width: none; }
.hero h1 em { font-style: normal; color: var(--mostaza); }
.hero .entrada { color: #E6F0E4; font-family: var(--sans); font-size: clamp(1.1rem, 2.2vw, 1.3rem); margin: 0; }
.buscador-grande { position: relative; display: flex; align-items: center; gap: 0.75rem; max-width: 44rem; background: #fff; border-radius: 999px; padding: 0.4rem 0.4rem 0.4rem 1.4rem; box-shadow: 0 18px 50px rgb(0 0 0 / 0.4); color: #17301f; margin: 0; }
.buscador-grande:focus-within { outline: 3px solid var(--mostaza); outline-offset: 3px; }
.buscador-grande > svg { width: 1.6rem; height: 1.6rem; color: #1f6b45; flex: 0 0 auto; }
.buscador-grande .campo { flex: 1; min-width: 0; }
.buscador-grande input { width: 100%; height: 3.4rem; border: 0; background: transparent; font: inherit; font-size: clamp(1.05rem, 3.6vw, 1.4rem); color: #17301f; padding: 0; border-radius: 0; }
.buscador-grande input:focus-visible { outline: none; }
.buscador-grande input::placeholder { color: #566259; opacity: 1; }
.buscador-grande .boton { min-height: 3.4rem; padding-inline: 1.5rem; font-size: 1.05rem; }
.buscador-grande .sugerencias { color: #17301f; background: #fff; border-color: #17301f; }
.buscador-grande .sugerencias li { color: #17301f; }
.buscador-grande .sugerencias small { color: #566259; }
@media (max-width: 480px) { .buscador-grande { padding-left: 1.1rem; } .buscador-grande > svg { display: none; } .buscador-grande .boton { padding-inline: 1.1rem; } }
.hero__atajos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.95rem; margin: 0; }
.hero__atajos a { font-weight: 600; text-shadow: 0 1px 6px rgb(0 0 0 / 0.6); }
.hero__base { background: rgb(23 48 31 / 0.92); }
.cifras { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.cifras > div { padding: 1.3rem 1rem 1.5rem 0; }
.cifras > div:nth-child(2n) { padding-left: 1rem; border-left: 1px solid rgb(255 255 255 / 0.2); }
.cifras > div:nth-child(n + 3) { border-top: 1px solid rgb(255 255 255 / 0.2); }
.cifras dt { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; font-stretch: 118%; line-height: 1; color: var(--mostaza); letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3rem); color: var(--mostaza); }
.cifras dd { margin: 0.4rem 0 0; font-size: 0.95rem; color: #DCEBDD; max-width: 15rem; }
@media (min-width: 900px) {
  .cifras { grid-template-columns: repeat(4, 1fr); }
  .cifras > div:nth-child(n) { border-top: 0; padding: 1.5rem 1.25rem 1.8rem; border-left: 1px solid rgb(255 255 255 / 0.2); }
  .cifras > div:first-child { padding-left: 0; border-left: 0; }
}
.seccion { padding-top: 4.5rem; }
.seccion > h2, .seccion__cab h2 { font-size: clamp(1.7rem, 4.4vw, 2.5rem); font-weight: 800; font-stretch: 115%; line-height: 1.08; letter-spacing: -0.02em; margin: 0; }
.seccion__cab { display: grid; gap: 0.5rem; margin-bottom: 1.75rem; max-width: 42rem; }
.seccion__cab p { margin: 0; color: var(--tinta-suave); font-size: 1.1rem; }
.banda { background: var(--banda); margin-top: 4.5rem; padding-block: 4rem; }
.banda .seccion { padding-top: 0; }
.rutas { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
@media (min-width: 900px) { .rutas { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.ruta { display: grid; grid-template-columns: 3rem 1fr; gap: 0.25rem 1rem; padding: 1.4rem 0.25rem; border-bottom: 2px solid var(--tinta); color: inherit; text-decoration: none; }
.ruta svg { grid-row: span 2; width: 3rem; height: 3rem; color: var(--agua); }
.ruta h3 { font-size: 1.3rem; font-weight: 750; font-stretch: 108%; margin: 0; }
.ruta:hover h3 { color: var(--agua); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 2px; }
.ruta p { margin: 0; color: var(--tinta-suave); }
.cerca-portada { margin-top: 0; }
.cerca-portada .comparar-form { margin-top: 1.5rem; }
.cmp-dos { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .cmp-dos { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.demo { background: var(--superficie); color: var(--tinta); border: 2px solid var(--tinta); border-radius: var(--r3); padding: 1.4rem; display: grid; gap: 1.25rem; }
.demo__cab { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; font-weight: 700; }
.demo__fila-t { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; }
.demo__vals { font-weight: 800; font-stretch: 110%; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.demo__vals .va { color: var(--agua); } .demo__vals .vb { color: var(--oro); }
.demo__nota { font-size: 0.8125rem; color: var(--tinta-suave); margin: 0; }
.hall-grid { list-style: none; padding: 0; display: grid; gap: 1rem; margin: 0; }
@media (min-width: 900px) { .hall-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.hall-card { display: grid; gap: 0.6rem; align-content: space-between; height: 100%; padding: 1.5rem; border-radius: var(--r3); background: var(--superficie); border: 2px solid var(--tinta); color: var(--tinta); text-decoration: none; }
.hall-grid li:first-child .hall-card { background: var(--mostaza); border-color: var(--mostaza); color: #17301f; }
.hall-card strong { font-size: 1.3rem; line-height: 1.2; font-weight: 800; font-stretch: 108%; }
.hall-card .cifra { font-size: clamp(2.2rem, 4.5vw, 3.2rem); font-weight: 800; font-stretch: 120%; line-height: 1; letter-spacing: -0.03em; color: var(--agua); }
.hall-grid li:first-child .hall-card .cifra { color: #17301f; }
.hall-card span.lugar { font-size: 0.95rem; }
.hall-card:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.rejilla-enlaces { gap: 0.2rem 1.5rem; }
.rejilla-enlaces a { color: var(--agua); font-weight: 600; }
.rejilla-enlaces li { border-bottom-style: solid; }
.top-mini { list-style: none; padding: 0; margin: 0; }
.top-mini li { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) minmax(5rem, 9rem) 2.5rem; gap: 0.75rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid var(--linea); }
.top-mini li:last-child { border-bottom: 1px solid var(--linea); }
.top-mini .puesto { font-weight: 800; font-stretch: 115%; font-size: 1.15rem; color: var(--agua); }
.top-mini a { font-weight: 700; color: var(--tinta); text-decoration: none; }
.top-mini a:hover { text-decoration: underline; }
.top-mini small { display: block; color: var(--tinta-suave); font-size: 0.8125rem; }
.barra-i { height: 0.6rem; border-radius: 999px; background: var(--menta); overflow: hidden; }
.barra-i span { display: block; height: 100%; background: var(--primario); border-radius: 999px; width: calc(var(--v) * 1%); }
.top-mini .num { font-weight: 800; font-size: 1.25rem; text-align: right; }
.split { display: grid; gap: 2rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.respaldo { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .respaldo { grid-template-columns: 1.05fr 1fr; gap: 4rem; } }
.respaldo__muestra { background: var(--superficie); border: 2px solid var(--tinta); border-radius: var(--r3); padding: 0.4rem 1.4rem; }
.respaldo__muestra .fila { border-top: 0; }
.lista-check { list-style: none; padding: 0; display: grid; gap: 0.9rem; margin: 1.25rem 0 0; }
.comprueba { margin-top: 2rem; padding: 1.2rem 1.4rem; background: var(--menta); border-radius: var(--r2); border-left: 6px solid var(--primario); }

/* ---------- Ficha: cabecera con foto ---------- */
.ficha-hero { background: var(--oscuro) url(/assets/img/contornos.svg) no-repeat right -16rem top -8rem / 60rem; color: #fff; padding-bottom: 5.5rem; }
.ficha-hero a { color: #fff; }
.ficha-hero .migas { color: #DCEBDD; padding-top: 1rem; margin: 0; }
.ficha-hero .migas a { color: #fff; }
.ficha-hero__grid { display: grid; gap: 1.75rem; padding-top: 1.5rem; align-items: end; }
.ficha-hero .cartel { padding: 0; display: grid; gap: 1rem; align-content: end; }
.ficha-hero .cartel .sub { color: #DCEBDD; margin: 0; font-size: 1.15rem; }
.ficha-hero .foto-pueblo { margin: 0; display: grid; gap: 0.5rem; }
.ficha-hero .foto-pueblo img { height: clamp(13rem, 42vw, 22rem); border: 0; border-radius: var(--r3); background: var(--primario); }
@media (min-width: 980px) { .ficha-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3rem; } .ficha-hero .foto-pueblo img { height: 21rem; } }
.ficha-hero--sin-foto .ficha-hero__grid { grid-template-columns: 1fr; }
.vistazo { position: relative; z-index: 2; margin: -3.4rem 0 0; background: var(--superficie); border: 0; border-radius: var(--r3); padding: 0.4rem 1.25rem; box-shadow: 0 18px 45px rgb(11 43 32 / 0.25); display: grid; grid-template-columns: 1fr 1fr; }
.vistazo > div { padding: 1rem 0.5rem 1.1rem 0; min-width: 0; }
.vistazo > div + div { padding-left: 0; border-left: 0; }
.vistazo > div:nth-child(2n) { padding-left: 1rem; border-left: 1px solid var(--linea); }
.vistazo > div:nth-child(n + 3) { border-top: 1px solid var(--linea); }
.vistazo dt { font-size: 0.9rem; font-weight: 600; color: var(--tinta-suave); }
.vistazo .cifra { display: block; font-size: clamp(1.55rem, 4.2vw, 2.3rem); font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; line-height: 1.1; margin-top: 0.15rem; white-space: nowrap; }
.vistazo .nota { display: block; font-size: 0.8125rem; margin-top: 0.15rem; }
.vistazo dd { display: block; }
@media (min-width: 860px) {
  .vistazo { grid-template-columns: repeat(4, 1fr); padding-inline: 0.5rem; }
  .vistazo > div:nth-child(n) { border-top: 0; padding: 1.2rem 1.4rem 1.3rem; border-left: 1px solid var(--linea); }
  .vistazo > div:first-child { border-left: 0; }
}
.ficha-cuerpo-inicio { margin-top: 1.5rem; }
.sellos { margin: 1.25rem 0 0; }
.sello { background: var(--mostaza); color: #17301f; }
.prosa p { text-wrap: pretty; }
.indice-ficha { position: sticky; top: 0; z-index: 30; display: flex; gap: 0.35rem; overflow-x: auto; background: color-mix(in srgb, var(--papel) 96%, transparent); border-bottom: 1px solid var(--linea); padding: 0.5rem 0; margin-top: 1.5rem; scrollbar-width: none; }
.indice-ficha a { display: block; white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 999px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.indice-ficha a:hover { background: var(--menta); color: var(--tinta); }
.indice-ficha a[aria-current='true'] { background: var(--primario); color: #fff; }

/* ---------- Bloques y filas de datos ---------- */
.bloque { margin-top: 0; padding-top: 3.5rem; }
.bloque > h2 { margin: 0 0 0.5rem; padding-bottom: 0.9rem; border-bottom: 3px solid var(--tinta); font-size: clamp(1.4rem, 3vw, 1.85rem); }
h2[id] { scroll-margin-top: 4.5rem; }
.bloque:has(> h2[id]) { scroll-margin-top: 4.5rem; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 2.5rem; align-items: center; padding: 1.15rem 0; border-top: 1px solid var(--linea); border-bottom: 0; }
.fila:last-child { border-bottom: 0; }
.fila > div:empty { display: none; }
.fila .etiqueta { grid-column: 1; grid-row: 1; font-weight: 700; line-height: 1.3; }
.fila .etiqueta small { font-weight: 400; color: var(--tinta-suave); font-size: 0.8125rem; margin-top: 0.1rem; }
.fila .valor { grid-column: 1; grid-row: 2; font-size: 1.75rem; font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.1; }
.fila .espana { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.fila .contexto { grid-column: 1 / -1; grid-row: 3; font-size: 0.9rem; color: var(--tinta-suave); max-width: 44rem; }
.fila .contexto .nota { display: block; margin-top: 0.3rem; color: var(--agua); font-weight: 600; font-size: 0.8125rem; }
.bloque > .fila:first-of-type .valor { font-size: clamp(2.4rem, 6vw, 3.6rem); font-stretch: 118%; letter-spacing: -0.03em; color: var(--agua); }
.bloque > .fila:first-of-type { padding-top: 1.6rem; }
@media (max-width: 640px) {
  .fila { grid-template-columns: 1fr; }
  .fila .espana { grid-column: 1; grid-row: 3; }
  .fila .contexto { grid-row: 4; }
}
.reparto { height: 1.5rem; border: 2px solid var(--tinta); border-radius: 999px; }
.reparto .s1 { background: var(--primario); } .reparto .s2 { background: var(--mostaza); } .reparto .s3 { background: var(--tinta); } .reparto .s4 { background: var(--menta); }
.leyenda i { border: 1.5px solid var(--tinta); border-radius: 3px; }
.sub-bloque { font-size: 1.1rem; font-weight: 750; margin: 1.75rem 0 0.4rem; }

/* Servicios con desglose */
.servicios { display: block; margin: 0.5rem 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.servicios > li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; min-height: 3.5rem; border-bottom: 1px solid var(--linea); border-top: 0; }
.servicios > li strong { font-size: 1.5rem; font-weight: 800; font-stretch: 112%; line-height: 1; }
.servicios > li.con-desglose { display: block; padding: 0; }
.servicios > li.cero { color: var(--tinta-suave); }
.desglose summary { align-items: center; gap: 0.85rem; min-height: 3.5rem; padding: 0.4rem 0; }
.desglose summary strong { font-size: 1.5rem; font-weight: 800; font-stretch: 112%; line-height: 1; order: 2; }
.desglose summary span { font-weight: 700; }
.servicios .desglose summary::before { content: ''; flex: 0 0 1.3rem; height: 1.3rem; width: 1.3rem; order: 3; margin-left: 0.2rem; background: var(--agua); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.servicios .desglose[open] summary::before { content: ''; transform: rotate(180deg); }
.desglose summary:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.bloque > .desglose { padding: 0.4rem 0; border-top: 1px solid var(--linea); }
.bloque > .desglose summary::before { content: '+'; }
.desglose ul { padding: 0.2rem 0 1rem 0.2rem; }
.desglose ul li { border-bottom: 1px dashed var(--linea); padding: 0.5rem 0; }
.mini-mapa { color: var(--agua); font-weight: 600; }
.servicios > li.cero strong { color: var(--tinta-suave); }

/* Ayudas */
.ayudas { list-style: none; padding: 0; margin: 0.5rem 0 1rem; }
.ayudas li { border-bottom: 0; border-top: 1px solid var(--linea); padding: 0.85rem 0; }
.ayudas li:last-child { border-bottom: 1px solid var(--linea); }
.ayudas time { font-weight: 700; color: var(--tinta-suave); font-size: 0.875rem; }

/* Ubicación */
.ubicacion { gap: 1.75rem; }
@media (min-width: 860px) { .ubicacion { gap: 2.5rem; } }
.minimapa { border: 0; border-radius: var(--r3); overflow: hidden; background: var(--menta); height: 22rem; }
.distancias dd { font-size: 1.2rem; font-weight: 700; }
.lista-cercanos { list-style: none; padding: 0; }
.lista-cercanos li { border-bottom: 0; border-top: 1px solid var(--linea); padding: 0.55rem 0; }
.lista-cercanos li:last-child { border-bottom: 1px solid var(--linea); }
.lista-cercanos > li > a:first-child { font-weight: 700; color: var(--tinta); }
.mini-cmp { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.9rem; border: 2px solid var(--agua); border-radius: 999px; font-weight: 700; text-decoration: none; }
.mini-cmp:hover { background: var(--primario); border-color: var(--primario); color: #fff; }

/* Valoración */
.valoracion { display: grid; gap: 2rem; margin-top: 1.25rem; }
@media (min-width: 900px) { .valoracion { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.barras { gap: 1.1rem 1.5rem; }
.barra label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; }
.barra output { color: var(--agua); }
.resultado-valoracion { border: 0; background: var(--banda); border-radius: var(--r3); padding: 1.5rem; align-self: start; }
.cifra-grande { color: var(--agua); }
.razones { list-style: none; padding: 0; display: grid; gap: 0.6rem; }
.razones li { padding-left: 1rem; border-left: 4px solid var(--primario); margin: 0; }

/* Opiniones de vecinos */
.est { color: var(--regla); }
.est.llena { color: var(--estrella); }
.est.media { background: linear-gradient(90deg, var(--estrella) 50%, var(--regla) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.barra-op { background: var(--menta); border: 0; border-radius: 999px; overflow: hidden; }
.barra-op i { background: var(--estrella); }
.op-media .cifra-grande { font-size: 3.6rem; }
.op-estrellas label { border-color: var(--linea); background: var(--superficie); min-height: 2.25rem; display: inline-flex; align-items: center; }
.op-estrellas input:checked + label { background: var(--mostaza); border-color: var(--mostaza); color: #17301f; }
.op-estrellas input:focus-visible + label { outline: 3px solid var(--hito); }
.op-form { border-top-color: var(--tinta); }
.op-lista p { font-family: var(--sans); }
.op-lista li { border-top: 1px solid var(--linea); }
.enlace-denuncia { color: var(--tinta-suave); }

/* ---------- Comparador ---------- */
.cmp-cabecera { gap: 1.25rem; }
.cmp-cabecera img { border: 0; border-radius: var(--r2); }
.cmp-cabecera .a { border-top: 6px solid var(--primario); }
.cmp-cabecera .b { border-top: 6px solid var(--mostaza); }
.cmp-cabecera .titulo-pueblo { color: var(--tinta); text-decoration: none; display: block; }
.destacadas { border-top: 3px solid var(--tinta); }
.cmp-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 1rem; padding: 1.15rem 0; border-top: 1px solid var(--linea); align-items: start; }
.cmp-fila .etiqueta { grid-column: 1 / -1; font-weight: 700; }
.cmp-fila .valor { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: clamp(1.3rem, 4.6vw, 1.9rem); font-weight: 800; font-stretch: 108%; letter-spacing: -0.015em; line-height: 1.15; }
.cmp-fila .valor.va { color: var(--agua); }
.cmp-fila .valor.vb { color: var(--oro); }
.cmp-fila .espana, .cmp-fila .contexto { grid-column: 1 / -1; }
.cmp-fila .contexto { font-size: 0.9rem; color: var(--tinta-suave); }
@media (min-width: 860px) {
  .cmp-fila { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.35fr); gap: 0.3rem 1.5rem; align-items: center; }
  .cmp-fila .etiqueta { grid-column: 1; }
  .cmp-fila .espana { grid-column: 4; grid-row: 1 / span 2; }
  .cmp-fila .contexto { grid-column: 1 / 4; grid-row: 2; }
  .cmp-fila .valor { font-size: 1.6rem; }
}

/* ---------- Tablas ---------- */
th { border-bottom-color: var(--tinta); }
th button { color: var(--tinta); }
tbody tr:hover { background: var(--banda); }
.tabla-top th { white-space: normal; font-size: 0.8125rem; color: var(--tinta-suave); }
.tabla-ranking td strong { font-weight: 800; }
.tabla-ranking a { font-weight: 600; }

/* ---------- Curiosidades ---------- */
.hallazgos { gap: 1rem; }
.hallazgos a { border: 2px solid var(--tinta); border-left: 8px solid var(--mostaza); border-radius: var(--r2); background: var(--superficie); padding: 1.2rem; }
.hallazgos a:hover { border-color: var(--agua); border-left-color: var(--mostaza); }
.hallazgos strong { font-size: 1.15rem; line-height: 1.25; }
.hallazgos span { color: var(--tinta-suave); }
.compartir { gap: 0.5rem 0.75rem; align-items: center; }
.compartir a { display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0 0.9rem; border: 2px solid var(--agua); border-radius: 999px; font-weight: 700; text-decoration: none; }
.compartir a:hover { background: var(--primario); border-color: var(--primario); color: #fff; }

/* ---------- Mapa y filtro ---------- */
.panel-mapa, .panel-filtros { }
.leyenda-mapa i { border-color: var(--tinta); }
.leaflet-container { font-family: var(--sans); }
.resultados-filtro { min-width: 0; }
.toast { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 200; background: #17301f; color: #fff; padding: 0.8rem 1.2rem; border-radius: 999px; font-weight: 600; max-width: calc(100vw - 2rem); }
.toast[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .cabecera, .indice-ficha, .pie, .menu-boton { display: none; } }
.buscador-grande .campo { position: static; display: block; }
@media (max-width: 519px) {
  .menu-boton { padding: 0; width: 2.75rem; }
  .menu-boton__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .marca svg { width: 2rem; }
}
.ficha-cuerpo-inicio { margin: 0; }
select { height: 3.25rem; padding: 0 0.9rem; border-radius: var(--r2); }
@media (min-width: 760px) {
  .cmp-dos .comparar-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-dos .comparar-form .con { display: none; }
  .cmp-dos .comparar-form .boton { grid-column: 1 / -1; justify-self: start; }
}
.hall-card { align-content: start; }
.espana__pie strong { white-space: nowrap; }
.respaldo__muestra .fila { grid-template-columns: 1fr; }
.respaldo__muestra .fila .espana { grid-column: 1; grid-row: 3; }
.respaldo__muestra .fila .contexto { grid-row: 4; }
.respaldo__muestra .fila .valor { font-size: clamp(2.4rem, 6vw, 3.6rem); color: var(--agua); }
.cabecera .buscador-cabecera { min-width: 0; }
.indice-ficha { background: var(--papel); }

/* ---------- Autoría de las fotos: plegada en un botón «©» sobre la foto (exigido por la licencia) ---------- */
.foto-pueblo, .cmp-cabecera > div, .hero { position: relative; }
.credito-foto { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 5; max-width: min(26rem, calc(100% - 1.2rem)); text-align: right; }
.credito-foto summary { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; font-size: 0.85rem; font-weight: 700; }
.credito-foto summary::-webkit-details-marker { display: none; }
.credito-foto[open] p { display: block; margin: 0.35rem 0 0; padding: 0.5rem 0.7rem; border-radius: 6px; background: rgb(0 0 0 / 0.75); color: #fff; font-size: 0.78rem; line-height: 1.4; text-align: left; }
.credito-foto p a { color: #fff; }
.foto-pueblo figcaption { margin: 0; }
.credito-hero { bottom: 0.8rem; }

/* ---------- Comparador: servicios y opiniones ---------- */
.cmp-titulo { margin: 2.5rem 0 0.75rem; padding-bottom: 0.6rem; border-bottom: 3px solid var(--tinta); font-size: clamp(1.4rem, 3vw, 1.85rem); }
.cmp-tabla { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cmp-tabla th, .cmp-tabla td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--linea); text-align: right; }
.cmp-tabla th[scope="row"], .cmp-tabla thead th:first-child { text-align: left; font-weight: 600; }
.cmp-tabla thead th { border-bottom: 1.5px solid var(--tinta); }
.cmp-tabla td { font-weight: 700; font-variant-numeric: tabular-nums; width: 22%; }
.cmp-tabla td.mas { color: var(--agua); }

/* ---------- Escala compacta ----------
   Base de 15 px (todo lo medido en rem baja un 6 %), texto de lectura a 15–16 px
   y titulares y cifras grandes un 25 % más contenidos. */
html { font-size: 93.75%; }
:root { --ancho: 76rem; }
body { font-size: clamp(1rem, 0.97rem + 0.1vw, 1.0625rem); }
.prosa { font-size: 1.0625rem; }
h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.hero h1 { font-size: clamp(2rem, 5.2vw, 3.3rem); }
.hero .entrada { font-size: clamp(1rem, 1.6vw, 1.15rem); }
.titulo-pueblo { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.cmp-cabecera .titulo-pueblo { font-size: clamp(1.4rem, 3.6vw, 2.2rem); }
.seccion > h2, .seccion__cab h2 { font-size: clamp(1.4rem, 3.2vw, 1.95rem); }
.bloque > h2, .cmp-titulo { font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.cifras dt { font-size: clamp(1.6rem, 3.6vw, 2.25rem); }
.vistazo .cifra { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.bloque > .fila:first-of-type .valor, .respaldo__muestra .fila .valor { font-size: clamp(1.9rem, 4.4vw, 2.6rem); }
.hall-card .cifra { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.cmp-fila .valor { font-size: clamp(1.15rem, 3.2vw, 1.5rem); }
.buscador-grande input { height: 3rem; font-size: clamp(1rem, 2.6vw, 1.2rem); }
.cifra-grande, .op-media .cifra-grande { font-size: clamp(2rem, 4vw, 2.6rem); }
.servicios > li strong, .desglose summary strong { font-size: 1.2rem; }
/* Cabecera de la ficha: nombre centrado junto a la foto, sin hueco arriba */
.ficha-hero__grid { align-items: center; }
.ficha-hero .cartel { align-content: center; }
@media (min-width: 980px) { .ficha-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ficha-hero .foto-pueblo img { height: 18rem; } }

/* ---------- Ayudas ---------- */
.aviso-ayudas { display: flex; align-items: center; gap: 0.9rem; margin: 1rem 0; padding: 0.85rem 1.1rem; border-radius: var(--r2); background: var(--amarillo-suave, #fdf3d6); border: 1.5px solid var(--mostaza); color: var(--tinta); text-decoration: none; }
.aviso-ayudas:hover { border-color: var(--tinta); }
.aviso-ayudas__cifra { font-size: 1.9rem; font-weight: 800; font-stretch: 115%; line-height: 1; color: var(--agua); }
.aviso-ayudas__texto { flex: 1; line-height: 1.35; }
.aviso-ayudas__ir { font-weight: 700; white-space: nowrap; color: var(--agua); text-decoration: underline; text-underline-offset: 0.18em; }
@media (max-width: 520px) { .aviso-ayudas { flex-wrap: wrap; } .aviso-ayudas__ir { width: 100%; } }
.bloque--ayudas { scroll-margin-top: 1rem; }
.ayudas-resumen { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; }
.ayudas-resumen li { display: grid; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: var(--r2); background: var(--papel-2); }
.ayudas-resumen .cifra { font-size: 1.6rem; font-weight: 800; font-stretch: 112%; line-height: 1; color: var(--agua); }
.ayudas-resumen li span:last-child { font-size: 0.875rem; color: var(--tinta-suave); }
.ayudas-lista { list-style: none; padding: 0; margin: 0.5rem 0 1rem; display: grid; gap: 0.7rem; }
.ayuda { padding: 0.9rem 1rem; border: 1px solid var(--linea); border-left: 4px solid var(--agua); border-radius: 10px; background: var(--superficie, #fff); }
.ayuda--consultar, .ayuda--proxima { border-left-color: var(--mostaza); }
.ayuda--cerrada { border-left-color: var(--linea); opacity: 0.8; }
.ayuda__cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.3rem 1rem; margin: 0 0 0.35rem; font-size: 0.8125rem; }
.ayuda__ambito { color: var(--tinta-suave); font-weight: 600; }
.ayuda__plazo { font-weight: 700; color: var(--agua); }
.ayuda--consultar .ayuda__plazo, .ayuda--proxima .ayuda__plazo { color: var(--tinta); }
.ayuda--cerrada .ayuda__plazo { color: var(--tinta-suave); }
.ayuda__titulo { display: block; font-weight: 700; color: var(--tinta); line-height: 1.35; }
.ayuda__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.55rem 0 0; font-size: 0.8125rem; }
.chip { padding: 0.12rem 0.55rem; border-radius: 999px; background: var(--menta); color: var(--tinta); }
.chip--tema { background: var(--papel-2); border: 1px solid var(--linea); }
.ayuda__importe { color: var(--tinta-suave); }
.ayuda__nota { margin: 0.4rem 0 0; font-size: 0.8125rem; color: var(--tinta-suave); }
.filtros-ayudas { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.9rem 1rem; align-items: end; margin: 1.25rem 0 0.75rem; padding: 1.1rem; border-radius: var(--r2); background: var(--papel-2); }
.filtros-ayudas .campo--ancho { grid-column: span 2; }
@media (max-width: 560px) { .filtros-ayudas .campo--ancho { grid-column: auto; } }
.filtros-ayudas select { width: 100%; height: 2.75rem; padding: 0 0.6rem; border: 1.5px solid var(--regla); border-radius: 8px; background: var(--papel); color: var(--tinta); font: inherit; }
.filtros-ayudas .casilla { align-self: center; }