/* Letras servidas desde el propio sitio (sitio/letras/, licencia SIL Open Font License): así ningún tercero ve quién visita la página.
   Solo el juego "latin" (incluye tildes, ñ, ¿ y ¡). Bricolage Grotesque y Public Sans son variables: un archivo trae todos los grosores. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("letras/bricolage-grotesque.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("letras/public-sans.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("letras/ibm-plex-mono-500.woff2") format("woff2"); }
/* Ojo con la plata: una columna de lectura tipo celular sobre papel azulado con trama de billete. Azul petróleo para lo
   normal, naranja para lo que vale la pena mirar. El gesto principal es "de cada $100", dibujado como 100 monedas, y la
   silueta oficial del municipio (límites del DANE) grabada como en un billete.
   Nombres de los colores: --fondo (la página), --papel (las tarjetas), --texto, --suave, --acento (petróleo), --ambar (naranja). */
:root {
  --fondo: #F1F4F5; --fondo-hondo: #E2E9EC; --papel: #FFFFFF; --texto: #12232A; --suave: #53656D;
  --linea: #CFD9DD; --linea-fuerte: #AFC0C7; --acento: #0D5263; --acento-claro: #93BCC7; --acento-suave: #DDEBEF; --sobre-acento: #FFFFFF;
  --ambar: #C2410C; --ambar-fondo: #FBE7DA; --ambar-texto: #A2370A; --barra-gris: #93BCC7; --suave-fondo: #E2E9EC;
  --sombra: 0 1px 2px rgba(18, 35, 42, .06), 0 8px 24px -12px rgba(18, 35, 42, .2);
  --letra: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --dato: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --radio: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0C1519; --fondo-hondo: #121D22; --papel: #16232A; --texto: #E2ECEF; --suave: #9AABB2;
    --linea: #26363D; --linea-fuerte: #3A4D55; --acento: #5FB8CC; --acento-claro: #2C5F6C; --acento-suave: #16323B; --sobre-acento: #0C1519;
    --ambar: #FF8B52; --ambar-fondo: #3B2418; --ambar-texto: #FFB088; --barra-gris: #2C5F6C; --suave-fondo: #121D22;
    --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0C1519; --fondo-hondo: #121D22; --papel: #16232A; --texto: #E2ECEF; --suave: #9AABB2;
  --linea: #26363D; --linea-fuerte: #3A4D55; --acento: #5FB8CC; --acento-claro: #2C5F6C; --acento-suave: #16323B; --sobre-acento: #0C1519;
  --ambar: #FF8B52; --ambar-fondo: #3B2418; --ambar-texto: #FFB088; --barra-gris: #2C5F6C; --suave-fondo: #121D22;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 16px/1.55 var(--letra); }
.env, .columna { max-width: 34rem; margin: 0 auto; padding-inline: 16px; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 8px; line-height: 1.25; }
a { color: var(--acento); text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.sup { margin: 0; font-size: 13.5px; color: var(--suave); }
.etiqueta { font: 500 11.5px/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.etiqueta a { color: inherit; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- barra de arriba: marca, buscador, las dos puertas y las pestañas. Al bajar se encoge. ---------- */
.barra { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--fondo) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linea);
  --anim: .26s cubic-bezier(.3, .7, .3, 1); transition: margin-bottom var(--anim), box-shadow var(--anim); }
.barra .fila-marca { display: flex; align-items: center; gap: 10px; padding-block: 10px; transition: padding var(--anim); }
.logo { display: flex; align-items: center; gap: 8px; font: 800 17px/1 var(--display); letter-spacing: -.02em; white-space: nowrap; color: var(--texto);
  text-decoration: none; transition: gap var(--anim); }
.logo-texto { display: inline-block; max-width: 11em; overflow: hidden; transition: max-width var(--anim), opacity var(--anim); }
/* El logo: una moneda con un ojo. Parpadea cada 4 segundos; con el ojo cerrado la pupila cambia por un "$" y en el
   siguiente parpadeo vuelve a ser ojo. */
.sello { width: 28px; height: 28px; flex: none; display: block; overflow: visible; }
.sello .moneda-m { fill: var(--acento); }
.sello .canto { fill: none; stroke: var(--fondo); stroke-width: 1.2; }
.sello .blanco { fill: var(--fondo); }
.sello .iris { fill: var(--ambar); }
.sello .centro { fill: var(--acento); }
.sello .dolar { fill: var(--acento); font: 800 14px/1 var(--display); opacity: 0; }
.sello .parpado { transform-box: view-box; transform-origin: 16px 16px; animation: parpadeo 8s ease-in-out infinite; }
.sello .pupila { animation: ver-pupila 8s infinite; }
.sello .dolar { animation: ver-dolar 8s infinite; }
@keyframes parpadeo { 0%, 45.5%, 48.5%, 95.5%, 98.5%, 100% { transform: scaleY(1); } 47%, 97% { transform: scaleY(.06); } }
@keyframes ver-pupila { 0%, 46.9% { opacity: 1; } 47%, 96.9% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes ver-dolar { 0%, 46.9% { opacity: 0; } 47%, 96.9% { opacity: 1; } 97%, 100% { opacity: 0; } }
.busca { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1px solid var(--linea);
  border-radius: 999px; padding: 7px 12px; color: var(--suave); font-size: 14px; margin: 0; transition: padding var(--anim); }
.busca:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.busca input { border: 0; background: none; font: inherit; color: var(--texto); width: 100%; min-width: 0; outline: none; padding: 0; }
.busca svg { flex: none; }
.plegable { min-height: 0; overflow: hidden; }
.barra #nav-puertas, .barra #fila-tabs { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--anim), opacity var(--anim); }
.puertas { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--fondo-hondo); border-radius: 12px; margin-block: 0 10px; }
.puerta { display: grid; place-items: center; text-align: center; padding: 9px 6px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--suave);
  line-height: 1.2; text-decoration: none; }
.puerta[aria-current="page"] { background: var(--papel); color: var(--texto); box-shadow: var(--sombra); }
.pestanas { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana { flex: none; padding: 6px 0 10px; font-weight: 600; font-size: 15px; color: var(--suave); text-decoration: none;
  border-bottom: 2.5px solid transparent; transition: padding var(--anim), color .15s, border-color .15s; white-space: nowrap; }
.pestana[aria-current="page"] { color: var(--texto); border-color: var(--acento); }
.otra-puerta { margin-left: auto; font-size: 13px; color: var(--acento); opacity: 0; visibility: hidden; transition: opacity var(--anim), visibility var(--anim), padding var(--anim); }
/* En la puerta "¿Qué le puedo vender?" la fila de pestañas solo aparece con la barra encogida (para cambiar de puerta). */
.barra[data-puerta="vender"] #fila-tabs { grid-template-rows: 0fr; opacity: 0; }
.barra.encogida { box-shadow: var(--sombra); }
.barra.encogida .fila-marca { padding-block: 6px; }
.barra.encogida .logo { gap: 0; }
.barra.encogida .logo-texto { max-width: 0; opacity: 0; }
.barra.encogida .busca { padding-block: 5px; }
.barra.encogida #nav-puertas { grid-template-rows: 0fr; opacity: 0; }
.barra.encogida .pestana { padding: 2px 0 8px; }
.barra.encogida .otra-puerta { opacity: 1; visibility: visible; }
.barra.encogida[data-puerta="vender"] #fila-tabs { grid-template-rows: 1fr; opacity: 1; }
.barra.sin-anim, .barra.sin-anim * { transition: none !important; }

/* Buscador de municipio o entidad: se abre debajo de la barra */
.picker { border-top: 1px solid var(--linea); padding-block: 4px 10px; background: var(--fondo); }
.picker ul, .lista-busqueda { list-style: none; margin: 0; padding: 0; }
.picker ul { max-height: 60vh; overflow-y: auto; }
.picker li a, .lista-busqueda li a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--linea); text-decoration: none; color: var(--texto); }
.picker li:first-child a, .lista-busqueda li:first-child a { border-top: 0; }
.picker li a > span:first-child, .lista-busqueda li a > span:first-child { font-weight: 600; color: var(--acento); min-width: 0; overflow-wrap: anywhere; }
.picker li a > span:last-child, .lista-busqueda li a > span:last-child { color: var(--suave); font-size: 13px; white-space: nowrap; }
.picker li a em, .lista-busqueda em { display: block; font-style: normal; font-size: 12.5px; color: var(--suave); font-weight: 400; }
.lista-busqueda { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 0 14px; box-shadow: var(--sombra); }

