/* ═══════════════════════════════════════════════════════════════════════════
   Material gráfico propio.

   No hay fotografía del club, y no vamos a inventarla. La decisión es sostener
   los sitios con material construido para este programa: grano de papel, tramas
   de impresión y figuras dibujadas acá. Lo que hace que un sitio parezca hecho
   por una máquina no es la falta de fotos: es la superficie plana, el color
   liso y la ausencia de cualquier objeto que sólo pueda existir en ESTE
   proyecto. Eso es lo que se corrige acá.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Grano ────────────────────────────────────────────────────────────────
   Ruido de una capa, muy tenue, fijo sobre todo el documento. Es lo que hace
   que un fondo deje de leerse como un rectángulo de color y empiece a
   leerse como una superficie. */
.grano::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)' opacity='.42'/%3E%3C/svg%3E");
}
.grano > * { position: relative; z-index: 2; }

/* ── Escudo ───────────────────────────────────────────────────────────────
   Monograma provisorio, construido con la forma de un escudo deportivo y no
   con una letra dentro de un cuadrado. Va reemplazado por el escudo real del
   club en cuanto lo tengamos; hasta entonces, al menos tiene forma de escudo. */
.escudo { display: block; flex: none; }
.escudo__cuerpo { fill: var(--rojo); }
.escudo__letra { fill: #fff; font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
.escudo__banda { fill: rgba(255,255,255,.9); }

/* ── Sello ────────────────────────────────────────────────────────────────
   Como el de un expediente: borde doble, apenas rotado, tinta gastada. */
.sello-tinta {
  display: inline-block;
  padding: 7px 14px 6px;
  border: 2px solid var(--rojo);
  outline: 1px solid var(--rojo);
  outline-offset: 2px;
  color: var(--rojo);
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-1.6deg);
  opacity: .88;
}

/* ── Tramas ───────────────────────────────────────────────────────────────
   Superficies con textura de impresión, no colores lisos. */
.trama-pauta {
  background-image: repeating-linear-gradient(transparent 0 26px, rgba(23,21,15,.055) 26px 27px);
}
.trama-cuadricula {
  background-image:
    repeating-linear-gradient(to right, rgba(23,21,15,.05) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(23,21,15,.05) 0 1px, transparent 1px 24px);
}
.trama-diagonal {
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 2px, transparent 2px 9px);
}

/* ── Figura ───────────────────────────────────────────────────────────────
   Contenedor de una ilustración con epígrafe, como en una publicación. */
.figura { margin: 26px 0; }
.figura svg { width: 100%; height: auto; display: block; }
.figura figcaption {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid currentColor;
  font-size: 12px; line-height: 1.5; opacity: .62;
}
.figura figcaption b { font-weight: 700; opacity: 1; }