/* contact.php — hero, tarjetas de contacto y formulario */

.contact-container { max-width: 1000px; margin: 0 auto; padding: var(--sp-12) var(--sp-9) 80px; }
.contact-hero { text-align: center; margin-bottom: var(--sp-12); }
.contact-badge {
    display: inline-block; font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase;
    letter-spacing: .1em; color: var(--brand-accent, #3ddbd9);
    background: rgba(61,219,217,.1); border: 1px solid rgba(61,219,217,.25);
    border-radius: var(--radius-xl); padding: 5px 12px; margin-bottom: 18px;
}
.contact-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--fw-extrabold); color: var(--text-white); margin: 0 0 var(--sp-6); }
.contact-title span { color: var(--brand-accent, #3ddbd9); }
.contact-subtitle { color: var(--text-gray); font-size: var(--fs-xl); line-height: 1.6; max-width: 540px; margin: 0 auto; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-8); margin-bottom: 56px; }
.contact-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 28px; text-align: center; transition: border-color var(--t-fast), transform var(--t-fast);
    text-decoration: none; display: block;
}
a.contact-card:hover { border-color: var(--brand-accent, #3ddbd9); transform: translateY(-2px); }
.contact-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: var(--radius-lg);
    background: rgba(61,219,217,.1); color: var(--brand-accent, #3ddbd9); margin-bottom: var(--sp-7);
}
.contact-card h3 { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--text-white); margin: 0 0 var(--sp-2); }
.contact-card p { font-size: var(--fs-md); color: var(--text-gray); line-height: 1.5; margin: 0; }
.contact-card .contact-value { color: var(--brand-accent, #3ddbd9); font-weight: var(--fw-semibold); margin-top: var(--sp-3); display: block; }

.contact-form-wrap {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 36px; max-width: 640px; margin: 0 auto;
}
.contact-form-wrap h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-white); margin: 0 0 var(--sp-2); }
.contact-form-wrap > p { color: var(--text-gray); font-size: var(--fs-md); margin: 0 0 var(--sp-9); }
.contact-field { margin-bottom: 18px; }
.contact-field label { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-white); margin-bottom: 7px; }
.contact-field input, .contact-field textarea {
    width: 100%; box-sizing: border-box; background: var(--bg-secondary);
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5) var(--sp-6);
    color: var(--text-white); font-size: var(--fs-md); font-family: inherit; transition: border-color var(--t-fast);
}
.contact-field input:focus, .contact-field textarea:focus { outline: none; border-color: var(--brand-accent, #3ddbd9); }
.contact-field textarea { resize: vertical; min-height: 120px; }
.btn-contact-send {
    display: inline-flex; align-items: center; gap: var(--sp-3); background: var(--brand-accent, #3ddbd9);
    color: #06222b; font-weight: var(--fw-bold); font-size: var(--fs-md); padding: 13px 26px; border: none;
    border-radius: var(--radius-md); cursor: pointer; transition: opacity var(--t-fast), transform var(--t-fast);
}
.btn-contact-send:hover { opacity: .9; transform: translateY(-1px); }

/* Avisos del formulario (éxito / error) */
.contact-alert {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-6);
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--sp-6);
}
.contact-alert-ok  { background: rgba(82, 207, 119, .1); border: 1px solid rgba(82, 207, 119, .3); color: var(--green); }
.contact-alert-err { background: rgba(255, 70, 85, .1);  border: 1px solid rgba(255, 70, 85, .3);  color: var(--brand-accent); }