/* Qué Código Postal — sistema de diseño «Atlas»
   Marfil luminoso, tinta azul profunda y un amarillo solar como acento. Titulares con serifa editorial
   (fuentes del sistema, sin descargas) y una interfaz sans legible. Detalles cartográficos abstractos. */

:root {
  /* Superficies */
  --paper: #fbf8f1;        /* marfil: fondo general */
  --surface: #ffffff;      /* tarjetas, tablas, campos */
  --cream: #f3ecdc;        /* bloques secundarios */
  --line: #e7dfcc;         /* separadores decorativos */
  --control: #7d7461;      /* bordes de campos y controles (≥3:1) */

  /* Tinta */
  --ink: #15233f;          /* azul tinta: texto principal */
  --ink-2: #33415c;        /* texto secundario */
  --muted: #5a6476;        /* metadatos */

  /* Acento solar (solo fondos, rellenos y líneas: nunca texto sobre blanco) */
  --sun: #f6b81a;
  --sun-strong: #e5a400;
  --sun-soft: #fff1c9;
  --sun-line: #b98600;     /* subrayado de las casillas del CP */
  --sea-line: #5f8fcb;     /* acento secundario: mar */
  --earth-line: #d0794b;   /* acento secundario: tierra */
  --on-sun: #15233f;

  /* Enlaces y estados */
  --link: #1d4fa8;
  --link-hover: #133a80;
  --sea-soft: #e4eef8;     /* avisos informativos (mar) */
  --sea-ink: #173a6b;
  --warn-soft: #fdecd3;    /* avisos de atención (tierra) */
  --warn-ink: #7a3510;
  --warn-mark: #b4531f;
  --ok: #24704a;
  --on-ok: #ffffff;
  --focus: #1d4fa8;

  /* Pie */
  --footer-bg: #15233f;
  --footer-ink: #f6f1e5;
  --footer-muted: #c2c9d6;

  --shadow: 0 14px 34px rgba(21, 35, 63, .12), 0 2px 6px rgba(21, 35, 63, .06);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;

  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.4rem;
  --fs-2xl: 1.875rem;
  --fs-3xl: 2.5rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --gutter: 16px;
  --tap: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1729;
    --surface: #17223a;
    --cream: #1c2a47;
    --line: #26365a;
    --control: #8794ad;
    --ink: #f5f0e4;
    --ink-2: #d6dbe5;
    --muted: #a9b3c5;
    --sun: #f6b81a;
    --sun-strong: #ffc93d;
    --sun-soft: #2f2a19;
    --sun-line: #f6b81a;
    --sea-line: #6e9fe0;
    --earth-line: #e08a5c;
    --on-sun: #15233f;
    --link: #9cc0ff;
    --link-hover: #c6dbff;
    --sea-soft: #182c4d;
    --sea-ink: #d3e3fb;
    --warn-soft: #3a2615;
    --warn-ink: #ffd9b5;
    --warn-mark: #f0995e;
    --ok: #3f9b6b;
    --on-ok: #0b1a12;
    --focus: #ffcf4a;
    --footer-bg: #0a1120;
    --footer-ink: #f5f0e4;
    --footer-muted: #a9b3c5;
    --shadow: 0 14px 34px rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-md)/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
h1, h2, h3 { margin: 0; line-height: 1.15; color: var(--ink); }
h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; }
h3 { font-weight: 650; letter-spacing: -.005em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
.no-js [data-copy] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px;
  background: var(--ink); color: var(--paper); border-radius: var(--r-md);
}
.skip-link:focus { top: 12px; color: var(--paper); }

.ico { width: 20px; height: 20px; fill: currentColor; flex: none; }
.wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: 780px; }
@media (min-width: 768px) { :root { --gutter: 28px; } }

