/* ===== Capybara Peluche — Contact page ===== */
/* Page-specific rules only. Shared tokens/reset/header/footer/buttons live in styles.css. */

.contact { max-width: var(--container); margin: 0 auto; padding: 24px 24px 96px; display: grid; gap: 40px; }
.contact__info h2 { font-size: 18px; margin-bottom: 4px; }
.contact__list { display: flex; flex-direction: column; gap: 14px; margin: 20px 0 16px; }
.contact__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text-muted); }
.contact__list svg { color: var(--color-primary-dark); flex-shrink: 0; }
.contact__hours { color: var(--color-text-muted); font-size: 14px; margin-bottom: 20px; }

.contact__form { display: flex; flex-direction: column; gap: 16px; background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: 28px; }
.contact__form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-text-muted); }
.contact__form input, .contact__form textarea { padding: 12px 14px; border-radius: var(--radius-sm); border: 2px solid var(--color-border); font-size: 14px; font-family: var(--font-body); color: var(--color-text); resize: vertical; }
.contact__note { font-size: 13px; font-weight: 700; color: var(--color-primary-dark); min-height: 18px; }

@media (min-width: 760px) {
  .contact { grid-template-columns: 1fr 1.3fr; }
}