:root {
  --azul-950: #081a33;
  --azul-900: #0d2748;
  --azul-800: #163a63;
  --azul-700: #23537f;
  --azul-200: #cbd9e8;
  --azul-100: #eaf1f8;
  --azul-050: #f5f8fc;
  --amarelo-500: #f4cf55;
  --amarelo-300: #ffe38a;
  --amarelo-100: #fff6d4;
  --branco: #ffffff;
  --fundo: #fbfcfe;
  --texto: #132033;
  --texto-suave: #607087;
  --linha: #dce5ef;
  --perigo: #a43a3a;
  --sucesso: #267250;
  --fonte: "Montserrat", Arial, Helvetica, sans-serif;
  --peso-corpo: 500;
  --peso-destaque: 700;
  --peso-titulo: 800;
  --titulo-1: clamp(2.8rem, 7vw, 5.4rem);
  --titulo-2: clamp(2rem, 4vw, 3.2rem);
  --titulo-3: 1.22rem;
  --texto-grande: 1.08rem;
  --texto-base: 1rem;
  --texto-pequeno: .86rem;
  --texto-micro: .74rem;
  --raio-grande: 24px;
  --raio-medio: 16px;
  --raio-pequeno: 11px;
  --largura: 1180px;
  --sombra: 0 20px 60px rgba(8, 26, 51, .13);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--texto-base);
  font-weight: var(--peso-corpo);
  line-height: 1.65;
}
body.modal-aberto { overflow: hidden }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }
button, input, textarea, select { font: inherit }
button { cursor: pointer }

.conteiner { width: min(var(--largura), calc(100% - 40px)); margin-inline: auto }
.oculto, [hidden] { display: none !important }

.rotulo {
  color: var(--azul-700);
  font-size: var(--texto-micro);
  font-weight: var(--peso-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.titulo-1,
.titulo-2,
.titulo-3,
h1,
h2,
h3 {
  color: inherit;
  font-family: var(--fonte);
  font-weight: var(--peso-titulo);
  letter-spacing: -.035em;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: .76rem 1rem;
  font-weight: var(--peso-destaque);
  transition: transform .18s ease, background .18s ease, border-color .18s ease
}
.botao:hover { transform: translateY(-1px) }
.botao-primario { background: var(--azul-900); color: var(--branco) }
.botao-primario:hover { background: var(--azul-800) }
.botao-amarelo { background: var(--amarelo-500); color: var(--azul-950) }
.botao-amarelo:hover { background: var(--amarelo-300) }
.botao-claro { background: var(--branco); color: var(--azul-900) }
.botao-linha { background: transparent; border-color: var(--linha); color: var(--azul-900) }
.botao-perigo { background: #fff1f1; color: var(--perigo) }

.mensagem { min-height: 1.3em; margin-top: .7rem; font-size: var(--texto-pequeno) }
.mensagem.erro { color: var(--perigo) }
.mensagem.sucesso { color: var(--sucesso) }

.campo { display: grid; gap: .42rem }
.campo label { color: #34455c; font-size: var(--texto-pequeno); font-weight: var(--peso-destaque) }
.campo small { color: var(--texto-suave); font-size: .76rem }
.campo input,
.campo textarea,
.campo select {
  width: 100%;
  border: 1px solid #cfdbe7;
  border-radius: var(--raio-pequeno);
  background: var(--branco);
  color: var(--texto);
  outline: none;
  padding: .78rem .86rem;
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--azul-700);
  box-shadow: 0 0 0 3px rgba(35, 83, 127, .12)
}
.campo textarea { min-height: 130px; resize: vertical }

.estado-vazio {
  border: 1px dashed var(--azul-200);
  border-radius: var(--raio-medio);
  background: var(--branco);
  color: var(--texto-suave);
  padding: 1rem
}

@media (max-width: 640px) {
  .conteiner { width: min(100% - 24px, var(--largura)) }
  .botao { width: 100% }
}