main { padding-block: 0 32px; min-height: 60vh; }
main:focus { outline: none; }
section { padding-block: 22px; }
.titulo-seccion { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.titulo-seccion h2 { font-size: 1.45rem; font-weight: 700; margin: 0; }
.cargando { color: var(--suave); padding: 40px 0; text-align: center; }
.vacio { color: var(--suave); font-size: 14.5px; padding: 14px 16px; margin: 0; }

/* ---------- tarjetas y listas (fichas, territorios, buscadores) ---------- */
.bloque { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; margin-bottom: 12px; }
main > .bloque:first-child, main > .volver:first-child, main > .titular:first-child { margin-top: 18px; }
.frase { font-size: 15.5px; margin: 0 0 12px; color: var(--suave); }
.frase b { color: var(--texto); }
.hero { font: 800 clamp(2.2rem, 9vw, 2.9rem)/1 var(--display); letter-spacing: -.03em; margin: 4px 0; }
.titular { font: 800 clamp(1.9rem, 8vw, 2.4rem)/1.05 var(--display); letter-spacing: -.03em; margin: 18px 0 8px; text-wrap: balance; }
.filas { margin: 0; padding: 0; list-style: none; }
.fila { display: block; padding: 12px 0; border-top: 1px solid var(--linea); color: inherit; text-decoration: none; }
.filas > li:first-child > .fila { border-top: 0; }
a.fila:hover .nom { text-decoration: underline; }
.fila-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nom { font-weight: 600; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
a.fila .nom { color: var(--acento); }
div.fila .nom { font-weight: 500; }
.monto { font: 700 15px/1.2 var(--display); }
.meta { font-size: 13px; color: var(--suave); margin: 2px 0 0; overflow-wrap: anywhere; }
.etiquetas { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.et { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 1px 8px; border-radius: 6px; }
.et-a { background: var(--ambar-fondo); color: var(--ambar-texto); }
.et-n { background: var(--fondo-hondo); color: var(--suave); font-weight: 500; }
a.et { text-decoration: none; }
.mini-barra { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.mini-barra i { flex: 1; height: 5px; border-radius: 999px; background: var(--fondo-hondo); overflow: hidden; display: block; }
.mini-barra i b { display: block; height: 100%; background: var(--ambar); border-radius: 999px; }
.mini-barra span { font-size: 12.5px; color: var(--suave); min-width: 112px; text-align: right; }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cifras b { display: block; font: 700 1.15rem/1.15 var(--display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifras span { font-size: 12.5px; color: var(--suave); }
.tarjeta { display: block; color: inherit; text-decoration: none; }
.tarjeta h2 { font-size: 1.25rem; color: var(--acento); margin-bottom: 4px; }
.tarjeta:hover h2 { text-decoration: underline; }

/* Barra "de cada $100" de las fichas de entidad */
.cien { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 6px 0 8px; }
.cien i { display: block; height: 100%; }
.c-ab { background: var(--acento); } .c-re { background: var(--acento-claro); } .c-sin { background: var(--ambar); } .c-ot { background: var(--linea-fuerte); }
.cien-leyenda { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cien-leyenda b { display: block; font: 700 1.1rem/1.2 var(--display); }
.cien-leyenda span { font-size: 12.5px; color: var(--suave); line-height: 1.35; display: block; }
.cuadrito { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* Controles */
.buscar { width: 100%; font: inherit; font-size: 16px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--linea);
  background: var(--papel); color: var(--texto); margin-bottom: 10px; }
.buscar:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.buscar.grande { font-size: 17px; padding: 14px 16px; border-radius: 14px; box-shadow: var(--sombra); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.chip { display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 600; padding: 7px 12px; min-height: 36px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--papel); color: var(--suave); cursor: pointer; text-decoration: none; }
.chip[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }
.chip-x { background: var(--ambar-fondo); color: var(--ambar-texto); border-color: transparent; }
select.sel { font: inherit; font-size: 14px; padding: 8px 12px; min-height: 38px; border-radius: 999px; border: 1px solid var(--linea); background: var(--papel); color: var(--texto); max-width: 100%; }
.resultado { font: 500 11.5px/1.3 var(--dato); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); margin: 4px 2px 8px; }
.mas { display: block; width: 100%; margin-top: 10px; padding: 12px; border-radius: 12px; border: 1px solid var(--linea); background: var(--fondo); font-size: 14px;
  font-weight: 600; color: var(--acento); cursor: pointer; }
.enlace { display: inline-block; font-size: 14px; font-weight: 600; margin-top: 10px; }
.mes-titulo { font: 700 1rem/1.3 var(--display); margin: 16px 2px 8px; }
.mes-titulo span { font: 400 13px var(--letra); color: var(--suave); }
.segmentos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: var(--fondo-hondo); border-radius: 12px; padding: 4px; margin: 0 0 14px; }
.segmentos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg { border: 0; background: none; border-radius: 9px; padding: 9px 4px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--suave); cursor: pointer; line-height: 1.2; }
.seg[aria-pressed="true"] { background: var(--papel); color: var(--texto); box-shadow: var(--sombra); }
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; min-height: 40px; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--papel); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; color: var(--texto); white-space: nowrap; }
.boton.pri { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.boton.chico { min-height: 34px; padding: 6px 12px; font-size: 13.5px; }
.boton svg { width: 15px; height: 15px; flex: none; }
.botones { display: flex; gap: 8px; flex-wrap: wrap; }
.botones .boton { flex: 1; }
svg text { font-family: var(--letra); }

/* Desplegables ("drilldown"): qué → entidad → oficio → a quién */
.drill-btn { display: grid; gap: 5px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--linea); padding: 11px 0; color: inherit; font: inherit; cursor: pointer; }
.filas > li:first-child > .drill-btn, .filas > li:first-child > .drill-hoja { border-top: 0; }
.drill-btn .nom { color: var(--texto); display: flex; gap: 9px; align-items: baseline; }
.drill-btn[aria-expanded="true"] .nom { color: var(--acento); }
.drill-btn .drill-nom::before { content: ""; width: 6px; height: 6px; flex: none; border-right: 2px solid var(--suave); border-bottom: 2px solid var(--suave);
  transform: translateY(-2px) rotate(-45deg); transition: transform .15s; }
.drill-btn[aria-expanded="true"] .drill-nom::before { transform: translateY(-3px) rotate(45deg); border-color: var(--acento); }
.drill-hoja { display: grid; gap: 5px; }
.drill-hoja .nom { font-weight: 500; }
.drill-hijos { margin: 0 0 10px 3px; padding-left: 12px; border-left: 2px solid var(--acento-suave); }
.drill-hijos .nom, .drill-hijos .monto { font-size: 14px; }
.drill-hijos li + li > .drill-btn, .drill-hijos li + li > .fila { border-top-style: dashed; }
.ex-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--suave); }
.ex-barra { height: 5px; background: var(--fondo-hondo); border-radius: 999px; overflow: hidden; }
.ex-barra i { display: block; height: 100%; width: var(--w); background: var(--acento); border-radius: 999px; }
.lista-drill { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 2px 14px; }

