/* ========================================
   DEA Consulting - CONTACTOS CSS
   Versión moderna + azul más corporativo
   ======================================== */

:root {
    --navy: #081C33;
    --navy-2: #0E2A47;
    --navy-3: #1B3A5B;
    --primary: #2FA4D9;
    --primary-light: #5BC0EB;
    --gold: #b08d57;
    --text: #081C33;
    --muted: #6b7c93;
    --muted-2: #8fa1b5;
    --bg: #f4f8fc;
    --card: #ffffff;
    --line: rgba(8, 28, 51, 0.08);
    --shadow: 0 20px 60px rgba(8, 28, 51, 0.12);
    --radius: 20px;
    --transition: all 0.3s ease;
}

/* BASE */
body {
    background: linear-gradient(180deg, #f4f8fc 0%, #eef3f9 100%);
    color: var(--text);
}

/* CONTENEDOR */
.contactos-page {
    max-width: 1180px;
    margin: auto;
    padding: 50px 20px;
}

/* HEADER */
.contactos-header {
    text-align: center;
    margin-bottom: 40px;
}

    .contactos-header h1 {
        font-size: 34px;
        font-weight: 900;
        color: var(--navy);
        margin-bottom: 12px;
    }

    .contactos-header p {
        color: var(--muted);
        max-width: 700px;
        margin: auto;
        line-height: 1.7;
    }

    .contactos-header strong {
        color: var(--primary);
    }

/* GRID */
.contactos-grid {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 28px;
}

/* TARJETAS */
.contacto-card,
.form-card {
    background: var(--card);
    border-radius: var(--radius);
    padding: 28px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

    /* IZQUIERDA */
    .contacto-card h3 {
        font-weight: 800;
        margin-bottom: 20px;
        color: var(--navy);
    }

.contacto-item {
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
}

.contacto-icon {
    width: 48px;
    height: 48px;
    background: rgba(47, 164, 217, 0.1);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.contacto-text strong {
    display: block;
    font-size: 14px;
}

.contacto-text a,
.contacto-text span {
    color: var(--muted);
    font-size: 14px;
}

    .contacto-text a:hover {
        color: var(--primary);
    }

/* REDES */
.social-section {
    margin-top: 25px;
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-link {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--line);
    transition: var(--transition);
}

    .social-link:hover {
        transform: translateY(-3px);
        border-color: var(--primary);
    }

/* FORMULARIO */
.form-card h3 {
    font-weight: 800;
    margin-bottom: 20px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.form-control {
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    font-size: 14px;
    transition: var(--transition);
}

    .form-control:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(47, 164, 217, 0.18);
        outline: none;
    }

textarea.form-control {
    min-height: 150px;
}

/* BOTÓN */
.btn-enviar {
    width: 100%;
    padding: 16px;
    border-radius: 999px;
    border: none;
    font-weight: 800;
    letter-spacing: 1px;
    color: white;
    background: linear-gradient(135deg, #0E2A47, #2FA4D9);
    cursor: pointer;
    transition: var(--transition);
}

    .btn-enviar:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(47, 164, 217, 0.3);
    }

/* RESPONSIVE */
@media (max-width: 900px) {
    .contactos-grid {
        grid-template-columns: 1fr;
    }
}