/* ---------- Marca y cabecera ---------- */
.site-header { background: var(--surface); border-top: 4px solid var(--sun); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: 16px; min-height: 62px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--ink); }
.brand-word { font: italic 700 1.45rem/1 var(--serif); letter-spacing: -.02em; }
.brand-mark {
  font: 800 .9rem/1 var(--font); letter-spacing: .04em; color: var(--on-sun); background: var(--sun);
  padding: 6px 7px 5px; border-radius: 5px;
}
.brand-sm .brand-word { font-size: 1.25rem; }
.search-toggle {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap);
  padding: 0 14px; border: 1.5px solid var(--control); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--fs-sm);
}
.search-toggle:hover { color: var(--ink); background: var(--sun-soft); }
.header-search { display: none; width: 100%; padding-bottom: 12px; }
.header-search.is-open { display: block; }
@media (min-width: 768px) {
  .search-toggle { display: none; }
  .header-search { display: block; width: auto; flex: 0 1 440px; margin-left: auto; padding: 0; }
}

/* ---------- Buscador ---------- */
.search { position: relative; }
.search-field {
  position: relative; display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 2px solid var(--control); border-radius: 999px;
  padding: 4px 4px 4px 16px; transition: border-color .15s, box-shadow .15s;
}
.search-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px var(--sun-soft), 0 0 0 6px var(--sun); }
.search-ico { color: var(--muted); }
.search-field input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none; height: 44px; font-size: var(--fs-lg);
}
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-submit {
  border: 0; border-radius: 999px; background: var(--sun); color: var(--on-sun); font-weight: 750;
  min-height: 44px; padding: 0 20px; cursor: pointer;
}
.search-submit:hover { background: var(--sun-strong); }
.search-hero .search-field { padding: 6px 6px 6px 20px; box-shadow: var(--shadow); }
.search-hero .search-field input { height: 54px; font-size: 1.1875rem; }
.search-hero .search-submit { min-height: 54px; padding: 0 26px; font-size: var(--fs-lg); }
/* En la cabecera el buscador es secundario: no compite con la acción principal de la página. */
.search-compact .search-field { padding: 2px 2px 2px 14px; border-width: 1.5px; }
.search-compact .search-field input { height: 40px; font-size: var(--fs-md); }
.search-compact .search-submit { min-height: 40px; padding: 0 14px; background: var(--ink); color: var(--paper); font-size: var(--fs-sm); }
.search-compact .search-submit:hover { background: var(--ink-2); }
@media (max-width: 400px) {
  .search-hero .search-field { padding-left: 14px; }
  .search-hero .search-submit { padding: 0 16px; }
  .search-hero .search-field input { font-size: var(--fs-md); }
}

.search-pop {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 30;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.search-results { max-height: min(60vh, 470px); overflow-y: auto; }
.search-results li { border-bottom: 1px solid var(--line); }
.search-results li:last-child { border-bottom: 0; }
.result {
  display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center;
  min-height: 58px; padding: 9px 16px; color: var(--ink); text-decoration: none;
}
.result:hover, .result[aria-selected="true"] { background: var(--sun-soft); color: var(--ink); }
.result[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--sun); }
.r-type {
  grid-row: span 2; min-width: 78px; padding: 5px 7px; border-radius: var(--r-sm); text-align: center;
  font: 700 .6875rem/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); background: var(--cream);
}
.r-name { font-weight: 650; line-height: 1.25; }
.r-name.is-code { font-size: var(--fs-lg); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.r-ctx { font-size: var(--fs-sm); color: var(--muted); line-height: 1.3; }
.search-empty { padding: 14px 16px; color: var(--ink-2); font-size: var(--fs-sm); }
.search-more { padding: 10px 16px; font-size: var(--fs-xs); color: var(--ink-2); background: var(--paper); }
.search-note { padding: 8px 16px; font-size: var(--fs-xs); color: var(--muted); border-top: 1px solid var(--line); background: var(--paper); }
.search-page-results .search-results { max-height: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }

/* ---------- Migas ---------- */
.crumbs { padding: 16px 0 4px; font-size: var(--fs-sm); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.crumbs a { color: var(--ink-2); }
.crumbs [aria-current] { color: var(--muted); }

/* ---------- Respuesta principal ---------- */
.answer { padding: 6px 0 4px; }
.answer h1 { font-size: var(--fs-2xl); }
.lede { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-md); }
@media (min-width: 768px) { .answer h1 { font-size: var(--fs-3xl); } .lede { font-size: var(--fs-lg); } }

.cp-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; }
.cp-head h1 { display: flex; flex-direction: column; gap: 8px; }
.h1-pre { font: 700 var(--fs-xs)/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* Casillas del código: como un formulario postal, con la línea solar como firma de la marca. */
.cp-digits .cells { display: inline-flex; gap: 6px; }
.cp-digits .d {
  display: inline-grid; place-items: center; width: 44px; height: 58px;
  background: var(--surface); border: 1.5px solid var(--control); border-bottom: 5px solid var(--sun-line); border-radius: 8px;
  font: 750 2rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--ink);
}
@media (min-width: 768px) { .cp-digits .d { width: 56px; height: 70px; font-size: 2.5rem; } }
@media (max-width: 440px) {
  .cp-digits .d { width: 40px; height: 54px; font-size: 1.8rem; }
  .cp-digits .cells { gap: 5px; }
  .cp-head .btn-copy, .cp-hero .btn-copy { padding: 0 18px; }
}
@media (max-width: 370px) { .cp-digits .d { width: 38px; } }

