/* Y añade este margen al mapa, si necesitas separarlo del footer */
.mapa-container {
    margin-bottom: 0; /* Asegura que el mapa no empuje al footer con su margen */
}

/* Título de la Sección */
.contacto .section-title {
    font-size: 2.8em; /* Título más grande para un impacto visual fuerte */
    color: #007aa3; /* Azul oscuro corporativo */
    text-align: center;
    margin-bottom: 60px; /* Más espacio debajo del título */
    font-weight: 900; /* Usa el peso más alto de la fuente (si está cargado) */
    position: relative;
    letter-spacing: 1px; /* Espaciado sutil para mayor elegancia */
}

/* Línea de Acento Sutil */
.contacto .section-title::after {
    content: '';
    display: block;
    width: 80px; /* Más ancho para balancear el título grande */
    height: 5px; /* Más grueso */
    margin: 15px auto 0;
    background: #0077b6; 
    border-radius: 3px;
}

/* Contenedor Flex para el Formulario y la Info */
.contacto-container {
    display: flex;
    flex-wrap: wrap;
    gap: 70px; /* Más separación entre los bloques */
    justify-content: center;
    /* Alineación al inicio: si los bloques tienen diferente altura, se mantendrán arriba */
    align-items: flex-start; 
}





.contacto-form {
    flex: 1 1 350px; /* Permite que crezca un poco más */
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Más espacio entre los campos */
    background-color: #fff;
    padding: 35px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Sombra más suave */
}

.contacto-form label {
    font-weight: 600; /* Menos negrita que 'bold' */
    color: #333; /* Color oscuro neutral */
    font-size: 1.05em;
}

.contacto-form input,
.contacto-form textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px; /* Bordes más suaves */
    font-size: 1em;
    background-color: #fcfcfc;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contacto-form input:focus,
.contacto-form textarea:focus {
    border-color: #0077b6; /* Borde de color al enfocar */
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1); /* Anillo de foco sutil */
}

.contacto-form button {
    background-color: #0077b6;
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.contacto-form button:hover {
    background-color: #023e8a;
    transform: translateY(-2px); /* Efecto de elevación al hacer hover */
}





/* Información de Contacto y Mapa (Asegurando la coherencia) */
.contacto-info {
    flex: 1 1 300px; /* Permite más crecimiento y coherencia con el form */
    max-width: 400px;
    background-color: #ffffff;
    padding: 35px; /* Mismo padding que el formulario */
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Título principal del bloque (h3) - Modificación para usar el color principal */
.contacto-info h3 {
    color: #003b6f; /* Azul corporativo oscuro */
    font-size: 24px;
    font-weight: 700;
    border-bottom: 3px solid #0077b6; /* Línea de acento azul */
    padding-bottom: 10px;
    margin-bottom: 25px;
}

/* Subtítulo para "Contacto Institucional" (h4) */
.contact-lider {
    font-size: 18px;
    color: #003b6f;
    font-weight: 600;
    margin-top: 30px; 
    margin-bottom: 10px;
    padding-left: 0; /* Asegura que no haya padding si el contacto-item lo tiene */
}

/* Estilo para cada línea de información (Teléfono, Correo, Dirección, etc.) */
.contact-item {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

/* Estilo para el icono de Font Awesome (i) */
.contact-item i {
    color: #0077b6; /* Color de acento para el icono */
    font-size: 1.1em;
    margin-right: 12px;
    width: 20px; 
    text-align: center;
    padding-top: 2px; 
}

/* Estilo para el texto en negrita dentro del contact-item (ej. "Teléfono:") */
.contact-item strong {
    color: #333;
    font-weight: 600;
    margin-right: 5px;
}