/* ═══════════════════════════════════════════════════════════════
   CARTEL DE CIERRE — Foro Nacional del Cáñamo
   Septiembre de 2026. Sustituye al sitio completo: el evento pasó.

   Una sola pieza, sin JavaScript y sin tema conmutable. El sitio
   llevaba claro y oscuro porque se leía en sesión larga; un cartel
   se ve diez segundos y se compromete con un solo aspecto. Los
   colores van pintados en el body, no heredados del navegador.
   ═══════════════════════════════════════════════════════════════ */

:root {
  color-scheme: dark;

  /* Guinda institucional del Comité y su fondo profundo. */
  --guinda:#611232;
  --fondo:#3d0b1e;

  /* Latón de la placa: arena, oro medio y el filo claro del bisel. */
  --laton:#e9dcbd;
  --laton2:#cdb281;
  --filo:#fff6e2;

  /* Tinta grabada. Contraste 9.1:1 sobre el latón medio. */
  --tinta:#3a0a1d;
  --tinta2:#6b4a33;

  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --util: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 4vw, 3rem);

  font-family: var(--util);
  color: var(--laton);
  background: var(--fondo);
  /* Viñeta: acerca la luz al centro, donde está la placa. */
  background-image: radial-gradient(ellipse 80% 70% at 50% 38%, var(--guinda), var(--fondo) 72%);
  -webkit-font-smoothing: antialiased;
}

.hoja { display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 1.75rem); width: 100%; }

/* ---------- La placa ---------------------------------------- */
.placa {
  width: 100%;
  max-width: 41rem;
  padding: clamp(1.75rem, 5vw, 3rem) clamp(1.25rem, 5vw, 3.5rem);
  text-align: center;

  background: linear-gradient(168deg, var(--filo) 0%, var(--laton) 34%, var(--laton2) 100%);
  border-radius: 5px;
  /* Bisel: filo claro arriba, sombra abajo, y un filete interior que
     imita la línea grabada del borde de una placa real. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .85),
    inset 0 0 0 1px rgb(58 10 29 / .18),
    inset 0 0 0 9px rgb(255 255 255 / .16),
    inset 0 0 0 10px rgb(58 10 29 / .14),
    0 2px 0 rgb(255 255 255 / .06),
    0 22px 48px rgb(0 0 0 / .45);

  animation: sube .7s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes sube {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Los cuatro remaches. Van pintados en el fondo de la placa y no en
   el HTML porque son parte del objeto, no del mensaje: quien usa
   lector de pantalla no gana nada oyendolos. Cuatro gradientes y no
   dos pseudoelementos, que solo alcanzan para dos esquinas. */
.placa {
  background-image:
    radial-gradient(circle at 35% 30%, var(--filo), var(--laton2) 58%, rgb(58 10 29 / .5) 100%),
    radial-gradient(circle at 35% 30%, var(--filo), var(--laton2) 58%, rgb(58 10 29 / .5) 100%),
    radial-gradient(circle at 35% 30%, var(--filo), var(--laton2) 58%, rgb(58 10 29 / .5) 100%),
    radial-gradient(circle at 35% 30%, var(--filo), var(--laton2) 58%, rgb(58 10 29 / .5) 100%),
    linear-gradient(168deg, var(--filo) 0%, var(--laton) 34%, var(--laton2) 100%);
  background-repeat: no-repeat;
  background-size: 7px 7px, 7px 7px, 7px 7px, 7px 7px, auto;
  background-position: 15px 15px, right 15px top 15px, 15px bottom 15px, right 15px bottom 15px, 0 0;
}

/* ---------- Contenido --------------------------------------- */
.sello {
  width: clamp(9rem, 34vw, 13rem);
  height: auto;
  margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
}

.acta {
  margin: 0 0 clamp(1.25rem, 4vw, 1.75rem);
  font-size: clamp(.625rem, .55rem + .3vw, .75rem);
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--tinta2);
}
/* El punto medio separa los tres datos del acta y desaparece al
   quebrarse la línea en pantalla estrecha, donde ya separa el salto. */
.acta span { padding: 0 .55em; opacity: .55; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 1.3rem + 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--tinta);
  /* Grabado: luz abajo, hueco arriba. Un solo píxel de cada lado. */
  text-shadow: 0 1px 0 rgb(255 255 255 / .55), 0 -1px 0 rgb(58 10 29 / .12);
  text-wrap: balance;
}

.lema {
  margin: clamp(1.25rem, 4vw, 1.75rem) auto;
  padding: clamp(.75rem, 3vw, 1rem) 0 0;
  max-width: 28ch;

  font-family: var(--display);
  font-size: clamp(.875rem, .8rem + .4vw, 1.0625rem);
  font-style: italic;
  letter-spacing: .04em;
  color: var(--tinta);

  /* Filete doble: el remate clásico de una inscripción. */
  border-top: 1px solid rgb(58 10 29 / .3);
  box-shadow: 0 -4px 0 -3px rgb(58 10 29 / .3);
}

.cuerpo {
  margin: 0 auto;
  max-width: 44ch;
  font-size: clamp(.875rem, .84rem + .2vw, .9375rem);
  line-height: 1.65;
  color: var(--tinta2);
  text-wrap: pretty;
}

/* ---------- La salida --------------------------------------- */
.salida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: clamp(1.5rem, 4vw, 2rem) 0 clamp(1.25rem, 3vw, 1.5rem);
  padding: 0 clamp(1.25rem, 4vw, 1.75rem);

  font-size: .9375rem;
  font-weight: 650;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--laton);
  background: var(--guinda);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 1px 0 rgb(255 255 255 / .35);

  transition: background-color .18s ease, transform .18s ease;
}
.salida:hover { background: #7a1740; }
.salida:active { transform: translateY(1px); }

.cuerpo--en {
  font-size: clamp(.75rem, .72rem + .15vw, .8125rem);
  color: rgb(107 74 51 / .85);
}
.cuerpo--en a { color: inherit; text-underline-offset: 2px; }

.pie {
  margin: 0;
  max-width: 40ch;
  font-size: .75rem;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: center;
  color: rgb(233 220 189 / .62);
}

/* ---------- Piso de calidad --------------------------------- */
:is(a):focus-visible {
  outline: 2px solid var(--filo);
  outline-offset: 3px;
  border-radius: 3px;
}
.placa a:focus-visible { outline-color: var(--tinta); }

@media (prefers-reduced-motion: reduce) {
  .placa { animation: none; }
  .salida { transition: none; }
}

@media print {
  body { background: #fff; background-image: none; }
  .placa { box-shadow: none; border: 1px solid #999; }
  .pie { color: #444; }
}

/* Bajo 26rem la línea del acta —ciudad y fecha con .16em de espaciado—
   llegaba a 2 px del filete interior de la placa. Menos espaciado y no
   menos cuerpo: encogerla la habría dejado ilegible al sol. */
@media (max-width: 26rem) {
  .acta { letter-spacing: .1em; }
}