/* Mapa */
.mapa-tarjeta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 14px 12px; display: grid; gap: 10px; }
.mapa-cab { display: grid; gap: 2px; }
.mapa-titulo { font: 700 1.2rem/1.2 var(--display); margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mapa-caja { border-radius: 10px; overflow: hidden; background: var(--fondo); }
.mapa-caja svg { width: 100%; height: auto; max-height: 76vh; display: block; touch-action: manipulation; }
.zona { stroke: var(--papel); stroke-width: .8; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .2s; }
.zona:hover, .zona:focus-visible { stroke: var(--texto); stroke-width: 1.5; outline: none; }
.zona.sel { stroke: var(--ambar); stroke-width: 2.4; }
.mapa-miga { border: 0; background: none; padding: 0; font: inherit; color: var(--acento); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mapa-sep { color: var(--suave); font-weight: 400; }
.mapa-rotulo { fill: var(--suave); pointer-events: none; }
.rotulo { fill: var(--texto); font-weight: 600; text-anchor: middle; dominant-baseline: central; paint-order: stroke; stroke: var(--papel); stroke-opacity: .85; stroke-linejoin: round; pointer-events: none; }
.rotulo.vecino { fill: var(--suave); font-weight: 500; }
.mapa-recuadro { fill: none; stroke: var(--linea-fuerte); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 3; }
.mapa-leyenda { display: flex; gap: 6px 12px; align-items: center; font-size: 12.5px; color: var(--suave); flex-wrap: wrap; }
.mapa-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.mapa-leyenda i { width: 16px; height: 10px; border-radius: 3px; display: inline-block; }
.mapa-ficha { border-top: 1px solid var(--linea); padding-top: 12px; }
.mapa-ficha .botones { margin-top: 10px; }
.datos-grupo { margin: 6px 0 8px; padding-left: 18px; font-size: 14.5px; }
.datos-grupo li { margin: 4px 0; }

/* Fichas */
.volver { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; margin: 14px 0 10px; text-decoration: none; padding: 4px 0; }
.ficha-nombre { font: 700 1.4rem/1.2 var(--display); letter-spacing: -.01em; margin: 0; overflow-wrap: anywhere; }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.kpi { background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; }
.kpi span { display: block; font-size: 12.5px; color: var(--suave); }
.kpi b { display: block; font: 700 1.2rem/1.25 var(--display); overflow-wrap: anywhere; }
.kpi small { font-size: 12.5px; color: var(--suave); font-weight: 400; font-family: var(--letra); }
.senal { background: var(--ambar-fondo); color: var(--ambar-texto); border-radius: 12px; padding: 10px 12px; margin-top: 10px; }
.senal b { display: block; font-size: 14px; }
.senal p { margin: 2px 0 0; font-size: 13px; line-height: 1.45; }
.senal a { color: inherit; }
.aviso { font-size: 12.5px; color: var(--suave); margin: 8px 0 0; }
details.plegable-det { border-top: 1px solid var(--linea); }
details.plegable-det:first-of-type { border-top: 0; }
details.plegable-det summary { padding: 12px 0; min-height: 44px; cursor: pointer; font-size: 15px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details.plegable-det summary::-webkit-details-marker { display: none; }
details.plegable-det summary::after { content: "+"; color: var(--suave); font-weight: 400; }
details.plegable-det[open] summary::after { content: "–"; }
details.plegable-det p { margin: 0 0 12px; font-size: 14.5px; color: var(--suave); }
.linea-tiempo-ctr { font-size: 14.5px; margin: 6px 0 2px; }

/* ---------- inicio ---------- */
.inicio-portada { display: grid; gap: 12px; padding-block: 28px 8px; }
.inicio-portada h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.inicio-portada .lead { color: var(--suave); max-width: 34ch; margin: 0; }
.preguntas { display: grid; gap: 6px; padding-block: 14px; }
/* La promesa del sitio en la portada, debajo del buscador */
.promesa { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--radio);
  background: var(--acento-suave); color: var(--texto); text-decoration: none; font-size: 14.5px; line-height: 1.45; }
.promesa .sello { width: 34px; height: 34px; }
.promesa b { font-weight: 700; }
.promesa .promesa-enlace { display: inline-block; color: var(--acento); font-weight: 700; }
.promesa:hover .promesa-enlace { text-decoration: underline; }
.por-que .bloque { display: grid; gap: 8px; padding-block: 16px; margin-bottom: 12px; }
.por-que .bloque p { margin: 0; line-height: 1.6; }
.por-que .remate { font: 800 clamp(1.3rem, 5vw, 1.6rem)/1.15 var(--display); letter-spacing: -.02em; color: var(--acento); margin: 18px 0 8px; text-wrap: balance; }
.preguntas h3 { font-size: 1rem; font-weight: 700; margin-top: 8px; }
.preguntas h3:first-child { margin-top: 0; }
.preguntas p { margin: 0; color: var(--suave); font-size: 14.5px; }
/* "Actualizado el …": la gente (y el dueño) ve que los datos están al día */
.al-dia { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--suave); max-width: 46ch; }
.al-dia b { color: var(--texto); font-weight: 600; }
.al-dia .punto { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); transform: translateY(-1px); }
.campo { display: flex; align-items: center; gap: 10px; background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; padding: 11px 14px; margin: 0; }
.campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.campo input { border: 0; background: none; font: inherit; color: var(--texto); width: 100%; min-width: 0; outline: none; padding: 0; }
.campo svg { flex: none; color: var(--suave); }
.campo.grande { padding: 14px 16px; border-radius: 14px; font-size: 17px; box-shadow: var(--sombra); }
.puertas-grandes { display: grid; gap: 12px; }
.puerta-grande { text-align: left; border: 0; border-radius: var(--radio); padding: 18px; cursor: pointer; display: grid; gap: 8px; position: relative; overflow: hidden;
  text-decoration: none; font: inherit; }
