/* ═══════════════════════════════════════════════════════════════════════
   Mapa de la morosidad — Suizo, versión 2

   Cambios de esta vuelta, todos pedidos:
     · se van las flechas del recorrido — el mapa queda más limpio
     · la ficha recupera FORMA: sombra dura desplazada, no un rectángulo plano
     · vuelve algo de color, pero como filete y como marca, nunca como fondo
     · las fichas con varias firmas se destacan, y las de varios bloques más

   Sigue sin tocarse una sola cuenta ni una regla del mapa. Es capa aparte:
   el sitio vive dos semanas y se decidió que puede divergir del generador.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --tinta: #111111;
  --tinta-suave: #6f6f6f;
  --papel: #ffffff;
  --borde: #111111;
  --hud: #ffffff;
  --sombra: none;
  --acento: #e2231a;
  --filete: 1px solid #111111;
  /* Helvetica es la tipografía del estilo, no un default. En Mac es nativa,
     en Windows cae en Arial —su clon métrico—: cero peso de descarga y el
     paquete sigue siendo autocontenido. */
  --fuente: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
}

/* ── 1. Se va todo lo blando (la ficha va aparte: tiene sombra a propósito) ── */
.zona, .familia, .panel, .hud, .hud-titulo, .hud-filtros, .hud-zoom,
.hud-minimapa, .hud-recorrido, .hud-pie, .anotacion .destacado, .panel .chip,
.hud-filtros select, .hud-filtros .filtro, .hud-recorrido button, .hud .plegar,
.panel .acciones a, .aviso-telefono, #minimapa, .hud-zoom button {
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.mapa {
  background: var(--papel);
  background-image: none;
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
}

/* ── 2. Se van las flechas ────────────────────────────────────────────── */
/* El orden del recorrido ya lo dicen el número de cada zona y la lista de la
   derecha. La flecha era una tercera copia del mismo dato, y la que más
   ensuciaba el plano. */
#conexiones { display: none !important; }

/* ── 3. La zona ───────────────────────────────────────────────────────── */
/* El fondo pastel se va; el color de la zona sobrevive en el filete y en el
   número. Es la diferencia entre teñir un territorio y rotularlo. */