.cp-hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; margin-top: 16px; }
.answer-summary { margin-top: 14px; color: var(--ink-2); line-height: 1.9; }
.answer-summary .pill { margin-right: 8px; }
/* "¿De dónde es este código?": la segunda respuesta de la página de CP, justo bajo el número. */
.answer-where { margin-top: 14px; font-size: var(--fs-lg); line-height: 1.45; color: var(--ink-2); }
.answer-where strong { color: var(--ink); font-weight: 700; }

/* ---------- Botones ---------- */
.btn-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--sun); color: var(--on-sun);
  font-weight: 750; font-size: var(--fs-md); cursor: pointer; transition: background .15s;
}
.btn-copy:hover { background: var(--sun-strong); }
.btn-copy-sm { min-height: var(--tap); padding: 0 16px; font-size: var(--fs-sm); }
.btn-copy-icon {
  display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; flex: none;
  border: 1.5px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.btn-copy-icon:hover { background: var(--sun-soft); }
.ico-done { display: none; }
.is-copied .ico-copy { display: none; }
.is-copied .ico-done { display: block; }
.btn-copy.is-copied, .btn-copy-icon.is-copied { background: var(--ok); border-color: var(--ok); color: var(--on-ok); }
.btn-copy.is-failed { background: var(--warn-soft); color: var(--warn-ink); }

.pill {
  display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px;
  background: var(--cream); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 650;
}
.pill-plain { color: var(--muted); font-size: var(--fs-sm); }

/* Tarjetas de CP (municipio con varios códigos): número, enlace explícito y Copiar separados. */
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; margin-top: 18px; }
.cp-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "code copy" "link link"; align-items: center;
  column-gap: 6px; padding: 12px 8px 12px 12px; background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--sun); border-radius: var(--r-md);
}
.cp-card-code { grid-area: code; min-width: 0; font: 750 1.375rem/1.15 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--ink); }
.cp-card-link { grid-area: link; font-size: var(--fs-sm); justify-self: start; padding: 4px 0 0; white-space: nowrap; }
.cp-card .btn-copy { grid-area: copy; }
.cp-grid > li { container-type: inline-size; }
/* La etiqueta "Copiar" solo aparece si la tarjeta tiene sitio; si no, botón circular con nombre accesible. */
@container (max-width: 230px) { .cp-card .copy-text { display: none; } .cp-card .btn-copy-sm { width: var(--tap); padding: 0; } }

