/* Hoja exclusiva de Contacto (contacto.html). */

.hero--compact { padding-top: 1.5rem; padding-bottom: 1rem; }
.hero--compact .lead { max-width: 640px; }

.contact-layout { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .contact-layout { grid-template-columns: 1.6fr 1fr; align-items: start; } }

.contact-form-card { padding: 1.75rem; }
@media (min-width: 768px) { .contact-form-card { padding: 2.25rem; } }

.quote-form { display: grid; gap: 1.1rem; margin-top: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label { font-weight: 600; font-size: 0.9rem; color: #475569; }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  font: inherit; color: var(--color-text);
  background: #fff; border: 1px solid #cbd5e1; border-radius: var(--radius-control);
  padding: 0.75rem 1rem; width: 100%;
}
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--color-action); box-shadow: 0 0 0 3px #dbeafe; outline: none;
}
.field input:user-invalid { border-color: #ef4444; }
.field--check { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.field--check input { margin-top: 0.3rem; width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }
.field--check label { font-weight: 400; color: var(--color-text-muted); font-size: 0.9rem; }
.req { color: #ef4444; }
.form-status { min-height: 1.25rem; margin: 0; color: #b91c1c; font-size: 0.9rem; }

.contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 1.1rem; }
.contact-list li { color: var(--color-text-muted); }
.contact-list strong { display: block; color: var(--color-primary-dark); margin-bottom: 0.15rem; }
.contact-list a { color: var(--color-action); font-weight: 600; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }

.contact-aside__note { display: grid; gap: 0.75rem; }
.contact-aside__note p { margin: 0; color: var(--color-text-muted); }