/* Campos — espelham o componente Input do design system Nuvon Maker:
   altura 44, raio sm, fundo surface-strong, borda que acende em laranja no
   foco com anel de 3 px, ícone à esquerda que acompanha o foco. */

.campo { display: flex; flex-direction: column; gap: var(--nv-space-2); }

.campo__rotulo {
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  color: var(--nv-text-secondary);
}
.campo__rotulo .obrigatorio { color: var(--nv-orange-500); }

.campo__caixa {
  display: flex;
  align-items: center;
  gap: var(--nv-space-3);
  height: var(--nv-control-height);
  padding: 0 14px;
  background: var(--nv-surface-strong);
  border: 1px solid var(--nv-border-input);
  border-radius: var(--nv-radius-sm);
  transition: border-color var(--nv-duration-fast) var(--nv-ease-out),
              box-shadow var(--nv-duration-fast) var(--nv-ease-out);
}
.campo__caixa:hover { border-color: rgba(200, 189, 177, .28); }
.campo__caixa:focus-within {
  border-color: var(--nv-orange-500);
  box-shadow: var(--nv-shadow-focus);
}
.campo__caixa svg { flex: none; color: var(--nv-text-muted); transition: color var(--nv-duration-fast); }
.campo__caixa:focus-within svg { color: var(--nv-orange-500); }

.campo__caixa input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-base);
  color: var(--nv-text-primary);
}
.campo__caixa input::placeholder { color: var(--nv-text-muted); }

.campo__dica { font-size: var(--nv-text-xs); color: var(--nv-text-muted); }
.campo__erro { font-size: var(--nv-text-xs); color: var(--nv-danger); }

.campo[data-erro="sim"] .campo__caixa {
  border-color: var(--nv-danger);
  box-shadow: 0 0 0 3px rgba(255, 95, 95, .18);
}

/* Ligação em texto — roxo por omissão, laranja quando é a saída secundária. */
.ligacao {
  font-size: var(--nv-text-sm);
  font-weight: var(--nv-weight-medium);
  color: var(--nv-purple-300);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: color var(--nv-duration-fast) var(--nv-ease-out);
}
.ligacao:hover { color: var(--nv-orange-300); }
.ligacao--laranja { color: var(--nv-orange-300); }
.ligacao--laranja:hover { color: var(--nv-orange-500); }

/* Fundos de página: aurora + grelha, com a grelha a desvanecer aos 74%. */
.fundo-aurora {
  position: relative;
  background: var(--nv-bg-aurora);
}
.fundo-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--nv-grid-overlay);
  background-size: 42px 42px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 74%);
  mask-image: linear-gradient(to bottom, #000, transparent 74%);
  pointer-events: none;
}