/* Plantilla «asamblea». Tres colores y nada más: --papel, --tinta, --acento.
   Las combinaciones las inyecta el build desde ficha.json; acá sólo va la de por defecto,
   para que la página se vea bien aunque se abra sola. */

:root {
  --papel: #F4F4F0;
  --tinta: #161616;
  --acento: #F83A33;
  --disp: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --texto: "Instrument Sans", system-ui, sans-serif;
  --margen: clamp(16px, 4vw, 56px);
  --ancho: 72rem;
}

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

/* ─── Tapa: el afiche ─────────────────────────────────────────────── */

.tapa {
  padding: clamp(40px, 8vw, 96px) var(--margen) clamp(28px, 5vw, 56px);
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
}
.tapa-que {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: .6rem;
}

/* El nombre: lo único grande de verdad en toda la página. Entra la palabra más larga en una línea. */
.nombre {
  display: grid;
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  line-height: .84;
  letter-spacing: -.005em;
  font-size: min(15rem, calc((100vw - 2 * var(--margen)) / (var(--largo) * .5)));
}
.capa { grid-area: 1 / 1; display: flex; flex-direction: column; }
.linea { display: block; }
.capa-acento {
  color: var(--acento);
  transform: translate(.035em, .03em);
}
/* La tinta sobreimpresa: donde se pisan, oscurece, como en la risografía. */
.capa-tinta { color: var(--tinta); mix-blend-mode: multiply; }

.lema {
  margin-top: 1.4rem;
  max-width: 32ch;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  line-height: 1.35;
}

/* ─── La convocatoria: una franja pegada un poco torcida ─────────── */

.convoca {
  padding: 0 var(--margen);
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto clamp(48px, 8vw, 96px);
}
.convoca-papel {
  background: var(--acento);
  color: var(--tinta);
  padding: clamp(20px, 4vw, 40px);
  transform: rotate(-1.2deg);
  max-width: 44rem;
}
.convoca h2 {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: .95;
}
.convoca-cuando { font-weight: 700; font-size: clamp(1.25rem, 2.6vw, 1.7rem); margin-top: .5rem; }
.convoca-donde { font-size: 1.15rem; }
.convoca-detalle { margin-top: .8rem; max-width: 40ch; }

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

main {
  padding: 0 var(--margen);
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
}
.bloque {
  display: grid;
  gap: 1rem 3rem;
  padding: clamp(32px, 5vw, 56px) 0;
  border-top: 6px solid var(--tinta);
}
@media (min-width: 860px) {
  /* Título a la izquierda, todo lo demás apilado a la derecha. Sin separación entre filas: las
     filas vacías que abre el título no tienen que sumar aire. */
  .bloque { grid-template-columns: 16rem 1fr; row-gap: 0; }
  .bloque > .titulo { grid-row: 1 / span 9; }
  .bloque > :not(.titulo) { grid-column: 2; }
  .bloque > :not(.titulo) + :not(.titulo) { margin-top: 1rem; }
}
.titulo {
  font-family: var(--disp);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: .95;
}
.bajada { font-size: 1.3rem; line-height: 1.45; max-width: 36ch; }

.consignas { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 1.4rem 2.5rem; }
@media (min-width: 640px) { .consignas { grid-template-columns: 1fr 1fr; } }
.consignas h3 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  text-transform: uppercase;
  padding-bottom: .3rem;
  border-bottom: 3px solid var(--acento);
  margin-bottom: .4rem;
}
.consignas p { max-width: 34ch; }

/* La agenda es de verdad una secuencia: la fecha manda. */
.agenda { list-style: none; margin: 0; padding: 0; }
.agenda li {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 2px solid var(--tinta);
}
.agenda li:last-child { border-bottom: 0; }
.agenda-fecha {
  display: grid;
  justify-items: center;
  font-family: var(--disp);
  text-transform: uppercase;
  line-height: .9;
}
.agenda-dia, .agenda-mes { font-weight: 800; font-size: 1rem; }
.agenda-num { font-weight: 900; font-size: 2.6rem; }
.agenda li:first-child .agenda-fecha { background: var(--acento); padding: .4rem 0; }
.agenda-que h3 { font-size: 1.2rem; }

.historia p {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.4;
  max-width: 34ch;
}
.donde-dir {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: .9;
  margin-bottom: .4rem;
}

/* ─── Sumate: el afiche en negativo ──────────────────────────────── */

.sumate {
  background: var(--tinta);
  color: var(--papel);
  padding: clamp(48px, 9vw, 110px) var(--margen);
  margin-top: clamp(32px, 5vw, 56px);
}
.sumate-in { max-width: var(--ancho); margin: 0 auto; }
.sumate h2 {
  font-family: var(--disp);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(3rem, 10vw, 7.5rem);
  line-height: .86;
  color: var(--acento);
}
.sumate p { font-size: 1.3rem; max-width: 34ch; margin-top: 1rem; }
.sumate .sumate-juliana { font-size: 1.05rem; opacity: .9; }

.pie {
  padding: 28px var(--margen) 110px;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin: 0 auto;
  font-size: .95rem;
  display: grid;
  gap: .5rem;
}
.pie-nombre { font-family: var(--disp); font-weight: 800; font-size: 1.4rem; text-transform: uppercase; }

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