/*
 * Camada de adoção da identidade visual (shared/identidade/identidade.css).
 *
 * Ao contrário de identidade.css (só variáveis, zero efeito visual), este
 * arquivo aplica essas variáveis de verdade a elementos concretos — carregar
 * ele numa página MUDA a aparência dela. Por isso é opcional e gradual: só
 * entra na página quando ela for de fato retrofitada para o visual novo,
 * nunca em bloco nas 15 telas de uma vez (CLAUDE.md, Hierarquia 0).
 *
 * Requer que a página também carregue identidade.css antes deste arquivo,
 * para as variáveis existirem.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-background);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  letter-spacing: -0.025em;
}

h1 { font-size: var(--text-h1); font-weight: 700; line-height: 1.08; }
h2 { font-size: var(--text-h2); font-weight: 700; line-height: 1.15; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.25; }

.inaut-container {
  width: min(calc(100% - 2.5rem), var(--container-width));
  margin-inline: auto;
}

.inaut-section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.inaut-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.inaut-button {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.375rem;
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.inaut-button:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.inaut-button--primary {
  color: var(--inaut-white);
  background: var(--color-action);
}

.inaut-button--primary:hover { background: var(--color-action-hover); }

.inaut-button--secondary {
  color: var(--color-primary);
  background: transparent;
  border-color: var(--color-primary);
}

.inaut-button--secondary:hover {
  color: var(--inaut-white);
  background: var(--color-primary);
}

@media (max-width: 40rem) {
  .inaut-container { width: min(calc(100% - 2.5rem), var(--container-width)); }
}

/*
 * Página de documento (política de privacidade, termos de uso): texto
 * corrido para leitura, não destaque de marketing. A escala "Hero" (H1 até
 * 56px) foi pensada para o título de impacto da landing — usada aqui, o
 * título de uma página de texto fica desproporcional ao restante do
 * conteúdo. Estas regras reduzem só os títulos, dentro de `.inaut-documento`.
 */
.inaut-documento h1 { font-size: var(--text-h2); }
.inaut-documento h2 { font-size: var(--text-h3); margin-top: var(--space-12); }
.inaut-documento h3 { font-size: var(--text-lg); }