/* La identidad de Intelios sobre el mapa (adoptada el 2026-09-08).
   Diseno de Astra. Se apoya sobre el paquete ya compuesto: no toca ni un dato,
   ni un color de dominio, ni una interaccion - solo la piel.
   Los tokens de marca NO se redefinen aca: los extrae `build_site.py` de
   `webapp/frontend/css/app.css`, que es donde el producto los define. Con una
   segunda copia, la pieza y el producto se despintan en silencio. */
@font-face { font-family: 'Plus Jakarta Sans'; src: url('jakarta.woff2'); font-weight: 400 700; font-display: swap; }
:root {
  color-scheme: light;
  --fuente: 'Plus Jakarta Sans', sans-serif;
  --tinta: rgb(var(--color-slate-900));
  --tinta-suave: rgb(var(--color-slate-600));
  --papel: rgb(var(--color-surface));
  --hud: rgb(var(--color-surface-card));
  --borde: rgb(var(--color-slate-200));
  --acento: rgb(var(--color-primary-600));
  --filete: 1px solid var(--borde);
}
body.mapa { background: var(--papel); color: var(--tinta); }
.hud, .panel { background: var(--hud); border-color: var(--borde); }
.hud { border-radius: 8px !important; box-shadow: 0 4px 20px rgb(var(--color-primary-950) / .06) !important; }
.hud-titulo { border-top: 3px solid rgb(var(--color-primary-900)); padding: 22px; }
.marca { border-bottom: var(--filete); padding-bottom: 18px; }
.marca-nombre { color: rgb(var(--color-primary-950)); }
.hud-titulo .sobretitulo { color: rgb(var(--color-primary-600)); font-size: 10px; letter-spacing: .14em; line-height: 1.5; }
.hud-titulo h1 { color: rgb(var(--color-primary-950)); font-size: 30px; font-weight: 600; line-height: 1.1; letter-spacing: -.035em; }
.metricas { border-top: var(--filete); padding-top: 16px; }
.metricas dt, .metricas div:nth-child(4) dt { color: rgb(var(--color-primary-900)); font-size: 27px; font-weight: 600; }
.metricas dd { color: var(--tinta-suave); letter-spacing: .06em; font-size: 9px; }
.hud-titulo .corte { line-height: 1.65; }
.hud-titulo .corte-tratamiento { padding: 10px 12px; border-left: 2px solid rgb(var(--color-accent-600)); background: rgb(var(--color-primary-50)); border-radius: 0 4px 4px 0; margin-top: 12px; }
.hud-titulo .compartir { border-color: var(--borde); }
.hud-titulo .compartir a { border-radius: 4px; border-color: var(--borde); background: var(--hud); }
.hud .plegar, .hud-zoom button, .hud-recorrido button, .hud-filtros select, .panel .acciones a { border: var(--filete) !important; border-radius: 4px !important; color: var(--tinta); }
.hud .plegar:hover, .hud-zoom button:hover { background: rgb(var(--color-primary-50)); }
.zona, .familia { --fondo: var(--hud) !important; }
.zona > .encabezado { height: 290px; }
.zona::before { height: calc(2px / var(--k, 1)); background: rgb(var(--color-primary-200)); }
.zona::after { background: var(--borde); }
.zona > .encabezado::before { font-weight: 500; color: rgb(var(--color-primary-300)); font-size: clamp(40px, calc(34px / var(--k, 1)), 80px); }
.zona .momento { color: rgb(var(--color-primary-600)); font-weight: 600; letter-spacing: .14em; }
.zona h2 { color: rgb(var(--color-primary-950)); font-family: var(--fuente); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.zona .subtitulo { color: var(--tinta-suave); }
.familia { border-top: var(--filete); }
.familia h3 { color: rgb(var(--color-primary-900)); font-weight: 600; }
.proyecto, .proyecto.es-varias, .proyecto.es-coalicion {
  border: var(--filete); border-radius: 8px !important; background: var(--hud);
  outline: calc(.7px / var(--k, 1)) solid rgb(var(--color-slate-300));
  outline-offset: 0;
  box-shadow: 0 calc(2px / var(--k, 1)) calc(7px / var(--k, 1)) rgb(var(--color-primary-950) / .08) !important;
}
.proyecto:hover, .proyecto.seleccionado { outline-color: rgb(var(--color-primary-500)); box-shadow: 0 0 0 calc(2px / var(--k, 1)) rgb(var(--color-primary-200)) !important; }
.proyecto .ficha svg { filter: none; }
.proyecto .firmas { border-radius: 7px 7px 0 0; background: rgb(var(--color-primary-50)); color: rgb(var(--color-primary-700)); border-bottom: var(--filete); font-weight: 600; letter-spacing: .06em; }
.proyecto.es-coalicion .firmas { background: rgb(var(--color-primary-900)); color: rgb(var(--color-slate-50)); }
.proyecto .meta { color: var(--tinta-suave); font-weight: 500; letter-spacing: .08em; }
.anotacion { border-top: var(--filete); color: var(--tinta); line-height: 1.65; }
.anotacion .destacado { color: rgb(var(--color-primary-800)); background: rgb(var(--color-primary-50)); border-left: 3px solid rgb(var(--color-accent-600)); padding: 8px 10px; border-radius: 0 4px 4px 0 !important; font-weight: 600; }
.hud-recorrido { padding: 10px; width: 214px; }
.hud-recorrido::before { content: 'EXPLORÁ EL MAPA'; display: block; font-size: 9px; letter-spacing: .15em; color: var(--tinta-suave); padding: 6px 8px 12px; }
.hud-recorrido button { border: 0 !important; padding: 10px 8px; min-height: 44px; margin-bottom: 2px; }
.hud-recorrido .titulo { font-weight: 500; line-height: 1.45; }
.hud-recorrido .paso { border-radius: 4px; font-weight: 600; }
.hud-recorrido .cuenta { color: var(--tinta-suave); font-weight: 500; }
.hud-recorrido button.activa { background: rgb(var(--color-primary-900)) !important; }
.hud-recorrido button:hover:not(.activa) { background: rgb(var(--color-primary-50)); }
.hud-filtros .filtro { border: 0 !important; }
.hud-filtros select { background: var(--hud); min-height: 36px; }
.hud-filtros .alternar.con-filtros { background: rgb(var(--color-primary-900)); }
.avisos { border-top: var(--filete); }
.avisos-tit { color: var(--tinta); font-weight: 600; }
.avisos input[type=email] { border: var(--filete); border-radius: 4px 0 0 4px; background: var(--hud); color: var(--tinta); }
.avisos button { background: rgb(var(--color-slate-900)); border: 0; border-radius: 0 4px 4px 0; letter-spacing: .04em; }
.panel .bloque h3 { color: var(--tinta-suave); font-weight: 600; letter-spacing: .13em; }
.panel .chip { background: rgb(var(--color-primary-50)); color: rgb(var(--color-primary-700)); border: 0; border-radius: 4px !important; font-weight: 500; }
.panel .acciones .principal { background: rgb(var(--color-slate-900)) !important; color: rgb(var(--color-slate-50)); }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid rgb(var(--color-primary-500)); outline-offset: 3px; }
/* Keep the title clear of the fixed lower controls at normal browser heights. */
@media (min-width: 900px) {
  .hud-titulo { max-height: calc(100dvh - 156px); overflow-y: auto; scrollbar-width: thin; }
  body.con-panel .hud-recorrido { right: calc(var(--panel-w) + 20px) !important; }
}
/* A narrow desktop cannot fit two legends and a project detail side by side.
   Their measured widths disappear from areaLibre() while the detail is open. */
