/* Página de contacto: se suma a styles.css (reutiliza hero, collage, services y why) */
.services .cards p { font-size: 14px; font-weight: 400; }
.services .cards a:hover { color: var(--gold); }

.why { align-items: start; padding-bottom: 64px; border-top: 1px dotted var(--gold); }
.why-text { padding-top: 8px; }
.why ol { margin-bottom: 0; }

/* Formulario */
.form {
  display: grid; gap: 20px;
  padding: 32px 34px;
  background: rgba(0, 0, 0, .1);
  border: 1px solid rgba(196, 139, 74, .55);
  border-radius: 28px;
}
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-size: 12px; font-weight: 400; color: var(--cream); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px;
  background: rgba(0, 0, 0, .14);
  border: 1px solid rgba(196, 139, 74, .4);
  border-radius: 12px;
  color: var(--text); font: 400 14px/1.4 var(--font-body);
  transition: border-color .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select option { background: var(--bg); color: var(--text); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: rgba(0, 0, 0, .22); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #e0896b; }
.field .error { font-size: 11px; color: #f0a98f; }

.check { display: flex; align-items: flex-start; gap: 12px; font-size: 12px; cursor: pointer; }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--gold); }

.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.form .btn { cursor: pointer; color: var(--text); font-family: var(--font-body); }
.form .btn:disabled { opacity: .55; cursor: wait; }
.status { font-size: 13px; font-weight: 400; }
.status.ok { color: #b9d9a8; }
.status.fail { color: #f0a98f; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; }
  .form { padding: 24px 20px; }
}
