/* Contenedor principal */
.contacto-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto; 
}
/* Columna secundaria (la delgada) */
.columna-info {
    width: 390px;
    flex-shrink: 0; /* Evita que se encoja */
}
/* Columna principal (formulario) */
.columna-form {
    flex: 1; /* Ocupa todo el espacio restante */
    min-width: 0; /* Evita desbordamientos de flex */
}


/* Columna secundaria (Info): 32.5% del total */
.columna-info {
    flex: 1 1 calc(32.5% - 40px);
    max-width: 390px;
    min-width: 320px;
}

/* Columna principal (Form): 67.5% del total */
.columna-form {
    flex: 1 1 calc(67.5% - 20px);
}

/* Cambio de comportamiento a los 700px */
@media (max-width: 700px) {
    .columna-info, 
    .columna-form {
        width: 100%;
        flex-basis: 100%;
    }

    .columna-info {
        order: 2; /* Manda la columna chica abajo */
    }
}
.infobox{
    width:calc( 100% - 40px );
    height:auto;
    overflow:hidden;
    background-color:var(--bg-card);
    border-radius:14px;
    padding:20px;
}