.puerta-grande h2 { font-size: 1.35rem; font-weight: 800; line-height: 1.12; padding-right: 2rem; margin: 0; color: inherit; }
.puerta-grande p { font-size: 14.5px; margin: 0; }
.puerta-grande .flecha { position: absolute; right: 16px; top: 18px; font: 800 1.4rem/1 var(--display); }
.puerta-grande.gasta { background: var(--acento); color: var(--sobre-acento); }
.puerta-grande.gasta .etiqueta, .puerta-grande.gasta p { color: color-mix(in srgb, var(--sobre-acento) 80%, transparent); }
.puerta-grande.vender { background: var(--ambar-fondo); color: var(--texto); }
.puerta-grande.vender .flecha { color: var(--ambar); }
.territorios { display: grid; gap: 12px; }
.territorios .bloque { margin: 0; }

/* ---------- portada del municipio ---------- */
.portada { position: relative; overflow: hidden; padding-block: 26px 18px; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: start; }
.portada::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 520px; height: 520px; pointer-events: none;
  background: repeating-radial-gradient(circle at center, transparent 0 9px, color-mix(in srgb, var(--acento) 9%, transparent) 9px 10px); border-radius: 50%; }
.portada > * { position: relative; }
.portada .texto { min-width: 0; display: grid; gap: 10px; }
.silueta { width: 112px; height: auto; margin-top: 18px; }
.silueta path { fill: url(#trama); stroke: var(--acento); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.silueta.pais path { stroke-width: .6; }
.cifra-grande { font: 800 clamp(2.6rem, 11vw, 3.6rem)/.95 var(--display); letter-spacing: -.035em; overflow-wrap: anywhere; }
.cifra-grande small { display: block; font: 600 1.05rem/1.2 var(--display); letter-spacing: 0; color: var(--suave); margin-top: 6px; }
.portada .lead { color: var(--suave); max-width: 34ch; margin: 0; }
.portada .lead b { color: var(--texto); font-weight: 600; }
.portada .botones { justify-content: flex-start; }
.portada .botones .boton { flex: none; }

/* "En 30 segundos": tres respuestas cortas */
.respuestas { display: grid; gap: 12px; }
.respuesta { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px; display: grid; gap: 12px; }
.respuesta h3 { font-size: 1.22rem; font-weight: 700; line-height: 1.2; }
.respuesta h3 em { font-style: normal; color: var(--acento); }
.respuesta h3 em.alerta { color: var(--ambar); }
.respuesta .enlace { margin: 0; }
.pildora { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; }
.pildora.bien { background: var(--acento-suave); color: var(--acento); }
.pildora.ojo { background: var(--ambar-fondo); color: var(--ambar-texto); }
.pildora::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.monedas { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; max-width: 210px; }
.moneda { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--papel) 55%, transparent);
  animation: caer .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i) * 9ms); }
