/*
 * Folha de estilo de emergência para navegadores antigos (Internet Explorer,
 * Edge legado e similares) que não entendem CSS moderno (variáveis, oklch,
 * @layer, Tailwind v4).
 *
 * IMPORTANTE: todas as regras são escopadas em `.legacy`, classe adicionada ao
 * <html> apenas quando o navegador não suporta CSS moderno. Assim navegadores
 * atuais nunca são afetados por estes estilos.
 */
.legacy body {
  margin: 0;
  background: #ffffff;
  color: #1b1626;
  font-family: "DM Sans", Segoe UI, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.legacy a {
  color: #c2185b;
  text-decoration: none;
}

.legacy a:hover {
  text-decoration: underline;
}

.legacy h1,
.legacy h2,
.legacy h3,
.legacy h4 {
  font-family: "Space Grotesk", Segoe UI, Arial, sans-serif;
  color: #1b1626;
  margin: 0 0 12px;
}

.legacy main,
.legacy header > div,
.legacy footer > div {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px;
}

.legacy header {
  border-bottom: 1px solid #e6e2ee;
}

.legacy header a {
  margin-right: 16px;
  display: inline-block;
}

.legacy button,
.legacy input,
.legacy select,
.legacy textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid #d8d3e2;
  border-radius: 8px;
  background: #ffffff;
  color: #1b1626;
}

.legacy button {
  background: #c2185b;
  color: #ffffff;
  border-color: #c2185b;
  cursor: pointer;
}

.legacy img {
  max-width: 100%;
}

.legacy footer {
  border-top: 1px solid #e6e2ee;
  margin-top: 32px;
  color: #5c5470;
}