/* =====================================================================
   TDC Design System — componentes compartilhados
   Regra de entrada: só mora aqui o que ≥2 serviços usam; CSS de página
   fica no módulo consumidor (portal.css, home2026.css, login.css).
   Classes prefixadas (tdc-/btn-tdc/stripe-rail) para não colidir com
   Bootstrap nem com o lp.css legado. Requer tdc-tokens.css.
   Catálogo e convenções: docs/features/design-system.md
   ===================================================================== */

/* filete arco-íris de marca */
.stripe-rail {
  height: 4px;
  background: var(--stripe);
}

/* botões */
.btn-tdc,
.btn-tdc-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 10px;
  font: 600 14px/1.2 var(--sans);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-tdc {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}
.btn-tdc:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}
.btn-tdc-ghost {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-sm);
}
.btn-tdc-ghost:hover {
  border-color: var(--navy);
  color: var(--navy);
}

/* cartão padrão */
.tdc-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

/* selo/badge */
.tdc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font: 600 11.5px/1.6 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--tint);
  border: 1px solid var(--line);
  color: var(--muted);
}