@keyframes caer { from { transform: translateY(-6px) scale(.7); } to { transform: none; } }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: var(--suave); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.compara { display: grid; gap: 8px; }
.fila-barra { display: grid; grid-template-columns: 7.5rem 1fr 3rem; align-items: center; gap: 10px; font-size: 13.5px; }
.fila-barra .nomb { color: var(--suave); min-width: 0; overflow-wrap: anywhere; }
.fila-barra .pista { height: 12px; background: var(--fondo-hondo); border-radius: 999px; overflow: hidden; }
.fila-barra .lleno { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 999px; }
.fila-barra b { text-align: right; font-weight: 700; }
.reparto { display: flex; height: 18px; border-radius: 6px; overflow: hidden; gap: 2px; }
.reparto i { flex: var(--w) 1 0; background: var(--c); }
.reparto-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13.5px; }
.reparto-lista span { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.reparto-lista i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); flex: none; transform: translateY(1px); }
.reparto-lista b { font-weight: 700; margin-left: auto; }

/* Lo que encontramos */
.hallazgos { display: grid; gap: 14px; }
.hallazgo { background: var(--papel); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; display: grid; }
.hallazgo .cuerpo { padding: 16px 16px 14px; display: grid; gap: 10px; }
.hallazgo .tema { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.hallazgo h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.18; }
.hallazgo .porque { font-size: 14.5px; color: var(--suave); margin: 0; }
.hallazgo .porque b { color: var(--texto); font-weight: 600; }
.hallazgo .pie { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-top: 1px solid var(--linea); background: var(--fondo); }
.hallazgo .fuente { font: 500 11px/1.3 var(--dato); color: var(--suave); margin-right: auto; min-width: 0; flex: 1; }
.unidades { display: grid; grid-template-columns: repeat(auto-fill, 9px); gap: 3px; }
.unidades i { aspect-ratio: 1; border-radius: 2px; background: var(--c); }
.top { display: grid; gap: 8px; }
.top-fila { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.top-fila .arriba { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.top-fila .arriba span { min-width: 0; color: var(--acento); font-weight: 600; }
.top-fila .pista { height: 7px; border-radius: 999px; background: var(--fondo-hondo); overflow: hidden; }
.top-fila .lleno { height: 100%; width: var(--w); background: var(--acento); border-radius: 999px; }
.linea-tiempo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--suave); }
.linea-tiempo .tramo { height: 2px; background: repeating-linear-gradient(90deg, var(--ambar) 0 6px, transparent 6px 10px); }
.linea-tiempo .punto { width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid var(--ambar); background: var(--papel); }
.linea-tiempo .punto.lleno { background: var(--ambar); }
.nodos { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--suave); flex-wrap: wrap; }
.nodo { padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--ambar); color: var(--texto); font-weight: 600; background: var(--ambar-fondo); }
.nodo.persona { border-style: dashed; background: none; color: var(--suave); font-weight: 500; }
.cortos { display: grid; gap: 4px; }
.cortos i { display: block; height: 8px; border-radius: 999px; background: var(--ambar); width: var(--w); margin-left: var(--x); }
.otras-senales .fila-top > span:first-child { font-size: 14.5px; color: var(--texto); font-weight: 500; }