/* ---------- Avisos ---------- */
.notice {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 16px;
  background: var(--sea-soft); color: var(--sea-ink); border-radius: var(--r-md); font-size: var(--fs-sm);
}
.notice a { color: inherit; }
.notice-ico { margin-top: 1px; }
.notice-warn { background: var(--warn-soft); color: var(--warn-ink); }
.notice-warn .notice-ico { color: var(--warn-mark); }

/* ---------- Secciones ---------- */
.section { padding: 34px 0 4px; }
.section h2 { font-size: var(--fs-xl); margin-bottom: 14px; }
.section-head { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 4px; }
.section-sub { color: var(--muted); font-size: var(--fs-sm); margin: -8px 0 12px; }
.section-head .section-sub { margin: 0; }
/* Encabezado de sección con filete solar */
.section > h2::after, .section-head h2::after {
  content: ""; display: block; width: 44px; height: 3px; margin-top: 8px; background: var(--sun); border-radius: 2px;
}
.prose { max-width: 68ch; }
.prose p { color: var(--ink-2); }
.prose p + p { margin-top: 12px; }
.prose h2 { margin-top: 26px; }
.prose ul { list-style: disc; padding-left: 20px; color: var(--ink-2); }
.prose li + li { margin-top: 6px; }
article.prose h1 { margin-bottom: 10px; }

.layout { display: block; }
@media (min-width: 1024px) {
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; }
  .sidebar { position: sticky; top: 20px; padding-top: 34px; }
}
.sidebar { margin-top: 34px; }
.side-box { padding: 16px 18px; background: var(--cream); border-radius: var(--r-lg); }
.side-title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: 6px; }
.side-list li { padding: 6px 0; border-top: 1px solid var(--line); }
.side-list li:first-child { border-top: 0; }
.side-list a { display: inline-block; padding: 4px 0; font-weight: 600; }
.side-meta { display: block; font-size: var(--fs-xs); color: var(--muted); }

