/* Plantilla «red». La tapa es de tinta con el tejido de las organizaciones; el resto, papel.
   Colores: --papel, --tinta, --acento (los nodos, las cifras) y --suave (las fichas de miembros). */

:root {
  --papel: #F4F6F5;
  --tinta: #10302B;
  --acento: #F2B632;
  --suave: #E3EAE7;
  --sans: "Libre Franklin", system-ui, sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 74rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.1rem;
  line-height: 1.6;
  transition: background-color .3s, color .3s;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; }

.tapa-in, main > .bloque, .sumate-in, .pie, .cifras {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--margen);
  padding-right: var(--margen);
}

/* ─── Tapa: el tejido ────────────────────────────────────────────── */

.tapa {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(40px, 7vw, 88px) 0 clamp(32px, 5vw, 56px);
}
.tapa-que { font-weight: 600; margin-bottom: .5rem; }
.tapa h1 {
  font-weight: 900;
  font-size: clamp(2.4rem, 6.4vw, 5rem);
  line-height: .98;
  letter-spacing: -.025em;
  max-width: 14ch;
}
.tapa-lema { margin-top: 1rem; font-size: clamp(1.15rem, 2vw, 1.35rem); max-width: 40ch; }

.tejido {
  display: block;
  width: min(100%, 1100px);
  height: auto;
  margin: clamp(8px, 2vw, 24px) auto 0;
  padding: 0 var(--margen);
  font-family: var(--sans);
}
.t-centro { stroke: var(--papel); stroke-width: 1.4; opacity: .55; }
.t-vecino { stroke: var(--acento); stroke-width: 2.2; }
.t-lejos { stroke: var(--papel); stroke-width: 1; opacity: .28; stroke-dasharray: 4 5; }
.t-nodo circle { fill: var(--acento); stroke: var(--tinta); stroke-width: 4; }
.t-nodo text { fill: var(--papel); font-size: 21px; font-weight: 600; }
.t-hub { fill: var(--papel); }
.t-hub-aro { fill: none; stroke: var(--papel); stroke-width: 2; opacity: .6; }
@media (max-width: 640px) {
  .t-nodo text { font-size: 30px; }
}

.cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1rem 2rem;
  margin-top: clamp(20px, 4vw, 40px);
}
.cifras div { display: flex; flex-direction: column-reverse; border-top: 2px solid var(--acento); padding-top: .6rem; }
.cifras dd { margin: 0; font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; color: var(--acento); letter-spacing: -.02em; }
.cifras dt { margin-top: .3rem; font-size: 1rem; }

/* ─── Bloques ────────────────────────────────────────────────────── */

.bloque { padding-top: clamp(48px, 7vw, 88px); }
.bloque > h2, .sumate h2 {
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.05;
  letter-spacing: -.015em;
  margin-bottom: 1.4rem;
}
.presenta p {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.45rem, 2.8vw, 2.05rem);
  line-height: 1.38;
  max-width: 34ch;
}
.bajada { margin: -.6rem 0 1.4rem; font-size: 1.2rem; }

.miembros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 12px;
}
.miembros li {
  background: var(--suave);
  padding: 1.1rem 1.2rem 1.2rem;
  border-left: 6px solid var(--acento);
}
.miembros h3 { font-weight: 800; font-size: 1.15rem; line-height: 1.2; }
.m-lugar { font-weight: 600; margin: .15rem 0 .4rem; }

.acciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.acciones li {
  display: grid;
  gap: .2rem 2rem;
  padding: 1rem 0;
  border-top: 2px solid var(--tinta);
}
@media (min-width: 760px) { .acciones li { grid-template-columns: 18rem 1fr; } }
.acciones h3 { font-weight: 800; font-size: 1.25rem; }

.historia p { max-width: 58ch; font-size: 1.2rem; }

.mesa { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.2rem 2rem; }
.mesa dt { font-weight: 800; }
.mesa dd { margin: 0; }

.sumate {
  background: var(--acento);
  color: var(--tinta);
  margin-top: clamp(56px, 8vw, 96px);
  padding: clamp(40px, 6vw, 72px) 0;
}
.sumate p { max-width: 50ch; font-size: 1.2rem; }
.sumate .sumate-juliana { margin-top: 1rem; font-weight: 600; font-size: 1.05rem; }

.donde { display: grid; gap: 0 3rem; }
@media (min-width: 760px) { .donde { grid-template-columns: 18rem 1fr; } }
.donde-dir { font-weight: 800; font-size: 1.5rem; }

.pie { padding-top: 3rem; padding-bottom: 110px; font-size: 1rem; display: grid; gap: .4rem; }
.pie-nombre { font-weight: 800; }

@media (prefers-reduced-motion: reduce) { body { transition: none; } }