/* ── A casca partilhada ──────────────────────────────────────────────
   Barra em cima, rodapé-mapa em baixo. O corpo de cada página não é
   tocado. Tudo com prefixo .dsc- e variáveis --dsc-* para não colidir
   com o CSS que cada página já tem. */

/* Os nomes da casca são um apelido dos tokens do sistema (tokens.css).
   Existem só para o selector de paletas do protótipo poder sobrepor-se
   sem tocar na fonte única. Em produção, isto é uma indirecção inócua. */
:root {
  --dsc-bg: var(--ds-void, #08090c);
  --dsc-panel: var(--ds-sf, #101319);
  --dsc-panel-2: var(--ds-sf-2, #171b23);
  --dsc-line: var(--ds-line, #252b36);
  --dsc-brand: var(--ds-brand, #e08d3c);
  --dsc-on-brand: var(--ds-on-brand, #140d05);
  --dsc-live: var(--ds-live, #7fb8d9);
  --dsc-ink: var(--ds-ink, #e8e6e1);
  --dsc-mute: var(--ds-mute, #8a8f9a);
  --dsc-faint: var(--ds-faint, #666c77);
  --dsc-mono: var(--ds-mono, "JetBrains Mono", ui-monospace, monospace);
  --dsc-sans: var(--ds-sans, Inter, ui-sans-serif, system-ui, sans-serif);
}

/* ── Barra ─────────────────────────────────────────────────────────── */
.dsc-bar {
  position: sticky;
  top: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  height: 52px;
  background: rgba(13, 6, 32, 0.88);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--dsc-line);
  font-family: var(--dsc-sans);
  /* A casca é a mesma casa em páginas que não são iguais entre si: o Surf
     Drops corre a 14px em monoespaçada, o hub a 16px em Inter. Sem uma
     medida própria, tudo o que aqui dentro não declare tamanho herda o da
     página e a barra encolhe ao mudar de sítio. Fixa-se aqui — e no rodapé
     — para a casca ter o mesmo tamanho em todo o lado. */
  font-size: 16px;
  line-height: 1.5;
}

/* A marca em laranja. É a única excepção à regra do cobre — e só se
   aguenta porque um logótipo não é um controlo: está sempre no mesmo
   canto, não se carrega nele à espera de avançar, e o olho aprende-o
   como assinatura na primeira página. Se o laranja começar a aparecer
   em mais sítios, a excepção deixa de o ser e o CTA perde o isolamento
   que o faz funcionar. */
.dsc-wm {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ds-cta, #e08d3c);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: -0.01em;
  transition: color 0.12s;
}
.dsc-wm:hover { color: var(--ds-cta-alta, #f0a458); text-decoration: none; }
.dsc-wm i { font-style: normal; font-size: 16px; }

.dsc-links { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.dsc-links a {
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dsc-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s;
}
.dsc-links a:hover { color: var(--dsc-ink); background: var(--dsc-panel-2); text-decoration: none; }
.dsc-links a[aria-current="page"] { color: var(--dsc-ink); background: var(--dsc-panel-2); }

.dsc-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--dsc-line);
  background: var(--dsc-panel);
  color: var(--dsc-ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.12s;
}
.dsc-id:hover { border-color: var(--dsc-brand); text-decoration: none; }
.dsc-id.dsc-on { border-color: var(--dsc-brand); color: var(--dsc-brand); }
/* Mesmo aspecto do perfil dentro do Radar — quadrado de cantos redondos e não
   círculo, com moldura — para a mesma pessoa se reconhecer igual em qualquer
   divisão da casa. */
.dsc-id .dsc-av {
  width: 24px; height: 24px; border-radius: 7px;
  background: linear-gradient(135deg, var(--dsc-brand), #4c1d95);
  border: 1px solid var(--dsc-line);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; flex: 0 0 auto;
}
.dsc-id .dsc-av-img { object-fit: cover; background: var(--dsc-panel-2); }

/* botão do menu — só existe em ecrãs estreitos */
.dsc-burger {
  display: none;
  border: 1px solid var(--dsc-line);
  background: var(--dsc-panel);
  color: var(--dsc-ink);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

/* ── Rodapé-mapa ───────────────────────────────────────────────────── */
.dsc-foot {
  font-family: var(--dsc-sans);
  font-size: 16px;
  line-height: 1.5;
  background: var(--dsc-bg);
  border-top: 1px solid var(--dsc-line);
  padding: 40px 20px 28px;
  font-family: var(--dsc-sans);
  color: var(--dsc-mute);
}
.dsc-foot-in { max-width: 1100px; margin: 0 auto; }
.dsc-map {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 26px 20px;
}
.dsc-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dsc-col b {
  font-family: var(--dsc-mono);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dsc-faint);
  font-weight: 500;
}
.dsc-col a { font-size: 13.5px; color: var(--dsc-mute); text-decoration: none; }
.dsc-col a:hover { color: var(--dsc-ink); text-decoration: none; }
.dsc-col a .dsc-ext { color: var(--dsc-faint); }

.dsc-foot-fim {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin-top: 30px; padding-top: 18px;
  border-top: 1px solid var(--dsc-line);
  font-size: 12px; color: var(--dsc-faint);
}
.dsc-foot-fim a { color: var(--dsc-faint); text-decoration: none; }
.dsc-foot-fim a:hover { color: var(--dsc-mute); }

/* ── Chip do protótipo (SÓ localhost) ──────────────────────────────── */
.dsc-proto {
  position: fixed; right: 14px; bottom: 14px; z-index: 9500;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(13, 6, 32, 0.94);
  border: 1px solid var(--dsc-brand);
  font-family: var(--dsc-mono); font-size: 11px; color: var(--dsc-mute);
  backdrop-filter: blur(8px);
}
.dsc-proto button {
  border: 1px solid var(--dsc-line); background: var(--dsc-panel-2);
  color: var(--dsc-ink); border-radius: 999px; padding: 4px 10px;
  font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.dsc-proto button:hover { border-color: var(--dsc-brand); }

/* ── Estreito ──────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .dsc-bar { gap: 10px; padding: 0 14px; }
  .dsc-burger { display: inline-block; margin-left: auto; }
  /* Fechado/aberto por `display`, não por opacidade: uma transição de
     opacidade disparada pela própria media query fica presa no valor de
     desktop e os links nunca chegam a desaparecer. */
  .dsc-links {
    display: none;
    position: fixed; inset: 52px 0 auto 0; margin: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 14px 16px;
    background: var(--dsc-bg);
    border-bottom: 1px solid var(--dsc-line);
    box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
  }
  .dsc-links.dsc-aberto { display: flex; }
  .dsc-links a { padding: 11px 12px; font-size: 15px; }
  .dsc-id { padding: 6px 11px; font-size: 12px; }
}

/* ── O CTA reservado ────────────────────────────────────────────────
   Uma cor que mais nada usa, para o botão nunca competir com a página.
   Ver a nota longa em tokens.css (--ds-cta).

   O !important é preciso e é deliberado: várias páginas escrevem
   `color: #1a0a2e !important` nos próprios botões, e sem isto o texto
   ficaria com a cor antiga por cima do fundo novo. Esta folha carrega
   depois do <style> de cada página, por isso no resto ganha sozinha.

   REGRA: esta lista só cresce com botões PRIMÁRIOS e selos de valor.
   Nada decorativo entra aqui. */
.btn-primary,
.plan-btn,
.solid,
.primary,
.rd-btn.p,
.bi-btn,
.ch-btn:not(.ch-btn-off) {
  background: var(--ds-cta) !important;
  background-image: none !important;
  border-color: var(--ds-cta) !important;
  color: var(--ds-on-cta) !important;
}

.btn-primary:hover,
.plan-btn:hover,
.solid:hover,
.primary:hover,
.rd-btn.p:hover,
.bi-btn:hover,
.ch-btn:not(.ch-btn-off):hover {
  background: var(--ds-cta-alta) !important;
  border-color: var(--ds-cta-alta) !important;
}

.btn-primary:focus-visible,
.plan-btn:focus-visible,
.solid:focus-visible,
.primary:focus-visible,
.rd-btn.p:focus-visible,
.bi-btn:focus-visible,
.ch-btn:focus-visible {
  outline: 2px solid var(--ds-cta-alta);
  outline-offset: 3px;
}

/* Selo de valor: a mesma cor, porque diz a mesma coisa — "é por aqui". */
.rd-via.destaque { border-color: var(--ds-cta) !important; }
.rd-via.destaque .tag { color: var(--ds-cta) !important; }

/* Sair: so aparece com sessao e so no modo `data-casca="barra"` (a app de
   membros). Discreto de proposito - e a saida, nao um destino. */
.dsc-sair {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 1px solid var(--dsc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--dsc-mute);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.dsc-sair:hover { color: var(--dsc-ink); border-color: var(--dsc-brand); }