/* ---------- Tablas ---------- */
.table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { text-align: left; vertical-align: middle; padding: 8px 14px; border-bottom: 1px solid var(--line); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table thead th {
  background: var(--cream); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; padding-top: 10px; padding-bottom: 10px;
}
.data-table tbody th { font-weight: 600; width: 55%; }
.data-table tbody tr:target { background: var(--sun-soft); }
.data-table tbody tr:target th { box-shadow: inset 4px 0 0 var(--sun); }
.cp-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.table-foot { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
.loc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 24px; }
.loc-list li { display: flex; align-items: center; min-height: var(--tap); border-bottom: 1px solid var(--line); font-weight: 550; }
.loc-list li:target { background: var(--sun-soft); box-shadow: inset 4px 0 0 var(--sun); padding-left: 10px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.cp-link {
  display: inline-flex; align-items: center; min-height: 36px;
  font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.tag-list-lg { gap: 8px; }
.tag-list-lg .cp-link {
  min-height: var(--tap); padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: var(--fs-lg);
}
.tag-list-lg .cp-link:hover { border-color: var(--link); }

/* ---------- Filtros ---------- */
.filter { margin-bottom: 12px; }
.filter-label { display: block; font-size: var(--fs-sm); font-weight: 650; margin-bottom: 6px; color: var(--ink-2); }
.filter-field {
  display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--surface);
  border: 1.5px solid var(--control); border-radius: 999px;
}
.filter-field:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px var(--sun); }
.filter-field .ico { color: var(--muted); width: 18px; height: 18px; }
.filter-field input { flex: 1; min-width: 0; height: 44px; border: 0; outline: none; background: transparent; }
.filter-status { font-size: var(--fs-xs); color: var(--muted); min-height: 1.2em; margin-top: 4px; }
.filter-empty { padding: 16px; color: var(--ink-2); background: var(--cream); border-radius: var(--r-md); }

/* ---------- Provincia ---------- */
.capital-card {
  position: relative; display: grid; gap: 2px; margin-top: 20px; padding: 16px 56px 16px 20px; max-width: 540px;
  background: var(--sun-soft); border-radius: var(--r-lg); color: var(--ink); text-decoration: none;
  border-left: 5px solid var(--sun);
}
a.capital-card:hover { color: var(--ink); box-shadow: inset 0 0 0 2px var(--sun); }
.cap-eyebrow { font-size: var(--fs-xs); font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.cap-name { font: 700 var(--fs-xl)/1.2 var(--serif); }
.cap-meta { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cap-arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; }

.dir-tools {
  position: sticky; top: 0; z-index: 10; margin: 20px calc(-1 * var(--gutter)) 0; padding: 12px var(--gutter) 6px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.dir-tools .filter { margin-bottom: 6px; }
.dir-tools .filter-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dir-tools .filter-status:empty { display: none; }
.az ul {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px;
  /* Indica que la fila continúa a la derecha en pantallas estrechas */
  -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
}
@media (min-width: 900px) { .az ul { -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; } .az ul a { min-width: 36px; } }
.az ul::-webkit-scrollbar { display: none; }
.az a {
  display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 999px;
  font: 700 var(--fs-md)/1 var(--serif); text-decoration: none; color: var(--ink);
}
.az a:hover { background: var(--sun); color: var(--on-sun); }

.mun-groups { padding-top: 6px; }
.mun-group { scroll-margin-top: 140px; padding-top: 10px; break-inside: avoid; }
.mun-letter { font: 700 var(--fs-xl)/1 var(--serif); color: var(--ink); padding: 10px 0 8px; border-bottom: 2px solid var(--sun); }
.mun-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap); border-bottom: 1px solid var(--line);
}
.mun-list .mun-name { padding: 10px 0; font-weight: 550; }
a.mun-name { color: var(--ink); text-decoration-color: var(--control); }
a.mun-name:hover { color: var(--link); text-decoration-color: currentColor; }
.mun-cp { font-size: var(--fs-sm); font-weight: 650; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 768px) { .mun-groups { columns: 2; column-gap: 44px; } }
@media (min-width: 1024px) { .mun-groups { columns: 3; } }

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink); text-decoration: none; font-size: var(--fs-sm);
}
.chip-list a:hover { border-color: var(--sun-line); background: var(--sun-soft); color: var(--ink); }

