/* ===== Mapa Social, Formativo y Laboral — estilos del motor ===== */
:root{
  --bg:#f7f9fa; --surface:#ffffff; --surface-2:#f7f9fa;
  --ink:#17212b; --muted:#4b5563; --faint:#6b7280;
  --line:#e5e7eb; --line-2:#eef1f4;
  --primary:#0f766e; --primary-d:#0b5a54; --primary-tint:#e3f1ef;
  --amber:#b5741a; --amber-tint:#fbeed6;
  --radius:14px; --radius-sm:11px; --radius-lg:20px;
  --shadow:0 1px 2px rgba(20,32,46,.04), 0 10px 24px -14px rgba(20,32,46,.14);
  --shadow-lg:0 2px 6px rgba(20,32,46,.05), 0 24px 48px -22px rgba(20,32,46,.22);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --display:'Libre Baskerville','Iowan Old Style',Georgia,'Times New Roman',serif;
  /* --------------------------------------------------------------------------
     IDENTIDAD LOCAL DE LA CABECERA

     Estos dos valores los reescribe scripts/build-municipio.mjs con lo que diga
     el municipio en su municipio.json (bloque "hero"). Aquí se quedan en `none`
     a propósito: el motor no tiene fotos de nadie.

     Si el municipio no tiene foto, la cabecera se ve con su degradado y la web
     no pide una imagen que no existe. Cada municipio explica las suyas en
     municipios/<clave>/images/LEEME.md.
     -------------------------------------------------------------------------- */
  --hero-foto:url('images/banners/viana-do-castelo.jpg');
  --hero-escudo:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;font-size:16px;-webkit-font-smoothing:antialiased}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
a{color:inherit}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding:0 22px}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
/* La serif es para los títulos que mandan, no para toda la interfaz. */
h1,h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em}
h3{font-family:var(--sans);font-weight:600}

/* Foco visible y consistente en todo lo que se puede recorrer con el teclado */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

/* ---------- Hero ----------
   Tres capas: la fotografía del municipio, un velo que la aclara para poder leer
   encima, y el escudo del municipio como marca de agua. Las tres son
   decorativas y ninguna se lee ni se pulsa. Si falta el fichero de imagen, la
   capa se queda transparente y debajo sigue el degradado de siempre. */
.hero{position:relative;isolation:isolate;overflow:hidden;background:
  radial-gradient(120% 140% at 12% -20%, #e6f1ef 0%, rgba(230,241,239,0) 58%),
  linear-gradient(#fbfdfd,var(--bg))}
.hero__fondo{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* La foto no cubre toda la cabecera, solo la mitad derecha, que es donde se
   ve: sobre el texto está tapada por el velo de todas formas. Cubriendo menos
   ancho se amplía menos y se nota mucho menos la falta de resolución del
   original. El borde izquierdo se funde con una máscara. */
.hero__foto{position:absolute;top:0;bottom:0;left:34%;right:0;background-image:var(--hero-foto);
  background-size:cover;background-position:center 45%;filter:saturate(.88) contrast(.98);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);
  mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.hero__velo{position:absolute;inset:0;background:
  linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 42%, rgba(255,255,255,.44) 66%, rgba(255,255,255,.16) 100%),
  linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 30%, rgba(247,249,250,.55) 78%, var(--bg) 100%)}
.hero__escudo{position:absolute;top:50%;right:-26px;width:clamp(200px,24vw,320px);aspect-ratio:1/1;
  transform:translateY(-46%);background-image:var(--hero-escudo);background-size:contain;
  background-repeat:no-repeat;background-position:center;opacity:.1;pointer-events:none;z-index:-1}
/* Vuelta a la portada con el mapa de España, al lado de la marca */
.volver-portal{display:inline-flex;align-items:center;gap:6px;margin-left:8px;vertical-align:top;padding:5px 11px 5px 8px;
  font-size:13px;font-weight:600;color:var(--primary-d);text-decoration:none;background:rgba(255,255,255,.88);
  border:1px solid var(--line);border-radius:11px}
.volver-portal svg{width:16px;height:16px;flex:none}
/* Arriba a la derecha, a la altura de la marca y con su mismo aspecto: debajo
   de ella, dentro de la cabecera en columna, se estiraba a todo lo ancho. En
   móvil no cabe al lado y va debajo, a su tamaño. */
.volver-portal{position:absolute;top:27px;right:22px;z-index:2;margin:0;padding:6px 12px 6px 9px;border-radius:9px;
  backdrop-filter:saturate(1.1) blur(2px)}
@media(min-width:900px){.volver-portal{top:31px}}
@media(max-width:820px){.volver-portal{top:23px}}
@media(max-width:560px){.volver-portal{position:static;align-self:flex-start;margin:-8px 0 16px;right:auto}}
.volver-portal:hover{border-color:var(--primary)}
/* El crédito de la foto: pequeño, abajo a la derecha, sobre la foto. */
.hero__credito{position:absolute;right:16px;bottom:6px;z-index:1;margin:0;max-width:min(60%,520px);
  font-size:11px;line-height:1.35;color:var(--muted);text-align:right}
.hero__credito:empty{display:none}@media(max-width:699px){.hero__credito{left:16px;max-width:none;text-align:left}.hero__inner{padding-bottom:52px!important}}
.hero__credito a{color:inherit;text-decoration:underline;text-decoration-color:rgba(0,0,0,.25)}
.hero__inner{position:relative;padding-top:22px;padding-bottom:36px;
  min-height:clamp(330px,34vw,420px);display:flex;flex-direction:column;justify-content:center}

/* Distintivo institucional: pequeño, sobrio, no un logotipo de producto */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  align-self:flex-start;margin-bottom:24px;padding:6px 13px 6px 7px;
  background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:9px;
  backdrop-filter:saturate(1.1) blur(2px)}
.brand__mark{width:26px;height:26px;flex:none;display:grid;place-items:center;background:var(--primary);color:#fff;border-radius:7px;padding:5px}
.brand__mark svg{stroke-width:2}
.brand__text{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.01em}
.brand__text b{color:var(--ink);font-weight:600}
.brand__text span{color:var(--primary-d);font-weight:600}
.hero__title{font-size:clamp(2.1rem,4vw,3.4rem);line-height:1.05;max-width:15ch;color:var(--ink)}
.hero__sub{margin:16px 0 0;color:var(--muted);font-size:clamp(15px,1.3vw,18px);line-height:1.6;max-width:56ch}

.search{margin-top:26px;max-width:660px}
.search__label{display:block;font-weight:600;font-size:14px;margin-bottom:9px;color:var(--ink)}
.search__box{position:relative;display:flex;align-items:center;min-height:52px;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 1px 2px rgba(20,32,46,.05),0 8px 20px -16px rgba(20,32,46,.35);transition:border-color .15s,box-shadow .15s}
.search__box:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint)}
.search__icon{width:20px;height:20px;flex:none;color:var(--faint);margin:0 2px 0 16px}
#q{flex:1;border:0;background:transparent;font:inherit;font-size:15.5px;color:var(--ink);padding:14px 12px;outline:none;min-width:0}
#q::placeholder{color:var(--faint)}
.search__clear{flex:none;border:0;background:transparent;color:var(--muted);width:40px;height:40px;padding:9px;margin-right:6px;border-radius:8px;cursor:pointer}
.search__clear:hover{background:var(--line-2)}

/* ---------- Demo note ---------- */
.demo-note{display:flex;gap:8px;align-items:flex-start;margin:22px 0 0;padding:11px 14px;background:var(--amber-tint);border:1px solid #f0dcae;color:#7a5314;border-radius:var(--radius-sm);font-size:13.5px}
.demo-note strong{color:#5f4110}

/* ---------- Accesos rápidos ---------- */
.quick{margin-top:22px}
.quick__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
/* min-width:0 NO ES DECORATIVO. Un hijo de una rejilla no se encoge por
   debajo del ancho de su palabra más larga, y "Administración" son 115 px: con
   el icono y el relleno, cada botón pedía 197 px y dos columnas se iban a 404
   en una pantalla de 375. La página entera se movía de lado en el móvil. */
.cat{min-width:0;display:flex;align-items:center;gap:12px;padding:16px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.cat:hover{border-color:#d3d8de;background:#fdfefe;box-shadow:0 1px 2px rgba(20,32,46,.04)}
.cat__ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:10px;padding:8px;background:var(--c-tint);color:var(--c);transition:background .18s ease,color .18s ease}
.cat__ic svg{stroke-width:2}
.cat__lb{min-width:0;overflow-wrap:break-word;font-weight:600;font-size:14.5px;line-height:1.2}
.cat.is-active{border-color:var(--c);background:var(--surface);box-shadow:0 0 0 1.5px var(--c) inset}
.cat.is-active .cat__ic{background:var(--c);color:#fff}

/* ---------- Elegir distrito (solo en las ciudades que los tienen) ----------
   Botones rectangulares, del mismo aire que los del resto de la página: sin
   cápsulas, sin iconos de adorno y con el recuento a la derecha, que es lo que
   de verdad ayuda a decidir. Con veintiún distritos en una pantalla de 375 px
   la fila se envuelve sola y no hay desbordamiento lateral. */
.distritos{margin-top:22px;padding:20px 22px 18px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.distritos__t{margin:0;font-size:18px;line-height:1.25}
.distritos__lede{margin:6px 0 14px;color:var(--muted);font-size:14px}
/* Rejilla y no una fila que se envuelve: con veintiún distritos, la fila
   suelta daba mil cien píxeles de botones en el móvil, un muro antes de nada.
   Así son dos columnas en un teléfono y cinco o seis en un portátil, sin
   esconder ninguno detrás de un «ver todos». */
.distritos__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:8px}
.distrito{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;text-align:left;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font:inherit;font-weight:500;font-size:14px;line-height:1.25;padding:9px 12px;border-radius:11px;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.distrito:hover{border-color:var(--primary);color:var(--primary-d)}
.distrito__n{flex:none;font-size:12.5px;font-weight:600;color:var(--faint);background:var(--surface-2);border-radius:7px;padding:2px 7px;font-variant-numeric:tabular-nums}
.distrito.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.distrito.is-active .distrito__n{background:rgba(255,255,255,.22);color:#fff}
.distritos__nota{margin:12px 0 0;color:var(--muted);font-size:13px}
.distritos__fuente{margin:10px 0 0;color:var(--faint);font-size:12.5px}
.distritos__fuente:empty{display:none}
.distritos__fuente a{color:var(--primary-d)}
@media(max-width:560px){.distritos{padding:16px 16px 14px}
  .distritos__lista{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:7px}
  .distrito{font-size:13.5px;padding:8px 10px}}

/* ---------- No sé por dónde empezar ---------- */
.start{margin-top:30px;padding:26px 26px 28px;background:linear-gradient(120% 160% at 100% 0,#eef6f5 0,#fcfdfd 62%);border:1px solid var(--line);border-radius:16px}
.start__title{font-size:22px}
.start__lede{margin:6px 0 18px;color:var(--muted);font-size:14.5px}
.start__chips{display:flex;flex-wrap:wrap;gap:9px}
.intent{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:500;font-size:14px;padding:10px 15px;border-radius:10px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
.intent:hover{border-color:var(--primary);color:var(--primary-d)}
.intent.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
/* El grupo abierto se marca, pero no filtra: por eso no va en color pleno como
   una opción elegida, sino con el borde del acento y su flecha girada. */
.intent{display:inline-flex;align-items:center;gap:7px}
.intent__v{width:15px;height:15px;flex:none;opacity:.5;transition:transform .15s}
.intent.is-open{border-color:var(--primary);color:var(--primary-d);background:var(--primary-tint)}
.intent.is-open .intent__v{transform:rotate(180deg);opacity:1}
/* Las opciones del grupo abierto, un escalón por debajo en peso visual */
.start__subs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.subintent{border:1px solid var(--line-2);background:var(--bg);color:var(--muted);font:inherit;font-size:13.5px;padding:8px 13px;border-radius:10px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
.subintent:hover{border-color:var(--primary);color:var(--primary-d);background:var(--surface)}
.subintent.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ---------- Toolbar ---------- */
.toolbar{margin:28px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toolbar__count{font-weight:600;font-size:15px}
.toolbar__count span{color:var(--primary-d)}
.toolbar__actions{display:flex;gap:8px;align-items:center}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:14px;padding:9px 14px;border-radius:var(--radius-sm);cursor:pointer}
.btn-ghost svg{width:18px;height:18px}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary-d)}
.badge{background:var(--primary);color:#fff;font-size:12px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:9px;display:inline-grid;place-items:center}
.btn-clear{border:0;background:transparent;color:var(--muted);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;padding:6px}
.btn-clear:hover{color:var(--ink)}

/* ---------- Layout ---------- */
.layout{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;padding-bottom:60px}

/* ---------- Filtros ---------- */
.filters__head{display:none;align-items:center;justify-content:space-between;margin-bottom:8px}
.filters__close{border:0;background:transparent;color:var(--muted);width:36px;height:36px;padding:8px;cursor:pointer}
/* El nombre completo no cabe en la chapa de la cabecera en pantallas
   estrechas: por debajo de 720 px se queda en "Mapa · Utrera". */
/* Índice de las preguntas frecuentes: dos columnas cuando hay sitio, para
   que se vea de un golpe todo lo que se responde. */
.doc__indice{margin:0 0 28px;padding:18px 20px 18px 38px;background:var(--surface);border:1px solid var(--line);border-radius:12px;columns:1;font-size:15px}
.doc__indice li{margin:0 0 7px;break-inside:avoid}
.doc__indice a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.doc__indice a:hover{color:var(--primary-d);border-color:var(--primary)}
@media(min-width:760px){.doc__indice{columns:2;column-gap:34px}}
.doc__cierre{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-2);color:var(--muted)}

/* La firma del pie: un punto por encima del resto de la letra pequeña, porque
   dice de quién es esto y de qué familia, no es una advertencia más. */
/* Enlace que se sale del directorio: se marca con una flecha, para que nadie
   pulse creyendo que sigue dentro. */
.foot__fuera::after{content:"↗";margin-left:3px;font-size:.85em;opacity:.7}
.start__ecos{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-2);font-size:14px;color:var(--muted)}
.start__ecos a{color:var(--primary-d);font-weight:600}

/* Renta por secciones censales. La barra usa el mismo verde del proyecto con
   la opacidad como escala: cuanto más oscura, más renta. En cifras tabulares
   para que la columna de euros no baile. */
/* El mapa de renta. El SVG se adapta al ancho y guarda su proporción; el
   contorno blanco entre secciones es lo que hace que se distingan. */
/* ---------------------------------------------------------------------------
   EN QUÉ DESTACA Y EN QUÉ SE QUEDA CORTO
   Dos columnas, no un semáforo: no hay aprobados ni suspensos, hay un municipio
   colocado en una fila. El color es una marca lateral fina, no un relleno; un
   panel verde entero y otro rojo entero convertirían un diagnóstico en una
   nota de examen.
   --------------------------------------------------------------------------- */
.comp{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}
@media(min-width:860px){.comp{grid-template-columns:1fr 1fr;gap:26px}}
.comp__lado{padding:2px 0 2px 16px;border-left:3px solid var(--line);min-width:0}
.comp__lado--bien{border-left-color:#0d9488}
.comp__lado--mal{border-left-color:#b45309}
.comp__lado h4{margin:0 0 12px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.comp__lado ul{list-style:none;margin:0;padding:0}
.comp__f{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.comp__lado li:first-child{border-top:none}
.comp__n{font-weight:600;font-size:14.5px;color:var(--ink);min-width:0;overflow-wrap:break-word}
.comp__v{font-variant-numeric:tabular-nums;font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap}
.comp__p,.comp__e{grid-column:1/-1;font-size:12.5px;color:var(--muted);line-height:1.5}
.comp__e{font-style:italic}
/* La posición en la fila: barra fina, sin números encima, solo para que el ojo
   compare de un vistazo un indicador con otro. */
.pos{grid-column:1/-1;display:block;height:4px;border-radius:2px;background:var(--line);margin:4px 0 2px}
.pos i{display:block;height:100%;border-radius:2px;background:currentColor;opacity:.55}
.comp__lado--bien .pos{color:#0d9488}
.comp__lado--mal .pos{color:#b45309}

/* La ficha completa, plegada hasta que alguien la pide */
.ficha__b{margin:22px 0 0}
.ficha__b h4{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ficha__l{margin:0;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:700px){.ficha__l{grid-template-columns:1fr 1fr;column-gap:32px}}
.ficha__f{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:6px 0;border-bottom:1px solid var(--line);min-width:0}
.ficha__f dt{font-size:13.5px;color:var(--muted);min-width:0;overflow-wrap:break-word}
.ficha__f dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ficha__y{font-weight:400;font-size:11.5px;color:var(--muted);font-variant-numeric:normal}
/* La fila puede partirse: el motivo de un "sin dato" baja a su línea, a lo ancho */
.ficha__f{flex-wrap:wrap}
.ficha__nd{font-weight:500;color:var(--muted)}
.ficha__por{flex-basis:100%;margin:2px 0 0;font-size:12px;color:var(--muted);line-height:1.45}

/* Barra de la ficha completa: filtro por bloque a la izquierda, plegar a la
   derecha. Botones rectangulares, no cápsulas. */
.ficha__barra{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:12px 18px;margin:16px 0 4px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ficha__filtro{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1 1 420px}
.fbloq{font:inherit;font-size:12.5px;padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;line-height:1.2}
.fbloq span{color:var(--muted);font-variant-numeric:tabular-nums;margin-left:2px}
.fbloq:hover{border-color:var(--primary)}
.fbloq[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.fbloq[aria-pressed="true"] span{color:rgba(255,255,255,.8)}
.ficha__ocultar{flex:0 0 auto}
.ficha__pie{margin-top:16px;display:flex;justify-content:flex-end}

/* La invitación de la portada. Sobria: no es una llamada comercial, es una
   señal de por dónde seguir. */
.empezar{padding:28px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-align:center}
.empezar__t{margin:0 0 8px;font-family:'Libre Baskerville',Georgia,serif;font-size:18px;color:var(--ink)}
.empezar__d{margin:0 auto 18px;max-width:52ch;font-size:14.5px;color:var(--muted);line-height:1.6}

/* «Lo que aquí todavía no sale». Cierra el listado y el mapa diciendo qué falta
   y por qué. Discreto a propósito: la misma caja blanca del resto de la página
   con un filete gris arriba, no un cartel de aviso ámbar. Un hueco reconocido
   informa; gritado, asusta. */
.faltan{margin-top:26px;padding:20px 22px 22px;background:var(--surface);border:1px solid var(--line);
  border-top:3px solid var(--line);border-radius:var(--radius);color:var(--muted)}
.faltan__t{font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);margin:0 0 10px}
.faltan p{margin:0 0 12px;font-size:14px;line-height:1.65;max-width:72ch}
.faltan p:last-child{margin-bottom:0}
.faltan__lista{margin:0 0 12px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.faltan__lista li{font-size:14px;line-height:1.6;padding-left:13px;border-left:2px solid var(--line);max-width:72ch}
.faltan__lista b{color:var(--ink);font-weight:600}
.faltan__pide{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
/* Rectángulo redondeado, nunca cápsula. */
.faltan__b{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:9px 14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--primary-d);font-weight:600;font-size:13.5px;text-decoration:none}
.faltan__b:hover{border-color:var(--primary)}
.faltan__b svg{width:16px;height:16px;flex:none}
@media(max-width:560px){.faltan{padding:17px 15px 18px}}

.coro{margin:0 0 18px;padding:0}
.coro svg{width:100%;height:auto;max-height:380px;display:block}
.coro path{transition:fill-opacity .15s}
.coro path:hover{fill-opacity:1!important}
/* Los botones de qué se pinta. Rectángulo redondeado, nada de cápsulas. */
.coro__medidas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.coro__m{border:1px solid var(--line);background:var(--surface);color:var(--muted);font:inherit;font-size:13px;font-weight:500;padding:7px 13px;border-radius:10px;cursor:pointer;transition:border-color .18s ease,color .18s ease,background .18s ease}
.coro__m:hover{border-color:var(--primary);color:var(--primary-d)}
.coro__m.is-active{background:var(--primary);border-color:var(--primary);color:#fff}

.coro__pie{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.coro__esc{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.coro__barra{flex:1;max-width:220px;height:10px;border-radius:3px;background:linear-gradient(90deg,color-mix(in srgb,var(--primary) 12%,transparent),var(--primary))}
.coro__nota{font-size:12.5px;color:var(--faint);line-height:1.5}

.zonas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.zona{display:grid;grid-template-columns:96px 1fr 76px;align-items:center;gap:10px;padding:4px 8px;border-radius:8px}
/* La fila que separa las de abajo de las de arriba y ofrece el listado entero */
.zona--corte{display:block;padding:0;margin:6px 0}
.zona--corte:hover{background:none}
.zona--corte button{width:100%;border:1px dashed var(--line);background:none;color:var(--primary-d);font:inherit;font-size:13px;padding:8px 10px;border-radius:9px;cursor:pointer}
.zona--corte button:hover{border-color:var(--primary);background:var(--primary-tint)}
.zona:hover{background:var(--line-2)}
.zona__n{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zona__b{height:14px;background:var(--line-2);border-radius:4px;overflow:hidden}
.zona__b i{display:block;height:100%;background:var(--primary);border-radius:4px}
.zona__v{font-size:13px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
/* El detalle de cada zona solo aparece al pasar por encima: si se enseñara
   siempre, cuarenta filas serían un muro ilegible. */
.zona__x{grid-column:1/-1;font-size:12px;color:var(--faint);display:none}
.zona:hover .zona__x{display:block}
.graf__pie{margin:12px 0 0;font-size:12.5px;color:var(--faint);line-height:1.5}
.graf__pie a{color:var(--primary-d)}

.foot__credito{margin:0 0 10px;font-size:13.5px;color:var(--muted)}
.foot__credito b{color:var(--ink);font-weight:600}
.foot__credito a{color:var(--primary-d);font-weight:600}

.brand__desc{display:none}
@media(min-width:720px){.brand__desc{display:inline}}

.fgroup{border-top:1px solid var(--line-2);padding:14px 0}
.fgroup:first-child{border-top:0;padding-top:0}
/* La cabecera del grupo es el resumen de un <details>: se pliega sola, sin
   JavaScript, y el teclado la maneja de serie. */
.fgroup__t{display:flex;align-items:center;gap:8px;font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:10px;cursor:pointer;list-style:none;user-select:none}
.fgroup__t::-webkit-details-marker{display:none}
.fgroup__t:hover{color:var(--ink)}
.fgroup__t:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.fgroup[open] .fgroup__t{margin-bottom:8px}
/* Cuántos filtros hay puestos dentro de un grupo cerrado */
.fgroup__n{min-width:18px;height:18px;padding:0 5px;border-radius:6px;background:var(--primary);color:#fff;font-size:11px;line-height:18px;text-align:center;letter-spacing:0}
.fgroup__v{width:16px;height:16px;margin-left:auto;flex:none;transition:transform .15s}
.fgroup[open] .fgroup__v{transform:rotate(180deg)}
/* Cuántos resultados daría cada casilla. Va en cifra tabular para que las
   columnas de números no bailen de una línea a otra. */
.fchk__n{flex:none;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.fchk input:checked ~ .fchk__n{color:var(--primary)}
.fmas{margin-top:4px;padding:6px 8px;border:0;background:none;color:var(--primary);font:inherit;font-size:13px;text-align:left;cursor:pointer;border-radius:9px}
.fmas:hover{background:var(--line-2)}
.fopts{display:flex;flex-direction:column;gap:2px}
.fchk{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:9px;cursor:pointer;font-size:14px;color:var(--ink)}
.fchk:hover{background:var(--line-2)}
.fchk input{position:absolute;opacity:0;width:0;height:0}
.fbox{width:19px;height:19px;flex:none;border:1.6px solid var(--line);border-radius:6px;display:grid;place-items:center;color:#fff;transition:.12s}
.fbox svg{width:13px;height:13px;opacity:0;stroke-width:2.6}
.fchk input:checked + .fbox{background:var(--primary);border-color:var(--primary)}
.fchk input:checked + .fbox svg{opacity:1}
.fchk input:focus-visible + .fbox{box-shadow:0 0 0 3px var(--primary-tint)}
.fchk__lb{flex:1}

/* ---------- Chips activos ---------- */
.chips-active{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chips-active:empty{display:none}
.achip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-tint);color:var(--primary-d);border:1px solid #cbe6e2;border-radius:9px;padding:5px 6px 5px 12px;font-size:13px;font-weight:500}
.achip button{border:0;background:transparent;color:inherit;width:20px;height:20px;padding:4px;cursor:pointer;border-radius:50%}
.achip button:hover{background:#cbe6e2}
.achip button{border-radius:6px}

/* ---------- Tarjetas ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:19px;box-shadow:0 1px 2px rgba(20,32,46,.04);display:flex;flex-direction:column;gap:11px;position:relative;transition:border-color .18s ease,box-shadow .18s ease}
.card:hover{border-color:#d3d8de;box-shadow:0 1px 2px rgba(20,32,46,.05),0 10px 22px -18px rgba(20,32,46,.4)}
/* La tarjeta cuyo texto todavía está bajando (el nombre y la dirección van en el
   trozo del índice, no en el núcleo). Ocupa su alto para que no salte la página
   cuando aparezca, y no se le pone animación: un latido de 24 huecos a la vez
   marea, y hay quien no lo tolera. */
.card--esperando{min-height:168px;background:#f6f7f9;border-style:dashed;box-shadow:none}
.card--esperando:hover{border-color:var(--line);box-shadow:none}
/* «Mirando en todas las fichas… 43 %»: en una ciudad grande el texto de buscar y
   los puntos del mapa llegan a trozos, y mientras llegan se dice. */
.descargando{flex:1 1 100%;margin:2px 0 0;font-size:13px;font-weight:400;color:var(--muted)}
.card__top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ccat{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--c);background:var(--c-tint);padding:5px 10px 5px 8px;border-radius:8px;letter-spacing:.01em}
.ccat svg{width:16px;height:16px;stroke-width:2}
.cdemo{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--amber);background:var(--amber-tint);padding:3px 8px;border-radius:6px}
.card__name{font-family:var(--sans);font-size:17.5px;font-weight:600;line-height:1.28;letter-spacing:-.01em;color:var(--ink)}
.card__desc{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0}
.card__meta{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--muted)}
.card__meta .row{display:flex;align-items:flex-start;gap:8px}
.card__meta .row svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--faint)}
.taglist{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12.5px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:3px 9px}
.dest{display:flex;flex-wrap:wrap;gap:6px}
.dest .d{font-size:12px;color:var(--primary-d);background:var(--primary-tint);border-radius:6px;padding:2px 8px}
.card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.btn-primary,.btn-second,.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:10px;cursor:pointer;text-decoration:none;border:1px solid transparent}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d)}
.btn-second{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-second:hover{border-color:var(--primary);color:var(--primary-d)}
.btn-line{background:transparent;border-color:var(--line);color:var(--muted)}
.btn-line:hover{border-color:var(--primary);color:var(--primary-d)}
.btn-primary svg,.btn-second svg,.btn-line svg{width:16px;height:16px}

/* ---------- Vacío ---------- */
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
.empty svg{width:42px;height:42px;color:var(--faint);margin-bottom:10px}
.doc h2{font-family:var(--display)}
.empty p{margin:0 0 16px;font-size:16px}

/* ---------- Sectores ---------- */
.sectors__intro h2{font-size:22px}
.sectors__intro p{color:var(--muted);margin:6px 0 18px;font-size:14.5px;max-width:70ch}
.sectors__grid{display:grid;grid-template-columns:1fr;gap:14px}
.sector{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.sector__top{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.sector__ic{width:40px;height:40px;flex:none;display:grid;place-items:center;padding:9px;border-radius:11px;background:var(--c-tint);color:var(--c)}
.sector__ic svg{stroke-width:2}
.sector__name{font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:-.01em}
.sector__desc{color:var(--muted);font-size:14px;margin:0 0 12px}
.sector__block{font-size:13.5px;margin-top:8px}
.sector__block b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);margin-bottom:5px;font-weight:700}

/* ---------- Ficha (panel lateral) ---------- */
.sheet{position:fixed;inset:0;z-index:60}
.sheet__backdrop{position:absolute;inset:0;background:rgba(16,26,38,.42);backdrop-filter:blur(2px);animation:fade .2s ease}
.sheet__panel{position:absolute;top:0;right:0;height:100%;width:min(480px,100%);background:var(--surface);box-shadow:-20px 0 60px -30px rgba(16,26,38,.5);overflow-y:auto;padding:24px 24px 40px;animation:slide .24s cubic-bezier(.2,.7,.3,1)}
.sheet__close{position:sticky;top:0;float:right;border:1px solid var(--line);background:var(--surface);color:var(--muted);width:38px;height:38px;padding:9px;border-radius:10px;cursor:pointer;margin-bottom:6px}
.sheet__close:hover{color:var(--ink);border-color:var(--primary)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slide{from{transform:translateX(20px);opacity:.4}to{transform:none;opacity:1}}
.sheet h2{font-size:24px;line-height:1.15;margin:2px 40px 10px 0}
.sheet .ccat{margin-bottom:14px}
.sheet__sec{border-top:1px solid var(--line-2);padding:15px 0}
.sheet__sec:last-child{border-bottom:1px solid var(--line-2)}
.sheet__sec h3{font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700;margin-bottom:9px}
.sheet__sec p{margin:0;font-size:14.5px;color:var(--ink)}
.sheet__sec ul{margin:0;padding-left:18px;font-size:14.5px;display:flex;flex-direction:column;gap:4px}
.sheet__contact{display:flex;flex-direction:column;gap:9px}
.sheet__contact a,.sheet__contact span{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink);text-decoration:none}
.sheet__contact svg{width:18px;height:18px;flex:none;color:var(--primary)}
.sheet__contact a:hover{color:var(--primary-d)}
.sheet__cta{margin-top:18px}
.sheet__cta .btn-primary{width:100%;padding:13px}

/* ---------- Responsive ---------- */
@media(min-width:560px){
  .quick__grid{grid-template-columns:repeat(4,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .sectors__grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:900px){
  .hero__inner{padding-top:26px;padding-bottom:40px}
  .layout{grid-template-columns:250px 1fr;gap:28px}
  .filters{position:sticky;top:18px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .sectors__grid{grid-template-columns:repeat(3,1fr)}
  #filters-toggle{display:none}
}
@media(min-width:1200px){ .cards{grid-template-columns:repeat(3,1fr)} }

/* ---------- Filtros: el cajón del móvil ----------
   Antes era una tira de 330 px pegada a la derecha con la cabecera en el flujo:
   al bajar por los cincuenta y tantos filtros, la X se iba con el resto y había
   que volver arriba del todo para salir. Y el recuento de resultados quedaba
   detrás del velo, así que se filtraba a ciegas.

   Ahora ocupa la pantalla entera y son tres piezas fijas: cabecera con la X
   arriba, la lista de filtros en medio (lo único que se desplaza) y un pie que
   dice cuántos recursos quedan y cierra. Un solo toque para salir, desde donde
   sea. */
/* En el escritorio los filtros están al lado de los resultados y el recuento se
   ve solo: el pie del cajón no pinta nada ahí. */
.filters__pie{display:none}
@media(max-width:899px){
  .filters{position:fixed;inset:0;z-index:70;width:100%;background:var(--surface);box-shadow:-20px 0 60px -30px rgba(16,26,38,.5);padding:0;overflow:hidden;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s ease;visibility:hidden}
  .filters.is-open{transform:none;visibility:visible}
  .filters__head{display:flex;flex:none;margin:0;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
  .filters__head h2{font-size:20px}
  .filters__close{width:44px;height:44px;padding:11px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
  .filters__close:hover{border-color:var(--primary)}
  #filters-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 16px 10px}
  .filters__pie{display:flex;flex:none;align-items:center;gap:10px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 24px -20px rgba(20,32,46,.6)}
  .filters__ver{flex:1 1 auto;min-height:48px;font-size:15px}
  #filters-limpiar{flex:none;min-height:48px;padding:8px 4px}
  body.filters-open{overflow:hidden}
  .filters__scrim{position:fixed;inset:0;z-index:65;background:rgba(16,26,38,.4);opacity:0;visibility:hidden;transition:.2s}
  .filters__scrim.is-open{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- Datos reales: categoría secundaria, fuente y "dónde formarte" --- */
.card__top{flex-wrap:wrap}
.ccat--alt{opacity:.9}
.sheet .ccat--alt{margin-left:6px}
.sector__block--soft span{color:var(--faint)}
.sector__form{margin:0;padding-left:17px;display:flex;flex-direction:column;gap:3px}
.sheet__src{margin:0;padding-left:18px;font-size:13.5px;display:flex;flex-direction:column;gap:6px}
.sheet__src a{color:var(--primary-d);text-decoration:none}
.sheet__src a:hover{text-decoration:underline}
.sheet__src-date{margin:9px 0 0;font-size:13px;color:var(--faint)}
.src-note{display:block;margin:22px 0 0;padding:11px 14px;background:var(--bg-2,#f6f7f9);border:1px solid var(--line-2);color:var(--faint);border-radius:var(--radius-sm);font-size:13.5px}
.src-note strong{color:var(--ink)}

/* Sprite de iconos: la regla global svg{width:100%;height:100%} lo hacía crecer
   hasta cubrir la pantalla y se tragaba todos los clics. */
.sprite{position:absolute;width:0!important;height:0!important;overflow:hidden;pointer-events:none}
.sector__tejido{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;padding:9px 11px;background:var(--c-tint);border-radius:var(--radius-sm);font-size:13px;color:var(--ink)}
.sector__tejido svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--c)}
/* Marca discreta del estado del dato en la tarjeta (sin confirmar / OSM) */
.cestado{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--faint);background:var(--surface-2);border:1px solid var(--line);padding:3px 8px;border-radius:6px}

/* ===== El municipio en cifras ===== */
.cifras{margin:26px 0 0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.cifras__head h2{font-family:var(--display);font-size:24px;margin:0 0 4px}
.cifras__lede{margin:0;color:var(--muted);font-size:14.5px;max-width:70ch}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0 14px}
.tile{padding:14px 16px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.tile__n{font-family:var(--display);font-size:28px;font-weight:700;color:var(--primary-d);line-height:1.1;font-variant-numeric:tabular-nums}
.tile__t{font-size:13.5px;color:var(--ink);margin-top:3px}
.tile__y{font-size:12px;color:var(--faint);margin-top:2px}
/* Las cifras del distrito elegido. Van aparte y con su marco para que no se
   confundan con las de la ciudad, que son las de arriba. */
.cdist{margin:0 0 16px;padding:16px 18px;border:1px solid var(--primary-tint);border-left:3px solid var(--primary);border-radius:var(--radius-sm);background:#fbfdfd}
.cdist__t{margin:0 0 4px;font-size:16px}
.cdist__d{margin:0 0 12px;color:var(--muted);font-size:13.5px}
.cdist .tiles{margin:0}
.cdist__f{margin:12px 0 0;color:var(--faint);font-size:12.5px}
.cifras__mas{margin-top:2px}
.cifras__detalle{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2)}
.graf h3{font-size:15.5px;margin:0 0 4px}
.graf__lede{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.graf--ancho{grid-column:1/-1}
.graf__nota{margin:12px 0 0;padding:11px 13px;background:var(--amber-tint);border:1px solid #f0dcae;border-radius:var(--radius-sm);font-size:13.5px;color:#7a5314}
.graf__fuente{grid-column:1/-1;margin:0;font-size:12.5px;color:var(--faint)}
.graf__fuente a{color:var(--primary-d)}
.barras{display:flex;flex-direction:column;gap:8px}
.barra{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;align-items:center;gap:10px}
.barra__lb{font-size:13px;color:var(--ink)}
.barra__track{height:14px;background:var(--surface-2);border-radius:7px;overflow:hidden}
.barra__fill{height:100%;border-radius:0 7px 7px 0;transition:width .4s ease}
.barra__val{font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}
.reparto__barra{display:flex;gap:2px;height:26px;border-radius:7px;overflow:hidden}
.reparto__barra span{display:block;height:100%}
.leyenda{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
.leyenda li{display:flex;align-items:center;gap:7px}
.leyenda i{width:11px;height:11px;border-radius:3px;flex:none}
.leyenda span{color:var(--faint)}
.cruce{width:100%;border-collapse:collapse;font-size:13.5px}
.cruce th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700;padding:0 10px 8px 0;border-bottom:1px solid var(--line)}
.cruce td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line-2)}
.cruce .num{font-variant-numeric:tabular-nums;text-align:right;width:100px}
.cruce tr.es-hueco td{background:#fdf6ea}
.hueco{display:inline-block;font-size:12px;font-weight:600;color:#7a5314;background:var(--amber-tint);border:1px solid #f0dcae;padding:2px 8px;border-radius:6px}
@media (max-width:720px){.cifras{padding:16px}.barra{grid-template-columns:minmax(80px,42%) 1fr auto}.cruce{display:block;overflow-x:auto}}

/* ---------- Comparar dos municipios ----------
   Ni barras, ni colores de semáforo, ni nada que sugiera quién gana: números
   alineados, la mediana de la provincia detrás y la advertencia delante. Cada
   medida es una tarjeta y cada municipio una fila dentro de ella, así que en un
   teléfono de 375 px se lee en vertical y no hay ninguna tabla que se salga. */
.comparar .cmp__sel{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 6px}
@media(min-width:760px){.comparar .cmp__sel{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}}
.cmp__campo{margin:0;display:flex;flex-direction:column;gap:5px;min-width:0}
@media(min-width:760px){.cmp__campo--b{grid-column:1/-1}}
.cmp__lab{font-size:12.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}
.cmp__s{font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:10px 12px;min-height:44px;width:100%;max-width:100%}
.cmp__campo--b .btn-line{align-self:flex-start}
.cmp__vacio{margin:14px 0 0;color:var(--muted);font-size:14px}
.cmp__aviso{margin:18px 0 0;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:var(--radius-sm);font-size:13.5px;color:var(--muted);line-height:1.6}
.cmp__aviso b{color:var(--ink)}
.cmp__escala{display:grid;grid-template-columns:1fr;gap:12px;margin:18px 0 0}
@media(min-width:620px){.cmp__escala{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.cmp__quien{padding:14px 16px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm)}
.cmp__quien-t{margin:0;font-size:16px}
.cmp__quien-d{margin:3px 0 0;font-size:13px;color:var(--muted)}
.cmp__frase{margin:12px 0 0;font-size:14px;color:var(--ink)}
.cmp__h{margin:28px 0 4px;font-size:15.5px}
.cmp__lede{margin:0;font-size:13.5px;color:var(--muted);max-width:70ch}
.cmp__inds{display:grid;grid-template-columns:1fr;gap:18px;margin-top:16px}
@media(min-width:720px){.cmp__inds{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px 26px}}
.cmp__ind{min-width:0;padding:0 0 0 14px;border-left:3px solid var(--line)}
.cmp__ind-t{margin:0 0 8px;font-size:14.5px;font-weight:600;color:var(--ink);overflow-wrap:break-word}
.cmp__y{font-size:12px;font-weight:600;color:var(--faint);white-space:nowrap}
.cmp__vals{list-style:none;margin:0;padding:0}
.cmp__val{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-top:1px solid var(--line-2)}
.cmp__val:first-child{border-top:none}
.cmp__m{font-size:13.5px;color:var(--muted);min-width:0;flex:1 1 auto;overflow-wrap:break-word}
/* La cifra no se parte en dos líneas («61 / empresas» se leía fatal): quien se
   ajusta es el nombre del municipio, que sí puede envolver. */
.cmp__v{font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;
  flex:0 1 auto;min-width:0;white-space:nowrap;overflow-wrap:break-word}
.cmp__val--sin .cmp__v{font-weight:600;font-size:13.5px;color:var(--faint)}
.cmp__ref{margin:8px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.cmp__e{margin:6px 0 0;font-size:12.5px;color:var(--muted);font-style:italic;line-height:1.5}
.cmp__ojo{margin:8px 0 0;font-size:12.5px;color:#7a5314;background:var(--amber-tint);border:1px solid #f0dcae;
  border-radius:var(--radius-sm);padding:9px 11px;line-height:1.5}
.cmp__ojo--ancho{margin-top:16px}
.cmp__fuente{margin:16px 0 0;font-size:12.5px;color:var(--faint);line-height:1.6;max-width:80ch}
.cmp__fuente a{color:var(--primary-d)}
/* Serie mensual y pirámide de paro */
.linea{width:100%;height:auto;display:block;margin-top:4px}
.linea .rejilla{stroke:var(--line);stroke-width:1}
.linea .ejeX,.linea .ejeY{font-size:9px;fill:var(--faint);font-family:var(--sans)}
.piramide{display:flex;flex-direction:column;gap:9px}
.pir__fila{display:grid;grid-template-columns:1fr 112px 1fr;align-items:center;gap:10px}
.pir__lado{display:flex;align-items:center;gap:9px;height:16px}
.pir__track{flex:1;height:100%;display:flex;min-width:0}
.pir__lado.izq .pir__track{justify-content:flex-end}
.pir__lado span{display:block;height:100%;border-radius:4px}
.pir__lado b{flex:none;width:46px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.pir__lado.izq b{text-align:left}
.pir__lado.dcha b{text-align:right}
.pir__lado.izq span{border-radius:4px 0 0 4px}
.pir__lado.dcha span{border-radius:0 4px 4px 0}
.pir__edad{font-size:12.5px;color:var(--muted);text-align:center}

/* Todas las cifras de los gráficos, con la misma pinta: mismo peso, mismo
   color y cifras de ancho fijo para que columnen. */
.barra__val,.leyenda b,.pir__lado b,.cruce .num,.mapa__leyenda span{font-variant-numeric:tabular-nums}
.leyenda b{font-weight:600;color:var(--ink)}

/* ---------- Páginas de texto (aviso legal, privacidad, contacto) ---------- */
/* En las páginas de texto la cabecera se alinea con la columna de lectura */
.hero--corto .hero__inner{min-height:0;padding-top:22px;padding-bottom:26px;display:block;max-width:804px}
.hero--corto .hero__title{max-width:20ch}
.doc{padding:30px 18px 70px;max-width:760px}
.doc__nav{margin-bottom:26px;font-size:14px}
.doc__nav a{color:var(--muted);text-decoration:none;font-weight:500}
.doc__nav a:hover{color:var(--primary-d)}
.doc h2{font-size:22px;margin:34px 0 10px}
.doc h2:first-of-type{margin-top:0}
/* Un tercer nivel dentro de un apartado largo (la guía para profesionales lo
   usa). Sin esto se quedaba pegado al párrafo anterior: los h1-h3 del motor
   llevan margin:0 a propósito. */
.doc h3{font-size:17px;margin:24px 0 8px;color:var(--ink)}
.doc p{margin:0 0 12px;color:var(--ink);font-size:15.5px;line-height:1.65}
.doc ul,.doc ol:not(.doc__indice){margin:0 0 14px;padding-left:20px;color:var(--ink);font-size:15.5px;line-height:1.65}
.doc li{margin-bottom:7px}
/* Una dirección web escrita dentro del texto. Monoespaciada pero del mismo
   tamaño que lo que la rodea, para que no baile la línea. */
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--line-2);border-radius:5px;padding:1px 6px;word-break:break-word}
.doc a{color:var(--primary-d)}
.doc__fuentes{list-style:none;padding:0}
.doc__fuentes li{padding:10px 0 10px 16px;border-left:2px solid var(--line);font-size:14.5px;color:var(--muted);margin-bottom:0}
.doc__fuentes li a{font-weight:600}
.doc__lic{background:var(--line-2);padding:1px 7px;border-radius:5px;font-size:14px}
.doc__cta{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff!important;text-decoration:none;font-weight:600;font-size:14.5px;padding:11px 17px;border-radius:var(--radius-sm)}
.doc__cta:hover{background:var(--primary-d)}

/* ---------- Formulario de aviso / corrección ---------- */
.aviso{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow);margin:6px 0 10px}
.aviso__campo{margin-bottom:15px}
.aviso__campo label{display:block;font-weight:600;font-size:14px;margin-bottom:7px}
.aviso__opc{font-weight:400;color:var(--faint)}
.aviso input,.aviso select,.aviso textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;outline:none;transition:border-color .15s,box-shadow .15s}
.aviso input:focus,.aviso select:focus,.aviso textarea:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-tint);background:var(--surface)}
.aviso textarea{resize:vertical;line-height:1.55}
.aviso__nota{margin:0 0 16px;font-size:13.5px;color:var(--muted)}
.aviso__acciones{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn-solid{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:#fff;text-decoration:none;font:inherit;font-weight:600;font-size:14.5px;padding:11px 17px;border:1px solid var(--primary);border-radius:var(--radius-sm);cursor:pointer}
.btn-solid:hover{background:var(--primary-d);border-color:var(--primary-d)}
.btn-solid[aria-disabled="true"]{background:var(--muted);border-color:var(--muted)}
.aviso__ok{font-size:13.5px;font-weight:600;color:var(--primary-d)}
.aviso__destino{margin:13px 0 0;font-size:13.5px;color:var(--muted)}
.aviso__destino.es-pendiente{background:var(--amber-tint);border:1px solid #f0dcae;color:#7a5314;padding:10px 13px;border-radius:var(--radius-sm)}
.aviso__prev{margin-top:14px;font-size:13.5px;color:var(--muted)}
.aviso__prev summary{cursor:pointer;font-weight:600;color:var(--primary-d)}
.aviso__prev pre{margin:10px 0 0;padding:13px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);white-space:pre-wrap;word-break:break-word;font-family:var(--sans);font-size:13.5px;color:var(--ink);line-height:1.55}
.foot__mini a{color:inherit;text-decoration:underline}
.foot__links{margin-top:10px!important;font-weight:600}
.foot__links a{text-decoration:none}
.foot__links a:hover{text-decoration:underline}

/* ---------- Conmutador listado / mapa ---------- */
.vista{display:inline-flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px;gap:3px}
.vista__b{border:0;background:transparent;font:inherit;font-weight:600;font-size:14px;color:var(--muted);padding:7px 14px;border-radius:9px;cursor:pointer}
.vista__b:hover{color:var(--ink)}
.vista__b.is-active{background:var(--primary);color:#fff}

/* ---------- Mapa ---------- */
.mapa{margin-bottom:10px}
.mapa__lienzo{position:relative;background:#f0f3f6;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;height:min(70vh,620px);touch-action:none;cursor:grab}
.mapa__lienzo.is-arrastrando{cursor:grabbing}
.mapa__lienzo svg{display:block;width:100%;height:100%}
.m-termino{fill:#fbfcfd;stroke:#c9d2dc;stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
/* El distrito elegido: relleno casi nada y borde marcado, para que se vea de
   qué trozo de ciudad son los puntos sin taparlos. */
.m-distrito{fill:var(--primary);fill-opacity:.05;stroke:var(--primary);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none}
.m-suelo{stroke:none}
.m-agua{fill:#dbe7f0;stroke:none}
.m-rio{fill:none;stroke:#c3d7e6;stroke-width:1.6;vector-effect:non-scaling-stroke}
.m-via{fill:none;stroke:#d3dae2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.m-tren{fill:none;stroke:#b9c2cd;stroke-width:1.4;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.m-lugar{fill:var(--faint);font-family:var(--sans);font-weight:600;text-anchor:middle;paint-order:stroke;stroke:#f0f3f6;stroke-width:.6;letter-spacing:.02em}
.m-punto{stroke:#fff;cursor:pointer}
.m-punto:hover{stroke:var(--ink)}
.mapa__tip{position:absolute;transform:translate(-50%,-100%);background:var(--ink);color:#fff;padding:7px 11px;border-radius:9px;font-size:13px;line-height:1.35;pointer-events:none;max-width:230px;box-shadow:var(--shadow);z-index:3}
.mapa__tip b{display:block;font-weight:600}
.mapa__tip span{color:#b8c2cf;font-size:12px}
.mapa__zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:4px;z-index:2}
.mapa__zoom button{width:34px;height:34px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:18px;line-height:1;border-radius:9px;cursor:pointer;box-shadow:var(--shadow)}
.mapa__zoom button:hover{border-color:var(--primary);color:var(--primary-d)}
.mapa__acciones{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:2}
.mapa__b{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:13px;padding:8px 12px;border-radius:9px;cursor:pointer;box-shadow:var(--shadow)}
.mapa__b:hover{border-color:var(--primary);color:var(--primary-d)}
.mapa__cred{position:absolute;right:10px;bottom:8px;margin:0;font-size:11px;color:var(--faint);background:rgba(255,255,255,.82);padding:3px 8px;border-radius:6px;z-index:2}
.mapa__cred a{color:inherit}
.mapa__pie{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;align-items:flex-start;padding:14px 4px 0}
.mapa__leyenda{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
.mapa__leyenda li{display:flex;align-items:center;gap:7px;color:var(--ink)}
.mapa__leyenda i{width:11px;height:11px;border-radius:50%;flex:none}
.mapa__leyenda span{color:var(--faint);font-variant-numeric:tabular-nums}
.mapa__nota{margin:0;font-size:13px;color:var(--muted);max-width:52ch}
/* El mapa en el móvil. Antes se quedaba en 460 px de alto dentro de una
   pantalla de 812: un sello. Y el zoom vivía arriba a la derecha, que es justo
   donde no llega el pulgar. Ahora el lienzo ocupa casi toda la pantalla, el
   zoom baja a la esquina de abajo (encima del crédito de OpenStreetMap) y los
   encuadres, que se usan una vez, suben arriba a la izquierda. */
@media (max-width:720px){
  .mapa__lienzo{height:min(76vh,620px)}
  /* Los dos grupos abajo, que es donde llega el pulgar, y por encima del
     crédito de OpenStreetMap: arriba no pueden ir porque ahí queda la barra de
     resultados pegada y los taparía. Los encuadres se quedan a la izquierda con
     un tope por la derecha, para que se envuelvan en dos filas en vez de
     meterse debajo del zoom. */
  .mapa__acciones{left:10px;right:112px;top:auto;bottom:46px}
  .mapa__zoom{top:auto;bottom:46px;right:10px;flex-direction:row}
  .mapa__zoom button{width:44px;height:44px;font-size:20px}
  .vista__b{padding:7px 11px}
}

/* ---------- Paginación de resultados ---------- */
.mas{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 0 6px}
.mas__cuenta{margin:0;font-size:13.5px;color:var(--muted)}
.mas__b{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:15px;padding:12px 26px;border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow)}
.mas__b:hover{border-color:var(--primary);color:var(--primary-d)}

/* ---------- Documentos plegados del paquete de un solo fichero ---------- */
.footdocs{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.docdet{border-top:1px solid rgba(255,255,255,.14);padding-top:10px}
.docdet summary{cursor:pointer;font-weight:600;font-size:14px}
.docdet .doc{max-width:none;padding:8px 0 4px}
.docdet .doc h2{font-size:17px;margin:20px 0 8px}
.docdet .doc p,.docdet .doc ul{font-size:14px}

/* ---------- Qué se puede estudiar aquí ---------- */
.estudiar{margin-top:22px}
.nivchips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px}
.nivchip{border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-weight:500;font-size:13.5px;padding:8px 13px;border-radius:var(--radius-sm);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.nivchip span{font-size:12px;font-weight:700;color:var(--faint);font-variant-numeric:tabular-nums}
.nivchip:hover{border-color:var(--primary);color:var(--primary-d)}
.nivchip.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.nivchip.is-active span{color:#bfe3df}
.estudiar__lista{display:grid;grid-template-columns:1fr;gap:20px}
.fam{border-top:1px solid var(--line-2);padding-top:16px}
.fam__cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:12px}
.fam__cab h3{font-family:var(--sans);font-size:16.5px;font-weight:700;letter-spacing:-.01em}
.fam__tejido{font-size:12.5px;color:var(--faint)}
.fam__lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:10px}
.ofer{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:13px 15px}
.ofer__cab{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.ofer__niv{font-size:11.5px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:6px;background:var(--line-2);color:var(--muted)}
.niv--basica{background:#fbe6cd;color:#7a4c10}
.niv--gm{background:#d7f2ee;color:#0b5e58}
.niv--gs{background:#e8f0fe;color:#1c4bab}
.niv--bach{background:#efe7fd;color:#5b2ec4}
.niv--certificado{background:#dcf3e3;color:#146c34}
.niv--especialidad{background:var(--line-2);color:var(--muted)}
.ofer__cod{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--faint);background:var(--surface);border:1px solid var(--line);padding:2px 7px;border-radius:5px}
.ofer__t{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.ofer__esp{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.ofer__esp span{font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.ofer__centro{display:inline-flex;align-items:center;gap:6px;margin-top:9px;border:0;background:transparent;padding:0;font:inherit;font-size:13px;font-weight:500;color:var(--primary-d);cursor:pointer;text-align:left}
.ofer__centro svg{width:14px;height:14px;flex:none}
.ofer__centro:hover{text-decoration:underline}
.huecos{margin-top:22px;padding:16px 18px;background:var(--amber-tint);border:1px solid #f0dcae;border-radius:var(--radius);color:#5f4110}
.huecos:empty{display:none}
.huecos h3{font-family:var(--sans);font-size:16px;font-weight:700;margin:0 0 6px}
.huecos p{margin:0 0 10px;font-size:14px}
.huecos ul{margin:0;padding-left:18px;font-size:14px;display:flex;flex-direction:column;gap:5px}
@media(min-width:700px){.fam__lista{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.fam__lista{grid-template-columns:repeat(3,1fr)}}

/* ---------- Cabecera: adaptación a pantallas pequeñas ---------- */
@media(max-width:820px){
  .hero__inner{min-height:0;padding-top:18px;padding-bottom:30px}
  .hero__title{font-size:clamp(2.15rem,7.5vw,2.6rem);max-width:none}
  .hero__sub{font-size:15.5px}
  .hero__escudo{width:150px;right:-44px;opacity:.07}
  .hero__foto{left:0;-webkit-mask-image:none;mask-image:none}
  .hero__velo{background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 55%, rgba(255,255,255,.62) 100%),
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 28%, rgba(247,249,250,.7) 76%, var(--bg) 100%)}
  .search{max-width:none}
}
@media(max-width:560px){
  .wrap{padding:0 16px}
  .hero__escudo{display:none}
  .brand{margin-bottom:18px}
}
/* Pantallas anchas: la foto se ve más y el texto sigue mandando a la izquierda */
@media(min-width:1400px){
  .hero__velo{background:
    linear-gradient(90deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.92) 30%, rgba(255,255,255,.55) 58%, rgba(255,255,255,.28) 100%),
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 30%, rgba(247,249,250,.5) 78%, var(--bg) 100%)}
}
.estudiar__detalle{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-2)}

/* ---------- Elegir municipio (territorios con más de uno) ---------- */
.unidades{margin:6px 0 26px}
.unidades h2{font-size:22px}
.unidades__lede{margin:6px 0 18px;color:var(--muted);font-size:14.5px;max-width:62ch}
/* Cuando se ha pedido algo antes de elegir municipio: que se vea que falta ese paso */
.unidades__lede--aviso{color:var(--ink);background:var(--amber-tint);border-radius:11px;padding:11px 15px;max-width:72ch}
.unidad__c--cero{color:var(--faint);font-weight:500}
.unidades__g{font-family:var(--sans);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:22px 0 10px}
.unidades__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.unidad{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:13px 15px;background:var(--surface);border:1px solid var(--line);border-radius:11px;cursor:pointer;font:inherit;text-align:left;transition:border-color .18s ease,background .18s ease}
.unidad:hover{border-color:var(--primary);background:#fdfefe}
.unidad[disabled]{opacity:.5;cursor:default}
.unidad__n{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.25}
.unidad__c{font-size:13px;color:var(--primary-d);font-weight:600;font-variant-numeric:tabular-nums;flex:none}
.unidad[disabled] .unidad__c{color:var(--faint);font-weight:500}
.sitio{display:inline-flex;align-items:center;gap:6px;margin-left:12px;padding:5px 11px 5px 8px;border:1px solid var(--line);background:var(--surface);border-radius:9px;font:inherit;font-size:13.5px;color:var(--muted);cursor:pointer;vertical-align:middle}
.sitio svg{width:15px;height:15px;flex:none;color:var(--primary)}
.sitio b{color:var(--ink);font-weight:600}
.sitio span{color:var(--primary-d);text-decoration:underline}
.sitio:hover{border-color:var(--primary)}
.m-vecino{fill:#f2f5f7;stroke:#dfe5ec;stroke-width:1;vector-effect:non-scaling-stroke}

/* El enlace a "Conocer el municipio" desde la portada. Sobrio: es una puerta,
   no un anuncio. */
.enlace-conocer{color:var(--primary-d);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.enlace-conocer:hover{border-bottom-color:var(--primary)}

/* La página "Conocer el municipio" */
.doc__entradilla{font-size:16.5px;line-height:1.7;color:var(--ink);margin:0 0 22px}
.doc__nota{margin:18px 0 0;padding:12px 14px;background:var(--surface);border-left:3px solid var(--primary);border-radius:0 9px 9px 0;font-size:14px;color:var(--muted);line-height:1.6}
.doc__fuente{margin:14px 0 26px;font-size:12.5px;color:var(--muted);line-height:1.6}
.doc__fuente a{color:var(--muted)}


/* El pueblo y el campo */
.nuc__t{margin:22px 0 10px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.nuc__l{list-style:none;margin:10px 0 14px;padding:0;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:640px){.nuc__l{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.nuc__l{grid-template-columns:1fr 1fr 1fr;column-gap:28px}}
.nuc__l li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-bottom:1px solid var(--line);font-size:13.5px;min-width:0}
.nuc__l li span{color:var(--muted);min-width:0;overflow-wrap:break-word}
.nuc__l li b{font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}

/* Marcadores del mapa con el icono de su categoría. El trazo va en unidades de
   la rejilla de 24 del icono, que en el mapa se dibuja a 12 px: 2,4 son 1,2 px. */
.m-ico{fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Un punto que solo marca la calle o la zona lleva el borde discontinuo */
.m-punto--aprox{stroke:#fff}

/* La leyenda del mapa, con el mismo icono que el marcador */
.mapa__leyenda i.m-ley{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.mapa__leyenda i.m-ley svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mapa__leyenda i.m-ley--aprox{background:transparent;border:1.6px dashed var(--muted)}

/* Varias fichas en el mismo punto: un marcador con el número */
.m-grupo{stroke:#fff}
.m-cuenta{fill:#fff;font-family:var(--sans);font-weight:700;text-anchor:middle;dominant-baseline:central}

/* La lista que sale al pulsar un grupo */
.mapa__grupo{position:absolute;z-index:4;width:min(300px,calc(100% - 24px));max-height:min(320px,70%);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow);cursor:default}
.mapa__grupo-cab{position:sticky;top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.mapa__grupo-cab b{font-size:13px;line-height:1.35;color:var(--ink)}
.mapa__grupo-cab button{flex:none;font:inherit;font-size:12px;padding:4px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--muted);cursor:pointer}
.mapa__grupo-cab button:hover{border-color:var(--primary);color:var(--primary-d)}
.mapa__grupo ul{list-style:none;margin:0;padding:4px 0}
.mapa__grupo li button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 12px;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.mapa__grupo li button:hover{background:var(--primary-tint)}
.mapa__grupo li i{flex:none;width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.mapa__grupo li i svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mapa__grupo li span{display:flex;flex-direction:column;min-width:0}
.mapa__grupo li b{font-size:13px;font-weight:600;color:var(--ink);overflow-wrap:break-word}
.mapa__grupo li small{font-size:11.5px;color:var(--muted)}

/* Lo que cuesta alquilar: comparación a un lado, evolución al otro */
.alq{display:grid;grid-template-columns:1fr;gap:18px;margin-top:6px}
@media(min-width:760px){.alq{grid-template-columns:1fr 1fr;gap:28px}}
.alq__col{min-width:0}
.alq__serie{margin:6px 0 0}
.alq__serie svg{display:block;width:100%;height:auto;max-height:90px}

/* ---------------------------------------------------------------------------
   El calendario del pueblo
   --------------------------------------------------------------------------- */
.cal__proximos,.cal__grupo{list-style:none;margin:14px 0 6px;padding:0;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:760px){.cal__proximos{grid-template-columns:1fr 1fr;column-gap:28px}}
.cal__f{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);min-width:0}
.cal__dia{flex:none;width:52px;border-radius:10px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c);text-align:center;padding:5px 0 6px;line-height:1.1}
.cal__dia b{display:block;font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums}
.cal__dia span{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cal__txt{min-width:0;flex:1}
.cal__t{margin:0 0 2px;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.35;overflow-wrap:break-word}
.cal__ficha{font:inherit;font-weight:600;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer;border-bottom:1px solid var(--line)}
.cal__ficha:hover{border-bottom-color:var(--primary);color:var(--primary-d)}
.cal__cuando{margin:0 0 4px;font-size:13px;color:var(--muted)}
.cal__orient{display:inline-block;margin-left:4px;padding:1px 7px;border:1px dashed var(--muted);border-radius:7px;font-size:11.5px;color:var(--muted);cursor:help}
.cal__meta{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12.5px;color:var(--muted)}
.cal__tipo{position:relative;padding-left:12px;color:var(--ink)}
.cal__tipo::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:2px;background:var(--c)}
.cal__src a{color:var(--muted)}
.cal__mas{grid-column:1/-1;padding:10px 0 0;font-size:13px;color:var(--muted)}
.cal__filtro{margin:6px 0 4px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cal__mes{margin:22px 0 2px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:700}
.cal__pie{margin-top:16px}

/* ---------------------------------------------------------------------------
   Accesos directos bajo el buscador
   --------------------------------------------------------------------------- */
.atajos{margin-top:18px;max-width:1080px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media(min-width:700px){.atajos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.atajos{grid-template-columns:repeat(6,minmax(0,1fr))}}
.atajo{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;min-width:0;padding:10px 12px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:11px;color:var(--ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.atajo:hover{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.atajo[hidden]{display:none!important}
.atajo svg{grid-row:1/3;width:20px;height:20px;fill:none;stroke:var(--primary-d);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.atajo__t{font-weight:600;font-size:13.5px;line-height:1.25;overflow-wrap:break-word}
.atajo__d{font-size:12px;color:var(--muted);line-height:1.3;overflow-wrap:break-word}
#cifras,#estudiar,#calendario{scroll-margin-top:16px}

/* ---------------------------------------------------------------------------
   Seguridad: la tabla de tipos de hecho
   --------------------------------------------------------------------------- */
.seg__tabla{overflow-x:auto;margin-top:14px}
.seg__tabla .cruce{min-width:560px}
.seg__grupo td{font-weight:700;background:var(--surface-2)}
.seg__sub{padding-left:22px!important;color:var(--muted)}

/* ---------------------------------------------------------------------------
   Mi lista: guardar sitios e imprimirlos
   --------------------------------------------------------------------------- */
.btn-guardar[aria-pressed="true"]{border-color:var(--primary);color:var(--primary-d);background:var(--primary-tint)}
.sheet__cta{display:flex;flex-wrap:wrap;gap:8px}
.sheet__nota{color:var(--muted);font-size:13px}
.lista__lede,.lista__pie{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.lista__pie{margin-top:16px}
.lista__acciones{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px}
.lista{list-style:none;margin:12px 0 0;padding:0}
.lista__item{border-top:1px solid var(--line-2);padding:13px 0}
.lista__item:last-child{border-bottom:1px solid var(--line-2)}
.lista__cab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:4px}
.lista__cat{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:700}
.lista__nombre{font:inherit;font-weight:700;font-size:15.5px;color:var(--ink);background:none;border:0;padding:0;text-align:left;cursor:pointer}
.lista__nombre:hover{color:var(--primary-d)}
.lista__quitar{flex:none;border:1px solid var(--line);background:var(--surface);color:var(--muted);width:32px;height:32px;padding:7px;border-radius:9px;cursor:pointer}
.lista__quitar:hover{color:var(--ink);border-color:var(--primary)}
.lista__quitar svg{width:100%;height:100%}
.lista__dato{margin:3px 0 0;font-size:13.5px;color:var(--muted);overflow-wrap:anywhere}
.lista__dato b{color:var(--ink);font-weight:600}
@media print{
  body.imprime-lista{overflow:visible!important;background:#fff}
  body.imprime-lista > *:not(.sheet){display:none!important}
  body.imprime-lista .sheet{position:static}
  body.imprime-lista .sheet__backdrop,body.imprime-lista .sheet__close,body.imprime-lista .lista__acciones,body.imprime-lista .lista__quitar{display:none!important}
  body.imprime-lista .sheet__panel{position:static;width:auto;height:auto;overflow:visible;box-shadow:none;padding:0;animation:none}
  body.imprime-lista .lista__item{break-inside:avoid}
}

/* ---------------------------------------------------------------------------
   ¿En qué zona está tu calle?
   --------------------------------------------------------------------------- */
.calle{margin:18px 0 8px;padding:16px;border:1px solid var(--line);border-radius:11px;background:var(--surface-2)}
.calle__l{display:block;font-weight:600;font-size:14.5px;margin-bottom:8px}
.calle__q{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.calle__q:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.calle__res{margin-top:4px}
.calle__r{padding:11px 0;border-bottom:1px solid var(--line-2)}
.calle__r:last-child{border-bottom:0}
.calle__t{margin:0 0 4px;font-weight:700;font-size:14.5px}
.calle__s{margin:3px 0 0;font-size:13.5px;color:var(--muted)}
.calle__s b{color:var(--ink);font-weight:600}
.calle__d{display:block;margin-top:1px;color:var(--ink)}
.calle__nada{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.zona__c{color:var(--muted)}

/* ---------------------------------------------------------------------------
   Convocatorias abiertas
   --------------------------------------------------------------------------- */
#convocatorias{scroll-margin-top:16px}
.conv__lista{list-style:none;margin:12px 0 6px;padding:0}
.conv__f{display:flex;gap:14px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);min-width:0}
.conv__sep{list-style:none;padding:0}
.conv__plazo{color:var(--ink)}
.conv__f--pronto .conv__plazo{color:#b45309}
.conv__acc{display:flex;flex-wrap:wrap;gap:8px;margin:9px 0 0}
.conv__acc .btn-line{padding:6px 11px;font-size:13px}
.conv__muni{margin-top:10px}
.conv__procesos{list-style:none;margin:6px 0 8px;padding:0}
.conv__procesos li{display:flex;flex-direction:column;gap:2px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.conv__procesos a{font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);align-self:flex-start}
.conv__procesos a:hover{color:var(--primary-d);border-bottom-color:var(--primary)}
.conv__procesos span{color:var(--muted);font-size:13px}

/* ---------------------------------------------------------------------------
   Compartir la lista: enlace, WhatsApp y código QR
   --------------------------------------------------------------------------- */
.lista__compartir{margin:10px 0 6px;border:1px solid var(--line);border-radius:11px;padding:0 14px;background:var(--surface-2)}
.lista__compartir summary{cursor:pointer;font-weight:600;font-size:14px;padding:12px 0}
.lista__compartir[open]{padding-bottom:12px}
.lista__l{display:block;font-weight:600;font-size:13.5px;margin:10px 0 6px}
.lista__txt{width:100%;font:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);resize:vertical}
.lista__txt:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-tint)}
.lista__aviso{margin:6px 0 0;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.lista__qr{margin-top:12px}
.lista__qr-img{width:200px;max-width:100%;background:#fff;padding:6px;border:1px solid var(--line);border-radius:10px}
.lista__qr-img svg{display:block;width:100%;height:auto}
.lista__nota{margin:12px 0 4px;padding:12px 14px;border-left:3px solid var(--primary);background:var(--primary-tint);border-radius:0 10px 10px 0}
.lista__nota b{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--primary-d);margin-bottom:4px}
.lista__nota p{margin:0;font-size:14.5px;white-space:pre-line}
@media print{
  body.imprime-lista .lista__compartir{border:0;padding:0;background:none}
  body.imprime-lista .lista__compartir summary,body.imprime-lista .lista__compartir .lista__l,
  body.imprime-lista .lista__compartir textarea,body.imprime-lista .lista__compartir .lista__acciones,
  body.imprime-lista .lista__compartir .lista__aviso,body.imprime-lista #lista-copiado{display:none!important}
  body.imprime-lista .lista__compartir:not([open]),body.imprime-lista .lista__qr[hidden]{display:none!important}
  body.imprime-lista .lista__qr-img{width:130px}
}

/* ===========================================================================
   EL TELÉFONO
   La mayoría de la gente llega aquí desde un enlace compartido a su municipio,
   y llega en un móvil. Lo que sigue no es maquillaje responsive: es recortar la
   distancia entre entrar y encontrar algo.

   Lo que se medía antes en una pantalla de 375x812:
   · la cabecera medía 800 px, o sea toda la primera pantalla, y el contenido
     empezaba en el píxel 822;
   · en Almazán había que bajar 2.372 px (casi tres pantallas) hasta la barra de
     resultados; en Madrid, 3.331 (cuatro);
   · sesenta y dos zonas pulsables medían menos de 44 px de alto.

   No se quita información y no se esconde ninguna fuente: se aprieta el aire de
   más, se agrandan los blancos que se pulsan y se deja la barra de resultados
   al alcance mientras se recorre el listado.
   =========================================================================== */

/* ---------- La barra de resultados, siempre a mano ----------
   Se queda pegada arriba, pero SOLO dentro de .resultados: en cuanto se pasa a
   "en cifras" o al calendario desaparece, porque ahí ya no manda. */
@media(max-width:899px){
  .toolbar{position:sticky;top:0;z-index:40;margin:18px -16px 12px;padding:6px 16px;gap:4px 10px;
    background:rgba(247,249,250,.95);border-bottom:1px solid var(--line);
    -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px)}
  .toolbar__count{font-size:13px;line-height:1.35;flex:1 1 100%}
  /* La chapa del municipio elegido vive dentro del recuento: en el móvil se
     aprieta para que la barra pegada arriba no se coma una cuarta parte de la
     pantalla. */
  .toolbar .sitio{margin-left:8px;padding:4px 9px 4px 7px;font-size:13px}
  .toolbar__actions{flex-wrap:wrap;gap:8px}
  .toolbar .btn-ghost{padding:8px 12px}
  .toolbar .vista{padding:2px}
  .toolbar .vista__b{min-height:40px;padding:8px 13px}
  /* Lo que el motor lleva a la vista con scrollIntoView tiene que quedar por
     debajo de la barra pegada, no detrás de ella. */
  .mapa,.results,.cards,#unidades,#sectors,#empezar{scroll-margin-top:104px}
  /* "Filtrar resultados" no cabe en la fila junto al conmutador de vista: en el
     móvil el botón se queda en "Filtrar", que con el icono del embudo y la
     chapa del número se entiende igual. */
  .toolbar #filters-toggle .btn-ghost__larga{display:none}
}

/* ---------- Zonas pulsables ----------
   44 px es lo que mide la yema de un dedo. Debajo de eso se falla el toque y se
   abre lo de al lado. Los filtros densos (un bloque de la ficha, una letra del
   índice) se quedan en 40, que es el suelo razonable para una rejilla de
   veintitantas casillas sin convertirla en un muro. */
@media(max-width:899px){
  .fchk{min-height:44px;padding:7px 8px}
  .fgroup__t{min-height:44px;padding:4px 0}
  .fmas{min-height:44px;padding:8px}
  .fbloq{min-height:40px}
  .btn-primary,.btn-second,.btn-line{min-height:44px;padding:10px 14px}
  .btn-ghost,.btn-solid,.doc__cta{min-height:44px}
  .btn-clear{min-height:44px;padding:8px 6px}
  .vista__b{min-height:40px}
  .search__clear{width:44px;height:44px;padding:11px}
  .sheet__close{width:44px;height:44px;padding:11px}
  .intent,.subintent,.nivchip,.coro__m,.zona--corte button{min-height:44px}
  .achip{padding:5px 5px 5px 12px}
  .achip button{width:30px;height:30px;padding:7px}
  .lista__quitar{width:40px;height:40px;padding:9px}
  .lista__nombre{min-height:40px}
  .mas__b{min-height:48px}
  .unidad{min-height:44px}
  /* Los distritos NO se esconden detrás de un "ver todos" (esa decisión ya está
     tomada arriba: son la puerta de entrada de quien vive en una ciudad grande).
     Lo que sí se puede es que cada uno mida justo lo que hay que pulsar, 44, y
     no 52 por el interlineado de lectura: en Madrid son veintiún filas. */
  .distrito{min-height:44px;padding:6px 10px;line-height:1.18}
  .mapa__b{min-height:40px}
  .ofer__centro{min-height:40px}
  .mapa__grupo li button{min-height:44px}
  .mapa__grupo-cab button{min-height:36px}
  .atajo{min-height:52px}
  .cat{min-height:56px}
  .brand,.volver-portal{min-height:44px}
  /* Suelo de tamaño de letra en el móvil. La escala del proyecto no se toca
     (eso es identidad y se habla antes), pero la letra pequeña de verdad —la
     que dice cuántos resultados da una casilla, de qué año es una cifra, quién
     firma una foto— sube un punto: a 11 px no se lee en un teléfono. */
  .fchk__n,.atajo__d,.tile__y{font-size:12.5px}
  .hero__credito,.mapa__cred,.cdemo,.cestado,.tcard__credito{font-size:12px}
  /* Los enlaces del pie no son prosa: son la navegación de abajo. Como tiras de
     texto en línea medían 20 px de alto y se pulsaba el de al lado. Pasan a ser
     bloques con su relleno, que es lo que de verdad agranda la zona sensible
     (subir el interlineado del párrafo no la toca). */
  .foot__links{line-height:1.6}
  .foot__links a{display:inline-block;padding:8px 0}
}

/* ---------- La cabecera: que quepa algo más que el título ----------
   El titular sigue siendo el mismo tipo y el mismo color; solo deja de ocupar
   cuatro líneas en un teléfono. */
@media(max-width:560px){
  .hero__inner{padding-top:14px;padding-bottom:22px}
  .hero__title{font-size:clamp(1.75rem,6.6vw,2.15rem);line-height:1.08}
  .hero__sub{margin-top:12px;font-size:15px;line-height:1.5}
  .brand{margin-bottom:14px}
  .search{margin-top:18px}
  .search__label{margin-bottom:7px}
  .search__box{min-height:50px}
  .atajos{margin-top:14px;gap:7px}
  .atajo{padding:9px 10px;column-gap:9px}
  .atajo__t{font-size:13px}
  .hero--corto .hero__inner{padding-top:16px;padding-bottom:20px}
}

/* ---------- Lo que hay entre la cabecera y los resultados ----------
   La nota de las fuentes, las categorías y "¿no sabes por dónde empezar?" se
   quedan enteras: no se recorta ni una palabra, solo el relleno. */
@media(max-width:560px){
  .src-note{margin-top:16px;padding:10px 13px;line-height:1.5}
  .quick{margin-top:16px}
  .quick__grid{gap:8px}
  .cat{padding:11px 12px;gap:10px}
  .cat__ic{width:32px;height:32px;padding:7px;border-radius:9px}
  .cat__lb{font-size:14px}
  .start{margin-top:20px;padding:18px 16px 20px}
  .start__title{font-size:19px}
  .start__lede{margin:6px 0 14px;font-size:14px}
  .start__chips{gap:7px}
  .start__ecos{margin:14px 0 0;padding-top:12px}
  .distritos__lista{gap:8px}
  .layout{gap:16px;padding-bottom:36px}
  .cards{gap:12px}
  .card{padding:16px}
}

/* ---------- Las tablas de "en cifras" ----------
   La tabla de cruce sector/formación medía 356 px de ancho dentro de una
   columna de 320: se movía de lado dentro de su caja. Apretando la columna de
   cifras y el relleno cabe entera, sin quitar ninguna fila ni ninguna columna.
   La de seguridad, que lleva min-width propio, sigue desplazándose: ahí son
   demasiadas columnas para caber, y se avisa con la sombra del borde. */
@media(max-width:560px){
  .cruce{font-size:13px}
  .cruce th{padding:0 6px 8px 0}
  .cruce td{padding:7px 6px 7px 0}
  .cruce .num{width:66px}
  .seg__tabla{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
    background:linear-gradient(90deg,var(--surface) 30%,rgba(255,255,255,0)) left/24px 100% no-repeat local,
      linear-gradient(90deg,rgba(255,255,255,0),var(--surface) 70%) right/24px 100% no-repeat local,
      linear-gradient(90deg,rgba(20,32,46,.10),rgba(20,32,46,0)) left/10px 100% no-repeat scroll,
      linear-gradient(90deg,rgba(20,32,46,0),rgba(20,32,46,.10)) right/10px 100% no-repeat scroll}
  .barra{grid-template-columns:minmax(74px,40%) 1fr auto}
  .pir__fila{grid-template-columns:1fr 92px 1fr;gap:8px}
}

/* ---------- La ficha del recurso ----------
   Ocupa la pantalla entera, así que la X tiene que verse siempre: se queda
   pegada arriba con su propio fondo, no flotando sobre el texto. La fuente y la
   fecha de comprobación siguen dentro, enteras: son el motivo de todo esto. */
@media(max-width:560px){
  .sheet__panel{padding:16px 16px 32px}
  .sheet__close{z-index:2}
  .sheet h2{font-size:21px;margin-right:52px}
  .sheet__cta .btn-primary{min-height:48px}
}

/* ============================================================================
   Mapa Social, Formativo y Laboral — MODO DE LECTURA FÁCIL (estilos)
   ----------------------------------------------------------------------------
   Se pega al final de styles.css al montar el sitio (scripts/build-territorio.mjs).

   TODO cuelga de `html.lf-on`, menos el interruptor —que tiene que verse
   siempre, porque si no nadie lo enciende— y el panel de explicación, que sale
   oculto. Sin esa clase no hay ni una regla que cambie la página: apagado, el
   sitio se ve EXACTAMENTE igual que antes de existir este fichero.

   LO QUE NO SE TOCA, porque es identidad visual y no se cambia sin permiso:
   la tipografía (Inter y Libre Baskerville), los colores de marca y el logo.
   Este modo solo sube TAMAÑO, INTERLINEADO y CONTRASTE, y da más aire. El
   verde es el --primary de siempre; el gris del texto secundario sí se
   oscurece, porque un gris claro sobre blanco no llega al contraste que hace
   falta y eso es accesibilidad, no identidad.

   Criterios: UNE 153101:2018 EX (lectura fácil) y WCAG 2.1 — 1.4.8
   (presentación del texto: sin justificar, línea corta, interlineado),
   2.4.7 (foco visible), 2.5.5 (área de pulsación grande).
   ========================================================================== */

/* ---------- EL INTERRUPTOR: siempre visible, debajo del buscador ----------
   Arriba y al lado de lo que más se usa. Un interruptor de accesibilidad
   escondido en el pie no lo encuentra quien lo necesita. */
.lf-switch{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:14px;max-width:660px}
.lf-switch__b{display:inline-flex;align-items:center;gap:9px;font:inherit;font-weight:600;font-size:14px;
  padding:10px 15px;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);
  border-radius:var(--radius-sm);cursor:pointer;min-height:44px}
.lf-switch__b svg{width:20px;height:20px;flex:none;color:var(--primary-d)}
.lf-switch__b:hover{border-color:var(--primary);color:var(--primary-d)}
.lf-switch__b[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:#fff}
.lf-switch__b[aria-pressed="true"] svg{color:#fff}
.lf-switch__q{font-size:13.5px;color:var(--primary-d);font-weight:600}

/* ---------- EL PANEL QUE EXPLICA EL MODO ----------
   Solo se ve con el modo encendido, y lo primero que dice es cómo salir. */
.lf-intro{display:none}
html.lf-on .lf-intro{display:block;margin:22px 0 0;padding:22px 24px 24px;background:#eef6f5;
  border:2px solid var(--primary);border-radius:var(--radius-sm)}
html.lf-on .lf-intro h2{font-family:var(--sans);font-size:22px;font-weight:700;margin:0 0 10px;color:var(--ink)}
html.lf-on .lf-intro p{margin:0 0 9px;font-size:1.15rem;line-height:1.7;color:#12202e;max-width:62ch}
/* Hasta dónde llega hoy el texto sencillo. Va más discreto que el resto: es
   honestidad sobre el alcance, no una instrucción para usar la página. */
html.lf-on .lf-intro__hasta{font-size:1.02rem;color:#2a3644}
html.lf-on .lf-intro__pie{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:14px;
  padding-top:14px;border-top:1px solid #c7ded9}
html.lf-on .lf-intro__b{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:17px;
  padding:13px 20px;min-height:48px;border:2px solid var(--primary);background:#fff;color:var(--primary-d);
  border-radius:var(--radius-sm);cursor:pointer}
/* El sprite del motor lleva svg{width:100%;height:100%}: sin medida propia, el
   icono estira el botón hasta ocupar media pantalla. */
html.lf-on .lf-intro__b svg{width:20px;height:20px;flex:none}
html.lf-on .lf-intro__b:hover{background:var(--primary);color:#fff}
html.lf-on .lf-intro__q{font-size:17px;color:var(--primary-d);font-weight:600}

/* ---------- TEXTO: más grande, más aire, más contraste ----------
   El tamaño va en rem para que componga con el zoom del navegador y con el
   tamaño de letra que cada persona tenga puesto en su sistema. */
html.lf-on body{line-height:1.75;letter-spacing:.01em}
html.lf-on p,html.lf-on li,html.lf-on dd,html.lf-on label,html.lf-on td,html.lf-on th{
  font-size:1.19rem;line-height:1.75;color:#12202e}
html.lf-on h1{font-size:2.1rem;line-height:1.25}
html.lf-on h2{font-size:1.65rem;line-height:1.3}
html.lf-on h3{font-size:1.3rem;line-height:1.35}
/* Nunca justificado: los "ríos" de espacio en blanco hacen perder el renglón. */
html.lf-on p,html.lf-on li,html.lf-on dd,html.lf-on td{text-align:left}
/* Línea corta: si el renglón es muy largo, al saltar se vuelve al mismo. */
html.lf-on main p,html.lf-on main li,html.lf-on main dd{max-width:62ch}
html.lf-on p{margin-top:.7em;margin-bottom:.7em}
html.lf-on li{margin-bottom:.45em}
/* El gris flojo de los textos secundarios no llega al contraste necesario. */
html.lf-on .card__desc,html.lf-on .card__meta,html.lf-on .start__lede,
html.lf-on .cifras__lede,html.lf-on .empezar__d,html.lf-on .src-note,
html.lf-on .sheet__src-date,html.lf-on .faltan p,html.lf-on .unidades__lede{color:#2a3644}
html.lf-on .src-note{font-size:1.05rem;line-height:1.7;padding:16px 18px;border-color:var(--line)}

/* ---------- Enlaces subrayados y botones grandes (WCAG 2.5.5) ----------
   Los botones siguen siendo rectángulos redondeados (~11px), como en todo el
   proyecto: aquí no aparece ninguna cápsula. */
html.lf-on main a{text-decoration:underline;text-underline-offset:3px}
html.lf-on .btn-primary,html.lf-on .btn-second,html.lf-on .btn-line,
html.lf-on .btn-ghost,html.lf-on .faltan__b,html.lf-on .mas__b{
  font-size:1.05rem;padding:13px 18px;min-height:48px;border-radius:var(--radius-sm);text-decoration:none}
html.lf-on .search__box{min-height:60px}
html.lf-on .search input{font-size:1.15rem}
html.lf-on .search__label{font-size:1.15rem;margin-bottom:12px}
html.lf-on .search__clear{width:46px;height:46px}

/* ---------- Foco muy visible (WCAG 2.4.7) ---------- */
html.lf-on a:focus-visible,html.lf-on button:focus-visible,html.lf-on input:focus-visible,
html.lf-on select:focus-visible,html.lf-on textarea:focus-visible,html.lf-on summary:focus-visible{
  outline:4px solid var(--primary-d);outline-offset:3px}

/* ---------- Menos ruido: nada que se mueva solo ---------- */
html.lf-on *,html.lf-on *::before,html.lf-on *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important}
html.lf-on .hero__foto,html.lf-on .hero__escudo{opacity:.35}

/* ---------- Tarjetas: más aire y la frase de «qué es» ---------- */
html.lf-on .card{padding:22px;gap:14px;border-color:#cfd6dd}
html.lf-on .card__name{font-size:1.3rem;line-height:1.3}
html.lf-on .card__desc{font-size:1.1rem;line-height:1.7}
html.lf-on .card__meta{font-size:1.05rem;gap:9px}
html.lf-on .card__meta .row svg{width:20px;height:20px}
html.lf-on .card__actions{gap:10px}
html.lf-on .tag,html.lf-on .dest .d{font-size:.95rem;padding:5px 11px}
/* La frase que dice qué clase de sitio es, antes que nada. Sale de una
   plantilla por categoría (motor/lectura-facil.js), no de texto a mano. */
.card__lf{display:none}
html.lf-on .card__lf{display:block;margin:0;font-size:1.1rem;line-height:1.7;color:var(--primary-d);font-weight:600}

/* ---------- Filtros ---------- */
html.lf-on .fgroup__t{font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--ink);margin-bottom:12px}
html.lf-on .fgroup__v{width:20px;height:20px}
html.lf-on .fchk{font-size:1.05rem;padding:10px 10px;min-height:44px;gap:12px}
html.lf-on .fchk__n{font-size:.95rem}
html.lf-on .fbox{width:26px;height:26px}
html.lf-on .filters__lede{display:block}
.filters__lede{display:none;margin:0 0 14px;font-size:1.05rem;line-height:1.7;color:#2a3644}
html.lf-on .achip{font-size:1rem;padding:8px 8px 8px 14px}
html.lf-on .toolbar__count{font-size:1.1rem}

/* ---------- La ficha ---------- */
html.lf-on .sheet__panel{width:min(560px,100%);padding:26px 26px 44px}
html.lf-on .sheet h2{font-size:1.75rem;line-height:1.25}
html.lf-on .sheet__sec{padding:19px 0}
/* El rótulo de cada sección deja de ser una etiqueta en versalitas y pasa a
   ser una pregunta legible: es lo que de verdad se lee. */
html.lf-on .sheet__sec h3{font-size:1.2rem;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:700;margin-bottom:10px}
html.lf-on .sheet__sec p,html.lf-on .sheet__sec ul,html.lf-on .sheet__sec li{font-size:1.1rem;line-height:1.7}
html.lf-on .sheet__contact a,html.lf-on .sheet__contact span{font-size:1.1rem;gap:12px;min-height:44px;align-items:center}
html.lf-on .sheet__contact svg{width:22px;height:22px}
html.lf-on .sheet__src,html.lf-on .sheet__src-date{font-size:1.02rem;line-height:1.7}
html.lf-on .sheet__close{width:46px;height:46px;padding:11px}

/* El resumen de arriba de la ficha. No sustituye a nada: la ficha entera sigue
   debajo, con sus mismas secciones, su fuente y su fecha. */
.lf-resumen{display:none}
html.lf-on .lf-resumen{display:block;margin:4px 0 6px;padding:18px 20px;background:#eef6f5;
  border:2px solid var(--primary);border-radius:var(--radius-sm)}
html.lf-on .lf-resumen h3{font-family:var(--sans);font-size:1.15rem;font-weight:700;margin:0 0 10px;color:var(--ink)}
html.lf-on .lf-resumen ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
html.lf-on .lf-resumen li{font-size:1.12rem;line-height:1.65;margin:0;color:#12202e}

/* Las palabras difíciles que salen en ESA ficha, explicadas. */
.lf-palabras{display:none}
html.lf-on .lf-palabras{display:block;margin-top:20px;padding:18px 20px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm)}
html.lf-on .lf-palabras h3{font-family:var(--sans);font-size:1.15rem;font-weight:700;margin:0 0 12px;color:var(--ink)}
html.lf-on .lf-palabras dl{margin:0}
html.lf-on .lf-palabras dt{font-size:1.08rem;font-weight:700;color:var(--ink);margin-top:12px}
html.lf-on .lf-palabras dt:first-child{margin-top:0}
html.lf-on .lf-palabras dd{margin:4px 0 0;font-size:1.06rem;line-height:1.7;color:#2a3644}

/* «Leer el texto completo»: lo que se resume se despliega entero. No se pierde
   ni una palabra, solo deja de caer toda de golpe. */
html.lf-on .lf-mas{margin-top:8px}
html.lf-on .lf-mas summary{font-size:1.05rem;font-weight:600;color:var(--primary-d);cursor:pointer;
  padding:10px 0;min-height:44px;display:flex;align-items:center}
html.lf-on .lf-mas summary:hover{text-decoration:underline}
html.lf-on .lf-mas p{margin-top:6px}

/* ---------- Móvil ---------- */
@media(max-width:700px){
  .lf-switch{margin-top:12px}
  .lf-switch__b{width:100%;justify-content:center}
  html.lf-on .lf-intro{padding:18px 16px 20px}
  html.lf-on .lf-intro p,html.lf-on .lf-intro ul{font-size:1.1rem}
  html.lf-on .lf-intro__b{width:100%;justify-content:center}
  html.lf-on p,html.lf-on li,html.lf-on dd,html.lf-on label{font-size:1.12rem}
  html.lf-on .sheet__panel{padding:20px 18px 40px}
}