/* Explorar a fondo */
.explorar { display: grid; gap: 12px; }
.ex-total { font-size: 14.5px; color: var(--suave); margin: 0; }
.ex-total b { color: var(--texto); }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtro { border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 7px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--suave); }
.filtro[aria-pressed="true"] { background: var(--texto); border-color: var(--texto); color: var(--fondo); }

/* Compartir: ventanita con la imagen del hallazgo */
.hoja-fondo { position: fixed; inset: 0; z-index: 20; background: rgba(8, 20, 26, .55); display: grid; place-items: end center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.hoja { background: var(--papel); border-radius: 20px; padding: 16px; width: min(100%, 360px); display: grid; gap: 14px; max-height: 92vh; overflow: auto; box-shadow: var(--sombra); }
.hoja .botones { justify-content: center; }
.hoja .botones .boton { flex: none; }
.imagen-compartir { aspect-ratio: 4 / 5; max-width: 100%; width: 300px; margin-inline: auto; border-radius: 18px; position: relative; overflow: hidden;
  background: #0B3340; color: #F1F5F6; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; }
.imagen-compartir::before { content: ""; position: absolute; inset: auto -45% -45% auto; width: 420px; height: 420px; border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 8px, rgba(242, 245, 239, .08) 8px 9px); }
.imagen-compartir > * { position: relative; }
.imagen-compartir .ic-etiqueta { font: 500 11px/1.3 var(--dato); letter-spacing: .08em; text-transform: uppercase; color: rgba(241, 245, 246, .75); }
.imagen-compartir .grande { font: 800 2.9rem/.9 var(--display); letter-spacing: -.03em; color: #FFB37F; }
.imagen-compartir .ic-frase { font: 700 1.25rem/1.2 var(--display); }
.imagen-compartir .ic-nota { font-size: 13px; color: rgba(241, 245, 246, .8); }
.imagen-compartir .pie-img { display: flex; justify-content: space-between; align-items: end; gap: 10px; font: 500 10.5px/1.35 var(--dato); color: rgba(242, 245, 239, .75); }
.imagen-compartir .sello { width: 40px; height: 40px; }
.imagen-compartir .sello * { animation: none; }
.imagen-compartir .sello .moneda-m { fill: #F1F5F6; }
.imagen-compartir .sello .canto { stroke: #0B3340; }
.imagen-compartir .sello .blanco { fill: #0B3340; }
.imagen-compartir .sello .iris { fill: #FFB37F; }
.imagen-compartir .sello .centro { fill: #0B3340; }

/* ---------- qué le puedo vender ---------- */
.portada-vender { padding-block: 26px 6px; display: grid; gap: 10px; }
.portada-vender h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; }
.portada-vender p { color: var(--suave); margin: 0; }
.portada-vender p b { color: var(--texto); }
.oficios { display: flex; flex-wrap: wrap; gap: 6px; padding-block: 4px 12px; }
.oficio { flex: none; max-width: 100%; border: 1px solid var(--linea); background: var(--papel); border-radius: 999px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--texto); text-align: left; }
.oficio.ver-mas { border-style: dashed; color: var(--acento); background: transparent; }
.oficio small { color: var(--suave); font-weight: 500; margin-left: 4px; font-size: 12px; }
.oficio[aria-pressed="true"] { background: var(--texto); color: var(--fondo); border-color: var(--texto); }
.oficio[aria-pressed="true"] small { color: var(--fondo); opacity: .75; }
.oport-lista { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.oport { display: grid; grid-template-columns: 2.3rem 1fr; gap: 11px; padding: 11px 14px; border-top: 1px solid var(--linea); color: inherit; text-decoration: none; }
.oport:first-child { border-top: 0; }
a.oport:hover .que p { text-decoration: underline; }
.cal { border-radius: 7px; overflow: hidden; text-align: center; border: 1px solid var(--linea); align-self: start; background: var(--fondo); }
.cal .mes { display: block; font: 500 9px/1 var(--dato); letter-spacing: .06em; background: var(--acento); color: var(--sobre-acento); padding: 3px 0; }
.cal .dia { display: block; font: 800 .92rem/1 var(--display); padding: 4px 0 3px; }
.cal.abierto .mes { background: var(--ambar); color: #fff; }
.cal .dia.anno { font: 600 .7rem/1 var(--dato); letter-spacing: .02em; padding: 6px 0 5px; }
.oport-grupo { margin: 0; padding: 11px 14px 9px; border-top: 1px solid var(--linea); background: var(--fondo); display: grid; gap: 2px; font-size: 12.5px; color: var(--suave); }
.oport-grupo:first-child { border-top: 0; }
.oport-grupo b { font: 600 11px/1.3 var(--dato); letter-spacing: .07em; text-transform: uppercase; color: var(--texto); }
.oport .que { min-width: 0; display: grid; gap: 3px; }
.oport .que p { font-weight: 600; font-size: 14.5px; line-height: 1.3; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.oport .meta { font-size: 12.5px; color: var(--suave); margin: 0; }
.oport .meta .ojo { color: var(--ambar-texto); font-weight: 600; }
.oport .meta .bien { color: var(--acento); font-weight: 600; }
.oport-lista .mas { margin: 0; border: 0; border-top: 1px solid var(--linea); border-radius: 0; }
.guia { background: var(--acento-suave); border-radius: var(--radio); padding: 16px; display: grid; gap: 12px; }
.guia h3 { font-size: 1.1rem; font-weight: 700; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: paso; }
.pasos li { display: grid; grid-template-columns: 1.7rem 1fr; gap: 10px; align-items: start; font-size: 14.5px; counter-increment: paso; }
.pasos li > span { min-width: 0; padding-top: 2px; }
.pasos li::before { content: counter(paso); width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--acento); color: var(--sobre-acento);
  display: grid; place-items: center; font: 700 13px/1 var(--display); }
.viene-filtros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 10px; }
.viene-filtros select { width: 100%; }
.viene-filtros .buscar, .viene-filtros select { margin: 0; }

footer { padding-block: 20px 40px; font-size: 13px; color: var(--suave); border-top: 1px solid var(--linea); }
footer p { margin: 0 0 8px; }
footer .logo { font-size: 15px; margin-bottom: 10px; }
.aviso-flotante { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9;
  background: var(--texto); color: var(--fondo); padding: 10px 16px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px); box-shadow: var(--sombra); }

.monedas.quietas .moneda { animation: none; }
.mapa-tarjeta + .bloque, .bloque + .mapa-tarjeta, main > .mapa-tarjeta { margin-block: 12px; }
@media (prefers-reduced-motion: reduce) {
  .moneda, .sello .parpado, .sello .pupila, .sello .dolar { animation: none; }
  .barra, .barra * { transition: none !important; }
}