/* ==========================================================
   HEADER Y FOOTER
   Barra superior (logo y menú) y pie de página.
   ========================================================== */

.site-header {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  height: 88px;
  position: relative;
}
.header-inner {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 36px;
  height: 100%;
  display: grid;
}
.wordmark {
  color: var(--ink-deep);
  font-family: var(--font-display);
  align-items: center;
  gap: 10px;
  width: fit-content;
  font-size: 21px;
  font-weight: 700;
  display: inline-flex;
}
.wordmark svg {
  color: var(--primary);
}
.desktop-nav {
  gap: 29px;
  display: flex;
}
.desktop-nav a {
  color: var(--muted-foreground);
  font-size: 13px;
  transition: color 0.16s;
}
.desktop-nav a:hover,
.site-footer a:hover {
  color: var(--primary);
}
.header-contact {
  padding: 8px 16px;
  background: none;
  justify-self: end;
  height: 37px;
  font-size: 12px;
}
.mobile-menu,
.mobile-nav {
  display: none;
}
.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  justify-content: space-between;
  gap: 20px;
  padding-block: 27px;
  font-size: 10px;
  display: flex;
}
.site-footer a {
  align-items: center;
  gap: 7px;
  display: flex;
}
.footer-separator {
  color: var(--border);
  margin-inline: 12px;
}