:root {
    --color-principal: #3b4a94;
    --color-acento: #129dfe;
    --color-naranja: #e65100;
    /* Añadida para consistencia */
    --fuente-global: 'Roboto Condensed', sans-serif;
    --degradado-portada: linear-gradient(103deg, rgb(59, 74, 148) 15%, rgba(18, 157, 254, 0) 100%);
}

.contacto-main { padding-top: 50px}

.contacto-hero {
    display: flex;
    padding: 0 9%;
    gap: 50px;
    align-items: center;
}

.form-container { flex: 1; }
.form-container h1 { color: var(--color-principal); font-size: 2.5rem; margin-bottom: 20px; }

form { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.form-container p1{
    color: var(--color-principal); font-size: 16px; margin-bottom:0px;
}

input, select, textarea {
    padding: 15px;
    border: 0px solid #ddd;
    border-radius: 15px;
    font-family: var(--fuente-global);
    background-color: #f2f2f2;
}

input::placeholder, textarea::placeholder{
    color: var(--color-principal)!important;
}

.form-container p{
     color: var(--color-principal);
}

.form-container select{
     color: var(--color-principal);
}

button {
    background-color: var(--color-principal);
    color: white;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
    transition: 0.3s;
}

button:hover { background-color: var(--color-acento); }

.contacto-img { flex: 1; display: flex; justify-content: center; }
.contacto-img img { width: 100%; border-radius: 20px; object-fit: cover; }

.ubicaciones-section {
    padding: 80px 9%;
    background-color: white;
}

.ubicaciones-section h2 {
    color: var(--color-principal);
    margin-bottom: 0px;
    text-align: left;
    font-size: 18px;
}

.mapas-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 40px;
}

.mapa-box h3 { color: var(--color-naranja); margin-bottom: 10px; }
.mapa-box p { margin-bottom: 20px; font-weight: 100; color: var(--color-principal);}

/* Responsivo para celulares */
@media (max-width: 768px) {
    .mapas-container {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
    }
}

/* Ajuste móvil */
@media (max-width: 768px) {
    .contacto-hero { flex-direction: column; text-align: center; }
}