/* Contact Page */
.contact-hero { padding: 140px 0 60px; text-align: center; background: var(--gray-50); }
.contact-hero h1 { font-size: clamp(2rem, 4vw, 2.75rem); max-width: 600px; margin: 0 auto 14px; }
.contact-hero p { font-size: 1.05rem; color: var(--gray-500); max-width: 500px; margin: 0 auto; }

.contact-main { padding: 60px 0 var(--section-pad); }
.contact-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: stretch; }

.contact-form-card { padding: 40px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
.contact-form-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.contact-form-card > p { font-size: 0.9rem; color: var(--gray-500); margin-bottom: 28px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.82rem; font-weight: 600; color: var(--gray-700); }
.form-group input, .form-group select, .form-group textarea {
    padding: 13px 16px;
    border: 1.5px solid var(--gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--gray-900);
    background: var(--gray-50);
    transition: all var(--duration) var(--ease);
}
.form-group select { color: var(--gray-900); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.form-group select option { color: var(--gray-900); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-100);
    background: var(--white);
}
.form-group textarea { resize: vertical; min-height: 100px; }
.form-note { font-size: 0.78rem; color: var(--gray-400); text-align: center; margin-top: 4px; }

.contact-sidebar { display: flex; flex-direction: column; gap: 16px; justify-content: space-between; }
.sidebar-card { padding: 30px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-lg); transition: all var(--duration) var(--ease); }
.sidebar-card:hover { border-color: var(--primary-200); box-shadow: var(--shadow-sm); }
.sidebar-card h3 { font-size: 1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
.sidebar-card h3 svg { flex-shrink: 0; }
.sidebar-card p { font-size: 0.88rem; color: var(--gray-600); line-height: 1.6; }
.sidebar-card a { color: var(--primary); font-weight: 500; }
.sidebar-card a:hover { text-decoration: underline; }
.sidebar-whatsapp { background: linear-gradient(135deg, rgba(37,211,102,0.05), rgba(37,211,102,0.02)); border-color: rgba(37,211,102,0.2); }
.sidebar-guarantee { background: linear-gradient(135deg, rgba(99,102,241,0.03), var(--white)); border-color: var(--primary-200); }
.sidebar-guarantee ul { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sidebar-guarantee li { font-size: 0.85rem; color: var(--gray-600); }
.text-sm { font-size: 0.78rem !important; color: var(--gray-400) !important; margin-top: 4px; }

.sidebar-whatsapp { background: linear-gradient(135deg, rgba(37,211,102,0.05), rgba(37,211,102,0.1)); border-color: rgba(37,211,102,0.2); }
.sidebar-whatsapp .btn { margin-top: 12px; width: 100%; }

.sidebar-guarantee ul { margin-top: 8px; }
.sidebar-guarantee li { font-size: 0.85rem; color: var(--gray-600); padding: 6px 0; padding-left: 4px; }
.sidebar-guarantee li::before { content: ''; }

@media (max-width: 768px) {
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form-card { padding: 24px; }
    .form-row { grid-template-columns: 1fr; }
}

/* Form Alerts */
.form-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 20px; border-radius: var(--radius); margin-bottom: 24px; }
.form-alert svg { flex-shrink: 0; margin-top: 2px; }
.form-alert p { font-size: 0.88rem; line-height: 1.5; margin: 0; }
.form-alert-success { background: #f0fdf4; border: 1px solid rgba(16,185,129,0.2); color: #065f46; }
.form-alert-error { background: #fef2f2; border: 1px solid rgba(239,68,68,0.2); color: #991b1b; }