.zona, .familia { --fondo: #ffffff !important; }
#mundo { counter-reset: zona; }
.zona {
  counter-increment: zona;
  padding: 0 0 44px;
  border: 0;
  background: transparent;
}
/* El filete pesado reemplaza al fondo: es lo que hace que la zona se siga
   leyendo como territorio desde lejos.
   ⚠ Va en ::before ABSOLUTO y NO como `border`: un borde que crece con el
   zoom cambiaría el ancho de la caja, y con él el del plano y el encuadre —
   el zoom se realimentaría a sí mismo. */
.zona::before {
  display: block;
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(5px / var(--k, 1));
  background: var(--color, #111111);
  border-radius: 0;
}
.zona::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: calc(1px / var(--k, 1));
  background: #d4d4d4;
}
.zona > .encabezado { height: 220px; padding-top: 18px; }
.zona > .encabezado::before {
  content: counter(zona, decimal-leading-zero);
  position: absolute;
  top: calc(10px + 5px / var(--k, 1));
  right: 0;
  font-size: clamp(44px, calc(40px / var(--k, 1)), 96px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.05em;
  color: var(--color, #111111);
}
.zona .momento {
  /* Baja lo que mida el filete pesado, que crece con el zoom: si no, de lejos
     la etiqueta de etapa quedaba tapada por el propio filete. */
  top: calc(14px + 5px / var(--k, 1));
  opacity: 1 !important;
  font-size: clamp(11px, calc(10px / var(--k, 1)), 20px);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #111111;
}
.zona h2 {
  top: calc(46px + 5px / var(--k, 1));
  max-width: 22ch;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .96;
  color: #111111;
}
.zona .cuenta { font-size: 13px; }
.zona .cuenta b { font-weight: 700; }
.zona .subtitulo { max-width: 54ch; font-size: 14px; line-height: 1.55; }

.familias { gap: 32px; }
.familia {
  padding: 16px 0 0;
  border: 0;
  border-top: var(--filete);
  background: transparent;
}
.familia h3 { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.familia .corto { letter-spacing: .18em; font-weight: 700; }

/* ── 4. La ficha: forma, no un rectángulo plano ───────────────────────── */
/* La sombra es dura y desplazada, sin difuminar: da volumen sin ablandar
   nada, que es lo que un plano suizo nunca hace.
   Y además trabaja: su color dice cuánta gente firma el proyecto. */
.proyecto {
  border: var(--filete);
  border-radius: 0;
  background: #ffffff;
  /* Todo lo que mide 1px se despinta de lejos: a k=0,24 el filete se dibuja
     de 0,24px. `outline` y `box-shadow` NO ocupan lugar, así que pueden
     crecer con el zoom sin mover una sola ficha ni cambiar el plano. */
  outline: calc(.9px / var(--k, 1)) solid #111111;
  outline-offset: calc(-.9px / var(--k, 1));
  box-shadow: calc(3.5px / var(--k, 1)) calc(3.5px / var(--k, 1)) 0 #dedede !important;
  transition: none;
}
.proyecto:hover {
  transform: none !important;
  box-shadow: calc(3.5px / var(--k, 1)) calc(3.5px / var(--k, 1)) 0 var(--acento) !important;
}
/* La ficha del producto viene a todo color. Está incrustada como dibujo y no
   como imagen, así que se le puede bajar el tono desde acá SIN tocar el
   código del producto: es la misma ficha, con el color contenido. */
.proyecto .ficha svg { filter: saturate(.62); }
.proyecto .meta {
  padding: 0 14px 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #111111;
}

/* ── 5. Las que llevan varias firmas ──────────────────────────────────── */
/* Tres escalones, porque son tres cosas distintas: una persona sola, un
   bloque firmando en masa, y firmas de bloques distintos. La sombra los
   separa de un vistazo, incluso desde la vista general. */
.proyecto.es-varias {
  outline-width: calc(1.5px / var(--k, 1));
  box-shadow: calc(5px / var(--k, 1)) calc(5px / var(--k, 1)) 0 #111111 !important;
}
.proyecto.es-coalicion {
  outline-width: calc(2px / var(--k, 1));
  box-shadow: calc(6px / var(--k, 1)) calc(6px / var(--k, 1)) 0 var(--acento) !important;
}

/* La tira con la cuenta. Sólo aparece si hay más de una firma. */
.proyecto .firmas {
  margin: 0;
  padding: 5px 13px;
  background: #111111;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.proyecto.es-coalicion .firmas { background: var(--acento); }

/* ── 6. La anotación ──────────────────────────────────────────────────── */
.anotacion { border-top: var(--filete); font-size: 13px; line-height: 1.5; }
/* Hay 26 destacados. En rojo pleno dejaban de destacar y pasaban a ser ruido:
   el acento sólo pesa si es raro. Filete al costado, no bloque. */
.anotacion .destacado {
  background: #ffffff;
  color: #111111;
  border-left: 4px solid var(--acento);
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  font-size: 12px;
  line-height: 1.4;
  padding: 2px 0 2px 10px;
}

/* ── 7. El HUD ────────────────────────────────────────────────────────── */
.hud { background: #ffffff; border: var(--filete); backdrop-filter: none !important; }
.hud-titulo .sobretitulo {
  font-weight: 700; letter-spacing: .2em; color: #111111; text-transform: uppercase;
}
.hud-titulo h1 { font-weight: 700; letter-spacing: -.04em; line-height: .95; }
.hud-titulo .corte, .hud-titulo .ayuda { color: var(--tinta-suave); }
/* ⚠ En las métricas el NÚMERO es el <dt> y la etiqueta el <dd> —al revés de
   lo que uno espera de una lista de definiciones. Estilarlos al revés
   invertía la jerarquía: el número quedaba chico y la etiqueta grande. */
.metricas dt {
  font-size: 25px; font-weight: 700; letter-spacing: -.035em; color: #111111;
  text-transform: none;
}
.metricas dd {
  font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-suave);
}
/* El único rojo pleno del encabezado: el dato singular de toda la pieza. */
.metricas div:nth-child(4) dt { color: var(--acento); }

.hud .plegar, .hud-zoom button, .hud-recorrido button,
.hud-filtros select, .hud-filtros .filtro, .panel .acciones a {
  border: var(--filete) !important;
  font-family: var(--fuente);
}
/* Los círculos del recorrido conservan el color de su zona: son la leyenda
   que enseña de qué color es cada territorio. */
.hud-recorrido .paso { font-weight: 700; }
.hud-recorrido .cuenta { color: #111111; font-weight: 700; }
.hud-filtros .alternar.con-filtros { background: #111111; color: #ffffff; }
.hud-filtros .cuenta-filtro b { font-weight: 700; }

#minimapa { border: var(--filete); }
#minimapa rect { rx: 0 !important; }

/* ── 8. El panel lateral ──────────────────────────────────────────────── */
.panel { border-left: var(--filete); background: #ffffff; }
.panel .bloque h3 {
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-size: 10.5px; color: #111111;
}
.panel .chip { border: var(--filete); background: #ffffff; color: #111111; font-weight: 700; }
.panel .acciones .principal { background: #111111 !important; color: #ffffff; }
.panel .acciones .principal:hover { background: var(--acento) !important; }


/* ── 9. La marca ──────────────────────────────────────────────────────── */
/* Sora va empaquetada al lado (14,7 KB): el logo tiene que verse igual sin
   depender de Google Fonts ni de ningún tercero. */
@font-face {
  font-family: 'Sora';
  src: url('sora-500-latin.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
.marca {
  display: flex;
  align-items: baseline;
  gap: .5em;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: var(--filete);
}
.marca-nombre {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 500;
  font-size: 21px;
  letter-spacing: -.015em;
  line-height: 1;
  color: #091b3d;
  display: inline-flex;
  align-items: baseline;
}
.marca-producto {
  font-family: 'Sora', system-ui, sans-serif;
  font-weight: 500;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ── 10. El alta de avisos ────────────────────────────────────────────── */
.avisos {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: var(--filete);
}
.avisos-tit {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #111111;
}
.avisos-sub {
  margin: 3px 0 11px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.avisos-fila { display: flex; }
/* ⛔ Sin esta línea el `hidden` del formulario enviado NO surte efecto: el
   atributo `hidden` es una regla del navegador de especificidad casi nula, y
   cualquier `display` puesto con una clase le gana. El campo se quedaba en
   pantalla con el correo escrito y el «Listo» aparecía debajo, como si el envío
   no hubiera salido. El JavaScript estaba bien; lo anulaba esta hoja. */
.avisos-fila[hidden] { display: none; }
.avisos input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: var(--filete);
  border-right: 0;
  border-radius: 0;
  background: #ffffff;
  font-family: var(--fuente);
  font-size: 12px;
  color: #111111;
}
.avisos input[type="email"]::placeholder { color: #a3a3a3; }
.avisos input[type="email"]:focus {
  outline: 2px solid var(--acento);
  outline-offset: -2px;
}
.avisos button {
  flex: none;
  padding: 9px 15px;
  border: var(--filete);
  border-radius: 0;
  background: #111111;
  color: #ffffff;
  font-family: var(--fuente);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.avisos button:hover { background: var(--acento); border-color: var(--acento); }
.avisos-ok {
  margin: 0;
  padding-left: 10px;
  border-left: 4px solid var(--acento);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.45;
  color: #111111;
}
/* La trampa anti-bots de Listmonk: invisible para una persona, presente
   para un robot que completa todos los campos que encuentra. */
.avisos .nonce { position: absolute; left: -9999px; width: 1px; height: 1px; }
.alta-sumidero { display: none; }

/* Plegado, el encabezado deja sólo la marca. */
.hud-titulo.plegado .avisos,
.hud-titulo.plegado .marca-producto { display: none; }
/* `mapa.css` esconde la marca entera al plegar y se lleva puesta la regla de
   arriba: el panel plegado quedaba sin logo. La reponemos acá, que es la capa
   que manda. El filete de abajo se corta antes del botón «+» para no pasarle
   por debajo. */
.hud-titulo.plegado .marca {
  display: flex;
  margin-bottom: 12px;
  margin-right: 28px;
  padding-bottom: 10px;
}


/* ── 11. Se va el minimapa; el índice ocupa su lugar ──────────────────── */
/* El minimapa hacía dos cosas: llevarte a una zona y decirte dónde estabas.
   Lo primero ya lo hace el índice. Lo segundo se lo agrego en swiss.js.
   Se oculta y NO se borra del HTML: `mapa.js` lo busca al arrancar y sin el
   elemento el mapa entero se caería. */
.hud-minimapa { display: none !important; }
.hud-recorrido {
  top: auto !important;
  bottom: 20px !important;
  right: 20px !important;
}
/* La regla que corre el HUD cuando se abre el panel lateral ya contempla al
   índice, así que sigue funcionando en su lugar nuevo. */

/* Ahora que marca dónde estás, la zona activa tiene que verse de verdad. */
.hud-recorrido button.activa {
  background: #111111 !important;
  color: #ffffff;
}
.hud-recorrido button.activa .titulo,
.hud-recorrido button.activa .cuenta { color: #ffffff !important; }