/* ============================================================
   FOOTER — todas las páginas
   Cargado desde cada HTML con <link>. La marcación (<footer>…)
   sigue inlineada en cada página para que los crawlers la vean
   (mismo patrón que el header desde PR3). Ver STYLEGUIDE § 4.7.
   ============================================================ */

footer {
  background: var(--ink);
  padding: var(--space-xl) var(--gutter) 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--space-lg);
}

.footer-logo .gus {
  font-family: var(--cg);
  font-style: italic;
  font-weight: 300;
  font-size: 40px;
  color: var(--cream);
  line-height: 0.88;
}
.footer-logo .full {
  font-size: 9px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dust);
  margin-top: 8px;
}

.footer-tagline {
  font-size: 12px;
  color: rgba(245,242,236,0.3);
  margin-top: 18px;
  line-height: 1.7;
  max-width: 220px;
}

.footer-col-title {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dust);
  margin-bottom: 18px;
}
.footer-col-body {
  font-size: 13px;
  line-height: 2.1;
  color: rgba(245,242,236,0.42);
}
.footer-col-body a { transition: color 0.2s; }
.footer-col-body a:hover { color: var(--cream); }

/* Fila de copyright. Sin regla divisoria a propósito: la separación la hace
   el espacio, no una línea. Con el borde de 0.5px que había antes el pie se
   leía como dos bloques cortados en vez de uno solo, porque el borde quedaba
   pegado al contenido de arriba (footer tiene padding-bottom: 0) y con 52px
   de aire por debajo. */
.footer-bottom {
  background: var(--ink);
  padding: var(--space-md) var(--gutter);
  display: flex;
  justify-content: space-between;
}
.footer-copy {
  font-size: 10px;
  color: rgba(245,242,236,0.2);
  letter-spacing: 0.08em;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  footer {
    grid-template-columns: 1fr;
    padding: 44px var(--gutter-sm) 0;
  }
  .footer-bottom {
    padding: var(--space-sm) var(--gutter-sm) var(--space-md);
    flex-direction: column;
    gap: 6px;
  }
}