/* ---------- Tarjetas de municipio (página de CP) ---------- */
.mun-cards { display: grid; gap: 10px; }
@media (min-width: 640px) { .mun-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mun-card { padding: 14px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.mun-card h3 { font-size: var(--fs-lg); }
.mun-card h3 a { color: var(--ink); text-decoration-color: var(--sun-line); text-decoration-thickness: 2px; }
.mun-card h3 a:hover { color: var(--link); }
.mun-card-prov { font: 500 var(--fs-sm) var(--font); color: var(--muted); }
.mun-card-meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-sm); }
.mun-card-meta .cp-link { min-height: 32px; }
.mun-card-locs { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.mun-card-locs .k { color: var(--muted); }

.link-list li { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: var(--tap); border-bottom: 1px solid var(--line); }
.link-meta { font-size: var(--fs-sm); font-weight: 650; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Portada ---------- */
.hero { position: relative; isolation: isolate; padding: 22px 0 22px; background: var(--cream); border-bottom: 1px solid var(--line); overflow: hidden; }
/* Curvas de nivel abstractas (no representan ningún territorio). Se desvanecen hacia el buscador. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='240' viewBox='0 0 480 240' fill='none' stroke='%23e3d6b6' stroke-width='1'%3E%3Cpath d='M-20 200c60-40 110-10 170-40s90-90 160-80 110 60 190 30'/%3E%3Cpath d='M-20 170c70-30 120-5 175-35s85-75 150-68 100 50 195 22'/%3E%3Cpath d='M-20 140c75-25 125 0 180-28s80-60 140-55 95 40 200 15'/%3E%3Cpath d='M-20 110c80-20 130 5 185-20s75-45 130-42 90 30 205 8'/%3E%3Cpath d='M-20 80c85-15 135 10 190-12s70-30 120-29 85 20 210 1'/%3E%3C/svg%3E") right -60px top -30px / 520px 260px no-repeat;
  -webkit-mask-image: linear-gradient(100deg, transparent 30%, #000 80%); mask-image: linear-gradient(100deg, transparent 30%, #000 80%);
}
@media (prefers-color-scheme: dark) { .hero::before { display: none; } }
.hero-inner { max-width: 820px; }
.hero h1 { font-size: 2.125rem; line-height: 1.05; letter-spacing: -.02em; }
.hero h1::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; background: var(--sun); border-radius: 2px; }
.hero-lead { margin: 10px 0 14px; color: var(--ink-2); font-size: var(--fs-lg); }
.hero-stats { margin-top: 10px; font-size: var(--fs-sm); color: var(--muted); }
@media (min-width: 768px) {
  .hero { padding: 52px 0 40px; }
  .hero::before { background-size: 760px 380px; }
  .hero h1 { font-size: 3.25rem; }
  .hero-lead { font-size: 1.25rem; margin: 12px 0 22px; }
}

.try { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.try-label { font-size: var(--fs-sm); font-weight: 650; color: var(--ink-2); }
.try-list { display: flex; flex-wrap: wrap; gap: 8px; }
.try-link {
  display: inline-grid; grid-template-columns: auto auto; grid-template-areas: "type type" "value hint"; align-items: baseline;
  column-gap: 8px; min-height: 52px; padding: 7px 14px 8px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--sun);
  color: var(--ink); text-decoration: none;
}
.try-mun { border-left-color: var(--sea-line); }
.try-loc { border-left-color: var(--earth-line); }
.try-type { grid-area: type; font-size: .6875rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.try-link strong { grid-area: value; font-size: var(--fs-md); color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.try-hint { grid-area: hint; font-size: var(--fs-xs); color: var(--muted); }
.try-link:hover { background: var(--sun-soft); color: var(--ink); }
@media (max-width: 480px) { .try-list { width: 100%; display: grid; grid-template-columns: 1fr; gap: 6px; } .try-link { display: grid; grid-template-columns: auto 1fr; } }

/* Índice de provincias tipo atlas: agrupadas por inicial, en columnas. */
.prov-index { columns: 2; column-gap: 20px; }
@media (min-width: 640px) { .prov-index { columns: 3; column-gap: 32px; } }
@media (min-width: 1024px) { .prov-index { columns: 4; column-gap: 40px; } }
.prov-group { break-inside: avoid; padding-bottom: 14px; }
.prov-letter { font: 700 var(--fs-xl)/1 var(--serif); color: var(--ink); padding: 4px 0 6px; border-bottom: 2px solid var(--sun); margin-bottom: 2px; }
.prov-link {
  display: flex; flex-direction: column; justify-content: center; min-height: var(--tap); padding: 6px 8px; margin: 0 -8px;
  border-radius: var(--r-sm); color: var(--ink); text-decoration: none;
}
.prov-link:hover { background: var(--sun-soft); color: var(--ink); }
.prov-name { font-weight: 650; line-height: 1.25; text-decoration: underline; text-decoration-color: var(--control); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prov-link:hover .prov-name { text-decoration-color: currentColor; }
.prov-meta { color: var(--muted); font-size: var(--fs-xs); line-height: 1.3; }

.how { display: grid; gap: 12px; }
@media (min-width: 768px) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.how-item { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--sun); border-radius: var(--r-lg); }
.how-item:nth-child(2) { border-top-color: var(--sea-line); }
.how-item:nth-child(3) { border-top-color: var(--earth-line); }
.how-item h3 { font: 700 var(--fs-lg)/1.25 var(--serif); margin-bottom: 6px; }
.how-item p { font-size: var(--fs-sm); color: var(--ink-2); }

/* ---------- Varios ---------- */
.out-of-scope { color: var(--muted); }
.mun-name.out-of-scope { padding: 10px 0; }
.trunc { text-decoration: underline dotted var(--muted); text-underline-offset: 3px; }
.data-note { margin-top: 36px; padding: 14px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.data-note a { color: var(--ink-2); }

/* ---------- Pie ---------- */
.site-footer { margin-top: 64px; padding: 36px 0 44px; background: var(--footer-bg); color: var(--footer-muted); font-size: var(--fs-sm); border-top: 4px solid var(--sun); }
.site-footer a { color: var(--footer-ink); }
.site-footer a:hover { color: var(--sun); }
.site-footer .brand, .site-footer .brand:hover { color: var(--footer-ink); }
.footer-inner { display: grid; gap: 20px; }
.footer-brand p { margin-top: 10px; max-width: 42ch; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: var(--tap); }
.footer-source, .footer-proto { font-size: var(--fs-xs); max-width: 80ch; }
.footer-proto { padding: 8px 12px; border: 1px dashed var(--footer-muted); border-radius: var(--r-sm); }
.site-footer :focus-visible { outline-color: var(--sun); }
@media (min-width: 768px) { .footer-inner { grid-template-columns: 1fr 1fr; } .footer-source, .footer-proto { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Pantallas muy estrechas (≈360 px): el texto de ayuda del buscador debe leerse entero. */
@media (max-width: 380px) {
  .search-hero .search-field { padding-left: 12px; gap: 6px; }
  .search-hero .search-field input { font-size: .9375rem; }
  .search-hero .search-submit { padding: 0 14px; font-size: var(--fs-md); }
}

/* Municipios con muchos códigos (p. ej. Madrid): lista compacta de enlaces en vez de tarjetas */
.cp-dense { margin-top: 16px; }
.cp-dense .cp-link { min-width: 84px; justify-content: center; }
.cp-dense-note { margin: 10px 0 0; }

/* ---------- Consentimiento de cookies (banner propio, sin terceros) ----------
   Aceptar, Rechazar y Configurar tienen el mismo estilo y tamaño: ninguna opción se destaca sobre otra. */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-top: 4px solid var(--sun); box-shadow: 0 -10px 30px rgba(21, 35, 63, .14);
}
.consent[hidden] { display: none; }
.consent-inner { max-width: 760px; margin: 0 auto; padding: 14px var(--gutter) 16px; }
.consent-title { font: 700 var(--fs-lg)/1.2 var(--serif); margin: 0 0 4px; }
.consent-text { font-size: var(--fs-sm); color: var(--ink-2); }
.consent-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.consent-btn {
  min-height: var(--tap); padding: 0 12px; border: 2px solid var(--ink); border-radius: 999px;
  background: var(--surface); color: var(--ink); font-weight: 700; font-size: var(--fs-sm); cursor: pointer;
}
.consent-btn:hover { background: var(--sun-soft); }
.consent-panel { margin-top: 12px; padding: 12px; background: var(--cream); border-radius: var(--r-md); }
.consent-option { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: var(--fs-sm); }
.consent-option input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.consent-panel .consent-btn { margin-top: 8px; }
.has-consent-banner body { padding-bottom: 220px; }
@media (min-width: 768px) { .has-consent-banner body { padding-bottom: 160px; } }
.link-button {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0; border: 0; background: none;
  color: var(--footer-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-button:hover { color: var(--sun); }
.prose .link-button { color: var(--link); }

/* Tabla de cookies: en móvil, una ficha por cookie (sigue siendo una tabla semántica) */
@media (max-width: 640px) {
  .cookie-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cookie-table, .cookie-table tbody, .cookie-table tr, .cookie-table th, .cookie-table td { display: block; width: auto; }
  .cookie-table tr { padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .cookie-table tbody tr:last-child { border-bottom: 0; }
  .cookie-table th, .cookie-table td { padding: 2px 0; border: 0; }
  .cookie-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--ink-2); }
}