:root {

  /* Cores */

  --cc-bg: #050509;
  --cc-surface: #120913;
  --cc-surface-2: #1d0d18;
  --cc-border: #2a1a25;

  --cc-text: #ffffff;
  --cc-text-muted: #b8aeb6;

  --cc-primary: #d83b6a;
  --cc-primary-hover: #f04b7c;
  --cc-primary-dark: #8f2448;

  /* Tipografia */

  --cc-font:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  /* Bordas */

  --cc-radius: 18px;
  --cc-radius-lg: 26px;

  /* Espaçamentos */

  --cc-space-xs: 8px;
  --cc-space-sm: 16px;
  --cc-space: 24px;
  --cc-space-lg: 40px;

  /* Outros */

  --cc-shadow: 0 8px 30px rgba(0, 0, 0, .35);

  --cc-transition: .25s ease;
}

/* =========================================================
   BASE
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {

  background: var(--cc-bg);
  color: var(--cc-text);

  font-family: var(--cc-font);

  line-height: 1.6;

}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

/* =========================================================
   FORMULÁRIOS ATUAIS
========================================================= */

.conteudos-cadastro-box {

  max-width: 520px;
  margin: 80px auto;
  padding: 42px;

  border-radius: var(--cc-radius);

  background: var(--cc-surface);

  color: var(--cc-text);

  box-shadow: var(--cc-shadow);

}

.conteudos-cadastro-box h2 {

  color: var(--cc-text);
  margin-bottom: 10px;

}

.conteudos-cadastro-box p {

  color: var(--cc-text-muted);
  margin-bottom: 18px;

}

.conteudos-cadastro-box label {

  color: var(--cc-text);

  font-weight: 600;

}

.conteudos-cadastro-box input {

  width: 100%;

  padding: 15px;

  margin-top: 6px;

  border-radius: 12px;

  border: 1px solid var(--cc-border);

  background: var(--cc-surface-2);

  color: var(--cc-text);

  transition: var(--cc-transition);

}

.conteudos-cadastro-box input:focus {

  outline: none;

  border-color: var(--cc-primary);

}

.conteudos-cadastro-btn {

  width: 100%;

  padding: 18px;

  border: none;

  border-radius: 999px;

  background: var(--cc-primary);

  color: #fff;

  font-size: 17px;

  font-weight: 700;

  cursor: pointer;

  transition: var(--cc-transition);

}

.conteudos-cadastro-btn:hover {

  background: var(--cc-primary-hover);

}