/* ═══════════════════════════════════════════════════════════════
   X-ID · Rodapé institucional unificado  —  site-footer.css
   Banda escura, neutra e auto-contida. Idêntica em todos os mundos
   (não herda accent de página). Escopo total em .xsf pra não vazar.
   ═══════════════════════════════════════════════════════════════ */

.xsf {
  --xsf-bg:       oklch(0.135 0.012 270);
  --xsf-line:     oklch(1 0 0 / 0.08);
  --xsf-ink:      oklch(0.95 0.004 280);
  --xsf-text:     oklch(0.78 0.012 280);
  --xsf-mute:     oklch(0.60 0.012 280);
  --xsf-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  background: var(--xsf-bg);
  color: var(--xsf-text);
  margin-top: 72px;
  padding: 64px 56px 30px;
  border-top: 1px solid var(--xsf-line);
}

.xsf-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(230px, 1.1fr) 2.7fr;
  gap: 56px;
}

/* ── Marca ── */
.xsf-brand { color: var(--xsf-ink); }
.xsf-brand-logo { display: inline-flex; }
.xsf-brand-logo svg { color: var(--xsf-ink); }
.xsf-tagline {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--xsf-mute);
  max-width: 30ch;
  text-wrap: pretty;
}

/* ── Colunas de links ── */
.xsf-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.xsf-col { min-width: 0; }
.xsf-col-title {
  font-family: var(--xsf-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--xsf-mute);
  margin: 0 0 16px;
}
.xsf-col-links { display: flex; flex-direction: column; gap: 11px; }
.xsf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--xsf-text);
  text-decoration: none;
  transition: color 0.15s;
  width: fit-content;
  white-space: nowrap;
}
.xsf-link:hover { color: var(--xsf-ink); }

/* Rótulos longos (vagas) podem quebrar em 2 linhas — o link vira fluxo
   inline pra seta seguir a ÚLTIMA PALAVRA em vez de flutuar à direita */
.xsf-link-job { display: inline-block; white-space: normal; }

/* Links de vaga ganham uma seta discreta (CTA) */
.xsf-link-job .xsf-link-arrow {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  color: var(--xsf-mute);
  transform: translateX(0);
  transition: transform 0.15s, color 0.15s;
}
.xsf-link-job:hover .xsf-link-arrow {
  transform: translateX(3px);
  color: var(--xsf-ink);
}

/* ── Barra inferior ── */
.xsf-bottom {
  max-width: 1280px;
  margin: 52px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--xsf-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--xsf-mono);
  font-size: 12px;
  color: var(--xsf-mute);
}
.xsf-bottom-links { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.xsf-bottom-links a {
  color: var(--xsf-text);
  text-decoration: none;
  transition: color 0.15s;
}
.xsf-bottom-links a:hover { color: var(--xsf-ink); }

/* ═══════════════ Responsivo ═══════════════ */
@media (max-width: 1040px) {
  .xsf { padding: 52px 32px 28px; }
  .xsf-inner { grid-template-columns: 1fr; gap: 40px; }
  .xsf-cols { grid-template-columns: repeat(4, 1fr); gap: 32px 24px; }
}
@media (max-width: 720px) {
  .xsf { padding: 48px 24px 26px; margin-top: 48px; }
  .xsf-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .xsf-bottom { margin-top: 40px; }
}
@media (max-width: 440px) {
  .xsf-cols { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .xsf-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Quando a app simula mobile via .mobile-frame, aplica o mesmo compacto */
.mobile-frame .xsf { padding: 40px 18px 24px; margin-top: 40px; }
.mobile-frame .xsf-inner { grid-template-columns: 1fr; gap: 34px; }
.mobile-frame .xsf-cols { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
.mobile-frame .xsf-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }