.contact { background: var(--paper); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact__intro h2 { max-width: 14ch; }
.contact__intro .lead { margin-block-end: 28px; }

.contact__channels { display: grid; gap: 10px; }
.channel {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.channel:hover { border-color: var(--primary); }
.channel__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); }
.channel__icon svg { width: 20px; height: 20px; }
.channel--whatsapp .channel__icon { background: color-mix(in srgb, #25d366 18%, transparent); color: #0f8a43; }
.channel--facebook .channel__icon { background: color-mix(in srgb, #1877f2 15%, transparent); color: #1877f2; }
.channel--instagram .channel__icon { background: color-mix(in srgb, #e1306c 15%, transparent); color: #d62a66; }
html[data-theme="dark"] .channel--whatsapp .channel__icon { color: #4fe08a; }
html[data-theme="dark"] .channel--facebook .channel__icon { color: #6aa5ff; }
.channel__text { display: grid; min-width: 0; line-height: 1.35; }
.channel__text small { font-size: .8rem; color: var(--muted); }
.channel__text b { font-weight: 600; overflow-wrap: anywhere; }
.channel__go { margin-inline-start: auto; color: var(--muted); }
.channel__go svg { width: 18px; height: 18px; }
.channel:hover .channel__go { color: var(--primary); }

.contact__form {
    display: grid; gap: 16px; padding: clamp(22px, 3vw, 36px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.contact__form h3 { margin: 0; font-size: 1.4rem; }
.form-note { margin: -8px 0 4px; font-size: .92rem; color: var(--muted); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.form-actions .button { flex: 1 1 180px; }
.form-hint { margin: 0; font-size: .88rem; color: var(--muted); }
.form-hint a { color: var(--primary); font-weight: 600; }
.form-hint a:hover { text-decoration: underline; }
.form-status {
    margin: 0; padding: 10px 14px; font-size: .9rem; font-weight: 600;
    color: var(--danger); background: var(--danger-soft); border-radius: 10px;
}

@media (max-width: 860px) { .contact__grid { grid-template-columns: 1fr; } .contact__intro h2 { max-width: none; } }