/* =====================================================================
   tdc_html — peças do site que já usam o design system (tdc-tokens.css +
   tdc-components.css do mod_kernel, ADR 0012).
   Carregado DEPOIS do lp.css no base2026.html: as classes daqui vencem os
   seletores de elemento do legado (footer { color:white } etc.).
   O lp.css continua responsável pelas landing pages antigas — não mexer nele.
   ===================================================================== */

/* ------------------------------------------------- utilitários de página */
/* Respiro abaixo da navbar fixa nas páginas simples (agradecimento, erro de
   inscrição, lista de LPs). Antes era um <style> com `#content` em cada uma. */
.tdc-page { margin-top: 80px; }
.tdc-page--center { text-align: center; }

/* botão "voltar ao topo" — posição e cor (era <style> inline no base2026) */
.button-up {
  bottom: 32px;
  right: 32px;
  height: 40px;
  width: 40px;
  background-color: var(--accent);
  color: #fff;
}
.button-up:hover { background-color: var(--accent-strong); }

/* ------------------------------------------------------ página de erro 404 */
.tdc-404 { font-family: var(--sans); padding-bottom: 60px; }
.tdc-404 .eyebrow {
  font: 600 12px/1 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.tdc-404 h1 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 12px;
}
.tdc-404 .lead { color: var(--body); font-size: 17px; font-weight: 400; margin: 0 0 28px; }
.tdc-404 .acoes { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------- seção institucional "sobre o TDC" */
/* Clara e na tipografia do design system. Os seletores #sc_sobre_tdc do lp.css
   (foto de fundo, texto branco, Impact nos títulos) ficam para as LPs antigas —
   por isso aqui o id vem junto da classe, para vencer a especificidade. */
#sc_sobre_tdc.tdc-about {
  background: var(--bg);
  background-image: none;
  color: var(--body);
  font-family: var(--sans);
  border-top: 1px solid var(--line);
}
#sc_sobre_tdc.tdc-about::before { content: none; }
#sc_sobre_tdc.tdc-about > .container { padding: 64px 24px; }
#sc_sobre_tdc.tdc-about h2 {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 34px);
  letter-spacing: -.02em;
  color: var(--ink);
  text-align: center;
  margin: 0 0 36px;
}
#sc_sobre_tdc.tdc-about p {
  font-family: var(--sans);
  color: var(--body);
  font-size: 16px;
  text-align: left;
  margin: 0 0 14px;
  max-width: 46ch;
}
#sc_sobre_tdc.tdc-about p.lead {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
#sc_sobre_tdc.tdc-about .ratio {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
@media (max-width: 767.98px) {
  #sc_sobre_tdc.tdc-about > .container { padding: 44px 24px; }
  #sc_sobre_tdc.tdc-about p { max-width: none; margin-bottom: 16px; }
  #sc_sobre_tdc.tdc-about .row > div:first-child { margin-bottom: 26px; }
}

/* --------------------------------------------------------------- rodapé */
.tdc-footer {
  background: var(--surface);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 14px;
  padding: 0;
}
.tdc-footer .container { padding-top: 42px; padding-bottom: 34px; }

.tdc-footer h2 {
  font: 700 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.tdc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.tdc-footer a { color: var(--navy); text-decoration: none; transition: color .15s ease; }
.tdc-footer a:hover, .tdc-footer a:focus-visible { color: var(--accent); text-decoration: underline; }

.tdc-footer .fbrand { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.tdc-footer .fbrand img { height: 46px; width: auto; }
.tdc-footer .fbrand p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.7; }

.tdc-footer .legal {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
}

/* coluna da direita alinha à direita: encosta na borda do container, em vez de
   deixar um vão entre o texto e o fim da coluna */
.tdc-footer .col-right { text-align: right; }
.tdc-footer .col-right ul { align-items: flex-end; }

@media (max-width: 575.98px) {
  .tdc-footer { text-align: center; }
  .tdc-footer ul { align-items: center; }
  .tdc-footer .col-right { text-align: center; }
  .tdc-footer .col-right ul { align-items: center; }
}