/* Oficina Musical — estilos próprios */

html { scroll-behavior: smooth; }

/* Campos do formulário (reaproveitado com class="campo") */
.campo {
  width: 100%;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: #fff;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.campo::placeholder { color: rgba(255, 255, 255, 0.5); }
.campo:focus {
  border-color: #FF9800;
  box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.5);
}
.campo:invalid.tocado {
  border-color: rgba(248, 113, 113, 0.8);
}

/* Botão em carregamento */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(31, 31, 34, 0.35);
  border-top-color: #1F1F22;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Entrada suave */
.fade-up { animation: subir .7s ease both; }
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Foco visível para quem navega pelo teclado */
:focus-visible {
  outline: 2px solid #FF9800;
  outline-offset: 2px;
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none; }
  * { transition: none !important; }
}