@media (min-width: 900px) and (max-width: 1279px) {
  body.con-panel .hud-titulo, body.con-panel .hud-recorrido { display: none; }
  body.con-panel .hud-filtros { left: 20px; right: calc(var(--panel-w) + 20px); bottom: 128px; transform: none; }
  body.con-panel .hud-filtros.plegado { right: auto; }
  body.con-panel .hud-filtros .filtro { flex: 1 1 40%; }
  body.con-panel .hud-filtros select { width: 100%; }
}
@media (max-width: 899px) {
  .hud-titulo, .hud-recorrido { width: auto; }
  .hud-titulo { margin-top: 12px; }
  .zona h2 { line-height: 1.18; }
  .proyecto { margin-bottom: 12px; }
  .aviso-telefono { background: rgb(var(--color-primary-50)); color: rgb(var(--color-primary-900)); border: 1px solid rgb(var(--color-primary-200)); border-radius: 8px !important; }
  .aviso-telefono h2 { font-size: 16px; font-weight: 600; }
  .aviso-telefono > p, .aviso-telefono .captura-texto { font-size: 12px; color: rgb(var(--color-primary-700)); }
  .aviso-telefono .captura-fila button { background: rgb(var(--color-primary-900)); border-color: rgb(var(--color-primary-900)); }
  .aviso-telefono .copiar { color: rgb(var(--color-primary-700)); background: var(--hud); border-color: rgb(var(--color-primary-200)); }
}
/* Dark remains opt-in for later exploration; OS preference must not silently
   replace the visual proposal the reviewer opened from the light screenshot. */
:root[data-theme="dark"] { color-scheme: dark; --papel: rgb(var(--color-surface-dark)); --hud: rgb(var(--color-surface-card-dark)); --tinta: rgb(var(--color-slate-100)); --tinta-suave: rgb(var(--color-slate-300)); --borde: rgb(var(--color-slate-600)); }
:root[data-theme="dark"] :is(.hud-titulo h1, .zona h2, .marca-nombre, .familia h3, .metricas dt) { color: rgb(var(--color-primary-100)); }
:root[data-theme="dark"] :is(.hud-titulo .sobretitulo, .zona .momento) { color: rgb(var(--color-primary-300)); }
:root[data-theme="dark"] :is(.hud-titulo .corte-tratamiento, .proyecto .firmas, .anotacion .destacado, .panel .chip) { background: rgb(var(--color-primary-900)); color: rgb(var(--color-primary-100)); }
:root[data-theme="dark"] .proyecto .ficha { background: rgb(var(--color-surface-card)); border-radius: 6px; }
:root[data-theme="dark"] .aviso-telefono { background: rgb(var(--color-primary-900)); color: rgb(var(--color-primary-100)); }
:root[data-theme="dark"] :is(.aviso-telefono > p, .aviso-telefono .captura-texto, .aviso-telefono .copiar) { color: rgb(var(--color-primary-100)); }