/* Pie en grafito: CTA grande hacia /contacto/ y el logotipo a todo el ancho. */
.site-footer {
  position: relative; background: var(--night); color: var(--night-ink); overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) var(--gutter) 1.4rem;
}
.footer__cta { display: grid; gap: 1.4rem; max-width: var(--max); margin: 0 auto clamp(5rem, 9vw, 8rem); }
.footer__kicker { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--mono);
  font-size: var(--fs-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--night-mute); }
.footer__tick { width: 2.2rem; fill: var(--accent); }
.footer__title { font-size: var(--fs-display); font-weight: 500; letter-spacing: var(--track-display); line-height: 0.88;
  text-transform: lowercase; transition: color 0.4s; }
.footer__cta:hover .footer__title { color: #fff; }
.footer__lead { font-size: var(--fs-lead); color: var(--night-mute); max-width: 34ch; }
.footer__go { justify-self: start; margin-top: 0.6rem; }

.footer__grid {
  max-width: var(--max); margin-inline: auto; display: grid; gap: 2.4rem var(--gutter);
  grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 2.4rem; border-top: 1px solid #3a3a38;
}
.footer__h { font-family: var(--mono); font-size: 0.7rem; font-weight: 450; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--night-mute); margin-bottom: 0.9rem; }
.footer__h--gap { margin-top: 1.8rem; }
.footer__text, .footer__list { font-size: 0.95rem; line-height: 1.7; }
.footer__list a { transition: color 0.3s; }
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }

.footer__mark { max-width: var(--max); margin: clamp(4rem, 8vw, 7rem) auto 1.6rem; }
.footer__logo { width: 100%; height: auto; fill: #3b3b39; overflow: visible; }
.footer__accent { fill: var(--accent); transform-box: fill-box; transform-origin: 50% 50%; }
.footer__base {
  max-width: var(--max); margin-inline: auto; display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--night-mute);
}

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; align-items: flex-start; }
}